/* Arnow Solutions — site v2
   One accent (teal), near-black ink, editorial type, motion kept quiet. */

:root{
  --ink:#0c1424; --ink-2:#111a2b; --line:rgba(255,255,255,.08);
  --fg:#e8eef7; --mu:#8fa3ba; --accent:#5eead4;
  --max:1180px; --pad:clamp(24px,6vw,96px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--fg);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(12,20,36,.74);border-bottom:1px solid var(--line)}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;
  max-width:none;margin:0 auto;padding:18px var(--pad)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em}
.brand img{display:block;height:50px;width:auto}
@media (max-width:900px){.brand img{height:40px}}
.brand span{font-size:15px}
.brand i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px rgba(94,234,212,.8)}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;justify-self:center;padding:0}
.nav li a{font-size:13.5px;color:var(--mu);transition:color .25s var(--ease)}
.nav li a:hover,.nav li a[aria-current="page"]{color:var(--fg)}
.nav .cta{justify-self:end;font-size:13px;padding:9px 16px;border-radius:999px;border:1px solid rgba(94,234,212,.35);
  color:var(--accent);transition:background .25s var(--ease),border-color .25s var(--ease)}
.nav .cta:hover{background:rgba(94,234,212,.1);border-color:rgba(94,234,212,.6)}

