/* ==========================================================================
   Wisqora - site stylesheet
   Brand palette is locked (see README.md). Navy grounds carry the brand,
   cream carries long-form content, gold stays a hairline accent.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  /* ground - four depth tiers so dark bands read as layers, not a flat plane */
  --ink-950:#050C16;   /* page / deepest */
  --ink-900:#0B1A2E;   /* section */
  --ink-850:#0E2038;   /* raised blocks (stats cells, cards, testimonials) */
  --ink-800:#122443;   /* control / hover */
  --ink-700:#1A3054;   /* top-edge rim on raised blocks */

  /* light ground - green cast removed, trends toward old-money paper */
  --cream:#F7F2E7;
  --cream-2:#EFE8D6;
  --cream-3:#E6DDC7;

  /* accent - brighter editorial gold; -hi/-bright reserved for small-text
     crispness and micro-sparkle respectively */
  --gold:#CFA85C;
  --gold-hi:#ECCB80;
  --gold-bright:#F2D084;
  --gold-dark:#9B7A2E;
  --gold-ink:#7F6020;

  /* text */
  --on-ink:#F1EEE6;
  --on-ink-bright:#FFFFFF;    /* reserved: stat sparkle, hero flashes only */
  --on-ink-body:#C2CBD8;
  --on-ink-muted:#8A97A8;
  --on-cream:#0B1A2E;
  --on-cream-body:#3F4A57;
  --on-cream-muted:#5A6472;   /* 5.3:1 on cream - #66707D was 4.42:1, under AA */

  /* hairlines - two opacities only. loud mid-tones removed. */
  --line-gold:rgba(207,168,92,.18);
  --line-gold-soft:rgba(207,168,92,.10);
  --line-ink:rgba(11,26,46,.08);
  --line-on-ink:rgba(241,238,230,.07);

  /* polish - 1px top-highlight on raised dark surfaces */
  --sheen:inset 0 1px 0 rgba(255,255,255,.045);
  --sheen-strong:inset 0 1px 0 rgba(255,255,255,.07);

  /* type */
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm - 4/8 based */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section-y:clamp(72px, 9vw, 132px);
  --gutter:clamp(20px, 4vw, 40px);
  --maxw:1180px;
  --header-h:72px;

  /* motion */
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:150ms;
  --t-base:240ms;
  --t-slow:420ms;

  --radius:3px;
  --radius-lg:6px;
}

/* ----------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 24px);}
html,body{margin:0; padding:0;}

body{
  background:var(--ink-950);
  color:var(--on-ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden;}

img,svg{max-width:100%;}
a{color:inherit;}
p{margin:0;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{
  margin:0; font-weight:600; line-height:1.1;
  letter-spacing:-.025em; text-wrap:balance;
}
h1{font-size:clamp(2.5rem, 6.2vw, 4.7rem); letter-spacing:-.035em;}
h2{font-size:clamp(1.85rem, 3.9vw, 3rem);}
h3{font-size:clamp(1.2rem, 2.1vw, 1.55rem); letter-spacing:-.02em;}

::selection{background:var(--gold); color:var(--ink-950);}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;}
/* Gold is only 1.97:1 against cream, so the ring all but vanishes on the light
   sections. There it switches to ink. */
.band-cream :focus-visible,.band-cream-2 :focus-visible,.p-light :focus-visible{
  outline-color:var(--ink-900);
}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
.wrap-narrow{max-width:860px;}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink-950);
  padding:12px 20px; font-weight:600; font-size:.85rem;
}
.skip:focus{left:12px; top:12px;}

/* ------------------------------------------------- ambient page texture -- */
.ambient{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  contain:strict;
}
.ambient::before{ /* hairline technical grid */
  content:""; position:absolute; inset:-1px;
  background-image:
    linear-gradient(to right, rgba(207,168,92,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(207,168,92,.055) 1px, transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 130% 85% at 50% 0%, #000 12%, transparent 72%);
}
.ambient::after{ /* gold bloom */
  content:""; position:absolute; top:-30vh; right:-18vw;
  width:82vw; height:82vw; max-width:1100px; max-height:1100px;
  background:radial-gradient(circle, rgba(207,168,92,.12) 0%, rgba(207,168,92,.045) 34%, transparent 66%);
}
.on-light .ambient::before{background-image:none;}

/* ------------------------------------------------------------- headings -- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:.7rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; margin:0;
  color:var(--gold-hi); /* bumped from --gold for sharpness at small size */
}
.eyebrow::before{
  content:""; width:5px; height:5px; flex:none;
  background:var(--gold-hi); border-radius:50%;
}
.eyebrow.on-cream{color:var(--gold-ink);}
.eyebrow.on-cream::before{background:var(--gold-dark);}
.eyebrow.plain::before{display:none;}

.rule{width:52px; height:1px; background:var(--gold); margin-top:var(--s-5); opacity:.8;}
.rule.on-cream{background:var(--gold-dark);}

.lead{font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--on-ink-body); max-width:60ch;}
.lead.on-cream{color:var(--on-cream-body);}

