/* ===== Tokens (colours and fonts unchanged) ===== */
:root{
  --page:#FFFFFF; --card:#F4F7F8; --card-2:#EAF0F1; --ink:#233137; --faded:#72878F; --soft:#B9C7CC;
  --rule:#E3E9EB; --night:#233137; --mist:#CFD9DC;
  --school:#B9C7CC; --hib:#9AAEB5; --leggo:#233137; --st:#72878F; --ai:#3C4E55;
  --serif:"Newsreader",Georgia,serif; --sans:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --gut:clamp(16px,4vw,40px); --edge:clamp(16px,1.2vw,20px); --max:1200px; --r:22px; --navh:56px;
  --ease:cubic-bezier(.23,1,.32,1); --ease-q:cubic-bezier(.25,.46,.45,.94);
  /* motion tokens: every duration in CSS and the UI scripts comes from here. Feedback (hover, press) lands within 100 ms. */
  --t-press:90ms; --t-hover:100ms; --t-quick:200ms; --t-base:350ms; --t-medium:550ms; --t-slow:900ms;
  --t-reveal:1200ms; --t-long:1700ms; --t-ambient:3500ms; --t-drift:14000ms; --t-marquee:40000ms;
  --t-page:450ms; --t-defer:1200ms;
}
*{box-sizing:border-box;margin:0}
html{background:var(--page);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:var(--navh)}
body{overflow-x:clip;background:var(--page)}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.mono{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faded)}
del{color:var(--soft);text-decoration-thickness:.05em}
ins{text-decoration:none}
:focus-visible{outline:2px solid var(--st);outline-offset:3px}
.arr{display:inline-block;transition:transform var(--t-hover) var(--ease-q)}
a:hover .arr{transform:translateX(3px)}a:hover .arr.out{transform:translate(2px,-2px)}a:hover .arr.down{transform:translateY(2px)}

