/* ═══════════════════════════════════════════════════════════
   PANOPLY — Paper, Ink, Gold          v3
   Grounds alternate: paper → white → ink → gold. Never a tunnel.
   Type is architecture: huge, heavy, tightly tracked, with one
   light-weight gold word per heading. Edges are sharp. Borders
   do the dividing. Motion is long and damped.
   ═══════════════════════════════════════════════════════════ */

:root{
  --black:#080706; --ink:#17130d; --slate:#111512;
  --paper:#EDE9DF; --white:#FBF9F4;
  --gold:#D7BB72; --gold-dk:#9F7830; --brown:#845F30;
  --muted:#6A645A;
  --line:rgba(23,19,13,.18); --line-dk:rgba(255,255,255,.22);
  --sans:"Geist","Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:clamp(22px,5.2vw,88px);
  --ease:cubic-bezier(.16,1,.3,1);
  --swift:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.68;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  font-kerning:normal; font-feature-settings:"kern" 1;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
::selection{background:var(--gold); color:var(--black)}
:focus-visible{outline:2px solid var(--gold-dk); outline-offset:3px}

/* ═══ THE MARK ═══ */
.mark{
  display:block; flex:none; background:currentColor;
  -webkit-mask:url(mark.png) center/contain no-repeat; mask:url(mark.png) center/contain no-repeat;
}

/* ═══ TYPE ═══ */
h1,h2,h3,h4,h5{margin:0; font-weight:700; letter-spacing:-.018em; text-wrap:balance}
.d1{font-size:clamp(2.9rem,7.6vw,8rem); font-weight:700; line-height:.95; letter-spacing:-.022em}
.d2{font-size:clamp(2.3rem,5.6vw,5.6rem); font-weight:700; line-height:.98; letter-spacing:-.021em}
.d3{font-size:clamp(1.7rem,3.1vw,3rem); font-weight:600; line-height:1.06; letter-spacing:-.018em}
.d4{font-size:clamp(1.15rem,1.9vw,1.6rem); font-weight:660; line-height:1.1; letter-spacing:-.014em}
/* the gold word — lighter, not heavier. this is the whole trick */
.d1 em,.d2 em,.d3 em,.d4 em,.au{
  font-style:normal; font-weight:400; color:var(--gold-dk);
}
.on-dark .d1 em,.on-dark .d2 em,.on-dark .d3 em,.on-dark .d4 em,.on-dark .au,
.t-ink .d1 em,.t-ink .d2 em,.t-ink .d3 em{color:var(--gold); text-shadow:0 0 55px rgba(215,187,114,.14)}

.eyebrow{
  margin:0 0 18px; color:#443A2C; font-size:.68rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase;
}
.eyebrow .dot{color:var(--gold-dk)}
.lede{margin:0; color:var(--muted); font-size:clamp(1.02rem,1.35vw,1.26rem); line-height:1.6; max-width:46ch; font-weight:450}
p{margin:0 0 1.2em; max-width:66ch; color:var(--muted); line-height:1.72}
.prose > p:first-child{color:var(--ink); font-size:1.14rem}
strong{color:var(--ink); font-weight:750}
.note{margin:0; font-size:.78rem; line-height:1.62; color:var(--muted); max-width:72ch}
.note a{color:var(--brown); border-bottom:1px solid var(--line)}
.mono{font-size:.72rem; letter-spacing:.06em}

/* ═══ TONE SYSTEM — the reason this isn't a tunnel ═══ */
.sec,.hero,.hero-split,.tick{position:relative; z-index:0}
[data-tone]::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100vw; height:100%; z-index:-1;
}
[data-tone="paper"]::before{background:var(--paper)}
[data-tone="white"]::before{background:var(--white)}
[data-tone="ink"]::before{background:var(--black)}
[data-tone="slate"]::before{background:var(--slate)}
[data-tone="gold"]::before{background:var(--gold)}

[data-tone="ink"],[data-tone="slate"]{color:var(--white)}
[data-tone="ink"] p,[data-tone="slate"] p,
[data-tone="ink"] .lede,[data-tone="slate"] .lede{color:rgba(255,255,255,.58)}
[data-tone="ink"] .prose > p:first-child,[data-tone="slate"] .prose > p:first-child{color:rgba(255,255,255,.82)}
[data-tone="ink"] strong,[data-tone="slate"] strong{color:#fff}
[data-tone="ink"] .note,[data-tone="slate"] .note{color:rgba(255,255,255,.5)}
[data-tone="ink"] .note a,[data-tone="slate"] .note a{color:var(--gold)}
[data-tone="ink"] .eyebrow,[data-tone="slate"] .eyebrow{color:rgba(255,255,255,.62)}
[data-tone="ink"] .eyebrow .dot,[data-tone="slate"] .eyebrow .dot{color:var(--gold)}
[data-tone="ink"] em,[data-tone="slate"] em{color:var(--gold)}
[data-tone="ink"] .section-label,[data-tone="slate"] .section-label{border-color:var(--line-dk); color:rgba(255,255,255,.64)}
[data-tone="ink"] .section-label span,[data-tone="slate"] .section-label span{color:var(--gold)}

[data-tone="gold"]{color:var(--black)}
[data-tone="gold"] p,[data-tone="gold"] .lede,[data-tone="gold"] .note{color:rgba(0,0,0,.68)}
[data-tone="gold"] strong{color:var(--black)}
[data-tone="gold"] .eyebrow{color:rgba(0,0,0,.62)}
[data-tone="gold"] em,[data-tone="gold"] .au{color:var(--black); font-weight:430}
[data-tone="gold"] .section-label{border-color:rgba(0,0,0,.4); color:rgba(0,0,0,.66)}
[data-tone="gold"] .section-label span{color:var(--black)}

/* ═══ HEADER ═══ */
.bar{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:112px; padding:0 var(--pad); padding-top:env(safe-area-inset-top,0px);
  background:rgba(251,249,244,.94); backdrop-filter:blur(18px); border-bottom:1px solid var(--line);
  transition:min-height .45s var(--swift), box-shadow .45s ease;
}
.bar.stuck{min-height:84px; box-shadow:0 1px 26px rgba(23,19,13,.07)}
.brand{display:flex; align-items:center; gap:16px; color:var(--ink)}
.brand .mark{width:54px; height:54px; transition:transform .9s var(--ease), width .45s var(--swift), height .45s var(--swift)}
.bar.stuck .brand .mark{width:42px; height:42px}
.brand:hover .mark{transform:rotate(45deg)}
.brand .lock{display:flex; flex-direction:column; gap:7px}
.brand .mk{font-size:1.85rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; line-height:.9; margin-right:-.13em}
.brand .sub{font-size:.54rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brown); line-height:1; white-space:nowrap}
.bar.stuck .brand .mk{font-size:1.5rem}
@media(max-width:560px){.brand .sub{display:none}.brand .mk{font-size:1.4rem}.brand .mark{width:40px;height:40px}}
.brand .sq{display:none}
.bar nav{display:flex; align-items:stretch; align-self:stretch}
.bar nav a{
  position:relative; display:flex; align-items:center; padding:0 19px;
  font-size:.76rem; font-weight:750; letter-spacing:.02em; color:var(--ink);
}
.bar nav a::after{
  content:""; position:absolute; right:19px; bottom:28px; left:19px; height:2px;
  background:var(--gold-dk); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--swift);
}
.bar nav a:hover::after,.bar nav a.on::after{transform:scaleX(1)}
.bar nav a.on{color:var(--brown)}
@media(max-width:980px){.bar nav .hide-sm{display:none}}
.ibtn{
  display:inline-flex; align-items:center; gap:11px; align-self:stretch; min-width:150px;
  justify-content:center; padding:0 24px; cursor:pointer;
  border:0; border-left:1px solid var(--line); border-right:1px solid var(--line);
  background:transparent; color:var(--ink); font-family:var(--sans);
  font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  transition:background .22s ease, color .22s ease;
}
.ibtn:hover{background:var(--gold); color:var(--black)}
.ibtn .bars{display:inline-flex; flex-direction:column; gap:3px}
.ibtn .bars i{display:block; width:13px; height:2px; background:currentColor}
.tbtn{display:none}