.gold-text{
  background:linear-gradient(103deg, var(--gold-hi) 8%, var(--gold) 52%, var(--gold-dark) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.sec-head{max-width:62ch;}
.sec-head h2{margin-top:var(--s-4);}
.sec-head .lead{margin-top:var(--s-5);}

.num{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; color:var(--gold-hi); opacity:.85;
}

/* -------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:.85em 1.6em;
  font-family:var(--sans); font-size:.875rem; font-weight:600; letter-spacing:.02em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--radius);
  transition:background var(--t-fast) var(--e-soft),
             color var(--t-fast) var(--e-soft),
             border-color var(--t-fast) var(--e-soft),
             box-shadow var(--t-base) var(--e-soft),
             transform var(--t-base) var(--e-out);
}
.btn svg{width:16px; height:16px; flex:none; transition:transform var(--t-base) var(--e-out);}
.btn:hover svg.arr{transform:translateX(4px);}

.btn-gold{
  background:var(--gold); color:var(--ink-950); border-color:var(--gold);
  box-shadow:0 0 0 0 rgba(207,168,92,.4);
}
.btn-gold:hover{background:var(--gold-hi); border-color:var(--gold-hi); box-shadow:0 8px 30px -10px rgba(207,168,92,.6); transform:translateY(-1px);}
.btn-ghost{border-color:rgba(207,168,92,.4); color:var(--gold); background:rgba(207,168,92,.04);}
.btn-ghost:hover{background:rgba(207,168,92,.12); border-color:var(--gold); transform:translateY(-1px);}
.btn-ink{background:var(--ink-900); color:var(--cream); border-color:var(--ink-900);}
.btn-ink:hover{background:var(--ink-800); transform:translateY(-1px);}
.btn-line-ink{border-color:rgba(11,26,46,.3); color:var(--ink-900);}
.btn-line-ink:hover{background:rgba(11,26,46,.05); border-color:var(--ink-900);}
.btn-sm{min-height:40px; padding:.55em 1.1em; font-size:.8rem;}

.textlink{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; font-weight:600; letter-spacing:.02em;
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(207,168,92,.3);
  padding-bottom:2px;
  transition:border-color var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft);
}
.textlink svg{width:14px; height:14px; transition:transform var(--t-base) var(--e-out);}
.textlink:hover{border-color:var(--gold); color:var(--gold-hi);}
.textlink:hover svg{transform:translateX(4px);}
.textlink.on-cream{color:var(--gold-ink); border-color:rgba(122,92,27,.35);}
.textlink.on-cream:hover{color:var(--ink-900); border-color:var(--ink-900);}

/* -------------------------------------------------------- scroll progress -- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  z-index:120; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-hi));
  pointer-events:none;
}

/* --------------------------------------------------------------- header -- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background var(--t-base) var(--e-soft),
             border-color var(--t-base) var(--e-soft),
             backdrop-filter var(--t-base) var(--e-soft);
  border-bottom:1px solid transparent;
}
.site-header.stuck{
  background:rgba(5,12,22,.72);
  -webkit-backdrop-filter:saturate(170%) blur(18px);
  backdrop-filter:saturate(170%) blur(18px);
  border-bottom-color:var(--line-gold-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
  height:var(--header-h);
}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none;}
.brand .qmark{width:30px; height:30px; flex:none;}
.brand .wordmark{
  font-size:.95rem; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:var(--on-ink); padding-left:.3em;
}
.brand:hover .qmark{filter:drop-shadow(0 0 10px rgba(207,168,92,.5));}
.brand .qmark{transition:filter var(--t-base) var(--e-soft);}

.nav{display:flex; align-items:center; gap:var(--s-6);}
.nav a{
  position:relative; text-decoration:none; color:var(--on-ink-muted);
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 0;
  transition:color var(--t-fast) var(--e-soft);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-base) var(--e-out);
}
.nav a:hover{color:var(--gold);}
.nav a:hover::after{transform:scaleX(1);}
.nav a[aria-current="page"]{color:var(--on-ink);}
.nav a[aria-current="page"]::after{transform:scaleX(1); background:var(--gold);}

.header-cta{display:inline-flex;}

.nav-toggle{
  display:none; width:48px; height:48px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-on-ink); border-radius:var(--radius);
  color:var(--on-ink); cursor:pointer; flex:none;
}
.nav-toggle:hover{border-color:var(--gold); color:var(--gold);}
.nav-toggle svg{width:20px; height:20px;}
.nav-toggle .ic-close{display:none;}
.nav-toggle[aria-expanded="true"] .ic-open{display:none;}
.nav-toggle[aria-expanded="true"] .ic-close{display:block;}

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:99;
  background:rgba(5,12,22,.98);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  padding:var(--s-7) var(--gutter) var(--s-8);
  display:flex; flex-direction:column; gap:var(--s-2);
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--t-base) var(--e-soft), transform var(--t-base) var(--e-out), visibility var(--t-base);
}
.mobile-nav.open{opacity:1; visibility:visible; transform:none;}
.mobile-nav a.m-link{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:18px 0; text-decoration:none;
  border-bottom:1px solid var(--line-on-ink);
  font-size:1.35rem; font-weight:600; letter-spacing:-.02em; color:var(--on-ink);
}
.mobile-nav a.m-link .idx{font-family:var(--mono); font-size:.72rem; color:var(--gold); letter-spacing:.14em;}
.mobile-nav a.m-link[aria-current="page"]{color:var(--gold);}
.mobile-nav .btn{margin-top:var(--s-6);}
.mobile-nav .m-contact{margin-top:var(--s-6); display:flex; flex-direction:column; gap:10px;}
.mobile-nav .m-contact a{
  font-family:var(--mono); font-size:.8rem; color:var(--on-ink-body); text-decoration:none;
}
.mobile-nav .m-contact a:hover{color:var(--gold);}

@media (max-width:940px){
  .nav,.header-cta{display:none;}
  .nav-toggle{display:inline-flex;}
}

/* --------------------------------------------------------------- footer -- */
.site-footer{
  position:relative; z-index:1;
  background:var(--ink-950);
  border-top:1px solid var(--line-gold-soft);
  padding-block:var(--s-8) var(--s-6);
}
.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--s-7);
  padding-bottom:var(--s-7); border-bottom:1px solid var(--line-on-ink);
}
.foot-grid .f-strap{
  margin-top:var(--s-4); color:var(--on-ink-muted);
  font-size:.85rem; max-width:34ch;
}
.foot-grid .f-tag{
  margin-top:var(--s-4); font-family:var(--mono); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.f-h{
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-ink-muted); margin-bottom:var(--s-4);
}
.f-list{display:flex; flex-direction:column; gap:10px;}
.f-list a{
  text-decoration:none; color:var(--on-ink-body); font-size:.88rem;
  transition:color var(--t-fast) var(--e-soft);
}
.f-list a:hover{color:var(--gold);}
.foot-base{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  flex-wrap:wrap; padding-top:var(--s-5);
}
.foot-base span{font-size:.78rem; color:var(--on-ink-muted);}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; gap:var(--s-6);} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr;} }