/* ---------- type ---------- */
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
h1{font-size:clamp(32px,4.2vw,58px);line-height:1.06;letter-spacing:-.03em;margin:0 0 18px;font-weight:600}
h1 em{font-style:normal;color:var(--accent)}
h2{font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.03em;margin:0 0 16px;font-weight:600}
h3{font-size:17px;margin:0 0 8px;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 14px;color:var(--mu)}
.lede{font-size:clamp(16px,1.25vw,18px);line-height:1.62;max-width:58ch;color:#b9c6d6}

/* ---------- hero (home) ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
.stage{position:absolute;inset:0;overflow:hidden;animation:breathe 6.4s ease-in-out infinite;
  transform-origin:50% 100%}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.0065)}}
.stage canvas,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(7,11,19,.94) 0%,rgba(7,11,19,.8) 30%,rgba(7,11,19,0) 58%)}
.hero .copy{position:absolute;left:var(--pad);bottom:clamp(48px,10vh,120px);max-width:min(600px,48vw);z-index:2}
.hint{position:absolute;right:var(--pad);bottom:clamp(48px,10vh,120px);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mu);opacity:0;transition:opacity .6s;z-index:2}
.hint.on{opacity:.75}

/* services rail */
.svc{position:absolute;top:clamp(28px,5vh,56px);left:var(--pad);z-index:2}
.svc-h{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.svc ol{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.svc li{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(232,238,247,.40);
  display:flex;gap:10px;align-items:baseline;opacity:0;transform:translateY(6px);
  animation:svcIn .7s var(--ease) forwards;animation-delay:calc(.10s * var(--i) + .25s)}
.svc .n{font-size:9.5px;color:rgba(94,234,212,.45);font-variant-numeric:tabular-nums}
.svc li.on{color:var(--fg)}
.svc li.on .n{color:var(--accent)}
@keyframes svcIn{to{opacity:1;transform:none}}

/* ---------- sections ---------- */
.sec{padding:clamp(72px,9vw,128px) 0;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.sec-head{max-width:640px;margin:0 0 clamp(36px,5vw,60px)}

/* symptom list */
.symptoms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(28px,3vw,52px)}
.symptom{display:flex;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.symptom .n{font-size:10px;color:rgba(94,234,212,.5);font-variant-numeric:tabular-nums;padding-top:5px}
.symptom h3{font-size:16px}
.symptom p{font-size:14.5px;margin:0;max-width:44ch}

/* steps */
.steps{counter-reset:s;display:grid;gap:0}
.step{display:grid;grid-template-columns:64px 1fr;gap:clamp(18px,3vw,36px);
  padding:30px 0;border-top:1px solid var(--line)}
.step .num{font-size:12px;color:rgba(94,234,212,.55);letter-spacing:.1em;padding-top:6px}
.step h3{font-size:clamp(18px,1.6vw,22px);margin:0 0 8px}
.step p{margin:0;max-width:60ch}

/* work: screens sitting on the page, never in a box */
.wk-head{max-width:60ch;margin:0 0 clamp(40px,5vw,64px)}
.wk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(48px,5.6vw,88px)}
.wk-row{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,.78fr);
  gap:clamp(26px,3.8vw,56px);align-items:center}
.wk-row:nth-child(even){grid-template-columns:minmax(0,.78fr) minmax(0,1.62fr)}
.wk-row:nth-child(even) .wk-fig{grid-column:2;grid-row:1}
.wk-row:nth-child(even) .wk-body{grid-column:1;grid-row:1}
.wk-fig{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#0b1322;
  box-shadow:0 44px 84px -44px rgba(0,0,0,.92),0 12px 28px -20px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.09);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.wk-chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:linear-gradient(180deg,#111e33,#0c1526);border-bottom:1px solid rgba(255,255,255,.07)}
.wk-chrome i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}
.wk-chrome i:nth-child(1){background:rgba(255,122,110,.55)}
.wk-chrome i:nth-child(2){background:rgba(240,190,92,.5)}
.wk-chrome i:nth-child(3){background:rgba(110,222,164,.45)}
.wk-chrome em{margin-left:9px;font-style:normal;font-size:11px;letter-spacing:.03em;
  color:rgba(150,172,198,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the frame is a fixed 16:10 and the image covers it, so a capture can never be stretched */
.wk-fig img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  transition:transform 1.2s var(--ease);transform-origin:50% 18%}
.wk-row:hover .wk-fig{transform:translateY(-4px);
  box-shadow:0 54px 96px -46px rgba(0,0,0,.95),0 14px 32px -20px rgba(0,0,0,.85),
    0 0 0 1px rgba(94,234,212,.22)}
.wk-row:hover .wk-fig img{transform:scale(1.018)}
.wk-act{margin:14px 0 0}
.wk-act a{display:inline-flex;align-items:center;gap:7px;font-size:13px;letter-spacing:.01em;
  color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(94,234,212,.32);padding-bottom:2px}
.wk-act a:hover{border-bottom-color:var(--accent)}
.wk-meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 clamp(10px,1.2vw,16px)}
.wk-n{font-size:10.5px;letter-spacing:.22em;color:rgba(94,234,212,.62);font-variant-numeric:tabular-nums}
.wk .tag{margin:0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(143,163,186,.95)}
.wk-body h3{font-size:clamp(20px,1.9vw,26px);line-height:1.12;letter-spacing:-.025em;margin:0 0 12px}
.wk-body p{font-size:14.5px;line-height:1.62;max-width:42ch;margin:0 0 12px}
.wk-body .fix{margin:0;color:#cfd9e6}
.fix{color:#cfd9e6}
.fix b{color:var(--accent);font-weight:600}

/* the login tier reads as an index, not a second card grid */
.wk-more{margin-top:clamp(56px,7vw,92px)}
.sys-head{margin:0 0 clamp(18px,2vw,26px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line);max-width:58ch;
  font-size:14.5px;line-height:1.62;color:#b9c6d6}
.systems{list-style:none;margin:0;padding:0}
.sys{display:grid;grid-template-columns:44px minmax(0,1fr);padding:clamp(20px,2.4vw,28px) 0;
  border-top:1px solid rgba(255,255,255,.055)}
.sys .n{font-size:10px;letter-spacing:.14em;color:rgba(94,234,212,.5);
  font-variant-numeric:tabular-nums;padding-top:5px}
.sys>div{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(16px,2.6vw,44px);align-items:start}
.sys h4{margin:0;font-size:15px;font-weight:600;letter-spacing:-.005em}
.sys p{margin:0;font-size:14px;line-height:1.55;max-width:44ch}
.sys .fix{color:#cfd9e6}

/* inner page hero */
.page-hero{padding:clamp(64px,9vw,120px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,64px);align-items:center}
.page-hero .mascot{justify-self:end;width:min(360px,100%);position:relative;
  border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.10);
  background:radial-gradient(120% 100% at 50% 0%,#0d1a24,#070b13 72%);
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  animation:breathe 6.4s ease-in-out infinite;transform-origin:50% 100%}
.page-hero .mascot img{display:block;width:100%;height:auto}
.page-hero::after{content:"";position:absolute;right:-6%;top:8%;width:52vw;height:52vw;max-width:640px;
  max-height:640px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(94,234,212,.14),rgba(94,234,212,.05) 46%,transparent 70%)}

/* cta band — its own section, so it never stacks padding against the block above */
.cta-sec{border-top:1px solid var(--line);padding:clamp(56px,7vw,88px) 0}
.cta-band{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,64px);align-items:center}
.cta-band .btn{justify-self:start}
.btn{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;
  background:linear-gradient(135deg,#8bf6e5 0%,#4ae0cb 46%,#14b3a2 100%);
  color:#04201d;font-weight:600;font-size:14px;letter-spacing:-.005em;
  box-shadow:0 10px 26px rgba(13,148,136,.26),inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(4,32,29,.16);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease)}
.btn::after{content:"";position:absolute;top:-70%;bottom:-70%;left:-30%;width:38%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:rotate(14deg) translateX(-180%);opacity:0}
.btn.shine::after{animation:sweep 5.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sweep{
  0%,64%{transform:rotate(14deg) translateX(-180%);opacity:0}
  70%{opacity:1}
  88%,100%{transform:rotate(14deg) translateX(520%);opacity:0}
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04);
  box-shadow:0 16px 34px rgba(94,234,212,.3),inset 0 1px 0 rgba(255,255,255,.45)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid rgba(255,255,255,.20);
  box-shadow:none;overflow:visible}
.btn.ghost::after{display:none}
.btn.ghost:hover{border-color:rgba(94,234,212,.6);background:rgba(94,234,212,.06);
  box-shadow:0 0 0 3px rgba(94,234,212,.08)}

/* back to top — appears once the page has been scrolled a screen */
.totop{position:fixed;right:clamp(18px,3vw,34px);bottom:clamp(18px,3vw,34px);z-index:60;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(12,20,36,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.13);color:var(--fg);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,
    border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:rgba(94,234,212,.6);color:var(--accent);background:rgba(12,20,36,.92)}
.totop:active{transform:translateY(1px)}
.totop svg{display:block}
#work{scroll-margin-top:clamp(72px,9vh,96px);padding-bottom:clamp(36px,4.5vw,56px)}

/* footer */
.foot{border-top:1px solid var(--line);padding:40px 0;color:var(--mu);font-size:13px}
.foot-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap}

/* focus + a11y */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#04222a;padding:10px 16px;z-index:99}
.skip:focus{left:12px;top:12px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .page-hero .wrap{grid-template-columns:1fr;gap:28px}
  .page-hero .mascot{justify-self:start;width:min(300px,62%)}
  .cta-band{grid-template-columns:1fr}
}
@media (max-width:860px){
  .symptoms{grid-template-columns:1fr}
  .wk-row,.wk-row:nth-child(even){grid-template-columns:1fr;gap:24px}
  .wk-row:nth-child(even) .wk-fig,.wk-row:nth-child(even) .wk-body{grid-column:1;grid-row:auto}
  .wk-fig{grid-row:1}
  .wk-body{grid-row:2}
  .wk-body p{max-width:52ch}
  .sys>div{grid-template-columns:1fr;gap:8px}
  .sys p{max-width:56ch}
  .step{grid-template-columns:1fr;gap:6px}
  .step .num{padding-top:0}
}
@media (max-width:720px){
  .nav-in{display:flex;gap:10px 14px;padding:12px var(--pad);flex-wrap:wrap}
  .nav ul{flex-wrap:wrap;row-gap:10px;gap:8px 18px;justify-content:flex-start;width:100%}
  .brand{width:100%}
  .nav ul{margin:0;width:100%;justify-content:space-between;gap:10px}
  .nav li a{font-size:12.5px;white-space:nowrap}
  .nav .cta{display:none}
  .hero{height:auto;min-height:0;display:flex;flex-direction:column}
  .stage{position:relative;inset:auto;flex:1 1 auto;min-height:52svh;order:2}
  .hero .copy{position:relative;left:auto;bottom:auto;max-width:none;order:1;
    margin:7vh 0 0 var(--pad);padding-right:var(--pad)}
  .svc{position:relative;top:auto;left:auto;order:0;margin:5vh 0 0 var(--pad)}
  .svc ol{grid-template-columns:1fr 1fr;gap:5px 18px}
  .svc li{font-size:10px}
  .hint{display:none}
  .hero::before{background:linear-gradient(180deg,rgba(7,11,19,.92) 0%,rgba(7,11,19,.65) 32%,rgba(7,11,19,0) 52%)}
  .wk-fig{margin-inline:0;border-radius:12px}
  .wk-row{padding:26px 0}
  h1{font-size:clamp(26px,7vw,34px)}
}

/* hero actions + video handoff */
.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
#greet{transition:opacity .6s var(--ease)}
#greet.is-done{opacity:0;pointer-events:none}

/* mascot crop: dissolve the rectangle into the page */

/* toolkit cards — deliberately not numbered, so they don't read as a second list of symptoms */
.svc-card{padding:22px 0;border-top:1px solid var(--line)}
.svc-card h3{font-size:15px;letter-spacing:.01em;margin-bottom:6px}
.svc-card p{margin:0;font-size:14px;max-width:40ch}

/* ============ hero v3: copy left, mascot centre, services right ============ */
.hero3{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding:clamp(58px,7vh,86px) var(--pad) clamp(64px,9vh,110px)}   /* sits the block a little higher */
.hero3::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(58% 52% at 50% 56%,rgba(150,190,235,.075),transparent 72%),
             radial-gradient(70% 55% at 50% 42%,rgba(45,212,191,.07),transparent 76%),
             radial-gradient(120% 105% at 50% 45%,transparent 52%,rgba(0,0,0,.34) 100%)}
.h3{position:relative;z-index:2;display:grid;width:100%;max-width:1560px;margin:0 auto;
  grid-template-columns:minmax(0,1fr) minmax(360px,42vw) minmax(0,.85fr);
  gap:clamp(20px,2.6vw,56px);align-items:center}

/* left column */
.col-l{max-width:440px;justify-self:end}
.hero3 h1{font-size:clamp(22px,1.95vw,31px);line-height:1.14;letter-spacing:-.02em;margin:14px 0 16px;text-wrap:balance}
.hero3 .lede{font-size:clamp(13.5px,1vw,15px);max-width:40ch}
.hero3 .hero-actions{margin-top:24px}

/* centre stage */
.hero3 .stage{position:relative;inset:auto;overflow:visible;animation:none;min-height:0;opacity:0;
  width:100%;max-width:min(720px,44vw);aspect-ratio:1.15;justify-self:center;isolation:isolate}
.hero3 .stage canvas,.hero3 .stage video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:64% 50%;display:block}
.hero3 .stage canvas{transition:opacity .34s var(--ease), transform .6s var(--ease)}
.hero3 .stage canvas{object-fit:fill}

/* right column */
.col-r{max-width:290px;justify-self:start}
.hero3 .svc{position:static;top:auto;left:auto}
.hero3 .svc ol{gap:6px}
.hero3 .svc li{font-size:10.5px}
.r-note{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.62;letter-spacing:-.003em;color:var(--muted);max-width:34ch}
.hero3 .hint{position:static;right:auto;bottom:auto;margin-top:12px;opacity:.45;text-align:left}
.hero3 .hint.on{opacity:.6}

/* entry + motion */
.rise{opacity:0;animation:rise .85s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes halo{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}
@keyframes pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes float{from{transform:translate3d(0,0,0);opacity:.25}to{transform:translate3d(7px,-16px,0);opacity:.7}}
[data-parallax]{will-change:transform;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.mag{transition:transform .28s var(--ease),border-color .28s,background .28s}
[data-rv]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rv].in{opacity:1;transform:none}

@media (max-width:1120px){
  .h3{grid-template-columns:minmax(0,1fr) minmax(300px,40vw) minmax(0,.8fr);gap:18px}
  .hero3 h1{font-size:clamp(23px,2.6vw,32px)}
  .col-l{max-width:360px}
}
@media (max-width:900px){
  .hero3{padding:64px var(--pad) 56px;min-height:0}
  .h3{grid-template-columns:1fr;gap:26px}
  .col-l{order:1;max-width:none;justify-self:start}
  .hero3 .col-c{order:2}          /* copy, then mascot + its CTA */
  .hero3 .col-c .stage{order:0;min-height:0;flex:none;max-width:min(540px,92vw);margin:0 auto}
  .col-r{order:3;max-width:none;justify-self:start;width:100%}
  .hero3 .svc ol{grid-template-columns:1fr;display:grid;gap:8px}
  .r-note{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;animation:none}
  .orbit,.glow,  [data-parallax]{transition:none}
  [data-rv]{opacity:1;transform:none;transition:none}
}

/* poster stands in until the live rig's first frame lands (and if WebGL fails) */
.hero3 .stage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:opacity .5s var(--ease);z-index:1;pointer-events:none}
.hero3 .stage .poster.is-gone{opacity:0}
.hero3 .stage canvas{z-index:2;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ============ hero craft pass ============ */
/* dot matrix, faint, lights up around the pointer */
.hero3 .dots{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(circle 330px at var(--mx,50%) var(--my,45%), #000 0%, rgba(0,0,0,.4) 42%, transparent 72%);
  mask-image:radial-gradient(circle 330px at var(--mx,50%) var(--my,45%), #000 0%, rgba(0,0,0,.4) 42%, transparent 72%)}

/* contact shadow: grounds the shoes without a ring or a halo */
.hero3 .stage .contact{position:absolute;left:50%;bottom:3%;width:44%;height:8%;z-index:0;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.62),rgba(0,0,0,.28) 55%,transparent 74%);
  filter:blur(7px)}

/* cursor badge, glass, fades on first move */
.aim-badge{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  font-size:11px;letter-spacing:.02em;color:var(--fg);white-space:nowrap;
  background:rgba(18,26,44,.55);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);box-shadow:0 8px 26px rgba(0,0,0,.35);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.aim-badge svg{color:var(--accent);animation:nudge 2.4s ease-in-out infinite}
.aim-badge.is-gone{opacity:0;transform:translate(-50%,8px)}
@keyframes nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-2px)}}