/* ═══ INDEX OVERLAY — light: paper ground, ink type, gold on hover ═══ */
.idx{
  position:fixed; inset:0; z-index:200; background:var(--white); color:var(--ink);
  display:grid; grid-template-rows:auto 1fr; opacity:0; pointer-events:none;
  clip-path:inset(0 0 100% 0); transition:opacity .45s ease, clip-path .75s var(--ease);
}
.idx.open{opacity:1; pointer-events:auto; clip-path:inset(0 0 0 0)}
.idx-top{display:flex; align-items:center; justify-content:space-between; min-height:112px; padding:0 var(--pad); padding-top:env(safe-area-inset-top,0px); border-bottom:1px solid var(--line)}
.idx-top .brand{color:var(--ink)}
.idx-top .ibtn{min-height:52px}
.idx-body{overflow-y:auto; padding:clamp(34px,5vw,64px) var(--pad) 90px}
.idx-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(26px,3.4vw,52px); max-width:1500px}
.idx-grp > h4{margin:0 0 6px; padding-bottom:14px; border-bottom:1px solid var(--line); color:var(--brown); font-size:.64rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase}
.idx-lnk{display:block; padding:16px 0; border-bottom:1px solid var(--line); transition:padding-left .25s var(--swift), background .25s ease}
.idx-lnk:hover{padding-left:14px; background:var(--gold)}
.idx-lnk .n{color:var(--brown); font-size:.62rem; font-weight:850; letter-spacing:.1em}
.idx-lnk .t{display:block; margin:6px 0 6px; font-size:clamp(1.5rem,2.3vw,2.2rem); font-weight:600; letter-spacing:-.018em; line-height:1.05; color:var(--ink)}
.idx-lnk .s{display:block; max-width:34ch; color:var(--muted); font-size:.78rem; line-height:1.5}
.idx-lnk:hover .n,.idx-lnk:hover .s{color:rgba(0,0,0,.72)}
.idx .stagger{opacity:0; transform:translateY(22px)}
.idx.open .stagger{opacity:1; transform:none; transition:opacity .7s ease, transform .85s var(--ease)}

/* ═══ PAGE TRANSITION ═══ */
main{display:block}
.curtain{position:fixed; inset:0; z-index:150; background:var(--black); transform:scaleY(0); transform-origin:bottom; pointer-events:none}
.curtain::after{content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--gold)}
.curtain.in{animation:cIn .46s var(--swift) forwards}
.curtain.out{animation:cOut .58s var(--ease) forwards}
@keyframes cIn{from{transform:scaleY(0); transform-origin:bottom}to{transform:scaleY(1); transform-origin:bottom}}
@keyframes cOut{from{transform:scaleY(1); transform-origin:top}to{transform:scaleY(0); transform-origin:top}}
.page.enter > *{animation:pIn .9s var(--ease) both}
.page.enter > *:nth-child(2){animation-delay:.07s}
.page.enter > *:nth-child(3){animation-delay:.13s}
@keyframes pIn{from{opacity:0; transform:translateY(30px)}to{opacity:1; transform:none}}