/* ---------------------------------------------------------------- shell -- */
main{position:relative; z-index:1;}
.section{padding-block:var(--section-y);}
.section.tight{padding-block:calc(var(--section-y) * .66);}
.band-cream{background:var(--cream); color:var(--on-cream);}
.band-cream-2{background:var(--cream-2); color:var(--on-cream);}
/* 2° vertical gradient gives the page gravity without reading as a gradient */
.band-ink{background:linear-gradient(180deg,var(--ink-900) 0%,var(--ink-950) 100%);}
.band-ink-deep{background:linear-gradient(180deg,var(--ink-950) 0%,#030810 100%);}
.band-cream h1,.band-cream h2,.band-cream h3,
.band-cream-2 h1,.band-cream-2 h2,.band-cream-2 h3{color:var(--ink-900);}

/* ----------------------------------------------------------------- hero -- */
.hero{
  position:relative;
  padding-top:calc(var(--header-h) + clamp(56px, 9vw, 110px));
  padding-bottom:clamp(48px, 7vw, 88px);
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.hero h1{margin-top:var(--s-5); max-width:13ch; color:var(--on-ink);}
.hero .strap{
  margin-top:var(--s-5); font-family:var(--mono);
  font-size:.74rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold);
}
.hero .lead{margin-top:var(--s-5); max-width:52ch;}
.hero-ctas{display:flex; gap:var(--s-3); margin-top:var(--s-7); flex-wrap:wrap;}

.hero-trust{margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--line-on-ink);}
.hero-trust .t-lab{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-ink-muted);
}
.hero-trust .t-names{
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-top:12px;
}
.hero-trust .t-names span{
  font-size:.86rem; font-weight:500; color:var(--on-ink-body); letter-spacing:.01em;
}
.hero-trust .t-names span + span{position:relative;}
.hero-trust .t-names span + span::before{
  content:""; position:absolute; left:calc(var(--s-5) / -2 - 1px); top:50%;
  width:3px; height:3px; border-radius:50%; background:var(--gold); opacity:.6;
  transform:translateY(-50%);
}

/* animated mark */
.hero-mark{display:flex; justify-content:center; align-items:center;}
.hero-mark svg{width:min(400px,100%); height:auto; overflow:visible;}
.hero-mark .r-outer,.hero-mark .r-mid{transform-box:view-box; transform-origin:100px 100px;}
.hero-mark .r-outer{animation:spin 64s linear infinite;}
.hero-mark .r-mid{animation:spin 42s linear infinite;}
.hero-mark .r-pulse{animation:breathe 6s var(--e-soft) infinite;}
.hero-mark .orbit{transform-box:view-box; transform-origin:100px 100px; animation:spin 14s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes breathe{0%,100%{opacity:.16;} 50%{opacity:.4;}}

@media (max-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:var(--s-7);}
  .hero-mark{order:-1; justify-content:flex-start;}
  .hero-mark svg{width:min(210px,52%);}
  .hero h1{max-width:16ch;}
}

/* ------------------------------------------------------------ stat band -- */
.stats{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line-gold);
  border-block:1px solid var(--line-gold);
}
.stats .cell{
  background:var(--ink-850); padding:var(--s-6) var(--s-5) var(--s-6);
  box-shadow:var(--sheen);
  transition:background var(--t-base) var(--e-soft);
}
.stats .cell:hover{background:var(--ink-800);}
.stats .fig{
  font-family:var(--mono); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem); line-height:1;
  color:var(--gold-hi); font-variant-numeric:tabular-nums;
}
.stats .cap{
  margin-top:14px; font-size:.86rem; line-height:1.45; color:var(--on-ink-body); max-width:24ch;
}
.stats-note{
  padding-top:var(--s-4); font-size:.75rem; color:var(--on-ink-muted); max-width:78ch;
}
@media (max-width:860px){ .stats{grid-template-columns:1fr 1fr;} }
@media (max-width:460px){ .stats{grid-template-columns:1fr;} }

/* -------------------------------------------------------- service cards -- */
.cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  margin-top:var(--s-8); background:var(--line-gold); border:1px solid var(--line-gold);
}
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--ink-850); padding:var(--s-6) var(--s-6) var(--s-7);
  text-decoration:none; color:inherit; isolation:isolate; overflow:hidden;
  box-shadow:var(--sheen);
  transition:background var(--t-base) var(--e-soft), box-shadow var(--t-base) var(--e-soft);
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(520px 260px at 20% 0%, rgba(207,168,92,.14), transparent 70%);
  transition:opacity var(--t-slow) var(--e-soft);
}
.card:hover{background:var(--ink-800); box-shadow:var(--sheen-strong);}
.card:hover::before{opacity:1;}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4);}
.card .ic{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-gold); border-radius:var(--radius);
  color:var(--gold); background:rgba(207,168,92,.05);
  transition:border-color var(--t-base) var(--e-soft), background var(--t-base) var(--e-soft);
}
.card .ic svg{width:21px; height:21px;}
.card:hover .ic{border-color:var(--gold); background:rgba(207,168,92,.12);}
.card h3{margin-top:var(--s-5); color:var(--on-ink);}
.card .claim{
  margin-top:10px; font-family:var(--mono); font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.card p.body{margin-top:var(--s-4); color:var(--on-ink-body); font-size:.94rem; max-width:44ch;}
.card .go{
  margin-top:var(--s-6); display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
}
.card .go svg{width:14px; height:14px; transition:transform var(--t-base) var(--e-out);}
.card:hover .go svg{transform:translateX(5px);}
@media (max-width:760px){ .cards{grid-template-columns:1fr;} }

/* ---------------------------------------------------------- split panels -- */
.split{display:grid; grid-template-columns:1fr 1fr;}
.split .panel{padding:clamp(40px,5.5vw,72px) clamp(24px,4vw,56px);}
.split .panel h3{margin-top:var(--s-4); font-size:clamp(1.35rem,2.4vw,1.85rem);}
.split .panel p{margin-top:var(--s-4); max-width:38ch;}
.split .p-light{background:var(--cream-2); color:var(--on-cream);}
.split .p-light p{color:var(--on-cream-body);}
.split .p-dark{background:var(--ink-900); color:var(--on-ink);}
.split .p-dark p{color:var(--on-ink-body);}
.split .panel .textlink{margin-top:var(--s-5);}
@media (max-width:760px){ .split{grid-template-columns:1fr;} }

/* -------------------------------------------------------------- cta band -- */
.cta-band{position:relative; overflow:hidden; background:var(--ink-900);}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(760px 380px at 50% 100%, rgba(207,168,92,.16), transparent 70%);
}
.cta-inner{
  position:relative; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding-block:clamp(56px,7vw,96px);
}
.cta-inner h2{margin-top:var(--s-4); max-width:20ch;}
.cta-inner p{margin-top:var(--s-5); max-width:50ch; color:var(--on-ink-body);}
.cta-inner .hero-ctas{justify-content:center;}