/* services as interactive pills */
.hero3 .svc li{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.015);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease),color .3s var(--ease)}
.hero3 .svc li:hover,.hero3 .svc li.on{border-color:rgba(94,234,212,.42);background:rgba(94,234,212,.08);
  color:var(--fg);transform:translateX(3px)}
.hero3 .svc li:hover .n,.hero3 .svc li.on .n{color:var(--accent)}


/* ---------------------------------------------------------- intake layout */
.sec--intake{padding-top:clamp(40px,5vw,64px)}
.wrap--intake{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,64px);align-items:start}
.wrap--intake > .intake:only-child{grid-column:1 / -1;max-width:820px;margin:0 auto;width:100%}
.intake-intro h2{font-size:clamp(24px,2.4vw,34px);margin:10px 0 14px}
.intake-intro .lede{max-width:42ch}
.page-hero--tight{padding-bottom:clamp(20px,3vw,36px)}
@media (max-width:960px){
  .wrap--intake{grid-template-columns:1fr}
  .intake-intro h2{font-size:24px}
}


/* ---- mascot entrance: content lands first, then he resolves in ---------- */
.stage.stage--waiting{opacity:0}
.stage.stage--materialise{
  animation:materialise 1.35s cubic-bezier(.2,.7,.2,1) forwards;
  will-change:opacity,filter;
}
.stage.stage--ready{opacity:1;animation:none;filter:none}
@keyframes materialise{
  0%{opacity:0;filter:blur(14px) brightness(1.8)}
  7%{opacity:.85;filter:blur(9px) brightness(1.6)}
  13%{opacity:.08;filter:blur(12px) brightness(1.4)}
  21%{opacity:.9;filter:blur(6px) brightness(1.5)}
  29%{opacity:.18;filter:blur(9px) brightness(1.3)}
  37%{opacity:.95;filter:blur(3px) brightness(1.25)}
  45%{opacity:.26;filter:blur(6px) brightness(1.15)}
  54%{opacity:1;filter:blur(2px) brightness(1.1)}
  62%{opacity:.62;filter:blur(3px) brightness(1.05)}
  71%{opacity:1;filter:blur(1px) brightness(1.02)}
  82%{opacity:.86;filter:blur(.6px)}
  100%{opacity:1;filter:blur(0) brightness(1)}
}
@media (prefers-reduced-motion: reduce){
  .hero3 .stage,.stage.stage--waiting{opacity:1}
  .stage.stage--materialise{animation:none;opacity:1}
}

