/* ============================================================
   COLOUR GUIDE — Uqesh (materials). 1:1 with MpPc8. Fluid / rem. Light.
   ============================================================ */

/* Hero */
.cg-hero{ display:flex; align-items:flex-end; gap:5rem; padding-block:3.5rem 0; }
.cg-intro{ flex:1 1 0; display:flex; flex-direction:column; gap:1rem; }
.cg-crumb{ font-family:var(--font-display); font-weight:700; font-size:0.719rem; letter-spacing:.1em; color:var(--text-secondary); margin:0; }
.cg-title{ font-family:var(--font-display); font-weight:800; font-size:3.25rem; letter-spacing:-.01em; line-height:1; color:var(--text-primary); margin:0; }
.cg-sub{ font-size:0.9375rem; line-height:1.55; color:var(--text-secondary); max-width:33.75rem; margin:0; }
.cg-meta{ display:flex; flex-wrap:wrap; gap:1.75rem; font-family:var(--font-display); font-weight:600; font-size:0.719rem; letter-spacing:.04em; color:var(--text-secondary); margin-top:0.25rem; }
.cg-bars{ display:flex; align-items:flex-end; gap:0.625rem; flex:none; }
.cg-bar{ display:block; width:3.875rem; border-radius:0.1875rem 0.1875rem 0 0; border:1px solid rgba(0,0,0,.07); }

/* PU colour selection */
.cg-pu{ display:flex; flex-direction:column; gap:1.25rem; padding-block:3rem 1.25rem; }
.cg-hdr{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.cg-h2{ font-family:var(--font-display); font-weight:800; font-size:1.375rem; letter-spacing:.01em; color:var(--text-primary); margin:0; }
.cg-hdr-l{ font-family:var(--font-display); font-weight:700; font-size:0.781rem; letter-spacing:.04em; color:var(--text-primary); white-space:nowrap; }
.cg-hdr-l:hover{ color:var(--brand); }
.cg-hint{ font-size:0.813rem; font-style:italic; color:var(--text-secondary); margin:0; }
.cg-grid{ display:grid; grid-template-columns:repeat(10,1fr); column-gap:0.75rem; row-gap:1.125rem; }
.cg-sw{ display:flex; flex-direction:column; gap:0.375rem; }
.cg-chip{ display:block; height:3.25rem; border-radius:0.1875rem; border:1px solid rgba(0,0,0,.08); transition:border-color .15s, transform .15s; }
.cg-sw:hover .cg-chip{ border-color:var(--brand); transform:translateY(-2px); }
.cg-code{ font-family:var(--font-display); font-weight:700; font-size:0.625rem; letter-spacing:.08em; color:var(--text-secondary); }
.cg-nm{ font-size:0.719rem; line-height:1.25; color:var(--text-primary); }
.cg-fnote{ font-size:0.719rem; font-style:italic; line-height:1.5; color:var(--text-secondary); margin:0; }

/* Flake blends */
.cg-flake{ background:var(--surface); }
.cg-flake .wrap{ display:flex; flex-direction:column; gap:1.125rem; padding-block:3.25rem; }
.cg-hdr-txt{ display:flex; flex-direction:column; gap:0.5rem; }
.cg-hdr-sub{ font-size:0.844rem; color:var(--text-secondary); margin:0; }
.cg-flake-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.125rem; }
.cg-blend{ display:flex; align-items:center; gap:0.625rem; }
.cg-blend-sw{ flex:none; width:2.125rem; height:2.125rem; border-radius:0.1875rem; border:1px solid rgba(0,0,0,.08); }
.cg-blend-t{ display:flex; flex-direction:column; gap:0.0625rem; min-width:0; }
.cg-blend-n{ font-family:var(--font-display); font-weight:700; font-size:0.813rem; color:var(--text-primary); }
.cg-blend-c{ font-family:var(--font-display); font-weight:600; font-size:0.656rem; letter-spacing:.04em; color:var(--text-secondary); }

/* CTA */
.cg-cta{ display:flex; flex-direction:column; align-items:center; gap:1.125rem; background:#E0E2DD; padding:4rem 3rem; text-align:center; }
.cg-cta-eyebrow{ font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:.1em; color:var(--text-secondary); margin:0; }
.cg-cta-h{ font-family:var(--font-display); font-weight:800; font-size:1.875rem; color:var(--text-primary); max-width:40rem; margin:0; }
.cg-cta-btn{ margin-top:0.5rem; }

/* Responsive */
@media (max-width:1100px){
  .cg-grid{ grid-template-columns:repeat(5,1fr); }
  .cg-flake-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .cg-hero{ flex-direction:column; align-items:stretch; gap:2rem; }
  .cg-bars{ display:none; }
  .cg-title{ font-size:2.5rem; }
  .cg-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:560px){
  .cg-grid{ grid-template-columns:repeat(3,1fr); }
  .cg-flake-grid{ grid-template-columns:1fr; }
  .cg-hdr{ flex-direction:column; align-items:flex-start; gap:0.5rem; }
  .cg-hdr-l{ white-space:normal; }
}