/* ----------------------------------------------------- subpage page-hero -- */
.page-hero{
  padding-top:calc(var(--header-h) + clamp(48px,6.5vw,92px));
  padding-bottom:clamp(40px,5.5vw,72px);
  border-bottom:1px solid var(--line-gold-soft);
}
.page-hero h1{
  margin-top:var(--s-5); max-width:16ch; color:var(--on-ink);
  font-size:clamp(2.2rem,5.2vw,3.9rem);
}
.page-hero .lead{margin-top:var(--s-5);}
.page-hero .ph-grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,4vw,64px); align-items:stretch;
}
.ph-aside{display:flex; flex-direction:column; gap:var(--s-6); min-width:0;}
.ph-portrait{
  position:relative; margin:0; overflow:hidden;
  border:1px solid var(--line-gold); border-radius:var(--radius-lg);
  background:var(--ink-850);
  box-shadow:var(--sheen), 0 26px 60px -34px rgba(0,0,0,.75);
}
.ph-portrait img{
  display:block; width:100%; height:auto; aspect-ratio:4/5;
  object-fit:cover; object-position:50% 20%;
}
/* soft gold top rim + ink scrim so the bright shot settles into the dark page */
.ph-portrait::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(207,168,92,.07), transparent 20%),
    linear-gradient(0deg, rgba(5,12,22,.66), transparent 34%);
}
.ph-portrait figcaption{
  position:absolute; left:var(--s-5); bottom:var(--s-4); z-index:1;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-hi);
  text-shadow:0 1px 10px rgba(5,12,22,.8);
}
.ph-facts{display:flex; flex-direction:column; gap:var(--s-4); margin-top:auto;}
.ph-facts .f{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline;
  padding-top:var(--s-3); border-top:1px solid var(--line-on-ink);
}
.ph-facts .f .k{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); white-space:nowrap;
}
.ph-facts .f .v{font-size:.88rem; color:var(--on-ink-body);}
@media (max-width:860px){
  .page-hero .ph-grid{grid-template-columns:minmax(0,1fr);}
  .ph-aside{gap:var(--s-5);}
  .ph-portrait{max-width:340px;}
  .ph-facts{margin-top:0;}
}

/* --------------------------------------------------------- detail blocks -- */
.detail{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(28px,4.5vw,72px);
  padding-block:clamp(48px,6vw,84px);
  border-top:1px solid var(--line-ink);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.detail:first-of-type{border-top:none;}
.detail .d-side{position:sticky; top:calc(var(--header-h) + 32px); align-self:start;}
.detail .d-ic{
  width:48px; height:48px; display:grid; place-items:center;
  border:1px solid rgba(150,116,44,.34); border-radius:var(--radius);
  color:var(--gold-ink); background:rgba(207,168,92,.08);
}
.detail .d-ic svg{width:23px; height:23px;}
.detail h2{margin-top:var(--s-5); font-size:clamp(1.6rem,3vw,2.2rem);}
.detail .d-claim{
  margin-top:var(--s-3); font-family:var(--mono); font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink);
}
.detail .d-body p{color:var(--on-cream-body); max-width:62ch;}
.detail .d-body p + p{margin-top:var(--s-4);}
.detail .d-body .sub-h{
  margin-top:var(--s-6); font-family:var(--mono); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink);
}
.ticks{margin-top:var(--s-4); display:grid; gap:12px;}
.ticks li{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  color:var(--on-cream-body); font-size:.94rem;
}
.ticks li svg{width:16px; height:16px; margin-top:5px; color:var(--gold-dark); flex:none;}
.ticks li strong{color:var(--ink-900); font-weight:600;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s-5);}
.chip{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  border:1px solid rgba(11,26,46,.18); border-radius:var(--radius);
  padding:7px 11px; color:var(--on-cream-body); background:rgba(255,255,255,.4);
}
.chip.on-ink{border-color:var(--line-on-ink); color:var(--on-ink-body); background:rgba(255,255,255,.03);}
@media (max-width:860px){
  .detail{grid-template-columns:minmax(0,1fr); gap:var(--s-5);}
  .detail .d-side{position:static;}
}

