/* =========================================================================================
   Biru Labs. "Say it back": the site behaves like a conversation.
   Fonts are self-hosted (no third-party requests). Licences: SIL Open Font License 1.1.
   Modes (set on <html> by assets/js/boot.js):
     no class      JavaScript off: everything static and visible
     .js .static   JavaScript on, but reduced motion or no WebGL: static layout, still interactive
     .js .anim     full experience: WebGL orb + scroll choreography. Hidden "before" states live ONLY here.
   ========================================================================================= */
@font-face{font-family:'Anybody';src:url('../fonts/anybody-var.woff2') format('woff2');font-weight:100 900;font-stretch:50% 150%;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-sans-var.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  /* colour: every colour is a blue, plus the signal cyan (WapasBol's voice) and one bug red */
  --biru:#1B3BFF;        /* the signature field */
  --biru-hi:#3352FF;
  --biru-lo:#1230E6;
  --navy:#060C3A;
  --night:#040826;
  --ink:#0A1033;
  --ink-2:#465080;
  --ice:#EEF2FF;
  --paper:#F8FAFF;
  --line-l:#D5DCFF;      /* hairlines on light */
  --signal:#7DE7FF;      /* the voice that answers */
  --bug:#FF6B85;
  /* type */
  --display:'Anybody','Arial Narrow',Arial,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  /* space */
  --pad:max(clamp(1.25rem,4.2vw,4.5rem),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --navh:4.25rem;
  --pillw:190px;
  --maxw:86rem;
  /* motion: a voice envelope is a fast attack and a slow release */
  --ease-voice:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.7,0,.2,1);
  --ring:var(--signal);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-padding-top:5rem;scroll-padding-bottom:3rem}