/* ═══ LAYOUT ═══ */
.wrap{padding-inline:var(--pad); max-width:1620px; margin-inline:auto}
.sec{padding-block:clamp(74px,9.5vw,148px)}
.split{display:grid; grid-template-columns:minmax(0,1.32fr) minmax(300px,.68fr); gap:clamp(34px,8vw,9vw); align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr; gap:34px}}
.sticky-h{position:sticky; top:124px}
.split > div:first-child:has(> .sticky-h),.split > .lcol{position:sticky; top:124px; align-self:start}
.split > div:first-child > .sticky-h{position:static}
@media(max-width:900px){.sticky-h,.split > div:first-child:has(> .sticky-h),.split > .lcol{position:static}}
.side-mark{width:clamp(110px,15vw,220px); aspect-ratio:1; margin-top:clamp(28px,4vw,52px); color:currentColor; opacity:.13; animation:turn 60s linear infinite}
[data-tone="gold"] .side-mark{opacity:.22}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
[data-tone="ink"] .grid-2,[data-tone="ink"] .grid-3,[data-tone="slate"] .grid-2,[data-tone="slate"] .grid-3{border-color:var(--line-dk)}
[data-tone="gold"] .grid-2,[data-tone="gold"] .grid-3{border-color:rgba(0,0,0,.4)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* section label — 70px rule + caption */
.section-label{
  display:grid; grid-template-columns:70px 1fr; align-items:center; gap:18px;
  margin-bottom:clamp(44px,6vw,86px); padding-top:16px; border-top:1px solid var(--line);
  font-size:.67rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
}
.section-label span{color:var(--brown)}
.section-label p{margin:0; color:inherit; max-width:none}

/* ═══ HERO ═══ */
.hero{padding-block:clamp(56px,8.5vw,116px)}
.hero .d1{margin:18px 0 28px}
.hero-split{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(340px,.62fr);
  min-height:calc(100svh - 112px); color:var(--white);
}
@media(max-width:1000px){.hero-split{grid-template-columns:1fr; min-height:0}}
.hero-primary{display:flex; flex-direction:column; padding:26px var(--pad) 34px}
.hero-over{
  display:flex; justify-content:space-between; gap:20px; padding-bottom:21px;
  border-bottom:1px solid var(--line-dk); color:rgba(255,255,255,.52);
  font-size:.65rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.hero-copy{margin:auto 0; padding:clamp(40px,6vw,64px) 0}
.hero-copy .eyebrow{color:rgba(255,255,255,.62)}
.hero-copy .d1{margin:18px 0 28px}
.hero-copy .lede{color:rgba(255,255,255,.67); max-width:56ch}
.hero-scroll{display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.52); font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.hero-scroll i{display:block; width:34px; height:1px; background:currentColor; animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:scaleX(.2); transform-origin:left}50%{transform:scaleX(1); transform-origin:left}51%{transform:scaleX(1); transform-origin:right}100%{transform:scaleX(.2); transform-origin:right}}

/* the gold signal panel */
.hero-signal{
  position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden;
  padding:30px 34px 34px; background:var(--gold); color:var(--black);
}
.hero-signal::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(0,0,0,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.12) 1px,transparent 1px);
  background-size:44px 44px;
}
.signal-top{display:flex; justify-content:space-between; gap:14px; font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase}
.signal-top b{font-weight:900}
.signal-mark{width:clamp(120px,15vw,190px); height:clamp(120px,15vw,190px); margin:clamp(24px,4vw,44px) auto; color:rgba(0,0,0,.82); animation:turn 44s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.signal-centre{display:flex; align-items:flex-end; gap:16px; margin:auto 0 26px}
.signal-number{font-size:clamp(5rem,9.5vw,8.6rem); font-weight:800; line-height:.82; letter-spacing:-.03em}
.signal-centre p{margin:0; color:var(--black); font-size:.95rem; font-weight:800; line-height:1.05; text-transform:uppercase}
.signal-list{margin:0; padding:0; list-style:none; border-top:1px solid rgba(0,0,0,.45)}
.signal-list li{display:grid; grid-template-columns:40px 1fr; padding:11px 0; border-bottom:1px solid rgba(0,0,0,.45); font-size:.78rem; font-weight:760; text-transform:uppercase}
.signal-list li span{font-size:.61rem}

/* ═══ MARQUEE ═══ */
.tick{overflow:hidden; padding-block:clamp(16px,2.2vw,26px); border-block:1px solid var(--line-dk)}
.tick-row{display:flex; align-items:center; gap:clamp(26px,3.6vw,56px); width:max-content; animation:tk 60s linear infinite}
.tick:hover .tick-row{animation-play-state:paused}
.tick-row span{
  font-size:clamp(1.9rem,4.6vw,4.6rem); font-weight:650; line-height:1.1; letter-spacing:-.02em;
  white-space:nowrap; color:rgba(255,255,255,.94);
}
.tick-row span.hl{color:var(--gold)}
.tick-row i{width:clamp(22px,2.8vw,40px); height:clamp(22px,2.8vw,40px); flex:none; background:var(--gold); -webkit-mask:url(mark.png) center/contain no-repeat; mask:url(mark.png) center/contain no-repeat}
@keyframes tk{to{transform:translateX(-50%)}}

/* ═══ ACTIONS ═══ */
.cta-row{display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:36px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:56px;
  padding:0 26px; border:1px solid transparent; background:var(--gold); color:var(--black);
  font-size:.72rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase;
  transition:transform .22s ease, background .22s ease, color .22s ease;
}
.btn:hover{transform:translateY(-3px); background:var(--white)}
.btn.ghost{
  min-height:auto; padding:8px 0 6px; background:transparent; color:inherit;
  border:0; border-bottom:1px solid currentColor; font-size:.75rem; font-weight:800; letter-spacing:.05em;
}
.btn.ghost:hover{transform:none; background:transparent; color:var(--brown)}
[data-tone="ink"] .btn.ghost:hover,[data-tone="slate"] .btn.ghost:hover{color:var(--gold)}
.btn .ar{transition:transform .22s ease}
.btn:hover .ar{transform:translate(3px,-3px)}
.pill{
  display:inline-flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid var(--line-dk);
  font-size:.64rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.pill b{color:var(--gold); font-weight:900}
.hero-meta{display:flex; flex-wrap:wrap; gap:9px; margin-top:32px}

/* ═══ CARDS — bordered cells, sharp, hover inverts ═══ */
.card,.arm{
  padding:26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  min-height:250px; display:flex; flex-direction:column;
  transition:background .3s ease, color .3s ease, transform .35s var(--ease);
}
[data-tone="ink"] .card,[data-tone="ink"] .arm,[data-tone="slate"] .card,[data-tone="slate"] .arm{border-color:var(--line-dk)}
[data-tone="gold"] .card,[data-tone="gold"] .arm{border-color:rgba(0,0,0,.4)}
.card:hover,.arm:hover{position:relative; z-index:2; background:var(--black); color:var(--white); transform:translateY(-7px)}
.card:hover p,.arm:hover p,.card:hover .note,.arm:hover .note{color:rgba(255,255,255,.62)}
.card:hover strong,.arm:hover strong{color:#fff}
[data-tone="ink"] .card:hover,[data-tone="ink"] .arm:hover,[data-tone="slate"] .card:hover,[data-tone="slate"] .arm:hover{background:var(--gold); color:var(--black)}
[data-tone="ink"] .card:hover p,[data-tone="ink"] .arm:hover p,[data-tone="slate"] .card:hover p,[data-tone="slate"] .arm:hover p{color:rgba(0,0,0,.72)}
[data-tone="gold"] .card:hover,[data-tone="gold"] .arm:hover{background:var(--black); color:var(--white)}
.card h3,.arm h3{margin:0 0 12px; font-size:clamp(1.3rem,2vw,1.9rem); font-weight:660; letter-spacing:-.015em; line-height:1.02}
.card p,.arm p{margin:0; font-size:.86rem; line-height:1.66}
.card .note{font-size:.8rem}
.arm .no{display:block; margin-bottom:auto; color:var(--brown); font-size:.66rem; font-weight:850; letter-spacing:.1em}
[data-tone="ink"] .arm .no,[data-tone="slate"] .arm .no{color:var(--gold)}
.arm h3{margin-top:72px}
.arm:hover .no{color:inherit}

/* flooded statement block */
.quiet{padding:clamp(26px,3.4vw,44px); background:var(--gold); color:var(--black)}
.quiet p,.quiet .note{color:rgba(0,0,0,.72)}
.quiet strong{color:var(--black)}

/* ═══ STATS ═══ */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
[data-tone="ink"] .stats,[data-tone="slate"] .stats{border-color:var(--line-dk)}
.stat{
  min-height:245px; padding:25px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:background .3s ease, color .3s ease, transform .35s var(--ease);
}
[data-tone="ink"] .stat,[data-tone="slate"] .stat{border-color:var(--line-dk)}
.stat:hover{position:relative; z-index:2; background:var(--black); color:var(--white); transform:translateY(-7px)}
[data-tone="ink"] .stat:hover,[data-tone="slate"] .stat:hover{background:var(--gold); color:var(--black)}
.stat .fig{display:block; color:var(--gold-dk); font-size:clamp(3rem,4.5vw,4.9rem); font-weight:780; line-height:.92; letter-spacing:-.028em; font-variant-numeric:tabular-nums}
[data-tone="ink"] .stat .fig,[data-tone="slate"] .stat .fig{color:var(--gold)}
.stat:hover .fig{color:var(--gold)}
[data-tone="ink"] .stat:hover .fig,[data-tone="slate"] .stat:hover .fig{color:var(--black)}
.stat .lab{display:block; margin:auto 0 10px; font-size:1.02rem; font-weight:680; letter-spacing:-.012em; line-height:1.14; max-width:22ch}
.stat .src{display:block; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.04em}
.stat:hover .src{color:rgba(255,255,255,.55)}
[data-tone="ink"] .stat .src,[data-tone="slate"] .stat .src{color:rgba(255,255,255,.5)}
[data-tone="ink"] .stat:hover .src,[data-tone="slate"] .stat:hover .src{color:rgba(0,0,0,.6)}

/* ═══ LEDGER (steps) — hover floods gold ═══ */
.steps{margin:0; padding:0; list-style:none; border-top:1px solid var(--line); counter-reset:s}
[data-tone="ink"] .steps,[data-tone="slate"] .steps{border-color:var(--line-dk)}
.steps li{
  counter-increment:s; display:grid; grid-template-columns:72px 1fr; gap:26px; align-items:start;
  padding:28px 14px 28px 0; border-bottom:1px solid var(--line);
  transition:padding .24s ease, background .24s ease, color .24s ease;
}
[data-tone="ink"] .steps li,[data-tone="slate"] .steps li{border-color:var(--line-dk)}
.steps li::before{content:counter(s,decimal-leading-zero); color:var(--brown); font-size:.67rem; font-weight:850; letter-spacing:.06em; padding-top:9px}
[data-tone="ink"] .steps li::before,[data-tone="slate"] .steps li::before{color:var(--gold)}
.steps li:hover{padding-left:19px; background:var(--gold); color:var(--black)}
.steps li:hover::before{color:var(--black)}
.steps li:hover p{color:rgba(0,0,0,.72)}
.steps li:hover strong{color:var(--black)}
.steps h4{margin:0 0 10px; font-size:clamp(1.45rem,2.5vw,2.5rem); font-weight:600; line-height:1.08; letter-spacing:-.017em; line-height:1}
.steps p{margin:0; font-size:.92rem; line-height:1.68; max-width:70ch}

.tick-list{margin:0; padding:0; list-style:none; border-top:1px solid var(--line)}
[data-tone="ink"] .tick-list,[data-tone="slate"] .tick-list{border-color:var(--line-dk)}
.tick-list li{display:grid; grid-template-columns:36px 1fr; padding:16px 0; border-bottom:1px solid var(--line); font-size:.95rem; font-weight:620; color:inherit; letter-spacing:-.008em}
[data-tone="ink"] .tick-list li,[data-tone="slate"] .tick-list li{border-color:var(--line-dk)}
.tick-list li::before{content:"—"; color:var(--brown); font-weight:800}
[data-tone="ink"] .tick-list li::before,[data-tone="slate"] .tick-list li::before{color:var(--gold)}

/* ═══ LOOP ═══ */
.loop{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
[data-tone="ink"] .loop,[data-tone="slate"] .loop{border-color:var(--line-dk)}
.loop-i{min-height:250px; padding:25px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; transition:background .3s ease, color .3s ease, transform .35s var(--ease)}
[data-tone="ink"] .loop-i,[data-tone="slate"] .loop-i{border-color:var(--line-dk)}
.loop-i:hover{position:relative; z-index:2; background:var(--gold); color:var(--black); transform:translateY(-7px)}
.loop-i:hover .v{color:rgba(0,0,0,.72)}
.loop-i .k{display:block; margin-bottom:auto; font-size:clamp(1.6rem,2.6vw,2.5rem); font-weight:620; letter-spacing:-.018em; line-height:1}
.loop-i .v{display:block; margin-top:60px; color:var(--muted); font-size:.82rem; line-height:1.6}
[data-tone="ink"] .loop-i .v,[data-tone="slate"] .loop-i .v{color:rgba(255,255,255,.55)}

/* ═══ CALLOUT ═══ */
.callout{margin:46px 0; padding:clamp(28px,3.6vw,46px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
[data-tone="ink"] .callout,[data-tone="slate"] .callout{border-color:var(--line-dk)}
[data-tone="gold"] .callout{border-color:rgba(0,0,0,.4)}
.callout p{margin:0; max-width:26ch; font-size:clamp(1.65rem,3.4vw,3.1rem); font-weight:650; line-height:1.04; letter-spacing:-.02em; color:inherit}

/* ═══ TABLE ═══ */
.tbl-wrap{overflow-x:auto; border-top:1px solid var(--line)}
[data-tone="ink"] .tbl-wrap,[data-tone="slate"] .tbl-wrap{border-color:var(--line-dk)}
table{width:100%; border-collapse:collapse; font-size:.88rem; min-width:560px}
th,td{text-align:left; padding:19px 22px 19px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted); line-height:1.6}
[data-tone="ink"] th,[data-tone="ink"] td,[data-tone="slate"] th,[data-tone="slate"] td{border-color:var(--line-dk); color:rgba(255,255,255,.58)}
[data-tone="gold"] th,[data-tone="gold"] td{border-color:rgba(0,0,0,.4); color:rgba(0,0,0,.7)}
th{color:var(--brown); font-size:.64rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; padding-bottom:14px}
[data-tone="ink"] th,[data-tone="slate"] th{color:var(--gold)}
tbody tr{transition:background .22s ease}
tbody tr:hover{background:rgba(215,187,114,.16)}
td strong{color:var(--ink); font-weight:760}
[data-tone="ink"] td strong,[data-tone="slate"] td strong{color:#fff}
td.num{color:var(--gold-dk); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.004em; white-space:nowrap}
[data-tone="ink"] td.num,[data-tone="slate"] td.num{color:var(--gold)}
td .note{font-size:.72rem}

/* ═══ DOT FIELD ═══ */
.field{display:grid; grid-template-columns:repeat(60,1fr); gap:4px; margin:34px 0 16px}
.field i{aspect-ratio:1; background:rgba(23,19,13,.16); border-radius:50%}
[data-tone="ink"] .field i,[data-tone="slate"] .field i{background:rgba(255,255,255,.16)}
.field i.hot{background:var(--gold-dk); box-shadow:0 0 0 4px rgba(159,120,48,.18)}
[data-tone="ink"] .field i.hot,[data-tone="slate"] .field i.hot{background:var(--gold); box-shadow:0 0 0 5px rgba(215,187,114,.2),0 0 26px 4px rgba(215,187,114,.45)}
@media(max-width:720px){.field{grid-template-columns:repeat(40,1fr); gap:3px}}

/* ═══ BIG COUNTER ═══ */
.oc{display:flex; flex-wrap:wrap; align-items:baseline; gap:clamp(14px,2.4vw,30px); line-height:.9}
.oc .a{font-size:clamp(4rem,9.5vw,10rem); font-weight:800; letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.5px rgba(23,19,13,.28)}
[data-tone="ink"] .oc .a,[data-tone="slate"] .oc .a{-webkit-text-stroke-color:rgba(255,255,255,.3)}
.oc .vs{font-size:.66rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
[data-tone="ink"] .oc .vs,[data-tone="slate"] .oc .vs{color:rgba(255,255,255,.55)}
.oc .b{font-size:clamp(4rem,9.5vw,10rem); font-weight:800; letter-spacing:-.03em; color:var(--gold-dk)}
[data-tone="ink"] .oc .b,[data-tone="slate"] .oc .b{color:var(--gold)}

/* ═══ JOURNEY ═══ */
.jrny{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line)}
[data-tone="ink"] .jrny,[data-tone="slate"] .jrny{border-color:var(--line-dk)}
@media(max-width:900px){.jrny{grid-template-columns:1fr}}
.jrny button{
  all:unset; cursor:pointer; display:block; padding:24px 22px; min-height:170px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .3s ease, color .3s ease;
}
[data-tone="ink"] .jrny button,[data-tone="slate"] .jrny button{border-color:var(--line-dk)}
.jrny button:hover{background:rgba(215,187,114,.2)}
.jrny button[aria-selected="true"]{background:var(--black); color:var(--white)}
[data-tone="ink"] .jrny button[aria-selected="true"],[data-tone="slate"] .jrny button[aria-selected="true"]{background:var(--gold); color:var(--black)}
.jrny .ph{display:block; color:var(--brown); font-size:.63rem; font-weight:850; letter-spacing:.11em; text-transform:uppercase}
.jrny button[aria-selected="true"] .ph{color:var(--gold)}
[data-tone="ink"] .jrny .ph,[data-tone="slate"] .jrny .ph{color:var(--gold)}
[data-tone="ink"] .jrny button[aria-selected="true"] .ph,[data-tone="slate"] .jrny button[aria-selected="true"] .ph{color:rgba(0,0,0,.7)}
.jrny .nm{display:block; margin-top:54px; font-size:clamp(1.5rem,2.4vw,2.3rem); font-weight:600; letter-spacing:-.018em; line-height:1}
.jrny .q{display:block; margin-top:9px; font-size:.78rem; color:var(--muted)}
.jrny button[aria-selected="true"] .q{color:rgba(255,255,255,.58)}
[data-tone="ink"] .jrny .q,[data-tone="slate"] .jrny .q{color:rgba(255,255,255,.5)}
[data-tone="ink"] .jrny button[aria-selected="true"] .q,[data-tone="slate"] .jrny button[aria-selected="true"] .q{color:rgba(0,0,0,.66)}
.jpanel{padding:clamp(28px,3.6vw,48px) 0 0}
.jpanel .d3{margin-bottom:18px}
.jpanel dt{margin-bottom:10px; color:var(--brown); font-size:.63rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase}
[data-tone="ink"] .jpanel dt,[data-tone="slate"] .jpanel dt{color:var(--gold)}
.jpanel dd{margin:0 0 24px; font-size:.9rem; line-height:1.7; color:var(--muted)}
[data-tone="ink"] .jpanel dd,[data-tone="slate"] .jpanel dd{color:rgba(255,255,255,.58)}
.jpanel .grid-3{border:0}
.jpanel .grid-3 > div{padding:0 26px 0 0}
.fade-sw{animation:fsw .6s var(--ease) both}
@keyframes fsw{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ═══ CAREER EXPLORER ═══ */
.filters{display:flex; flex-wrap:wrap; gap:0; margin:30px 0; border-top:1px solid var(--line); border-left:1px solid var(--line)}
[data-tone="ink"] .filters,[data-tone="slate"] .filters{border-color:var(--line-dk)}
.chip{
  font-family:var(--sans); font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:transparent; color:inherit; padding:14px 18px; cursor:pointer; transition:background .22s ease, color .22s ease;
}
[data-tone="ink"] .chip,[data-tone="slate"] .chip{border-color:var(--line-dk)}
.chip:hover{background:rgba(215,187,114,.24)}
.chip[aria-pressed="true"]{background:var(--black); color:var(--white)}
[data-tone="ink"] .chip[aria-pressed="true"],[data-tone="slate"] .chip[aria-pressed="true"]{background:var(--gold); color:var(--black)}
.roles{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
[data-tone="ink"] .roles,[data-tone="slate"] .roles{border-color:var(--line-dk)}
.role{padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; transition:background .3s ease, color .3s ease}
[data-tone="ink"] .role,[data-tone="slate"] .role{border-color:var(--line-dk)}
.role:hover,.role.open{background:var(--black); color:var(--white)}
[data-tone="ink"] .role:hover,[data-tone="ink"] .role.open,[data-tone="slate"] .role:hover,[data-tone="slate"] .role.open{background:var(--gold); color:var(--black)}
.role .cl{display:block; color:var(--brown); font-size:.6rem; font-weight:850; letter-spacing:.11em; text-transform:uppercase}
.role:hover .cl,.role.open .cl{color:var(--gold)}
[data-tone="ink"] .role .cl,[data-tone="slate"] .role .cl{color:var(--gold)}
[data-tone="ink"] .role:hover .cl,[data-tone="ink"] .role.open .cl,[data-tone="slate"] .role:hover .cl,[data-tone="slate"] .role.open .cl{color:rgba(0,0,0,.66)}
.role .rn{display:block; margin:12px 0 9px; font-size:1.42rem; font-weight:620; letter-spacing:-.016em; line-height:1.02}
.role .rw{display:block; color:var(--muted); font-size:.82rem; line-height:1.55}
.role:hover .rw,.role.open .rw{color:rgba(255,255,255,.6)}
[data-tone="ink"] .role .rw,[data-tone="slate"] .role .rw{color:rgba(255,255,255,.55)}
[data-tone="ink"] .role:hover .rw,[data-tone="ink"] .role.open .rw,[data-tone="slate"] .role:hover .rw,[data-tone="slate"] .role.open .rw{color:rgba(0,0,0,.7)}
.role .rx{display:none; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.22)}
.role.open .rx{display:block; animation:fsw .45s var(--ease) both}
[data-tone="ink"] .role.open .rx,[data-tone="slate"] .role.open .rx{border-top-color:rgba(0,0,0,.35)}
.role dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:.78rem}
.role dt{color:rgba(255,255,255,.45); font-size:.58rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; padding-top:3px}
[data-tone="ink"] .role dt,[data-tone="slate"] .role dt{color:rgba(0,0,0,.5)}
.role dd{margin:0; color:rgba(255,255,255,.72)}
[data-tone="ink"] .role dd,[data-tone="slate"] .role dd{color:rgba(0,0,0,.78)}
.role .myth{margin:16px 0 0; color:var(--gold); font-size:.76rem; line-height:1.5; max-width:none}
[data-tone="ink"] .role .myth,[data-tone="slate"] .role .myth{color:rgba(0,0,0,.6)}
.rcount{margin-top:20px; color:var(--muted); font-size:.74rem}
[data-tone="ink"] .rcount,[data-tone="slate"] .rcount{color:rgba(255,255,255,.5)}

/* ═══ CHAT ═══ */
.chat{max-width:680px; border:1px solid var(--line-dk); background:var(--slate)}
.chat-h{display:flex; align-items:center; gap:11px; padding:17px 22px; border-bottom:1px solid var(--line-dk); color:rgba(255,255,255,.6); font-size:.62rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase}
.chat-h .lamp{width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(215,187,114,.16); animation:pls 2s infinite}
@keyframes pls{50%{box-shadow:0 0 0 11px rgba(215,187,114,0)}}
.chat-b{padding:24px 22px; display:flex; flex-direction:column; gap:16px; min-height:260px}
.msg{max-width:88%; padding:15px 19px; font-size:.88rem; line-height:1.6}
.msg.s{align-self:flex-end; background:var(--gold); color:var(--black); font-weight:600}
.msg.g{align-self:flex-start; background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); border:1px solid var(--line-dk)}
.msg.sys{align-self:stretch; max-width:100%; background:transparent; border:1px dashed rgba(215,187,114,.45); color:var(--gold); font-size:.62rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; text-align:center; padding:12px}
.chat-tabs{display:flex; border-top:1px solid var(--line-dk)}
.chat-tabs button{all:unset; flex:1; text-align:center; padding:16px 8px; cursor:pointer; color:rgba(255,255,255,.5); font-size:.61rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; border-right:1px solid var(--line-dk); transition:background .22s ease, color .22s ease}
.chat-tabs button:last-child{border-right:0}
.chat-tabs button:hover{color:#fff}
.chat-tabs button[aria-selected="true"]{background:var(--gold); color:var(--black)}

/* ═══ DOES / NEVER ═══ */
.dn{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-left:1px solid var(--line)}
[data-tone="ink"] .dn,[data-tone="slate"] .dn{border-color:var(--line-dk)}
@media(max-width:760px){.dn{grid-template-columns:1fr}}
.dn > div{padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
[data-tone="ink"] .dn > div,[data-tone="slate"] .dn > div{border-color:var(--line-dk)}
.dn h4{margin-bottom:24px; font-size:.66rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; letter-spacing:.14em}
.dn ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0}
.dn li{padding:15px 0 15px 26px; border-bottom:1px solid var(--line); position:relative; font-size:.88rem; line-height:1.55; color:var(--muted)}
[data-tone="ink"] .dn li,[data-tone="slate"] .dn li{border-color:var(--line-dk); color:rgba(255,255,255,.58)}
.dn li:last-child{border-bottom:0}
.dn li::before{position:absolute; left:0; top:15px; font-weight:900; font-size:.8rem}
.dn .does li::before{content:"+"; color:var(--gold)}
.dn .never li::before{content:"\00d7"; color:#B86A6A}

/* ═══ LADDER ═══ */
.ladder{border-top:1px solid var(--line)}
[data-tone="ink"] .ladder,[data-tone="slate"] .ladder{border-color:var(--line-dk)}
.rung{
  display:grid; grid-template-columns:72px minmax(200px,.8fr) minmax(280px,1fr) auto; gap:26px;
  align-items:center; min-height:118px; padding:22px 14px 22px 0; border-bottom:1px solid var(--line);
  transition:padding .24s ease, background .24s ease, color .24s ease;
}
[data-tone="ink"] .rung,[data-tone="slate"] .rung{border-color:var(--line-dk)}
.rung:hover{padding-left:19px; background:var(--gold); color:var(--black)}
.rung:hover p{color:rgba(0,0,0,.72)}
.rung:hover .n,.rung:hover .st{color:var(--black); border-color:rgba(0,0,0,.4)}
.rung .n{color:var(--brown); font-size:.67rem; font-weight:850; letter-spacing:.06em}
[data-tone="ink"] .rung .n,[data-tone="slate"] .rung .n{color:var(--gold)}
.rung h4{margin:0; font-size:clamp(1.35rem,2.3vw,2.25rem); font-weight:600; letter-spacing:-.017em; line-height:1}
.rung p{margin:0; font-size:.86rem; line-height:1.62}
.rung .st{padding:7px 12px; border:1px solid var(--line); font-size:.58rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
[data-tone="ink"] .rung .st,[data-tone="slate"] .rung .st{border-color:var(--line-dk); color:rgba(255,255,255,.55)}
.rung.now{background:rgba(215,187,114,.22)}
[data-tone="ink"] .rung.now,[data-tone="slate"] .rung.now{background:rgba(215,187,114,.14)}
.rung.now h4{color:var(--brown)}
[data-tone="ink"] .rung.now h4,[data-tone="slate"] .rung.now h4{color:var(--gold)}
.rung.now .st{border-color:var(--gold-dk); color:var(--brown)}
[data-tone="ink"] .rung.now .st,[data-tone="slate"] .rung.now .st{border-color:var(--gold); color:var(--gold)}
@media(max-width:820px){.rung{grid-template-columns:52px 1fr; gap:14px}.rung .st{grid-column:2; justify-self:start}}

/* ═══ BOARD ═══ */
.board{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
[data-tone="ink"] .board,[data-tone="slate"] .board{border-color:var(--line-dk)}
.cell{min-height:250px; padding:25px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; transition:background .3s ease, color .3s ease, transform .35s var(--ease)}
[data-tone="ink"] .cell,[data-tone="slate"] .cell{border-color:var(--line-dk)}
.cell:hover{position:relative; z-index:2; background:var(--black); color:var(--white); transform:translateY(-7px)}
[data-tone="ink"] .cell:hover,[data-tone="slate"] .cell:hover,[data-tone="gold"] .cell:hover{background:var(--gold); color:var(--black)}
.cell .k{display:block; color:var(--brown); font-size:.63rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase}
[data-tone="ink"] .cell .k,[data-tone="slate"] .cell .k{color:var(--gold)}
.cell .v{display:block; margin:auto 0 0; color:var(--gold-dk); font-size:clamp(3.2rem,4.8vw,5.2rem); font-weight:800; line-height:.92; letter-spacing:-.028em}
[data-tone="ink"] .cell .v,[data-tone="slate"] .cell .v{color:var(--gold)}
.cell:hover .v{color:var(--gold)}
[data-tone="ink"] .cell:hover .v,[data-tone="slate"] .cell:hover .v{color:var(--black)}
.cell .m{display:block; margin-top:16px; color:var(--muted); font-size:.8rem; line-height:1.55}
.cell:hover .m{color:rgba(255,255,255,.6)}
[data-tone="ink"] .cell .m,[data-tone="slate"] .cell .m{color:rgba(255,255,255,.55)}
[data-tone="ink"] .cell:hover .m,[data-tone="slate"] .cell:hover .m{color:rgba(0,0,0,.68)}
.tag{display:inline-block; padding:5px 11px; border:1px solid var(--line); font-size:.58rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}
.tag.ok{background:var(--gold); border-color:var(--gold); color:var(--black)}
.tag.pend{color:var(--muted)}
[data-tone="ink"] .tag,[data-tone="slate"] .tag{border-color:var(--line-dk); color:rgba(255,255,255,.6)}
[data-tone="ink"] .tag.ok,[data-tone="slate"] .tag.ok{color:var(--black)}

/* ═══ BRIDGE ═══ */
.bridge{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(20px,4vw,56px); align-items:center; padding:clamp(32px,4.4vw,60px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
[data-tone="ink"] .bridge,[data-tone="slate"] .bridge{border-color:var(--line-dk)}
@media(max-width:860px){.bridge{grid-template-columns:1fr}}
.bridge .cap{display:block; margin-bottom:16px; color:var(--brown); font-size:.63rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase}
[data-tone="ink"] .bridge .cap,[data-tone="slate"] .bridge .cap{color:var(--gold)}
.bridge .nm{display:block; font-size:clamp(1.6rem,3vw,2.9rem); font-weight:600; letter-spacing:-.018em; line-height:1}
.bridge .noder .nm{color:var(--gold-dk)}
[data-tone="ink"] .bridge .noder .nm,[data-tone="slate"] .bridge .noder .nm{color:var(--gold)}
.bridge .sub{display:block; margin-top:18px; color:var(--muted); font-size:.87rem; line-height:1.66}
[data-tone="ink"] .bridge .sub,[data-tone="slate"] .bridge .sub{color:rgba(255,255,255,.55)}
.bridge .link{display:grid; place-items:center; gap:12px}
.bridge .link .lb{color:var(--brown); font-size:.58rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
[data-tone="ink"] .bridge .link .lb,[data-tone="slate"] .bridge .link .lb{color:var(--gold)}
.bridge .link .ln{width:1px; height:44px; background:var(--gold-dk)}
@media(min-width:861px){.bridge .link .ln{width:78px; height:1px}}

/* DATA VIZ */
.viz{margin-top:clamp(28px,3.6vw,46px); border:1px solid var(--line); background:rgba(255,255,255,.4); padding:clamp(18px,2.2vw,26px)}
[data-tone="ink"] .viz,[data-tone="slate"] .viz{border-color:var(--line-dk); background:rgba(255,255,255,.04)}
[data-tone="gold"] .viz{border-color:rgba(0,0,0,.4); background:rgba(255,255,255,.18)}
.viz-h{display:flex; justify-content:space-between; gap:14px; margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:.6rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; color:var(--brown); max-width:none}
[data-tone="ink"] .viz-h,[data-tone="slate"] .viz-h{color:var(--gold); border-color:var(--line-dk)}
[data-tone="gold"] .viz-h{color:var(--black); border-color:rgba(0,0,0,.4)}
.viz-f{margin:18px 0 0; font-size:.76rem; line-height:1.55; color:var(--muted); max-width:none}
.viz-f b{color:var(--gold-dk); font-size:1.05rem; font-weight:800}
[data-tone="ink"] .viz-f,[data-tone="slate"] .viz-f{color:rgba(255,255,255,.55)}
[data-tone="ink"] .viz-f b,[data-tone="slate"] .viz-f b{color:var(--gold)}
.brow{display:grid; grid-template-columns:96px 1fr auto; gap:14px; align-items:center; margin-top:14px}
.bl{font-size:.74rem; font-weight:700; color:var(--ink)}
[data-tone="ink"] .bl,[data-tone="slate"] .bl{color:#fff}
.bt{height:16px; background:color-mix(in srgb,currentColor 12%,transparent); position:relative; overflow:hidden}
.fill{position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--gold-dk)}
.fill.hot{background:var(--black)}
[data-tone="ink"] .fill,[data-tone="slate"] .fill{background:var(--gold)}
[data-tone="ink"] .fill.hot,[data-tone="slate"] .fill.hot{background:#fff}
.js .viz .fill{width:0; transition:width 1.5s var(--ease) .25s}
.js .viz.seen .fill{width:var(--w)}
.bv{font-size:.78rem; font-weight:800; font-variant-numeric:tabular-nums; min-width:62px; text-align:right}
.duo{display:grid; grid-template-columns:1fr 1fr; margin-top:14px; border:1px solid var(--line)}
[data-tone="ink"] .duo,[data-tone="slate"] .duo{border-color:var(--line-dk)}
.duo > div{padding:18px 18px 16px}
.duo > div + div{border-left:1px solid var(--line)}
[data-tone="ink"] .duo > div + div,[data-tone="slate"] .duo > div + div{border-color:var(--line-dk)}
.duo .k{display:block; margin-bottom:12px; font-size:.6rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; color:var(--brown)}
[data-tone="ink"] .duo .k,[data-tone="slate"] .duo .k{color:var(--gold)}
.duo ul{margin:0; padding:0; list-style:none}
.duo li{padding:7px 0; border-top:1px solid var(--line); font-size:.78rem; font-weight:600; line-height:1.4}
[data-tone="ink"] .duo li,[data-tone="slate"] .duo li{border-color:var(--line-dk)}
@media(max-width:560px){.duo{grid-template-columns:1fr}.duo > div + div{border-left:0; border-top:1px solid var(--line)}.brow{grid-template-columns:78px 1fr auto}}
.lrow{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line); font-size:.82rem; font-weight:650}
[data-tone="ink"] .lrow,[data-tone="slate"] .lrow{border-color:var(--line-dk)}
.sgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; align-items:center; margin-top:9px}
.sgrid.sg-head i{font-style:normal; font-size:.6rem; font-weight:850; text-align:center; color:var(--muted)}
.sgrid.sg-head i:first-child{color:var(--gold-dk)}
.sl{grid-column:1/-1; font-size:.7rem; font-weight:700; margin-bottom:-4px}
.sb{height:14px; background:var(--gold-dk); transform-origin:left}
.sb.late{background:transparent; border:1px dashed var(--gold-dk)}
[data-tone="ink"] .sb,[data-tone="slate"] .sb{background:var(--gold)}
[data-tone="ink"] .sb.late,[data-tone="slate"] .sb.late{background:transparent; border-color:var(--gold)}
.js .viz .sb{transform:scaleX(0); transition:transform 1.3s var(--ease) .3s}
.js .viz.seen .sb{transform:none}

/* FORM */
.form{display:grid; gap:20px; max-width:560px}
.f-row{display:grid; gap:9px}
.f-row label{font-size:.63rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; color:var(--brown)}
[data-tone="ink"] .f-row label,[data-tone="slate"] .f-row label{color:var(--gold)}
.f-row input,.f-row select,.f-row textarea{
  font-family:var(--sans); font-size:1rem; color:inherit; background:transparent;
  border:0; border-bottom:1px solid var(--line); padding:13px 2px; width:100%; transition:border-color .25s ease;
}
[data-tone="ink"] .f-row input,[data-tone="ink"] .f-row select,[data-tone="ink"] .f-row textarea,
[data-tone="slate"] .f-row input,[data-tone="slate"] .f-row select,[data-tone="slate"] .f-row textarea{border-bottom-color:var(--line-dk)}
.f-row textarea{min-height:130px; resize:vertical}
.f-row :is(input,select,textarea):focus{border-bottom-color:var(--gold-dk); outline:none}
.f-row select option{background:var(--white); color:var(--ink)}
[data-tone="ink"] .f-row select option,[data-tone="slate"] .f-row select option{background:var(--slate); color:var(--white)}

/* ═══ FOOTER ═══ */
footer{padding:64px var(--pad) 26px; border-top:1px solid var(--line); background:var(--white)}
.f-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(26px,3vw,48px); padding-bottom:50px}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
.f-grid h5{margin:0 0 18px; color:var(--brown); font-size:.63rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase}
.f-grid a{display:inline-flex; align-items:center; gap:6px; padding:7px 0; font-size:.86rem; font-weight:700; letter-spacing:-.006em; transition:color .22s ease, transform .3s var(--swift)}
.f-grid a:hover{color:var(--brown); transform:translateX(5px)}
.f-grid .brand{margin-bottom:16px}
.giant{display:flex; align-items:center; gap:clamp(14px,2.6vw,40px); padding:clamp(20px,4vw,56px) 0 clamp(26px,4vw,52px); border-top:1px solid var(--line); color:var(--ink)}
.giant span:last-child{font-size:clamp(3.2rem,15.4vw,17.5rem); font-weight:800; letter-spacing:.02em; line-height:.86; text-transform:uppercase; margin-right:-.02em}
.giant .mark{width:clamp(56px,12.4vw,210px); height:clamp(56px,12.4vw,210px); color:var(--gold-dk)}
.legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 40px; padding-top:24px; border-top:1px solid var(--line)}
.legal .note{font-size:.7rem}

/* ═══ REVEAL ═══ */
.js [data-rv]{opacity:0; transform:translateY(34px)}
.js [data-rv].seen{opacity:1; transform:none; transition:opacity .95s ease, transform 1.05s var(--ease)}

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

/* ═══════════ v4 · PREMIUM LAYER ═══════════ */

/* film grain on black */
[data-tone="ink"]::before,[data-tone="slate"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-color:var(--black)}
[data-tone="slate"]::before{background-color:var(--slate)}

/* gold sweep on flooded sections */
[data-tone="gold"]::after{
  content:""; position:absolute; top:0; left:50%; width:100vw; height:100%; transform:translateX(-50%);
  z-index:-1; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.3) 50%,transparent 62%);
  background-size:260% 100%; animation:shine 9s linear infinite;
}
@keyframes shine{from{background-position:160% 0}to{background-position:-110% 0}}

/* button light sweep */
.btn{position:relative; overflow:hidden}
.btn::after{content:""; position:absolute; inset:0; pointer-events:none; transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%)}
.btn:hover::after{transform:translateX(130%); transition:transform .9s var(--ease)}
.btn.ghost::after{display:none}

/* scroll progress */
.prog{position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--gold-dk);
  transform:scaleX(var(--p,0)); transform-origin:left; pointer-events:none}

/* cursor spotlight on cells */
.stat,.card,.arm,.cell,.loop-i{position:relative; overflow:hidden}
.stat::after,.card::after,.arm::after,.cell::after,.loop-i::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .45s ease;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(215,187,114,.32),transparent 62%);
}
.stat:hover::after,.card:hover::after,.arm:hover::after,.cell:hover::after,.loop-i:hover::after{opacity:1}
[data-tone="ink"] .card::after,[data-tone="ink"] .arm::after,[data-tone="ink"] .cell::after,[data-tone="ink"] .stat::after,
[data-tone="slate"] .card::after,[data-tone="slate"] .arm::after,[data-tone="slate"] .cell::after,[data-tone="slate"] .stat::after,
.loop-i::after{background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.5),transparent 62%)}

/* hero response to cursor */
.hero-primary{background:radial-gradient(560px circle at var(--hx,72%) var(--hy,26%),rgba(215,187,114,.12),transparent 62%)}
.signal-mark{translate:var(--tx,0px) var(--ty,0px); transition:translate .9s var(--ease)}

/* word-by-word headline reveal */
.js-split .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .05em .16em; margin:0 -.05em -.16em}
.js-split .wi{display:inline-block; transform:translateY(115%)}
.js-split .in .wi{transform:none; transition:transform 1.15s var(--ease); transition-delay:calc(var(--i) * 55ms)}