/* ------------------------------------------------------------- process -- */
.steps{margin-top:var(--s-8); display:grid; gap:1px; background:var(--line-gold); border:1px solid var(--line-gold);}
.step{
  display:grid; grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);
  gap:var(--s-6); background:var(--ink-850); padding:var(--s-6);
  box-shadow:var(--sheen);
  transition:background var(--t-base) var(--e-soft);
}
.step:hover{background:var(--ink-800);}
.step .s-n{font-family:var(--mono); font-size:2rem; line-height:1; color:var(--gold-hi); opacity:.6;}
.step h3{color:var(--on-ink);}
.step .s-when{
  margin-top:10px; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-muted);
}
.step .s-body p{color:var(--on-ink-body); font-size:.94rem;}
.step .s-body .sub-h{
  margin-top:var(--s-5); font-family:var(--mono); font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.step .s-body .ticks li{color:var(--on-ink-body);}
.step .s-body .ticks li svg{color:var(--gold);}
.step .s-body .ticks li strong{color:var(--on-ink);}
@media (max-width:860px){
  .step{grid-template-columns:1fr; gap:var(--s-4);}
  .step .s-n{font-size:1.4rem;}
}

/* ------------------------------------------------------ principles grid -- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-ink); border:1px solid var(--line-ink); margin-top:var(--s-7);}
.grid-3 .g{background:var(--cream); padding:var(--s-6);}
.grid-3 .g h3{font-size:1.1rem;}
.grid-3 .g p{margin-top:var(--s-3); color:var(--on-cream-body); font-size:.92rem;}
.grid-3 .g .num{display:block; margin-bottom:var(--s-4); color:var(--gold-ink);}
@media (max-width:860px){ .grid-3{grid-template-columns:1fr;} }

/* --------------------------------------------------------- story blocks -- */
.story{
  display:grid; grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);
  gap:clamp(24px,4vw,64px);
  padding-block:clamp(44px,5.5vw,76px);
  border-top:1px solid var(--line-gold-soft);
}
.story .st-side .st-where{font-size:1.3rem; font-weight:600; letter-spacing:-.02em; color:var(--on-ink);}
.story .st-side .st-when{
  margin-top:8px; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-muted);
}
.story .st-side .st-metric{
  margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--line-gold);
}
.story .st-side .st-metric .m{
  font-family:var(--mono); font-size:1.65rem; line-height:1.15; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.story .st-side .st-metric .m + .m{margin-top:6px;}
.story .st-body h3{color:var(--on-ink); max-width:24ch;}
.story .st-body .beat{margin-top:var(--s-5);}
.story .st-body .beat .b-k{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.story .st-body .beat p{margin-top:10px; color:var(--on-ink-body); max-width:64ch;}
@media (max-width:860px){ .story{grid-template-columns:minmax(0,1fr); gap:var(--s-5);} }

/* pull quote */
.pull{
  margin-top:var(--s-7); padding:var(--s-6) 0 var(--s-6) var(--s-6);
  border-left:2px solid var(--gold);
  font-size:clamp(1.15rem,2.2vw,1.5rem); font-weight:500; line-height:1.45;
  letter-spacing:-.015em; color:var(--on-ink); max-width:34ch;
}
.pull.on-cream{border-left-color:var(--gold-dark); color:var(--ink-900);}

/* ----------------------------------------------------- credentials strip -- */
.creds{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s-5);}
.cred{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:500; letter-spacing:.02em;
  border:1px solid var(--line-on-ink); border-radius:var(--radius);
  padding:8px 12px; color:var(--on-ink-body); background:rgba(255,255,255,.02);
}
.cred svg{width:13px; height:13px; color:var(--gold); flex:none;}
.cred.wip{border-style:dashed; color:var(--on-ink-muted);}
.fact-rows{margin-top:var(--s-6); display:grid; gap:0;}
.fact-rows .fr{
  display:grid; grid-template-columns:150px 1fr; gap:var(--s-4);
  padding-block:var(--s-3); border-top:1px solid var(--line-on-ink);
}
.fact-rows .fr .k{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--on-ink-muted); padding-top:3px;
}
.fact-rows .fr .v{font-size:.92rem; color:var(--on-ink-body);}
@media (max-width:640px){ .fact-rows .fr{grid-template-columns:1fr; gap:2px;} }

/* --------------------------------------------------------- contact page -- */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:start;
}
@media (max-width:940px){ .contact-grid{grid-template-columns:minmax(0,1fr);} }

.channels{display:grid; gap:1px; background:var(--line-gold); border:1px solid var(--line-gold);}
.channel{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-4);
  align-items:center; background:var(--ink-850); padding:var(--s-4) var(--s-5);
  box-shadow:var(--sheen);
  transition:background var(--t-base) var(--e-soft);
}
.channel:hover{background:var(--ink-900);}
.channel .c-ic{
  width:38px; height:38px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line-gold); border-radius:var(--radius); color:var(--gold);
}
.channel .c-ic svg{width:17px; height:17px;}
.channel .c-k{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-ink-muted);
}
.channel .c-v{
  display:block; margin-top:4px; font-size:.95rem; font-weight:500;
  color:var(--on-ink); text-decoration:none; word-break:break-word;
}
a.c-v:hover{color:var(--gold);}
.copy-btn{
  min-width:48px; min-height:40px; display:inline-flex; align-items:center; gap:7px;
  justify-content:center; cursor:pointer; flex:none;
  background:transparent; color:var(--gold); border:1px solid rgba(207,168,92,.4);
  border-radius:var(--radius); padding:8px 12px;
  font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background var(--t-fast) var(--e-soft), border-color var(--t-fast) var(--e-soft);
}
.copy-btn:hover{background:rgba(207,168,92,.12); border-color:var(--gold);}
.copy-btn svg{width:13px; height:13px;}
.copy-btn.done{color:var(--gold-hi); border-color:var(--gold-hi);}