/* ---- mascot speech bubble (entrance) ---------------------------------- */
.albie-say{
  position:absolute; right:3%; top:13%; z-index:5; max-width:212px;
  padding:10px 13px; border-radius:14px;
  background:rgba(10,18,32,.82); border:1px solid rgba(120,232,220,.24);
  box-shadow:0 12px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--fg,#e8eef7); font-size:13.5px; line-height:1.42; letter-spacing:-.01em;
  opacity:0; transform:translateY(7px) scale(.965); transform-origin:10% 100%;
  transition:opacity .26s ease, transform .3s cubic-bezier(.2,.8,.2,1);
  pointer-events:none; backdrop-filter:blur(9px);
}
.albie-say.is-on{opacity:1; transform:none}
.albie-say::after{
  content:""; position:absolute; left:16px; bottom:-6px; width:11px; height:11px;
  background:rgba(10,18,32,.82); border-right:1px solid rgba(120,232,220,.24);
  border-bottom:1px solid rgba(120,232,220,.24); transform:rotate(45deg);
}
@media (max-width:900px){
  .albie-say{
    right:8px; left:auto; top:6px; max-width:min(168px, 55%);
    font-size:12.5px; padding:8px 11px; box-sizing:border-box;
  }
}

/* the beat where he stops being the animation and becomes the cursor-driven hero */
@keyframes heroShift{
  0%,100%{opacity:1}
  18%{opacity:.18}
  34%{opacity:1}
  52%{opacity:.42}
  68%{opacity:1}
}
#c3d.is-shift{animation:heroShift .32s ease-in-out}