/* waffles */
.stat{min-height:310px}
.waffle{display:grid; grid-template-columns:repeat(20,1fr); gap:2px; margin:22px 0 6px; width:100%}
.waffle i{aspect-ratio:1; background:color-mix(in srgb,currentColor 15%,transparent); transform:scale(.25); opacity:0;
  transition:transform .6s var(--ease) calc(var(--i) * 9ms), opacity .6s ease calc(var(--i) * 9ms), background .3s ease}
.seen .waffle i,.no-js .waffle i{transform:none; opacity:1}
.waffle i.on{background:var(--gold-dk)}
.waffle i.g{background:var(--gold-dk); box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--gold-dk)}
.stat:hover .waffle i.on,.stat:hover .waffle i.g{background:var(--gold)}
.stat:hover .waffle i.g{box-shadow:0 0 0 2px var(--black),0 0 0 3px var(--gold)}
.stat:hover .waffle i:not(.on):not(.g){background:rgba(255,255,255,.2)}

/* 3,000-dot canvas */
.dotwrap{position:relative; margin:34px 0 16px}
.dotcv{display:block; width:100%; height:auto; aspect-ratio:75/40}
.hotring{position:absolute; left:calc(37.5 / 75 * 100%); top:calc(20.5 / 40 * 100%); width:2.4%; aspect-ratio:1; border-radius:50%;
  border:1.5px solid var(--gold-dk); transform:translate(-50%,-50%) scale(1); opacity:0; pointer-events:none}
[data-tone="ink"] .hotring,[data-tone="slate"] .hotring{border-color:var(--gold)}
.dotwrap.done .hotring{animation:ring 2.6s var(--ease) infinite}
@keyframes ring{0%{transform:translate(-50%,-50%) scale(1); opacity:.9}100%{transform:translate(-50%,-50%) scale(4.2); opacity:0}}