/* Next Layer — studio system.
   Layout: 12-col editorial grid on near-black; lime is the single accent, spent on state + one full-bleed contact band. */
:root{
  color-scheme:dark;
  --bg:#0d0c0a;--bg-2:#13120f;--bg-3:#1a1915;
  --ink:#ebe5d9;--ink-2:#aaa397;--ink-3:#746e64;
  --line:rgba(235,229,217,.08);--line-2:rgba(235,229,217,.16);
  --acc:#b7bf98;--acc-ink:#0d0c0a;--acc-dim:rgba(183,191,152,.10);--paper:#e6e0d3;--paper-ink:#1a1813;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Newsreader",ui-serif,Georgia,serif;--display:"Newsreader",ui-serif,Georgia,serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:120px;--s10:168px;
  --r:0px;--maxw:1360px;
  --gut-l:max(20px,env(safe-area-inset-left,0px),4vw);--gut-r:max(20px,env(safe-area-inset-right,0px),4vw);
  --ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --t-display:clamp(3.4rem,9.2vw,10.4rem);--t-h2:clamp(2.4rem,5vw,4.9rem);--t-h3:clamp(2rem,3.4vw,3.3rem);
  --t-lead:clamp(1.0625rem,1.3vw,1.25rem);--t-body:1rem;--t-meta:.75rem;--t-micro:.6875rem;
}
@media (min-width:1500px){:root{--gut-l:max(48px,env(safe-area-inset-left,0px));--gut-r:max(48px,env(safe-area-inset-right,0px))}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}ul,ol{padding:0;list-style:none}
svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--acc-ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:1px}
.skip{position:absolute;left:var(--s4);top:-80px;background:var(--ink);color:var(--acc-ink);padding:var(--s2) var(--s4);z-index:100;font-weight:500}
.skip:focus{top:calc(var(--s4) + env(safe-area-inset-top,0px))}
.mono{font-family:var(--mono);letter-spacing:.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r);position:relative}

/* ── type ── */
.display{font-size:var(--t-display);line-height:.9;letter-spacing:-.052em;font-weight:600;text-wrap:balance}
.display .line{display:block}
.display .accent{color:var(--ink)}
.display em{color:var(--acc)}
.display em{font:400 italic 1.08em/1 var(--serif);letter-spacing:-.025em;padding-right:.04em}
.h2{font-size:var(--t-h2);line-height:1;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.h3{font-size:var(--t-h3);line-height:1.02;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.dim{color:var(--ink-3)}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-2);max-width:38ch;text-wrap:pretty}
.eyebrow{font:500 var(--t-meta)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.eyebrow .sep{color:var(--line-2)}
.idx{color:var(--acc);font-family:var(--mono)}
.sq{width:7px;height:7px;background:var(--acc);display:inline-block}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);min-height:50px;padding:0 var(--s5);font:500 .9375rem/1 var(--sans);letter-spacing:-.01em;border:1px solid transparent;border-radius:var(--r);transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);white-space:nowrap}
.btn .arr{display:inline-block;transition:transform .35s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn:hover .arr-d{transform:translateY(3px)}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--ink);color:var(--acc-ink)}
.btn-solid:hover{background:#fff}
.btn-line{border-color:var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:rgba(242,239,232,.04)}
.btn-ink{background:var(--paper-ink);color:var(--paper)}
.btn-ink:hover{background:#000;color:#fff}
.btn-sm{min-height:38px;padding:0 var(--s4);font-size:.875rem}
.btn-lg{min-height:60px;padding:0 var(--s6);font-size:1.0625rem}

/* ── nav ── */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background-color .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,10,9,.78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:1.0625rem}
.logo-mark{display:inline-grid;gap:3px;width:18px}
.logo-mark i{height:4px;background:var(--ink);display:block;transition:transform .4s var(--ease-out)}
.logo-mark i+i{background:var(--acc)}
.logo:hover .logo-mark i:first-child{transform:translateX(3px)}
.nav-links{display:flex;align-items:center;gap:var(--s6)}
.nav-links>a:not(.btn){font-size:.9375rem;color:var(--ink-2);display:inline-flex;align-items:baseline;gap:6px;transition:color .2s;position:relative;padding:6px 0}
.nav-links>a:not(.btn) .mono{font-size:var(--t-micro);color:var(--ink-3);transition:color .2s}
.nav-links>a:not(.btn):hover{color:var(--ink)}
.nav-links>a:not(.btn):hover .mono{color:var(--acc)}
.nav-links>a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.nav-links>a:not(.btn):hover::after{transform:scaleX(1)}
.menu-btn{display:none;width:44px;height:44px;margin-right:-10px;position:relative}
.menu-btn span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease-out),top .35s var(--ease-out)}
.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:25px}
.nav.open .menu-btn span:first-child{top:21px;transform:rotate(45deg)}
.nav.open .menu-btn span:last-child{top:21px;transform:rotate(-45deg)}

@media (max-width:820px){
  .menu-btn{display:block}
  .nav-links{position:fixed;inset:0;top:calc(68px + env(safe-area-inset-top,0px));background:var(--bg);flex-direction:column;align-items:stretch;gap:0;padding:var(--s5) var(--gut-r) calc(var(--s6) + env(safe-area-inset-bottom,0px)) var(--gut-l);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .nav.open{background:var(--bg);border-bottom-color:var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.open .nav-links{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav-links>a:not(.btn){font-size:clamp(2.25rem,10vw,3rem);font-weight:600;letter-spacing:-.04em;color:var(--ink);padding:var(--s4) 0;border-bottom:1px solid var(--line);gap:var(--s4);align-items:baseline}
  .nav-links>a:not(.btn) .mono{font-size:var(--t-meta)}
  .nav-links>a:not(.btn)::after{display:none}
  .nav-cta{margin-top:auto;min-height:56px;font-size:1rem}
}

/* ── hero ── */
.hero{position:relative;padding-top:calc(68px + env(safe-area-inset-top,0px) + clamp(40px,7vw,104px));overflow:hidden;border-bottom:1px solid var(--line)}
.hero-cols{position:absolute;inset:0;max-width:var(--maxw);margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r);display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none}
.hero-cols i{border-left:1px solid var(--line);opacity:.55}
.hero-cols i:last-child{display:none}
.hero-cols i:nth-child(4){border-right:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.hero-copy{display:grid;gap:clamp(28px,3.4vw,48px);min-width:0}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:end}
.hero-foot .lead{max-width:40ch}
.cta-row{display:flex;gap:var(--s3);flex-wrap:wrap}

.shiplog{border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(25,25,23,.92),rgba(17,17,16,.92));border-radius:var(--r);min-width:0;position:relative;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.shiplog::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(183,191,152,.28),transparent 35%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.sl-head{display:flex;align-items:center;gap:var(--s3);padding:12px var(--s4);border-bottom:1px solid var(--line);font-size:var(--t-micro);color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.sl-dots{display:flex;gap:5px}.sl-dots i{width:7px;height:7px;border:1px solid var(--line-2);border-radius:50%}
.sl-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:var(--acc)}
.sl-live i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(183,191,152,.45);animation:ping 2.4s var(--ease) infinite}
.sl-graph{width:100%;height:auto;padding:var(--s5) var(--s4) var(--s2);overflow:visible}
.sl-wire{fill:none;stroke:var(--line-2);stroke-width:1}
.sl-run{stroke:var(--acc);stroke-dasharray:352;stroke-dashoffset:352;animation:run 4.8s var(--ease) 1.1s infinite}
.sl-nodes rect{fill:var(--bg-2);stroke:var(--ink-3)}
.sl-nodes text,.sl-axis{fill:var(--ink-3);font:400 10px var(--mono);text-anchor:middle;letter-spacing:.02em}
.sl-axis{text-anchor:start;font-size:9px;fill:var(--ink-3);opacity:.7}
.sl-end rect{fill:var(--ink);stroke:var(--ink)}
.sl-end text{fill:var(--acc)}
.sl-lines{padding:var(--s2) 0 var(--s3);font-size:.75rem}
.sl-lines li{display:grid;grid-template-columns:3.6em 7.2em minmax(0,1fr) auto;gap:var(--s3);padding:7px var(--s4);border-top:1px dashed var(--line);align-items:baseline;position:relative}
.sl-lines li:first-child{border-top:0}
.sl-lines .t{color:var(--ink-3)}.sl-lines .k{color:var(--ink)}.sl-lines .d{color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-lines .s{color:var(--ink-3)}
.sl-lines li.ok .s{color:var(--acc);background:transparent;border:1px solid var(--acc);padding:1px 6px;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.08em}
.sl-lines li.ok .k{color:var(--acc)}
.sl-lines li::before{content:"";position:absolute;inset:0;background:var(--acc-dim);opacity:0;pointer-events:none}
.sl-lines li:nth-child(1)::before{animation:scan 4.8s 1.1s infinite}
.sl-lines li:nth-child(2)::before{animation:scan 4.8s 2.06s infinite}
.sl-lines li:nth-child(3)::before{animation:scan 4.8s 3.02s infinite}
.sl-lines li:nth-child(4)::before{animation:scan 4.8s 3.98s infinite}
.sl-cap{font-size:var(--t-micro);color:var(--ink-3);padding:10px var(--s4);border-top:1px solid var(--line);letter-spacing:.02em}

.hero-index{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s6);align-items:center;margin-top:clamp(56px,7vw,112px);padding-top:var(--s5);padding-bottom:var(--s5);border-top:1px solid var(--line);font-size:var(--t-meta);color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.hero-index ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);color:var(--ink-2)}
.hero-index li{display:inline-flex;align-items:center;gap:var(--s3)}
.hero-index li::before{content:"";width:5px;height:1px;background:var(--acc)}
.hi-next{color:var(--ink-2);transition:color .2s}
.hi-next:hover{color:var(--acc)}

