/* Tripolar Edge AI · cyber-physical defense.
   Brand system from the Tripolar design reference (Jost / Poppins / Sulphur Point, glass,
   Kinetic-blue primary button, sand labels) on the illustrations' cool paper ground. */
@font-face{font-family:Jost;font-weight:300;src:url(fonts/jost-latin-300-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Jost;font-weight:400;src:url(fonts/jost-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Jost;font-weight:500;src:url(fonts/jost-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Poppins;font-weight:300;src:url(fonts/poppins-latin-300-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Poppins;font-weight:400;src:url(fonts/poppins-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Poppins;font-weight:500;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Sulphur Point";font-weight:700;src:url(fonts/sulphur-point-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:JBM;font-weight:400;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:JBM;font-weight:500;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-display:swap}

:root{
  color-scheme:light;
  --bg:#eef1f5; --bg-hi:#f8fafc; --bg-lo:#dfe4ea;
  --stone:#f4eee7; --sand:#d1b794; --sand-ink:#8a6e4c;
  --ice:#d3eefc; --ice-ink:#2f6688; --sig:#76b6ea; --sig-ink:#3d6fa8;
  --threat:#d6434f; --threat-ink:#a62f39; --threat-bg:#fbe6e8;
  --ink:#02070f; --ink-2:#545454; --ink-3:#8b8681; --line:#e2e6ec;
  --glass:rgba(255,255,255,.62); --glass-rim:rgba(255,255,255,.9);
  --shadow:0 24px 60px -36px rgba(74,52,28,.28),0 2px 6px -2px rgba(74,52,28,.06);
  --display:"Jost","Futura","Century Gothic",sans-serif; --body:"Poppins","Segoe UI",system-ui,sans-serif;
  --label:"Sulphur Point","Jost",sans-serif; --mono:JBM,ui-monospace,Menlo,monospace;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:30px;
  --ease:cubic-bezier(.22,.8,.22,1); --ease-io:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;color:var(--ink);font:300 15.5px/1.7 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;background:var(--bg)}
/* the paper: painted by the stage (which stays put) and the section below, never as a fixed page background,
   which would make the browser repaint the whole screen on every scroll */
.stage,.flow{background:radial-gradient(40% 40% at 88% 4%,rgba(211,238,252,.55),transparent 70%),radial-gradient(36% 36% at 4% 30%,rgba(209,183,148,.14),transparent 70%),radial-gradient(120% 95% at 50% 40%,var(--bg-hi) 0%,var(--bg) 55%,var(--bg-lo) 100%)}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:300;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(40px,5.2vw,74px);line-height:.98;letter-spacing:-.035em}
h1 .sub{display:block;font-size:.3em;letter-spacing:-.01em;color:var(--ink-2);margin-bottom:16px}
h2{font-size:clamp(30px,3.4vw,46px);line-height:1.08}
h4{font-size:19px;line-height:1.35;font-weight:400;letter-spacing:-.01em}
p{margin:0;color:var(--ink-2)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ice-ink);outline-offset:3px;border-radius:6px}

.label{font:700 11.5px/1.2 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-ink)}
.lede{font-size:clamp(16px,1.3vw,18.5px);line-height:1.65;max-width:58ch}
.statement{font:300 clamp(26px,3vw,38px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.statement em{font-style:normal;color:var(--threat-ink)}
.statement.big{font-size:clamp(38px,5.2vw,74px);line-height:1.04;letter-spacing:-.03em}

.glass{background:var(--glass);border:1px solid var(--glass-rim);box-shadow:var(--shadow),inset 0 1px 0 #fff;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:var(--r-md);padding:15px 20px 15px 22px;font:400 15px var(--display);white-space:nowrap;cursor:pointer;text-decoration:none;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:linear-gradient(90deg,#d3eefc 0%,#e9f6fd 55%,#fff 100%);box-shadow:0 10px 22px -12px rgba(47,102,136,.45),inset 0 1px 0 #fff,inset 0 -2px 4px rgba(47,102,136,.12)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 14px 26px -12px rgba(47,102,136,.5),inset 0 1px 0 #fff,inset 0 -2px 4px rgba(47,102,136,.16)}
.btn--secondary{background:var(--glass);border:1px solid var(--glass-rim);box-shadow:var(--shadow),inset 0 1px 0 #fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.btn--secondary:hover{background:rgba(255,255,255,.85)}
.btn--sm{padding:11px 16px;font-size:14px;border-radius:var(--r-sm)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;font:700 10.5px var(--label);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip--ice{background:var(--ice);color:var(--ice-ink)}
.chip--sand{background:rgba(209,183,148,.28);color:var(--sand-ink)}
.chip--red{background:var(--threat-bg);color:var(--threat-ink)}
.chip--red i{animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:.2}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ticks{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.ticks svg{flex:none;width:18px;height:18px;margin-top:4px;color:var(--sand-ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-radius:var(--r-lg);margin-top:18px;max-width:620px}
.stats>div{padding:16px 20px;display:flex;flex-direction:column;gap:2px}
.stats>div+div{border-left:1px solid rgba(139,134,129,.18)}
.stats strong{font:300 26px/1.1 var(--display);letter-spacing:-.02em}
.stats span{font-size:13px;color:var(--ink-2)}

/* ---------------------------------------------------------- nav */
.nav{position:fixed;z-index:50;top:12px;left:50%;transform:translateX(-50%);width:min(1160px,calc(100% - 24px));border-radius:18px;padding:10px 12px 10px 18px;display:flex;align-items:center;gap:18px}
.nav__brand img{height:34px;display:block;margin:-6px 0}
.nav nav{display:flex;gap:4px;margin-left:auto}
.nav nav a{font:400 14px var(--display);color:var(--ink-2);text-decoration:none;padding:7px 12px;border-radius:10px;transition:background .2s,color .2s}
.nav nav a:hover,.nav nav a.on{background:rgba(255,255,255,.85);color:var(--ink)}
.nav__progress{position:absolute;left:18px;right:18px;bottom:-1px;height:2px;overflow:hidden;border-radius:2px}
.nav__progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#9fd3f1,#d1b794)}


/* ---------------------------------------------------------- the story: one sticky stage */
.story{position:relative;height:calc(var(--n,16) * 75vh + 100vh);height:calc(var(--n,16) * 75svh + 100svh)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;contain:strict}
.cam{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;will-change:transform;transition:opacity .9s var(--ease)}
.cam .layer img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;pointer-events:none;will-change:transform,opacity}
.cam .layer{position:absolute;left:0;top:0;width:100%;height:100%;display:block;user-select:none;pointer-events:none;will-change:transform,opacity;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.cam .city{transform-origin:0 0;-webkit-mask:none;mask:none;transition:opacity .2s linear}
.cam .solid,.cam .xray,.cam .front{-webkit-mask:none;mask:none;transition:none}
.cam2{z-index:1;pointer-events:none}
/* the GPU-drawn layers (app.js); once they are up, the <img> layers stand down */
.gl{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.stage.gl-on .cam{display:none}
.ground{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ground .gridln{fill:none;stroke:#9fb0c4;stroke-width:.8px;vector-effect:non-scaling-stroke;opacity:.32}
.hud{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.tags{position:absolute;inset:0;pointer-events:none;z-index:2}
.fog{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,rgba(246,248,251,.85) 0%,rgba(246,248,251,0) 16%),radial-gradient(62% 58% at 0% 14%,rgba(242,245,248,.94) 0%,rgba(242,245,248,.6) 45%,rgba(242,245,248,0) 75%),radial-gradient(44% 42% at 0% 100%,rgba(242,245,248,.9) 0%,rgba(242,245,248,.5) 45%,rgba(242,245,248,0) 75%)}
.dim{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity 1.2s var(--ease);background:radial-gradient(110% 90% at 60% 45%,rgba(29,42,61,.16) 0%,rgba(29,42,61,.4) 100%);mix-blend-mode:multiply}
.stage[data-beat="7"] .dim{opacity:1}
.col{position:absolute;z-index:3;left:max(24px,calc((100vw - 1160px)/2));top:0;bottom:0;width:min(620px,calc(100vw - 48px));pointer-events:none;--wt:clamp(104px,15vh,150px)}
.beat{position:absolute;left:0;right:0;top:var(--wt);opacity:0;transition:opacity .5s var(--ease);pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.beat.on{opacity:1;pointer-events:auto;transition-delay:.35s}
.card{border-radius:var(--r-lg);padding:30px 32px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.card.wide{max-width:540px}
.hero{display:flex;flex-direction:column;gap:22px;width:min(720px,calc(100vw - 48px))}
.beat.hero{top:50%;transform:translateY(-50%)}
.hero .lede{max-width:52ch}
.statement-wrap{display:flex;flex-direction:column;gap:22px;width:min(820px,calc(100vw - 48px))}
.statement-wrap .lede{color:var(--ink)}
.scrollcue{position:absolute;z-index:3;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:700 10.5px var(--label);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);transition:opacity .6s}
.scrollcue span{width:1.5px;height:42px;background:linear-gradient(var(--sand-ink),transparent);animation:cue 2.2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.stage:not([data-beat="0"]) .scrollcue{opacity:0}

@keyframes pulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.4);opacity:0}}

/* panels */
.systems{position:absolute;z-index:4;left:max(24px,calc((100vw - 1160px)/2));bottom:28px;width:min(500px,calc(100vw - 48px));border-radius:var(--r-lg);padding:16px 18px 10px;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.systems.on{opacity:1;transform:none}
.sys-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.sys-h b{font:400 20px var(--display);letter-spacing:-.01em;transition:color .6s}
.systems ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.systems li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(139,134,129,.16);font-size:13.5px;color:var(--ink-2)}
.systems li em{font:700 10px var(--label);letter-spacing:.12em;text-transform:uppercase;font-style:normal;padding:4px 9px;border-radius:99px;background:var(--ice);color:var(--ice-ink);transition:background .5s,color .5s}
.systems li.bad em{background:var(--threat-bg);color:var(--threat-ink)}
.systems li.bad span{color:var(--ink)}
.systems.hot .sys-h b{color:var(--threat-ink)}
.steps{position:absolute;z-index:4;left:50%;top:92px;transform:translateX(-50%);display:flex;gap:4px;padding:6px;border-radius:var(--r-md);opacity:0;transition:opacity .6s}
.steps.on{opacity:1}
.steps div{display:flex;gap:8px;align-items:center;padding:8px 14px;border-radius:var(--r-sm);font:400 14px var(--display);color:var(--ink-3);transition:background .4s,color .4s,box-shadow .4s}
.steps div i{font:700 10px var(--label);letter-spacing:.1em;font-style:normal;color:var(--sand)}
.steps div.done{color:var(--ink-2)}
.steps div.cur{background:#fff;color:var(--ink);box-shadow:0 6px 14px -8px rgba(74,52,28,.35)}
.steps div.cur i{color:var(--sand-ink)}
.steps__bar{position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,#9fd3f1,#d1b794);transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease)}
.console{position:absolute;z-index:4;left:max(24px,calc((100vw - 1160px)/2));bottom:28px;width:min(500px,calc(100vw - 48px));border-radius:var(--r-lg);overflow:hidden;background:rgba(2,7,15,.92);box-shadow:0 30px 70px -30px rgba(2,7,15,.6),0 0 0 1px rgba(255,255,255,.06);color:#c9d6e6;opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.console.on{opacity:1;transform:none}
.console__h{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.07);font:400 12px var(--mono);color:#8796ab}
.console__h span{display:flex;gap:6px}.console__h span i{width:9px;height:9px;border-radius:50%;background:#2a3446}
.console__h em{margin-left:auto;font-style:normal;font:700 10px var(--label);letter-spacing:.14em;padding:4px 9px;border-radius:99px;background:rgba(118,182,234,.14);color:#9fd3f1}
.console__h em.alert{background:rgba(214,67,79,.18);color:#ff9aa2}
.console__h em.ok{background:rgba(110,200,150,.16);color:#9fe0b9}
.console__b{margin:0;padding:14px 16px 18px;height:clamp(130px,calc(100vh - 560px),250px);overflow:hidden;font:400 12.2px/1.75 var(--mono);white-space:pre-wrap;word-break:break-word}
.console__b .l{display:block;opacity:0;transform:translateY(4px);animation:line .35s var(--ease) forwards}
.console__b .c{color:#9fd3f1}.console__b .t{color:#6f7d91}.console__b .r{color:#ff8f98}.console__b .g{color:#9fe0b9}.console__b .s{color:#d1b794}
.console__b .cursor{display:inline-block;width:7px;height:14px;background:#9fd3f1;vertical-align:-2px;animation:blink 1s steps(2,end) infinite}
@keyframes line{to{opacity:1;transform:none}}

/* tags pinned to the world (HTML, positioned every frame) */
.tag{position:absolute;left:0;top:0;opacity:0;transition:opacity .5s var(--ease);will-change:transform}
.tag.on{opacity:1}
/* staggered tags wait to come in, but leave with their scene */
.tag:not(.on){transition-delay:0s!important}
.tag i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff;border:1.5px solid var(--sand-ink);box-sizing:border-box}
.tag svg{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}
.tag svg line{stroke:var(--sand-ink);stroke-width:1}
.tag b{position:absolute;white-space:nowrap;font:700 10.5px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:7px 10px;border-radius:6px;background:rgba(255,255,255,.92);box-shadow:0 6px 16px -8px rgba(29,42,61,.35);border-left:2px solid var(--sand-ink)}
.tag.red i{border-color:var(--threat)}.tag.red svg line{stroke:var(--threat)}.tag.red b{color:var(--threat-ink);border-left-color:var(--threat)}
.tag.blue i{border-color:var(--sig-ink)}.tag.blue svg line{stroke:var(--sig-ink)}.tag.blue b{color:var(--ice-ink);border-left-color:var(--sig)}

/* ---------------------------------------------------------- hud (live world overlay, drawn in screen space) */
.hud .g{opacity:0;transition:opacity .7s var(--ease)}
.hud .g.on{opacity:1}
.hud .ln{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:none;stroke-width:calc(var(--sw,1.6px) / var(--k,1))}
.hud .net{stroke:#8fc0ea;--sw:1.3px;stroke-dasharray:1.5 7;animation:dash 2.4s linear infinite;opacity:.9}
.hud .cable{stroke:#76b6ea;--sw:1.4px;stroke-dasharray:1.5 6;animation:dash 1.8s linear infinite}
@keyframes dash{to{stroke-dashoffset:-34}}
.hud .red{stroke:var(--threat);--sw:1.9px}
.hud .redh{stroke:var(--threat);--sw:8px;opacity:.14}
.hud .blue{stroke:#5fa5e6;--sw:2px}
.hud .blueh{stroke:#76b6ea;--sw:9px;opacity:.22}
.hud .draw{stroke-dasharray:var(--l) var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset var(--dur,1.4s) var(--ease-io) var(--dl,0s)}
.hud .draw.on{stroke-dashoffset:0}
.hud .comet{stroke:#ff9aa3;--sw:2.8px;stroke-dasharray:14 4000;stroke-dashoffset:14;opacity:0;transition:opacity .4s}
.hud .comet.on{opacity:1;animation:comet var(--cd,2.2s) cubic-bezier(.4,0,.6,1) var(--dl,0s) infinite}
.hud .comet.bl{stroke:#e9f6ff}
.hud .trace{stroke:var(--sig-ink);--sw:1.3px;stroke-dasharray:4 5;animation:dash 1.6s linear infinite}
.hud .pulse{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:pulse 2.2s var(--ease) infinite}
.hud .pr{stroke:var(--threat)}.hud .pb{stroke:#5fa5e6}
.hud .bloom{fill:url(#bloomg);opacity:0;transform-box:fill-box;transform-origin:center}
.hud .bloom.go{animation:bloom 1.6s cubic-bezier(.2,.7,.2,1) var(--dl,0s) both}
@keyframes bloom{0%{opacity:0;transform:scale(.2)}25%{opacity:1}100%{opacity:0;transform:scale(2.4)}}
.hud .ind{stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .6s}
.hud .ind.ok{fill:#5fa5e6}.hud .ind.bad{fill:var(--threat)}
.hud .indh{transition:fill .6s;opacity:.3}
.hud .indh.ok{fill:#76b6ea}.hud .indh.bad{fill:var(--threat)}
.hud .panelq{fill:#fff1cf;stroke:#efd59f;stroke-width:.6;vector-effect:non-scaling-stroke;transition:opacity .5s var(--ease) var(--dl,0s)}
.hud .glowq{fill:#ffd88f;opacity:.07;transition:opacity .5s var(--ease) var(--dl,0s)}
.hud .off{opacity:0!important}
.hud .fan path{fill:#fff;stroke:#6b7a8f;stroke-width:.5;vector-effect:non-scaling-stroke}
.hud .fan circle{fill:#e2e7ed;stroke:#6b7a8f;stroke-width:.5;vector-effect:non-scaling-stroke}
.hud .cell path{fill:rgba(118,182,234,.13);stroke:#5d9be0;stroke-width:1.3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hud .cut{stroke:var(--threat);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hud .env{transform-box:fill-box;transform-origin:50% 100%;transform:scale(.001);opacity:0;transition:transform 1.5s cubic-bezier(.2,.9,.25,1.12) var(--dl,0s),opacity .6s var(--dl,0s)}
.hud .env.on{transform:none;opacity:1}
.hud .env .fill{fill:var(--c);fill-opacity:.08}
.hud .env .rim{fill:none;stroke:var(--c);stroke-width:1.4px;vector-effect:non-scaling-stroke}
.hud .env .lat{fill:none;stroke:var(--c);stroke-width:.8px;opacity:.45;stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
.hud .env .base{fill:none;stroke:var(--c);stroke-width:.9px;opacity:.5;vector-effect:non-scaling-stroke}
.hud .glance{fill:none;stroke:#76b6ea;stroke-width:2;opacity:0;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:glance 2.8s ease-out infinite}
@keyframes glance{0%,64%{opacity:0;transform:scale(.3)}70%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
.hud .streak{stroke:var(--threat);--sw:2.2px;stroke-dasharray:60 4000;stroke-dashoffset:60;animation:streak 2.8s cubic-bezier(.5,0,.6,1) infinite}
@keyframes streak{0%{stroke-dashoffset:60}70%,100%{stroke-dashoffset:calc(var(--l) * -1)}}
.hud .hull{opacity:0;transition:opacity 1s var(--ease) var(--dl,0s)}
.hud .hull.on{opacity:1}
.hud .hull.red{fill:url(#hullR);mix-blend-mode:multiply;stroke:#d6434f;stroke-opacity:.35;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{fill-opacity:.7}}
.hud .hull.blue{fill:url(#hullB);stroke:#5fa5e6;stroke-opacity:.55;stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hud .rim{--sw:2px;stroke:#5fa5e6;stroke-linejoin:round}
.hud .core{opacity:0;transition:opacity .6s var(--ease) var(--dl,0s)}
.hud .core.on{opacity:1}
.hud .coreglow{fill:url(#coreg);transform-box:fill-box;transform-origin:center;animation:corebeat 1.6s ease-in-out infinite}
@keyframes corebeat{50%{transform:scale(.7);opacity:.7}}
.hud .coredot{fill:#d6434f;stroke:#fff;stroke-width:1.4;vector-effect:non-scaling-stroke}
.hud .thru{--sw:1.4px;stroke-dasharray:3 4;opacity:.85}
.hud .origin .odot{fill:#fff;stroke:var(--threat);stroke-width:2;vector-effect:non-scaling-stroke}
.hud .origin .oglow{fill:url(#coreg);opacity:.5;transform-box:fill-box;transform-origin:center;animation:corebeat 1.8s ease-in-out infinite}
.hud .packet{stroke:#e9f6ff;--sw:3px;stroke-dasharray:6 400;animation:packet 1.35s linear infinite}
@keyframes packet{from{stroke-dashoffset:6}to{stroke-dashoffset:-120}}
.hud .spark{fill:none;stroke:#76b6ea;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;animation:sparkout 2.8s ease-out infinite}
@keyframes sparkout{0%,66%{opacity:0;transform:scale(.3)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.hud .vital{fill:none;stroke:#76b6ea;stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:0}
.hud .vital.go{animation:vital 2.4s cubic-bezier(.3,.6,.3,1) var(--dl,0s) 2}
@keyframes vital{0%{opacity:.9}100%{opacity:0}}

/* ---------------------------------------------------------- flowing sections */
.flow{position:relative;z-index:5;padding:clamp(90px,10vw,140px) 20px 0}
.wrap{max-width:1160px;margin:0 auto}
.head{display:flex;flex-direction:column;gap:18px;margin-bottom:40px;max-width:820px}
.grid{display:grid;gap:16px}.g3{grid-template-columns:repeat(3,1fr)}
.grid .card h4{margin-top:4px}
.process{display:grid;grid-template-columns:repeat(5,1fr);border-radius:var(--r-lg);margin-top:16px}
.process>div{padding:22px 20px;display:flex;flex-direction:column;gap:4px}
.process>div+div{border-left:1px solid rgba(139,134,129,.18)}
.process .n{font:700 10.5px var(--label);letter-spacing:.14em;color:var(--sand-ink)}
.process b{font:400 20px var(--display);letter-spacing:-.01em}
.process p{font-size:13.5px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.grid .reveal:nth-child(2){transition-delay:.08s}.grid .reveal:nth-child(3){transition-delay:.16s}
.panel{border-radius:var(--r-xl);padding:clamp(28px,5vw,64px)}
.cta{position:relative;overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;
  background:radial-gradient(70% 90% at 80% 10%,rgba(211,238,252,.75),transparent 60%),radial-gradient(60% 70% at 0% 100%,rgba(209,183,148,.28),transparent 65%),#f4f3f1;box-shadow:var(--shadow)}
.cta__mark{position:absolute;right:7%;top:50%;width:min(28%,280px);transform:translateY(-50%);filter:drop-shadow(0 30px 40px rgba(74,52,28,.18))}
.cta h2{font-size:clamp(36px,4.6vw,60px)}
.foot{position:relative;z-index:5;max-width:1160px;margin:90px auto 0;padding:28px 20px 40px;display:flex;align-items:center;gap:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.foot img{height:20px}
.foot nav{margin-left:auto;display:flex;gap:20px}.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}

/* ---------------------------------------------------------- small screens */
@media (max-width:900px){
  .nav nav{display:none}
  .nav .btn{margin-left:auto}
  .col{left:16px;right:16px;width:auto}
  .feats li{padding:8px 10px}.feats span{font-size:12px}
  .gauge{top:80px;bottom:auto}
  .card{padding:20px 20px 22px;gap:10px}
  .card .ticks{display:none}
  .hero{gap:14px}
  .hero .stats,.scrollcue{display:none}
  .hero h1 .sub{margin-bottom:8px}
  .systems{left:16px;right:16px;top:80px;bottom:auto;width:auto;padding:10px 14px 6px}
  .systems li{padding:5px 0;font-size:12px}
  .systems li:nth-child(n+4){display:none}
  .console{top:126px;bottom:auto;left:16px;right:16px;width:auto}
  .console__b{height:84px;font-size:10.5px;padding:10px 12px}
  .steps{top:78px;left:16px;right:16px;transform:none;overflow:auto}
  .steps div{padding:6px 9px;font-size:12px}
  .tag b{font-size:9px;padding:5px 7px}
  .g3,.process{grid-template-columns:1fr}
  .process>div+div{border-left:0;border-top:1px solid rgba(139,134,129,.18)}
  .cta__mark{opacity:.2}
  .foot{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

.hud .dev{opacity:0;transform:translateY(-34px);transition:opacity .6s var(--ease),transform 1.1s cubic-bezier(.2,.9,.25,1.1)}
.hud .dev.on{opacity:1;transform:none}
.hud,.tags{transition:opacity .9s var(--ease)}

/* impact: a flash and a burst of sparks where each shot lands, then a small glow that stays */
.hud .impact .flash{fill:url(#coreg);opacity:0;transform-box:fill-box;transform-origin:center}
.hud .impact .rays path{fill:none;stroke:#ff7782;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0}
.hud .impact.go .flash{animation:flash 1.1s cubic-bezier(.2,.7,.3,1) calc(1.32s + var(--dl,0s)) both}
.hud .impact.go .rays path{animation:rays .8s cubic-bezier(.15,.8,.3,1) calc(1.32s + var(--dl,0s)) both}
@keyframes flash{0%{opacity:0;transform:scale(.15)}12%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes rays{0%{opacity:0;stroke-dasharray:0 60}15%{opacity:1}100%{opacity:0;stroke-dasharray:14 60;stroke-dashoffset:-30}}
.hud .core{transition-delay:1.4s}
/* vitality */
.hud .mote{opacity:0;transform-box:fill-box;transform-origin:center}
.hud .mote.bl{fill:#76b6ea}.hud .mote.gr{fill:#7ccf9e}
.hud .motes.on .mote{animation:mote 2.6s ease-out infinite}
@keyframes mote{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:.9}100%{opacity:0;transform:translateY(-38px) scale(1)}}
.hud .ind.good{fill:#4fbf85}.hud .indh.good{fill:#7ccf9e}
.hud .vflow{fill:none;stroke:#7ccf9e;--sw:1.8px;stroke-dasharray:3 12;animation:dash 2.2s linear infinite}

/* ---------------------------------------------------------- scene type, the way the film sets it */
.beat h2{font-size:clamp(34px,3.9vw,58px);line-height:1.06;letter-spacing:-.025em}
.beat>p{font-size:clamp(15px,1.15vw,17.5px);max-width:44ch;opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.beat.on>p{opacity:1;transform:none;transition-delay:1.05s}
.kicker{display:inline-flex;align-items:center;gap:12px;font:700 11px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--sig-ink);opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.kicker.red{color:var(--threat-ink)}.kicker.blue{color:var(--sig-ink)}.kicker.green{color:#2f8a5b}
.beat.on .kicker{opacity:1;transform:none;transition-delay:.4s}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;transform:translateY(108%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.beat.on .w>span{transform:none;transition-delay:calc(.45s + var(--i) * 70ms)}
.mega{font-size:clamp(48px,6.2vw,96px)!important;line-height:.95!important;letter-spacing:.06em!important;text-transform:uppercase;font-weight:300}
.word .w>span{transition-duration:1.2s}
.hero{width:min(720px,calc(100vw - 48px));gap:22px}
.feats{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px;max-width:480px}
.feats li{display:flex;gap:14px;align-items:center;padding:12px 16px 12px 12px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--glass-rim);box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.beat.on .feats li{opacity:1;transform:none}
.beat.on .feats li:nth-child(1){transition-delay:1.1s}.beat.on .feats li:nth-child(2){transition-delay:1.25s}.beat.on .feats li:nth-child(3){transition-delay:1.4s}
.feats svg{flex:none;width:38px;height:38px;padding:8px;border-radius:11px;color:var(--sig-ink);background:linear-gradient(135deg,#e6f5fd,#fff);box-shadow:inset 0 0 0 1px rgba(95,165,230,.25)}
.feats span{display:flex;flex-direction:column;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.feats b{font:400 15.5px var(--display);color:var(--ink);letter-spacing:-.01em}
.gauge{position:absolute;z-index:4;right:max(24px,calc((100vw - 1160px)/2));bottom:84px;display:flex;gap:16px;align-items:baseline;padding:12px 18px;border-radius:var(--r-md);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.gauge.on{opacity:1;transform:none}
.gauge b{font:300 26px var(--display);color:var(--threat-ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* tracers */
.hud .tracer .tail{stroke-linecap:round;stroke-width:calc(5px / var(--k,1))}
.hud .tracer .headcore{fill:#fff}
.hud .trail{fill:none;--sw:1.1px;opacity:0;transition:opacity .9s var(--ease)}
.hud .trail.red{stroke:#d6434f}
.hud .trail.on{opacity:.42}
.hud .burst .flash{opacity:0;transform-box:fill-box;transform-origin:center}
.hud .burst.red .flash{fill:url(#coreg)}.hud .burst.blue .flash{fill:url(#headb)}
.hud .burst .rays path{fill:none;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0}
.hud .burst.red .rays path{stroke:#ff6b76}.hud .burst.blue .rays path{stroke:#76b6ea}
.hud .burst.go .flash{animation:flash 1s cubic-bezier(.2,.7,.3,1) both}
.hud .burst.go .rays path{animation:rays .75s cubic-bezier(.15,.8,.3,1) both}
@keyframes flash{0%{opacity:0;transform:scale(.15)}12%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes rays{0%{opacity:0;stroke-dasharray:0 60}15%{opacity:1}100%{opacity:0;stroke-dasharray:14 60;stroke-dashoffset:-30}}
.hud .core{opacity:0;transition:opacity .5s var(--ease)}
.hud .core.on{opacity:1}
.hud .env.hit .rim{animation:rimhit .9s ease-out}
@keyframes rimhit{0%{stroke-width:4px;stroke:#d3eefc}100%{stroke-width:1.4px}}
/* vitality */
.hud .wake{fill:url(#vitalg);opacity:0;transform-box:fill-box;transform-origin:center}
.hud .wake.go{animation:wake 2.2s cubic-bezier(.2,.7,.2,1) var(--dl,0s) both}
@keyframes wake{0%{opacity:0;transform:scale(.25)}30%{opacity:.95}100%{opacity:0;transform:scale(1.8)}}
.hud .motes.on .mote.big{animation:motebig 3.2s ease-out infinite}
@keyframes motebig{0%{opacity:0;transform:translateY(0)}20%{opacity:.85}100%{opacity:0;transform:translateY(-110px)}}
.hud .vflow.city{--sw:2px}
.tag.green i{border-color:#4fbf85}.tag.green svg line{stroke:#4fbf85}.tag.green b{color:#2f8a5b;border-left-color:#4fbf85}

/* ---------------------------------------------------------- brand + readout, top left */
.brand{position:absolute;z-index:5;top:26px;left:max(24px,calc((100vw - 1160px)/2));display:block}
.brand img{height:30px;display:block}
.readout{position:absolute;z-index:4;bottom:40px;left:max(24px,calc((100vw - 1160px)/2));width:340px;pointer-events:none;
  --tc:var(--sig-ink);--tl:#5fa5e6;transition:opacity .6s var(--ease)}
.readout[data-tone="ok"]{--tc:var(--sig-ink);--tl:#5fa5e6}
.readout[data-tone="blue"]{--tc:var(--sig-ink);--tl:#5fa5e6}
.readout[data-tone="warn"]{--tc:#b7791f;--tl:#e0a33b}
.readout[data-tone="bad"]{--tc:var(--threat-ink);--tl:#e0505c}
.readout[data-tone="good"]{--tc:#2f8a5b;--tl:#4fbf85}
.ro-h{display:flex;align-items:center;gap:10px;font:700 10.5px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.ro-dot{width:7px;height:7px;border-radius:50%;background:var(--tl);box-shadow:0 0 0 4px color-mix(in srgb,var(--tl) 20%,transparent);animation:ro-blink 1.6s ease-in-out infinite;transition:background .5s}
@keyframes ro-blink{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--tl) 0%,transparent)}}
.ro-t{font-family:var(--mono);font-weight:500;letter-spacing:.06em;font-size:11px;color:var(--ink)}
.ro-h em{margin-left:auto;font-style:normal;font:700 9.5px/1 var(--label);letter-spacing:.14em;padding:5px 8px;border-radius:99px;color:var(--tc);background:color-mix(in srgb,var(--tl) 14%,transparent);transition:color .5s,background .5s}
.ro-wave{display:block;width:100%;height:60px;margin:14px 0 6px;overflow:visible}
.ro-base{fill:none;stroke:rgba(139,134,129,.22);stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.ro-line{fill:none;stroke:var(--tl);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke .6s}
.ro-head{fill:#fff;stroke:var(--tl);stroke-width:1.6;vector-effect:non-scaling-stroke}
.ro-rows{margin:0;display:grid}
.ro-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-top:1px solid rgba(139,134,129,.16)}
.ro-row dt{font:400 11.5px var(--mono);color:var(--ink-3);letter-spacing:.02em}
.ro-row dd{margin:0;font:500 12.5px var(--mono);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.readout.swap .ro-row{animation:ro-in .7s var(--ease) both;animation-delay:calc(.15s + var(--i,0) * 90ms)}
@keyframes ro-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.readout.hot .ro-row:last-child dd{color:var(--threat-ink)}
.stage[data-beat="0"] .readout,.stage[data-beat="7"] .readout{opacity:0}
.gauge{display:none}
.hud .tracer.faint .tail{stroke-width:calc(2px / var(--k,1));opacity:.6}
.hud .burst.faint .flash{opacity:0}
.hud .burst.faint.go .flash{animation:flashfaint 1.2s ease-out both}
@keyframes flashfaint{0%{opacity:0;transform:scale(.3)}20%{opacity:.35;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}
.hud .burst.faint .rays{display:none}
.hud .env.hit .rim{animation:rimhit2 1.2s ease-out}
@keyframes rimhit2{0%{stroke-width:2.2px;stroke:#bfe2fb}100%{stroke-width:1.4px}}

/* ---------------------------------------------------------- built for critical sites */
#who .head{margin-bottom:34px}
#who .kicker{opacity:1;transform:none}
.role{position:relative;gap:12px;padding:30px 30px 32px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.role:hover{transform:translateY(-3px)}
.ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--sig-ink);background:linear-gradient(135deg,#e6f5fd,#fff);box-shadow:inset 0 0 0 1px rgba(95,165,230,.25),0 10px 22px -14px rgba(47,102,136,.45);margin-bottom:6px}
.ico svg{width:24px;height:24px}
ol.process{list-style:none;margin:16px 0 0;padding:0;position:relative}
ol.process li{position:relative;padding:24px 20px 22px;display:flex;flex-direction:column;gap:4px}
ol.process li+li{border-left:1px solid rgba(139,134,129,.18)}
.pi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--sig-ink);background:rgba(211,238,252,.6);margin-bottom:10px}
.pi svg{width:19px;height:19px}
ol.process li:nth-child(3) .pi,ol.process li:nth-child(4) .pi{color:#2f8a5b;background:rgba(124,207,158,.18)}
.foot{margin-top:110px}
@media (max-width:900px){
  .readout{width:min(300px,calc(100vw - 32px));left:16px}
  .ro-wave{height:36px;margin:8px 0 2px}
  .ro-row{padding:5px 0}
  ol.process li+li{border-left:0;border-top:1px solid rgba(139,134,129,.18)}
}

/* ---------------------------------------------------------- the statement: a timeline, top left */
.stage[data-beat="7"] .dim{opacity:.7}
.statement-wrap .lede{opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.statement-wrap.on .lede{opacity:1;transform:none;transition-delay:1.2s}
.timeline{position:absolute;z-index:4;bottom:40px;left:max(24px,calc((100vw - 1160px)/2));width:360px;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);--tl:#e0505c;--tc:var(--threat-ink)}
.timeline.on{opacity:1}
.timeline .ro-h em{margin-left:auto;font-style:normal;font:700 9.5px/1 var(--label);letter-spacing:.14em;padding:5px 8px;border-radius:99px;color:var(--threat-ink);background:rgba(214,67,79,.12)}
.timeline ol{list-style:none;margin:16px 0 0;padding:0 0 0 18px;position:relative}
.timeline ol::before{content:"";position:absolute;left:3px;top:6px;bottom:8px;width:1px;background:linear-gradient(rgba(214,67,79,.5),rgba(214,67,79,.15));transform-origin:top;transform:scaleY(0);transition:transform 1.6s var(--ease)}
.timeline.on ol::before{transform:none;transition-delay:.4s}
.timeline li{position:relative;display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid rgba(255,255,255,.4);
  opacity:0;transform:translateX(-6px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.timeline li::before{content:"";position:absolute;left:-18px;top:12px;width:7px;height:7px;border-radius:50%;background:#fff;border:1.5px solid #d6434f;box-sizing:border-box}
.timeline li.end::before{background:#d6434f}
.timeline.on li{opacity:1;transform:none}
.timeline.on li:nth-child(1){transition-delay:.5s}.timeline.on li:nth-child(2){transition-delay:.75s}.timeline.on li:nth-child(3){transition-delay:1s}
.timeline.on li:nth-child(4){transition-delay:1.25s}.timeline.on li:nth-child(5){transition-delay:1.5s}.timeline.on li:nth-child(6){transition-delay:2s}
.timeline time{font:400 11px var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.timeline span{font:500 12px var(--mono);color:var(--ink)}
.timeline i{font:400 10.5px var(--mono);font-style:normal;color:var(--ink-2)}
.timeline li.end span,.timeline li.end i{color:var(--threat-ink)}

/* ---------------------------------------------------------- the close-up */
.stage.close .fog{background:linear-gradient(180deg,rgba(246,248,251,.85) 0%,rgba(246,248,251,0) 16%),radial-gradient(72% 70% at 0% 20%,rgba(242,245,248,.97) 0%,rgba(242,245,248,.7) 45%,rgba(242,245,248,0) 78%),radial-gradient(44% 42% at 0% 100%,rgba(242,245,248,.92) 0%,rgba(242,245,248,.5) 45%,rgba(242,245,248,0) 75%)}
/* short screens: the close-up's feature list needs the room the readout would take */
@media (min-width:900px) and (max-height:780px){.stage.close .readout{opacity:0}}
.tag.fine b{font-size:10px;padding:6px 9px;background:rgba(255,255,255,.95)}
.tag.fine{transition-delay:.9s}
.stage.close .hud .pulse.pb{animation-duration:2.6s}

/* embedded in another site (Framer): just the story */
.embed #who,.embed .foot,.embed .nembed{display:none!important}
html.embed{scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(59,74,94,.32) transparent}
html.embed:not(.live){overflow:hidden}
html.embed body{overflow:visible}

/* ---------------------------------------------------------- built for critical sites, in the brand's warm icon style */
#who{--warm:#fffdfb;--warm-2:#fdf8f3;--tile-a:#f6ede4;--tile-b:#fefbf8;--taupe:#a8988a}
#who .card.role{background:linear-gradient(180deg,#fff 0%,var(--warm) 100%);border:1px solid rgba(232,224,215,.75);box-shadow:0 30px 60px -42px rgba(120,96,70,.26),0 2px 6px -2px rgba(130,92,52,.06),inset 0 1px 0 #fff}
#who .ico{width:58px;height:58px;border-radius:15px;color:var(--taupe);background:linear-gradient(140deg,var(--tile-a) 0%,var(--tile-b) 100%);
  box-shadow:0 14px 26px -16px rgba(140,108,76,.36),0 2px 4px -2px rgba(140,108,76,.1),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(150,108,66,.08)}
#who .ico svg{width:30px;height:30px}
#who ol.process{background:linear-gradient(180deg,#fff 0%,var(--warm) 100%);border:1px solid rgba(232,224,215,.75);box-shadow:0 30px 60px -42px rgba(120,96,70,.24),inset 0 1px 0 #fff}
#who ol.process li+li{border-left-color:rgba(214,200,186,.4)}
#who .pi,#who ol.process li:nth-child(3) .pi,#who ol.process li:nth-child(4) .pi{width:42px;height:42px;border-radius:12px;color:var(--taupe);background:linear-gradient(140deg,var(--tile-a) 0%,var(--tile-b) 100%);
  box-shadow:0 10px 20px -12px rgba(150,108,66,.45),inset 0 1px 0 rgba(255,255,255,.8)}
#who .pi svg{width:22px;height:22px}
#who .label{color:var(--sand-ink)}
#who .kicker.blue{color:var(--sand-ink)}

/* close-up: shallow depth of field, the device is the only sharp thing. The world crossfades to
   pre-blurred copies of itself (site/build/soft.mjs) rather than blurring live, which was slow to zoom */
.cam .layer .soft{opacity:0;transition:opacity .9s var(--ease)}
.cam .layer img:not(.soft){transition:opacity .9s var(--ease)}
.stage.close .cam .layer .soft{opacity:1}
.stage.close .cam .layer img:not(.soft){opacity:0}
.stage.close .ground{opacity:.4;transition:opacity .9s}

.topcta{position:absolute;z-index:5;top:20px;right:max(24px,calc((100vw - 1160px)/2))}
.stage[data-beat="0"] .topcta{opacity:0;pointer-events:none}
.topcta{transition:opacity .5s var(--ease)}
.brand{position:absolute;z-index:5;top:26px;left:max(24px,calc((100vw - 1160px)/2))}

/* ---------------------------------------------------------- phones: panel on top, scene in the middle, words below */
@media (max-width:899px){
  .brand{top:14px;left:16px}.brand img{height:22px}
  .topcta{top:8px;right:12px;padding:9px 13px;font-size:13px}
  .readout,.timeline{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));left:16px;right:16px;width:auto}
  .ro-h{gap:8px}.ro-t{font-size:10px}.ro-h em{font-size:8.5px;padding:4px 6px}
  .ro-wave{height:26px;margin:6px 0 2px}
  .ro-row{padding:3px 0}.ro-row dt{font-size:10px}.ro-row dd{font-size:10.5px}
  .timeline ol{margin-top:8px}
  .timeline li{padding:3px 0;grid-template-columns:52px 1fr auto;gap:6px}
  .timeline li::before{top:8px}
  .timeline time,.timeline i{font-size:9.5px}.timeline span{font-size:10.5px}
  .tags,.scrollcue{display:none}
  .col{left:16px;right:16px;width:auto;padding:0;--wt:54px}
  .beat.hero{top:var(--wt);transform:none}
  .fog{background:linear-gradient(180deg,rgba(246,248,251,.94) 0%,rgba(246,248,251,.6) 22%,rgba(246,248,251,0) 38%),linear-gradient(0deg,rgba(242,245,248,.92) 0%,rgba(242,245,248,0) 20%)}
  .beat{gap:10px}
  .beat h2{font-size:clamp(25px,7.2vw,32px);line-height:1.1}
  .beat>p{font-size:14px;line-height:1.55}
  .kicker{font-size:10px}
  .mega{font-size:clamp(36px,10.5vw,48px)!important;letter-spacing:.04em!important}
  .statement.big{font-size:clamp(28px,8.4vw,38px)}
  .statement-wrap{width:auto;gap:12px}
  .hero{width:auto;gap:12px}
  h1{font-size:clamp(31px,8.8vw,40px)}
  h1 .sub{margin-bottom:6px}
  .hero .lede{font-size:14px}
  .hero .row .btn{padding:12px 16px;font-size:14px}
  .feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:none;margin-top:4px}
  .feats li{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 10px 12px}
  .feats li span{font-size:0;line-height:0}
  .feats b{font-size:12px;line-height:1.25}
  .feats svg{width:32px;height:32px;padding:6px}
  .stage.close .fog{background:linear-gradient(180deg,rgba(246,248,251,.96) 0%,rgba(246,248,251,.7) 34%,rgba(246,248,251,0) 52%),linear-gradient(0deg,rgba(242,245,248,.92) 0%,rgba(242,245,248,0) 22%)}
}

/* ---------------------------------------------------------- tablets held upright: stacked, at desktop type sizes */
@media (min-width:900px) and (max-aspect-ratio:10/11){
  .beat.hero{top:var(--wt);transform:none}
  .fog{background:linear-gradient(180deg,rgba(246,248,251,.94) 0%,rgba(246,248,251,.6) 18%,rgba(246,248,251,0) 30%),linear-gradient(0deg,rgba(242,245,248,.92) 0%,rgba(242,245,248,0) 18%)}
  .stage.close .fog{background:linear-gradient(180deg,rgba(246,248,251,.96) 0%,rgba(246,248,251,.7) 26%,rgba(246,248,251,0) 42%),linear-gradient(0deg,rgba(242,245,248,.92) 0%,rgba(242,245,248,0) 20%)}
}

/* ---------------------------------------------------------- hidden means hidden
   Faded-out overlay groups, domes, the device and tags are hidden outright once their fade ends. At zero
   opacity they were still restyled and repainted every frame, the main cost on slower phones. */
.hud .g{visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
.hud .g.on{visibility:visible;transition:opacity .7s var(--ease),visibility 0s}
.hud .core{visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.hud .core.on{visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
.hud .dev{visibility:hidden;transition:opacity .6s var(--ease),transform 1.1s cubic-bezier(.2,.9,.25,1.1),visibility 0s 1.1s}
.hud .dev.on{visibility:visible;transition:opacity .6s var(--ease),transform 1.1s cubic-bezier(.2,.9,.25,1.1),visibility 0s}
.hud .env{visibility:hidden;transition:transform 1.5s cubic-bezier(.2,.9,.25,1.12) var(--dl,0s),opacity .6s var(--dl,0s),visibility 0s calc(var(--dl,0s) + .6s)}
.hud .env.on{visibility:visible;transition:transform 1.5s cubic-bezier(.2,.9,.25,1.12) var(--dl,0s),opacity .6s var(--dl,0s),visibility 0s}
.tag{visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.tag.on{visibility:visible}
.tag:not(.on){transition-delay:0s,.5s!important}