@media (min-width:1800px){html{font-size:112.5%}}
@media (min-width:2300px){html{font-size:137.5%}}
@media (min-width:3000px){html{font-size:162.5%}}
body{font-family:var(--body);background:var(--biru);color:#fff;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:6px}
::selection{background:var(--signal);color:var(--ink)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-5rem;z-index:30;padding:.75rem 1.2rem;background:#fff;color:var(--ink);border-radius:99px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:1rem;--ring:var(--ink)}

/* light sections flip text, hairlines and the focus ring */
.on-light{color:var(--ink);--ring:var(--biru)}

/* ---------- type ---------- */
.display,.h1,.h2,.h3{font-family:var(--display);font-weight:800;letter-spacing:-.012em;font-kerning:normal}
.h1{font-size:clamp(3.2rem,min(10vw,17svh),10.5rem);font-stretch:56%;line-height:.86}
.h2{font-size:clamp(2.6rem,min(7.2vw,13svh),7.6rem);font-stretch:58%;line-height:.9;text-wrap:balance}
.h3{font-size:clamp(1.55rem,2.5vw,2.45rem);font-stretch:70%;line-height:1;font-weight:750}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.lede{max-width:34rem;font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.5;opacity:.92}
.mono{font-family:var(--mono)}
.cyan{color:var(--signal)}
.on-light .cyan{color:var(--biru)}
p+p{margin-top:.7em}

/* spoken type: JS splits a heading into words and letters (aria-hidden) and keeps the real text for screen readers */
.say-vis{display:inline}
.say-vis .w{display:inline-block;white-space:nowrap}
.say-vis .c{display:inline-block;font-stretch:var(--cw)}
.say-vis .c.boxed{display:inline-flex;justify-content:center;white-space:pre;overflow:visible}

/* ---------- WebGL canvas, camera dot, fallback orb ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;display:none}
html.anim #gl{display:block}
.cam{position:fixed;z-index:7;top:calc(20px + 15px - 6px);left:calc(50% + var(--pillw)/2 + 14px);width:12px;height:12px;border-radius:50%;background:#050A2E;box-shadow:inset 0 0 0 3px #0E1745;opacity:0;transition:opacity .4s;pointer-events:none}
.cam::after{content:"";position:absolute;left:3.5px;top:3.5px;width:5px;height:5px;border-radius:50%;background:#2E4BFF}
.cam.on{opacity:1}
@media (max-width:819px){.cam{top:calc(16px + 12px - 6px)}}
html:not(.anim) .cam{display:none}
.orb-slot{position:relative;aspect-ratio:1;width:100%;pointer-events:none}
.orb-fallback{position:absolute;inset:4%;width:92%;height:92%;opacity:.95}
html.anim .orb-fallback{display:none}

/* ---------- header ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--navh);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 var(--pad);color:#fff;transition:color .35s,transform .45s var(--ease-voice)}
.nav.nav--hidden{transform:translateY(-110%)}
.nav[data-theme="light"]{color:var(--ink);--ring:var(--biru)}
.nav-bg{position:fixed;top:0;left:0;right:0;height:var(--navh);z-index:19;pointer-events:none;opacity:0;transform:translateY(-100%);background:rgba(6,12,58,.82);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);transition:opacity .3s,transform .45s var(--ease-voice),background-color .3s}
.nav-bg.on{opacity:1;transform:none}
.nav-bg[data-theme="light"]{background:rgba(248,250,255,.86)}
html.nav-open .nav-bg{opacity:0}
.logo{position:relative;z-index:22;display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);font-weight:750;font-stretch:88%;font-size:1.22rem;letter-spacing:-.01em;white-space:nowrap}
.logo-mark{position:relative;flex:none;width:1.05rem;height:1.05rem;border-radius:50%;border:2px solid currentColor;overflow:hidden}
.logo-mark::before,.logo-mark::after{content:"";position:absolute;left:-10%;right:-10%;height:2px;background:currentColor;border-radius:2px}
.logo-mark::before{top:28%;transform:scaleX(.8)}
.logo-mark::after{top:58%}
.logo:hover .logo-mark::before,.logo:focus-visible .logo-mark::before{animation:mark .9s var(--ease-voice)}
@keyframes mark{0%,100%{transform:scaleX(.8)}30%{transform:scaleX(.35)}60%{transform:scaleX(1)}}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,2vw,1.9rem);font-size:.98rem;font-weight:500}
.nav-links a{text-decoration:none;opacity:.88;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-links a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45rem}
.nav-links .nav-cta{padding:.55rem 1.1rem;border:1.5px solid currentColor;border-radius:99px;opacity:1;font-weight:600}
.menu-btn{display:none;position:relative;z-index:22;align-items:center;gap:.55rem;font-weight:600;background:none;border:1.5px solid currentColor;border-radius:99px;padding:.45rem .95rem;cursor:pointer}
.menu-btn .bars{display:inline-flex;align-items:center;gap:2px;height:.8rem}
.menu-btn .bars i{width:2px;height:40%;background:currentColor;border-radius:2px;transition:height .3s var(--ease-voice)}
.menu-btn .bars i:nth-child(2){height:100%}.menu-btn .bars i:nth-child(3){height:65%}
.menu-btn[aria-expanded="true"] .bars i{height:15%}
.menu-extra{display:none}

/* echo: a link "says it back" as you point at it */
.echo{position:relative}
.echo::after{content:attr(data-echo);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;pointer-events:none;opacity:0;color:currentColor}
.echo:hover::after,.echo:focus-visible::after{animation:echo .75s var(--ease-voice)}
@keyframes echo{0%{opacity:.6;transform:scale(1);font-stretch:100%}100%{opacity:0;transform:scale(1.22,1.04);font-stretch:150%}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.2rem;padding:.95rem 1.65rem;border-radius:99px;font-weight:600;font-size:1.02rem;line-height:1.1;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn-primary{background:#fff;color:var(--ink);--ring:#fff}
.btn-primary:hover{background:var(--ice)}
.btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.on-light .btn-primary{background:var(--ink);color:#fff;--ring:var(--biru)}
.on-light .btn-primary:hover{background:var(--biru)}
.on-light .btn-ghost{border-color:var(--ink);color:var(--ink)}
.on-light .btn-ghost:hover{background:var(--ink);color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- section scaffolding ---------- */
section,.foot{position:relative}
.sec{padding:clamp(5rem,13vh,9rem) var(--pad)}
.wrap{max-width:var(--maxw);margin:0 auto}
.bg-biru{background:var(--biru);color:#fff}
.bg-navy{background:var(--navy);color:#fff}
.bg-night{background:var(--night);color:#fff}
.bg-ice{background:var(--ice)}
.bg-paper{background:var(--paper)}
.bg-white{background:#fff}
.bg-cyan{background:var(--signal);color:var(--ink);--ring:var(--ink)}
.sec-head{max-width:52rem;margin-bottom:clamp(2.2rem,6vh,4rem)}
.sec-head .eyebrow{display:block;margin-bottom:1.1rem}
.sec-head p:not(.eyebrow){margin-top:1.3rem;font-size:clamp(1.05rem,1.3vw,1.2rem);max-width:36rem;opacity:.86}
.on-light .sec-head p:not(.eyebrow){color:var(--ink-2);opacity:1}
.note{font-size:.9rem;opacity:.75;max-width:36rem}
.on-light .note{color:var(--ink-2);opacity:1}

/* waveform edges (inserted by motion.js): flat at rest, ripple with scroll speed */
.edge{position:absolute;left:0;top:-40px;width:100%;height:80px;z-index:2;pointer-events:none;overflow:visible}
.edge .e-up{fill:var(--to)}
.edge .e-down{fill:var(--from)}

/* ---------- status chip ---------- */
.status{display:inline-flex;align-items:center;gap:.6rem;padding:.42rem .95rem .42rem .8rem;border:1px solid rgba(255,255,255,.4);border-radius:99px;font-size:.9rem;background:rgba(255,255,255,.08);width:max-content;max-width:100%}
.status .dot{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--signal);animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(125,231,255,.7)}70%,100%{box-shadow:0 0 0 .6rem rgba(125,231,255,0)}}

/* =========================================================================================
   HERO
   ========================================================================================= */
.hero{min-height:100vh;min-height:100svh;padding:calc(var(--navh) + clamp(.75rem,3vh,2.2rem)) var(--pad) clamp(1.25rem,3.5vh,2.5rem);background:radial-gradient(60% 75% at 72% 38%,var(--biru-hi) 0%,var(--biru) 48%,var(--biru-lo) 100%);overflow:hidden;isolation:isolate}
.hero .status{margin-bottom:clamp(1rem,3vh,2rem)}

/* home: call and response, the orb between them */
.hero--home{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"status status" "call orb" "foot orb" "foot resp" "foot convo";grid-template-rows:auto auto auto auto auto;align-content:center;column-gap:clamp(1.5rem,4vw,5rem)}
.hero--home .status{grid-area:status;margin-bottom:clamp(.6rem,2.5vh,2rem)}
.hero-title{display:contents}
.hero-title .call,.hero-title .resp{display:block;font-family:var(--display);font-weight:800;font-stretch:56%;letter-spacing:-.015em;line-height:.84;font-size:clamp(3.2rem,min(8.6vw,15svh),13rem)}
.hero-title .call{grid-area:call;align-self:end}
.hero--home .orb-slot{grid-area:orb;justify-self:center;align-self:center;width:min(100%,36svh);margin:0 0 clamp(.8rem,3.5vh,2.6rem)}
.hero-title .resp{grid-area:resp;justify-self:end;text-align:right;color:var(--signal);position:relative;z-index:2}
.hero-foot{grid-area:foot;align-self:start;padding-top:clamp(1rem,3.5vh,2.4rem);max-width:42rem}
.hero-foot .lede{margin-bottom:clamp(1rem,3vh,1.6rem)}
.convo{grid-area:convo;justify-self:end;width:min(100%,34rem);padding-top:clamp(.7rem,2.4vh,1.6rem)}

/* the conversation: subtitles under a scripted exchange */
.convo-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1rem}
.play{display:inline-flex;align-items:center;gap:.7rem;min-height:3.2rem;padding:.55rem 1.3rem .55rem .55rem;border-radius:99px;border:1.5px solid rgba(255,255,255,.6);background:rgba(4,8,38,.25);font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.play:hover{background:rgba(4,8,38,.45);border-color:#fff}
.play-ico{position:relative;flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:#fff}
.play-ico::before{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:.42rem 0 .42rem .68rem;border-color:transparent transparent transparent var(--ink)}
.play[aria-pressed="true"] .play-ico::before{left:50%;width:.62rem;height:.62rem;border:0;background:var(--ink);border-radius:2px}
.sound{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;padding:.45rem .95rem;border-radius:99px;border:1px solid rgba(255,255,255,.35);background:none;font-size:.9rem;cursor:pointer;opacity:.9}
.sound:hover{opacity:1;border-color:#fff}
.sound-ico{display:inline-flex;align-items:center;gap:2px;height:.9rem}
.sound-ico i{width:2px;height:20%;background:currentColor;border-radius:2px}
.sound[aria-pressed="true"] .sound-ico i{animation:bar .9s ease-in-out infinite}
.sound[aria-pressed="true"] .sound-ico i:nth-child(2){animation-delay:-.3s}.sound[aria-pressed="true"] .sound-ico i:nth-child(3){animation-delay:-.6s}.sound[aria-pressed="true"] .sound-ico i:nth-child(4){animation-delay:-.15s}
@keyframes bar{0%,100%{height:20%}50%{height:100%}}
.captions{display:grid;gap:.55rem;padding:1rem 1.15rem;border-radius:1.1rem;background:rgba(4,8,38,.32);border:1px solid rgba(255,255,255,.16);min-height:7.4rem}
.cap{display:grid;grid-template-columns:5.6rem 1fr;gap:.8rem;align-items:baseline;font-size:clamp(.98rem,1.15vw,1.12rem);line-height:1.4}
.cap .who{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75;padding-top:.2em}
.cap[data-cap="bot"] .who,.cap.cap-bot .who{color:var(--signal);opacity:1}
.cap .txt{min-height:1.4em}
.cap .txt .wd{transition:opacity .18s,color .18s}
.cap .txt .wd.off{opacity:.32}
.cap[data-cap="bot"] .txt .wd.on{color:var(--signal)}
.cap.dim .txt{opacity:.5}
.convo-note{margin-top:.75rem;font-size:.84rem;opacity:.72}

/* sub-page heroes: copy on the left, orb on the right */
.hero--sub{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(1rem,4vw,4rem);min-height:92vh;min-height:92svh}
.hero--sub .hero-copy{grid-column:1;grid-row:2;align-self:end;max-width:52rem}
.hero--sub .h1{margin-bottom:clamp(1.2rem,3vh,2rem)}
.hero--sub .lede{margin-bottom:1.8rem;max-width:36rem}
.hero--sub .orb-slot{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;width:min(100%,58svh)}
.hero--sub .status{grid-column:1;grid-row:1;align-self:start}

/* =========================================================================================
   HOME: how it works (pinned on the full experience)
   ========================================================================================= */
.story{background:var(--navy);padding:clamp(5rem,13vh,9rem) var(--pad)}
.story-pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);max-width:var(--maxw);margin:0 auto}
.story-copy .eyebrow{display:block;margin-bottom:2rem;color:var(--signal);opacity:1}
.steps{list-style:none;display:grid;gap:clamp(3rem,8vh,5rem)}
.step .num{display:block;font-family:var(--mono);font-size:.85rem;color:var(--signal);margin-bottom:.9rem}
.step h3{font-family:var(--display);font-weight:800;font-stretch:56%;font-size:clamp(3rem,min(8vw,15svh),8.4rem);line-height:.88;letter-spacing:-.015em;margin-bottom:1.1rem}
.step p{max-width:29rem;font-size:clamp(1.02rem,1.35vw,1.22rem);opacity:.84}
.story-note{margin-top:3rem;font-size:.86rem;opacity:.6;max-width:26rem}
.story-stage{display:flex;flex-direction:column;justify-content:center;gap:1.4rem}
.story-stage .orb-slot{display:none}
.story-cap{display:grid;gap:.7rem;padding:1.1rem 1.2rem;border-radius:1.1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.prog{display:none}

/* =========================================================================================
   HOME: the pill / desk
   ========================================================================================= */
.island{background:var(--biru);padding:clamp(7rem,18vh,12rem) var(--pad) clamp(5rem,12vh,8rem)}
.island-head{max-width:62rem;margin:0 auto;text-align:center}
.island-head .h2{margin:0 auto}
.island-head p{max-width:36rem;margin:1.6rem auto 0;font-size:clamp(1.05rem,1.35vw,1.25rem);opacity:.9}
.island-head .concept{margin-top:1rem;font-size:.9rem;opacity:.88}
.desk{max-width:60rem;margin:clamp(3rem,8vh,5rem) auto 0}
.win{background:var(--ink);border-radius:1.2rem;color:#DCE4FF;box-shadow:0 60px 100px -40px rgba(3,8,60,.8),0 0 0 1px rgba(255,255,255,.14);overflow:hidden;text-align:left}
.win-bar{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;background:#0E1745;border-bottom:1px solid rgba(255,255,255,.08)}
.dots{display:flex;gap:.4rem}.dots i{width:.7rem;height:.7rem;border-radius:50%;background:rgba(255,255,255,.22)}
.tab{font-family:var(--mono);font-size:.85rem;color:#B9C6FF;padding:.2rem .7rem;background:var(--ink);border-radius:.4rem}
.code{padding:1.4rem 0;font-family:var(--mono);font-size:clamp(.74rem,1.5vw,1rem);line-height:1.95;overflow-x:auto}
.cl{display:flex;gap:1.3rem;padding:0 1.3rem;white-space:pre}
.cl b{font-weight:400;color:#5A67A6;width:1.2rem;text-align:right;flex:none}
.cl .k{color:#8FA8FF}.cl .f{color:#fff}.cl .p{color:#B7F2FF}
.cl.bug{background:rgba(255,107,133,.14);box-shadow:inset 3px 0 0 var(--bug)}
.chat{display:grid;gap:1rem;padding:1.3rem 1.3rem 1.6rem;border-top:1px solid rgba(255,255,255,.08);background:#0B133C}
.chat .who{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8FA8FF;margin-bottom:.25rem}
.chat .biru .who{color:var(--signal)}
.chat p{font-size:clamp(.98rem,1.5vw,1.15rem);color:#fff}
.chat .row{display:flex;align-items:flex-end;gap:1rem;justify-content:space-between}
.wv{display:inline-flex;align-items:center;gap:3px;height:1.6rem;flex:none}
.wv i{width:3px;height:var(--h,40%);border-radius:2px;background:currentColor}

/* =========================================================================================
   HOME: what it's for (horizontal track on the full experience)
   ========================================================================================= */
.strip{background:var(--ice);padding:clamp(5rem,12vh,8rem) var(--pad)}
.strip-intro{max-width:30rem;margin-bottom:2.4rem}
.strip-intro p{margin-top:1.1rem;color:var(--ink-2);font-size:1.1rem}
.track{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.panel{position:relative;overflow:hidden;border-radius:1.6rem;padding:clamp(1.6rem,3vw,2.8rem);display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;min-height:21rem}
.panel .say{font-family:var(--display);font-weight:800;font-stretch:54%;font-size:clamp(2.6rem,min(6.2vw,10svh),6.8rem);line-height:.9;letter-spacing:-.012em;max-width:11ch}
.panel .what{max-width:25rem;font-size:1.06rem}
.panel .wv{height:2.4rem;gap:4px}
.panel .wv i{width:4px}
.panel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.panel .who{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.88}
.p1{background:#fff;color:var(--ink)}.p1 .what{color:var(--ink-2)}
.p2{background:var(--biru);color:#fff}
.p3{background:var(--navy);color:#fff}.p3 .say{color:var(--signal)}
.p4{background:#fff;color:var(--ink)}.p4 .what{color:var(--ink-2)}
.p5{background:var(--signal);color:var(--ink)}.p5 .what{color:#0A2A5A}
.strip-note{margin-top:1.4rem;font-size:.9rem;color:var(--ink-2)}

/* =========================================================================================
   reels (things you could say, tools)
   ========================================================================================= */
.reel{padding:clamp(3.5rem,9vh,6rem) 0;overflow-x:clip}
.reel-head{padding:0 var(--pad) 2.2rem}
.reel-row{display:flex;gap:.8rem;width:max-content;margin-bottom:.8rem}
.reel-row:last-child{margin-bottom:0}
.reel-row span{flex:none;display:inline-flex;align-items:baseline;gap:.8rem;padding:.85rem 1.6rem;border-radius:99px;border:1.5px solid rgba(255,255,255,.35);font-family:var(--display);font-weight:650;font-stretch:78%;font-size:clamp(1.25rem,2.4vw,2.2rem);white-space:nowrap}
.reel-row span::before{content:attr(data-who);font-family:var(--mono);font-size:.38em;letter-spacing:.14em;text-transform:uppercase;opacity:.65;font-weight:400}
.reel-row:nth-child(even) span{border-color:rgba(125,231,255,.5);color:var(--signal)}
.on-light .reel-row span{border-color:rgba(10,16,51,.22)}
.on-light .reel-row:nth-child(even) span{border-color:rgba(27,59,255,.4);color:var(--biru)}
html:not(.anim) .reel-row{flex-wrap:wrap;width:auto;padding:0 var(--pad)}

/* =========================================================================================
   HOME: studio teaser, roadmap, CTA
   ========================================================================================= */
.studio-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:end}
.studio .lead{margin-top:1.5rem;font-size:clamp(1.08rem,1.3vw,1.22rem);color:var(--ink-2);max-width:34rem}
.rowlinks{display:grid;gap:.8rem}
.rowlink{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 1.6rem;background:#fff;border:1px solid var(--line-l);border-radius:1.4rem;text-decoration:none;color:var(--ink);transition:background .3s,color .3s,border-color .3s}
.rowlink:hover{background:var(--biru);border-color:var(--biru);color:#fff}
.rowlink strong{display:block;font-family:var(--display);font-weight:800;font-stretch:60%;font-size:clamp(2rem,3.4vw,3.1rem);line-height:.95;transition:font-stretch .5s var(--ease-voice)}
.rowlink:hover strong,.rowlink:focus-visible strong{font-stretch:78%}
.rowlink .d{display:block;margin-top:.45rem;font-size:1rem;opacity:.8;max-width:24rem}
.go{flex:none;width:3rem;height:3rem;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center}
.go svg{width:1.1rem;height:1.1rem}

.road{position:relative;padding-top:3.2rem}
.road-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,3rem)}
.road-line{position:absolute;left:0;right:0;top:.55rem;height:2px;background:rgba(255,255,255,.22)}
.road-line i{display:block;height:100%;background:var(--signal);transform-origin:left;transform:scaleX(var(--p,1))}
.on-light .road-line{background:var(--line-l)}.on-light .road-line i{background:var(--biru)}
.road li{position:relative}
.road li::before{content:"";position:absolute;left:0;top:-3.2rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--signal);border:3px solid var(--navy);box-shadow:0 0 0 2px var(--signal)}
.road .when{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin-bottom:.7rem}
.road h3{margin-bottom:.6rem}
.road p{max-width:24rem;opacity:.84}

.cta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1rem,4vw,4rem);align-items:center;min-height:86vh;min-height:86svh;padding:clamp(6rem,16vh,10rem) var(--pad);background:radial-gradient(55% 70% at 75% 50%,var(--biru-hi),var(--biru) 55%,var(--biru-lo))}
.cta .eyebrow{display:block;color:var(--signal);opacity:1;margin-bottom:1.3rem}
.cta .h2{max-width:13ch}
.cta p:not(.eyebrow){margin:1.5rem 0 2.2rem;max-width:30rem;font-size:clamp(1.05rem,1.3vw,1.22rem);opacity:.88}
.cta .orb-slot{width:min(100%,56svh);justify-self:center}

/* footer */
.foot{background:var(--night);color:#fff;padding:clamp(4rem,10vh,7rem) var(--pad) clamp(1.6rem,4vh,2.4rem);overflow-x:clip}
.foot-big .eyebrow{display:block;margin-bottom:1rem;color:var(--signal);opacity:1}
.foot-mail{display:inline-block;font-family:var(--display);font-weight:800;font-stretch:54%;font-size:clamp(2.2rem,9.6vw,11rem);line-height:.9;letter-spacing:-.015em;text-decoration:none;overflow-wrap:anywhere;text-decoration-thickness:.04em;text-underline-offset:.12em;transition:color .3s}
.foot-mail:hover,.foot-mail:focus-visible{color:var(--signal);text-decoration-line:underline}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem 3rem;margin-top:clamp(3rem,9vh,6rem);padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);font-size:.95rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.foot-nav a{text-decoration:none;opacity:.85}
.foot-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:.35rem}
.foot-small{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;opacity:.7}
.foot-small a{text-decoration:none}

/* =========================================================================================
   PRODUCTS
   ========================================================================================= */
.product-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.name{font-family:var(--display);font-weight:800;font-stretch:56%;font-size:clamp(4rem,min(12vw,22svh),12rem);line-height:.84;letter-spacing:-.02em;display:flex;flex-wrap:wrap;align-items:baseline}
.name .b{color:var(--biru)}
.name-echo{display:flex;gap:.2em;margin-top:.15em;font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,3vw,2.6rem);line-height:1;color:var(--biru)}
.name-echo span::before{content:attr(data-t)}
.name-echo span:nth-child(1){font-stretch:80%;opacity:.55}
.name-echo span:nth-child(2){font-stretch:110%;opacity:.32}
.name-echo span:nth-child(3){font-stretch:150%;opacity:.16}
.product .tag{margin-top:1.4rem;font-family:var(--display);font-weight:750;font-stretch:72%;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.05}
.product .lead{margin-top:1.2rem;font-size:1.12rem;color:var(--ink-2);max-width:32rem}
.product .note{margin-top:1.1rem}
.product .cta-row{margin-top:1.8rem}
.product .desk{margin:0}

/* voice timelines: what's built so far */
.vts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.vt{border-radius:1.5rem;padding:clamp(1.4rem,2.6vw,2.2rem);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:1rem}
.vt .h3{max-width:18ch}
.vt p{opacity:.84;max-width:32rem}
.vt-track{position:relative;margin-top:auto;padding-top:1.2rem;display:grid;gap:.55rem}
.lane{position:relative;height:2.6rem;border-radius:.7rem;background:rgba(255,255,255,.05)}
.lane-t{position:absolute;left:5.6rem;right:.6rem;top:0;bottom:0}
.vt-marks{position:absolute;left:5.6rem;right:.6rem;top:1.2rem;bottom:0;pointer-events:none}
.lane-name{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;z-index:1}
.seg{position:absolute;top:.35rem;bottom:.35rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;gap:2px;padding:0 4px;overflow:hidden;background:rgba(255,255,255,.14);color:#fff}
.lane-bot .seg{background:rgba(125,231,255,.18);color:var(--signal)}
.seg i{flex:1 1 0;max-width:3px;height:var(--h,40%);border-radius:2px;background:currentColor}
.seg.draft{background:none;border:1.5px dashed rgba(125,231,255,.7)}
.seg.draft i{opacity:.55}
.seg.wrong{border-color:rgba(255,107,133,.8);color:var(--bug)}
.seg.wrong::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;background:var(--bug);transform:rotate(-6deg)}
.seg.timer{background:none;border:0;border-top:2px dotted rgba(255,255,255,.55);border-radius:0;top:50%;bottom:auto;height:0}
.seg-label{position:absolute;top:calc(100% + .2rem);font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;opacity:.8;white-space:nowrap}
.mark{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.55)}
.mark span{position:absolute;bottom:calc(100% + .2rem);left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.64rem;white-space:nowrap;opacity:.85}
.vt-legend{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-family:var(--mono);font-size:.68rem;opacity:.7;margin-top:1.4rem}
.playhead{position:absolute;top:.6rem;bottom:-.3rem;left:calc(5.6rem + var(--t,0) * (100% - 6.2rem));width:2px;background:var(--signal);box-shadow:0 0 12px var(--signal);opacity:0}
html.anim .vt.playing .playhead{opacity:1}

/* =========================================================================================
   SERVICES
   ========================================================================================= */
.svc-group{margin-top:clamp(2.5rem,7vh,4.5rem)}
.svc-group:first-of-type{margin-top:0}
.svc-label{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:2px solid var(--ink)}
.svc-label .eyebrow{opacity:1}
.svc-list{list-style:none}
.svc{display:grid;grid-template-columns:3.2rem minmax(0,1.15fr) minmax(0,1fr) minmax(0,.55fr);gap:.6rem clamp(1rem,2.5vw,2.5rem);align-items:start;padding:clamp(1.3rem,3vh,2rem) 0;border-bottom:1px solid var(--line-l);transition:background .3s}
.svc-n{font-family:var(--mono);font-size:.8rem;color:var(--biru);padding-top:.55rem}
.svc h3{font-family:var(--display);font-weight:800;font-stretch:58%;font-size:clamp(2rem,3.6vw,3.5rem);line-height:.92;letter-spacing:-.01em;transition:color .3s,transform .5s var(--ease-voice)}
.svc:hover h3{color:var(--biru);transform:translateX(.4rem)}
.svc p{color:var(--ink-2);font-size:1.02rem;padding-top:.3rem}
.svc .proof{justify-self:end;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;line-height:1.35;padding:.4rem .7rem;border:1px solid var(--biru);color:var(--biru);border-radius:.5rem;text-align:right;max-width:13rem}
.svc-more{margin-top:2.6rem;font-size:1.12rem;color:var(--ink-2)}
.svc-more a{color:var(--biru);font-weight:600}

/* flows: process steps, pipelines, comment-to-sale */
.flow{--n:4;--p:1;position:relative;padding-top:2.6rem}
.flow-list{list-style:none;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1.4rem}
.flow.five{--n:5}.flow.six{--n:6}
.flow-line{position:absolute;left:0;right:0;top:.55rem;height:2px;background:rgba(255,255,255,.2)}
.flow-line i{display:block;height:100%;background:var(--signal);transform-origin:left;transform:scaleX(var(--p))}
.flow-line b{position:absolute;top:50%;left:calc(var(--p) * 100%);width:.9rem;height:.9rem;margin:-.45rem 0 0 -.45rem;border-radius:50%;background:var(--signal);box-shadow:0 0 0 .4rem rgba(125,231,255,.18),0 0 18px var(--signal);opacity:0}
html.anim .flow-line b{opacity:1}
.on-light .flow-line{background:var(--line-l)}.on-light .flow-line i,.on-light .flow-line b{background:var(--biru)}
.on-light .flow-line b{box-shadow:0 0 0 .4rem rgba(27,59,255,.14)}
.node{position:relative}
.node::before{content:"";position:absolute;left:0;top:-2.6rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--signal);border:3px solid var(--navy);box-shadow:0 0 0 2px var(--signal);transition:background .3s,box-shadow .3s}
.on-light .node::before{background:var(--biru);border-color:var(--paper);box-shadow:0 0 0 2px var(--biru)}
.node .k{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:.4rem}
.node h3{font-family:var(--display);font-weight:800;font-stretch:60%;font-size:clamp(1.7rem,2.5vw,2.5rem);line-height:.95;margin-bottom:.5rem}
.node p{font-size:.98rem;opacity:.86;max-width:18rem}
.on-light .node p{color:var(--ink-2);opacity:1}
.flow.six .node h3{font-size:clamp(1.5rem,2vw,2.1rem)}
.flow.six .node p{font-size:.93rem}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
.chip{display:inline-flex;align-items:center;padding:.42rem .9rem;border:1.5px solid currentColor;border-radius:99px;font-size:.93rem;font-weight:500}
.chips.dim .chip{border-color:rgba(255,255,255,.35)}
.on-light .chips.dim .chip{border-color:var(--line-l)}

/* =========================================================================================
   CLIENT PROJECTS
   ========================================================================================= */
.chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:2rem;max-width:56rem}
.chapter-link{display:flex;flex-direction:column;gap:.4rem;padding:1.2rem 1.3rem;border-radius:1.2rem;border:1.5px solid rgba(255,255,255,.45);text-decoration:none;transition:background .3s,border-color .3s}
.chapter-link:hover{background:rgba(255,255,255,.1);border-color:#fff}
.chapter-link .eyebrow{opacity:.75}
.chapter-link strong{font-family:var(--display);font-weight:800;font-stretch:62%;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:.95}
.case{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:clamp(2rem,4vw,4rem);max-width:var(--maxw);margin:0 auto}
.case-rail{position:sticky;top:calc(var(--navh) + 1.5rem);align-self:start;padding-top:.4rem}
.case-rail .eyebrow{display:block;margin-bottom:.9rem}
.case-rail ol{list-style:none;display:grid;gap:.15rem;border-left:2px solid rgba(255,255,255,.18)}
.on-light .case-rail ol{border-color:var(--line-l)}
.case-rail a{display:block;padding:.35rem 0 .35rem .9rem;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;font-size:.92rem;opacity:.72;transition:opacity .2s,border-color .2s}
.case-rail a:hover{opacity:1}
.case-rail a.on{opacity:1;border-color:var(--signal);font-weight:600}
.on-light .case-rail a.on{border-color:var(--biru)}
.case-body{min-width:0}
.case-title{font-family:var(--display);font-weight:800;font-stretch:55%;font-size:clamp(3.6rem,min(11vw,20svh),11rem);line-height:.84;letter-spacing:-.02em}
.case-kind{display:block;margin-bottom:1rem}
.case-lead{max-width:46rem;margin-top:1.5rem;font-size:clamp(1.1rem,1.55vw,1.4rem);line-height:1.5;opacity:.92}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem 2rem;margin:2.2rem 0 1.6rem;padding:1.3rem 0;border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.28)}
.on-light .meta{border-color:var(--line-l)}
.meta div{min-width:0}
.meta dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:.35rem}
.meta dd{font-size:1.05rem;font-weight:500;overflow-wrap:anywhere}
.case-part{margin-top:clamp(3.5rem,10vh,6.5rem);scroll-margin-top:6rem}
.case-part>.h3,.case-part>h3{margin-bottom:1.3rem}
.part-h{font-family:var(--display);font-weight:800;font-stretch:58%;font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:.92;margin-bottom:1.4rem;letter-spacing:-.01em}
.part-lead{max-width:40rem;margin:-0.4rem 0 2.2rem;font-size:1.1rem;opacity:.86}
.note-small{margin-top:1.2rem;font-size:.92rem;opacity:.78;max-width:42rem}
.visit{margin-top:.4rem}

/* integration diagram: Instagram, backend, Shopify */
.wires{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem minmax(0,.8fr) 4.5rem minmax(0,1fr);align-items:stretch}
.wire-node{border-radius:1.4rem;padding:clamp(1.3rem,2.4vw,2rem);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.wire-node h3{font-family:var(--display);font-weight:800;font-stretch:60%;font-size:clamp(2rem,3.4vw,3.2rem);line-height:.92;margin-bottom:.8rem}
.wire-node p{font-size:1rem;opacity:.88}
.wire-hub{background:var(--biru);border-color:var(--biru);display:flex;flex-direction:column;justify-content:center;text-align:center}
.wire-hub h3{color:#fff}
.wire-hub ul{list-style:none;display:grid;gap:.4rem;font-family:var(--mono);font-size:.78rem;opacity:.9}
.wire{position:relative;align-self:center;height:2px;background:repeating-linear-gradient(90deg,var(--signal) 0 8px,transparent 8px 16px)}
html.anim .wire{animation:flowx 1.2s linear infinite;background-size:16px 2px}
.wire.rev{transform:scaleX(-1)}
@keyframes flowx{to{background-position:16px 0}}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.feat{border-radius:1.3rem;padding:1.6rem 1.7rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.on-light .feat{background:#fff;border-color:var(--line-l)}
.feat h3{font-family:var(--display);font-weight:800;font-stretch:66%;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1;margin-bottom:.75rem}
.feat p{font-size:1.01rem;opacity:.88;line-height:1.55}
.on-light .feat p{color:var(--ink-2);opacity:1}

/* the handoff rule */
.rule{margin-top:1rem;border-radius:1.5rem;padding:clamp(1.4rem,3vw,2.4rem);background:var(--signal);color:var(--ink);--ring:var(--ink)}
.rule .eyebrow{display:block;margin-bottom:.7rem}
.rule h3{font-family:var(--display);font-weight:800;font-stretch:60%;font-size:clamp(2rem,3.6vw,3.2rem);line-height:.92;margin-bottom:1.4rem}
.rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2rem}
.rule label{display:grid;gap:.5rem;font-weight:600}
.rule .lab{display:flex;justify-content:space-between;gap:1rem}
.rule output{font-family:var(--mono);font-weight:400}
.rule input[type="range"]{width:100%;accent-color:var(--ink);height:1.6rem;cursor:pointer}
.rule-meter{position:relative;height:.9rem;border-radius:99px;background:rgba(10,16,51,.15);margin:1.6rem 0 .6rem;overflow:visible}
.rule-fill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:99px;background:var(--ink);transform-origin:left;transform:scaleX(var(--v,.72));transition:transform .25s var(--ease-voice)}
.rule-mark{position:absolute;left:70%;top:-.45rem;bottom:-.45rem;width:3px;background:var(--bug);border-radius:2px}
.rule-mark span{position:absolute;top:calc(100% + .25rem);left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.7rem;white-space:nowrap}
.rule-result{margin-top:1.8rem;font-family:var(--display);font-weight:800;font-stretch:70%;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.05}
.rule-note{margin-top:.8rem;font-size:.92rem;max-width:40rem;color:#0A2A5A}

/* problems solved: an incident log */
.log{list-style:none;counter-reset:log}
.log li{display:grid;grid-template-columns:3.4rem minmax(0,.95fr) minmax(0,1.3fr);gap:.6rem clamp(1rem,3vw,3rem);padding:1.7rem 0;border-top:1px solid rgba(255,255,255,.2)}
.log li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.log .n{font-family:var(--mono);font-size:.8rem;color:var(--signal);padding-top:.5rem}
.log h3{font-family:var(--display);font-weight:800;font-stretch:62%;font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:.95}
.log p{font-size:1.04rem;opacity:.88}

/* arbitrage */
.formula{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1rem}
.formula>div{border-radius:1.3rem;padding:1.5rem 1.6rem;background:#fff;border:1px solid var(--line-l)}
.formula b{display:block;font-family:var(--display);font-weight:800;font-stretch:56%;font-size:clamp(2.2rem,4.4vw,4.4rem);line-height:.9;color:var(--biru);overflow-wrap:anywhere}
.formula span{display:block;margin-top:.6rem;font-size:.98rem;color:var(--ink-2)}
.pipe{margin-top:.5rem}
.pipe-flow{position:relative;height:3.4rem;margin:0 0 .4rem;border-radius:99px;background:linear-gradient(90deg,rgba(27,59,255,.06),rgba(27,59,255,.12));overflow:hidden;display:none}
html.anim .pipe-flow{display:block}
.pipe-flow i{position:absolute;inset:0;animation:pipeX var(--dur,7s) linear infinite;animation-delay:var(--d,0s)}
.pipe-flow i b{position:absolute;left:-10px;top:50%;width:9px;height:9px;margin-top:calc(-4.5px + var(--y,0px));border-radius:50%;background:var(--biru);animation:var(--anim,none) var(--dur,7s) linear infinite;animation-delay:var(--d,0s)}
@keyframes pipeX{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes drop1{0%,24%{transform:none;opacity:1}32%,100%{transform:translateY(46px) scale(.6);opacity:0}}
@keyframes drop2{0%,41%{transform:none;opacity:1}49%,100%{transform:translateY(46px) scale(.6);opacity:0}}
.pipe-flow.paused i,.pipe-flow.paused i b{animation-play-state:paused}
.pipe-flow i.drop1 b{--anim:drop1;background:var(--bug)}
.pipe-flow i.drop2 b{--anim:drop2;background:#FF9F43}
.pipe-key{display:none;flex-wrap:wrap;gap:.3rem 1.4rem;margin:.3rem 0 2rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-2)}
html.anim .pipe-key{display:flex}
.pipe-key span::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:.45rem;background:var(--biru)}
.pipe-key .k-d1::before{background:var(--bug)}.pipe-key .k-d2::before{background:#FF9F43}
.chapter-link span:last-child{font-size:.95rem;opacity:.85}
.next{margin-top:1.6rem;padding:1.5rem 1.7rem;border-radius:1.3rem;background:rgba(27,59,255,.07);border:1px solid rgba(27,59,255,.3)}
.next h3{font-family:var(--display);font-weight:800;font-stretch:70%;font-size:1.6rem;margin-bottom:.4rem}

/* =========================================================================================
   404
   ========================================================================================= */
.hero--lost{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(1rem,4vw,4rem)}
.hero--lost .status{grid-column:1;grid-row:1}
.hero--lost .hero-copy{grid-column:1;grid-row:2;align-self:center}
.hero--lost .orb-slot{grid-column:2;grid-row:1/3;align-self:center;width:min(100%,56svh);justify-self:center}
.misheard{display:grid;gap:.7rem;max-width:34rem;margin-bottom:2.4rem}
.misheard .cap{font-size:clamp(1.02rem,1.3vw,1.2rem)}
.misheard .path{font-family:var(--mono);font-size:.92em;overflow-wrap:anywhere}
.hero--lost .h1{margin-bottom:1.4rem}

body[data-page="lost"] .foot{padding-top:2rem}
body[data-page="lost"] .foot-row{margin-top:0}
.hero--lost .lede{margin-bottom:1.8rem}

/* =========================================================================================
   TRUST PAGES: about, FAQ, company, terms, privacy. Long-form text on paper, with the case-study rail.
   ========================================================================================= */
.hero--doc{min-height:74vh;min-height:74svh}
.doc-part{margin-top:clamp(3.5rem,9vh,6rem);scroll-margin-top:6rem}
.doc-part:first-child{margin-top:0}
.prose{max-width:46rem}
.prose p,.prose li{font-size:clamp(1.02rem,1.15vw,1.12rem);line-height:1.6}
.on-light .prose p,.on-light .prose li{color:var(--ink-2)}
.prose p+p{margin-top:.9em}
.prose ul{margin:1em 0 0 1.25rem;display:grid;gap:.5rem}
.prose ul+p{margin-top:1em}
.doc-part>.prose+:not(.prose){margin-top:1.8rem}
.prose a,.facts a,.qa a{font-weight:600;text-underline-offset:.2em;overflow-wrap:anywhere}
.on-light .prose a,.on-light .facts a,.on-light .qa a{color:var(--biru)}
.on-light .prose strong{color:var(--ink)}
.updated{display:block;margin-top:1.4rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--ink-2)}
/* key facts as a two-column table */
.facts{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);max-width:54rem;border-top:2px solid var(--ink)}
.facts dt,.facts dd{padding:1.05rem 0;border-bottom:1px solid var(--line-l)}
.facts dt{padding-top:1.3rem;padding-right:1.2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.facts dd{font-size:1.08rem;font-weight:500;overflow-wrap:anywhere}
.facts dd span{display:block;margin-top:.25rem;font-size:.97rem;font-weight:400;color:var(--ink-2)}
/* steps of the project policy: the incident-log layout, on paper */
.on-light .log li{border-color:var(--line-l)}
.on-light .log .n{color:var(--biru)}
.on-light .log p{color:var(--ink-2);opacity:1}
/* "to be agreed in the contract" */
.tba{display:inline-block;margin-left:.15rem;padding:.18rem .55rem;border:1px solid var(--biru);border-radius:.4rem;font-family:var(--mono);font-size:.66rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--biru);white-space:nowrap;vertical-align:.12em}
.tba-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;max-width:54rem;margin-top:1.6rem}
.tba-list li{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;padding:1.1rem 1.25rem;border-radius:1.1rem;background:#fff;border:1px solid var(--line-l);font-weight:600;font-size:1.05rem}
.tba-list .tba{margin:0}
/* a notice that must be seen */
.notice{max-width:54rem;margin-top:clamp(2.2rem,6vh,3.5rem);padding:1.4rem 1.6rem;border-radius:1.3rem;background:rgba(27,59,255,.07);border:1px solid rgba(27,59,255,.3);font-size:1.05rem;font-weight:500}
.notice p+p{margin-top:.5rem}
.notice .small{font-size:.95rem;font-weight:400;color:var(--ink-2)}
/* documents to download */
.docs{margin-top:1.8rem;max-width:54rem}
.docs .rowlink strong{font-size:clamp(1.7rem,2.8vw,2.6rem)}
.docs .rowlink .d{max-width:34rem}
.docs .rowlink .ft{display:inline-block;margin-top:.55rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
/* questions and answers */
.qa{list-style:none;border-top:2px solid var(--ink)}
.qa li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:.7rem clamp(1rem,3vw,3rem);padding:clamp(1.4rem,3.4vh,2rem) 0;border-bottom:1px solid var(--line-l);scroll-margin-top:6rem}
.qa h2{font-family:var(--display);font-weight:800;font-stretch:62%;font-size:clamp(1.8rem,2.9vw,2.7rem);line-height:.95;letter-spacing:-.01em}
.qa p{color:var(--ink-2);font-size:clamp(1.02rem,1.15vw,1.1rem);line-height:1.6}
.qa .more{margin-top:.6rem;font-size:.95rem}
/* client projects: whose project this was */
.case-flag{max-width:46rem;margin-top:1.4rem;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--signal);font-weight:600;font-size:clamp(1rem,1.2vw,1.1rem)}
.on-light .case-flag{border-color:var(--biru)}
.hero--sub .lede.case-flag{margin:0 0 1.1rem;font-size:clamp(1rem,1.2vw,1.12rem);opacity:1}
a[href^="tel:"]{white-space:nowrap}
.foot-phone{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.1rem;font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:600}
.foot-phone a{text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.4);transition:color .2s,border-color .2s}
.foot-phone a:hover,.foot-phone a:focus-visible{color:var(--signal);border-color:var(--signal)}
.foot-notice{max-width:56rem;margin-top:clamp(2.4rem,6vh,4rem);padding:1.2rem 1.4rem;border-radius:1.1rem;border:1px solid rgba(125,231,255,.45);background:rgba(125,231,255,.07);font-size:1.02rem;font-weight:500}
.foot-navs{display:grid;gap:.5rem}
@media (max-width:819px){
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts dt{padding-bottom:0;border-bottom:0}
  .facts dd{padding-top:.35rem}
  .tba-list,.qa li{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================================================
   FULL EXPERIENCE (html.anim): hidden "before" states and pinned layouts
   ========================================================================================= */
html.anim [data-say]:not(.said){opacity:0}
html.anim .hero .status,html.anim .hero-foot,html.anim .convo,html.anim .hero-copy .lede,html.anim .hero-copy .cta-row,html.anim .chapters{opacity:0}
html.anim .hero .orb-fallback{display:none}

html.anim .story{height:520vh;height:520svh;padding:0}
html.anim .story-pin{position:sticky;top:0;height:100vh;height:100svh;padding:calc(var(--navh) + 1rem) var(--pad) 2rem;align-items:center}
html.anim .story-copy{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center}
html.anim .steps{position:relative;display:block;height:min(24rem,58svh)}
html.anim .step{position:absolute;left:0;right:0;top:0}
html.anim .step:not(:first-child){opacity:0;visibility:hidden}
html.anim .story-note{margin-top:1.5rem}
html.anim .prog{display:block;width:12rem;height:3px;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden;margin-top:1rem}
html.anim .prog span{display:block;height:100%;background:var(--signal);transform-origin:left;transform:scaleX(var(--p,.02))}
html.anim .story-stage{position:relative;height:100%;justify-content:center;gap:clamp(1.4rem,5vh,3.4rem);padding-bottom:1vh}
html.anim .story-stage .orb-slot{display:block;position:relative;margin:0 auto;flex:none;width:min(100%,44svh,34rem)}
html.anim .story-cap{position:relative;z-index:8;background:rgba(6,12,58,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.anim .story-cap .cap{opacity:.25;transition:opacity .4s}
html.anim .story-cap .cap.live{opacity:1}

html.anim.hscroll .strip{padding:0;overflow-x:clip;overflow-y:visible}
html.anim.hscroll .strip-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;padding:calc(var(--navh) + 2vh) 0 5vh}
html.anim.hscroll .strip-wrap{display:flex;align-items:stretch;height:100%;width:max-content;padding-left:var(--pad);will-change:transform}
html.anim.hscroll .strip-intro{flex:none;width:min(30rem,32vw);margin:0 clamp(2rem,5vw,5rem) 0 0;align-self:center}
html.anim.hscroll .track{display:flex;gap:1rem;height:80%;align-self:center;padding-right:var(--pad)}
html.anim.hscroll .panel{flex:none;height:100%;min-height:0;width:min(44rem,52vw)}
html.anim.hscroll .p2{width:min(38rem,44vw)}html.anim.hscroll .p3{width:min(50rem,60vw)}html.anim.hscroll .p5{width:min(42rem,50vw)}
html.anim.hscroll .strip-note{position:absolute;left:var(--pad);bottom:1.4vh;margin:0}

/* =========================================================================================
   RESPONSIVE
   ========================================================================================= */
@media (max-width:1180px){
  .case{grid-template-columns:minmax(0,1fr)}
  .case-rail{display:none}
}
@media (max-width:1000px){
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .studio-wrap,.product-grid{grid-template-columns:minmax(0,1fr)}
  .flow.six{--n:3}.flow.six .flow-list{row-gap:3.2rem}
  .flow.six .flow-line{display:none}
  .svc{grid-template-columns:2.6rem minmax(0,1fr) minmax(0,1fr)}
  .svc .proof{grid-column:2/4;justify-self:start;text-align:left}
  .vts{grid-template-columns:minmax(0,1fr)}
  .wires{grid-template-columns:minmax(0,1fr);gap:0}
  .wire{justify-self:center;width:2px;height:2.6rem;background:repeating-linear-gradient(180deg,var(--signal) 0 8px,transparent 8px 16px)}
  html.anim .wire{animation:flowy 1.2s linear infinite;background-size:2px 16px}
  .wire.rev{transform:none}
  .road{padding-top:0;padding-left:2.4rem}.road-list{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .road-line{left:.55rem;right:auto;top:.4rem;bottom:.4rem;width:2px;height:auto}
  .road-line i{transform-origin:top;transform:scaleY(var(--p,1))}
  .road li::before{left:-2.4rem;top:.15rem}
}
@keyframes flowy{to{background-position:0 16px}}

/* phones and portrait tablets: the menu collapses, the orb sits above the words */
@media (max-width:819px){
  :root{--navh:3.9rem}
  .menu-btn{display:inline-flex}
  .nav-links{position:fixed;inset:0;z-index:21;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.4rem;padding:5rem var(--pad) 2rem;background:var(--night);color:#fff;transform:translateY(-100%);visibility:hidden;transition:transform .55s var(--ease-snap),visibility 0s .55s}
  .nav-links a{opacity:1;font-family:var(--display);font-weight:800;font-stretch:58%;font-size:clamp(2.6rem,min(14vw,9svh),4.4rem);line-height:1.05}
  .nav-links a[aria-current="page"]{color:var(--signal);text-decoration:none}
  .nav-links .nav-cta{margin-top:1.4rem;font-family:var(--body);font-stretch:100%;font-weight:600;font-size:1.1rem;line-height:1.2}
  .menu-extra{display:block;margin-top:auto;padding-top:2rem;font-size:.95rem;opacity:.75;font-family:var(--body)}
  .nav.open{color:#fff!important;--ring:var(--signal)}
  .nav.open .nav-links{transform:none;visibility:visible;transition:transform .55s var(--ease-snap),visibility 0s}
  .logo{font-size:1.06rem}

  .panel{min-height:17rem}
  .svc{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .svc-n{padding-top:0}
  .svc .proof{grid-column:auto}
  .feat-grid,.formula,.rule-grid,.chapters{grid-template-columns:minmax(0,1fr)}
  .log li{grid-template-columns:minmax(0,1fr);gap:.6rem}
  .log .n{padding-top:0}
  .flow,.flow.five,.flow.six{--n:1;padding-top:0;padding-left:2.4rem}.flow-list,.flow.six .flow-list{gap:2rem;row-gap:2rem}
  .flow-line,.flow.six .flow-line{display:block;left:.55rem;right:auto;top:.3rem;bottom:.3rem;width:2px;height:auto}
  .flow-line i{transform-origin:top;transform:scaleY(var(--p))}
  .flow-line b{left:50%;top:calc(var(--p) * 100%);margin:-.45rem 0 0 -.45rem}
  .node::before{left:-2.4rem;top:.1rem}
  .node p{max-width:none}
}
/* stacked layouts: phones, and any portrait screen up to 1199px (portrait tablets) */
@media (max-width:819px),(max-width:1199px) and (max-aspect-ratio:20/21){
  .hero--home{grid-template-columns:minmax(0,1fr);grid-template-areas:"status" "call" "orb" "resp" "foot" "convo";grid-template-rows:none;align-content:start}
  .hero-title .call,.hero-title .resp{font-size:clamp(2.7rem,min(16vw,10svh),7rem)}
  .hero--home .orb-slot{width:min(66vw,30svh);margin:.8rem 0 .9rem}
  .hero-foot{padding-top:1.2rem;max-width:none}
  .convo{justify-self:stretch;width:100%}
  .hero-foot .lede{margin-bottom:1.2rem}

  .hero--sub,.hero--lost{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;min-height:0;padding-bottom:3.5rem}
  .hero--sub .status,.hero--lost .status{grid-row:1}
  .hero--sub .orb-slot,.hero--lost .orb-slot{grid-column:1;grid-row:2;width:min(62vw,30svh);margin:.4rem 0 1rem;justify-self:start}
  .hero--sub .hero-copy,.hero--lost .hero-copy{grid-column:1;grid-row:3}

  .story-pin{grid-template-columns:minmax(0,1fr)}
  html.anim .story-pin{display:flex;flex-direction:column-reverse;justify-content:flex-end}
  html.anim .story-pin{position:sticky;align-items:stretch}
  html.anim .story-copy{width:100%}
  html.anim .story-stage{position:static;height:40%;flex:none;padding-bottom:0}
  html.anim .story-stage .orb-slot{position:absolute;left:0;right:0;top:calc(var(--navh) + 18svh);transform:translateY(-50%);width:min(84vw,32svh)}
  html.anim .story-cap{position:absolute;left:0;right:0;bottom:0}
  html.anim .story-copy{height:auto;flex:1;justify-content:flex-start;padding-top:.6rem;padding-bottom:7.5rem}
  html.anim .steps{height:min(17rem,34svh)}
  html.anim .story-copy .eyebrow{display:none}
  html.anim .story-note{display:none}
  .story-cap .cap{grid-template-columns:4.6rem 1fr;font-size:.95rem}
  html.anim .story-cap{padding:.8rem .9rem}
  .step h3{font-size:clamp(2.6rem,13vw,4.6rem)}

  .cta{grid-template-columns:minmax(0,1fr);min-height:0}
  .cta .orb-slot{grid-row:1;width:min(56vw,28svh);justify-self:start}
  .captions{min-height:0}
  .cap{grid-template-columns:4.8rem 1fr;gap:.6rem}
}
@media (max-width:1199px) and (max-aspect-ratio:20/21) and (max-height:700px),(max-width:819px) and (max-height:700px){
  html.anim .story-cap{display:none}
  html.anim .story-copy{padding-bottom:1rem}
}
@media (max-width:420px){
  .btn{padding:.9rem 1.3rem}
  .cta-row .btn{flex:1 1 auto}
}

/* short screens (landscape phones): keep everything on one screen where it matters */
@media (max-height:560px) and (min-width:560px){
  .hero--home{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"status status" "call orb" "resp orb" "foot convo";align-content:start}
  .hero-title .call,.hero-title .resp{font-size:clamp(2.2rem,min(7.5vw,15svh),6rem)}
  .hero--home .orb-slot{width:min(100%,52svh);margin:0}
  .hero-title .resp{justify-self:start;text-align:left;margin-top:.4rem}
  .hero-foot{align-self:start}
  .convo{justify-self:stretch;align-self:start}
  .hero--sub,.hero--lost{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto 1fr}
  .hero--sub .orb-slot,.hero--lost .orb-slot{grid-column:2;grid-row:1/3;width:min(100%,58svh);justify-self:center}
  .hero--sub .hero-copy,.hero--lost .hero-copy{grid-column:1;grid-row:2}
  .h1{font-size:clamp(2.4rem,min(8vw,16svh),6rem)}
  html.anim .story-pin{padding-top:calc(var(--navh) + .3rem);padding-bottom:.6rem}
  html.anim .story-pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex-direction:row}
  html.anim .story-stage{height:100%;padding-bottom:1vh}
  html.anim .story-stage .orb-slot{width:min(100%,60svh)}
  html.anim .steps{height:min(13rem,52svh)}
  .step h3{font-size:clamp(2rem,min(7vw,14svh),4rem);margin-bottom:.6rem}
  html.anim .step p{font-size:.95rem}
  html.anim .story-note,html.anim .story-copy .eyebrow{display:none}
  .story-cap .cap{font-size:.86rem}
  html.anim .story-cap{padding:.6rem .8rem;gap:.35rem}
  html.anim.hscroll .panel{padding:1rem 1.3rem;gap:1rem}
  html.anim.hscroll .panel .say{font-size:min(5.2vw,12svh)}
  html.anim.hscroll .panel .what{font-size:.93rem}
  html.anim.hscroll .strip-intro p{display:none}
  html.anim .story-cap{display:none}
}
@media (max-height:560px) and (max-width:819px){
  .nav-links{justify-content:flex-start;padding-top:4.5rem}
  .nav-links a{font-size:clamp(1.8rem,9svh,3rem)}
}

/* =========================================================================================
   PAGE TRANSITIONS: each page opens out of the pill at the top centre (where supported)
   ========================================================================================= */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .45s var(--ease-snap) both}
::view-transition-new(root){animation:vt-in .75s var(--ease-voice) both}
@keyframes vt-out{to{opacity:.4;transform:scale(.985)}}
@keyframes vt-in{from{clip-path:inset(1.1rem calc(50% - 95px) calc(100% - 2.95rem) calc(50% - 95px) round 999px)}to{clip-path:inset(0 0 0 0 round 0)}}

/* =========================================================================================
   REDUCED MOTION: nothing moves on its own
   ========================================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .status .dot{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}