/* hero entrance (ends fully visible) */
@media (prefers-reduced-motion:no-preference){
  .in-1,.in-2,.in-3,.in-4,.in-5{animation:rise 1s var(--ease-out) both}
  .in-2{animation-delay:.08s}.in-3{animation-delay:.2s}.in-4{animation-delay:.34s}.in-5{animation-delay:.42s;animation-duration:1.2s}
}

/* ── sections ── */
.section{padding-top:clamp(88px,11vw,168px);padding-bottom:clamp(88px,11vw,168px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eb eb" "h f";gap:var(--s5) var(--s6);align-items:end;margin-bottom:clamp(48px,6vw,96px)}
.sec-head .eyebrow{grid-area:eb}.sec-head .h2{grid-area:h}.sec-head .filters{grid-area:f}

.filters{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.filter{padding:10px 14px;font-size:var(--t-meta);color:var(--ink-2);border-left:1px solid var(--line);transition:background-color .2s,color .2s;text-transform:uppercase;letter-spacing:.08em}
.filter:first-child{border-left:0}
.filter sup{font-size:.85em;color:var(--ink-3);margin-left:2px;vertical-align:.3em}
.filter:hover{color:var(--ink);background:rgba(242,239,232,.04)}
.filter.is-on{background:var(--ink);color:var(--acc-ink)}
.filter.is-on sup{color:var(--acc-ink);opacity:.6}

/* ── case studies ── */
.cases{display:grid;gap:clamp(96px,12vw,184px)}
.case{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:var(--s6);align-items:start}
.case[hidden]{display:none}
.case-body{min-width:0;display:grid;gap:var(--s4);align-content:start}
.cb-desc{color:var(--ink-2);max-width:46ch;text-wrap:pretty;font-size:1.0625rem;line-height:1.55}
.labels{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.08em}
.labels li{border:1px solid var(--line-2);padding:5px 9px;color:var(--ink-2);border-radius:2px}
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--s2)}
.specs div{padding:var(--s3) var(--s3) var(--s3) 0;display:grid;gap:4px}
.specs div+div{border-left:1px solid var(--line);padding-left:var(--s3)}
.specs dt{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.specs dd{font-size:.8125rem;color:var(--ink)}
.ext{display:inline-flex;align-items:center;gap:var(--s3);align-self:start;justify-self:start;font-weight:500;padding:12px 0;border-bottom:1px solid var(--line-2);transition:border-color .25s,color .25s;margin-top:var(--s2)}
.ext .arr{transition:transform .35s var(--ease-out);color:var(--acc)}
.ext:hover{border-color:var(--acc)}
.ext:hover .arr{transform:translate(3px,-3px)}

.media{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);isolation:isolate;min-width:0;max-width:100%}
.media>*:not(.mock-tag){transition:transform .9s var(--ease-out)}
.mock-tag{position:absolute;top:14px;left:14px;z-index:5;font-size:10px;text-transform:uppercase;letter-spacing:.12em;padding:4px 7px;border:1px solid currentColor;opacity:.55;border-radius:2px}

/* layouts */
.case-feature .media{grid-column:1/-1;aspect-ratio:16/8.2}
.case-feature .case-body{grid-column:1/-1;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:inherit;row-gap:var(--s5);align-items:start;padding-top:var(--s2)}
.case-feature .cb-id{grid-column:1/6;display:grid;gap:var(--s4)}
.case-feature .cb-desc{grid-column:6/10}
.case-feature .labels{grid-column:10/13;justify-content:flex-end;align-self:start}
.case-right .case-body{grid-column:1/5;position:sticky;top:110px;padding-top:var(--s5)}
.case-right .media{grid-column:5/13;aspect-ratio:16/11.5}
.case-left .media{grid-column:1/8;aspect-ratio:4/4.6}
.case-left .case-body{grid-column:9/13;align-self:end;padding-bottom:var(--s2)}
.case-band .case-body{grid-column:1/-1;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:inherit;align-items:end}
.case-band .cb-id{grid-column:1/7;display:grid;gap:var(--s4)}
.case-band .cb-id .h3{font-size:clamp(3rem,8vw,7.5rem);letter-spacing:-.055em;line-height:.88}
.case-band .cb-side{grid-column:8/13;display:grid;gap:var(--s3)}
.case-band .media{grid-column:1/-1;aspect-ratio:21/8.5}
.case-band .labels{grid-column:1/-1}

@media (hover:hover){
  .case:hover .media>*:not(.mock-tag){transform:scale(1.012)}
}

/* ——— media: Trivo (amber on ink) ——— */
.m-trivo{--tv:#c8a46b;--tv-2:#b4705a;max-height:720px;background:radial-gradient(120% 90% at 18% 110%,rgba(200,164,107,.10),transparent 55%),#15141a;color:#efe8db;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(16px,3vw,48px);padding:clamp(48px,5vw,80px) clamp(20px,5vw,80px) clamp(24px,4vw,56px);align-items:center}
.tv-phone{background:#1d1b26;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:18px 16px;display:grid;gap:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);max-width:300px;justify-self:end;width:100%}
.tv-top{display:flex;justify-content:space-between;font-size:10px;color:rgba(239,232,219,.55);text-transform:uppercase;letter-spacing:.08em}
.tv-coins{display:inline-flex;align-items:center;gap:5px;color:var(--tv)}
.tv-coins i{width:9px;height:9px;border-radius:50%;background:var(--tv);box-shadow:inset 0 0 0 2px #8e7144}
.tv-timer{height:3px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.tv-timer i{display:block;height:100%;width:64%;background:linear-gradient(90deg,var(--tv),var(--tv-2));animation:timer 6s linear infinite}
.tv-q{font-weight:600;font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.2;letter-spacing:-.02em}
.tv-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tv-opts span{font-size:.75rem;padding:10px 8px;border:1px solid rgba(255,255,255,.1);border-radius:10px;text-align:center}
.tv-opts .ok{background:var(--tv);color:#1d1408;border-color:var(--tv);font-weight:600}
.tv-foot{display:flex;justify-content:space-between;font-size:10px;color:var(--tv);text-transform:uppercase;letter-spacing:.08em}
.tv-pipe{border:1px solid rgba(255,255,255,.09);background:rgba(10,10,12,.55);border-radius:6px;display:grid;gap:14px;padding:14px;min-width:0}
.tv-ph{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(239,232,219,.5)}
.tv-live{display:inline-flex;gap:6px;align-items:center;color:var(--tv)}
.tv-live i{width:6px;height:6px;border-radius:50%;background:var(--tv);animation:blink 1.6s steps(2) infinite}
.tv-dag{display:flex;align-items:center;flex-wrap:nowrap;font-size:10px;overflow:hidden}
.tv-dag .d{padding:5px 7px;border:1px solid rgba(255,255,255,.14);border-radius:3px;white-space:nowrap;color:rgba(239,232,219,.85)}
.tv-dag .d.run{border-color:var(--tv);color:var(--tv);background:rgba(200,164,107,.08)}
.tv-dag b{flex:1 1 10px;min-width:6px;height:1px;background:rgba(255,255,255,.3)}
.tv-dag b.w{background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 3px,transparent 3px 6px)}
.tv-frames{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tv-frames span{aspect-ratio:9/12;border-radius:3px;position:relative;overflow:hidden;background:linear-gradient(160deg,hsl(var(--h) 26% 52%),hsl(calc(var(--h) + 40) 22% 20%) 70%);}
.tv-frames span::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 35%,rgba(255,255,255,.35),transparent 30%),linear-gradient(transparent 60%,rgba(0,0,0,.55))}
.tv-frames span.pend{background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px);border:1px dashed rgba(255,255,255,.14)}
.tv-frames span.pend::after{display:none}
.tv-frames em{position:absolute;left:5px;bottom:4px;z-index:1;font-style:normal;font-size:9px;color:rgba(255,255,255,.8)}
.tv-jobs{width:100%;border-collapse:collapse;font-size:10.5px}
.tv-jobs td{padding:6px 0;border-top:1px dashed rgba(255,255,255,.1);color:rgba(239,232,219,.75)}
.tv-jobs td:last-child{text-align:right}
.st{font-style:normal;padding:2px 6px;border-radius:2px;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em}
.st.run{color:#1d1408;background:var(--tv)}.st.q{border:1px solid rgba(255,255,255,.2);color:rgba(239,232,219,.7)}.st.ok{color:#9fb38a;border:1px solid rgba(159,179,138,.35)}
.tv-budget{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:10px;color:rgba(239,232,219,.55);text-transform:uppercase;letter-spacing:.08em}
.tv-budget i{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;position:relative}
.tv-budget i::after{content:"";position:absolute;top:-2px;bottom:-2px;left:82%;width:1px;background:var(--tv-2)}
.tv-budget b{display:block;height:100%;width:61%;background:linear-gradient(90deg,#9fb38a,var(--tv))}

/* ——— media: Tatidata (paper) ——— */
.m-tati{--tt:#3f6a60;background:#e6e1d5;color:#1c1b18;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:clamp(12px,2vw,24px);padding:clamp(48px,4.5vw,64px) clamp(16px,3vw,40px) clamp(16px,3vw,40px);align-items:stretch}
.m-tati .mock-tag{color:#1c1b18}
.tt-chat{background:#f7f5ef;border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 40px -24px rgba(40,30,10,.35)}
.tt-ch{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--tt);color:#f2fbf8;font-size:.8rem;line-height:1.2}
.tt-ch b{display:block;font-weight:600}.tt-ch em{font-style:normal;font-size:.7rem;opacity:.75}
.tt-av{width:26px;height:26px;border-radius:50%;background:conic-gradient(from 200deg,#d9f2ea,#7cc6b4,#d9f2ea);flex:none}
.tt-msgs{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:14px;flex:1;background:repeating-linear-gradient(45deg,rgba(15,107,92,.03) 0 10px,transparent 10px 20px)}
.msg{font-size:.78rem;line-height:1.4;padding:8px 11px;border-radius:10px;max-width:86%}
.msg.in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.msg.out{background:#dbe5df;align-self:flex-end;border-top-right-radius:2px}
.msg.typing{display:flex;gap:4px;padding:11px 12px;width:auto}
.msg.typing i{width:5px;height:5px;border-radius:50%;background:#5a8f84;animation:dot 1.2s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
.tt-search{display:grid;gap:10px;align-content:start;min-width:0}
.tt-q{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px;padding:11px 12px;font-size:.75rem;min-width:0}
.tt-k{color:var(--tt);font-size:1rem;line-height:1}
.tt-n{margin-left:auto;color:#7a766b;white-space:nowrap;font-size:.65rem;text-transform:uppercase;letter-spacing:.08em}
.tt-video{aspect-ratio:16/8;background:radial-gradient(80% 120% at 70% 0%,#3a4a46,#141917);border-radius:8px;position:relative;overflow:hidden}
.tt-video::before{content:"";position:absolute;left:12%;top:24%;width:44%;height:34%;border:1px solid rgba(255,255,255,.18);background:linear-gradient(transparent 49%,rgba(255,255,255,.12) 50%,transparent 51%),radial-gradient(ellipse 60% 70% at 50% 110%,rgba(255,255,255,.15),transparent 60%)}
.tt-title{position:absolute;top:10px;left:12px;font-size:10px;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.08em}
.tt-play{position:absolute;right:16%;top:36%;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92)}
.tt-play::after{content:"";position:absolute;left:13px;top:10px;border:7px solid transparent;border-left:11px solid #141917;border-right:0}
.tt-track{position:absolute;left:12px;right:12px;bottom:12px;height:3px;background:rgba(255,255,255,.2);border-radius:2px}
.tt-track b{position:absolute;left:0;top:0;bottom:0;width:var(--p);background:#a9c4b8;border-radius:2px}
.tt-track .m{position:absolute;left:var(--p);top:-5px;width:2px;height:13px;background:#a9c4b8}
.tt-track .m.dim{background:rgba(255,255,255,.5)}
.tt-hit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;background:#fff;border:1px solid rgba(15,107,92,.35);border-left:3px solid var(--tt);border-radius:6px;padding:10px 12px;font-size:.78rem;line-height:1.4}
.tt-hit>.mono:first-child{color:var(--tt);font-size:.7rem;font-weight:500}
.tt-hit mark{background:rgba(143,178,165,.35);color:inherit;padding:0 2px}
.tt-jump{font-size:.65rem;color:var(--tt);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.tt-hit.dim{border-color:rgba(0,0,0,.08);border-left-color:rgba(0,0,0,.2);color:#6d695f;background:transparent}
.tt-hit.dim>.mono:first-child{color:#6d695f}

/* ——— media: RocketLive (night map) ——— */
.m-rocket{--rk:#c9594b;background:#0b0d10;color:#dfe3e8}
.rk-bar{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;gap:var(--s4);padding:12px 14px 12px 140px;font-size:10.5px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(11,13,16,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-transform:uppercase;letter-spacing:.08em;color:rgba(223,227,232,.6)}
.rk-brand{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:500}
.rk-brand i{width:7px;height:7px;background:var(--rk);border-radius:50%;animation:blink 1.2s steps(2) infinite}
.rk-lang b{color:#fff;font-weight:500}
.rk-upd{margin-left:auto}
.rk-map{position:absolute;inset:44px 0 0;width:100%;height:calc(100% - 44px);color:#dfe3e8}
.rk-land{fill:rgba(223,227,232,.045);stroke:rgba(223,227,232,.4);stroke-width:.8;stroke-linejoin:round}
.rk-city circle{fill:rgba(223,227,232,.7)}
.rk-city text,.rk-alert text{font:400 8.5px var(--mono);fill:rgba(223,227,232,.6);letter-spacing:.03em}
.rk-alert circle{fill:var(--rk)}
.rk-alert text{fill:#d39a90}
.rk-alert .ring{fill:none;stroke:var(--rk);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:ring 2.2s var(--ease) infinite}
.rk-alert.d2 .ring{animation-delay:.7s}.rk-alert.d3 .ring{animation-delay:1.4s}
.rk-me rect{fill:#9db4c4;stroke:#0b0d10;stroke-width:1.5}
.rk-feed{position:absolute;right:14px;bottom:14px;z-index:3;width:min(250px,58%);background:rgba(17,20,24,.9);border:1px solid rgba(255,255,255,.08);border-radius:6px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10.5px;overflow:hidden}
.rk-fh{display:flex;justify-content:space-between;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.07);text-transform:uppercase;letter-spacing:.1em;color:rgba(223,227,232,.55)}
.rk-fh b{color:#fff;background:var(--rk);padding:0 6px;border-radius:2px;font-weight:500}
.rk-it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 12px;border-top:1px solid rgba(255,255,255,.05)}
.rk-it:nth-child(2){border-top:0;background:rgba(201,89,75,.08)}
.rk-it i{width:6px;height:6px;border-radius:50%;background:var(--rk)}
.rk-it span{display:grid;line-height:1.35;color:rgba(223,227,232,.6);min-width:0}
.rk-it b{color:#fff;font-weight:500}
.rk-it em{font-style:normal;color:rgba(223,227,232,.5)}
.rk-mine{position:absolute;left:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:9px;padding:8px 11px;font-size:10.5px;background:rgba(17,20,24,.9);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:rgba(223,227,232,.8)}
.rk-sw{width:24px;height:13px;border-radius:7px;background:#5b7a64;position:relative}
.rk-sw i{position:absolute;right:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#fff}
.m-rocket .mock-tag{color:#dfe3e8;top:58px;z-index:6}
.rk-bar{padding-left:14px}

/* ——— media: GuessSong (wine + rose) ——— */
.m-guess{--gs:#c08a94;--gs-2:#d4bd8c;background:radial-gradient(90% 140% at 100% 0%,rgba(192,138,148,.10),transparent 55%),#18121a;color:#f6e9ef;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.75fr);gap:clamp(16px,3vw,48px);padding:clamp(52px,5vw,72px) clamp(20px,4vw,64px) clamp(24px,4vw,56px);align-items:center}
.m-guess .mock-tag{color:#f6e9ef}
.gs-stems{display:grid;gap:9px;position:relative;min-width:0}
.gs-step{display:flex;justify-content:space-between;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:rgba(246,233,239,.6);margin-bottom:6px}
.gs-step span:first-child{color:var(--gs)}
.gs-step [lang="he"]{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.85rem;color:#f6e9ef}
.gs-row{display:grid;grid-template-columns:5.5em minmax(0,1fr) auto;gap:12px;align-items:center;height:34px;padding:0 10px;border:1px solid rgba(246,233,239,.08);border-radius:5px;background:rgba(255,255,255,.02)}
.gs-row>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(246,233,239,.45)}
.gs-row.on{border-color:rgba(192,138,148,.3);background:rgba(192,138,148,.06)}
.gs-row.on>span{color:#fff}
.gs-row em{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:rgba(246,233,239,.4);border:1px dashed rgba(246,233,239,.2);padding:2px 6px;border-radius:2px}
.wave{display:flex;align-items:center;gap:2px;height:22px;min-width:0;overflow:hidden}
.wave b{flex:1 0 2px;max-width:4px;background:rgba(246,233,239,.16);border-radius:1px}
.gs-row.on .wave b{background:var(--gs)}
.gs-row:not(.on) .wave{filter:blur(1.5px);opacity:.7}
.gs-head{position:absolute;top:30px;bottom:0;left:calc(5.5em + 22px);width:1.5px;background:var(--gs-2);animation:playhead 7s linear infinite}
.gs-side{display:grid;gap:12px;min-width:0}
.gs-score{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(246,233,239,.1);padding-bottom:10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:rgba(246,233,239,.55)}
.gs-score b{font:600 1.6rem/1 var(--sans);letter-spacing:-.03em;color:var(--gs-2)}
.gs-tries{display:grid;gap:6px;font-size:11px;color:rgba(246,233,239,.45)}
.gs-tries li{display:flex;gap:9px}.gs-tries span{color:var(--gs)}
.gs-tries .now{color:#fff}.gs-tries .now span{color:var(--gs-2)}
.gs-in{border:1px solid rgba(246,233,239,.25);background:rgba(0,0,0,.25);border-radius:6px;padding:12px;font-size:12px;color:rgba(246,233,239,.6);display:flex;align-items:center}
.caret{width:1.5px;height:14px;background:var(--gs-2);margin-left:3px;animation:blink 1s steps(2) infinite}
.gs-btns{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.gs-btns span{padding:10px;border:1px solid rgba(246,233,239,.18);border-radius:6px;text-align:center;color:rgba(246,233,239,.7)}
.gs-btns .go{background:var(--gs);border-color:var(--gs);color:#1c1316;font-weight:500;padding:10px 18px}

/* ── approach ── */
.approach{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg-2),var(--bg) 60%)}
.ap-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.ap-head{position:sticky;top:120px;display:grid;gap:var(--s5)}
.principles{border-top:1px solid var(--line-2)}
.principles li{display:grid;grid-template-columns:minmax(64px,1.1fr) minmax(0,4fr);grid-template-areas:"n h" "n p";column-gap:var(--s6);row-gap:var(--s3);padding:clamp(28px,3.4vw,48px) 0;border-bottom:1px solid var(--line-2);position:relative}
.principles li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.principles li:hover::before{transform:scaleX(1)}
.pn{grid-area:n;font:300 clamp(2.75rem,5vw,4.75rem)/.85 var(--sans);letter-spacing:-.05em;color:var(--ink-3);transition:color .4s var(--ease)}
.principles li:hover .pn{color:var(--acc)}
.principles .h3{grid-area:h;font-size:clamp(1.5rem,2.4vw,2.25rem)}
.principles p{grid-area:p;color:var(--ink-2);max-width:44ch;font-size:1.0625rem;text-wrap:pretty}

/* ── contact (the one loud moment) ── */
.contact{background:var(--paper);color:var(--paper-ink);padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(64px,8vw,128px);position:relative;overflow:hidden}
.contact::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(26,24,19,.06) 1px,transparent 1px) 0 0/calc(100%/12) 100%;opacity:.7}
.contact .wrap{z-index:1}
.ct-top{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:var(--t-meta);text-transform:uppercase;letter-spacing:.12em;padding-bottom:var(--s4);border-bottom:1px solid rgba(10,10,9,.25)}
.ct-top .idx{color:var(--paper-ink);margin-right:var(--s3);opacity:.55}
.ct-h{font-size:clamp(3.2rem,10.5vw,11rem);line-height:.86;letter-spacing:-.058em;font-weight:600;margin-top:clamp(40px,6vw,96px);max-width:12ch;text-wrap:balance}
.ct-h em{font:400 italic 1.06em/1 var(--serif);letter-spacing:-.03em;color:#6f7556}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:end;margin-top:clamp(40px,5vw,72px)}
.ct-lead{font-size:clamp(1.125rem,1.6vw,1.5rem);line-height:1.4;max-width:30ch;letter-spacing:-.015em;font-weight:500}
.ct-actions{display:grid;gap:var(--s3);justify-items:start}
.ct-mail{display:flex;align-items:center;gap:var(--s3);font-size:.875rem}
.ct-addr{user-select:all;border-bottom:1px solid rgba(10,10,9,.35);padding-bottom:2px}
.copy{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;border:1px solid rgba(10,10,9,.35);padding:5px 9px;border-radius:2px;transition:background-color .2s,color .2s}
.copy:hover{background:var(--paper-ink);color:var(--paper)}
.contact :focus-visible{outline-color:var(--paper-ink)}

/* ── footer ── */
.foot{border-top:1px solid var(--line);padding-top:var(--s6);padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom,0px))}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:var(--s4) var(--s6);flex-wrap:wrap;font-size:var(--t-meta);color:var(--ink-3)}
.logo-sm{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--sans);font-weight:600;font-size:.9375rem;letter-spacing:-.02em}
.foot-tag{margin-right:auto;margin-left:var(--s4)}
.foot a{transition:color .2s}.foot a:hover{color:var(--acc)}

/* ── scroll reveal: CSS scroll-driven, never gated on JS, always ends visible ── */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
.empty{color:var(--ink-3);padding:var(--s7) 0;text-align:center}

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes reveal{from{opacity:.001;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(183,191,152,.4)}70%,100%{box-shadow:0 0 0 8px rgba(183,191,152,0)}}
@keyframes run{0%{stroke-dashoffset:352}70%,100%{stroke-dashoffset:0}}
@keyframes scan{0%,18%,100%{opacity:0}4%{opacity:1}}
@keyframes blink{50%{opacity:.25}}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(5.5);opacity:0}}
@keyframes timer{from{width:100%}to{width:0}}
@keyframes playhead{from{left:calc(5.5em + 22px)}to{left:calc(100% - 4.5em)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .sl-run{stroke-dashoffset:0}
}

/* ── responsive ── */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr}
  .shiplog{max-width:620px}
  .hero-foot{grid-template-columns:1fr}
  .case-feature .cb-id{grid-column:1/-1}
  .case-feature .cb-desc{grid-column:1/8}
  .case-feature .labels{grid-column:8/13}
  .case-right .case-body{grid-column:1/-1;position:static;padding-top:0}
  .case-right .media{grid-column:1/-1}
  .case-left .media{grid-column:1/8}
  .case-left .case-body{grid-column:8/13}
  .m-trivo{aspect-ratio:auto}
  .case-feature .media{aspect-ratio:auto}
  .ap-grid{grid-template-columns:1fr}
  .ap-head{position:static}
}
@media (max-width:820px){
  .hero-cols{grid-template-columns:repeat(2,1fr)}.hero-cols i:nth-child(n+3){display:none}.hero-cols i:nth-child(2){border-right:1px solid var(--line)}
  .hero-index{grid-template-columns:1fr;gap:var(--s4)}
  .hi-next{display:none}
  .sec-head{grid-template-columns:1fr;grid-template-areas:"eb" "h" "f"}
  .filters{justify-self:start;max-width:100%}
  .case{row-gap:var(--s5)}
  .case>*{grid-column:1/-1!important}
  .case-feature .case-body,.case-band .case-body{grid-template-columns:1fr;row-gap:var(--s4)}
  .case-feature .cb-desc,.case-feature .labels,.case-band .cb-id,.case-band .cb-side{grid-column:1/-1}
  .case-feature .labels{justify-content:flex-start}
  .case-left .media{order:-1;aspect-ratio:4/5}
  .case-right .media,.case-band .media{aspect-ratio:auto}
  .m-trivo{grid-template-columns:1fr;padding-top:56px}
  .tv-phone{justify-self:center;max-width:320px}
  .m-tati{grid-template-columns:1fr}
  .m-guess{grid-template-columns:1fr;padding-top:56px}
  .principles li{grid-template-columns:1fr;grid-template-areas:"n" "h" "p";row-gap:var(--s3)}
  .ct-row{grid-template-columns:1fr}
  .foot-tag{display:none}
}
@media (max-width:480px){
  .display{font-size:clamp(3rem,15vw,4.4rem);line-height:.95}
  .cta-row .btn{flex:1 1 100%}
  .sl-lines li{grid-template-columns:3.2em 6.6em minmax(0,1fr) auto;gap:8px;padding:7px 12px}
  .sl-lines .d{display:none}
  .sl-lines li{grid-template-columns:3.2em minmax(0,1fr) auto}
  .filter{padding:9px 10px;font-size:.6875rem}
  .tv-dag{font-size:9px}.tv-dag .d{padding:4px 5px}
  .rk-feed{width:auto;left:14px;bottom:60px}
  .rk-it:nth-child(n+3){display:none}
  .case-left .media{aspect-ratio:4/5.6}
  .tv-dag{flex-wrap:wrap;gap:6px 0}
  .rk-upd{display:none}
  .tt-hit{grid-template-columns:auto minmax(0,1fr)}.tt-jump{display:none}
}

/* ── story: sticky scroll narrative (native scroll, no hijack) ── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.case [id],#story,#work{scroll-margin-top:96px}
.story{--p:0;position:relative;height:520vh;border-bottom:1px solid var(--line)}
.story-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:68px}
.story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:center;width:100%}
.story-text{display:grid;gap:var(--s6);min-width:0}
.chapters{display:grid;min-height:15rem}
.ch{grid-area:1/1;display:grid;gap:var(--s4);align-content:start;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .5s var(--ease),transform .6s var(--ease-out),visibility 0s .5s}
.ch.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ch-n{font-size:var(--t-meta);color:var(--acc);text-transform:uppercase;letter-spacing:.12em}
.ch .h3{font-size:clamp(2rem,3.6vw,3.5rem);line-height:1;max-width:14ch}
.ch p{color:var(--ink-2);max-width:40ch;font-size:1.0625rem}
.rail{display:flex;gap:var(--s2);flex-wrap:wrap}
.rail button{display:grid;gap:8px;text-align:left;font:500 var(--t-micro)/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);padding:6px 0;min-width:64px;flex:1 1 0;transition:color .25s}
.rail i{display:block;height:2px;background:var(--line-2);position:relative;overflow:hidden}
.rail i::after{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.rail button.done i::after,.rail button[aria-current] i::after{transform:scaleX(1)}
.rail button[aria-current]{color:var(--ink)}
.rail button:hover{color:var(--ink)}

.stage{border:1px solid var(--line-2);border-radius:var(--r);background:linear-gradient(180deg,var(--bg-3),var(--bg-2));height:min(600px,72svh);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-width:0;position:relative;box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
.st-head{display:flex;align-items:center;gap:var(--s3);padding:10px 12px 10px var(--s4);border-bottom:1px solid var(--line);font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);flex-wrap:wrap}
.briefs{display:flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.briefs button{padding:7px 10px;font:500 var(--t-micro)/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);border-left:1px solid var(--line);transition:background-color .2s,color .2s}
.briefs button:first-child{border-left:0}
.briefs button:hover{color:var(--ink);background:rgba(242,239,232,.05)}
.briefs button[aria-pressed="true"]{background:var(--ink);color:var(--acc-ink)}
.st-step{margin-left:auto;font-variant-numeric:tabular-nums}.st-step b{color:var(--ink);font-weight:500}
.st-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);font:400 10px var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line)}
.st-track span{padding:8px var(--s4);border-left:1px solid var(--line);position:relative;z-index:1;transition:color .3s}
.st-track span:first-of-type{border-left:0}
.st-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 100%);background:var(--acc-dim);border-right:1px solid var(--acc)}
.story[data-step="0"] .st-track span:nth-of-type(-n+1),.story[data-step="1"] .st-track span:nth-of-type(-n+2),.story[data-step="2"] .st-track span:nth-of-type(-n+3),.story[data-step="3"] .st-track span:nth-of-type(-n+4),.story[data-step="4"] .st-track span{color:var(--acc)}
.st-body{position:relative;overflow:hidden;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px}
.st-cap{font-size:10px;color:var(--ink-3);padding:9px var(--s4);border-top:1px solid var(--line)}
.sc{position:absolute;inset:0;padding:clamp(20px,3vw,40px);opacity:0;visibility:hidden;transform:translateY(16px) scale(.985);transition:opacity .45s var(--ease),transform .6s var(--ease-out),visibility 0s .45s}
.story[data-step="0"] [data-s="0"],.story[data-step="1"] [data-s="1"],.story[data-step="2"] [data-s="2"],.story[data-step="3"] [data-s="3"],.story[data-step="4"] [data-s="4"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* 1 brief */
.sc-brief{display:grid;align-content:center;gap:var(--s5)}
.sc-file,.sc-meta{font-size:var(--t-micro);color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.sc-file{justify-self:start;border:1px solid var(--line-2);padding:4px 8px}
.brief-text{font:400 clamp(1.5rem,2.6vw,2.4rem)/1.18 var(--serif);font-style:italic;letter-spacing:-.01em;max-width:24ch;color:var(--ink);min-height:3.6em}
.caret-l{display:inline-block;width:2px;height:.9em;background:var(--acc);margin-left:3px;vertical-align:-.1em;animation:blink 1s steps(2) infinite}

/* 2 prototype */
.sc-proto{padding:0}
.proto-g{position:absolute;inset:0;width:100%;height:100%}
.pw{fill:none;stroke:var(--ink-3);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1s var(--ease-out) .15s}
.pw-e{stroke:var(--acc)}
.story[data-step="1"] .pw{stroke-dashoffset:0}
.pkt{fill:var(--acc)}
.pn-tool,.pn-core,.pn-eval{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);white-space:nowrap}
.pn-tool{font-size:11px;padding:7px 10px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink-2);border-radius:2px}
.pn-core{display:grid;gap:4px;place-items:center;padding:16px 20px;background:var(--ink);color:var(--acc-ink);border-radius:2px;box-shadow:0 0 0 6px rgba(242,239,232,.06)}
.pn-core em{font-style:normal;font-size:9px;text-transform:uppercase;letter-spacing:.12em;opacity:.6}
.pn-core b{font-weight:600;letter-spacing:-.02em}
.pn-eval{display:grid;gap:3px;padding:9px 12px;border:1px solid var(--acc);color:var(--acc);font-size:11px;background:rgba(183,191,152,.05)}
.pn-eval i{font-style:normal;font-size:10px;color:var(--ink-2)}

/* 3 product variants */
.sc-prod{display:grid;place-items:center}
.pv{display:none;width:min(100%,380px)}
.story[data-brief="agent"] .pv-agent,.story[data-brief="video"] .pv-video,.story[data-brief="live"] .pv-live{display:grid}
.pv-agent{gap:8px;background:#ebe8df;color:#1c1b18;border-radius:12px;padding:0 0 12px;overflow:hidden}
.pv-bar{display:flex;align-items:center;gap:9px;background:#3f6a60;color:#eef3f0;padding:10px 12px;font-size:.8rem}
.pv-bar i{width:20px;height:20px;border-radius:50%;background:#c9d6d0}
.pv-agent .msg{margin:0 12px}
.pv-in{margin:4px 12px 0;background:#fff;border-radius:16px;padding:8px 12px;font-size:.7rem;color:#8a867b}
.pv-video{gap:10px;background:#14131a;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px;color:#efe8db}
.pv-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pv-frames span{aspect-ratio:9/13;border-radius:3px;background:linear-gradient(160deg,hsl(var(--h) 26% 52%),hsl(calc(var(--h) + 40) 22% 20%) 70%)}
.pv-play{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:10px}
.pv-play>i{width:0;height:0;border:6px solid transparent;border-left:9px solid #c8a46b;border-right:0}
.pv-play>b{height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.pv-play>b em{display:block;height:100%;width:40%;background:#c8a46b;animation:timer 6s linear infinite reverse}
.pv-prompt{font-size:10.5px;color:rgba(239,232,219,.6);border-top:1px dashed rgba(255,255,255,.12);padding-top:9px}
.pv-live{grid-template-columns:1fr 1fr;gap:10px;background:#0b0d10;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px;color:#dfe3e8}
.pv-map{aspect-ratio:3/4;position:relative;border:1px solid rgba(255,255,255,.08);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:16px 16px}
.pv-map i,.pv-map b{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;border-radius:50%;background:#c9594b;transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(201,89,75,.5);animation:alertping 1.8s infinite}
.pv-map i:nth-child(2){animation-delay:.6s}.pv-map i:nth-child(3){animation-delay:1.2s}
.pv-map b{background:#9db4c4;border-radius:1px;transform:translate(-50%,-50%) rotate(45deg);animation:none}
.pv-list{display:grid;gap:6px;align-content:start;font-size:10.5px}
.pv-list li{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;padding:7px 8px;border:1px solid rgba(255,255,255,.07);border-radius:4px}
.pv-list li i{width:6px;height:6px;border-radius:50%;background:#c9594b}
.pv-list em{font-style:normal;color:rgba(223,227,232,.5)}

/* 4 automate */
.sc-auto{display:grid;align-content:center;gap:var(--s5)}
.lane{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:center}
.lane-l{font-size:var(--t-micro);color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.lane-q{position:relative;height:34px;border:1px solid var(--line-2);overflow:hidden;background:rgba(10,10,9,.6)}
.lane-q i{position:absolute;top:8px;left:-24px;width:16px;height:16px;border:1px solid var(--acc);background:var(--acc-dim);animation:flow 4.2s linear infinite}
.lane-q i:nth-child(2){animation-delay:-.7s}.lane-q i:nth-child(3){animation-delay:-1.4s}.lane-q i:nth-child(4){animation-delay:-2.1s}.lane-q i:nth-child(5){animation-delay:-2.8s}.lane-q i:nth-child(6){animation-delay:-3.5s}
.workers{display:grid;gap:6px}
.wk{display:grid;grid-template-columns:6em minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:9px 12px;border:1px solid var(--line);background:var(--bg-2);font-size:11px;color:var(--ink-2)}
.wk b{font-weight:400;color:var(--ink)}
.wk .st.run{background:transparent;color:var(--acc);border:1px solid rgba(183,191,152,.45)}
.auto-meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);font-size:11px}
.auto-meta div{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line)}
.auto-meta span{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.auto-meta b{font-weight:400}
.cap{height:6px;background:rgba(242,239,232,.08);margin-top:4px;position:relative}
.cap::after{content:"";position:absolute;left:80%;top:-3px;bottom:-3px;width:1px;background:var(--ink)}
.cap b{display:block;height:100%;width:58%;background:var(--acc)}

/* 5 ship */
.sc-ship{display:grid;align-content:center;gap:var(--s6)}
.term{display:grid;gap:10px;font-size:clamp(.8rem,1.1vw,.95rem);color:var(--ink-2)}
.term li{opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .4s var(--ease-out)}
.story[data-step="4"] .term li{opacity:1;transform:none}
.story[data-step="4"] .term li:nth-child(2){transition-delay:.25s}.story[data-step="4"] .term li:nth-child(3){transition-delay:.5s}.story[data-step="4"] .term li:nth-child(4){transition-delay:.75s}.story[data-step="4"] .term li:nth-child(5){transition-delay:1.05s}
.pr{color:var(--ink-3)}.okc{color:var(--acc)}
.live-l{color:var(--ink);font-size:clamp(1.4rem,2.6vw,2.2rem);font-family:var(--sans);font-weight:600;letter-spacing:-.03em;margin-top:var(--s3)}
.live-l .okc{animation:blink 1.4s steps(2) infinite}
.see{justify-self:start;display:inline-flex;gap:var(--s3);align-items:center;font-weight:500;padding:12px 18px;background:var(--ink);color:var(--acc-ink);border-radius:var(--r);transition:background-color .2s}
.see:hover{background:#fff}
.see .arr{transition:transform .35s var(--ease-out)}.see:hover .arr{transform:translateY(3px)}

@keyframes flow{from{left:-24px}to{left:calc(100% + 8px)}}
@keyframes alertping{0%{box-shadow:0 0 0 0 rgba(201,89,75,.5)}80%,100%{box-shadow:0 0 0 12px rgba(201,89,75,0)}}

@media (max-width:900px){
  .story{height:480vh}
  .story-pin{align-items:stretch;padding-top:calc(68px + 8px);padding-bottom:12px}
  .story-grid{grid-template-columns:1fr;gap:14px;align-content:start}
  .stage{order:-1;height:min(56svh,480px);min-height:340px}
  .story-text{gap:12px;align-content:start}
  .story-text>.eyebrow{display:none}
  .chapters{min-height:9.5rem}
  .ch{gap:8px}
  .ch .h3{font-size:clamp(1.5rem,6.4vw,2.2rem);max-width:none}
  .ch p{font-size:.9375rem;line-height:1.45}
  .rail{flex-wrap:nowrap;gap:6px}
  .rail button{min-width:0}
  .rail span{display:none}
  .st-head{padding:8px 10px}
  .st-lbl{display:none}
  .st-track span{padding:6px 8px;font-size:9px;overflow:hidden;text-overflow:ellipsis}
  .st-cap{display:none}
  .sc{padding:16px}
  .pn-tool{font-size:9.5px;padding:5px 7px}
  .pn-core{padding:10px 12px}
  .pn-eval{font-size:9.5px;padding:6px 8px}
  .pv{width:min(100%,300px)}
  .pv-agent .msg{font-size:.72rem}
  .pv-agent .msg:nth-child(4){display:none}
}
@media (max-width:420px){
  .briefs button{padding:7px 7px;font-size:10px}
  .st-track span{font-size:0;padding:3px}
}


/* ════ Identity layer: editorial serif, hairline drafting, stacked sheets ════ */
body{font-size:1rem;letter-spacing:.002em}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.035;transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* type: light display serif, italic for emphasis, mono in small caps for notes */
.display,.h2,.h3,.ct-h,.ch .h3,.case-band .cb-id .h3{font-family:var(--display);font-weight:300;font-optical-sizing:auto;letter-spacing:-.025em}
.display{line-height:.92}
.display em,.ct-h em{font:italic 300 1em/1 var(--display);letter-spacing:-.03em;padding-right:.02em}
.h2{line-height:1.02}.h2 .dim{font-style:italic}
.h3{line-height:1.02;letter-spacing:-.02em}
.case-band .cb-id .h3{font-size:clamp(3.4rem,9vw,8.5rem);letter-spacing:-.035em;line-height:.9}
.ct-h{letter-spacing:-.04em;line-height:.9;font-size:clamp(3.4rem,11vw,11.5rem)}
.eyebrow,.ch-n,.hero-index,.filter,.labels,.st-head,.rail button,.mock-tag{font-feature-settings:"ss02"}
.eyebrow{letter-spacing:.14em;font-weight:400}
.lead,.cb-desc,.ch p,.principles p{font-size:1.0625rem;line-height:1.6}
.logo{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:-.02em}
.logo-sm{font-family:var(--display);font-weight:400;font-size:1.1rem}

/* square, drafted controls */
.btn{border-radius:0;font-weight:500;letter-spacing:0;min-height:52px;padding:0 22px 0 24px}
.btn-sm{min-height:38px}
.btn .arr{font-family:var(--mono);font-size:.9em}
.btn-line{border-color:var(--line-2)}
.nav-links>a:not(.btn){font-size:.875rem;letter-spacing:.01em}

/* filters + brief tabs as underlined text, not boxes */
.filters,.briefs{border:0;border-radius:0;gap:2px 18px;overflow:visible}
.filter,.briefs button{border:0!important;padding:8px 0;background:none!important;color:var(--ink-3);position:relative}
.filter::after,.briefs button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.filter:hover,.briefs button:hover{color:var(--ink)}
.filter.is-on,.briefs button[aria-pressed="true"]{color:var(--ink)}
.filter.is-on::after,.briefs button[aria-pressed="true"]::after{transform:scaleX(1)}
.filter.is-on sup{color:var(--acc);opacity:1}

/* capability labels as a slashed line */
.labels{gap:0;font-size:var(--t-meta);letter-spacing:.08em}
.labels li{border:0;padding:0;color:var(--ink-3)}
.labels li+li::before{content:"/";margin:0 .7em;color:var(--line-2)}

/* the signature: every figure is a sheet with the next layers stacked behind it */
.media{border-color:var(--line-2);overflow:visible;--o:9px;
  box-shadow:var(--o) calc(var(--o) * -1) 0 -1px var(--bg),var(--o) calc(var(--o) * -1) 0 0 var(--line-2),calc(var(--o) * 2) calc(var(--o) * -2) 0 -1px var(--bg),calc(var(--o) * 2) calc(var(--o) * -2) 0 0 var(--line);
  transition:box-shadow .7s var(--ease-out);margin-top:18px;margin-right:18px}
.media>*:not(.mock-tag){transition:none}
@media (hover:hover){.case:hover .media{--o:14px}.case:hover .media>*:not(.mock-tag){transform:none}}
@property --o{syntax:"<length>";inherits:true;initial-value:9px}
.media{clip-path:none}
.m-trivo,.m-tati,.m-rocket,.m-guess{overflow:hidden}
.mock-tag{border:0;padding:0;opacity:.6;letter-spacing:.08em;font-size:10px;top:16px;left:18px}
.m-rocket .mock-tag{top:56px}

/* sheet headings for the work: big italic index beside the title */
.case .eyebrow .idx{font:italic 300 1.6em/1 var(--display);letter-spacing:0;color:var(--acc)}
.sec-head .eyebrow .idx,.ap-head .eyebrow .idx,.story-text>.eyebrow .idx,.ct-top .idx{font:italic 400 1.5em/1 var(--display);letter-spacing:0}

/* specs + rail + stage: drafted, square */
.specs{border-color:var(--line-2)}
.stage{border-radius:0;border-color:var(--line-2);box-shadow:9px -9px 0 -1px var(--bg),9px -9px 0 0 var(--line-2),18px -18px 0 -1px var(--bg),18px -18px 0 0 var(--line);margin:18px 18px 0 0}
.st-body{background-size:40px 40px}
.brief-text{font-weight:300}
.pn-core{border-radius:0;font-family:var(--display)}
.pn-core b{font-weight:400;font-size:1.1rem;letter-spacing:-.01em}
.pn-tool,.pn-eval,.wk,.auto-meta div,.lane-q{border-radius:0}
.see{border-radius:0}
.live-l{font-family:var(--display);font-weight:300}

/* approach: italic "No." numerals */
.pn{font:italic 300 clamp(2rem,3.4vw,3rem)/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.principles .h3{font-size:clamp(1.8rem,2.8vw,2.6rem)}

/* contact */
.ct-lead{font-family:var(--display);font-weight:300;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.25;letter-spacing:-.01em;max-width:24ch}
.btn-ink{border-radius:0}

/* ── hero stack diagram ── */
.stack{min-width:0;display:grid;gap:var(--s3);align-self:center}
.stack svg{width:100%;height:auto;overflow:visible}
.stack .gd{fill:none;stroke:var(--line-2);stroke-dasharray:2 5}
.stack .pl{fill:rgba(26,25,21,.92);stroke:var(--ink-3);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .4s,stroke .4s}
.stack .dt{fill:var(--ink-3)}
.stack .dl{fill:none;stroke:var(--ink-3);stroke-width:1;vector-effect:non-scaling-stroke}
.stack .nd{fill:var(--bg-3);stroke:var(--ink-2);stroke-width:1;vector-effect:non-scaling-stroke}
.stack .ui{fill:none;stroke:var(--ink-3);stroke-width:1;vector-effect:non-scaling-stroke}
.stack .job{fill:var(--ink-2)}
.stack .ck{fill:none;stroke:var(--acc);stroke-width:1.6;vector-effect:non-scaling-stroke}
.stack .ly-top .pl{fill:rgba(183,191,152,.10);stroke:var(--acc)}
.stack .ld{stroke:var(--line-2);fill:none}
.stack .lt{font:300 19px var(--display);fill:var(--ink);letter-spacing:-.01em}
.stack .lt-n{font:italic 300 13px var(--display);fill:var(--acc)}
.stack .lt-s{font:400 9.5px var(--mono);fill:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.stack .ly{transform-box:view-box;cursor:default}
.stack .ly:hover .pl{stroke:var(--ink)}
.stack .ly:hover .lt{fill:var(--acc)}
.stack figcaption{display:flex;gap:var(--s3);font-size:var(--t-micro);color:var(--ink-3);letter-spacing:.04em;border-top:1px solid var(--line);padding-top:var(--s3)}
.stack figcaption span{font:italic 400 1.3em/1 var(--display);color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .stack .ly{animation:drift 7s var(--ease) infinite;animation-delay:calc(var(--i) * -.35s)}
  .stack .ly-top{animation:land 1.4s var(--ease-out) .6s both,drift 7s var(--ease) 2s infinite}
}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--i) * -5px))}}
@keyframes land{from{transform:translateY(-60px)}to{transform:none}}

.hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center}
@media (max-width:1100px){.hero-grid{grid-template-columns:1fr}.stack{max-width:560px}}
@media (max-width:820px){.media{--o:6px;margin-top:12px;margin-right:12px}.stage{box-shadow:6px -6px 0 -1px var(--bg),6px -6px 0 0 var(--line-2);margin:12px 12px 0 0}}

/* ════ Hero as chapter I–II: pinned scene, the stack is built as you scroll ════ */
.hero{height:300vh;overflow:visible;padding-top:0;border-bottom:0}
.hero-pin{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(68px + env(safe-area-inset-top,0px) + 16px);overflow:hidden;border-bottom:1px solid var(--line)}
.hero-index{margin-top:clamp(24px,4vw,56px)}
/* line 1 gets struck through as the story starts */
.display .line:first-child{transition:color .6s var(--ease)}
.strk{background:linear-gradient(var(--acc),var(--acc)) no-repeat 0 58%/calc(var(--strike,0) * 100%) max(2px,.04em);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero:not([data-beat="0"]) .display .line:first-child{color:var(--ink-3)}
/* narration replaces the lead, one beat at a time */
.narr{display:grid;min-height:7.5em}
.nb{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s var(--ease),transform .55s var(--ease-out),visibility 0s .45s}
.nb.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nk{display:block;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
/* stack: dim until its layer is told, current layer lit, layers spread with progress */
.stack .ly{translate:0 calc((var(--i) - 2) * var(--spread,0) * -16px);transition:opacity .5s var(--ease)}
.hero:not([data-beat="0"]):not([data-beat="1"]) .stack .ly{opacity:.28}
.hero[data-beat] .stack .ly.told{opacity:1}
.hero:not([data-beat="0"]):not([data-beat="1"]) .stack .ly-top:not(.told) .pl{stroke:var(--ink-3);fill:rgba(26,25,21,.92)}
.hero .stack .ly.now .pl{stroke:var(--acc);fill:rgba(183,191,152,.08)}
.hero .stack .ly.now .lt{fill:var(--acc)}
/* scroll cue becomes a progress bar for the scene */
.hi-next{display:inline-flex;align-items:center;gap:var(--s3)}
.hi-bar{display:block;width:72px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.hi-bar b{position:absolute;inset:0;background:var(--acc);transform:scaleX(var(--hp,0));transform-origin:left}
.hero[data-beat="0"] .hi-bar b{animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* ════ Chapter marker: tells you where you are in the story ════ */
.chapter{position:fixed;z-index:40;left:max(20px,env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:auto auto;align-items:baseline;gap:4px 10px;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:#ebe5d9;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .4s}
.chapter.on{opacity:1}
.chap-n{font:italic 400 1.6rem/1 var(--display);letter-spacing:0;text-transform:none}
.chap-bar{grid-column:1/-1;display:block;height:1px;width:120px;background:rgba(235,229,217,.25);position:relative}
.chap-bar em{position:absolute;inset:0;background:#ebe5d9;transform:scaleX(var(--cp,0));transform-origin:left}
.chap-t{transition:opacity .3s}

@media (max-width:820px){
  .hero{height:320vh}
  .hero-pin{justify-content:flex-start;padding-top:calc(68px + env(safe-area-inset-top,0px) + 8px);padding-bottom:12px}
  .hero-copy{gap:14px}
  .hero-copy>.eyebrow{display:none}
  .hero-foot{gap:14px}
  .narr{min-height:6.6em}
  .narr .lead{font-size:.98rem;line-height:1.5}
  .cta-row{flex-wrap:nowrap}.cta-row .btn{flex:1 1 0;min-height:46px;padding:0 12px;font-size:.875rem}
  .hero-grid{gap:10px}
  .stack{max-width:330px;width:100%;justify-self:center;gap:6px}
  .stack figcaption{display:none}
  .hero-index{display:none}
  .chapter{left:auto;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .chap-bar{width:80px}
}
@media (max-height:700px) and (max-width:820px){.stack{max-width:250px}}

/* ════ Layer: the scripted AI guide in the hero ════ */
.agent{min-width:0;display:grid;border:1px solid var(--line-2);background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  box-shadow:9px -9px 0 -1px var(--bg),9px -9px 0 0 var(--line-2),18px -18px 0 -1px var(--bg),18px -18px 0 0 var(--line);margin:18px 18px 0 0;align-self:center}
.ag-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.ag-head b{font:400 1.05rem/1 var(--display);text-transform:none;letter-spacing:-.01em;color:var(--ink)}
.ag-badge{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3a31,#15140f 70%);border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;gap:4px}
.ag-badge i{width:3px;height:6px;border-radius:2px;background:var(--ink);animation:blinkeye 4.5s infinite}
.ag-state{margin-left:auto;display:inline-flex;align-items:center;gap:7px}
.ag-state i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);transition:background .3s}
.agent.speaking .ag-state i{background:var(--acc);animation:blink 1s steps(2) infinite}
.agent.speaking .ag-state{color:var(--acc)}
.ag-stage{position:relative;aspect-ratio:1/.86;max-height:46vh;width:100%;border-bottom:1px solid var(--line);background:radial-gradient(60% 60% at 50% 45%,rgba(183,191,152,.06),transparent 70%)}
.ag-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.ag-scene{position:absolute;right:12px;bottom:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ag-say{padding:14px 16px 10px;min-height:6.2em}
.ag-text{font:300 clamp(1.05rem,1.35vw,1.3rem)/1.38 var(--display);letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.ag-text::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--acc);margin-left:3px;vertical-align:-.15em;opacity:0}
.agent.speaking .ag-text::after{opacity:1;animation:blink .8s steps(2) infinite}
.ag-ask{display:flex;gap:6px;padding:0 16px 14px;overflow-x:auto;scrollbar-width:none}
.ag-ask::-webkit-scrollbar{display:none}
.ag-ask button{flex:none;font:400 var(--t-micro)/1 var(--mono);letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--line-2);padding:8px 10px;transition:border-color .2s,color .2s,background-color .2s}
.ag-ask button:hover{color:var(--ink);border-color:var(--ink-3)}
.ag-ask button[aria-pressed="true"]{color:var(--acc-ink);background:var(--ink);border-color:var(--ink)}
.agent figcaption{display:flex;gap:10px;font-size:10px;color:var(--ink-3);padding:9px 16px;border-top:1px solid var(--line);letter-spacing:.03em}
.agent figcaption span{font:italic 400 1.25em/1 var(--display);color:var(--ink-2)}
@keyframes blinkeye{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@media (max-width:1100px){.agent{max-width:560px}}
@media (max-width:820px){
  .hero-foot .lead{display:none}
  .agent{margin:10px 10px 0 0;box-shadow:6px -6px 0 -1px var(--bg),6px -6px 0 0 var(--line-2);width:calc(100% - 10px)}
  .ag-stage{aspect-ratio:auto;height:min(30svh,250px);max-height:none}
  .ag-say{min-height:5.4em;padding:10px 12px 8px}
  .ag-text{font-size:1rem}
  .ag-ask{padding:0 12px 10px}
  .agent figcaption{display:none}
}
@media (max-width:820px) and (max-height:720px){.ag-stage{height:22svh}}


/* ════ Layer docked: the guide follows you through every chapter ════ */
.dock{position:fixed;z-index:45;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;gap:10px;flex-direction:row-reverse;
  opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .45s var(--ease),transform .55s var(--ease-out),visibility 0s .45s;pointer-events:none}
.dock.on{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}
.dk-face{position:relative;flex:none;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#24231d,#0f0e0b 72%);border:1px solid var(--line-2);box-shadow:0 18px 40px -16px rgba(0,0,0,.9);transition:transform .3s var(--ease-out),border-color .3s}
.dk-face:hover{transform:scale(1.05);border-color:var(--ink-3)}
.dk-face canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.dk-new{position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:var(--acc);border:2px solid var(--bg);transform:scale(0);transition:transform .3s var(--ease-out)}
.dock.min.unread .dk-new{transform:scale(1)}
.dk-body{width:min(330px,calc(100vw - 120px));background:rgba(19,18,15,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-2);
  box-shadow:6px -6px 0 -1px var(--bg),6px -6px 0 0 var(--line),0 24px 60px -24px rgba(0,0,0,.9);display:grid;transform-origin:bottom right;transition:opacity .3s var(--ease),transform .4s var(--ease-out),visibility 0s .3s}
.dock.min .dk-body{opacity:0;visibility:hidden;transform:scale(.92) translateY(8px)}
.dock:not(.min) .dk-body{transition-delay:0s}
.dk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.dk-chap{display:inline-flex;align-items:baseline;gap:8px}
.dk-n{font:italic 400 1.2rem/1 var(--display);letter-spacing:0;text-transform:none;color:var(--acc)}
.dk-min{font:inherit;color:var(--ink-3);padding:4px 0;transition:color .2s}.dk-min:hover{color:var(--ink)}
.dk-text{padding:12px 14px 10px;font:300 1.02rem/1.4 var(--display);color:var(--ink);min-height:4.4em;text-wrap:pretty}
.dk-text::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--acc);margin-left:3px;vertical-align:-.15em;opacity:0}
.dock.speaking .dk-text::after{opacity:1;animation:blink .8s steps(2) infinite}
.dk-ask{display:flex;gap:6px;padding:0 14px 12px;overflow-x:auto;scrollbar-width:none}
.dk-ask::-webkit-scrollbar{display:none}
.dk-ask button{flex:none;font:400 10px/1 var(--mono);letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--line-2);padding:7px 9px;transition:border-color .2s,color .2s}
.dk-ask button:hover{color:var(--ink);border-color:var(--ink-3)}
.dk-bar{display:block;height:1px;background:var(--line)}
.dk-bar em{display:block;height:100%;background:var(--acc);transform:scaleX(var(--cp,0));transform-origin:left}
@media (max-width:820px){
  .dock{right:max(12px,env(safe-area-inset-right,0px));left:max(12px,env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:8px}
  .dk-face{width:52px;height:52px}
  .dk-body{width:auto;flex:1;min-width:0}
  .dock.min{left:auto}
  .dk-text{font-size:.95rem;min-height:0;padding:10px 12px 8px}
  .dk-ask{display:none}
}

/* voice toggle */
.voice-btn{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);padding:5px 8px;transition:color .2s,border-color .2s,background-color .2s}
.voice-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.voice-btn[aria-pressed="true"]{color:var(--acc-ink);background:var(--ink);border-color:var(--ink)}
.vb-ico{display:inline-flex;align-items:center;gap:1.5px;height:10px}
.vb-ico i{width:2px;height:40%;background:currentColor}
.vb-ico i:nth-child(2){height:100%}
.voice-btn[aria-pressed="true"] .vb-ico i{animation:vbar 1s ease-in-out infinite}
.voice-btn[aria-pressed="true"] .vb-ico i:nth-child(2){animation-delay:.2s}.voice-btn[aria-pressed="true"] .vb-ico i:nth-child(3){animation-delay:.4s}
@keyframes vbar{50%{height:30%}}
.ag-head .voice-btn{margin-left:2px}
.dk-tools{display:inline-flex;align-items:center;gap:10px}
@media (max-width:420px){.ag-role{display:none}}