/* form */
.form-card{
  border:1px solid var(--line-gold); background:rgba(255,255,255,.02);
  padding:clamp(24px,3.4vw,40px);
}
.field{display:flex; flex-direction:column; gap:8px; margin-top:var(--s-5);}
.field:first-of-type{margin-top:var(--s-6);}
.field label{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-ink-body);
}
.field label .req{color:var(--gold); margin-left:4px;}
.field .hint{font-size:.78rem; color:var(--on-ink-muted); line-height:1.5;}
.field input,.field textarea,.field select{
  width:100%; min-height:48px; padding:12px 14px;
  font-family:var(--sans); font-size:.95rem; color:var(--on-ink);
  background:rgba(5,12,22,.6); border:1px solid var(--line-on-ink);
  border-radius:var(--radius); transition:border-color var(--t-fast) var(--e-soft), background var(--t-fast) var(--e-soft);
}
.field textarea{min-height:130px; resize:vertical; line-height:1.6;}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A97A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:42px;
}
.field input::placeholder,.field textarea::placeholder{color:#7A8798;}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--gold); background:rgba(5,12,22,.9);
}
.field .err{font-size:.78rem; color:#F0A9A9; display:none;}
.field.invalid input,.field.invalid textarea{border-color:#C96C6C;}
.field.invalid .err{display:block;}
.form-card .btn{margin-top:var(--s-6); width:100%;}
.form-note{margin-top:var(--s-4); font-size:.76rem; color:var(--on-ink-muted); line-height:1.55;}
.form-status{
  margin-top:var(--s-4); font-size:.85rem; color:var(--gold);
  border-left:2px solid var(--gold); padding-left:14px; display:none;
}
.form-status.show{display:block;}

/* checklist for "what to include" */
.brief-list{margin-top:var(--s-5); display:grid; gap:14px; counter-reset:brief;}
.brief-list li{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  font-size:.94rem; color:var(--on-ink-body);
}
.brief-list li::before{
  counter-increment:brief; content:counter(brief,decimal-leading-zero);
  font-family:var(--mono); font-size:.72rem; color:var(--gold); padding-top:3px;
}

/* --------------------------------------------------------------- motion -- */
.js [data-reveal]{opacity:0; transform:translateY(14px);}
.js [data-reveal].in{
  opacity:1; transform:none;
  transition:opacity 420ms var(--e-out), transform 420ms var(--e-out);
  transition-delay:var(--d,0ms);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1 !important; transform:none !important;}
  .progress{display:none;}
}

/* ------------------------------------------------------- compact process -- */
.mini-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-gold); border:1px solid var(--line-gold); margin-top:var(--s-7);
}
.mini-steps .m{background:var(--ink-850); padding:var(--s-5); box-shadow:var(--sheen); transition:background var(--t-base) var(--e-soft);}
.mini-steps .m:hover{background:var(--ink-800);}
.mini-steps .m .num{display:block;}
.mini-steps .m h3{margin-top:var(--s-4); font-size:1.05rem; color:var(--on-ink);}
.mini-steps .m p{margin-top:10px; font-size:.88rem; color:var(--on-ink-body);}
@media (max-width:860px){ .mini-steps{grid-template-columns:1fr 1fr;} }
@media (max-width:460px){ .mini-steps{grid-template-columns:1fr;} }

/* ---------------------------------------------------------- founder hook -- */
.founder-hook{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4.5vw,72px); align-items:center;
}
.founder-hook .fh-body p{color:var(--on-cream-body);}
.founder-hook .fh-body p + p{margin-top:var(--s-4);}
.founder-hook .fh-body .textlink{margin-top:var(--s-6);}
@media (max-width:860px){ .founder-hook{grid-template-columns:1fr;} }

/* dark variant of the 3-up grid */
.grid-3.on-ink{background:var(--line-gold); border-color:var(--line-gold);}
.grid-3.on-ink .g{background:var(--ink-850); box-shadow:var(--sheen);}
.grid-3.on-ink .g h3{color:var(--on-ink);}
.grid-3.on-ink .g p{color:var(--on-ink-body);}
.grid-3.on-ink .g .num{color:var(--gold);}

/* two-column prose */
.prose-2{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.5vw,56px); margin-top:var(--s-6);
}
.prose-2 p{color:var(--on-cream-body);}
.prose-2 p + p{margin-top:var(--s-4);}
@media (max-width:760px){ .prose-2{grid-template-columns:1fr;} }

/* ---------------------------------------------------- testimonials -- */
/* Semantic figure/blockquote/figcaption. Two variants that live inside
   existing .band-ink and .band-cream sections - no new card chrome.
   Hierarchy carried by typography (Inter quote + mono attribution),
   not by boxes. */
.testimonial{
  margin:0; padding:var(--s-6) 0 0;
  border-top:1px solid var(--line-gold);
  max-width:46rem;
}
.testimonial + .testimonial{ margin-top:var(--s-7); }
.testimonial blockquote{
  margin:0; padding:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  line-height:1.5;
  letter-spacing:-0.005em;
  max-width:34ch;
}
.testimonial blockquote::before{ content:"\201C"; margin-right:0.08em; }
.testimonial blockquote::after{ content:"\201D"; margin-left:0.04em; }
.testimonial .t-result{
  display:inline-block; margin-top:var(--s-4);
  font-family:var(--mono);
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.3rem 0.55rem; border:1px solid var(--line-gold);
}
.testimonial figcaption{
  display:flex; align-items:center; gap:var(--s-3);
  margin-top:var(--s-5);
}
.testimonial__photo,.testimonial__initials{
  flex:0 0 auto;
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.04em;
}
.testimonial__photo{ object-fit:cover; }
.testimonial__who{ display:flex; flex-direction:column; gap:0.1rem; min-width:0; }
.testimonial__name{ font-weight:500; font-size:0.95rem; letter-spacing:-0.005em; }
.testimonial__role{ font-family:var(--mono); font-size:0.75rem; letter-spacing:0.02em; }
.testimonial__era{
  margin-top:0.25rem;
  font-family:var(--mono);
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
}
.testimonial__verify{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:0.4rem; vertical-align:-3px;
  color:var(--gold); border-radius:2px;
}
.testimonial__verify:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

/* on dark bands - raised to the --ink-850 tier (same family as stats/cards) */
.band-ink .testimonial,.band-ink-deep .testimonial{
  border-top:none;
  background:var(--ink-850);
  padding:var(--s-6);
  box-shadow:var(--sheen);
}
.band-ink .testimonial blockquote,
.band-ink-deep .testimonial blockquote{ color:var(--on-ink); }
.band-ink .testimonial__name,
.band-ink-deep .testimonial__name{ color:var(--on-ink); }
.band-ink .testimonial__role,
.band-ink-deep .testimonial__role,
.band-ink .testimonial__era,
.band-ink-deep .testimonial__era{ color:var(--on-ink-muted); }
.band-ink .testimonial .t-result,
.band-ink-deep .testimonial .t-result{ color:var(--gold-hi); }
.band-ink .testimonial__initials,
.band-ink-deep .testimonial__initials{
  background:var(--ink-800); color:var(--gold-hi);
  border:1px solid var(--line-gold-soft);
}