/* while Albie is still running in and greeting, the cursor pill stays out of the way */
.stage.is-entering .aim-badge{opacity:0; transform:translateY(5px); transition:opacity .3s ease, transform .3s ease}

/* ---- intro video: two-part clip in a card, captions underneath --------- */
.hero3 .stage .intro-wrap{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:13px; padding:6px 4px;
  opacity:0; pointer-events:none;
  transition:opacity .32s var(--ease);
}
.hero3 .stage .intro-wrap.is-on{opacity:1}
.hero3 .stage .intro-wrap.is-out{opacity:0}
/* the live canvas waits behind the video */
.hero3 .stage canvas.is-pre{opacity:0; transform:scale(1.04)}

.hero3 .stage .intro-card{
  position:relative; width:min(calc(100% + 52px), 96vw); aspect-ratio:780 / 650; margin-inline:-26px;
  border-radius:16px; overflow:hidden; background:transparent;
  border:1px solid transparent;
  box-shadow:none;
}
.hero3 .stage .intro-card .intro{
  display:block; width:100%; height:100%; object-fit:cover;
  /* no mask: feathering the frame cut his arms and hair. The real cut-out is being
     rendered as a per-frame matte; until that lands the clip stays in its own card. */
}

/* captions sit inside the card, over a scrim at the bottom */
.hero3 .stage .intro-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  /* the clip is transparent now: a full-card scrim would paint a dark rounded box on the page,
     so the captions rely on their own text-shadow instead */
  background:none;
}
.hero3 .stage .intro-wrap .intro-say{
  position:absolute; left:50%; bottom:11px; transform:translate(-50%, 6px);
  z-index:6; width:calc(100% - 30px); max-width:560px;
  padding:0 4px;
  color:#fff; font-size:16.5px; line-height:1.45; letter-spacing:0; font-weight:600;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,.9), 0 6px 20px rgba(0,0,0,.8);
  min-height:1.45em;               /* the stacked lines are absolute, so hold the box open */
  opacity:0; transition:opacity .2s ease, transform .24s ease;
}
.hero3 .stage .intro-wrap .intro-say.is-on{opacity:1; transform:translate(-50%, 0)}
/* lines stack and cross-fade: display:none/block made every line change a hard cut */
.hero3 .stage .intro-wrap .intro-say .say-line{
  display:block; position:absolute; left:0; right:0; bottom:0;
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.hero3 .stage .intro-wrap .intro-say .say-line.on{opacity:1}
.hero3 .stage .intro-wrap .intro-say .w{
  opacity:.92; transition:opacity .1s linear, color .1s linear;
}
.hero3 .stage .intro-wrap .intro-say .w.cur{opacity:1; color:#8ff5e2}

.hero3 .stage .intro-sound{
  position:absolute; right:3%; top:4%; z-index:6;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px; cursor:pointer;
  background:rgba(9,16,29,.72); border:1px solid rgba(255,255,255,.14);
  color:var(--fg,#e8eef7); font:inherit; font-size:12px; letter-spacing:.01em;
  opacity:0; pointer-events:none; transition:opacity .3s ease, border-color .2s ease;
  backdrop-filter:blur(9px);
}
.hero3 .stage .intro-sound.is-on{opacity:1; pointer-events:auto}
.hero3 .stage .intro-sound:hover{border-color:rgba(120,232,220,.45)}

@media (max-width:900px){
  .hero3 .stage .intro-card{width:100%; border-radius:13px}
  .hero3 .stage .intro-wrap{gap:9px; padding:2px}
  .hero3 .stage .intro-wrap .intro-say{font-size:11.5px; bottom:7px; width:calc(100% - 18px)}
  .hero3 .stage .intro-sound{font-size:11px; padding:6px 10px; right:2%; top:3%}
}
@media (max-width:900px){
  .hero3 .stage .intro-say{font-size:12.5px; padding:7px 11px; bottom:4%; max-width:82%}
  .hero3 .stage .intro-sound{font-size:11px; padding:6px 10px; right:2%; top:3%}
}

/* ---- handover: the cut-out last frame carries him from the video into the 3D --- */
.hero3 .stage .intro-card .intro{transition:opacity .3s var(--ease)}
.hero3 .stage .intro-card .intro-end{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -46%);
  height:86%; width:auto; opacity:0; pointer-events:none;
  transition:opacity .34s var(--ease), transform .6s var(--ease);
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.45));
}
.hero3 .stage .intro-card.is-end{background:transparent; border-color:transparent; box-shadow:none}
.hero3 .stage .intro-card.is-end::after{opacity:0}
.hero3 .stage .intro-card.is-end .intro{opacity:0}
.hero3 .stage .intro-card.is-end .intro-end{opacity:1}
.hero3 .stage .intro-card.is-morph .intro-end{opacity:0; transform:translate(-50%, -46%) scale(.96)}