/* ===== Nav: logo block, menu block, plain links (fixed bar) ===== */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--navh);display:flex;align-items:stretch;background:var(--page);font-size:17px}
.nav a,.nav summary{text-decoration:none;display:flex;align-items:center}
.nav-logo{background:var(--ink);color:#fff;padding:0 18px;font:500 22px var(--sans);letter-spacing:-.04em;white-space:nowrap}
.nav-menu{position:relative;background:var(--hib);min-width:min(424px,40vw)}
.nav-menu summary{height:100%;padding:0 22px;justify-content:flex-end;gap:10px;cursor:pointer;list-style:none;white-space:nowrap}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu i{font-style:normal;font-size:22px;line-height:1;transition:transform var(--t-hover) var(--ease)}
.nav-menu[open] i{transform:rotate(45deg)}
.nav-menu .menu{position:absolute;left:0;right:0;top:100%;background:var(--hib);padding:6px 22px 18px;display:grid}
.nav-menu .menu a{justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(35,49,55,.18);font-size:16px}
.nav-menu .menu small{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.nav-menu .menu a:hover{text-decoration:underline;text-underline-offset:3px}
.nav-r{margin-left:auto;display:flex}
.nav-r a{padding:0 22px;white-space:nowrap;gap:6px}
.nav-r a:hover,.nav-r a[aria-current]{text-decoration:underline;text-underline-offset:4px}
main{padding-top:var(--navh)}
@media (max-width:640px){.nav{font-size:15px}.nav-logo{font-size:18px;padding:0 12px}.nav-menu{min-width:0;flex:1}.nav-menu summary{padding:0 14px}.nav-r a{padding:0 12px}.nav-r .sq{display:none}}

/* ===== Home: shared grid (left 5 / right 7, like the reference) ===== */
.edge{padding-inline:var(--edge)}
.split{display:grid;grid-template-columns:5fr 7fr;gap:0 var(--edge)}
.eyebrow{display:block;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.rule{border-top:1px solid var(--ink)}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* Hero */
.collage{position:relative;height:clamp(300px,53vh,480px);overflow:hidden;background:var(--card-2)}
.collage .bg{position:absolute;inset:-8% 0 0;width:100%;height:116%;object-fit:cover;filter:blur(22px) saturate(.6);opacity:.55;transform:scale(1.1)}
.collage figure{position:absolute;overflow:hidden;background:var(--card)}
.collage figure img{width:100%;height:100%;object-fit:cover}
.collage figcaption{position:absolute;right:0;bottom:0;background:var(--page);padding:4px 7px;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.c1{left:0;top:26%;width:19.6%;height:74%}
.c2{left:28.7%;top:0;width:12.6%;height:39%;outline:1px solid var(--page)}
.c3{left:44.5%;top:9%;width:28.2%;height:91%}
.c4{left:73.4%;top:0;width:19.2%;height:34%;outline:1px solid var(--page)}
@supports (animation-timeline:scroll()){
  .collage .bg,.collage figure{animation:drift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  .c2,.c4{--d:-60px}.c1,.c3{--d:-24px}.collage .bg{--d:40px}
  @keyframes drift{to{translate:0 var(--d,0)}}
}
.hero-text{padding-block:28px 0;min-height:calc(100vh - var(--navh) - clamp(300px,53vh,480px));display:grid;grid-template-rows:1fr auto}
.hero-text .lede{font-size:clamp(17px,1.35vw,20px);line-height:1.3;max-width:22em;letter-spacing:-.01em;color:var(--ink)}
.display{font:500 clamp(42px,5.3vw,92px)/.95 var(--sans);letter-spacing:-.055em;text-wrap:balance}
.display del{display:block;width:fit-content;font-size:.5em;letter-spacing:-.04em;line-height:1.1;background:linear-gradient(var(--soft),var(--soft)) 0 55%/0 .06em no-repeat;text-decoration:none;color:var(--soft);animation:strike var(--t-slow) var(--t-medium) ease-out forwards}
@keyframes strike{to{background-size:100% .06em}}
.hero-base{display:contents}
.hero-base p{align-self:end;padding-block:28px 22px}
.hero-base .credit{font:500 12px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.02em}
.scroll-cue{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-size:17px}
@media (max-width:860px){.hero-text{min-height:0}.hero-text h1{margin-top:28px}.hero-base{display:block}}

/* Name strip */
.names{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;padding:28px var(--edge);margin-top:clamp(40px,7vw,96px)}
.names span{font:600 15px var(--sans);letter-spacing:-.02em;white-space:nowrap}

/* Statement */
.statement{padding:clamp(48px,6vw,80px) var(--edge) clamp(40px,5vw,56px)}
.statement h2{font:500 clamp(28px,2.6vw,40px)/1.06 var(--sans);letter-spacing:-.045em;max-width:19em;margin-top:22px}

/* Photo with panels that slide in */
.proofshot{position:relative;height:clamp(480px,100vh,900px);overflow:hidden;background:var(--ink)}
.proofshot>img{width:100%;height:100%;object-fit:cover}
.panels{position:absolute;inset:0 0 0 auto;width:32%;display:grid;grid-template-rows:3fr 2fr}
.panels div{padding:clamp(16px,1.6vw,28px);background:var(--soft)}
.panels div+div{background:var(--card-2)}
.panels b{display:block;font:500 clamp(44px,4.6vw,72px)/1 var(--sans);letter-spacing:-.05em}
.panels span{display:block;margin-top:12px;font-size:15px;line-height:1.3;max-width:15em}
@supports (animation-timeline:view()){
  .panels div{animation:slidein linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
  .panels div+div{animation-range:entry 45% cover 58%}
  @keyframes slidein{from{transform:translateX(100%)}}
}
@media (max-width:760px){.proofshot{height:auto}.proofshot>img{height:60vh}.panels{position:static;width:auto;grid-template-rows:none}.panels div{animation:none!important}}

/* Intro */
.intro{padding:clamp(56px,7vw,110px) var(--edge)}
.intro .body{grid-column:2;max-width:620px}
.intro .lead{font:500 clamp(20px,1.65vw,24px)/1.28 var(--sans);letter-spacing:-.025em;margin-bottom:28px}
.intro p+p{margin-top:14px}
.intro p:not(.lead){font-size:15px;line-height:1.5}
@media (max-width:860px){.intro .body{grid-column:1}}

/* Quote + chapters stack: each pins under the nav and the next slides over it */
.stack>*{position:sticky;top:var(--navh)}
.quote{display:grid;grid-template-columns:5fr 7fr;min-height:clamp(420px,62vh,640px);background:var(--card-2)}
.quote .who{background:var(--ink);color:#fff;padding:var(--edge);display:grid;grid-template-columns:1fr 1fr;align-content:start}
.quote .who::before{content:"\201C";font:600 64px/.8 var(--sans);grid-row:span 2}
.quote .who img{width:68px;height:68px;object-fit:cover;margin-bottom:28px}
.quote .who b{display:block;font-weight:400;font-size:14px}
.quote .who span{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.quote blockquote{padding:var(--edge);font:500 clamp(26px,2.6vw,40px)/1.08 var(--sans);letter-spacing:-.04em;max-width:17em}
.chap{min-height:calc(100vh - var(--navh));padding:0 var(--edge) var(--edge);display:grid;grid-template-rows:auto 1fr auto;background:var(--c)}
.chap>header{border-top:1px solid var(--ink);margin-top:12px;padding-top:14px}
.chap .num{font:500 clamp(44px,4.8vw,72px)/.95 var(--sans);letter-spacing:-.055em}
.chap h3{font:500 clamp(24px,2.1vw,32px)/1.08 var(--sans);letter-spacing:-.04em;max-width:16em}
.chap h3 del{display:block;font-size:.72em}
.chap header p{font-size:14.5px;line-height:1.45;max-width:31em;margin-top:18px}
.chap .foot-row{align-items:end;margin-top:40px}
.chap .art{height:clamp(180px,30vh,340px);overflow:hidden;background:var(--ink)} /* keeps each pinned chapter within one screen */
.chap .art img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.chap:hover .art img{transform:scale(1.03)}
.chap ul{list-style:none;padding:0;max-width:31em;font-size:13.5px}
.chap ul::before{content:"What's inside:";display:block;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.chap li{padding:7px 0;border-bottom:1px solid rgba(35,49,55,.3)}
.cta-bar{display:flex;justify-content:space-between;align-items:center;margin-top:24px;background:var(--ink);color:#fff;text-decoration:none;min-height:clamp(64px,7vw,96px);padding:0 clamp(18px,1.8vw,28px);font:500 clamp(18px,1.6vw,24px)/1.1 var(--sans);letter-spacing:-.03em;transition:background var(--t-quick)}
.cta-bar .arr{font-size:1.25em}
.cta-bar:hover{background:#000}
.chap.dark{color:#fff}.chap.dark>header{border-color:rgba(255,255,255,.4)}.chap.dark li{border-color:rgba(255,255,255,.25)}
.chap.dark .cta-bar{background:var(--page);color:var(--ink)}.chap.dark .cta-bar:hover{background:var(--card-2)}
.chap.dark del{color:var(--faded)}
.units-art{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;padding:clamp(16px,2vw,28px);align-content:center;height:100%}
.units-art i{aspect-ratio:1;background:var(--hib);display:block}
.units-art i:nth-child(3n){background:var(--soft)}.units-art i:nth-child(7n){background:var(--mist)}
@media (max-width:860px){.stack>*{position:static}.quote{grid-template-columns:1fr}.chap{min-height:0}.chap header>div+div{margin-top:18px}}

/* Side quest carousel */
.quests{padding:clamp(56px,6vw,96px) 0 clamp(48px,6vw,80px)}
.quests-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:0 var(--edge)}
.quests-head h2{font:500 clamp(26px,2.4vw,36px)/1.06 var(--sans);letter-spacing:-.045em;margin-top:22px;max-width:14em}
.arrows{display:flex;gap:6px}
.arrows button{width:36px;height:36px;border:0;background:none;font-size:22px;cursor:pointer;color:var(--ink)}
.arrows button:hover{background:var(--card)}
.track{display:flex;gap:var(--edge);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:clamp(40px,5vw,72px) var(--edge) 8px;scroll-padding-inline:var(--edge)}
.track::-webkit-scrollbar{display:none}
.qc{flex:0 0 clamp(240px,28.6vw,420px);scroll-snap-align:start;text-decoration:none;transition:flex-basis var(--t-medium) var(--ease)}
.qc .pic{aspect-ratio:1.4;background:var(--card);display:grid;place-items:center;overflow:hidden;border-bottom:8px solid var(--soft);transition:border-color var(--t-base)}
.qc .pic svg{width:38%;height:auto}
.qc .pic img{width:100%;height:100%;object-fit:cover}
.qc b{display:block;font:500 18px/1.2 var(--sans);letter-spacing:-.03em;margin-top:22px}
.qc span{display:block;font-size:12.5px;line-height:1.35;color:var(--faded);margin-top:8px;max-width:22em}
.qc:hover{flex-basis:clamp(240px,35vw,520px)}
.qc:hover .pic{border-color:var(--ink)}
.qc.more .pic{background:var(--ink);color:#fff;font:500 17px var(--sans)}
@media (hover:none){.qc:hover{flex-basis:clamp(240px,28.6vw,420px)}}

/* Next */
.next{border-top:1px solid var(--ink);margin:0 var(--edge);padding:12px 0 clamp(64px,8vw,120px)}
.next .media{aspect-ratio:16/9;background:var(--ink);color:#fff;display:grid;place-items:center;position:relative;margin-top:28px}
.next .media svg{width:22%;height:auto}
.next .media .mono{position:absolute;left:16px;top:14px;color:var(--soft)}
.next h3{font:500 clamp(20px,1.6vw,24px)/1.15 var(--sans);letter-spacing:-.03em;margin-top:28px}
.next p{font-size:14.5px;line-height:1.5;max-width:31em;margin-top:18px}
.next .line-link{display:flex;justify-content:space-between;max-width:31em;margin-top:22px;padding-top:10px;border-top:1px solid var(--ink);font-size:14px;text-decoration:none}

/* ===== Footer (dark): mailbox CTA, record row, giant name ===== */
.foot{background:var(--ink);color:#fff;padding:0 var(--edge)}
.foot-cta{position:relative;text-align:center;padding:clamp(80px,10vw,150px) 0 clamp(72px,8vw,120px)}
.foot-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(207,217,220,.5) 1px,transparent 1.5px) 0 0/9px 9px;
  -webkit-mask:radial-gradient(ellipse 34% 46% at 50% 62%,#000,transparent 70%);mask:radial-gradient(ellipse 34% 46% at 50% 62%,#000,transparent 70%);animation:dots var(--t-drift) linear infinite;pointer-events:none}
@keyframes dots{to{background-position:90px 45px}}
.foot-cta>*{position:relative}
.foot-cta h2{font:500 clamp(32px,3vw,46px)/1.04 var(--sans);letter-spacing:-.045em}
.foot-cta p{margin:18px auto 0;max-width:30em;font-size:15px;line-height:1.4;color:var(--mist)}
.mailbox{display:flex;max-width:520px;margin:34px auto 0;text-decoration:none;font-size:14px}
.mailbox span{flex:1;background:var(--page);color:var(--ink);text-align:left;padding:14px}
.mailbox b{font-weight:500;background:var(--hib);color:var(--ink);padding:14px 22px;transition:background var(--t-quick)}
.mailbox:hover b{background:var(--soft)}
.foot-stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid rgba(255,255,255,.35)}
.foot-stats>*{padding:12px 10px 14px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.foot-stats>*+*{border-left:1px solid rgba(255,255,255,.35)}
.foot-stats p{padding-left:0;font:500 19px/1.15 var(--sans);letter-spacing:-.03em}
.foot-stats p .mono{display:block;color:#fff;margin-bottom:10px}
.foot-stats b{font:500 clamp(56px,6.8vw,104px)/.9 var(--sans);letter-spacing:-.05em}
.foot-stats span{font-size:12.5px}
.wm{font:500 clamp(80px,24.5vw,380px)/.78 var(--sans);letter-spacing:-.065em;white-space:nowrap;margin-left:-.04em}
.foot-mark{padding-top:clamp(28px,4vw,56px);overflow:hidden}
.foot-mark .row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.foot-mark .row .wm{margin-left:auto}
.foot-cols{display:flex;gap:clamp(24px,4vw,64px);padding-bottom:1.2em}
.foot-cols div{display:grid;gap:4px;align-content:start;font-size:13px}
.foot-cols .mono{color:var(--soft);font-size:10px;margin-bottom:10px}
.foot-cols a{text-decoration:none;width:max-content}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(255,255,255,.35);margin-top:clamp(20px,3vw,36px);padding:10px 0 12px;font-size:11px;color:var(--mist)}
@media (max-width:760px){.foot-stats{grid-template-columns:1fr 1fr}.foot-stats>*:nth-child(3){border-left:0}.foot-stats>*:nth-child(n+3){border-top:1px solid rgba(255,255,255,.35)}.foot-mark .row{flex-direction:column-reverse;align-items:stretch}.mailbox{flex-direction:column}}

/* ===== Inner pages (unchanged layouts) ===== */
.title{font:400 clamp(38px,5.4vw,72px)/1.02 var(--serif);letter-spacing:-.028em;font-variation-settings:"opsz" 72;text-wrap:balance}
.title strong{font-weight:inherit;color:var(--faded)}
.lede{font-size:19px;color:var(--faded);max-width:46ch}
.card{background:var(--card);border-radius:var(--r);padding:clamp(20px,2.4vw,32px);position:relative;overflow:hidden}
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:99px;font-size:15px;text-decoration:none;background:var(--card);transition:background var(--t-quick) ease-out,transform var(--t-hover) var(--ease-q)}
.btn:hover{background:var(--card-2)}.btn:active{transform:scale(.97)}
.card .btn{background:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:var(--leggo);box-shadow:0 0 0 4px rgba(35,49,55,.16);flex:none}
.units{display:grid;grid-template-columns:repeat(25,1fr);gap:5px}
.units i{aspect-ratio:1;border-radius:50%;background:var(--leggo);display:block}
.units.st i{background:var(--st);border-radius:4px}
.clients{grid-template-columns:repeat(20,1fr)}
.chart-lab{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faded);margin-bottom:10px}
.trip{display:grid;gap:12px;font-size:14px}
.trip .r{display:grid;grid-template-columns:118px 1fr 92px;gap:12px;align-items:center}
.trip .bar{height:14px;display:flex;gap:2px}
.trip .bar span{display:block;height:100%;transition:transform var(--t-slow) var(--ease),filter var(--t-quick)}.trip .bar span:last-child{border-radius:0 4px 4px 0}
.trip .bar span:hover{filter:brightness(1.15)}
.trip b{font:500 12.5px var(--mono);text-align:right;white-space:nowrap}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--faded);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.burn-chart svg{width:100%;height:auto;overflow:visible}
.burn-chart text{font:500 11px var(--mono);fill:var(--faded);letter-spacing:.04em}
.burn-chart .pin text{fill:#fff;font-size:12.5px}
.burn-chart .ln{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--t-reveal) var(--ease)}
.burn-chart .pin{transition:opacity var(--t-base) var(--t-slow),transform var(--t-base) var(--t-slow) var(--ease)}
.js .trip:not(.in) .bar span{transform:scaleX(0);transform-origin:left}
.js .burn-chart:not(.in) .ln{stroke-dashoffset:1}
.js .burn-chart:not(.in) .pin{opacity:0;transform:translateY(6px)}
@media (max-width:560px){.burn-chart text{font-size:19px}.burn-chart .pin text{font-size:15px}}
.page-head{padding-top:clamp(64px,10vw,110px);padding-bottom:40px}
.page-head .lede{margin-top:20px}
.crumb{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faded);margin-bottom:22px;display:block}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.page-title del{display:block;font-size:.62em;margin-bottom:6px}
.ledger{display:grid;gap:12px}
.ledger-row{display:grid;grid-template-columns:1.5fr 1.3fr .9fr 1.2fr auto;gap:8px 24px;align-items:center;background:var(--card);border-radius:18px;padding:22px 24px;border-left:6px solid var(--c,var(--soft))}
.ledger-row b{display:block;font:400 24px/1.1 var(--serif);letter-spacing:-.015em}
.ledger-row .mono{display:block;margin-top:4px}
.ledger-head{background:none;border:0;padding:0 30px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faded)}
.ledger-row>a{text-decoration:none;padding:9px 14px;border-radius:99px;background:#fff;font-size:14.5px;white-space:nowrap}
.ledger-row details{grid-column:1/-1}
.ledger-row summary{cursor:pointer;width:max-content;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faded)}
.ledger-row details p{max-width:68ch;margin-top:10px;color:#3E4D53}
.status{display:inline-flex;align-items:center;gap:8px;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#A9B8BD}
.status.live::before{background:var(--leggo);box-shadow:0 0 0 3px rgba(35,49,55,.16)}
@media (max-width:820px){.ledger-head{display:none}.ledger-row{grid-template-columns:1fr 1fr}.ledger-row>span:first-child{grid-column:1/-1}}
.cs{max-width:980px;margin:0 auto;padding:0 var(--gut) 40px}
.snap{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 40px}
.snap span{padding:8px 14px;border-radius:99px;background:var(--card);font-size:14px}
.cs-hero{border-radius:var(--r);width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.cs h2{font:400 clamp(28px,3vw,38px)/1.1 var(--serif);letter-spacing:-.022em;margin:72px 0 16px}
.cs p{max-width:65ch;color:#3E4D53}
.stat-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:12px;margin-top:32px}
.stat-grid div{background:var(--card);border-radius:18px;padding:22px}
.stat-grid b{display:block;font:400 40px/1 var(--serif);letter-spacing:-.02em;margin-bottom:8px}
.stat-grid span{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faded)}
@media (max-width:760px){.stat-grid{grid-template-columns:1fr 1fr}}
.cs blockquote{margin-top:24px;font:400 22px/1.4 var(--serif);padding-left:18px;border-left:3px solid var(--leggo)}
.cs blockquote cite{display:block;margin-top:10px;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--faded)}
.cs .proof{margin-top:28px}.cs .proof img{border-radius:var(--r);width:100%;height:auto}.cs .proof figcaption{margin-top:10px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faded)}
.calls{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calls>div{background:var(--card);border-radius:18px;padding:24px;display:grid;gap:10px;align-content:start}
.calls p{color:#3E4D53}
@media (max-width:760px){.calls{grid-template-columns:1fr}}
.cs-next{margin-top:72px}
.cs .card{margin-top:24px}
.now{background:var(--night);color:#F1F5F6;border-radius:var(--r);padding:clamp(22px,3vw,36px);margin-bottom:56px}
.now .mono{color:#9AAEB5}
.now dl{display:grid;grid-template-columns:130px 1fr;gap:14px 24px;margin-top:20px;font:400 22px/1.3 var(--serif)}
.now dt{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9AAEB5;padding-top:6px}
.now dd{margin:0}
.quest{display:grid;grid-template-columns:72px 1fr;gap:6px 24px;background:var(--card);border-radius:var(--r);padding:26px;margin-bottom:12px}
.quest svg{width:56px;height:56px;grid-row:span 4}
.quest h2{font:400 clamp(24px,2.6vw,32px)/1.12 var(--serif);letter-spacing:-.02em}
.quest p{color:#3E4D53;max-width:64ch}
.quest a{text-underline-offset:3px}
.loot{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--st)!important}
@media (max-width:600px){.now dl{grid-template-columns:1fr;gap:2px}.now dd{margin-bottom:12px}.quest{grid-template-columns:1fr}.quest svg{grid-row:auto}}

/* Tooltip for any [data-tip] */
.tip{position:fixed;z-index:60;pointer-events:none;max-width:240px;padding:7px 11px;border-radius:9px;background:rgba(35,49,55,.92);color:#fff;font:400 13px/1.35 var(--sans);
  transform:translate(-50%,calc(-100% - 10px)) scale(.8);opacity:0;transition:opacity var(--t-quick) var(--ease),transform var(--t-quick) var(--ease)}
.tip.on{opacity:1;transform:translate(-50%,calc(-100% - 10px)) scale(1)}
[data-tip]{cursor:help}

@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}.display del{background-size:100% .06em}}

/* Chapter 03 art and the recognition block */
.ai-art{height:100%;display:grid;place-items:center;position:relative;background:#2C3C42;color:#fff}
.ai-art svg{width:22%;height:auto}
.ai-art .mono{position:absolute;left:16px;top:14px;color:var(--soft)}
.next .media.photo{background:var(--card)}
.next .media.photo img{width:100%;height:100%;object-fit:cover}
.awards{list-style:none;padding:0;max-width:31em;margin-top:22px;font-size:14px}
.awards li{display:grid;grid-template-columns:72px 1fr;padding:9px 0;border-top:1px solid var(--rule)}
.awards b{font:500 11px/1.9 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* ===== The path: a pinned, scroll-scrubbed story ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.story{background:var(--ink);color:#fff}
.story canvas,.story .steps{display:none}
.story .copies{display:grid;gap:40px;padding:clamp(56px,7vw,96px) var(--edge)}
.scene{max-width:34em}
.scene .eyebrow{color:var(--soft)}
.scene h3{font:500 clamp(28px,3.4vw,52px)/1.02 var(--sans);letter-spacing:-.05em;margin-top:14px}
.scene p{margin-top:12px;font-size:15px;line-height:1.45;color:var(--mist);max-width:30em}
.story.live{height:800vh}
.story.live .stage{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));overflow:hidden}
.story.live canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.story.live .copies{display:block;padding:0;position:absolute;inset:clamp(28px,6vh,64px) var(--edge) auto;pointer-events:none}
.story.live .scene{position:absolute;inset:0 auto auto 50%;translate:-50% 0;width:min(34em,100%);text-align:center;opacity:0}
.story.live .scene p{margin-inline:auto}
.story.live .steps{display:flex;position:absolute;left:50%;bottom:18px;translate:-50% 0;padding:3px;gap:2px;border:1px solid rgba(255,255,255,.18);background:rgba(35,49,55,.8);backdrop-filter:blur(8px)}
.steps button{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);background:none;border:0;padding:8px 12px;cursor:pointer;white-space:nowrap}
.steps button[aria-current]{background:rgba(255,255,255,.14);color:#fff}
.steps button:hover{color:#fff}
@media (max-width:640px){.story.live .scene h3{font-size:26px}.steps button{padding:7px 8px;font-size:9.5px}}

/* ===== Intro film ===== */
.film{position:relative;background:var(--card)}
.film .stage{position:relative;height:calc(100svh - var(--navh));min-height:560px;overflow:hidden}
.film .page{position:absolute;inset:0;background:radial-gradient(circle,#CFD9DC 1px,transparent 1.4px) 0 0/22px 22px,var(--card)}
.film .frame{position:absolute;left:50%;top:calc(7% - 14px);width:calc(min(46vh,78vw) + 28px);height:calc(min(46vh,78vw) + 14px);translate:-50% 0;overflow:visible}
.film .frame rect{fill:none;stroke:var(--ink);stroke-width:.6;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw var(--t-long) var(--t-quick) var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.film .me{position:absolute;left:50%;top:7%;width:min(46vh,78vw);height:auto;transform-origin:50% 100%;z-index:3}
.film .me.rise{top:auto;bottom:0;width:min(78vh,96vw);z-index:4}
.film .meet{position:absolute;left:0;right:0;top:calc(7% + min(46vh,78vw) + 22px);text-align:center;z-index:3;padding:0 var(--edge)}
.film .meet h2{font:400 clamp(40px,5vw,72px)/1 var(--serif);letter-spacing:-.03em;font-variation-settings:"opsz" 72}
.film .meet p{margin-top:10px;font-size:15px;color:var(--faded)}
.film .skip{display:inline-block;margin-top:14px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.film .bub,.film .cloud{position:absolute;z-index:3;background:#fff;border:2px solid var(--ink);transform:scale(0)}
.film .bub{border-radius:50%}
.b1{width:14px;height:14px;left:calc(50% + min(18vh,30vw));top:12%}
.b2{width:24px;height:24px;left:calc(50% + min(22vh,36vw));top:7%}
.b3{width:36px;height:36px;left:calc(50% + min(27vh,44vw));top:1%}
.film .cloud{left:calc(50% + min(31vh,40vw));top:2%;width:min(300px,46vw);padding:22px 26px;border-radius:999px;transform-origin:0 50%;display:grid;place-items:center;font:400 clamp(18px,1.8vw,26px)/1.1 var(--serif);text-align:center}
.film .cloud del{color:var(--ink);text-decoration:none;background:linear-gradient(var(--ink),var(--ink)) 0 55%/0 2px no-repeat;transition:background-size var(--t-medium) var(--ease)}
.film .cloud.struck del{background-size:100% 2px;color:var(--faded)}
@media (max-width:640px){.film .cloud{left:auto;right:3%;top:1%;width:44vw;padding:12px 14px;font-size:15px;transform-origin:0 100%}.b1,.b2,.b3{display:none}}
.film .ink{position:absolute;inset:0;background:var(--ink);clip-path:circle(0 at 72% 26%);z-index:2}
.film .strips{position:absolute;left:var(--edge);top:10%;z-index:5;display:grid;gap:6px;justify-items:start}
.strip{opacity:0;background:#fff;color:var(--ink);padding:6px 12px 8px;font:400 clamp(24px,2.8vw,40px)/1.1 var(--serif);letter-spacing:-.02em;box-shadow:0 1px 0 var(--soft)}
.strip em{font-style:normal;color:var(--faded)}
.film .side{position:absolute;right:var(--edge);top:10%;width:min(360px,44vw);z-index:5;opacity:0;color:var(--mist);font-size:14px;line-height:1.5;display:grid;gap:14px}
.rot{display:grid;margin-top:6px}
.rot b{grid-area:1/1;font-weight:500;background:var(--st);color:#fff;padding:6px 10px;opacity:0;transform:translateY(8px);transition:opacity var(--t-base),transform var(--t-base) var(--ease);width:max-content;max-width:100%}
.rot b.on{opacity:1;transform:none}
@media (max-width:640px){.film .strips{top:6%}.film .side{left:var(--edge);right:var(--edge);width:auto;top:30%}}
.film .tiles{position:absolute;left:0;right:0;bottom:30%;z-index:5;display:flex;justify-content:center;gap:clamp(8px,1.4vw,20px);pointer-events:none}
.tile{opacity:0;display:grid;justify-items:center;gap:8px;width:clamp(64px,8vw,112px);padding:clamp(10px,1.2vw,16px) 0 10px;background:#fff;border:2px solid #fff;border-radius:22px;box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}
.tile svg{width:62%;height:auto}
.tile small{font:500 9.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faded);text-align:center}
@media (max-width:640px){.tile:nth-child(n+6){display:none}}
.film .endv{position:absolute;inset:0;z-index:6;background:var(--page);clip-path:circle(0 at 50% 42%);display:grid;place-items:center}
.typed{font:400 clamp(32px,4vw,60px)/1.05 var(--serif);letter-spacing:-.03em;font-variation-settings:"opsz" 72;min-height:1.1em}
.typed::after{content:"_";animation:blink var(--t-slow) steps(1) infinite}
.typed.done::after{content:" ↓"}
@keyframes blink{50%{opacity:0}}
.film.live{height:600vh}
.film.live .stage{position:sticky;top:var(--navh)}
.film:not(.live) .ink,.film:not(.live) .strips,.film:not(.live) .side,.film:not(.live) .tiles,.film:not(.live) .endv,.film:not(.live) .bub,.film:not(.live) .cloud{display:none}
@media (prefers-reduced-motion:reduce){.film .frame rect{stroke-dashoffset:0}}

/* ===== Case studies v2: one layout, three brand themes ===== */
.cs2{--bg:#111111;--fg:#FFFFFF;--mut:#A3A3A3;--line:#2A2A2A;--surf:#1A1A1A;--brand:#22D38A;--bad:#F07C7C;background:var(--bg);color:var(--fg)}
.cs2.st{--bg:#FCFAF5;--fg:#111111;--mut:#706F6C;--line:#E2DED4;--surf:#F3F0E8;--brand:#111111;--bad:#9B3B3B}
.cs2.stai{--bg:#0F0F0F;--fg:#F2F2F2;--mut:#8F8F8F;--line:#262626;--surf:#171717;--brand:#F2F2F2;--bad:#8F8F8F}
.cs2 .eyebrow{color:var(--mut)}
.cs2 a{color:inherit}
/* hero */
.cs2-hero{position:relative;height:calc(100svh - var(--navh));min-height:560px;overflow:hidden;display:flex;align-items:flex-end}
.cs2-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heroin var(--t-long) var(--ease) both}
@keyframes heroin{from{transform:scale(1.08)}}
.cs2-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.82))}
.cs2-hero-in{position:relative;z-index:1;width:100%;padding:0 var(--edge) clamp(24px,4vw,48px);color:#fff}
.cs2-hero .crumb{color:rgba(255,255,255,.75)}
.cs2-hero h1{font:500 clamp(44px,7.4vw,124px)/.92 var(--sans);letter-spacing:-.06em;max-width:11em}
.lede2{margin-top:18px;max-width:34em;font-size:clamp(16px,1.3vw,19px);line-height:1.4;color:rgba(255,255,255,.85)}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:28px;border-top:1px solid rgba(255,255,255,.3);padding-top:16px}
.meta{display:flex;gap:clamp(18px,3vw,48px);flex-wrap:wrap}
.meta span{display:block;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.meta b{font-weight:500;font-size:15px}
.visit{display:inline-flex;align-items:center;height:52px;padding:0 22px;background:var(--brand);color:var(--bg)!important;text-decoration:none;font-weight:500;font-size:15px;transition:transform var(--t-quick) var(--ease-q),filter var(--t-quick)}
.cs2-hero .visit{background:#fff;color:#111!important}
.leggo .cs2-hero .visit{background:var(--brand)}
.visit:hover{transform:translateY(-2px);filter:brightness(1.08)}
.visit.off{background:rgba(255,255,255,.14)!important;color:#fff!important;cursor:default}
/* kpi band */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-bottom:1px solid var(--line)}
.kpi{padding:clamp(22px,3vw,40px) var(--edge);border-right:1px solid var(--line)}
.kpi b{display:block;font:500 clamp(36px,3.5vw,60px)/.95 var(--sans);letter-spacing:-.05em;color:var(--brand)}
.st .kpi b,.stai .kpi b{color:var(--fg)}
.kpi span{display:block;margin-top:10px;font-size:13.5px;color:var(--mut)}
/* blocks */
.blk{padding:clamp(56px,7vw,112px) var(--edge) 0}
.blk-head{display:grid;grid-template-columns:5fr 7fr;gap:16px var(--edge);border-top:1px solid var(--fg);padding-top:14px;margin-bottom:clamp(28px,4vw,56px)}
.blk-head h2{font:500 clamp(28px,3vw,48px)/1.02 var(--sans);letter-spacing:-.045em;max-width:16em}
.blk-head p{margin-top:16px;max-width:36em;color:var(--mut);font-size:15.5px;line-height:1.5}
@media (max-width:860px){.blk-head{grid-template-columns:1fr}}
.src{margin-top:18px;font:500 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
/* reveal */
.rv-on .rv{opacity:0;transform:translateY(24px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.rv-on .rv.in{opacity:1;transform:none}
/* rings */
.rings{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--edge)}
.ring2{position:relative;display:grid;justify-items:center;text-align:center}
.ring2 svg{width:min(100%,200px);height:auto}
.ring2 circle{fill:none;stroke:var(--line);stroke-width:7}
.ring2 .arc{stroke:var(--bad);stroke-linecap:round;stroke-dasharray:var(--v) 100;transition:stroke-dasharray var(--t-reveal) var(--ease) var(--t-quick)}
.rv-on .ring2:not(.in) .arc{stroke-dasharray:0 100}
.ring2 b{position:absolute;top:min(calc(50% - 40px),70px);font:500 clamp(30px,3vw,44px) var(--sans);letter-spacing:-.04em;color:var(--bad)}
.ring2 span{margin-top:14px;font-size:15px;max-width:12em}
@media (max-width:760px){.rings{grid-template-columns:1fr 1fr}}
/* last-mile routes */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:var(--edge)}
.route2{background:var(--surf);padding:clamp(18px,2vw,28px);border:1px solid var(--line)}
.route2 .tag{margin-bottom:10px}
.route2 svg{width:100%;height:auto;overflow:visible}
.route2 .lbl text{font:500 11px var(--mono);fill:var(--mut);letter-spacing:.05em;text-transform:uppercase}
.route2 .leg{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--t-reveal) var(--ease)}
.rv-on .route2:not(.in) .leg{stroke-dashoffset:1}
.legs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.legs li{border-top:1px solid var(--line);padding-top:8px;font-size:13px}
.legs b{display:block;font-weight:500}.legs span{color:var(--mut)}
.tot{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;border:1px solid var(--line)}
.tot div{padding:12px}.tot div+div{border-left:1px solid var(--line)}
.tot b{display:block;font:500 clamp(22px,2vw,30px)/1 var(--sans);letter-spacing:-.03em}
.route2.ok .tot b{color:var(--brand)}.route2.bad .tot b{color:var(--bad)}
.tot span{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
@media (max-width:860px){.routes{grid-template-columns:1fr}}
.tag{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.tag.ok{color:var(--brand)}.tag.bad{color:var(--bad)}
/* model sentence */
.flip{font:400 clamp(26px,3.2vw,52px)/1.2 var(--serif);letter-spacing:-.02em;max-width:24em}
.flip s{color:var(--bad);text-decoration-thickness:2px;opacity:.75}
.flip em{font-style:normal;color:var(--brand)}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--edge);margin-top:clamp(32px,4vw,56px)}
.cols4.three{grid-template-columns:repeat(3,1fr);margin-top:0}
.cols4>div{border-top:2px solid var(--brand);padding-top:14px}
.cols4 b{font:500 19px/1.2 var(--sans);letter-spacing:-.02em}
.cols4 p{margin-top:8px;font-size:14.5px;line-height:1.45;color:var(--mut)}
@media (max-width:860px){.cols4,.cols4.three{grid-template-columns:1fr 1fr}}
/* image bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--edge)}
.shot{margin:0;overflow:hidden;background:var(--surf)}
.shot img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--t-reveal) var(--ease)}
.shot:hover img{transform:scale(1.04)}
.shot.w2{grid-column:span 2}.shot.w2 img{aspect-ratio:auto}
.shot.w3,.shot.full{grid-column:1/-1}.shot.w3 img,.shot.full img{aspect-ratio:16/9}
.shot figcaption{padding:10px 0 0;font:500 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mut);background:var(--bg)}
@media (max-width:760px){.bento{grid-template-columns:1fr}.shot.w2{grid-column:auto}}
.tl+.bento{margin-top:clamp(28px,3vw,44px)}
/* timeline */
.tl{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--brand)}
.tl li{position:relative;padding-top:30px;padding-right:12px}
.tl li::before{content:"";position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--brand)}
.tl b{display:block;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.tl span{display:block;font:500 clamp(20px,2vw,28px)/1.1 var(--sans);letter-spacing:-.03em;margin-top:6px}
.tl small{display:block;margin-top:6px;color:var(--mut);font-size:13.5px}
@media (max-width:760px){.tl{grid-template-columns:1fr 1fr;row-gap:28px}}
/* unit dots */
.dots{display:grid;grid-template-columns:repeat(25,1fr);gap:6px;max-width:900px}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--brand);display:block;transition:transform var(--t-medium) var(--ease)}
.rv-on .dots:not(.in) i{transform:scale(0)}
.dots i:hover{transform:scale(1.4)}
.dots.sq{grid-template-columns:repeat(20,1fr)}.dots.sq i{border-radius:2px}
/* quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:var(--edge);margin-top:clamp(32px,4vw,56px)}
.quotes blockquote{font:400 clamp(18px,1.6vw,23px)/1.4 var(--serif);border-left:3px solid var(--brand);padding-left:18px}
.quotes blockquote.big{grid-column:1/-1;font-size:clamp(22px,2.4vw,36px);line-height:1.25}
.quotes cite{display:block;margin-top:12px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--mut)}
@media (max-width:760px){.quotes{grid-template-columns:1fr}}
/* calls */
.split2{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--edge);align-items:start}
.panel2{background:var(--surf);border:1px solid var(--line);padding:clamp(16px,2vw,28px)}
.leggo .burn-chart text{fill:var(--mut)}.leggo .burn-chart .pin text{fill:#111}
.leggo .legend{color:var(--mut)}
.calls2{display:grid;gap:var(--edge)}
.calls2.two{grid-template-columns:1fr 1fr}
.calls2>div{border-top:1px solid var(--line);padding-top:14px}
.calls2 p:not(.tag){margin-top:8px;font-size:15.5px;line-height:1.5}
@media (max-width:860px){.split2,.calls2.two{grid-template-columns:1fr}}
/* services, year, films, ways */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--edge)}
.svc>div{background:var(--surf);padding:clamp(20px,2.4vw,32px);transition:background var(--t-base),color var(--t-base)}
.svc>div:hover{background:var(--fg);color:var(--bg)}
.svc b{font:500 clamp(28px,2.6vw,40px)/1 var(--sans);letter-spacing:-.04em}
.svc p{margin-top:14px;font-size:14.5px;line-height:1.5}
.svc ul{margin-top:16px;padding-left:16px;font-size:13.5px;line-height:1.7}
@media (max-width:860px){.svc{grid-template-columns:1fr}}
.year{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:140px}
.year span{height:34%;background:var(--line);transition:height var(--t-slow) var(--ease)}
.year span.on{height:100%;background:var(--fg)}
.rv-on .year:not(.in) span{height:4%}
.legend2{display:flex;gap:18px;margin-top:12px;font-size:13px;color:var(--mut)}
.legend2 i{display:inline-block;width:10px;height:10px;margin-right:6px;background:var(--line)}.legend2 i.on{background:var(--fg)}
.more2{margin-top:28px}
.films{display:grid;grid-template-columns:1fr 1fr;gap:var(--edge)}
.film2{display:grid;gap:4px;text-decoration:none}
.film2 img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.2);transition:filter var(--t-base),transform var(--t-slow) var(--ease)}
.film2:hover img{filter:none;transform:scale(1.02)}
.film2 b{margin-top:12px;font:500 clamp(28px,3vw,48px)/1 var(--sans);letter-spacing:-.04em;text-transform:uppercase}
.film2 span{color:var(--mut);font-size:14px}
.film2 small{font:500 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
@media (max-width:760px){.films{grid-template-columns:1fr}}
.ways2{display:grid;grid-template-columns:1fr 1fr;gap:var(--edge)}
.ways2>div{background:var(--surf);padding:clamp(20px,2.4vw,32px);border:1px solid var(--line)}
.ways2 ol{list-style:none;padding:0;margin:16px 0}
.ways2 li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);font:500 19px var(--sans);letter-spacing:-.02em}
.ways2 li small{font:500 10.5px var(--mono);color:var(--mut)}
.ways2>div:first-child li{color:var(--mut);text-decoration:line-through;text-decoration-color:var(--line)}
.ways2 p:last-child{font-size:14.5px;color:var(--mut);line-height:1.5}
@media (max-width:760px){.ways2{grid-template-columns:1fr}}
/* next case study */
.next2{position:relative;display:block;margin-top:clamp(72px,9vw,140px);height:clamp(320px,60vh,560px);overflow:hidden;color:#fff;text-decoration:none}
.next2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-reveal) var(--ease)}
.next2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.75))}
.next2:hover img{transform:scale(1.05)}
.next2>*:not(img){position:absolute;z-index:1;left:var(--edge)}
.next2 .eyebrow{top:24px;color:rgba(255,255,255,.7)}
.next2 b{bottom:56px;font:500 clamp(40px,6vw,96px)/.95 var(--sans);letter-spacing:-.055em}
.next2 small{bottom:24px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)}
@media (max-width:560px){.kpis{grid-template-columns:1fr 1fr}.kpi{padding:18px 14px}.kpi:nth-child(2n){border-right:0}.kpi{border-bottom:1px solid var(--line)}}

/* ===== Hero cursor trail ===== */
#hero{position:relative;cursor:none}
#hero .hero-text,#hero .statement,#hero .hero2-foot{position:relative;z-index:6}
#hero a{cursor:pointer}
.trail{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.trail img{position:absolute;width:clamp(84px,6.6vw,128px);height:auto;translate:-50% -50%;object-fit:cover;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.35);animation:trail var(--t-reveal) cubic-bezier(.23,1,.32,1) forwards}
@keyframes trail{
  0%{opacity:0;scale:.6;filter:blur(0)}
  12%{opacity:1;scale:1}
  55%{opacity:1;filter:blur(0)}
  100%{opacity:0;scale:.92;filter:blur(10px)}
}
.trail-pill{position:absolute;left:0;top:0;z-index:7;pointer-events:none;display:flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:99px;
  background:#111;color:#fff;font:500 12px var(--mono);white-space:nowrap;opacity:0;transition:opacity var(--t-quick)}
.trail-pill b{font:400 17px var(--sans);letter-spacing:-.02em}
.trail-pill.on{opacity:1}

/* ===== Hero v2: statement, open field, giant name (avec anni / oimachi) ===== */
.hero2{height:calc(100svh - var(--navh));min-height:600px;padding:clamp(20px,3vw,40px) var(--edge) 0;display:grid;grid-template-rows:auto 1fr;overflow:hidden;background:var(--page)}
.statement{font:400 clamp(30px,3.9vw,64px)/1.08 var(--sans);letter-spacing:-.04em;max-width:22em;position:relative;z-index:6}
.statement .indent{display:inline-block;width:38%}
.statement em{font:italic 400 1.08em var(--serif);letter-spacing:-.02em;font-variation-settings:"opsz" 72}
.statement del{color:var(--soft);text-decoration:none;background:linear-gradient(var(--soft),var(--soft)) 0 55%/0 .06em no-repeat;animation:strike var(--t-slow) var(--t-medium) ease-out forwards}
.hero2-foot{align-self:end;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;position:relative;z-index:6;pointer-events:none}
.hero2-foot a{pointer-events:auto}
.hero2-meta{display:grid;grid-template-columns:auto auto;gap:6px 40px;align-items:start;padding-bottom:clamp(14px,1.6vw,22px);font-size:13px;line-height:1.35}
.hero2-meta .scroll-cue{grid-column:1/-1;width:max-content;margin-top:8px;font-size:13px;gap:8px}
.giant{font:500 clamp(80px,15.5vw,280px)/.74 var(--sans);letter-spacing:-.07em;white-space:nowrap;margin-bottom:-.1em;color:var(--ink)}
@media (max-width:860px){
  .statement .indent{width:18%}
  .hero2-foot{flex-direction:column-reverse;align-items:stretch}
  .giant{font-size:22vw}
  .hero2-meta{grid-template-columns:1fr}
}
.statement{width:100%}.statement del{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero2-meta{grid-template-columns:repeat(2,minmax(200px,max-content))}
.giant{font-size:clamp(80px,13.5vw,250px)}
@media (max-width:860px){.hero2-meta{grid-template-columns:1fr}.giant{font-size:21vw}}
.hero2{grid-template-columns:minmax(0,1fr)}.hero2-foot{min-width:0}
.giant{font-size:clamp(80px,12.4vw,240px)}
@media (max-width:860px){.giant{font-size:17vw}}

/* ===== Side quests: isometric world hero ===== */
.world{position:relative;height:calc(100svh - var(--navh));min-height:620px;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,#ffffff 0%,#eef6ff 45%,#dbe9ff 100%)}
.world canvas{position:absolute;inset:0;width:100%;height:100%;display:none;cursor:grab;touch-action:pan-y}
.world.live canvas{display:block}
.world-in{position:absolute;left:var(--edge);top:clamp(16px,3vw,36px);z-index:3;max-width:min(30em,70vw);pointer-events:none}
.world-in h1,.world-in h2{font:500 clamp(30px,3.4vw,54px)/1.02 var(--sans);letter-spacing:-.045em;margin-top:10px}
.world-in .hint{margin-top:12px;font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faded);display:none}
.world.live .hint{display:block}
.wq-tip{position:absolute;z-index:4;pointer-events:none;translate:-50% calc(-100% - 16px);padding:7px 12px;border-radius:99px;background:#111;color:#fff;font:500 13px var(--sans);white-space:nowrap;opacity:0;transition:opacity var(--t-hover)}
.wq-tip.on{opacity:1}
.wq-card{position:absolute;right:var(--edge);top:clamp(16px,3vw,36px);z-index:5;width:min(340px,calc(100% - 2*var(--edge)));background:#fff;border-radius:18px;padding:20px 22px;
  box-shadow:0 30px 60px -30px rgba(17,24,39,.45);opacity:0;transform:translateY(-10px) scale(.97);pointer-events:none;transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.wq-card.on{opacity:1;transform:none;pointer-events:auto}
.wq-card h3{font:500 22px/1.15 var(--sans);letter-spacing:-.03em;margin:6px 28px 8px 0}
.wq-card p:not(.k){font-size:14.5px;line-height:1.45;color:#3E4D53}
.wq-card a{display:inline-block;margin-top:14px;font-weight:500;font-size:14px}
.wq-card .x{position:absolute;right:12px;top:10px;border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--faded)}
.wq-chips{position:absolute;left:0;right:0;bottom:clamp(14px,2vw,24px);z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:0 var(--edge)}
.wq-chips button{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;padding:8px 13px;border-radius:99px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);font:500 13px var(--sans);color:var(--ink);transition:background var(--t-hover),transform var(--t-hover) var(--ease-q)}
.wq-chips button i{width:9px;height:9px;border-radius:50%;background:var(--a)}
.wq-chips button:hover,.wq-chips button[aria-pressed="true"]{background:#111;color:#fff;transform:translateY(-2px)}
.world:not(.live){height:auto;min-height:0;padding:clamp(64px,8vw,110px) 0 40px}
.world:not(.live) .world-in,.world:not(.live) .wq-chips{position:static}
.world:not(.live) .wq-chips{justify-content:flex-start;margin-top:24px}
@media (max-width:700px){.wq-card{top:auto;bottom:120px}}

/* quest boxes */
.qpage{padding-top:clamp(48px,6vw,80px);padding-bottom:40px}
.q-head{display:grid;grid-template-columns:5fr 7fr;gap:12px 24px;border-top:1px solid var(--ink);padding-top:14px;margin:clamp(56px,6vw,96px) 0 clamp(24px,3vw,40px)}
.q-head h2{font:500 clamp(26px,2.6vw,40px)/1.05 var(--sans);letter-spacing:-.045em;max-width:17em}
@media (max-width:760px){.q-head{grid-template-columns:1fr}}
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;grid-auto-flow:dense}
.qb{position:relative;background:var(--card);border-radius:var(--r);padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:10px;overflow:hidden;border-top:6px solid var(--a);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base)}
.qb:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(17,24,39,.4)}
.qb:target{outline:3px solid var(--a);outline-offset:3px}
.qb svg{width:56px;height:56px}
.qb h2{font:500 clamp(21px,1.8vw,26px)/1.12 var(--sans);letter-spacing:-.035em}
.qb p:not(.mono):not(.loot){color:#3E4D53;font-size:15px;line-height:1.5}
.qb .loot{margin-top:auto;font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--a)}
.qb.xl{grid-column:span 2;grid-row:span 2}.qb.xl h2{font-size:clamp(28px,2.8vw,40px)}.qb.xl svg{width:96px;height:96px}
.qb.l{grid-column:span 2}
.qb.m{grid-column:span 2}
.qb.s{grid-column:span 1}
@media (max-width:980px){.qgrid{grid-template-columns:1fr 1fr}.qb.xl{grid-row:auto}.qb.s{grid-column:span 1}}
@media (max-width:560px){.qgrid{grid-template-columns:1fr}.qb.xl,.qb.l,.qb.m,.qb.s{grid-column:auto}}

/* data: stats + life-stage chart */
.qstats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.qstats div{padding:22px 14px}.qstats div+div{border-left:1px solid var(--rule)}
.qstats b{display:block;font:500 clamp(32px,3.4vw,54px)/1 var(--sans);letter-spacing:-.05em}
.qstats span{display:block;margin-top:8px;font-size:13px;color:var(--faded)}
@media (max-width:860px){.qstats{grid-template-columns:repeat(3,1fr)}.qstats div:nth-child(3n+1){border-left:0}.qstats div:nth-child(n+4){border-top:1px solid var(--rule)}}
.gantt{margin-top:32px;display:grid;gap:8px}
.g-row{display:grid;grid-template-columns:170px 1fr;gap:16px;align-items:center}
.g-row b{font-weight:500;font-size:14px}
.g-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);height:22px;background:repeating-linear-gradient(90deg,var(--card) 0 calc(20% - 2px),#fff calc(20% - 2px) 20%);border-radius:6px}
.g-head .g-track{background:none;height:auto}
.g-head span{font:500 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faded)}
.g-track i{grid-row:1;grid-column:calc(var(--a) + 1)/calc(var(--b) + 1);align-self:center;height:12px;margin:0 6px;border-radius:99px;background:var(--ink);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.g-track i.dot{width:14px;height:14px;justify-self:center;margin:0;background:#e03131}
.rv-on .gantt:not(.in) i{transform:scaleX(0)}
.g-note{margin-top:12px;font-size:13px;color:var(--faded)}
@media (max-width:560px){.g-row{grid-template-columns:110px 1fr;gap:8px}.g-row b{font-size:12.5px}.g-head span{font-size:8.5px}}
.qstats div:nth-child(5){border-left:0}.qstats div:nth-child(n+5){border-top:1px solid var(--rule)}
@media (max-width:860px){.qstats div:nth-child(5){border-left:1px solid var(--rule)}}
.wq-chips button{padding:6px 11px;font-size:12px}
.qstats{grid-template-columns:repeat(3,1fr)}.qstats div{border-top:0!important;border-left:1px solid var(--rule)!important}.qstats div:nth-child(3n+1){border-left:0!important}.qstats div:nth-child(n+4){border-top:1px solid var(--rule)!important}

/* ===== Quest gallery (Awwwards-style cards) ===== */
.qgrid2{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,44px) clamp(14px,1.6vw,24px)}
.qc2{outline:none}
.qc2 .pic{position:relative;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 40%,#fff 0%,color-mix(in srgb,var(--a) 22%,#eef4ff) 100%)}
.qc2 .pic>svg{width:34%;height:auto}
.qc2 .pic.has-img>svg{display:none}
.qc2 .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.qc2:hover .pic img,.qc2:focus-within .pic img{transform:scale(1.06)}
.qc2 .over{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  background:linear-gradient(180deg,rgba(17,24,39,0) 20%,rgba(17,24,39,.88));color:#fff;opacity:0;transition:opacity var(--t-base) var(--ease)}
.qc2:hover .over,.qc2:focus-within .over{opacity:1}
.qc2 .over p{font-size:13.5px;line-height:1.45}
.qc2 .over a{color:#fff}
.qc2 .over .loot{font:500 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#fff;opacity:.75}
.qc2 .row{display:flex;align-items:center;gap:10px;margin-top:14px}
.qc2 .row i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--a);display:grid;place-items:center}
.qc2 .row i svg{width:20px;height:20px;filter:brightness(0) invert(1)}
.qc2 .row h2{flex:1;min-width:0;font:600 16px/1.2 var(--sans);letter-spacing:-.02em}
.qc2 .tags{display:flex;gap:5px;flex:none}
.qc2 .tags span{border:1px solid var(--soft);border-radius:4px;padding:3px 6px;font:500 10.5px var(--sans);color:var(--faded);white-space:nowrap}
.qc2 .tags span+span{display:none}
.qc2:target .pic{outline:3px solid var(--a);outline-offset:4px}
@media (max-width:1100px){.qgrid2{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.qgrid2{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.qgrid2{grid-template-columns:1fr}}
@media (hover:none){.qc2 .over{position:static;opacity:1;background:none;color:var(--ink);padding:10px 0 0}.qc2 .over a{color:var(--ink)}.qc2 .over .loot{color:var(--a);opacity:1}}

/* Quest gallery v2: wider, three columns, cleaner cards */
.qgrid2{width:calc(100vw - 2*var(--edge));margin-left:calc(50% - 50vw + var(--edge));grid-template-columns:repeat(3,1fr);gap:clamp(40px,4vw,64px) clamp(18px,1.8vw,28px)}
.qc2 .pic{border-radius:14px;background:radial-gradient(ellipse 75% 70% at 50% 45%,#fff 0%,color-mix(in srgb,var(--a) 14%,#f4f7f8) 100%)}
.qc2 .row{margin-top:18px;gap:12px;align-items:flex-start}
.qc2 .row i{width:34px;height:34px}
.qc2 .row h2{font:500 clamp(18px,1.45vw,22px)/1.2 var(--sans);letter-spacing:-.03em;padding-top:4px}
.qc2 .tags span{font-size:11.5px;padding:4px 8px;border-radius:99px;margin-top:4px}
@media (max-width:980px){.qgrid2{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.qgrid2{grid-template-columns:1fr}}

/* ===== Side quests HUD (player profile) ===== */
.hud{--hb:#0b1013;--hp:rgba(255,255,255,.04);--hl:rgba(255,255,255,.09);--hc:#5ce1e6;--hw:#ffb347;color:#e9eef0;
  background:radial-gradient(ellipse 60% 50% at 50% 40%,#1a2a30 0%,transparent 70%),radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1.4px) 0 0/24px 24px,var(--hb);
  padding:clamp(48px,6vw,96px) var(--edge);margin-top:clamp(56px,6vw,96px)}
.hud-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--hl);padding-bottom:22px}
.tag2{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hc)}
.hud-top h2{font:500 clamp(30px,3.4vw,54px)/1 var(--sans);letter-spacing:-.045em;margin-top:12px}
.hud-kpi{display:flex;gap:clamp(18px,3vw,48px)}
.hud-kpi div{border-left:2px solid var(--hc);padding-left:12px}
.hud-kpi b{display:block;font:500 clamp(30px,3vw,48px)/1 var(--sans);letter-spacing:-.04em}
.hud-kpi span{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#8aa1a8}
.hud-grid{display:grid;grid-template-columns:1fr 1.5fr 1fr;grid-template-areas:"radar graph cards" "bars bars gauge";gap:16px;margin-top:22px}
.panel3{position:relative;background:var(--hp);border:1px solid var(--hl);border-radius:18px;padding:18px}
.panel3::before,.panel3::after{content:"";position:absolute;width:12px;height:12px;border:1.5px solid var(--hc);opacity:.7}
.panel3::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}.panel3::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.ph{font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#cfe3e7;margin-bottom:12px}
.ph em{font-style:normal;color:#6f878e;margin-left:8px}
.p-radar{grid-area:radar}.p-graph{grid-area:graph;padding:6px}.p-cards{grid-area:cards}.p-bars{grid-area:bars}.p-gauge{grid-area:gauge;display:grid;place-items:center}
.radar{width:100%;height:auto;overflow:visible}
.radar .grid polygon,.radar .grid line{fill:none;stroke:rgba(255,255,255,.12)}
.radar .shape{fill:rgba(92,225,230,.22);stroke:var(--hc);stroke-width:2;transform-origin:120px 120px;transition:transform var(--t-reveal) var(--ease)}
.radar text{font:500 9.5px var(--mono);fill:#9db3b9;text-transform:uppercase;letter-spacing:.04em}
.radar tspan{fill:var(--hc)}
.rv-on .hud:not(.in) .radar .shape{transform:scale(0)}
.graph{position:relative;aspect-ratio:1}
.graph svg{position:absolute;inset:0;width:100%;height:100%}
.graph path{stroke:rgba(255,255,255,.22);stroke-dasharray:3 5;fill:none}
.graph svg>circle:not(.orbit){fill:var(--hc);filter:drop-shadow(0 0 4px var(--hc))}
.graph .orbit{fill:none;stroke:rgba(255,255,255,.1)}
.graph .o2{stroke:rgba(92,225,230,.25);stroke-dasharray:2 10;transform-origin:300px 300px;animation:spin var(--t-marquee) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.graph .me{position:absolute;left:50%;top:50%;width:48%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 2px rgba(92,225,230,.5),0 0 0 10px rgba(92,225,230,.06),0 0 60px rgba(92,225,230,.25)}
.graph .me img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.nd{position:absolute;translate:-50% -50%;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:10px;background:#141c20;border:1px solid var(--hl);
  font:500 12.5px var(--sans);white-space:nowrap;box-shadow:0 8px 24px -10px rgba(0,0,0,.6);transition:border-color var(--t-quick),transform var(--t-quick)}
.nd:hover{border-color:var(--hc);transform:scale(1.06)}
.nd .cnt{display:grid;place-items:center;min-width:18px;height:18px;border-radius:99px;background:rgba(92,225,230,.15);color:var(--hc);font:500 10.5px var(--mono)}
.hcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hc{position:relative;padding:12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--hl);overflow:hidden}
.hc b{display:block;font:500 clamp(24px,2.2vw,34px)/1 var(--sans);letter-spacing:-.04em}
.hc span{display:block;margin-top:6px;font-size:12px;color:#cfdadd;line-height:1.3}
.hc small{display:block;margin-top:2px;font:500 9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#6f878e}
.hc svg{display:block;width:100%;height:22px;margin-top:8px}
.hc path{fill:none;stroke:var(--hw);stroke-width:1.6;stroke-dasharray:200;stroke-dashoffset:200;animation:wave var(--t-ambient) ease-in-out infinite}
.hc:nth-child(2n) path{stroke:var(--hc);animation-delay:var(--t-medium)}
@keyframes wave{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-200}}
.hbars{display:grid;gap:7px}
.hb{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center}
.hb b{font-weight:500;font-size:12.5px;color:#cfdadd}
.hb .tr{position:relative;display:grid;grid-template-columns:repeat(5,1fr);height:14px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 calc(20% - 2px),transparent calc(20% - 2px) 20%);border-radius:4px}
.hh .tr{background:none;height:auto}
.hh span{font:500 9.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#6f878e}
.hb i{grid-row:1;grid-column:calc(var(--a) + 1)/calc(var(--b) + 1);align-self:center;height:6px;margin:0 4px;border-radius:99px;background:linear-gradient(90deg,var(--hc),#3b82f6);box-shadow:0 0 10px rgba(92,225,230,.5);transform-origin:left;transition:transform var(--t-reveal) var(--ease)}
.hb i.dot{width:10px;height:10px;justify-self:center;margin:0;background:var(--hw);box-shadow:0 0 10px var(--hw)}
.rv-on .hud:not(.in) .hb i{transform:scaleX(0)}
.gauge2{text-align:center;width:100%}
.gauge2 svg{width:min(100%,260px);height:auto}
.gauge2 line{stroke:rgba(255,255,255,.15);stroke-width:2;stroke-linecap:round}
.gauge2 line.on{stroke:var(--hc)}
.gauge2 b{display:block;margin-top:-46px;font:500 clamp(40px,4vw,60px)/1 var(--sans);letter-spacing:-.05em}
.gauge2 span{display:block;margin-top:6px;font-size:13px;color:#cfdadd}
.gauge2 small{font:500 9.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#6f878e}
@media (max-width:1100px){.hud-grid{grid-template-columns:1fr 1fr;grid-template-areas:"graph graph" "radar cards" "bars bars" "gauge gauge"}}
@media (max-width:680px){.hud-grid{grid-template-columns:1fr;grid-template-areas:"graph" "radar" "cards" "bars" "gauge"}.nd{font-size:10.5px;padding:5px 7px}.hb{grid-template-columns:80px 1fr}}
@media (prefers-reduced-motion:reduce){.graph .o2,.hc path{animation:none;stroke-dashoffset:0}}

/* HUD v2: my photo as the background, glass panels on top */
.hud{position:relative;overflow:hidden;background:#0b0f11;isolation:isolate}
.hud-bg{position:absolute;left:0;right:0;top:0;width:100%;height:min(115vh,1100px);object-fit:cover;object-position:50% 22%;z-index:-2}
.hud::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,15,17,.55) 0%,rgba(11,15,17,.05) 18%,rgba(11,15,17,.1) 45%,rgba(11,15,17,.85) min(105vh,1000px),#0b0f11 min(115vh,1100px)),
  radial-gradient(ellipse 70% 60% at 50% 35%,transparent 40%,rgba(11,15,17,.6) 100%)}
.hud-grid{margin-top:clamp(240px,40vh,440px)}
.panel3{background:rgba(18,22,24,.34);border:1px solid rgba(255,255,255,.16);border-radius:22px;
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -30px rgba(0,0,0,.6)}
.panel3::before,.panel3::after{display:none}
.hc{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.hud-top h2{text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hud-kpi div{background:rgba(18,22,24,.3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14)}
.hud-top{border-bottom:0}
.graph .me{width:30%;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-content:center;text-align:center;border:1px solid rgba(255,255,255,.25)}
.graph .me span{font:400 clamp(22px,2.2vw,32px)/1 var(--serif);letter-spacing:-.02em}
.graph .me small{margin-top:6px;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hc)}
.nd{background:rgba(18,22,24,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media (max-width:680px){.hud-bg{height:80vh;object-position:50% 30%}.hud-grid{margin-top:46vh}}
.skip2{display:inline-block;margin-top:14px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);pointer-events:auto}

/* ===== Chapters v2: big clickable imagery, the button right under the story ===== */
.chap2{position:sticky;top:var(--navh);min-height:calc(100vh - var(--navh));display:grid;grid-template-columns:5fr 7fr;gap:var(--edge);
  padding:clamp(20px,2.4vw,36px) var(--edge);background:var(--c);border-top:1px solid rgba(35,49,55,.25)}
.ch-text{display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:34em}
.ch-num{font:500 clamp(44px,4.6vw,72px)/.9 var(--sans);letter-spacing:-.055em}
.ch-num span{display:block;margin-top:12px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.chap2 h3{font:500 clamp(30px,3vw,48px)/1.02 var(--sans);letter-spacing:-.045em}
.chap2 h3 del{display:block;font-size:.6em;margin-bottom:4px}
.ch-p{font-size:15.5px;line-height:1.5;max-width:32em}
.ch-stats{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ch-stats li{padding:7px 12px;border-radius:99px;border:1px solid rgba(35,49,55,.3);font-size:13.5px;font-weight:500}
.ch-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;align-self:flex-start;min-width:min(100%,360px);
  padding:18px 22px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font:500 18px var(--sans);letter-spacing:-.02em;
  box-shadow:0 14px 30px -14px rgba(35,49,55,.6);transition:transform var(--t-hover) var(--ease),box-shadow var(--t-quick),background var(--t-hover)}
.ch-cta .arr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);font-size:18px}
.ch-cta:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(35,49,55,.7)}
/* the picture side is one big link */
.ch-media{position:relative;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;min-height:calc(100vh - var(--navh) - 2*clamp(20px,2.4vw,36px));cursor:pointer;text-decoration:none}
.ch-media img{width:100%;height:100%;object-fit:cover;border-radius:16px;transition:transform var(--t-slow) var(--ease),filter var(--t-base)}
.ch-media .m1{grid-row:1/3}
.ch-media:hover img{filter:brightness(.82)}
.ch-media:hover .m1{transform:scale(1.015)}
.ch-badge{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;gap:10px;padding:16px 22px;border-radius:999px;
  background:#fff;color:var(--ink);font:500 17px var(--sans);box-shadow:0 20px 50px -20px rgba(0,0,0,.6);transition:transform var(--t-base) var(--ease),opacity var(--t-base);pointer-events:none}
.ch-badge b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-weight:500}
@media (hover:hover){.ch-badge{opacity:0;transform:scale(.85)}.ch-media:hover .ch-badge{opacity:1;transform:none}}
.chap2.dark{color:#fff;border-color:rgba(255,255,255,.15)}
.chap2.dark .ch-cta{background:#fff;color:var(--ink)}.chap2.dark .ch-cta .arr{background:var(--ink);color:#fff}
.chap2.dark .ch-stats li{border-color:rgba(255,255,255,.3)}
.chap2.dark del{color:var(--faded)}
@media (max-width:900px){
  .chap2{position:static;grid-template-columns:1fr;min-height:0}
  .ch-media{min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .ch-media .m1{grid-row:auto;grid-column:1/-1;aspect-ratio:4/3}
  .ch-media .m2,.ch-media .m3{aspect-ratio:4/3}
  .ch-cta{width:100%}
}

/* home: side quests is one block, the world then the cards */
.sq-block .quests{background:linear-gradient(#dbe9ff,var(--page) 75%);padding-top:clamp(20px,2.4vw,36px)}
.sq-block .quests-head{align-items:center}

/* My story: the title and a photo or two beside each scene */
.story-title{padding:clamp(56px,7vw,96px) var(--edge) 0;font:500 clamp(18px,1.6vw,24px) var(--sans);letter-spacing:-.02em;color:#fff}
.story-title::before{content:"";display:inline-block;width:28px;height:1px;background:#9AAEB5;vertical-align:middle;margin-right:12px}
.story.live .story-title{position:absolute;left:var(--edge);top:clamp(20px,4vh,40px);padding:0;z-index:2}
.story .sp{display:none}
.story.live .sp{display:block;position:absolute;top:0;width:clamp(170px,16vw,250px);aspect-ratio:1;object-fit:cover;border-radius:14px;
  border:5px solid #fff;box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.story.live .sp.l{right:calc(100% + 48px);rotate:-4deg}
.story.live .sp.r{left:calc(100% + 48px);top:24px;rotate:3deg}
@media (max-width:1000px){
  .story.live .sp.r{display:none}
  .story.live .sp.l{position:static;width:64px;border-width:3px;border-radius:10px;margin:0 auto 10px;rotate:-3deg}
  .story.live .story-title{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;top:12px}
  .story.live .story-title::before{width:16px;margin-right:8px}
}

/* HUD: who I am, values, personality */
.hud-who{margin-top:14px;max-width:38em;font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:#dfe7ea;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hud-grid{grid-template-areas:"radar graph cards" "bars bars gauge" "vals vals traits"}
.p-vals{grid-area:vals}.p-traits{grid-area:traits}
.vals{list-style:none;padding:0;margin-top:14px;display:grid;gap:2px}
.vals li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--hl)}
.vals li:first-child{border-top:0}
.vals .vn{font:500 11px var(--mono);color:var(--hc)}
.vals b{display:block;font:500 18px/1.2 var(--sans);letter-spacing:-.02em}
.vals li div span{font-size:13.5px;color:#9fb2b8}
.vals small{font:500 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--hw);text-align:right;max-width:18em}
.traits{display:grid;gap:18px;margin-top:18px}
.tr2{display:grid;grid-template-columns:76px 1fr 76px;align-items:center;gap:10px;font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#9fb2b8}
.tr2 span:last-child{text-align:right;color:#e9eef0}
.tk{position:relative;height:4px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(92,225,230,.5))}
.tk i{position:absolute;top:50%;left:var(--v);width:14px;height:14px;border-radius:50%;translate:-50% -50%;background:var(--hc);box-shadow:0 0 0 4px rgba(92,225,230,.18),0 0 18px var(--hc);transition:left var(--t-reveal) var(--ease)}
.rv-on .hud:not(.in) .tk i{left:50%}
@media (max-width:1100px){.hud-grid{grid-template-areas:"graph graph" "radar cards" "bars bars" "gauge gauge" "vals vals" "traits traits"}}
@media (max-width:680px){.hud-grid{grid-template-areas:"graph" "radar" "cards" "bars" "gauge" "vals" "traits"}
  .vals li{grid-template-columns:30px 1fr}.vals small{grid-column:2;text-align:left}}

/* the live world keeps its quest buttons for keyboards and screen readers only */
.world.live .wq-chips:not(:focus-within){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* story photos: square, clear of the title */
.story.live .sp{height:auto;width:clamp(150px,13vw,210px);top:70px}
.story.live .sp.l{right:calc(100% + 32px)}
.story.live .sp.r{left:calc(100% + 32px);top:100px}
@media (max-width:1000px){.story.live .sp.l{width:64px;height:64px}}
/* case studies: the website link is the loudest thing on the page */
.visit{height:64px;padding:0 10px 0 28px;gap:18px;font-size:18px;border-radius:999px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.visit::after{content:"↗";display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(127,127,127,.2);font-size:20px}
.site-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:clamp(40px,5vw,72px) var(--edge) 0;padding:clamp(28px,4vw,48px);
  border-radius:24px;background:var(--brand);color:var(--bg);text-decoration:none;transition:transform var(--t-base) var(--ease)}
.site-band:hover{transform:translateY(-4px)}
.site-band small{display:block;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:10px}
.site-band b{font:500 clamp(28px,4vw,60px)/1 var(--sans);letter-spacing:-.045em}
.site-band i{display:grid;place-items:center;width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;background:var(--bg);color:var(--brand);font-style:normal;font-size:clamp(26px,3vw,40px)}
.site-band,.site-band b,.site-band small{color:var(--bg)!important}

/* Second Thought: a wide banner cover, portrait posters at their own shape */
.st .cs2-hero{background:#1a1a1a}
.st .cs2-hero>img{object-fit:contain;object-position:center 12%}
.st .cs2-hero::after{background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6))}
.shot.tall img{aspect-ratio:auto}
.svc .shot{background:none}
.st-why{display:grid;grid-template-columns:2fr 1fr;gap:var(--edge);align-items:start}
.st-why .blk-head{grid-template-columns:1fr;margin-bottom:0}
@media (max-width:860px){.st-why{grid-template-columns:1fr}}

/* HUD v3: the whole profile in one frame, dashboard style */
.hud3{margin:clamp(40px,5vw,72px) var(--edge) 0;border-radius:28px;padding:clamp(20px,2.4vw,32px)}
.hud3 .hud-bg{height:100%}
.hud3::before{background:linear-gradient(180deg,rgba(11,15,17,.5) 0%,rgba(11,15,17,.05) 22%,rgba(11,15,17,.35) 50%,rgba(11,15,17,.8) 100%)}
.hud3 .hud-top h2{font-size:clamp(26px,2.6vw,40px)}
.hud3 .hud-who{font-size:14px;max-width:44em}
.hud3 .hud-kpi b{font-size:clamp(24px,2.2vw,34px)}
.hud3 .hud-grid{margin-top:clamp(110px,16vh,220px);gap:12px;grid-template-columns:repeat(6,1fr) 1.9fr;
  grid-template-areas:"radar radar cards cards traits traits gauge" "vals vals vals bars bars bars gauge"}
.hud3 .panel3{padding:14px 16px;border-radius:20px;min-width:0}
.hud3 .ph{margin-bottom:8px}
.hud3 .radar{display:block;max-height:200px;margin:0 auto}
.hud3 .hcards{grid-template-columns:repeat(3,1fr);gap:8px}
.hud3 .hc{padding:10px;border-radius:12px}
.hud3 .hc b{font-size:clamp(20px,1.7vw,26px)}
.hud3 .hc span{font-size:11px;margin-top:4px}
.hud3 .traits{gap:14px;margin-top:12px}
.hud3 .tr2{grid-template-columns:64px 1fr 64px;font-size:10px}
.hud3 .vals li{grid-template-columns:26px 1fr auto;gap:10px;padding:7px 0}
.hud3 .vals b{font-size:14.5px}
.hud3 .vals li div span{font-size:12px}
.hud3 .vals small{font-size:9.5px;max-width:14em}
.hud3 .hbars{gap:4px}
.hud3 .hb{grid-template-columns:92px 1fr;gap:10px}
.hud3 .hb b{font-size:11.5px}
.hud3 .hb .tr{height:12px}
.hud3 .p-gauge{display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(18,22,24,.3))}
.qchips{display:flex;flex-wrap:wrap;gap:6px}
.gchip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 5px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:11.5px}
.gchip i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(92,225,230,.18);color:var(--hc);font:500 10px var(--mono);font-style:normal}
.hud3 .gauge2{margin-top:auto}
@media (min-width:1101px){.hud3{min-height:calc(100svh - 2 * var(--edge));display:flex;flex-direction:column}
  .hud3 .hud-grid{margin-top:auto;padding-top:clamp(110px,16vh,220px)}}
@media (max-width:1100px){.hud3 .hud-grid{grid-template-columns:1fr 1fr;grid-template-areas:"radar cards" "traits gauge" "vals vals" "bars bars"}}
@media (max-width:680px){.hud3{margin-inline:0;border-radius:0}.hud3 .hud-bg{height:70vh}
  .hud3 .hud-grid{grid-template-columns:1fr;grid-template-areas:"radar" "cards" "traits" "gauge" "vals" "bars";margin-top:40vh}}

/* HUD v3: tighter, so the whole profile fits one screen */
.hud3{margin-top:12px}
.hud3 .hud-top{padding-bottom:0}
.hud3 .radar{max-height:168px}
.hud3 .hc{padding:8px 10px}
.hud3 .traits{gap:11px}
.hud3 .vals li{padding:5px 0}
.hud3 .vals li div span{display:none}
.hud3 .vals small{max-width:none;white-space:nowrap}
.hud3 .hbars{gap:2px}
.hud3 .hb .tr{height:10px}
.hud3 .gauge2 svg{width:min(100%,300px)}
@media (min-width:1101px){.hud3{min-height:calc(100svh - var(--navh) - 24px)}
  .hud3 .hud-grid{padding-top:40px}}

/* Second Thought: services as the studio site lists them, then the 0-1 Brand Kit */
.bento.sqr .shot:not(.full) img{aspect-ratio:619/677}
.bento.sqr .shot.full img{aspect-ratio:auto}
.kit{margin-top:clamp(40px,5vw,72px)}
.kit-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--fg);margin-bottom:var(--edge)}
.kit-head small{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.kit-head h3{margin-top:8px;font:500 clamp(36px,4.4vw,68px)/1 var(--sans);letter-spacing:-.05em}
.kit-head p{text-align:right}.kit-head b{display:block;font:500 clamp(32px,3.6vw,56px)/1 var(--sans);letter-spacing:-.04em}
.kit-head span{font-size:16px;color:var(--mut)}
.kit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px) var(--edge)}
.kit-grid figure{margin:0}.kit-grid img{width:100%;height:auto;aspect-ratio:963/526;object-fit:cover;border-radius:6px}
.kit-grid b{display:block;margin-top:14px;font:500 19px/1.2 var(--sans);letter-spacing:-.02em}
.kit-grid span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--mut)}

/* the creature still is portrait: keep its face in the frame */
img[src$="ai-creature.webp"]{object-position:50% 28%}

/* Second Thought: a small strip of team photos, one justified row */
.team-strip{display:flex;gap:10px;margin-top:clamp(28px,3vw,44px)}
.team-strip img{flex:var(--r) 1 0;min-width:0;height:auto;aspect-ratio:var(--r);object-fit:cover;border-radius:10px}
.team-cap{margin-top:10px;font:500 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
@media (max-width:760px){.team-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.team-strip img{aspect-ratio:1}}
@media (max-width:980px){.kit-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.kit-grid{grid-template-columns:1fr}}

/* Leggo: facts, traction bars, trips per hour, cost stack, revenue ladder */
.facts{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--edge);margin:0 0 clamp(24px,3vw,40px)}
.facts li{border-top:1px solid var(--brand);padding-top:12px}
.facts b{display:block;font:500 clamp(28px,3vw,44px)/1 var(--sans);letter-spacing:-.04em}
.facts span{display:block;margin-top:6px;font-size:13.5px;color:var(--mut)}
.tbars{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;height:240px;align-items:end;margin-top:16px}
.tb{display:grid;grid-template-rows:auto 1fr auto auto;height:100%;text-align:center;gap:6px}
.tb b{font:500 15px var(--sans)}
.tb i{align-self:end;height:var(--h);background:var(--brand);border-radius:6px 6px 2px 2px;transform-origin:bottom;transition:transform var(--t-slow) var(--ease)}
.rv-on .tbars:not(.in) i{transform:scaleY(0)}
.tb span{font:500 11px var(--mono);text-transform:uppercase}
.tb small{font-size:10.5px;color:var(--mut)}
.hours{margin:12px 0 0}.hours svg{width:100%;height:auto}
.hours .lbl text{font:500 10px var(--mono);fill:var(--mut)}
.hours figcaption,.legend3{margin-top:10px;font-size:13px;color:var(--mut)}
.cost .stack{display:flex;height:44px;border-radius:10px;overflow:hidden}
.cost .stack i{width:var(--w)}
.legend3{display:flex;flex-wrap:wrap;gap:8px 22px}
.legend3 i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px}
.legend3 b{color:var(--fg);font-weight:500}
.cost+.split2{margin-top:clamp(24px,3vw,40px)}
.kmbars{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;height:260px;align-items:end;margin-top:16px;padding-bottom:44px}
.kmb{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.kmb i{display:block;height:var(--h);background:var(--brand);border-radius:6px 6px 2px 2px;position:relative}
.kmb.loss i{background:#F07C7C}
.kmb i b{position:absolute;top:-22px;left:0;right:0;text-align:center;font:500 14px var(--sans)}
.kmb span,.kmb small{position:absolute;left:0;right:0;text-align:center}
.kmb span{bottom:-24px;font:500 12px var(--mono)}.kmb small{bottom:-42px;font-size:10.5px;color:var(--mut)}
.cost-line{position:absolute;left:0;right:0;bottom:calc(44px + (100% - 44px) * .52);border-top:2px dashed #F07C7C}
.why>div{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.why b{font:500 clamp(26px,2.6vw,38px)/1 var(--sans);letter-spacing:-.04em;color:var(--brand)}
.why span{font-size:14px;color:var(--mut)}
@media (max-width:600px){.tbars{gap:4px}.tb b{font-size:12px}.tb small{display:none}}

/* Leggo: cover framing, the women's division, the flood */
.leggo .cs2-hero>img{object-position:30% 78%}
.women{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px);align-items:center;margin-top:clamp(32px,4vw,56px)}
.women h3{margin-top:12px;font:500 clamp(30px,3.4vw,54px)/1 var(--sans);letter-spacing:-.045em}
.women h3+p{margin-top:16px;max-width:30em;font-size:16px;line-height:1.55;color:var(--mut)}
.flood .shot img{filter:grayscale(.35) contrast(1.05)}
.flood .bento .shot img{aspect-ratio:1280/576}
.flood .bento .shot:not(.w2) img{aspect-ratio:auto;height:100%}
@media (max-width:760px){.women{grid-template-columns:1fr}}

/* home: six quest boxes, then a way to the rest */
.home6{grid-template-columns:repeat(3,1fr);padding:clamp(28px,3vw,44px) var(--edge) 0}
.qc2{position:relative}
.qlink{position:absolute;inset:0;z-index:2}
.more6{padding:clamp(28px,3vw,44px) var(--edge) 0}
@media (max-width:780px){.home6{grid-template-columns:1fr 1fr}}
/* names: one row, always moving */
.names{display:block;overflow:hidden;padding:28px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.names-track{display:flex;gap:64px;width:max-content;animation:marquee var(--t-marquee) linear infinite}
.names:hover .names-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 32px))}}
@media (prefers-reduced-motion:reduce){.names-track{animation:none;flex-wrap:wrap;width:auto;padding:0 var(--edge)}.names .dup{display:none}}
/* next case study: a wide banner shows whole, on dark */
.next2 img[src$="st-ida-banner.webp"]{object-fit:contain;object-position:50% 30%;background:#1a1a1a}

/* ===== Hero: The Line. Poster first, the 3D canvas fades in over it; scroll rides the scene ===== */
.hero3{position:relative;height:300vh;background:#10181e;color:#fff}
.h3-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.h3-poster,.h3-poster img,.h3-canvas{position:absolute;inset:0;width:100%;height:100%}
.h3-poster img{object-fit:cover}
.h3-canvas{opacity:0;transition:opacity var(--t-slow) var(--ease)}
.h3-canvas.on{opacity:1}
.h3-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(9,13,17,.62),rgba(9,13,17,0) 40%,rgba(9,13,17,0) 58%,rgba(9,13,17,.72))}
.h3-copy{position:absolute;inset:var(--navh) 0 0;z-index:2;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);padding:clamp(20px,3vw,40px) var(--edge) 0}
.hero3 .statement,.hero3 .giant,.hero3 .scroll-cue{color:#fff}
.hero3 .hero2-meta{color:rgba(255,255,255,.88)}
.h3-cap{position:absolute;left:50%;bottom:18vh;translate:-50% 0;z-index:2;opacity:0;margin:0;font:italic 400 clamp(22px,2.4vw,36px) var(--serif);letter-spacing:-.02em;color:#e3fff1;white-space:nowrap;pointer-events:none}
.hero3.h3-off{height:100svh}
.hero3.poster .h3-copy,.hero3.poster .h3-cap,.hero3.poster .h3-stage::after{visibility:hidden}
@media (max-width:760px){.hero3{height:220vh}}
@media (prefers-reduced-motion:reduce){.hero3{height:100svh}}

/* Hero pass 2: headline reads in order; the nav is one dark bar while it sits over the scene */
.hero3 .statement .indent{display:none}
.hero3 .statement{max-width:17em}
.hero3 .statement em{display:block}
.hero3 .giant{margin-bottom:.02em}
.nav,.nav-logo,.nav-menu{transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
@media (max-width:640px){
  .nav-logo{font-size:17px;padding:0 10px}
  .nav-menu{flex:0 1 auto}.nav-menu summary{padding:0 10px;gap:6px}
  .nav-r a{padding:0 9px}.nav-r .sq{display:flex}
}
.hero3 .statement{text-wrap:balance}
@media (max-width:640px){.nav{font-size:14px}.nav-logo{font-size:16px;padding:0 8px}.nav-menu summary{padding:0 8px}.nav-menu i{font-size:18px}.nav-r a{padding:0 7px}}
.home6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:780px){.home6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.home6{grid-template-columns:minmax(0,1fr)}}
/* the hero starts under the fixed nav, so its stage fills the first screen exactly */
.hero3{margin-top:calc(-1 * var(--navh))}

/* ===== My story: eight chapters on one line. Each era has its own palette, texture, type and motion ===== */
.story2{position:relative;background:#0b1014;color:#fff;--map:clamp(150px,13vw,200px)}
.story2-title{padding:clamp(64px,10vh,120px) var(--edge) clamp(24px,4vh,48px) calc(var(--map) + var(--edge));font:500 clamp(36px,4.4vw,72px)/1 var(--sans);letter-spacing:-.05em;color:#e3fff1}
.story2-title span{display:block;margin-bottom:14px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7dffc4}
/* the line map: always on screen while the story is, filled as you go */
.linemap{position:sticky;top:calc(var(--navh) + 24px);z-index:6;height:0}
.linemap ol{list-style:none;margin:0;padding:0;position:absolute;left:var(--edge);top:0;display:grid;gap:clamp(10px,2.4vh,22px)}
.linemap ol::before,.linemap ol::after{content:"";position:absolute;left:6px;top:8px;width:2px;bottom:8px;background:rgba(255,255,255,.18)}
.linemap ol::after{background:#7dffc4;bottom:auto;height:calc(var(--prog,0) * (100% - 16px));box-shadow:0 0 12px #7dffc4}
.linemap a{position:relative;display:flex;align-items:center;gap:12px;text-decoration:none;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);mix-blend-mode:difference}
.linemap i{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;background:#0b1014;flex:none;z-index:1;transition:transform var(--t-quick) var(--ease),background-color var(--t-quick) var(--ease)}
.linemap a.done{color:rgba(255,255,255,.8)}.linemap a.done i{background:#7dffc4;border-color:#7dffc4}
.linemap a[aria-current]{color:#fff}.linemap a[aria-current] i{background:#fff;border-color:#fff;transform:scale(1.25)}
.linemap a:hover span{text-decoration:underline;text-underline-offset:3px}

.era{position:relative;background:var(--bg);color:var(--fg);--p:1}
.era-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:1fr auto;gap:clamp(20px,3vh,36px) clamp(24px,4vw,72px);
  padding:clamp(32px,6vh,72px) clamp(20px,4vw,64px) clamp(32px,6vh,64px) calc(var(--map) + var(--edge) * 2);min-height:calc(100svh - var(--navh))}
.era-copy{align-self:center;max-width:30em}
.era-k{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.era h3{margin-top:16px;font:500 clamp(36px,4.2vw,68px)/1 var(--sans);letter-spacing:-.045em;text-wrap:balance}
.era-copy p:not(.era-k){margin-top:18px;font-size:clamp(16px,1.2vw,19px);line-height:1.5;max-width:28em;opacity:.86}
.era-art{grid-row:1/3;grid-column:2;position:relative;min-height:340px}
.art{position:absolute;margin:0}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.art.ph{display:grid;place-items:center;padding:18px;text-align:center;border:2px dashed currentColor;font:500 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.era-play{align-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.pbtn{font:500 15px var(--sans);padding:12px 20px;border-radius:99px;border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer;transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),transform var(--t-press) var(--ease)}
.pbtn:hover{background:var(--fg);color:var(--bg)}.pbtn:active{transform:scale(.97)}.pbtn:disabled{opacity:.5;cursor:default}
.pout{flex-basis:100%;min-height:1.4em;font:500 13px var(--mono);letter-spacing:.04em;color:var(--acc)}
.era :focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* pinned, scroll-driven on wide screens with motion allowed */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .story2.live .era{height:165vh}
  .story2.live .era-stage{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));min-height:0;overflow:hidden}
  .story2.live .era-copy>*{--k:clamp(0,(var(--p) - .02) * 7 - var(--i,0) * .35,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 28px))}
  .story2.live .era-copy>:nth-child(2){--i:1}.story2.live .era-copy>:nth-child(3){--i:2}
  .story2.live .art{translate:0 calc((.5 - var(--p)) * var(--d,1) * 150px)}
  .story2.live .era-play{opacity:clamp(0,(var(--p) - .12) * 6,1)}
}

/* 01 Puliangudi: lemon paper, graphite, handwriting; wobbly, sketchy motion */
.e1{--bg:#f3ecd2;--fg:#3a3122;--acc:#9c7a12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.e1 h3{font:500 clamp(48px,5.6vw,92px)/.95 'Caveat',cursive;letter-spacing:-.01em}
.e1 .a1{left:4%;top:6%;width:52%;aspect-ratio:1;rotate:-4deg;padding:12px 12px 40px;background:#fffdf4;box-shadow:0 18px 40px rgba(58,49,34,.22)}
.e1 .a1::before{content:"";position:absolute;left:38%;top:-12px;width:90px;height:26px;background:rgba(232,201,58,.7);rotate:3deg}
.e1 .a2{right:4%;top:38%;width:40%;aspect-ratio:4/5;rotate:5deg;background:rgba(255,253,244,.6)}
.e1 .note{left:14%;bottom:6%;font:500 clamp(28px,2.6vw,40px) 'Caveat',cursive;color:#9c7a12;rotate:-6deg}
.e1 .sketch{width:min(100%,420px);height:180px;background:#fffdf4;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(58,49,34,.18);cursor:crosshair;touch-action:none}

/* 02 Lovedale: bottle green and brass, ceremonial serif, marching (stepped) motion */
.e2{--bg:#173226;--fg:#f1ead2;--acc:#d6b03c}
.e2 h3{font:500 clamp(40px,4.6vw,76px)/1 var(--serif);letter-spacing:-.02em}
@media (min-width:761px) and (prefers-reduced-motion:no-preference){.story2.live .e2 .era-copy>*{transform:translateY(round(down,calc((1 - var(--k)) * 28px),7px))}}
.e2 .a1{inset:6% 2% 14% 6%;border:10px solid #d6b03c;outline:1px solid rgba(214,176,60,.5);outline-offset:8px;filter:sepia(.25) contrast(1.05)}
.e2 .mace{width:34px;height:150px;fill:#d6b03c;transform-origin:50% 50%}
.e2 .mace.flip{animation:mace var(--t-long) cubic-bezier(.3,.1,.3,1) both}
@keyframes mace{0%{transform:translateY(0) rotate(0)}55%{transform:translateY(-60px) rotate(1080deg)}80%{transform:translateY(0) rotate(1080deg)}88%{transform:translateY(-6px) rotate(1080deg)}100%{transform:translateY(0) rotate(1080deg)}}

/* 03 Kurukshetra: blueprint grid, mono type, precise linear motion */
.e3{--bg:#f4f7fb;--fg:#1d3763;--acc:#2a5fae;background-image:linear-gradient(rgba(42,95,174,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(42,95,174,.1) 1px,transparent 1px);background-size:24px 24px}
.e3 h3{font:500 clamp(34px,3.8vw,60px)/1.02 var(--mono);letter-spacing:-.05em}
.e3 .a1{left:4%;top:4%;width:32%;aspect-ratio:580/850;border:1px solid #2a5fae;padding:6px;background:#fff}
.e3 .a2{right:6%;top:10%;width:44%;aspect-ratio:1;border:1px solid #2a5fae;padding:6px;background:#fff}
.e3 .a3{left:30%;bottom:2%;width:40%;aspect-ratio:4/3;color:#2a5fae;background:rgba(255,255,255,.7)}
.e3 .bottles{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;width:min(100%,380px)}
.e3 .bottles i{aspect-ratio:1/1.6;border:1px solid rgba(42,95,174,.45);border-radius:2px}
.e3 .bottles i.on{background:#b3123c;border-color:#b3123c}

/* 04 Chennai: asphalt and Leggo green, signage type, fast linear motion */
.e4{--bg:#101518;--fg:#e9f3ee;--acc:#22d38a}
.e4 h3{font:700 clamp(34px,3.9vw,64px)/.98 var(--sans);letter-spacing:-.03em;text-transform:uppercase}
.e4 .a1{left:0;top:4%;width:72%;aspect-ratio:1400/1053;border-left:6px solid #22d38a}
.e4 .a2{right:0;bottom:4%;width:50%;aspect-ratio:1280/962;border-left:6px solid #22d38a}
.e4 .stops{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;position:relative}
.e4 .stops button{font:600 12px var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:10px 14px;border-radius:6px;border:1.5px solid rgba(34,211,138,.6);background:transparent;color:#e9f3ee;cursor:pointer;transition:background-color var(--t-hover) linear,color var(--t-hover) linear}
.e4 .stops button[aria-pressed="true"]{background:#22d38a;color:#0b1014;box-shadow:0 0 18px rgba(34,211,138,.5)}
.e4 .stops button:hover{border-color:#22d38a}

/* 05 The burn: embers, ticking numbers, restless motion */
.e5{--bg:#1a0d08;--fg:#ffe4d0;--acc:#ff7a3c;background-image:radial-gradient(120% 60% at 70% 110%,rgba(255,90,31,.28),transparent 60%)}
.e5 h3{font:600 clamp(36px,4.2vw,70px)/1 var(--sans);letter-spacing:-.05em}
.e5 .a1{right:4%;top:12%;width:76%;aspect-ratio:757/568;filter:sepia(.5) saturate(1.4) hue-rotate(-12deg) contrast(1.1)}
.e5 .runway{display:grid;gap:10px;width:min(100%,380px);font:500 13px var(--mono)}
.e5 .runway input{width:100%;accent-color:#ff7a3c}
.e5 .bar{display:block;height:12px;border-radius:6px;background:rgba(255,228,208,.12);overflow:hidden}
.e5 .bar em{display:block;height:100%;background:linear-gradient(90deg,#ff2d10,#ffb04a);transition:width var(--t-quick) steps(5)}
.e5.even .bar em{background:linear-gradient(90deg,#3fd08a,#9ff0c8)}
@media (prefers-reduced-motion:no-preference){.e5 .era-k{animation:ember var(--t-long) steps(2) infinite}}
@keyframes ember{50%{opacity:.6}}

/* 06 The fall: desaturated, grain, slow */
.e6{--bg:#20262b;--fg:#c9d1d6;--acc:#8fa3b0}
.e6 h3{font:400 clamp(36px,4.2vw,70px)/1 var(--serif);letter-spacing:-.02em}
.e6 .a1{left:0;top:6%;width:84%;aspect-ratio:1280/576;filter:grayscale(.85) contrast(1.05)}
.e6 .a2{right:4%;bottom:2%;width:34%;aspect-ratio:4/5;filter:grayscale(1) brightness(.85)}
.e6 .loss{display:flex;width:min(100%,380px);height:44px;border-radius:6px;overflow:hidden;font:500 12px var(--mono)}
.e6 .loss i{display:flex;align-items:center;gap:6px;padding:0 10px;white-space:nowrap;font-style:normal;transition:flex-grow var(--t-slow) var(--ease),background-color var(--t-slow) var(--ease)}
.e6 .loss .dad{flex:26 1 0;background:#56636c}.e6 .loss .rest{flex:25 1 0;background:#3a444b}
.e6:not(.split) .loss i{background:#3a444b;color:transparent}
.e6:not(.split) .loss .dad{flex-grow:51}.e6:not(.split) .loss .rest{flex-grow:.001;padding:0}

/* 07 Zero: white, one black line, silence */
.e7{--bg:#fff;--fg:#111;--acc:#111}
.e7 h3{font:400 clamp(40px,4.8vw,80px)/1 var(--sans);letter-spacing:-.06em}
.e7 .era-art::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#111}
.e7 .a1{left:4%;top:8%;width:26%;aspect-ratio:619/677}.e7 .a2{left:36%;top:30%;width:26%;aspect-ratio:619/677}.e7 .a3{right:2%;top:52%;width:34%;aspect-ratio:900/791}
.e7 .art{transition:opacity var(--t-medium) var(--ease),transform var(--t-medium) var(--ease)}
.e7.zeroed .art{opacity:0;transform:scale(.96)}
.e7.rebuild .a1{transition-delay:var(--t-press)}.e7.rebuild .a2{transition-delay:var(--t-quick)}.e7.rebuild .a3{transition-delay:var(--t-medium)}

/* 08 Next: the hero's line, still being drawn */
.e8{--bg:#0b1014;--fg:#e3fff1;--acc:#7dffc4}
.e8 h3{font:italic 400 clamp(38px,4.4vw,74px)/1 var(--serif);letter-spacing:-.02em}
.e8 .a1{left:6%;top:4%;width:40%;aspect-ratio:1130/1600;box-shadow:0 0 0 1px rgba(125,255,196,.4)}
.e8 .a2{right:6%;top:24%;width:30%;aspect-ratio:720/1237;box-shadow:0 0 0 1px rgba(125,255,196,.4)}
.e8 .nextline{width:min(100%,380px);height:auto;fill:none;stroke:#7dffc4;stroke-width:3;stroke-linecap:round}
.e8 .nextline .todo{stroke-dasharray:1;stroke-dashoffset:1;stroke-dasharray:.02 .02}
.e8 .nextline .todo{stroke-dasharray:1 1}
.e8 .nextline circle{fill:#0b1014;stroke:#7dffc4;transition:fill var(--t-base) var(--ease)}
.e8.drawn .nextline circle{fill:#7dffc4}
.e8 .drawl{display:grid;gap:8px;width:min(100%,380px);font:500 13px var(--mono)}
.e8 .drawl input{accent-color:#7dffc4}

/* the closing beat: who I am now, and what to do next */
.story-end{padding:clamp(80px,14vh,160px) clamp(20px,4vw,64px) clamp(80px,12vh,140px) calc(var(--map) + var(--edge) * 2);background:#0b1014;--acc:#7dffc4}
.end-h{margin-top:20px;font:500 clamp(40px,6vw,104px)/.98 var(--sans);letter-spacing:-.055em;max-width:14em}
.end-h em{font:italic 400 1.04em var(--serif);color:#7dffc4}
.end-p{margin-top:24px;max-width:36em;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:rgba(255,255,255,.78)}
.end-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.end-cta a{display:inline-flex;align-items:center;gap:8px;padding:15px 24px;border-radius:99px;text-decoration:none;font:500 16px var(--sans);transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),transform var(--t-press) var(--ease)}
.end-cta .btn-a{background:#7dffc4;color:#0b1014}.end-cta .btn-a:hover{background:#fff}
.end-cta .btn-b{border:1.5px solid rgba(255,255,255,.4);color:#fff}.end-cta .btn-b:hover{background:#fff;color:#0b1014}
.end-cta a:active{transform:scale(.97)}

/* phones: chapters stack, the line map becomes a strip under the nav */
@media (max-width:760px){
  .story2{--map:0px}
  .linemap{top:var(--navh);height:auto;background:rgba(11,16,20,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .linemap ol{position:static;display:flex;justify-content:space-between;padding:10px var(--edge)}
  .linemap ol::before{left:var(--edge);right:var(--edge);top:50%;bottom:auto;width:auto;height:2px}
  .linemap ol::after{left:var(--edge);top:50%;bottom:auto;height:2px;width:calc(var(--prog,0) * (100% - var(--edge) * 2))}
  .linemap span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .linemap a{mix-blend-mode:normal}
  .era-stage{grid-template-columns:1fr;grid-template-rows:auto;padding:56px var(--edge) 48px}
  .era-art{grid-row:auto;grid-column:auto;min-height:0;height:92vw}
  .story-end{padding-left:var(--edge)}
}

.linemap a{mix-blend-mode:normal;transition:color var(--t-hover) var(--ease)}
.story2[data-tone=light] .linemap a{color:rgba(20,24,26,.55)}
.story2[data-tone=light] .linemap a.done{color:rgba(20,24,26,.8)}
.story2[data-tone=light] .linemap a[aria-current]{color:#111}
.story2[data-tone=light] .linemap a[aria-current] i{background:#111;border-color:#111}
.story2[data-tone=light] .linemap i{background:transparent}
.story2[data-tone=light] .linemap ol::before{background:rgba(20,24,26,.2)}
.story2[data-tone=light] .linemap ol::after{background:#16a06a;box-shadow:none}
.story2[data-tone=light] .linemap a.done i{background:#16a06a;border-color:#16a06a}
@media (max-width:760px){.story2[data-tone=light] .linemap{background:rgba(255,255,255,.85)}}

/* 06 The fall, pass 2: the flood fills the frame, the loss sits under the words */
.e6 .era-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;position:relative;isolation:isolate}
.e6 .flood{position:absolute;inset:0;margin:0;z-index:-1}
.e6 .flood img{width:100%;height:100%;object-fit:cover;filter:grayscale(.9) contrast(1.05) brightness(.5)}
.e6 .flood::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(32,38,43,.92),rgba(32,38,43,.55) 55%,rgba(32,38,43,.2))}
.e6 .flood figcaption{position:absolute;right:clamp(20px,4vw,64px);bottom:clamp(20px,4vh,48px);z-index:1;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#c9d1d6}
.e6 .era-copy{max-width:34em}
.e6 h3{font:400 clamp(48px,6vw,104px)/.95 var(--serif)}
.e6 .era-play{margin-top:32px}
.e6 .loss{position:relative;height:52px;width:min(100%,460px);background:#3a444b}
.e6 .loss .all{position:absolute;inset:0;justify-content:flex-start;padding:0 14px;color:#fff;background:#56636c;transition:opacity var(--t-medium) var(--ease)}
.e6 .loss .dad{background:#8fa3b0;color:#14191c}.e6 .loss .rest{background:#4a565e;color:#fff}
.e6:not(.split) .loss i.dad,.e6:not(.split) .loss i.rest{color:transparent;background:transparent}
.e6.split .loss .all{opacity:0}
@media (max-width:760px){.e6 .era-stage{min-height:auto;padding-bottom:72px}}
.e6:not(.split) .loss i.all{color:#fff;background:#56636c}

/* 08 Next, pass 3: one control (drag along the line), captioned work, words and pictures arrive together */
.e8 .era-play{margin-top:32px}
.e8 .drawl{position:relative;display:block;width:min(100%,420px)}
.e8 .drawl input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.e8 .drawl:focus-within{outline:2px solid #7dffc4;outline-offset:6px;border-radius:8px}
.e8 .nextline{width:100%}
.e8 .a1{left:4%;top:2%;width:46%;aspect-ratio:auto;height:auto}
.e8 .a2{right:2%;bottom:6%;width:50%;aspect-ratio:auto;height:auto}
.e8 .art img{height:auto}
.e8 figcaption{margin-top:10px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#7dffc4}
@media (min-width:761px) and (prefers-reduced-motion:no-preference){.story2.live .e8 .art{opacity:clamp(0,(var(--p) - .02) * 6,1)}}
.e8 .a1,.e8 .a2{box-shadow:none}.e8 .a2{top:auto}.e8 .art img{box-shadow:0 0 0 1px rgba(125,255,196,.35)}

/* ===== Micro-interactions. Every duration is a motion token; feedback lands within 100 ms ===== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-page);animation-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
/* nav: an underline draws in from the left; items give under the finger */
.nav-r a{--pad:22px;position:relative}
.nav-r a::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:15px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-hover) var(--ease)}
.nav-r a:hover,.nav-r a[aria-current]{text-decoration:none}
.nav-r a:hover::after,.nav-r a:focus-visible::after,.nav-r a[aria-current]::after{transform:scaleX(1)}
.nav-r a,.nav-menu summary,.nav-logo{transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),transform var(--t-press) var(--ease)}
.nav-r a:active,.nav-menu summary:active,.nav-logo:active,.scroll-cue:active,.ch-cta:active{transform:scale(.97)}
@media (max-width:640px){.nav-r a{--pad:7px}}
/* the nav stays one dark bar over the hero and the whole story */
html.nav-dark .nav{background:rgba(10,15,19,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}
html.nav-dark .nav-logo,html.nav-dark .nav-menu{background:transparent;color:#fff}
html.nav-dark .nav-menu .menu{background:rgba(10,15,19,.94)}
html.nav-dark .nav-menu .menu a{border-top-color:rgba(255,255,255,.16)}
/* headline enters once: a short rise, transform only so the LCP is not held back */
@media (prefers-reduced-motion:no-preference){.hero3 .statement{animation:rise var(--t-slow) var(--ease) both}.hero3 .hero2-foot{animation:rise var(--t-reveal) var(--ease) both}}
@keyframes rise{from{transform:translateY(22px)}}
/* cursor ring, mouse only: follows the pointer, grows over anything clickable; the native cursor stays */
.cring{position:fixed;left:0;top:0;z-index:100;width:30px;height:30px;margin:-15px 0 0 -15px;border:1.5px solid #fff;border-radius:50%;pointer-events:none;mix-blend-mode:difference;
  transition:width var(--t-hover) var(--ease),height var(--t-hover) var(--ease),margin var(--t-hover) var(--ease),opacity var(--t-hover) var(--ease)}
.cring.hot{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(255,255,255,.12)}
.cring.off{opacity:0}
/* contrast: every small label at 4.5:1 or better on its chapter */
.linemap a{font-size:12px;color:rgba(255,255,255,.72)}
.story2[data-tone=light] .linemap a{color:rgba(20,24,26,.78)}
.e1{--acc:#7a5c00}
.e3 .bottles i{border-color:rgba(42,95,174,.85)}
.art.ph{opacity:1}
.e1 .a2.ph{color:#3a3122;background:#fffdf4;border-color:rgba(58,49,34,.6)}
.e3 .a3.ph{color:#1d3763;border-color:#2a5fae}
@keyframes ember{50%{opacity:.82}}
.e6 .loss{font-size:13px}
/* phones: the current chapter's name sits beside the dot strip */
.linemap .now{display:none}
@media (max-width:760px){.linemap .now{display:block;margin:0;padding:8px var(--edge) 0;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7dffc4}
  .story2[data-tone=light] .linemap .now{color:#0f6b46}}
/* fixes from the Phase 3 review */
.e6 .loss i{font:500 14px var(--sans);letter-spacing:0}
.e6 .loss b{font:600 18px var(--sans);letter-spacing:-.02em}
.cring.hot{width:64px;height:64px;margin:-32px 0 0 -32px;background:transparent;opacity:.45}
@media (max-width:760px){.linemap .now{font-size:12px;padding-top:10px}}
.end-h{text-wrap:balance}.end-h em{white-space:nowrap}
/* no backdrop blur on the nav: blurring the live 3D canvas every frame cost ~100 ms on the first hover */
html.nav-dark .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,15,19,.84)}

/* the 3D hero is loading: a scanning line appears only if it takes longer than --t-slow, and goes once the scene is live */
.hero3.h3-loading:not(.live):not(.h3-off) .h3-stage::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:3;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,#7dffc4,transparent) 0 0/35% 100% no-repeat;animation:h3scan var(--t-reveal) linear var(--t-slow) infinite}
@keyframes h3scan{from{background-position:-40% 0;opacity:1}to{background-position:140% 0;opacity:1}}
@media (prefers-reduced-motion:reduce){.hero3.h3-loading .h3-stage::before{display:none}}
/* contrast: chapter number labels and the struck-out word on the light chapter cards */
.chap2 .ch-num span{color:#3f4b50}
.chap2 h3 del{color:var(--faded)}
.chap2 .ch-num span{opacity:1;color:#3f4b50}
.chap2.dark .ch-num span{color:#c9d3d6}
.chap2 h3 del{color:#56676d}