/* on cream bands */
.band-cream .testimonial,.band-cream-2 .testimonial{ border-top-color:rgba(150,116,44,.22); }
.band-cream .testimonial blockquote,
.band-cream-2 .testimonial blockquote{ color:var(--ink-900); }
.band-cream .testimonial__name,
.band-cream-2 .testimonial__name{ color:var(--ink-900); }
.band-cream .testimonial__role,
.band-cream-2 .testimonial__role,
.band-cream .testimonial__era,
.band-cream-2 .testimonial__era{ color:var(--on-cream-muted); }
.band-cream .testimonial .t-result,
.band-cream-2 .testimonial .t-result{
  color:var(--gold-ink); border-color:rgba(150,116,44,.4);
}
.band-cream .testimonial__initials,
.band-cream-2 .testimonial__initials{
  background:var(--cream-2); color:var(--gold-ink);
  border:1px solid rgba(150,116,44,.3);
}

/* homepage featured strip - 3-up grid */
.testimonial-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-7); margin-top:var(--s-6);
}
.testimonial-grid .testimonial{ max-width:none; }
@media (max-width:900px){ .testimonial-grid{ grid-template-columns:1fr; gap:var(--s-6); } }

/* hydrated-from-JSON cards: tiny opacity fade so SSR skeleton doesn't flash */
.testimonial[data-testimonial]:empty{ display:none; }
.testimonial[data-hydrated]{ animation:t-fade 220ms ease-out both; }
@keyframes t-fade{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion:reduce){ .testimonial[data-hydrated]{animation:none;} }

/* ==========================================================================
   CINEMATIC LAYER  (Phase 0-1 - additive, progressive enhancement)
   --------------------------------------------------------------------------
   Everything here is gated behind `html.cinematic`, a class that
   assets/js/cinematic.js adds ONLY when motion is allowed AND the browser can
   support the effect. With JavaScript off, prefers-reduced-motion on, or on a
   device the script rules out, none of this applies and the baseline site
   above is rendered exactly as before. Nothing here is required to read or
   use the page. Keep gold a hairline accent (README colour rule).
   ========================================================================== */
:root{
  --black-edge:#02060C;        /* deeper stage edge behind the cinematic grounds */
  --grain-opacity:.40;
  --glass-blur:14px;
  --glass-bg:rgba(14,32,56,.55);
  --rim-gold:rgba(207,168,92,.35);
  --cursor-dot:8px;
  --cursor-ring:34px;
}

/* Lenis smooth-scroll needs the body to clip horizontally WITHOUT becoming its
   own scroll container (which `overflow-x:hidden` would make it). `clip` avoids
   that; browsers without `clip` keep the baseline `overflow-x:hidden`. */
@supports (overflow:clip){
  html.cinematic, html.cinematic body{ overflow-x:clip; }
  html.cinematic body{ overflow-y:visible; }
}
html.cinematic.lenis, html.cinematic.lenis body{ height:auto; }
html.cinematic.lenis{ scroll-behavior:auto; }

/* ---- film grain + edge vignette (fixed, decorative, never interactive) ---- */
.fx-vignette,.fx-grain{ position:fixed; inset:0; pointer-events:none; }
.fx-vignette{
  z-index:2;
  background:radial-gradient(132% 112% at 50% 36%, transparent 54%, rgba(2,6,12,.58) 100%);
}
.fx-grain{
  z-index:3; opacity:var(--grain-opacity); mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:grain-shift 1.1s steps(3) infinite;
}
@keyframes grain-shift{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)} 100%{transform:translate(-2%,-1%)}
}

/* ---- god-rays behind the hero ---- */
html.cinematic .hero{ isolation:isolate; }
html.cinematic .hero > .wrap{ position:relative; z-index:1; }
html.cinematic .hero::before{
  content:""; position:absolute; inset:-12% -8% -4% -8%; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 52% at 72% 22%, rgba(207,168,92,.14), transparent 70%),
    conic-gradient(from 198deg at 74% 16%,
      transparent 0 9%, rgba(236,203,128,.05) 11% 12%, transparent 14% 23%,
      rgba(207,168,92,.045) 25% 26%, transparent 28% 42%);
  filter:blur(8px);
  -webkit-mask-image:radial-gradient(70% 80% at 74% 18%, #000 10%, transparent 78%);
          mask-image:radial-gradient(70% 80% at 74% 18%, #000 10%, transparent 78%);
}
@media (max-width:940px){
  html.cinematic .hero::before{
    inset:-6% -6% 0 -6%;
    background:radial-gradient(62% 40% at 26% 15%, rgba(207,168,92,.12), transparent 72%);
    -webkit-mask-image:none; mask-image:none;
  }
}

/* ---- 3D scene mount: hide the SVG fallback once the live canvas is in ---- */
.hero-mark{ position:relative; }
.hero-mark .hero-canvas{ position:absolute; inset:0; display:block; }
.hero-mark .hero-canvas canvas{ display:block; width:100%!important; height:100%!important; }
/* keep the SVG in the box (it defines the size) but invisible when the scene runs */
.hero-mark.scene-live > svg{ opacity:0; visibility:hidden; }

/* ---- custom cursor (desktop, fine-pointer only; JS adds html.has-cursor) ---- */
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor .card,
html.has-cursor [role="button"],
html.has-cursor .nav-toggle{ cursor:none; }
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; translate:-50% -50%; will-change:transform;
}
.cursor-dot{
  width:var(--cursor-dot); height:var(--cursor-dot); background:var(--gold-hi);
  transition:width .2s var(--e-out), height .2s var(--e-out), background .2s var(--e-soft);
}
.cursor-ring{
  width:var(--cursor-ring); height:var(--cursor-ring);
  border:1px solid var(--rim-gold);
  transition:width .25s var(--e-out), height .25s var(--e-out),
             border-color .25s var(--e-out), opacity .25s var(--e-soft);
}
html.cursor-hot .cursor-ring{ width:calc(var(--cursor-ring)*1.5); height:calc(var(--cursor-ring)*1.5); border-color:var(--gold); }
html.cursor-hot .cursor-dot{ width:4px; height:4px; }
html.cursor-down .cursor-ring{ width:calc(var(--cursor-ring)*.8); height:calc(var(--cursor-ring)*.8); }
html.cursor-hidden .cursor-dot,
html.cursor-hidden .cursor-ring{ opacity:0; }