/* ---- post-video hero: the baked alpha sequence (frames 000-071 of look-a) ---- */
.hero3 .stage .seq{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  z-index:2;                       /* .dots and .poster sit at z-index 1 and hide it otherwise */
  object-position:50% 42%;         /* keeps his shoes clear of the “Move your cursor” pill */
  opacity:0; transition:opacity .28s var(--ease); will-change:opacity;
  /* a few px of inset: every baked cell already has 60-80 px of air, this just makes
     sure nothing can ever appear to touch the stage edge */
  transform:scale(.97); transform-origin:50% 60%}
.hero3 .stage .seq.is-on{opacity:1}

/* the clip is stopped at the handover: it must leave before the frame hero arrives,
   otherwise (with a transparent clip) two mascots sit on top of each other */
.hero3 .stage .intro-card video.is-done{opacity:0 !important; transition:opacity .12s linear}

/* ---- home hero: logo-only header, mascot CTA, slightly higher content ---- */
.hero3 .col-c{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,1.4vh,18px);min-width:0}
.hero3 .col-c .stage{width:100%}
.hero-cta{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 28px;border-radius:999px;text-decoration:none;
  background:linear-gradient(135deg,#8bf6e5 0%,#4ae0cb 48%,#10a897 100%);color:#04201d;
  font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.1;
  box-shadow:0 10px 26px rgba(13,148,136,.28), inset 0 1px 0 rgba(255,255,255,.4);
  animation:ctaPulse 4s ease-in-out infinite;
  transition:transform .2s var(--ease), filter .2s var(--ease)}
.hero-cta::after{content:"";position:absolute;top:-70%;bottom:-70%;left:-30%;width:36%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(14deg) translateX(-180%);
  animation:sweep 4.6s ease-in-out .9s infinite}
.hero-cta span{font-size:11px;font-weight:600;letter-spacing:.02em;opacity:.74;text-transform:none}
.hero-cta:hover{transform:translateY(-2px) scale(1.012);filter:brightness(1.03)}
.hero-cta:active{transform:translateY(0) scale(1)}
.hero-cta:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 10px 26px rgba(13,148,136,.28), inset 0 1px 0 rgba(255,255,255,.4),
    0 0 0 0 rgba(94,234,212,.32)}
  55%{box-shadow:0 14px 32px rgba(13,148,136,.36), inset 0 1px 0 rgba(255,255,255,.45),
    0 0 0 9px rgba(94,234,212,0)}
}
@media (max-width:820px){.hero-cta{font-size:14px;padding:12px 22px}}

