/* ============================================================
   Theme — loaded LAST. Two layers applied over the light
   component sheets:
     1. Dark theme — the whole site mirrors the contact band.
     2. Cream bands — two light "beats" (Values + Positioning)
        and the cream menu bar.
   Order matters: these overrides depend on the component
   styles above and must cascade after them.
   ============================================================ */

/* ====================================================================== */
/* ============== DARK THEME — whole site mirrors the contact ========== */
/* ====================================================================== */
:root{ --hairline:1px solid var(--dark-line); --edge:1px solid var(--dark-line); }
body{ background:var(--pitch); color:var(--dark-text); }
::selection{ background:var(--ember); color:#fff; }

/* ambient glow that sits behind everything */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(55% 45% at 82% -8%, rgba(107,46,138,.20), transparent 62%),
    radial-gradient(48% 40% at -6% 26%, rgba(61,26,74,.24), transparent 60%),
    radial-gradient(60% 50% at 50% 118%, rgba(107,46,138,.16), transparent 60%);
}
header,main,section,footer{ position:relative; z-index:1; }

/* Nav */
.topbar{ background:rgba(10,5,16,.72); border-bottom:1px solid var(--dark-line); }
.brand{ color:var(--dark-text); }
.nav{ color:var(--dark-mute); }
.nav .cta{ border-color:var(--dark-line); color:var(--dark-text); }
.nav .cta:hover{ background:var(--dark-text); color:var(--pitch); }
.nav .cta:hover .a{ color:var(--ember); }

/* Buttons → ember primary like the contact panel */
.btn.primary{ background:var(--ember); color:#fff; }
.btn.primary:hover{ background:#e63d1f; }
.btn.primary .a{ color:#fff; }
.btn.ghost{ color:var(--dark-text); border-color:var(--dark-line); }
.btn.ghost:hover{ border-color:var(--dark-text); }

/* Hero */
.hero{ border-bottom:1px solid var(--dark-line); }
.hero::before{ display:none; }
.hero h1{ color:var(--dark-text); }
.hero h1 em{ color:var(--orchid); }
.hero .lede{ color:var(--dark-mute); }
.hero .lede em{ color:var(--orchid); }
.hero-disc{ box-shadow:none; }
.hero-meta{ border-top:1px solid var(--dark-line); }
.hero-meta .item{ color:var(--dark-mute); }
.hero-meta .item strong{ color:var(--dark-text); }

/* Section frame */
.block{ border-bottom:1px solid var(--dark-line); }
.sec-head .num{ color:var(--dark-text); }
.sec-head h2{ color:var(--dark-text); }
.sec-head h2 em{ color:var(--orchid); }
.sec-head .intro{ color:var(--dark-mute); }

/* Mission columns */
.approach{ border-top:1px solid var(--dark-line); border-bottom:1px solid var(--dark-line); }
.approach .col{ border-right:1px solid var(--dark-line); }
.approach h3{ color:var(--dark-text); }
.approach p{ color:var(--dark-mute); }
@media(max-width:860px){ .approach .col{ border-right:0; border-bottom:1px solid var(--dark-line); } .approach .col:last-child{ border-bottom:0; } }

/* Values steps */
.step{ border-top:1px solid var(--dark-line); }
.step:last-child{ border-bottom:1px solid var(--dark-line); }
.step .k .big{ color:var(--dark-text); }
.step h3{ color:var(--dark-text); }
.step p{ color:var(--dark-mute); }

/* Work cards */
.work-card{ background:var(--dark-surface); border:1px solid var(--dark-line); }
.work-card:hover{ box-shadow:0 28px 60px -30px rgba(0,0,0,.85), 0 0 0 1px var(--dark-line); }
.work-card .body h3{ color:var(--dark-text); }
.work-card .body p{ color:var(--dark-mute); }
.work-card .meta{ border-top:1px solid var(--dark-line); color:var(--dark-mute); }
.work-note{ color:var(--dark-mute); }

/* Positioning */
.about p{ color:var(--dark-mute); }
.about .pull{ color:var(--dark-text); }
.about .pull em{ color:var(--orchid); }
.about-stats{ background:var(--dark-line); border:1px solid var(--dark-line); }
.about-stats .s{ background:var(--dark-surface); }
.about-stats .s strong{ color:var(--dark-text); }
.about-stats .s span{ color:var(--dark-mute); }

/* Services (icons) if present */
.services{ border-top:1px solid var(--dark-line); }
.svc{ border-bottom:1px solid var(--dark-line); }
.svc:nth-child(odd){ border-right:1px solid var(--dark-line); }
.svc .ic{ border:1px solid var(--dark-line); }
.svc .ic svg{ stroke:var(--dark-text); }
.svc h3{ color:var(--dark-text); }
.svc p{ color:var(--dark-mute); }
.svc .idx{ color:var(--dark-mute); }

/* Footer — sits a touch above pitch */
footer{ background:var(--aubergine); border-top:1px solid var(--dark-line); }

/* ====== Cream menu bar (lets the original dark mark read in the corner) ====== */
.topbar{ background:rgba(240,238,232,.85); border-bottom:1px solid #C9C2BD; }
.topbar .brand{ color:var(--ink); }
.topbar .nav{ color:var(--ash); }
.topbar .nav a:hover{ color:var(--ember); }
.topbar .nav .cta{ border-color:#C9C2BD; color:var(--ink); }
.topbar .nav .cta:hover{ background:var(--ink); color:var(--cream); }
.topbar .nav .cta:hover .a{ color:var(--ember); }

/* ====================================================================== */
/* ============== CREAM BANDS — two-beat: Values + Positioning ========= */
/* ====================================================================== */
.band-cream{ background:var(--cream); border-top:1px solid #C9C2BD; border-bottom:1px solid #C9C2BD; }
.band-cream .eyebrow{ color:var(--ash); }
.band-cream .sec-head .num{ color:var(--ink); }
.band-cream .sec-head h2{ color:var(--ink); }
.band-cream .sec-head h2 em{ color:var(--plum); }
.band-cream .sec-head .intro{ color:#3a2f43; }

/* Values steps on cream */
.band-cream .step{ border-top:1px solid var(--mist); }
.band-cream .step:last-child{ border-bottom:1px solid var(--mist); }
.band-cream .step .k{ color:var(--ember); }
.band-cream .step .k .big{ color:var(--ink); }
.band-cream .step h3{ color:var(--ink); }
.band-cream .step p{ color:var(--ash); }

/* Positioning on cream */
.band-cream .about p{ color:#3a2f43; }
.band-cream .about .pull{ color:var(--ink); }
.band-cream .about .pull em{ color:var(--plum); }
.band-cream .about-stats{ background:var(--mist); border:1px solid var(--mist); }
.band-cream .about-stats .s{ background:var(--bone); }
.band-cream .about-stats .s strong{ color:var(--ink); }
.band-cream .about-stats .s span{ color:var(--ash); }