/* ---- reusable glass + rim-light utilities (defined now, used in Phase 2) ---- */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
          backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border:1px solid var(--line-gold); box-shadow:var(--sheen);
}
.rim{ position:relative; }
.rim::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px; background:linear-gradient(130deg, var(--rim-gold), transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity var(--t-base) var(--e-soft);
}
.rim:hover::after{ opacity:1; }

/* If reduced-motion ever reaches these nodes, kill the one looping animation. */
@media (prefers-reduced-motion:reduce){ .fx-grain{ animation:none; } }

/* ==========================================================================
   CINEMATIC LAYER - Phase 2 (homepage signature moments)
   --------------------------------------------------------------------------
   Same contract as Phase 0-1: everything is gated behind `html.cinematic`, so
   a baseline, reduced-motion or no-JS session renders the static page exactly
   as before. Nodes marked [data-anim] are owned ENTIRELY by GSAP
   (assets/js/cinematic.js) and never by the [data-reveal] baseline - the two
   systems never share a node. GSAP writes the final visible state inline, so
   these nodes start hidden only while the enhanced layer is actually live.
   ========================================================================== */

/* Hidden pre-animation (no flash). Applies only when the layer is running. */
html.cinematic [data-anim]{ opacity:0; }

/* --- Stats: a single gold scan-line sweeps each figure as it lands --------- */
html.cinematic .stats .fig{ position:relative; overflow:hidden; }
html.cinematic .stats .fig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(236,203,128,.5) 50%, transparent 60%);
  transform:translateX(-120%);
}
html.cinematic .stats .cell.swept .fig::after{ animation:wq-stat-scan .9s var(--e-out) forwards; }
@keyframes wq-stat-scan{ to{ transform:translateX(120%); } }

/* --- Cards: the rim-light glow follows the cursor across the grid ---------- */
/* overrides the baseline fixed-corner glow position only while cinematic runs */
html.cinematic .card::before{
  background:radial-gradient(360px 240px at var(--gx,20%) var(--gy,0%),
            rgba(207,168,92,.17), transparent 70%);
}

/* --- Process: a hairline draws itself 01 -> 04 along the top edge ---------- */
html.cinematic .mini-steps{ position:relative; }
html.cinematic .mini-steps::after{
  content:""; position:absolute; left:0; top:-1px; height:2px; width:100%; z-index:1;
  background:linear-gradient(90deg, var(--gold-hi), var(--gold) 55%, var(--gold-dark));
  transform:scaleX(var(--line,0)); transform-origin:left center;
}

/* --- Founder pull-quote: words light up one by one ------------------------ */
html.cinematic .founder-hook .pull .wq-word{ display:inline-block; }

/* --- CTA band: glow rises as it enters; the gold button is magnetic -------- */
html.cinematic .cta-band::before{ opacity:var(--cta-glow,1); }
html.cinematic .cta-band .btn-gold{ will-change:transform; }

/* Belt-and-braces: if a reduced-motion preference is switched on mid-session,
   drop every start-hidden node straight to visible so nothing can be stranded. */
@media (prefers-reduced-motion:reduce){
  html.cinematic [data-anim]{ opacity:1 !important; transform:none !important; }
  html.cinematic .mini-steps::after{ transform:scaleX(1); }
  html.cinematic .cta-band::before{ opacity:1; }
}

/* ==========================================================================
   CINEMATIC LAYER - Phase 4 (accessibility + perf guards)
   --------------------------------------------------------------------------
   The cinematic layer adds decorative overlays (grain, vignette, god-rays,
   glass blur, custom cursor). These guards make sure a visitor who has asked
   for less transparency, more contrast, a forced system palette, or who is on
   a battery device, gets a clean, legible, cheaper page. Content is never
   touched - only the decoration responds.
   ========================================================================== */

/* Less transparency / more contrast: drop the filmic overlays and the blur so
   text sits on flat, fully opaque grounds. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
  .fx-grain, .fx-vignette{ display:none; }
  html.cinematic .hero::before{ display:none; }
  .glass{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--ink-850); }
}

/* Forced colors (e.g. Windows High Contrast): strip every colour/blend-based
   decoration so the system palette drives the page, restore the native cursor,
   and keep a visible focus ring in a system colour. The 3D canvas renders its
   own pixels and is left alone. */
@media (forced-colors: active){
  .fx-grain, .fx-vignette, .cursor-dot, .cursor-ring{ display:none !important; }
  html.cinematic .hero::before,
  html.cinematic .mini-steps::after,
  html.cinematic .stats .fig::after{ display:none !important; }
  html.has-cursor, html.has-cursor a, html.has-cursor button,
  html.has-cursor .card, html.has-cursor [role="button"],
  html.has-cursor .nav-toggle{ cursor:auto; }
  :focus-visible{ outline:2px solid CanvasText; outline-offset:3px; }
}

/* Battery / compositor: the film grain is a continuous full-screen soft-light
   blend. On coarse-pointer devices (phones, tablets) hold it static - the
   texture stays, but it no longer repaints every frame. */
@media (pointer: coarse){
  .fx-grain{ animation:none; }
}