/* ---------- responsive polish: header + centred mobile stack (2026-10-24) ---------- */
@media (max-width:900px){
  .nav-in{grid-template-columns:1fr;justify-items:center;gap:0;padding:12px var(--pad)}
  .brand{justify-content:center}
  .brand img{height:38px}
  .hero3{padding:38px var(--pad) 48px;min-height:100svh}
  .h3{gap:22px}
  .col-l{max-width:none;justify-self:stretch;text-align:center;margin:0 auto}
  .hero3 .eyebrow{text-align:center}
  .hero3 .lede{max-width:46ch;margin-left:auto;margin-right:auto}
  .hero3 .col-c{align-items:center}
  .hero-cta{width:min(100%,380px);justify-content:center}
  .col-r{max-width:none;justify-self:stretch;text-align:center;width:100%}
  .hero3 .svc{max-width:340px;margin:0 auto;text-align:left}
  .hero3 .svc-h{text-align:center}
  .hero3 .svc li{font-size:12px}
  .r-note{margin-left:auto;margin-right:auto;text-align:center}
}
@media (max-width:430px){
  .brand img{height:34px}
  .hero3{padding:30px 18px 40px}
  .hero3 h1{font-size:clamp(22px,6.6vw,28px)}
  .hero3 .lede{font-size:14px;max-width:38ch}
  .hero3 .svc li{font-size:11px;letter-spacing:.04em}
  .hero-cta{width:100%;font-size:14px;padding:12px 18px}
  .hero-cta span{font-size:10.5px}
}