/* =============================================================================
   Prospect Orbit — design system ("The Discovery Journey")
   Self-contained: pages built on this load ONLY this stylesheet and orbit.js.
   Sections: 1 font · 2 tokens · 3 base · 4 layout · 5 type · 6 buttons & links
   7 header · 8 devices · 9 home sections · 10 shared components · 11 footer
   12 motion & reveal · 13 reduced motion
   ========================================================================== */

/* ---------- 1. font ------------------------------------------------------ */
@font-face{font-family:"Manrope";src:url("fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap}

/* ---------- 2. tokens ---------------------------------------------------- */
:root{
  --night:#070C18;        /* deepest ground, final CTA */
  --navy:#0B1120;         /* midnight navy, hero */
  --deep:#14243D;         /* deep blue, secondary dark ground */
  --deep-2:#1B2F4E;
  --blue:#4D8EFF;         /* electric blue: accents on dark */
  --blue-act:#2563EB;     /* action blue: buttons, links on light (5.2:1 white) */
  --blue-act-hi:#1D4FC4;
  --cyan:#58D9E8;
  --white:#F7F9FC;        /* soft white ground */
  --paper:#FFFFFF;
  --slate:#98A6BA;        /* muted text on dark (7.6:1 on navy) */
  --slate-2:#B4C0D2;
  --ink:#0B1120;          /* text on light */
  --ink-2:#4A5872;        /* body on light (6.8:1 on soft white) */
  --ink-3:#5E6E84;
  --line:#E3E8F0;
  --line-2:#D5DDE8;
  --line-dark:rgba(152,166,186,.16);
  --glow:radial-gradient(closest-side,rgba(77,142,255,.28),transparent);
  --grad:linear-gradient(100deg,var(--blue) 0%,var(--cyan) 100%);

  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;

  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.08rem);
  --step-1:clamp(1.15rem,1.08rem + .35vw,1.35rem);
  --step-2:clamp(1.4rem,1.25rem + .75vw,1.85rem);
  --step-3:clamp(1.85rem,1.5rem + 1.6vw,2.9rem);
  --step-4:clamp(2.35rem,1.75rem + 2.9vw,4.25rem);
  --step-5:clamp(2.7rem,1.8rem + 4.4vw,5.6rem);

  --gutter:clamp(20px,4vw,48px);
  --max:1240px;
  --sec:clamp(84px,11vw,150px);
  --r-s:8px; --r:14px; --r-l:22px; --r-xl:30px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --shadow-1:0 1px 2px rgba(11,17,32,.06),0 8px 24px rgba(11,17,32,.06);
  --shadow-2:0 2px 6px rgba(11,17,32,.08),0 30px 60px -12px rgba(11,17,32,.22);
  --shadow-dark:0 40px 90px -20px rgba(0,0,0,.65),0 0 0 1px rgba(152,166,186,.12);
}

/* ---------- 3. base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);
  font-size:var(--step-0);line-height:1.65;font-weight:450;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:750;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--paper);color:var(--ink);
  padding:12px 18px;border-radius:var(--r-s);font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:rgba(77,142,255,.28)}

/* ---------- 4. layout ---------------------------------------------------- */
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:calc(820px + var(--gutter)*2)}
.sec{padding-block:var(--sec);position:relative}
.sec.tight{padding-block:calc(var(--sec)*.6)}
.dark{background:var(--navy);color:var(--white)}
.deep{background:var(--deep);color:var(--white)}
.light{background:var(--white)}
.paper{background:var(--paper)}
.dark p,.deep p,.hero p,.final p,.bigger p{color:var(--slate)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}

/* ---------- 5. type ------------------------------------------------------ */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 .74rem/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-act)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.dark .eyebrow,.deep .eyebrow,.bigger .eyebrow,.phead .eyebrow{color:var(--cyan)}
.h-xl{font-size:var(--step-5);letter-spacing:-.045em;line-height:1}
.h-l{font-size:var(--step-4);letter-spacing:-.042em}
.h-m{font-size:var(--step-3)}
.h-s{font-size:var(--step-2);letter-spacing:-.025em;line-height:1.2}
.lede{font-size:var(--step-1);line-height:1.6;color:var(--ink-2);max-width:56ch}
.dark .lede,.deep .lede,.hero .lede,.final .lede,.phead .lede{color:var(--slate-2)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--ink-3)}
.fine{font-size:var(--step--1);color:var(--ink-3)}
.dark .fine,.deep .fine{color:var(--slate)}
.head{display:grid;gap:20px;max-width:760px;margin-bottom:clamp(44px,6vw,72px)}
.head.center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- 6. buttons & links ------------------------------------------ */
.btn{--bg:var(--blue-act);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:.85em 1.55em;border-radius:999px;border:1px solid transparent;
  background:var(--bg);color:var(--fg);font-weight:700;font-size:.98rem;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease),border-color .25s}
.btn:hover{background:var(--blue-act-hi);transform:translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(37,99,235,.6)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn.ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--paper);border-color:var(--ink);box-shadow:none}
.dark .btn.ghost,.deep .btn.ghost,.hero .btn.ghost,.phead .btn.ghost,.btn.ghost.on-dark{--fg:var(--white);border-color:rgba(152,166,186,.35)}
.dark .btn.ghost:hover,.deep .btn.ghost:hover,.hero .btn.ghost:hover,.phead .btn.ghost:hover,.btn.ghost.on-dark:hover{background:rgba(255,255,255,.06);border-color:var(--slate-2)}
.btn.light{--bg:var(--white);--fg:var(--ink)}
.btn.light:hover{background:#fff;box-shadow:0 14px 34px -10px rgba(88,217,232,.5)}
.btn.lg{min-height:60px;padding-inline:2em;font-size:1.05rem}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:var(--blue-act);
  text-decoration:none;min-height:24px}
.link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(3px)}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.dark .link,.deep .link,.hero .link{color:var(--cyan)}

/* ---------- 7. header ---------------------------------------------------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;color:var(--white);opacity:1;visibility:visible;transform:none;
  transition:background .4s,box-shadow .4s,backdrop-filter .4s,opacity .55s var(--ease),transform .7s var(--ease),visibility .55s}
.hdr .bar{display:flex;align-items:center;gap:28px;height:78px;transition:height .4s var(--ease)}
.hdr.solid{background:rgba(7,12,24,.86);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--line-dark)}
.hdr.solid .bar{height:66px}
.hdr.on-light:not(.solid){color:var(--ink)}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit;margin-right:auto}
.brand img{width:40px;height:auto}
.brand .wm{font-weight:700;font-size:.92rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.brand .wm b{font-weight:800;color:var(--blue)}
.nav{display:flex;align-items:center;gap:6px}
.nav a{position:relative;text-decoration:none;font-weight:600;font-size:.93rem;padding:10px 14px;
  border-radius:999px;color:inherit;opacity:.82;transition:opacity .2s,background .2s}
.nav a:hover{opacity:1;background:rgba(152,166,186,.12)}
.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  border-radius:2px;background:var(--grad)}
.nav .btn{margin-left:10px;min-height:44px;padding:.6em 1.25em;font-size:.9rem;opacity:1}
.nav .btn:hover{background:var(--blue-act-hi)}
.menu-btn{display:none;width:46px;height:46px;border:1px solid rgba(152,166,186,.3);border-radius:50%;
  background:transparent;cursor:pointer;position:relative;color:inherit}
.menu-btn span{position:absolute;left:14px;right:14px;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .35s var(--ease),opacity .2s}
.menu-btn span:nth-child(1){top:18px}.menu-btn span:nth-child(2){top:26px}
.menu-open .menu-btn span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media(max-width:880px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:stretch;gap:4px;
    padding:100px var(--gutter) 40px;background:var(--night);color:var(--white);
    opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .menu-open .nav{opacity:1;visibility:visible}
  .menu-open .hdr{color:var(--white)}
  .nav a{font-size:clamp(1.6rem,7vw,2.2rem);font-weight:700;letter-spacing:-.03em;padding:12px 0;border-radius:0;
    border-bottom:1px solid var(--line-dark);opacity:1}
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{color:var(--cyan)}
  .nav .btn{margin:28px 0 0;min-height:58px;font-size:1.05rem;border-bottom:0}
  body.menu-open{overflow:hidden}
}

/* ---------- 8. devices --------------------------------------------------- */
.browser{position:relative;border-radius:14px;overflow:hidden;background:#0E1626;
  box-shadow:var(--shadow-dark)}
.browser .chrome{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;background:#121C2E;
  border-bottom:1px solid rgba(152,166,186,.1)}
.browser .chrome i{width:8px;height:8px;border-radius:50%;background:#2A3953}
.browser .chrome .url{margin-left:12px;flex:1;max-width:58%;height:16px;border-radius:999px;background:#0B1322;
  font:500 9.5px/16px var(--mono);color:var(--slate);padding-inline:10px;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;letter-spacing:.02em}
.browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.light .browser,.paper .browser{box-shadow:var(--shadow-2);background:#fff}
.light .browser .chrome,.paper .browser .chrome{background:#F1F4F9;border-bottom-color:var(--line)}
.light .browser .chrome i,.paper .browser .chrome i{background:#D3DBE6}
.light .browser .chrome .url,.paper .browser .chrome .url{background:#fff;color:var(--ink-3)}
.phone{position:relative;border-radius:34px;padding:9px;background:#05080F;
  box-shadow:var(--shadow-dark),inset 0 0 0 1.5px rgba(152,166,186,.22)}
.phone::before{content:"";position:absolute;top:16px;left:50%;translate:-50% 0;width:28%;height:18px;
  border-radius:999px;background:#05080F;z-index:2}
.phone img{width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:26px}
.light .phone,.paper .phone{box-shadow:var(--shadow-2),inset 0 0 0 1.5px rgba(152,166,186,.4)}

/* ---------- 9. home sections -------------------------------------------- */

/* 9.0 opening brand moment: the logo is the first thing anyone sees */
.intro{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(48% 48% at 50% 46%,rgba(37,99,235,.225),transparent 70%),
             radial-gradient(90% 70% at 50% 120%,rgba(88,217,232,.08),transparent 70%),var(--night);
  color:var(--white);text-align:center;padding:110px var(--gutter) 130px;isolation:isolate}
.intro::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;pointer-events:none;
  background-image:radial-gradient(rgba(152,166,186,.2) 1px,transparent 1.2px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 46%,transparent 30%,#000 75%,transparent 100%);
  mask-image:radial-gradient(50% 50% at 50% 46%,transparent 30%,#000 75%,transparent 100%)}
.intro + .hero{padding-top:clamp(96px,11vw,150px)}
.intro-stars{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.intro-stars .tw{animation:twinkle var(--tw,9s) ease-in-out var(--td,0s) infinite}
@keyframes twinkle{50%{opacity:.08}}
.intro-in{position:relative}
.intro-orbits{position:absolute;left:50%;top:50%;translate:-50% -50%;width:1600px;height:auto;z-index:-1;overflow:visible;pointer-events:none}
.intro-orbits .orb,.intro-orbits .orb-trace{fill:none;stroke-width:1.3}
.intro-orbits .trail{fill:none;stroke-linecap:butt}
.intro-orbits .core{fill:#F2F8FF;filter:drop-shadow(0 0 4px rgba(220,242,255,.9))}
@media(max-width:600px){.intro-orbits{width:340vw}}
.intro-in{display:grid;justify-items:center;gap:clamp(18px,2.6vw,30px)}
.intro-mark{width:clamp(260px,64vw,390px);position:relative}
.intro-mark::before{content:"";position:absolute;inset:-26%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(77,142,255,.345),rgba(37,99,235,.09) 60%,transparent);animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{opacity:.8;transform:scale(.97)}}
.intro-mark img{width:100%;transform-origin:50% 50%;backface-visibility:hidden;will-change:transform}
/* 3D emblem (emblem.js): sits exactly on the flat logo, then the two cross-fade */
.intro-emblem{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.1s ease;pointer-events:none;touch-action:pan-y}
.intro-mark.is-3d .intro-emblem{opacity:1;pointer-events:auto;cursor:grab}
.intro-mark.is-dragging .intro-emblem{cursor:grabbing}
.intro-mark.is-3d img{opacity:0;transition:opacity 1.1s ease}
/* Opening held while the emblem loads (<head> + emblem.js): everything in the
   intro waits, delays included, then starts together. With the emblem ready in
   time it makes the entrance itself (.emblem-entrance): same spin as the image,
   no cross-fade, and it can only be grabbed once it has arrived. */
.intro-hold .intro,.intro-hold .intro *,.intro-hold .intro *::before,.intro-hold .intro *::after{animation-play-state:paused!important}
.intro-mark.emblem-entrance img{opacity:0;transition:none}
.intro-mark.emblem-entrance .intro-emblem{opacity:1;transition:none;pointer-events:none;transform:rotate(-360deg) translateZ(0);
  animation:mark-spin 1.44s cubic-bezier(.16,.84,.32,1) .1s forwards}
.intro-wm{margin:0;display:flex;align-items:center;justify-content:center;gap:.46em;color:var(--white);
  font:800 clamp(2rem,4.2vw,3.6rem)/1 var(--font);letter-spacing:0;text-transform:uppercase;
  text-shadow:0 6px 30px rgba(0,0,0,.35)}
.intro-wm>[data-scramble]{display:flex;align-items:center;gap:.16em}
.intro-wm b{font:inherit;color:var(--blue);text-shadow:0 0 28px rgba(31,142,239,.22)}
.intro-wm .gravity-letter{display:block;will-change:translate;backface-visibility:hidden}
.intro-wm b .gravity-letter:nth-child(1){color:#2447F4}
.intro-wm b .gravity-letter:nth-child(2){color:#1E68F1}
.intro-wm b .gravity-letter:nth-child(3){color:#1689EE}
.intro-wm b .gravity-letter:nth-child(4){color:#1BAFE4}
.intro-wm b .gravity-letter:nth-child(5){color:#22D4D8}
.intro-tag{text-shadow:0 2px 14px rgba(7,12,24,.95);font-size:var(--step-1);font-weight:600;color:var(--white);letter-spacing:-.01em}
.intro-tag span{color:var(--blue);background:linear-gradient(105deg,#2447F4 0%,#1689EE 54%,#22D4D8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 22px rgba(31,142,239,.18)}
.intro-what{font:600 .74rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-top:-4px}
.scroll-cue{position:absolute;left:50%;bottom:clamp(8px,1.2vh,14px);translate:-50% 0;scale:.94;transform-origin:50% 100%;display:grid;justify-items:center;gap:12px;
  color:var(--slate-2);text-decoration:none;font:600 .7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  padding:8px 12px;border-radius:12px;transition:color .25s}
.scroll-cue:hover{color:var(--white)}
.scroll-cue .mouse{width:26px;height:42px;border-radius:14px;box-shadow:inset 0 0 0 1.6px currentColor;display:grid;justify-items:center;padding-top:8px}
.scroll-cue .mouse i{width:3px;height:8px;border-radius:2px;background:var(--cyan);animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.js .intro-mark{opacity:0;transform:scale(.12);will-change:transform,opacity;
  animation:mark-arrive 1.44s cubic-bezier(.16,1,.3,1) .1s forwards}
.js .intro-mark img{transform:rotate(-360deg) translateZ(0);
  animation:mark-spin 1.44s cubic-bezier(.16,.84,.32,1) .1s forwards}
@keyframes mark-arrive{
  0%{opacity:0;transform:scale(.12)}
  32%{opacity:1}
  100%{opacity:1;transform:scale(1)}
}
@keyframes mark-spin{to{transform:rotate(0) translateZ(0)}}
.js .intro-wm{opacity:0;animation:wordmark-in .28s ease-out 1.08s forwards}
@keyframes wordmark-in{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
.js .intro-tag,.js .intro-what,.js .scroll-cue{opacity:0;animation:fadeup .84s var(--ease) forwards}
.js .intro-tag{animation-delay:1.8s}.js .intro-what{animation-delay:2.1s}
@media(max-width:900px){
  .js .intro-mark{animation-duration:.85s;animation-delay:.05s}
  .js .intro-mark img{animation-duration:.85s;animation-delay:.05s}
  .js .intro-wm{animation-delay:.55s}
  .js .intro-tag{animation-delay:.9s}
  .js .intro-what{animation-delay:1.1s}
  .js .scroll-cue{animation-delay:1.35s}
}
/* The launch (orbit.js 0c). .launch: the lights ignite where they rest and the
   comets fly, drawing their rings (.orb-trace) and growing their tails.
   .launched (~2s later): the full rings cross-fade in under the traces and the
   rest of the sky follows. Without the launch, JS adds both classes at once. */
.js .intro-orbits,.js .intro-tails{opacity:0}
.js .intro.launch .intro-orbits,.js .intro.launch .intro-tails{opacity:1}
.js .intro-orbits .light circle{transform-box:fill-box;transform-origin:center;scale:0}
.js .intro.launch .intro-orbits .light circle{animation:ignite 1.1s cubic-bezier(.2,.75,.25,1) forwards}
.js .intro.launch .intro-orbits .light .core{animation-duration:.8s}
@keyframes ignite{0%{scale:0;opacity:0}22%{scale:2.1;opacity:1}100%{scale:1;opacity:1}}
.js .intro-orbits .orb{opacity:0;transition:opacity 1.5s ease-out}
.js .intro.launched .intro-orbits .orb{opacity:1}
.intro-orbits .orb-trace{transition:opacity 1.5s ease-in}
.intro.launched .intro-orbits .orb-trace{opacity:0}
.intro-tails{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
/* Cursor light (library BG-GEO-001, adapted): a soft brand-blue glow, and the
   intro's own 32px dot grid lit brighter inside it. Two layers, two CSS
   variables; behind everything else on the opening screen. */
.cursor-glow,.cursor-dots{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity .6s ease}
.cursor-glow{background:radial-gradient(300px circle at var(--cx,50%) var(--cy,50%),rgba(77,142,255,.13),transparent 62%)}
.cursor-dots{background-image:radial-gradient(rgba(140,190,255,.75) 1px,transparent 1.2px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(220px circle at var(--cx,50%) var(--cy,50%),#000 0%,transparent 65%);
  mask-image:radial-gradient(220px circle at var(--cx,50%) var(--cy,50%),#000 0%,transparent 65%)}
.intro.lit .cursor-glow,.intro.lit .cursor-dots{opacity:1}
@media(hover:none){.cursor-glow,.cursor-dots{display:none}}
/* Hidden constellations (opening screen): four faint star clusters in the
   corners. The cursor light uncovers them: lines draw in, stars brighten and
   the service name fades up as a link. A desktop bonus only - every page is
   also in the menu, so they are aria-hidden and out of the tab order. */
.constellations{position:absolute;inset:0;z-index:-1;pointer-events:none;display:none}
.js .constellations{display:block}
@media(hover:none){.js .constellations{display:none}}
.cst{--reveal:0;position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;display:grid;justify-items:center;gap:6px;
  width:max-content;text-decoration:none;color:var(--white);pointer-events:none}
.cst.on{pointer-events:auto}
.cst svg{overflow:visible}
.cst.tl,.cst.bl{justify-items:start;text-align:left;translate:0 -50%}.cst.tr,.cst.br{justify-items:end;text-align:right;translate:-100% -50%}
.cst.tl svg,.cst.bl svg{margin-left:10px}.cst.tr svg,.cst.br svg{margin-right:10px}
.cst path{fill:none;stroke:rgba(150,195,255,.75);stroke-width:1;
  opacity:calc(.16 + var(--reveal) * .74)}
.cst circle{fill:#D6E4FF;opacity:calc(.4 + var(--reveal) * .6)}
.cst circle.main{fill:#EAF4FF;filter:drop-shadow(0 0 calc(var(--reveal) * 6px) rgba(120,180,255,.9))}
.cst span{font:600 .72rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  opacity:var(--reveal);translate:0 calc((1 - var(--reveal)) * 6px);color:#CFE2FF}
.cst.on:hover span{color:#fff;text-decoration:underline;text-underline-offset:5px}
.cst.on:hover circle.main{fill:#58D9E8}
.js .constellations{opacity:0;transition:opacity 1.1s ease-out .5s}
.js .intro.launched .constellations{opacity:1}

.js .intro-stars,.js .intro::after{opacity:0;transition:opacity 1.3s ease-out .15s}
.js .intro.launched .intro-stars{opacity:1}
.js .intro.launched::after{opacity:.45}
.js .scroll-cue{animation-delay:3.3s}
/* The opening screen belongs entirely to the mark. Once it clears, the header
   arrives left-to-right so the second screen feels like the site opening up. */
.hdr .brand,.hdr .nav>a,.hdr .menu-btn{transition-property:opacity,transform,background,box-shadow,border-color;
  transition-duration:.55s,.7s,.25s,.35s,.25s;transition-timing-function:var(--ease)}
.hdr .brand{transition-delay:.04s}
.hdr .nav>a:nth-child(1){transition-delay:.12s}
.hdr .nav>a:nth-child(2){transition-delay:.18s}
.hdr .nav>a:nth-child(3){transition-delay:.24s}
.hdr .nav>a:nth-child(4){transition-delay:.30s}
.hdr .nav>a:nth-child(5){transition-delay:.36s}
.hdr .menu-btn{transition-delay:.12s}
.at-intro .hdr{opacity:0;visibility:hidden;transform:translateY(-18px);pointer-events:none;transition-delay:0s}
.at-intro .hdr .brand,.at-intro .hdr .nav>a,.at-intro .hdr .menu-btn{opacity:0;transform:translateY(-12px);transition-delay:0s}

/* 9.1 hero */
.hero{position:relative;overflow:hidden;background:#030a13;color:var(--white);isolation:isolate;
  min-height:calc(100vh - 66px);min-height:calc(100svh - 66px);display:flex;align-items:center;padding:82px 0 58px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,8,16,.98) 0%,rgba(2,8,16,.9) 27%,rgba(2,8,16,.48) 48%,rgba(2,8,16,.04) 70%),
    linear-gradient(0deg,rgba(2,8,16,.45),transparent 34%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  box-shadow:inset 0 -100px 120px -80px rgba(3,10,19,.9)}
.hero-earth{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#030a13}
.hero-earth img{position:absolute;left:1%;top:0;width:112%;max-width:none;height:100%;object-fit:cover;object-position:center;
  animation:earth-in 2.2s var(--ease) both}
@keyframes earth-in{from{opacity:.2;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
/* Dawn: the same planet in morning light, pixel-aligned with the night image.
   It fades in once, slowly, after the hero is on screen, then stays.
   Nothing moves, so the planet cannot drift; reduced motion keeps the night still. */
.hero-earth img.dawn{animation:none;opacity:0;transition:opacity 9s cubic-bezier(.45,0,.25,1) 1.4s}
.hero.is-in .hero-earth img.dawn{opacity:1}
.hero-orbits{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:-1;pointer-events:none}
.hero-orbits ellipse{fill:none;stroke:url(#hero-ring);stroke-width:1.1;opacity:.7}
.hero-inner{align-self:stretch;display:flex;flex-direction:column;justify-content:center;position:relative;
  max-width:none;padding-inline:clamp(28px,5.8vw,100px)}
.hero-copy{width:min(600px,48vw)}
.hero h1{font-size:clamp(3rem,2rem + 3.35vw,5rem);letter-spacing:-.048em;line-height:.98}
@media(min-width:600px){.hero .h-line{white-space:nowrap}}
.hero .lede{margin-top:clamp(20px,2.4vw,30px);max-width:44ch}
.hero .btns{margin-top:clamp(28px,3vw,40px)}
.hero-eyebrow{margin-bottom:clamp(22px,2.6vw,32px);font:600 clamp(.7rem,.55rem + .25vw,.82rem)/1.2 var(--mono);
  letter-spacing:.3em;text-transform:uppercase;color:#b9cee8}
.hero-scroll{position:absolute;left:clamp(28px,5.8vw,100px);bottom:0;display:flex;align-items:center;
  color:#b9cee8;text-decoration:none;font:600 .7rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.hero-scroll:hover{color:var(--white)}
.hero-stage{position:relative;aspect-ratio:1.18;min-width:0}
.hero-stage .orbits{position:absolute;inset:-16% -22% -10% -16%;width:138%;height:126%;pointer-events:none;overflow:visible}
.orbits ellipse,.orbits path{fill:none;stroke-linecap:round}
.orbits .o-a{stroke:url(#og);stroke-width:1.4}
.orbits .o-b{stroke:rgba(152,166,186,.22);stroke-width:1}
.orbits .o-c{stroke:rgba(88,217,232,.35);stroke-width:1;stroke-dasharray:2 7}
.orbits .node{fill:var(--cyan)}
.orbits .node-b{fill:var(--blue)}
.hero-stage .b-main{position:absolute;right:0;top:6%;width:84%;transform:perspective(1800px) rotateY(-9deg) rotateX(3deg);
  transform-origin:left center}
.hero-stage .b-back{position:absolute;left:0;top:0;width:46%;opacity:.55;filter:saturate(.8);
  transform:perspective(1400px) rotateY(-14deg) translateZ(-60px)}
.hero-stage .p-main{position:absolute;left:6%;bottom:-2%;width:24%;transform:perspective(1400px) rotateY(9deg) rotateZ(-2deg)}
.hero-stage .chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;
  border-radius:999px;background:rgba(14,22,38,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(152,166,186,.16),0 18px 40px -12px rgba(0,0,0,.6);
  font-size:.8rem;font-weight:650;color:var(--white);white-space:nowrap}
.chip .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(88,217,232,.14)}
.chip .dot svg{width:14px;height:14px;stroke:var(--cyan);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-stage .c1{right:4%;bottom:6%}
.hero-stage .c2{right:-2%;top:-1%}
.hero-cap{margin-top:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;
  padding-top:22px;border-top:1px solid var(--line-dark);font-size:.86rem;color:var(--slate)}
.hero-cap strong{color:var(--white);font-weight:650}
.hero-cap .sep{width:4px;height:4px;border-radius:50%;background:rgba(152,166,186,.4)}
@media(max-width:980px){
  .hero{padding-top:104px}
  .hero-copy{width:min(590px,72vw)}
  .hero-earth img{left:-10%;width:134%;object-position:60% center}
  .hero::before{background:linear-gradient(90deg,rgba(2,8,16,.98) 0%,rgba(2,8,16,.88) 42%,rgba(2,8,16,.25) 75%),
    linear-gradient(0deg,rgba(2,8,16,.62),transparent 45%)}
}
@media(max-width:600px){
  .hero{min-height:calc(100svh - 66px);padding:72px 0 44px;align-items:flex-start}
  .hero-inner{justify-content:flex-start}
  .hero-copy{width:100%;padding-top:9vh;padding-bottom:110px}
  .hero h1{font-size:clamp(2.8rem,13vw,4.15rem)}
  .hero .lede{font-size:1rem;max-width:34ch}
  .hero .btns{align-items:stretch;flex-direction:column;width:min(100%,330px)}
  .hero .btn{width:100%}
  .hero-earth img{left:-18%;top:18%;width:190%;height:82%;object-position:72% center;opacity:.72}
  .hero::before{background:linear-gradient(180deg,rgba(2,8,16,.98) 0%,rgba(2,8,16,.86) 48%,rgba(2,8,16,.3) 78%),
    linear-gradient(90deg,rgba(2,8,16,.92),rgba(2,8,16,.1))}
  .hero-orbits{opacity:.6}
  .hero-scroll{left:var(--gutter);bottom:24px}
}
@media(min-width:601px) and (max-height:760px){
  .hero-copy{transform:translateY(-44px)}
  .hero h1{font-size:clamp(2.9rem,4.8vw,4rem)}
  .hero .lede{margin-top:20px}
  .hero .btns{margin-top:26px}
  .hero-scroll{bottom:10px}
}

/* 9.2 problem + before/after */
.ba-figure{margin:0}
.ba{position:relative;border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:var(--shadow-2);
  aspect-ratio:16/10;user-select:none;touch-action:pan-y;--pos:50%}
.ba .pane{position:absolute;inset:0;overflow:hidden}
.ba .pane img,.ba .pane video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.ba .after{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-after-video{background:#173138;object-position:center 52%!important}
.ba-after-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,27,33,.13),rgba(8,27,33,.28)),
  radial-gradient(circle at center,transparent 12%,rgba(8,27,33,.2) 100%);pointer-events:none}
.ba-after-title{position:absolute;z-index:1;left:50%;top:50%;translate:-50% -53%;width:9.5ch;margin:0;color:#fffdf8;
  font:400 clamp(1.4rem,3.15vw,3rem)/.91 Georgia,"Times New Roman",serif;letter-spacing:-.04em;text-align:center;
  text-shadow:0 4px 24px rgba(4,18,23,.58);pointer-events:none}
.ba-after-scroll{position:absolute;z-index:1;left:50%;bottom:5%;translate:-50% 0;display:flex;align-items:center;gap:8px;
  color:rgba(255,253,248,.9);font:700 clamp(.42rem,.58vw,.58rem)/1 var(--font);letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;pointer-events:none}
.ba-after-scroll i{display:block;width:34px;height:1px;background:rgba(255,255,255,.68)}
.ba-expand{position:absolute;z-index:5;right:14px;top:14px;display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;
  border:0;border-radius:999px;background:rgba(5,13,25,.84);color:#fff;font:700 .68rem/1 var(--font);letter-spacing:.04em;
  box-shadow:0 6px 22px rgba(0,0,0,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;
  transition:background .2s,transform .25s var(--ease)}
.ba-expand:hover{background:rgba(37,99,235,.94);transform:translateY(-1px)}
.ba-expand:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ba-expand svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ba-expand .close-icon{display:none}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;translate:-1px 0;background:var(--blue-act);
  pointer-events:none;z-index:3}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;translate:-50% -50%;
  border-radius:50%;background:var(--blue-act) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E") center/22px no-repeat;
  box-shadow:0 0 0 6px rgba(37,99,235,.18),0 10px 24px -6px rgba(37,99,235,.6)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4}
.ba input[type=range]:focus-visible + .handle::after{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--blue-act)}
.ba .label{position:absolute;bottom:14px;z-index:2;font:700 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:8px 11px;border-radius:999px}
.ba .before .label{right:14px;background:rgba(255,255,255,.9);color:#48505A;box-shadow:0 5px 18px rgba(0,0,0,.12)}
.ba .after .label{left:14px;background:rgba(5,13,25,.88);color:var(--cyan);box-shadow:0 5px 18px rgba(0,0,0,.22)}
.ba-cap{margin-top:14px;font-size:.84rem;color:var(--ink-3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
body.ba-open{overflow:hidden}
.ba-figure.is-expanded{position:fixed;inset:0;z-index:2000;display:grid;place-content:center;padding:clamp(18px,3vw,42px);
  margin:0!important;background:rgba(2,8,16,.94);opacity:1!important;transform:none!important;animation:ba-backdrop .24s ease-out both}
.ba-figure.is-expanded .ba{width:min(92vw,calc((100svh - 132px)*1.6),1440px);max-width:none;animation:ba-enlarge .34s var(--ease) both}
.ba-figure.is-expanded .ba-cap{width:min(92vw,calc((100svh - 132px)*1.6),1440px);margin:14px auto 0;color:#b9cee8}
.ba-figure.is-expanded .ba-expand{background:rgba(5,13,25,.9)}
.ba-figure.is-expanded .ba-expand .expand-icon{display:none}
.ba-figure.is-expanded .ba-expand .close-icon{display:block}
@keyframes ba-backdrop{from{background:rgba(2,8,16,0)}to{background:rgba(2,8,16,.94)}}
@keyframes ba-enlarge{from{opacity:.2;transform:scale(.94)}to{opacity:1;transform:none}}
@media(max-width:560px){
  .ba-expand{right:10px;top:10px;padding:8px 10px}.ba-expand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ba-figure.is-expanded{padding:16px}.ba-figure.is-expanded .ba,.ba-figure.is-expanded .ba-cap{width:calc(100vw - 32px)}
}

/* 9.3 services */
.svc{display:grid;gap:clamp(18px,2vw,24px)}
.svc-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(28px,4vw,52px);border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.svc-row:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}
.svc-row:nth-child(even) .svc-vis{order:-1}
.svc-txt{display:grid;gap:14px;align-content:start}
.svc-n{font:600 .78rem/1 var(--mono);letter-spacing:.12em;color:var(--blue-act)}
.svc-txt h3{font-size:var(--step-3)}
.svc-txt p{color:var(--ink-2);max-width:46ch}
.ticks{display:grid;gap:9px;margin-top:6px}
.ticks li{list-style:none;display:flex;gap:11px;font-size:.95rem;color:var(--ink-2);line-height:1.5}
.ticks li::before{content:"";flex:0 0 18px;height:18px;margin-top:3px;border-radius:50%;
  background:rgba(37,99,235,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.dark .ticks li,.deep .ticks li{color:var(--slate-2)}
.svc-vis{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/11;background:var(--white);
  border:1px solid var(--line)}
@media(max-width:900px){
  .svc-row{grid-template-columns:minmax(0,1fr)}
  .svc-row:nth-child(even) .svc-vis{order:0}
}
.solution-layout{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(440px,.97fr);gap:clamp(64px,8vw,124px);align-items:center}
.solution-layout .head{margin-bottom:0}
.solution-more{margin-top:34px}
.service-teaser{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-teaser a{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:18px;row-gap:7px;
  padding:28px 48px 30px 0;color:var(--ink);text-decoration:none;transition:color .3s var(--ease),transform .3s var(--ease)}
.service-teaser a+a{border-top:1px solid var(--line)}
.service-teaser a:hover{color:var(--blue-act);transform:translateX(4px)}
.service-teaser span{font:600 .7rem/1 var(--mono);letter-spacing:.14em;color:var(--blue-act)}
.service-teaser span{grid-row:1/3;padding-top:5px}
.service-teaser b{font-size:1.08rem;letter-spacing:-.02em}
.service-teaser small{font-size:.9rem;color:var(--ink-2);line-height:1.45;max-width:38ch}
.service-teaser i{position:absolute;right:4px;top:50%;translate:0 -50%;font-style:normal;font-size:1.25rem;color:var(--blue-act);transition:transform .3s var(--ease)}
.service-teaser a:hover i{transform:translate(3px,-3px)}
@media(max-width:980px){
  .solution-layout{grid-template-columns:minmax(0,1fr);gap:clamp(48px,8vw,72px)}
  .solution-copy{max-width:760px}
}
@media(max-width:700px){
  .service-teaser a{grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:22px 34px 22px 0}
  .service-teaser a:hover{transform:none}
}
/* visual: design */
.v-design{position:absolute;inset:0;padding:7%;display:grid;grid-template-columns:1.25fr 1fr;gap:5%;
  background:linear-gradient(160deg,#F7F9FC,#EDF2FA)}
.v-design .type{background:#fff;border-radius:14px;box-shadow:var(--shadow-1);padding:9%;display:grid;align-content:space-between}
.v-design .type b{font-size:clamp(46px,7vw,84px);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--ink)}
.v-design .type small{font:600 10px/1.4 var(--mono);color:var(--ink-3);letter-spacing:.06em}
.v-design .stack{display:grid;gap:6%;align-content:stretch}
.v-design .sw{border-radius:12px;display:flex;align-items:flex-end;padding:7% 9%;font:600 9.5px/1 var(--mono);letter-spacing:.06em}
.v-design .sw:nth-child(1){background:var(--navy);color:var(--slate)}
.v-design .sw:nth-child(2){background:var(--blue-act);color:#DCE7FF}
.v-design .sw:nth-child(3){background:var(--cyan);color:#0B3640}
.v-design .grid8{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(37,99,235,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.08) 1px,transparent 1px);
  background-size:24px 24px}
/* visual: develop */
.v-dev{position:absolute;inset:0;background:var(--navy);padding:6%;display:grid;grid-template-columns:1.5fr .8fr;gap:5%;align-items:end}
.v-dev pre{margin:0;align-self:stretch;border-radius:12px;background:#0E1828;box-shadow:0 0 0 1px rgba(152,166,186,.12);
  padding:7% 7%;font:500 clamp(9px,1.05vw,11.5px)/1.75 var(--mono);color:#8FA0B8;overflow:hidden;white-space:pre}
.v-dev pre b{color:var(--cyan);font-weight:500}.v-dev pre i{color:#F4B969;font-style:normal}.v-dev pre u{color:#9FC1FF;text-decoration:none}
.v-dev .ph{border-radius:20px;padding:5px;background:#05080F;box-shadow:0 0 0 1px rgba(152,166,186,.22)}
.v-dev .ph div{border-radius:16px;aspect-ratio:9/17;background:linear-gradient(180deg,#14243D 0 38%,#F7F9FC 38%);
  display:grid;align-content:start;gap:7%;padding:16% 12%}
.v-dev .ph span{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.75)}
.v-dev .ph span:nth-child(2){width:70%;background:rgba(255,255,255,.4)}
.v-dev .ph span:nth-child(3){margin-top:44%;height:16px;width:62%;border-radius:999px;background:var(--blue-act)}
.v-dev .ph span:nth-child(4),.v-dev .ph span:nth-child(5){background:#DCE3EE}
.v-dev .bp{position:absolute;top:6%;right:6%;font:600 9px/1 var(--mono);color:var(--cyan);letter-spacing:.1em;
  border:1px solid rgba(88,217,232,.3);padding:6px 9px;border-radius:999px}
/* visual: host & support */
.v-host{position:absolute;inset:0;padding:7%;background:linear-gradient(160deg,#F7F9FC,#EAF0F9);display:grid;align-content:center}
.v-host .panel{background:#fff;border-radius:16px;box-shadow:var(--shadow-1);padding:6% 7%;display:grid;gap:4px}
.v-host .ttl{display:flex;justify-content:space-between;align-items:center;font-weight:750;font-size:.95rem;margin-bottom:8px}
.v-host .ttl span{font:600 9.5px/1 var(--mono);letter-spacing:.1em;color:#0F7A4B;background:#E3F6EC;padding:6px 9px;border-radius:999px}
.v-host .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--ink-2)}
.v-host .row b{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--ink);font-size:.8rem}
.v-host .row b::before{content:"";width:8px;height:8px;border-radius:50%;background:#1FA463;box-shadow:0 0 0 3px rgba(31,164,99,.15)}

/* 9.4 difference + orbit diagram */
.diff{min-height:clamp(760px,calc(100svh - 66px),900px);overflow:hidden;isolation:isolate;scroll-margin-top:-24px;padding-block:clamp(96px,11svh,112px) clamp(88px,10svh,104px);
  background-color:#041022;
  background-image:radial-gradient(circle at 7% 12%,rgba(187,219,255,.7) 0 1px,transparent 1.6px),
    radial-gradient(circle at 18% 64%,rgba(88,217,232,.5) 0 1px,transparent 1.6px),
    radial-gradient(circle at 34% 24%,rgba(187,219,255,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 52% 72%,rgba(77,142,255,.7) 0 1px,transparent 1.7px),
    radial-gradient(circle at 74% 18%,rgba(187,219,255,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 90% 61%,rgba(88,217,232,.52) 0 1px,transparent 1.6px),
    radial-gradient(circle at 45% 40%,rgba(77,142,255,.12),transparent 35%),linear-gradient(108deg,#030b18 0%,#06162d 60%,#041126 100%)}
.diff::before{content:"";position:absolute;inset:0;z-index:-4;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(188,220,255,.7) .7px,transparent .9px);background-size:87px 83px;background-position:19px 31px}
.diff-layout{position:relative;z-index:3;max-width:1600px;display:grid;grid-template-columns:minmax(430px,.82fr) minmax(720px,1.18fr);gap:clamp(44px,4vw,72px);align-items:center}
.diff-copy{max-width:560px;padding-top:12px}
.diff-copy h2{font-size:clamp(3.35rem,4.1vw,4.55rem);line-height:.99;letter-spacing:-.055em;margin-top:28px}
.diff-copy-body{display:grid;gap:20px;margin-top:30px;max-width:47ch}
.diff-copy-body p{font-size:clamp(1rem,.8rem + .32vw,1.18rem);line-height:1.55;color:#c0cada}
.diff-cta{margin-top:30px;box-shadow:0 14px 40px -14px rgba(37,99,235,.75)}
/* Orbits + comets (orbit.js 14): same centre as the core, drawn first so the
   ring, core and nodes all sit in front of them. Meteors: a canvas over the
   whole section, under the layout and above the Earth. */
.diff-orbits{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
.diff-orbits ellipse{fill:none;stroke-width:.2}
.diff-comets{position:absolute;left:-25%;top:-25%;width:150%;height:150%;max-width:none;pointer-events:none}
.diff-meteors{position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;pointer-events:none}
.difference-orbit{position:relative;width:min(720px,53vw,calc(100svh - 330px));aspect-ratio:1;margin-inline:auto;z-index:2}
.difference-rings{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible}
.diff-ring-outer,.diff-ring-main,.diff-ring-dash{fill:none;transform-origin:center}
.diff-ring-outer{stroke:rgba(77,142,255,.25);stroke-width:.28}
.diff-ring-main{stroke:url(#diff-ring-gradient);stroke-width:.55;filter:drop-shadow(0 0 1px rgba(88,217,232,.65))}
.diff-ring-dash{stroke:rgba(88,217,232,.38);stroke-width:.22;stroke-dasharray:1 2.2;animation:diff-ring-drift 26s linear infinite}
.diff-connectors path{fill:none;stroke:#58d9e8;stroke-width:.45;stroke-linecap:round}
.diff-connectors circle,.diff-traveller{fill:#8beaff}
.diff-traveller{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #58d9e8)}
.diff-trail{fill:none;stroke:url(#diff-trail-gradient);stroke-width:1.7;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(88,217,232,.85))}
.diff-travel{transform-origin:50px 50px;animation:diff-travel 16s linear -1s infinite}
.diff-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:31%;aspect-ratio:1;border-radius:50%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;padding:5%;background:radial-gradient(circle at 40% 32%,#173b6b,#07152a 72%);
  box-shadow:0 0 0 2px rgba(77,142,255,.45),inset 0 0 24px rgba(88,217,232,.12),0 0 62px rgba(49,124,255,.42)}
.diff-core::before{content:"";position:absolute;inset:-8%;border:1px solid rgba(88,217,232,.2);border-radius:50%}
.diff-core img{width:86%;max-width:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.42))}
.diff-core span{margin-top:-3%;font:700 clamp(.5rem,.65vw,.68rem)/1 var(--mono);letter-spacing:.25em;text-transform:uppercase;color:#fff;white-space:nowrap}
.diff-steps{position:absolute;inset:0;list-style:none}
.diff-node{position:absolute;width:84px;height:84px;z-index:3}
.diff-node-icon{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:#07182c;border:2px solid #76ddff;
  box-shadow:inset 0 0 22px rgba(88,217,232,.12),0 0 0 5px rgba(88,217,232,.05),0 0 28px rgba(88,217,232,.65);animation:diff-node-breathe 4.6s ease-in-out infinite}
.diff-node-icon::after{content:"";position:absolute;inset:-3px;border:2px solid rgba(139,234,255,.9);border-radius:50%;opacity:0;pointer-events:none}
.diff-node-icon svg{width:34px;height:34px;stroke:#bceeff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.diff-node-copy{position:absolute;color:var(--white)}
.diff-node-copy>span{font:700 .7rem/1 var(--mono);letter-spacing:.15em;color:#58a9ff}
.diff-node-copy h3{margin-top:7px;font-size:1.2rem;line-height:1.1;letter-spacing:-.025em}
.diff-node-copy p{margin-top:5px;color:#c1cbdb;font-size:.86rem;line-height:1.38}
.diff-node.top{left:50%;top:14%;translate:-50% -50%}.diff-node.top .diff-node-copy{left:50%;bottom:calc(100% + 18px);translate:-50% 0;width:280px;text-align:center}
.diff-node.right{left:86%;top:50%;translate:-50% -50%}.diff-node.right .diff-node-copy{left:calc(100% + 26px);top:50%;translate:0 -50%;width:205px}
.diff-node.bottom{left:50%;top:86%;translate:-50% -50%}.diff-node.bottom .diff-node-copy{left:50%;top:calc(100% + 16px);translate:-50% 0;width:290px;text-align:center}
.diff-node.bottom .diff-node-copy{isolation:isolate}
.diff-node.bottom .diff-node-copy::before{content:"";position:absolute;z-index:-1;inset:-5px -6px -9px;border-radius:50%;
  clip-path:ellipse(50% 50% at 50% 50%);background:radial-gradient(ellipse at center,rgba(3,12,26,.72),rgba(3,12,26,.48) 62%,rgba(3,12,26,.12) 82%,transparent);
  -webkit-backdrop-filter:blur(6px) saturate(112%);backdrop-filter:blur(6px) saturate(112%)}
.diff-node.bottom .diff-node-copy h3,.diff-node.bottom .diff-node-copy p{text-shadow:0 1px 7px rgba(1,7,17,.92)}
.diff-node.bottom .diff-node-copy p{color:#d6e0ee}
.diff-node.left{left:14%;top:50%;translate:-50% -50%}.diff-node.left .diff-node-copy{right:calc(100% + 26px);top:50%;translate:0 -50%;width:185px;text-align:right}
.diff-mobile-list{display:none}
.diff-earth{position:absolute;z-index:0;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(2,9,20,.22),transparent 42%,rgba(2,9,20,.08)),url("img/difference-earth-horizon-v1.webp");
  background-position:center bottom;background-repeat:no-repeat;background-size:max(100%,1100px) auto;
  filter:saturate(.96) brightness(.78)}
@keyframes diff-ring-drift{to{stroke-dashoffset:-36}}
@keyframes diff-node-breathe{50%{box-shadow:inset 0 0 22px rgba(88,217,232,.2),0 0 0 7px rgba(88,217,232,.03),0 0 36px rgba(88,217,232,.78)}}
/* The orbit traveller adds .is-hit as it reaches each stage. The energy stays
   centred on that stage: a quick charge, one outward ring, then back to rest. */
.diff-node.is-hit .diff-node-icon{animation:diff-node-breathe 4.6s ease-in-out infinite,diff-node-hit .9s cubic-bezier(.18,.78,.28,1)}
.diff-node.is-hit .diff-node-icon::after{animation:diff-node-ripple .9s ease-out}
.diff-node.is-hit .diff-node-icon svg{animation:diff-node-symbol .9s ease-out}
.diff-node.is-hit .diff-node-copy{animation:diff-node-copy-hit .9s ease-out}
@keyframes diff-node-hit{
  0%,100%{transform:scale(1);background:#07182c;border-color:#76ddff}
  32%{transform:scale(1.1);background:#0c3150;border-color:#d7f8ff;box-shadow:inset 0 0 30px rgba(88,217,232,.38),0 0 0 9px rgba(88,217,232,.1),0 0 48px rgba(88,217,232,.98)}
}
@keyframes diff-node-ripple{0%{opacity:.9;transform:scale(.96)}75%,100%{opacity:0;transform:scale(1.55)}}
@keyframes diff-node-symbol{0%,100%{transform:scale(1);filter:none}32%{transform:scale(1.12);filter:drop-shadow(0 0 7px #8beaff)}}
@keyframes diff-node-copy-hit{0%,100%{filter:none}32%{filter:brightness(1.35) drop-shadow(0 0 8px rgba(88,217,232,.32))}}
@keyframes diff-travel{
  0%{rotate:0deg}22%{rotate:90deg}25%{rotate:90deg}47%{rotate:180deg}50%{rotate:180deg}
  72%{rotate:270deg}75%{rotate:270deg}97%,100%{rotate:360deg}}
@media(max-width:1600px) and (min-width:1181px){
  .diff-layout{grid-template-columns:minmax(360px,.74fr) minmax(620px,1.26fr);gap:clamp(24px,3vw,48px)}
  .diff-copy{max-width:510px}.diff-copy h2{font-size:clamp(3.05rem,3.8vw,4rem)}
  .diff-copy-body{gap:15px;margin-top:22px}.diff-copy-body p{font-size:clamp(.92rem,.75rem + .24vw,1.05rem)}
  .diff-cta{margin-top:24px}.difference-orbit{width:min(660px,50vw,calc(100svh - 330px))}
  .diff-node{width:76px;height:76px}.diff-node-icon svg{width:31px;height:31px}
  .diff-node-copy p{font-size:.8rem}.diff-node-copy h3{font-size:1.08rem}
  .diff-node.right .diff-node-copy{width:190px}
  .diff-node.top .diff-node-copy{bottom:calc(100% + 12px)}.diff-node.bottom .diff-node-copy{top:calc(100% + 12px)}
}
@media(max-width:1180px){
  .diff{padding-bottom:150px}.diff-layout{grid-template-columns:minmax(0,1fr);gap:140px}.diff-copy{max-width:620px}
  .difference-orbit{width:min(690px,80vw)}
}
@media(max-width:1120px){
  .diff-node.right .diff-node-copy{width:180px}.diff-node.left .diff-node-copy{width:170px}
  .diff-node-copy p{font-size:.8rem}.diff-node-copy h3{font-size:1.08rem}
}
@media(max-width:900px){
  .diff{padding-block:100px 180px}.diff-layout{gap:130px}.difference-orbit{width:min(655px,82vw)}
}
@media(max-width:640px){
  .diff{padding-block:86px 150px;overflow:hidden}.diff-copy h2{font-size:clamp(3rem,14vw,4.3rem)}.diff-copy-body{gap:16px}
  .diff-layout{gap:100px}.difference-orbit{width:80vw;margin-bottom:0}.diff-node{width:58px;height:58px}
  .diff-node-icon svg{width:25px;height:25px}
  .diff-node-copy{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .diff-mobile-list{display:grid;gap:0;margin-top:-70px;padding-bottom:70px;border-top:1px solid rgba(88,217,232,.2)}
  .diff-mobile-list p{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid rgba(88,217,232,.14)}
  .diff-mobile-list b{font-size:.96rem;color:var(--white)}.diff-mobile-list span{font-size:.82rem;line-height:1.45;color:var(--slate-2)}
  .diff-core span{font-size:.43rem}.diff-earth{background-size:auto 500px;filter:saturate(.9) brightness(.68)}
}

/* 9.5 work */
.feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(30px,5vw,72px);align-items:center}
.feature .shot{position:relative;padding-bottom:7%}
.feature .shot .phone{position:absolute;right:-3%;bottom:0;width:26%}
.feature .meta{display:grid;gap:18px;align-content:start}
.feature .meta h3{font-size:var(--step-3)}
.kv{display:grid;gap:0;border-top:1px solid var(--line)}
.kv div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.kv dt{font:600 .7rem/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.kv dd{margin:0;color:var(--ink)}
.badge{display:inline-flex;align-items:center;gap:7px;justify-self:start;font:700 .66rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;padding:7px 11px;border-radius:999px;background:rgba(37,99,235,.09);color:var(--blue-act)}
.badge.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#1FA463;box-shadow:0 0 0 3px rgba(31,164,99,.18)}
.dark .badge,.deep .badge{background:rgba(88,217,232,.1);color:var(--cyan)}
@media(max-width:900px){
  .feature{grid-template-columns:minmax(0,1fr)}
}

/* 9.6 process: four stages on a wave, then a dashed "ongoing improvement"
   orbit off to a beacon. orbit.js (6b) sizes the SVG to the grid and draws the
   path through the measured dot centres; the wave draws in on .is-in. */
.proc{--dot:62px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);padding-top:48px}
.proc .track{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.proc .track path{fill:none;stroke-linecap:round}
.proc .track .draw{stroke:url(#pg);stroke-width:2.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease-io)}
.proc.is-in .track .draw{stroke-dashoffset:0}
.proc .track .tail{stroke:#9DB0C8;stroke-width:1.6;stroke-dasharray:4 7;opacity:0;transition:opacity .9s ease-out 2.1s}
.proc .track .beyond{stroke:url(#pg-fade);stroke-width:1.4;opacity:0;transition:opacity .9s ease-out 2.5s}
.proc .track .beacon{fill:#1A9BF0;opacity:0;transition:opacity .6s ease-out 2.6s}
.proc .track .beacon-glow{fill:rgba(26,155,240,.22);opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .6s ease-out 2.6s}
.proc.is-in .track .tail{opacity:1}.proc.is-in .track .beyond{opacity:1}
.proc.is-in .track .beacon,.proc.is-in .track .beacon-glow{opacity:1}
.proc.is-in .track .beacon-glow{animation:beacon-pulse 2.8s ease-in-out 3.2s infinite}
@keyframes beacon-pulse{50%{scale:1.7;opacity:.35}}
.proc-head{max-width:920px;margin-bottom:clamp(20px,2.2vw,32px)}
.proc-head .lede{max-width:62ch}
.proc-head .grad-text{background-image:linear-gradient(100deg,#2447F4 0%,#1E68F1 45%,#1689EE 100%)}
.stage{position:relative;display:grid;gap:10px;align-content:start}
.stage .dot{width:var(--dot);height:var(--dot);border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;
  margin-bottom:14px;position:relative;z-index:1;
  box-shadow:0 0 0 10px rgba(37,99,235,.06),0 0 0 22px rgba(37,99,235,.03),0 10px 24px -8px rgba(11,17,32,.45);
  transition:box-shadow .5s,transform .5s var(--ease)}
.stage .dot svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.proc.is-in .stage .dot{box-shadow:0 0 0 10px rgba(37,99,235,.09),0 0 0 22px rgba(37,99,235,.04),0 0 34px 6px rgba(37,99,235,.14),0 10px 24px -8px rgba(11,17,32,.45)}
.proc.is-in .stage:nth-of-type(2) .dot{transition-delay:.6s}.proc.is-in .stage:nth-of-type(3) .dot{transition-delay:1.2s}
.proc.is-in .stage:nth-of-type(4) .dot{transition-delay:1.8s}
.stage .num{font:700 .92rem/1 var(--mono);letter-spacing:.06em;color:var(--blue-act)}
.stage h3{font-size:var(--step-2)}
.stage p{color:var(--ink-2);font-size:.95rem;max-width:32ch}
.proc-next{position:absolute;margin:0;white-space:nowrap;font:600 .66rem/1.45 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7D8DA3;
  opacity:0;transition:opacity .8s ease-out 2.7s;pointer-events:none}
.proc.is-in .proc-next{opacity:1}
.js .proc-next{display:block}.proc-next{display:none}
.proc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px 0;margin-top:clamp(44px,5vw,64px)}
.proc-foot .btn{box-shadow:0 14px 30px -12px rgba(37,99,235,.55);margin-right:clamp(16px,2.6vw,40px)}
.assure{display:flex;flex-wrap:wrap;align-items:center;gap:14px 0;margin:0;padding:0;list-style:none}
.assure li{display:inline-flex;align-items:center;gap:12px;padding-inline:clamp(16px,2vw,30px);color:var(--ink-2);font-size:.95rem;
  border-left:1px solid var(--line-2)}
.assure svg{width:24px;height:24px;flex:none;fill:none;stroke:#5B6B82;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .proc-head{margin-bottom:40px}
  .proc{grid-template-columns:minmax(0,1fr);padding-top:0;gap:0;--dot:52px}
  .proc .track,.js .proc-next{display:none}
  .stage{grid-template-columns:var(--dot) minmax(0,1fr);column-gap:22px;row-gap:8px;padding-bottom:34px}
  .stage::before{content:"";position:absolute;left:calc(var(--dot)/2 - 1px);top:var(--dot);bottom:0;width:2px;
    background:linear-gradient(#2447F4,#22D4D8);opacity:.35}
  .stage:last-of-type::before{background:none;border-left:2px dashed #B9C6D8;opacity:1;width:0}
  .stage .dot{grid-row:span 3;margin:0}
  .stage .dot svg{width:21px;height:21px}
}
@media(max-width:700px){
  .proc-foot{flex-direction:column;align-items:stretch}
  .proc-foot .btn{margin-right:0}
  .assure{flex-direction:column;align-items:flex-start;gap:14px}
  .assure li{border-left:0;padding-inline:0}
}

/* 9.7 bigger picture */
.bigger{min-height:820px;overflow:hidden;isolation:isolate;padding-block:clamp(86px,6vw,118px);color:var(--white);
  background:radial-gradient(60% 85% at 75% 46%,rgba(0,93,216,.2),transparent 72%),
    linear-gradient(108deg,#020a17 0%,#03142a 62%,#020c1c 100%)}
.bigger>.field{display:none}
.bigger-grid{position:absolute;z-index:-3;inset:0;pointer-events:none;opacity:.24;
  background-image:linear-gradient(rgba(25,143,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(25,143,255,.18) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 58%,#000 100%);mask-image:linear-gradient(90deg,transparent 22%,#000 58%,#000 100%)}
.bigger-orbits{position:absolute;z-index:-1;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
.bigger-orbits path{fill:none;stroke:#168eee;stroke-width:1.1;stroke-dasharray:8 5;opacity:.72}
.bigger-orbits path:nth-child(2){stroke:#065db9;stroke-dasharray:3 8;opacity:.55}.bigger-orbits path:nth-child(3){opacity:.32}
.bigger-orbits circle{fill:#75dfff;filter:drop-shadow(0 0 7px #168eff)}
.bigger-art{position:absolute;z-index:0;inset:90px 0 auto;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center bottom;pointer-events:none;
  filter:saturate(1.04) brightness(.9);animation:bigger-drift 10s ease-in-out infinite alternate}
.bigger::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,10,23,.98) 0%,rgba(2,10,23,.91) 24%,rgba(2,10,23,.28) 43%,transparent 61%),
    linear-gradient(0deg,rgba(2,9,20,.22),transparent 35%)}
.bigger-layout{position:relative;z-index:3;max-width:1600px;min-height:584px;display:flex;align-items:center}
.bigger-copy{width:min(540px,40vw);display:grid;gap:0}
.bigger-copy .eyebrow{margin-bottom:36px}
.bigger-copy h2{font-size:clamp(3.6rem,4.7vw,5.6rem);line-height:.96;letter-spacing:-.055em}
.bigger-body{display:grid;gap:23px;margin-top:30px;max-width:51ch}
.bigger-body p{font-size:clamp(1rem,.82rem + .26vw,1.24rem);line-height:1.52;color:#c1cbda}
.bigger-body .bigger-lede{font-size:clamp(1.08rem,.9rem + .28vw,1.28rem);color:#f2f6fd}
.bigger-cta{justify-self:start;margin-top:34px;box-shadow:0 16px 46px -18px rgba(0,119,255,.9)}
.bigger-callouts{position:absolute;z-index:2;inset:0;pointer-events:none}
/* Callouts: placed by orbit.js (16) from image coordinates, so hidden until placed */
.bigger-callout{position:absolute;display:none;margin:0;font:600 .64rem/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#a9bcd5;white-space:nowrap;transition:color .35s}
.bigger-callouts.is-placed .bigger-callout{display:block}
.bigger-callout[data-side="left"]{translate:-100% 0;text-align:right}
.bigger-callout b{display:block;margin-bottom:8px;color:#6ce9f4;letter-spacing:.18em;transition:color .35s,text-shadow .35s}
.bigger-callout.is-hot b{color:#c4f8ff;text-shadow:0 0 14px rgba(88,217,232,.85)}
.bigger-callout.is-hot{color:#dfe9f7}
.bigger-leaders{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
.bigger-leaders path{fill:none;stroke:#58d9e8;stroke-width:1;stroke-opacity:.7;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-opacity .35s,stroke-width .35s}
.bigger-leaders .tip{fill:#58d9e8}
.bigger-leaders .ring{fill:none;stroke:#7fe7f5;stroke-width:1.2;transform-box:fill-box;transform-origin:center;transition:stroke .35s}
.bigger-leaders .glow{fill:url(#bp-glow);opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .45s,scale .45s;scale:.6}
.bigger-leaders .is-hot path{stroke-opacity:1;stroke-width:1.5}
.bigger-leaders .is-hot .ring{stroke:#d6fbff;animation:bp-ring 1.6s ease-out infinite}
.bigger-leaders .is-hot .glow{opacity:.85;scale:1}
.bigger-leaders .is-tx .glow{opacity:.95;scale:1.15;transition-duration:.2s}
@keyframes bp-ring{0%{scale:1;opacity:1}100%{scale:2.4;opacity:0}}
/* Blueprint activation (once, on first view): the art starts powered down and
   the scan line restores its colour. Only after that first discovery completes
   do the leaders draw out from the satellite and their labels appear. */
.bigger.bp-armed .bigger-art:not(.lit){filter:brightness(.3) saturate(.25) contrast(1.15)}
.bigger-art.lit{-webkit-mask-image:linear-gradient(90deg,#000 0 42%,rgba(0,0,0,.4) 48%,transparent 50%);mask-image:linear-gradient(90deg,#000 0 42%,rgba(0,0,0,.4) 48%,transparent 50%);
  -webkit-mask-size:200% 100%;mask-size:200% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 2.6s cubic-bezier(.5,.05,.35,1),mask-position 2.6s cubic-bezier(.5,.05,.35,1)}
.bigger.bp-on .bigger-art.lit{-webkit-mask-position:-20% 0;mask-position:-20% 0}
.bigger-scan{position:absolute;z-index:2;top:0;bottom:0;left:0;width:200px;margin-left:-100px;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(88,217,232,.06) 38%,rgba(170,242,255,.5) 50%,rgba(88,217,232,.06) 62%,transparent)}
.bigger.bp-armed .bigger-grid{transition:opacity 1.4s ease-out}
.bigger.bp-on .bigger-grid{animation:bp-grid 3.2s ease-out}
@keyframes bp-grid{25%{opacity:.6}}
.bigger.bp-staged .bigger-callout{opacity:0;transform:translateY(6px);transition:opacity .5s ease-out calc(var(--bp-d,0s) + .48s),transform .6s cubic-bezier(.2,.75,.25,1) calc(var(--bp-d,0s) + .48s),color .35s}
.bigger.bp-staged .bigger-leaders path{stroke-dashoffset:1;transition:stroke-dashoffset .65s cubic-bezier(.3,.7,.3,1) var(--bp-d,0s),stroke-opacity .35s,stroke-width .35s}
.bigger.bp-staged .bigger-leaders .ring{opacity:0;transition:opacity .22s ease-out var(--bp-d,0s),stroke .35s}
.bigger.bp-staged .bigger-leaders .tip{opacity:0;transition:opacity .22s ease-out calc(var(--bp-d,0s) + .5s)}
.bigger.bp-discovered .bigger-callout{opacity:1;transform:none}
.bigger.bp-discovered .bigger-leaders path{stroke-dashoffset:0}
.bigger.bp-discovered .bigger-leaders .ring,.bigger.bp-discovered .bigger-leaders .tip{opacity:1}
.bigger-pulse{position:absolute;z-index:2;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
@keyframes bigger-drift{to{transform:translate3d(0,-5px,0)}}
@media(max-width:1380px){.bigger-callouts{display:none}.bigger-copy{width:min(520px,44vw)}.bigger::after{background:linear-gradient(90deg,rgba(2,10,23,.98) 0%,rgba(2,10,23,.88) 31%,rgba(2,10,23,.18) 57%,transparent 70%)}}
@media(max-width:900px){
  .bigger{min-height:1120px;padding-block:88px 470px}.bigger-layout{min-height:0;align-items:start}.bigger-copy{width:100%;max-width:600px}
  .bigger-copy h2{font-size:clamp(3.15rem,13vw,4.6rem)}.bigger-copy .eyebrow{margin-bottom:28px}.bigger-body{margin-top:26px;gap:18px}
  .bigger-art{inset:auto auto 0 50%;width:1100px;height:auto;transform:translateX(-64%);object-fit:contain;animation:none;filter:saturate(1.02) brightness(.78)}
  .bigger::after{background:linear-gradient(180deg,rgba(2,10,23,.98) 0%,rgba(2,10,23,.9) 47%,rgba(2,10,23,.08) 72%,transparent 100%)}
  .bigger-grid{opacity:.15;-webkit-mask-image:linear-gradient(180deg,transparent 0 45%,#000 100%);mask-image:linear-gradient(180deg,transparent 0 45%,#000 100%)}
  .bigger-orbits{opacity:.45}
}
@media(max-width:520px){.bigger{min-height:1160px;padding-bottom:420px}.bigger-cta{width:100%;justify-content:center;padding-inline:20px}.bigger-art{width:980px;transform:translateX(-66%)}}
@media(prefers-reduced-motion:reduce){.bigger-art{animation:none}}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,64px);max-width:900px;
  border-top:1px solid var(--line-dark)}
.trio li{list-style:none;padding:22px 24px 0 0}
.trio li+li{padding-left:24px;border-left:1px solid var(--line-dark)}
.trio small{display:block;font:600 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:10px}
.trio b{display:block;color:var(--white);font-size:1.02rem;font-weight:700;letter-spacing:-.015em;line-height:1.35}
.trio .now small{color:var(--cyan)}
@media(max-width:700px){.trio{grid-template-columns:minmax(0,1fr)}.trio li+li{padding-left:0;border-left:0}
  .trio li{padding:18px 0;border-bottom:1px solid var(--line-dark)}}

/* 9.75 horizon ------------------------------------------------------------ */
.light-link{color:var(--white)!important;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.light-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s var(--ease)}
.light-link:hover svg{transform:translateX(4px)}
/* About, "Looking ahead": two zigzag rows (copy | platform orbit, then
   Kepler | copy) and a closing line, so each visual sits beside its words. */
.about-future-wrap{display:grid;gap:clamp(76px,9vw,132px)}
.about-future-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.about-future-row.is-flipped{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.about-future-copy{max-width:600px}
.about-future-copy h2,.about-future-copy h3{margin-top:18px;color:var(--white)}
.about-future-copy .lede{margin-top:20px}
.about-future-copy>p:not(.lede):not(.eyebrow){margin-top:18px;max-width:56ch;font-size:1.02rem;line-height:1.7;color:var(--slate-2)}
.about-future-copy strong{color:var(--white);font-weight:700}
.kepler-points{display:grid;gap:12px;margin-top:22px;padding:0;list-style:none}
.kepler-points li{display:flex;gap:12px;align-items:baseline;color:#DCE8F7;font-size:1.02rem;line-height:1.5}
.kepler-points li::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px rgba(88,217,232,.7);translate:0 -1px}
.kepler-name{margin-top:28px;border-top:1px solid rgba(88,217,232,.28);border-bottom:1px solid rgba(88,217,232,.14)}
.kepler-name summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 2px;list-style:none;cursor:pointer;font:650 .69rem/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);transition:color .2s ease}
.kepler-name summary::-webkit-details-marker{display:none}
.kepler-name summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.kepler-name[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.kepler-name summary:hover{color:#B9F6FF}
.kepler-name summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}
.kepler-name>p{max-width:52ch;padding:0 2px 22px;color:#C7D4E6;font-size:.94rem;line-height:1.65}
.about-future .kepler-reveal{position:relative;top:auto;align-self:center}
.about-future-close{display:grid;justify-items:center;gap:24px;max-width:700px;margin-inline:auto;padding-top:clamp(40px,5vw,60px);
  border-top:1px solid rgba(152,166,186,.18);text-align:center}
.about-future-close p{font-size:var(--step-1);line-height:1.55;color:var(--slate-2)}
.about-future-close strong{color:var(--white)}
.platform-orbit{position:relative;justify-self:center;width:min(560px,100%);aspect-ratio:520/420;margin:0}
.platform-orbit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.platform-orbit .pl-orbit{fill:none;stroke:rgba(88,217,232,.32);stroke-width:1.2}
.platform-orbit .pl-orbit.faint{stroke:rgba(77,142,255,.22);stroke-dasharray:2 6}
.platform-orbit .pl-light .glow{fill:rgba(88,217,232,.22)}
.platform-orbit .pl-light .core{fill:#E8F7FF}
.platform-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:21%;height:auto;filter:drop-shadow(0 8px 24px rgba(37,99,235,.55))}
.platform-node{position:absolute;translate:-50% -50%;display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(152,166,186,.28);background:rgba(7,16,34,.86);font:600 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#C9D7EA}
.platform-node::before,.platform-key::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid #7FA3D6}
.platform-node.is-live,.platform-key.is-live{color:#E8F7FF}
.platform-node.is-live{border-color:rgba(88,217,232,.55)}
.platform-node.is-live::before,.platform-key.is-live::before{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 8px rgba(88,217,232,.8)}
.platform-orbit figcaption{position:absolute;left:50%;bottom:3%;translate:-50% 0;display:flex;gap:20px;white-space:nowrap}
.platform-key{display:flex;align-items:center;gap:8px;font:600 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.kepler-reveal{position:sticky;top:clamp(112px,14vh,160px);align-self:start;margin:0;aspect-ratio:16/9;overflow:hidden;
  border:1px solid rgba(88,217,232,.2);border-radius:clamp(22px,3vw,36px);background:#020713;
  box-shadow:0 32px 80px -42px rgba(0,0,0,.9),0 0 70px -35px rgba(77,142,255,.65);isolation:isolate}
.kepler-reveal::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 -70px 90px -80px rgba(88,217,232,.28)}
.kepler-reveal video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.06) contrast(1.03)}
@media(max-width:900px){
  .about-future-row,.about-future-row.is-flipped{grid-template-columns:minmax(0,1fr)}
  .kepler-reveal{position:relative;top:auto;width:min(720px,100%);justify-self:center}
  .platform-orbit{width:min(520px,100%)}
}
@media(max-width:560px){.platform-node{padding:6px 9px;font-size:.56rem;gap:6px}.platform-orbit figcaption{gap:14px;bottom:0}}
@media(max-width:560px){.kepler-reveal{border-radius:20px}.kepler-name summary{padding-block:18px}}
@media(prefers-reduced-motion:reduce){.kepler-reveal video{filter:none}}
/* About founder story: a steady editorial column rather than a short bio
   squeezed beside an unrelated image. The introduction remains visible as
   the longer first-person story moves past it on wide screens. */
.about-founder{background:linear-gradient(145deg,#fff 0%,#F6F8FC 100%)}
.about-founder-grid{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(54px,8vw,124px);align-items:start}
.about-founder-intro{position:sticky;top:116px;padding-top:4px}
.about-founder-intro h2{max-width:12ch;margin-top:22px;font-size:clamp(2.2rem,3.4vw,3.7rem);line-height:1.04}
.about-founder-intro::after{content:"";display:block;width:min(250px,72%);height:1px;margin-top:34px;background:linear-gradient(90deg,var(--blue-act),var(--cyan),transparent)}
.about-founder-portrait{position:relative;width:min(390px,100%);aspect-ratio:1.06/1;margin:32px 0 0;display:grid;align-items:end;isolation:isolate}
.about-founder-portrait::before{content:"";position:absolute;z-index:-2;inset:5% 4% 2%;border-radius:50% 50% 18% 18%;background:
  radial-gradient(circle at 50% 38%,rgba(88,217,232,.26),transparent 42%),
  linear-gradient(145deg,#071326 0%,#10284D 100%);box-shadow:inset 0 0 0 1px rgba(77,142,255,.28),0 24px 48px -34px rgba(11,17,32,.75)}
.about-founder-portrait::after{content:"";position:absolute;z-index:-1;inset:15% -2% 11%;border:1px solid rgba(88,217,232,.28);border-radius:50%;transform:rotate(-15deg) scaleX(1.08)}
.about-founder-portrait img{width:108%;max-width:none;height:auto;margin-left:-4%;filter:drop-shadow(0 18px 18px rgba(2,8,20,.28));transform-origin:50% 100%;transition:transform .7s var(--ease)}
.about-founder-portrait:hover img{transform:translateY(-4px) scale(1.012)}
.about-founder-story{max-width:760px;display:grid;gap:20px;color:var(--ink-2);font-size:clamp(1rem,.96rem + .17vw,1.12rem);line-height:1.75}
.about-founder-story p{max-width:68ch}
.about-founder-story strong{color:var(--ink);font-weight:750}
.about-founder-lead{font-size:clamp(1.25rem,1.08rem + .65vw,1.65rem);line-height:1.5;color:var(--ink)}
.about-founder-turn{margin-top:8px;font-size:clamp(1.18rem,1.04rem + .5vw,1.5rem);line-height:1.45}
.about-founder-principle{position:relative;margin:12px 0 10px;padding:28px clamp(24px,4vw,42px);border-left:3px solid var(--blue-act);background:var(--navy);color:var(--white);font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);line-height:1.42;letter-spacing:-.025em;box-shadow:var(--shadow-1)}
.about-founder-principle::after{content:"";position:absolute;right:24px;top:22px;width:54px;height:54px;border:1px solid rgba(88,217,232,.25);border-radius:50%;box-shadow:0 0 34px rgba(77,142,255,.15)}
.about-founder-principle strong{position:relative;z-index:1;color:var(--white)}
.about-founder-signoff{display:grid;gap:3px;margin-top:12px;padding-top:25px;border-top:1px solid var(--line)}
.about-founder-signoff strong{font-size:1.05rem}
.about-founder-signoff em{color:var(--ink-3);font-size:.9rem}
@media(max-width:850px){
  .about-founder-grid{grid-template-columns:minmax(0,1fr);gap:42px}
  .about-founder-intro{position:static}
  .about-founder-intro h2{max-width:15ch}
  .about-founder-portrait{width:min(420px,90vw);margin-inline:auto}
  .about-founder-story{max-width:680px}
}
@media(max-width:560px){
  .about-founder{padding-block:72px}
  .about-founder-intro h2{font-size:clamp(2.15rem,10.5vw,3rem)}
  .about-founder-story{gap:18px;line-height:1.68}
  .about-founder-principle{padding:24px 22px}
  .about-founder-principle::after{display:none}
}
@media(prefers-reduced-motion:reduce){.about-founder-portrait img{transition:none}.about-founder-portrait:hover img{transform:none}}
.horizon-page{background:var(--night)}
.horizon-hero{position:relative;min-height:calc(100svh - 78px);display:grid;align-items:center;overflow:hidden;background:radial-gradient(70% 100% at 72% 50%,rgba(37,99,235,.3),transparent 65%),var(--night);color:var(--white);isolation:isolate}
.horizon-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);align-items:center;gap:clamp(28px,6vw,100px);padding-block:clamp(72px,10vw,130px)}
.horizon-hero-copy{max-width:650px}.horizon-hero h1{font-size:clamp(3.5rem,6.5vw,7.2rem);line-height:.94;letter-spacing:-.065em;max-width:8ch;margin-top:20px}.horizon-hero .lede{max-width:54ch;margin-top:26px;color:var(--slate-2)}
.horizon-hero .btns{margin-top:34px}.horizon-hero .eyebrow{color:var(--cyan)}
.horizon-stars{position:absolute;inset:0;opacity:.7;background-image:radial-gradient(circle at 12% 24%,#d6e4ff 0 1px,transparent 1.5px),radial-gradient(circle at 33% 70%,#8db8ff 0 1px,transparent 1.5px),radial-gradient(circle at 61% 15%,#d6e4ff 0 1px,transparent 1.5px),radial-gradient(circle at 82% 34%,#8db8ff 0 1px,transparent 1.5px),radial-gradient(circle at 92% 81%,#d6e4ff 0 1px,transparent 1.5px);background-size:240px 220px,310px 270px,270px 250px,340px 300px,290px 260px}
.horizon-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--white);box-shadow:0 0 8px 2px rgba(141,184,255,.45);animation:twinkle 4.5s ease-in-out infinite}.horizon-stars i:nth-child(1){left:18%;top:18%}.horizon-stars i:nth-child(2){left:38%;top:82%;animation-delay:-1s}.horizon-stars i:nth-child(3){left:54%;top:23%;animation-delay:-2s}.horizon-stars i:nth-child(4){left:72%;top:12%;animation-delay:-3s}.horizon-stars i:nth-child(5){left:86%;top:68%;animation-delay:-1.7s}.horizon-stars i:nth-child(6){left:46%;top:52%;animation-delay:-.7s}.horizon-stars i:nth-child(7){left:9%;top:76%;animation-delay:-2.3s}.horizon-stars i:nth-child(8){left:94%;top:24%;animation-delay:-3.5s}.horizon-stars i:nth-child(9){left:64%;top:88%;animation-delay:-1.2s}.horizon-stars i:nth-child(10){left:28%;top:42%;animation-delay:-2.8s}.horizon-stars i:nth-child(11){left:79%;top:53%;animation-delay:-.4s}.horizon-stars i:nth-child(12){left:58%;top:72%;animation-delay:-3.8s}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.65)}50%{opacity:1;transform:scale(1.25)}}
.horizon-orbit-lines{position:absolute;width:min(940px,72vw);height:auto;right:-2%;top:50%;translate:0 -50%;overflow:visible;opacity:.85}.horizon-orbit-lines ellipse,.horizon-orbit-lines path{fill:none;stroke:rgba(152,166,186,.2);stroke-width:1}.horizon-orbit-lines ellipse:nth-of-type(2){stroke:rgba(77,142,255,.25)}.horizon-orbit-lines ellipse:nth-of-type(3){stroke:rgba(88,217,232,.18);stroke-dasharray:3 8}.horizon-orbit-lines path{stroke:url(#horizonArc);stroke-width:2;stroke-linecap:round}.horizon-dot{fill:var(--cyan)}.horizon-pulse{fill:none;stroke:var(--cyan);stroke-width:1;animation:ping 3.2s var(--ease) infinite}
.horizon-core{position:relative;display:grid;place-items:center;justify-self:center;width:min(360px,30vw);aspect-ratio:1}.horizon-core::before{content:"";position:absolute;inset:-13%;border:1px solid rgba(88,217,232,.22);border-radius:50%;transform:rotate(-28deg) scaleX(1.55)}.horizon-core img{position:relative;z-index:1;width:105%;height:auto;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
.horizon-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,8vw,120px);align-items:center}.horizon-split .lede{max-width:52ch}.horizon-beyond{background:var(--paper)}.horizon-beyond .muted{max-width:52ch}
.h-consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;line-height:1.45;color:var(--ink-2)}.h-consent input{margin-top:3px;accent-color:var(--blue-act)}
.inner-image{margin:0;overflow:hidden;border-radius:var(--r-xl);background:var(--navy);box-shadow:var(--shadow-2)}
.inner-image img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover}
.inner-image figcaption{padding:12px 16px;font:600 .66rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);background:var(--navy)}
.page-visual{margin-top:clamp(36px,5vw,64px);overflow:hidden;border-radius:var(--r-xl);background:var(--navy);box-shadow:var(--shadow-2)}
.page-visual img{display:block;width:100%;height:clamp(220px,28vw,390px);object-fit:cover}
.page-visual figcaption{display:flex;justify-content:space-between;gap:18px;padding:12px 18px;font-size:.8rem;color:var(--slate);background:var(--navy)}
.page-visual figcaption strong{color:var(--white);font-weight:650}
.page-visual.report img{object-position:center 18%}
/* Horizon subsection narrative visuals */
@media(max-width:700px){.inner-image img{min-height:220px}.page-visual img{height:230px}.page-visual figcaption{display:grid;gap:4px}}
@media(max-width:900px){.horizon-hero{min-height:auto}.horizon-hero-grid,.horizon-split,.horizon-hero-grid{padding-top:100px}.horizon-core{width:min(380px,72vw);order:-1}.horizon-orbit-lines{width:130vw;right:-45%;top:33%;opacity:.55}.horizon-hero-copy{max-width:620px}.horizon-hero h1{max-width:9ch}.about-orbit-note{min-height:200px;width:min(380px,80vw);justify-self:center}}
@media(max-width:560px){.horizon-hero h1{font-size:clamp(3.2rem,15vw,5rem)}.horizon-hero .btns{align-items:stretch;flex-direction:column}.horizon-hero .btn{width:100%}}

/* 9.8 final CTA */
.final{position:relative;min-height:820px;overflow:hidden;padding-block:clamp(108px,8vw,154px);background:
  radial-gradient(50% 56% at 50% 57%,rgba(18,75,190,.34),transparent 70%),
  radial-gradient(68% 90% at 50% 50%,rgba(2,37,83,.24),transparent 76%),#020b18;color:var(--white);text-align:center;isolation:isolate}
/* orbits: the opening screen's recipe (see .intro-orbits) - a fixed-size box
   centred on the content, so the geometry never stretches with the section */
.final-orbit-box{position:absolute;left:50%;top:calc(50% + 46px);width:1600px;aspect-ratio:16/9;translate:-50% -50%;z-index:-1;pointer-events:none}
.final-orbits{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible}
.final-orbits ellipse{fill:none;stroke-width:1.3}
.final::before{content:"";position:absolute;left:50%;top:61%;translate:-50% -50%;width:min(820px,110vw);aspect-ratio:1;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(27,93,255,.33),rgba(5,35,88,.12) 48%,transparent 72%);filter:blur(2px);animation:final-glow 6s ease-in-out infinite}
.final-in{position:relative;z-index:2;display:grid;justify-items:center;transform:translateY(24px)}
.final-eyebrow{color:#58d9e8;margin-bottom:30px}
.final-eyebrow::after{content:"";width:42px;height:1px;background:currentColor;opacity:.7}
.final h2{font-size:clamp(4rem,4.7vw,5.6rem);letter-spacing:-.052em;line-height:.97;max-width:15ch;margin-inline:auto}
.final .lede{margin:27px auto 0;max-width:58ch;font-size:clamp(1.05rem,.9rem + .28vw,1.28rem);line-height:1.52}
.final .btns{justify-content:center;margin-top:34px}
.final .final-cta{min-width:min(405px,90vw);min-height:76px;font-size:1.08rem;box-shadow:0 15px 48px -14px rgba(26,103,255,.9)}
.final .alt{margin-top:22px;font-size:.96rem;color:var(--slate)}
.final .alt a{color:var(--white);text-underline-offset:4px}
@keyframes final-glow{50%{opacity:.72;transform:scale(1.05)}}
@media(max-width:700px){
  .final{min-height:760px;padding-block:98px 110px}.final-in{transform:translateY(28px)}.final-orbit-box{width:330vw;top:calc(50% + 14px)}.final-eyebrow{margin-bottom:26px;font-size:.66rem}
  .final h2{font-size:clamp(3rem,13vw,4.2rem);max-width:10ch}.final .lede{font-size:1rem;max-width:32ch;margin-top:24px}
  .final .btns{width:100%;margin-top:30px}.final .final-cta{width:100%;min-width:0;min-height:64px;font-size:1rem}.final .alt{font-size:.85rem}
}
@media(prefers-reduced-motion:reduce){.final::before{animation:none}}

/* 9.9 homepage contact */
.home-contact{position:relative;overflow:hidden;padding-block:clamp(80px,8vw,128px);background:
  radial-gradient(55% 76% at 5% 4%,rgba(88,217,232,.1),transparent 70%),
  linear-gradient(180deg,#f6f9fe 0%,#eef4fc 100%);isolation:isolate}
.home-contact::before{content:"";position:absolute;right:-20%;top:-55%;width:70%;aspect-ratio:1;border:1px solid rgba(37,99,235,.1);border-radius:50%;z-index:-1}
.home-contact-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(560px,1.28fr);gap:clamp(48px,7vw,112px);align-items:start}
.home-contact-copy{position:sticky;top:140px;padding-top:10px}
.home-contact-copy .eyebrow{color:var(--blue-act)}
.home-contact-copy h2{max-width:10ch;margin-top:24px;font-size:clamp(3rem,4vw,4.8rem);line-height:.98;letter-spacing:-.052em}
.home-contact-copy .lede{max-width:34ch;margin-top:24px;color:var(--ink-2);font-size:clamp(1rem,.9rem + .25vw,1.18rem)}
.home-contact-note{display:grid;justify-items:start;gap:5px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.home-contact-note span,.home-contact-note small{color:var(--ink-3);font-size:.85rem}
.home-contact-note a{color:var(--ink);font-weight:750;text-underline-offset:4px}
.home-contact-form{box-shadow:0 26px 70px rgba(23,52,102,.13);border-color:rgba(74,106,157,.2);min-height:620px;scroll-margin-top:92px}
.home-contact-form textarea{min-height:132px}
.home-contact-form .actions{padding-top:2px}
.home-contact-form .actions .btn{min-width:190px}
.home-contact-form .actions .small{max-width:35ch}
.enquiry-progress{display:none;gap:9px;padding-bottom:4px}
.js .enquiry-progress{display:grid}
.enquiry-progress>span{font:650 .67rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.enquiry-progress-track{height:3px;border-radius:999px;background:rgba(37,99,235,.12);overflow:hidden}
.enquiry-progress-track i{display:block;width:33.333%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue-act),var(--cyan));transition:width .5s var(--ease)}
.enquiry-flow{display:grid;align-content:start;min-height:0}
.enquiry-step{display:grid;gap:24px}
.enquiry-step+.enquiry-step{margin-top:44px;padding-top:40px;border-top:1px solid var(--line)}
.js .enquiry-step+.enquiry-step{margin-top:0;padding-top:0;border-top:0}
.js .enquiry-step[hidden]{display:none}
.js .enquiry-step.is-active{animation:enquiry-step-in .42s var(--ease) both}
@keyframes enquiry-step-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.enquiry-step-head{display:grid;gap:10px;max-width:590px}
.enquiry-step-head .eyebrow{color:var(--blue-act)}
.enquiry-step-head h3{font-size:clamp(1.75rem,1.35rem + 1.25vw,2.5rem);line-height:1.08;letter-spacing:-.035em;max-width:18ch}
.enquiry-step-head>p:last-child{color:var(--ink-2);max-width:50ch}
.enquiry-step-final{margin-bottom:2px}
.enquiry-step-actions{display:none;align-items:center;justify-content:flex-end;margin-top:4px;padding-top:20px;border-top:1px solid var(--line)}
.js .enquiry-step-actions{display:flex}
.enquiry-step-actions.split-actions{justify-content:space-between}
.step-back{display:none;border:0;background:none;color:var(--ink-2);font:700 .92rem/1 var(--sans);padding:13px 4px;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.js .step-back{display:inline-flex}
.step-back:hover{color:var(--blue-act);text-decoration-color:currentColor}
.step-back:focus-visible{outline:2px solid var(--blue-act);outline-offset:4px;border-radius:4px}
.timeline-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.timeline-grid label{position:relative;display:flex}
.timeline-grid input{position:absolute;opacity:0;width:1px;height:1px}
.timeline-grid span{position:relative;display:grid;align-content:center;gap:4px;min-height:104px;width:100%;padding:18px 44px 18px 18px;border:1.5px solid var(--line-2);border-radius:14px;background:#fff;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,transform .25s var(--ease)}
.timeline-grid span::after{content:"";position:absolute;right:17px;top:18px;width:19px;height:19px;border:1.5px solid var(--line-2);border-radius:50%}
.timeline-grid b{font-size:.94rem;line-height:1.25}
.timeline-grid small{color:var(--ink-3);font-size:.82rem;line-height:1.4}
.timeline-grid label:hover span{border-color:#A9BCD8;transform:translateY(-2px)}
.timeline-grid input:checked+span{border-color:var(--blue-act);background:rgba(37,99,235,.055);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.timeline-grid input:checked+span::after{border:5px solid var(--blue-act)}
.timeline-grid input:focus-visible+span{outline:2px solid var(--blue-act);outline-offset:2px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1100px){
  .home-contact-layout{grid-template-columns:minmax(0,1fr);gap:38px}
  .home-contact-copy{position:static;display:grid;grid-template-columns:1fr minmax(220px,.46fr);column-gap:36px;padding-top:0}
  .home-contact-copy .eyebrow,.home-contact-copy h2{grid-column:1}.home-contact-copy .lede{grid-column:1;max-width:50ch}
  .home-contact-note{grid-column:2;grid-row:1/4;align-self:end;margin:0}
}
@media(max-width:660px){
  .home-contact{padding-block:72px}.home-contact-layout{gap:30px}
  .home-contact-copy{display:block}.home-contact-copy h2{font-size:clamp(2.7rem,13vw,3.8rem)}
  .home-contact-note{margin-top:28px}.home-contact-form{padding:22px 18px;border-radius:20px;gap:18px;min-height:0}
  .timeline-grid{grid-template-columns:minmax(0,1fr)}.timeline-grid span{min-height:84px}
  .home-contact-form .svc-unsure{display:grid;grid-template-columns:1fr}.home-contact-form .svc-unsure span{width:100%}
  .home-contact-form .actions{align-items:stretch}.home-contact-form .actions .btn{width:100%}
}

/* ---------- 10. shared components ---------------------------------------- */
.tag{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border-radius:999px;
  background:rgba(77,142,255,.1);box-shadow:inset 0 0 0 1px rgba(77,142,255,.28);font-size:.82rem;font-weight:650;color:var(--slate-2)}
.tag i{font:700 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);background:var(--cyan);
  padding:5px 8px;border-radius:999px;font-style:normal}

/* page head for inner pages (Phase C) */
.phead{position:relative;overflow:hidden;background:var(--navy);color:var(--white);
  padding-top:clamp(140px,18vh,190px);padding-bottom:clamp(64px,8vw,104px);isolation:isolate}
.phead::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(55% 70% at 85% 20%,rgba(37,99,235,.28),transparent 70%)}
.about-hero::before{background-image:
  linear-gradient(90deg,rgba(2,9,20,.98) 0%,rgba(2,9,20,.94) 34%,rgba(2,9,20,.62) 56%,rgba(2,9,20,.12) 78%,rgba(2,9,20,.02) 100%),
  linear-gradient(0deg,rgba(2,9,20,.38) 0%,transparent 46%),
  url("img/about-technology-orbit.webp");
  background-position:center;background-repeat:no-repeat;background-size:cover}
.contact-hero{min-height:clamp(640px,calc(100svh - 90px),820px);display:flex;align-items:center}
.contact-hero::before{background-image:
  linear-gradient(90deg,rgba(2,9,20,.97) 0%,rgba(2,9,20,.9) 35%,rgba(2,9,20,.58) 60%,rgba(2,9,20,.2) 100%),
  linear-gradient(0deg,rgba(2,9,20,.68) 0%,rgba(2,9,20,.02) 62%),
  url("img/contact-orbit-satellite.webp");
  background-position:center,center,right bottom;background-repeat:no-repeat;
  background-size:100% 100%,100% 100%,auto 84%;transform-origin:72% 48%;animation:contact-bg-in 1.45s var(--ease) both}
.contact-hero .wrap{width:100%}
.contact-hero .lede{max-width:650px;color:#c7d3e5}
@keyframes contact-bg-in{from{opacity:.72;transform:scale(1.025)}to{opacity:1;transform:none}}
/* Signal pulses along the painted beams (contact-beams.js). Above the image,
   below the copy; the mask follows the image's own left-hand darkening. */
.contact-beams{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .8s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.45) 45%,#000 70%);mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.45) 45%,#000 70%)}
.contact-beams.is-on{opacity:1}
@media(max-width:700px){.contact-beams{-webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.35),#000 60%);mask-image:linear-gradient(0deg,rgba(0,0,0,.35),#000 60%)}}
@media(max-width:700px){
  .contact-hero{min-height:clamp(620px,calc(100svh - 72px),760px);align-items:flex-end;padding-bottom:clamp(62px,12vh,96px)}
  .contact-hero::before{background-image:
    linear-gradient(90deg,rgba(2,9,20,.9),rgba(2,9,20,.56)),
    linear-gradient(0deg,rgba(2,9,20,.92) 0%,rgba(2,9,20,.18) 68%),
    url("img/contact-orbit-satellite-1000.webp");background-position:center,center,65% bottom;
    background-size:100% 100%,100% 100%,auto 70%}
}
.growth-hero{min-height:clamp(720px,calc(100svh - 88px),900px);display:flex;align-items:center;padding-block:clamp(122px,14vh,158px) 112px;background:#07111f}
.growth-hero::before{z-index:-3;background:
  radial-gradient(65% 100% at 79% 47%,rgba(20,94,196,.38),transparent 66%),
  linear-gradient(90deg,#06101e 0%,#071223 42%,#0a1c39 100%)}
.growth-hero::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:22%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(4,14,28,.14) 16%,rgba(7,61,111,.3) 56%,rgba(3,11,23,.9) 100%);
  border-top:1px solid rgba(76,174,255,.22);box-shadow:0 -18px 70px rgba(22,120,222,.12)}
.growth-hero-glow{position:absolute;z-index:-1;width:min(62vw,920px);aspect-ratio:1.55;right:0;bottom:8%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(38,131,255,.24),rgba(31,91,186,.07) 46%,transparent 72%);filter:blur(18px);animation:growth-glow 5s ease-in-out infinite alternate}
.growth-hero-glow::before,.growth-hero-glow::after{content:"";position:absolute;inset:17% 4%;border:1px solid rgba(86,170,255,.18);border-radius:50%;transform:rotate(-9deg)}
.growth-hero-glow::after{inset:28% -2% 10% 16%;border-color:rgba(87,218,227,.13);border-style:dashed;transform:rotate(8deg)}
.growth-hero-layout{position:relative;width:100%;min-height:520px;display:flex;align-items:center}
.growth-hero-copy{position:relative;z-index:3;width:min(600px,46%);animation:growth-copy-in .75s var(--ease) both}
.phead.growth-hero h1{max-width:10ch;font-size:clamp(3.5rem,5.15vw,6rem)}
.growth-hero h1 span{color:#5bc9ed;background:linear-gradient(105deg,#4e83ff 6%,#47d4dc 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.growth-hero .lede{max-width:570px;color:#c6d3e5}
.phead.growth-hero .lede.fact{max-width:59ch;color:#93a6c0}
.growth-hero .btn{box-shadow:0 14px 36px rgba(24,96,241,.24)}
.growth-hero-visual{position:absolute;z-index:1;width:min(61vw,980px);right:-1%;bottom:7%;pointer-events:none;animation:growth-building-in 1.2s .12s var(--ease) both}
.growth-hero-visual img{display:block;width:100%;height:auto;opacity:.96;
  filter:saturate(.72) brightness(.91) contrast(1.07) hue-rotate(-3deg) drop-shadow(0 26px 42px rgba(0,0,0,.48)) drop-shadow(0 0 22px rgba(57,139,255,.16));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 100%),linear-gradient(0deg,transparent 0,#000 8%,#000 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 100%),linear-gradient(0deg,transparent 0,#000 8%,#000 100%);mask-composite:intersect}
@keyframes growth-building-in{from{opacity:0;transform:translate3d(34px,18px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes growth-copy-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes growth-glow{to{opacity:.68;transform:scale(1.04)}}
@media(max-width:1100px){
  .growth-hero-copy{width:min(560px,52%)}.growth-hero-visual{width:min(66vw,820px);right:-10%;bottom:8%}
  .phead.growth-hero h1{font-size:clamp(3.2rem,5.4vw,4.8rem)}
}
@media(max-width:760px){
  .growth-hero{min-height:calc(100svh - 72px);align-items:flex-start;padding:112px 0 0}
  .growth-hero::before{background:radial-gradient(90% 54% at 60% 81%,rgba(29,101,210,.38),transparent 68%),linear-gradient(180deg,#06101e,#091b37)}
  .growth-hero::after{height:19%}.growth-hero-layout{min-height:calc(100svh - 184px);align-items:flex-start;padding-bottom:clamp(300px,54vw,420px)}
  .growth-hero-copy{width:100%}.phead.growth-hero h1{font-size:clamp(3rem,14vw,4.7rem);max-width:9ch}.growth-hero .lede{max-width:36ch}
  .growth-hero .lede.fact{display:none}.growth-hero .btns{margin-top:24px}.growth-hero .btn{width:auto}
  .growth-hero-visual{width:clamp(500px,135vw,730px);right:-24%;bottom:2%;opacity:.94}
  .growth-hero-visual img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 100%),linear-gradient(0deg,transparent 0,#000 6%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 100%),linear-gradient(0deg,transparent 0,#000 6%,#000 100%)}
}
@media(max-width:430px){.growth-hero-visual{right:-33%;bottom:3%}.growth-hero-layout{padding-bottom:235px}}
@media(prefers-reduced-motion:reduce){.growth-hero-copy,.growth-hero-visual,.growth-hero-glow{animation:none}}
.phead h1{font-size:var(--step-4);max-width:16ch}
.phead .lede{margin-top:22px}
.phead .lede.fact{margin-top:14px;font-size:1rem;line-height:1.6;max-width:68ch;color:var(--slate)}
.pricing-phead{min-height:clamp(610px,74svh,760px);display:flex;align-items:center}
.pricing-phead::before{background-image:
  linear-gradient(90deg,rgba(2,9,20,.98) 0%,rgba(2,9,20,.94) 31%,rgba(2,9,20,.7) 51%,rgba(2,9,20,.12) 76%),
  linear-gradient(0deg,rgba(2,9,20,.56),transparent 46%),url("img/pricing-orbital-routes.webp");
  background-position:center;background-repeat:no-repeat;background-size:cover;transform-origin:70% 50%;animation:pricing-bg-in 1.6s var(--ease) both}
.pricing-phead .wrap{width:100%}
.pricing-phead .lede{max-width:620px}
@keyframes pricing-bg-in{from{opacity:.7;transform:scale(1.025)}to{opacity:1;transform:none}}
/* Pulses up the light trails. The svg is sized and cropped exactly like the
   background photo (cover, positioned at --rp-x), so the traced trails stay on
   the painted ones at any width; the mask matches the darkening overlay. */
.route-pulses{--rp-x:50%;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;container-type:size;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.05) 31%,rgba(0,0,0,.35) 51%,#000 76%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.05) 31%,rgba(0,0,0,.35) 51%,#000 76%)}
.route-pulses svg{position:absolute;top:0;left:var(--rp-x);height:100%;width:max(100cqw,100cqh * 1916 / 821);max-width:none;
  translate:calc(var(--rp-x) * -1) 0;overflow:visible}
.route-pulses svg>path{fill:none;stroke:none}
.route-pulses .rp-tail{fill:none;stroke-linecap:round}
.route-pulses .rp-glow{stroke:#3B82F6;stroke-width:7;opacity:.28}
.route-pulses .rp-mid{stroke:#60A5FA;stroke-width:2.6;opacity:.75}
.route-pulses .rp-core{stroke:#E0F2FE;stroke-width:1.4}
.route-pulses .rp-halo{fill:url(#rp-halo)}
.route-pulses .rp-dot{fill:#DBEEFF}
@media(prefers-reduced-motion:reduce){.route-pulses{display:none}}
@media(max-width:760px){
  .pricing-phead{min-height:650px;padding-top:124px;padding-bottom:72px;align-items:flex-start}
  .pricing-phead::before{background-image:
    linear-gradient(180deg,rgba(2,9,20,.38),rgba(2,9,20,.88) 68%,rgba(2,9,20,.98) 100%),
    linear-gradient(90deg,rgba(2,9,20,.95),rgba(2,9,20,.25)),url("img/pricing-orbital-routes.webp");
    background-position:center,center,68% center}
  .route-pulses{--rp-x:68%;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7) 30%,rgba(0,0,0,.18) 62%,transparent 88%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.7) 30%,rgba(0,0,0,.18) 62%,transparent 88%)}
  .pricing-phead .lede{max-width:37ch}
  .pricing-phead .price-tag{width:100%;white-space:nowrap}
  .pricing-phead .price-tag small{white-space:normal}
}
.audit-phead{min-height:100svh;display:flex;align-items:center;padding-top:clamp(136px,16vh,180px);padding-bottom:clamp(72px,8vw,104px)}
/* The launch image sits under a left-weighted text shade in ::before. */
.audit-phead::before{background-image:
  linear-gradient(90deg,rgba(2,9,20,.97) 0%,rgba(2,9,20,.92) 29%,rgba(2,9,20,.58) 48%,rgba(2,9,20,.08) 70%,transparent 100%),
  linear-gradient(0deg,rgba(2,9,20,.62),transparent 40%)}
.audit-hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;
  background:url("img/audit-rocket-launch.webp") center/cover no-repeat;transform-origin:68% 50%;animation:audit-bg-in 1.5s var(--ease) both}
/* Launch video over the still; it fades in only once it is actually playing,
   and its first frame is the still, so the handover is invisible. */
.audit-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity .6s ease}
.audit-hero-video.is-playing{opacity:1}
.audit-hero-grid{display:block}
.audit-hero-copy{width:min(620px,51vw);min-width:0}
.audit-phead h1{max-width:11ch}
@keyframes audit-bg-in{from{opacity:.72;transform:scale(1.025)}to{opacity:1;transform:none}}
@media(max-width:1040px){
  .audit-hero-copy{width:min(650px,64vw)}
}
@media(max-width:760px){
  .audit-phead::before{background-image:
    linear-gradient(180deg,rgba(2,9,20,.6),rgba(2,9,20,.86) 43%,rgba(2,9,20,.97) 100%),
    linear-gradient(90deg,rgba(2,9,20,.92),rgba(2,9,20,.38))}
  .audit-hero-media{background-image:url("img/audit-rocket-launch-1100.webp");background-position:68% center}
  .audit-hero-video{object-position:68% center}
  .audit-hero-copy{width:100%}
}
@media(max-width:560px){
  .audit-phead{padding-top:124px}
  .audit-phead .price-tag{align-items:flex-start;flex-direction:column;gap:2px;border-radius:var(--r)}
  .audit-phead .btns{align-items:stretch;flex-direction:column}
  .audit-phead .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.audit-hero-media{animation:none}.audit-hero-video{display:none}}

/* Digital solutions: the audit iceberg becomes a broader business-improvement
   metaphor, then gives way to a restrained editorial service page. */
.solutions-phead{min-height:100svh}
/* Its own background: the iceberg still (video frame 0) under the looping
   iceberg video (hero-video.js), replacing the audit page's rocket. */
.solutions-phead .audit-hero-media{background-image:url("img/audit-iceberg-v2.webp")}
@media(max-width:760px){.solutions-phead .audit-hero-media{background-image:url("img/audit-iceberg-v2-1000.webp")}}
.solutions-phead .audit-hero-copy{width:min(690px,56vw)}
.solutions-phead h1{max-width:11.5ch;font-size:clamp(3.35rem,5.45vw,6.3rem)}
.solutions-phead .solutions-kicker{margin-top:24px;color:var(--white);font-size:clamp(1.12rem,1rem + .42vw,1.4rem);font-weight:750}
.solutions-phead .audit-intro{max-width:60ch;margin-top:16px;font-size:clamp(1rem,.94rem + .22vw,1.15rem)}
.solutions-phead .btns{display:flex;flex-wrap:wrap;gap:12px}
.solutions-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.solutions-service{position:relative;display:flex;min-width:0;min-height:390px;flex-direction:column;padding:clamp(30px,3.4vw,48px);background:var(--white);overflow:hidden}
.solutions-service+.solutions-service{border-left:1px solid var(--line)}
.solutions-service::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(145deg,rgba(77,142,255,.08),transparent 58%);transition:opacity .35s var(--ease)}
.solutions-service-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:auto;border-radius:50%;background:rgba(37,99,235,.08);color:var(--blue-act);transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.solutions-service-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.solutions-service-label{margin-top:50px;font:700 .68rem/1.2 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--blue-act)}
.solutions-service h3{max-width:15ch;margin-top:12px;font-size:clamp(1.35rem,1.08rem + .65vw,1.85rem);line-height:1.13;letter-spacing:-.035em}
.solutions-service p{margin-top:16px;color:var(--ink-2);font-size:.95rem;line-height:1.65}
.solutions-service .arrow-link,.solutions-report-copy .arrow-link{display:inline-flex;align-items:center;gap:9px;color:var(--blue-act);font-weight:750;text-decoration:none}
.solutions-service .arrow-link{margin-top:24px;align-self:flex-start}
.solutions-service .arrow-link svg,.solutions-report-copy .arrow-link svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.solutions-service .arrow-link:hover svg,.solutions-report-copy .arrow-link:hover svg{transform:translateX(4px)}
@media(hover:hover) and (pointer:fine){
  .solutions-service:hover::before{opacity:1}
  .solutions-service:hover .solutions-service-icon{transform:translateY(-3px);background:var(--blue-act);color:#fff}
}
.solutions-outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(38px,5vw,64px);border-top:1px solid rgba(152,166,186,.28);border-bottom:1px solid rgba(152,166,186,.28)}
.solutions-outcome{padding:clamp(28px,3.4vw,46px) clamp(16px,3vw,40px)}
.solutions-outcome:first-child{padding-left:0}.solutions-outcome:last-child{padding-right:0}
.solutions-outcome+.solutions-outcome{border-left:1px solid rgba(152,166,186,.28)}
.solutions-outcome span{display:block;font:700 .68rem/1 var(--mono);letter-spacing:.14em;color:var(--cyan);text-transform:uppercase}
.solutions-outcome h3{margin-top:14px;color:var(--white);font-size:clamp(1.3rem,1.1rem + .55vw,1.75rem);letter-spacing:-.025em}
.solutions-outcome p{margin-top:10px;color:var(--slate-2);font-size:.93rem;line-height:1.6}
.solutions-report-layout{display:grid;grid-template-columns:minmax(280px,.64fr) minmax(0,1.36fr);gap:clamp(42px,7vw,110px);align-items:start}
.solutions-report-intro{position:sticky;top:116px}
.solutions-report-intro .head{margin-bottom:26px}
.solutions-report-note{padding:18px 20px;border-left:2px solid var(--blue-act);background:rgba(77,142,255,.06);color:var(--ink-2);font-size:.9rem;line-height:1.6}
.solutions-report{min-width:0;border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow-2);overflow:hidden}
.solutions-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px;background:var(--paper);border-bottom:1px solid var(--line)}
.solutions-tab{appearance:none;border:0;border-radius:11px;background:transparent;padding:14px 12px;color:var(--ink-3);font:700 .77rem/1.2 var(--mono);letter-spacing:.08em;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.solutions-tab:hover{color:var(--ink)}
.solutions-tab[aria-selected="true"]{background:#fff;color:var(--blue-act);box-shadow:0 5px 18px rgba(22,45,82,.08)}
.solutions-tab:focus-visible{outline:2px solid var(--blue-act);outline-offset:-2px}
.solutions-report-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(220px,.9fr);min-height:430px}
.js .solutions-report-panel:not(.is-active){display:none}
.solutions-report-visual{display:block;min-height:430px;background:#EEF3F9;overflow:hidden}
.solutions-report-visual img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .55s var(--ease)}
.solutions-report-visual:hover img{transform:scale(1.015)}
.solutions-report-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,48px)}
.solutions-report-copy .eyebrow{color:var(--blue-act)}
.solutions-report-copy h3{margin-top:16px;font-size:clamp(1.45rem,1.2rem + .65vw,2rem);letter-spacing:-.035em;line-height:1.12}
.solutions-report-copy p{margin-top:16px;color:var(--ink-2);font-size:.94rem;line-height:1.65}
.solutions-report-copy .arrow-link{margin-top:24px;align-self:flex-start}
.solutions-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:solution-step;margin-top:clamp(42px,5vw,68px)}
.solutions-process li{position:relative;list-style:none;padding:0 clamp(28px,4vw,54px) 0 0}
.solutions-process li+li{padding-left:clamp(28px,4vw,54px);border-left:1px solid var(--line)}
.solutions-process li::before{counter-increment:solution-step;content:"0" counter(solution-step);display:block;margin-bottom:32px;font:700 .72rem/1 var(--mono);letter-spacing:.14em;color:var(--blue-act)}
.solutions-process h3{font-size:clamp(1.35rem,1.15rem + .45vw,1.7rem);letter-spacing:-.03em}
.solutions-process p{margin-top:12px;color:var(--ink-2);font-size:.94rem;line-height:1.65}
.solutions-final .cta-band{padding:clamp(38px,5.5vw,68px)}
.solutions-final .cta-band h2{max-width:23ch;font-size:clamp(2rem,1.55rem + 1.35vw,3rem)}
.solutions-final .cta-band p{max-width:62ch}
.solutions-final .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.solutions-final .cta-band .btn.ghost{--fg:var(--white);border-color:rgba(152,166,186,.45)}
.solutions-final .cta-band .btn.ghost:hover{background:rgba(255,255,255,.06);border-color:var(--slate-2);box-shadow:none}
@media(max-width:980px){
  .solutions-phead .audit-hero-copy{width:min(680px,66vw)}
  .solutions-services{grid-template-columns:minmax(0,1fr)}
  .solutions-service{min-height:0;padding:34px 0}
  .solutions-service+.solutions-service{border-left:0;border-top:1px solid var(--line)}
  .solutions-service-icon{margin-bottom:0}.solutions-service-label{margin-top:26px}
  .solutions-report-layout{grid-template-columns:minmax(0,1fr)}
  .solutions-report-intro{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);gap:28px;align-items:end}
  .solutions-report-intro .head{margin-bottom:0}
}
@media(max-width:760px){
  .solutions-phead .audit-hero-copy{width:100%}
  .solutions-phead h1{font-size:clamp(3rem,14vw,4.7rem)}
  .solutions-outcomes{grid-template-columns:minmax(0,1fr)}
  .solutions-outcome,.solutions-outcome:first-child,.solutions-outcome:last-child{padding:26px 0}
  .solutions-outcome+.solutions-outcome{border-left:0;border-top:1px solid rgba(152,166,186,.28)}
  .solutions-report-intro{grid-template-columns:minmax(0,1fr)}
  .solutions-report-panel{grid-template-columns:minmax(0,1fr)}
  .solutions-report-visual{min-height:280px;max-height:360px}
  .solutions-process{grid-template-columns:minmax(0,1fr);gap:0}
  .solutions-process li,.solutions-process li+li{padding:28px 0;border-left:0;border-top:1px solid var(--line)}
  .solutions-process li:first-child{border-top:0;padding-top:0}
  .solutions-process li::before{margin-bottom:18px}
}
@media(max-width:560px){
  .solutions-phead .btns,.solutions-final .btns{align-items:stretch;flex-direction:column}
  .solutions-phead .btn,.solutions-final .btn{width:100%}
  .solutions-final .btn{min-width:0;white-space:normal;text-align:center;line-height:1.35}
  .solutions-tabs{grid-template-columns:minmax(0,1fr);gap:3px}
  .solutions-tab{text-align:left;padding:12px 14px}
  .solutions-report{border-radius:var(--r-l)}
}
@media(prefers-reduced-motion:reduce){
  .solutions-service-icon,.solutions-report-visual img{transition:none!important;transform:none!important}
}
.crumbs{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--slate);margin-bottom:26px}
.crumbs a{color:var(--slate);text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--white)}
.crumbs span[aria-current]{color:var(--white)}

/* ---------- 11. footer --------------------------------------------------- */
.ftr{background:var(--night);color:var(--slate);font-size:.92rem;border-top:1px solid var(--line-dark)}
.ftr .top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(28px,4vw,56px);padding-block:clamp(56px,7vw,88px)}
.ftr .brand{color:var(--white);margin:0 0 16px}
.ftr .about{max-width:34ch}
.ftr h2{font:600 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);margin-bottom:16px}
.ftr ul{list-style:none;display:grid;gap:8px}
.ftr a{color:var(--slate);text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.ftr a:hover{color:var(--white)}
.ftr .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:26px;
  border-top:1px solid var(--line-dark);font-size:.82rem}
.ftr .legal p{max-width:70ch}
.ftr .legal nav{display:flex;gap:20px}
@media(max-width:860px){.ftr .top{grid-template-columns:1fr 1fr}.ftr .top>div:first-child{grid-column:1/-1}}

/* ---------- 12. motion & reveal ----------------------------------------- */
/* Content is visible by default; .js (set in <head>) opts into reveals, so a
   page with JavaScript off or broken still shows everything. */
.js [data-rv]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);
  transition-delay:var(--d,0ms)}
.js [data-rv="fade"]{transform:none}
.js [data-rv="left"]{transform:translateX(-30px)}
.js [data-rv="scale"]{transform:scale(.96)}
.js [data-rv].is-in{opacity:1;transform:none}

.hero .h-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.js .hero .h-line>span{display:block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes rise{to{transform:none}}
.js .hero .enter{opacity:0;animation:fadeup 1s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .hero-stage .b-main,.js .hero-stage .b-back,.js .hero-stage .p-main,.js .hero-stage .chip{
  opacity:0;animation:dev 1.4s var(--ease) forwards;animation-delay:var(--d,300ms)}
@keyframes dev{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
.js .hero-stage .b-back{animation-name:devback}
@keyframes devback{from{opacity:0;translate:0 40px}to{opacity:.55;translate:0 0}}
.orbits .o-a,.orbits .o-c{stroke-dasharray:var(--len,2400);stroke-dashoffset:var(--len,2400);animation:draw 3s var(--ease-io) .5s forwards}
.orbits .o-c{stroke-dasharray:2 7;stroke-dashoffset:0;animation:spin 60s linear infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{stroke-dashoffset:-900}}
.orbits .travel{offset-rotate:0deg;animation:travel 18s linear infinite}
.orbits .travel.t2{animation-duration:26s;animation-direction:reverse}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}
.hero-stage .p-main{animation:dev 1.4s var(--ease) forwards,float 7s ease-in-out 1.6s infinite}
.js .hero-stage .p-main{animation:dev 1.4s var(--ease) forwards,float 7s ease-in-out 1.6s infinite;animation-delay:var(--d,300ms),1.8s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.odiag.is-in .arc{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease-io) .3s}

/* With the opening screen above it, the hero's entrance waits until it is actually seen. */
.js .intro ~ .hero:not(.is-in) .h-line>span,.js .intro ~ .hero:not(.is-in) .enter,
.js .intro ~ .hero:not(.is-in) .hero-stage *,.js .intro ~ .hero:not(.is-in) .orbits *{animation-play-state:paused}

/* ---------- 13. reduced motion ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;animation-delay:0ms!important}
  .js [data-rv]{opacity:1;transform:none}
  .orbits .o-a{stroke-dashoffset:0}
  .orbits .travel{animation:none;offset-distance:22%}
  .orbits .travel.t2{offset-distance:64%}
  .field .hot-ring{animation:none;opacity:0}
  .intro-stars .tw,.intro-mark::before,.scroll-cue .mouse i{animation:none}
  .hero-earth img.dawn{display:none}
  .scroll-cue .mouse i{opacity:1}
}
.intro-orbits,.hero-stage .orbits{max-width:none}
/* Short screens: the logo, wordmark and orbits scale down together, so the
   orbits keep clear of the logo AND of the menu and scroll cue. */
@media(min-width:601px) and (max-height:860px){
  .intro{padding-top:70px;padding-bottom:190px}
  .intro-mark{width:310px}.intro-wm{font-size:3.1rem}.intro-orbits{width:1380px}}
@media(min-width:601px) and (max-height:740px){
  .intro-mark{width:250px}.intro-wm{font-size:2.7rem}.intro-orbits{width:1180px}
  .intro-in{gap:16px}}
.at-intro .hdr{background:linear-gradient(rgba(7,12,24,.92),rgba(7,12,24,.55) 70%,transparent)}
.scroll-cue{background:radial-gradient(closest-side,rgba(7,12,24,.95) 55%,transparent);padding:22px 34px;white-space:nowrap}


/* ---------- 14. legal documents ----------------------------------------- */
.doc-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.doc-toc{position:sticky;top:96px;font-size:.88rem}
.doc-toc h2{font:600 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.doc-toc ol{list-style:none;display:grid;gap:2px;border-left:1px solid var(--line-2)}
.doc-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink-2);text-decoration:none;line-height:1.35}
.doc-toc a:hover{color:var(--blue-act);border-left-color:var(--blue-act)}
.doc{max-width:72ch}
.doc h2{font-size:var(--step-2);letter-spacing:-.025em;line-height:1.2;margin:clamp(40px,5vw,56px) 0 14px;scroll-margin-top:100px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:1.08rem;letter-spacing:-.015em;margin:26px 0 8px}
.doc p,.doc li{color:var(--ink-2)}
.doc p+p{margin-top:12px}
.doc ul{padding-left:20px;display:grid;gap:7px;margin:12px 0}
.doc a{color:var(--blue-act);text-underline-offset:3px}
.doc strong{color:var(--ink)}
.doc .meta{display:flex;flex-wrap:wrap;gap:8px 24px;font:600 .74rem/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-3);
  padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.doc table{width:100%;border-collapse:collapse;font-size:.92rem;margin:14px 0}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--line)}
.doc thead th{font:600 .68rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.doc tbody th{font-weight:650;color:var(--ink);width:34%}
.doc .tw{overflow-x:auto}
.doc .callout{margin:18px 0;padding:18px 20px;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-left:3px solid var(--blue-act)}
.doc .callout p{margin:0}
.doc dl.facts{display:grid;grid-template-columns:200px minmax(0,1fr);margin:14px 0;border-top:1px solid var(--line)}
.doc dl.facts dt,.doc dl.facts dd{padding:11px 0;border-bottom:1px solid var(--line);margin:0}
.doc dl.facts dt{font-weight:650;color:var(--ink);font-size:.92rem}
.doc dl.facts dd{color:var(--ink-2);font-size:.95rem}
@media(max-width:900px){.doc-grid{grid-template-columns:minmax(0,1fr)}.doc-toc{position:static}}
@media(max-width:560px){.doc dl.facts{grid-template-columns:minmax(0,1fr)}.doc dl.facts dt{border-bottom:0;padding-bottom:0}}
.phead.slim{padding-bottom:clamp(48px,6vw,72px)}

/* ---------- 15. services dropdown ---------------------------------------- */
.nav-group{position:relative}
.nav-trigger{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.93rem;
  padding:10px 14px;border-radius:999px;opacity:.82;transition:opacity .2s,background .2s}
.nav-trigger:hover,.nav-group.open .nav-trigger{opacity:1;background:rgba(152,166,186,.12)}
.nav-trigger:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nav-trigger svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .3s var(--ease)}
.nav-group.open .nav-trigger svg{transform:rotate(180deg)}
.nav-trigger.current{opacity:1}
.nav-sub{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;min-width:300px;padding:10px;border-radius:var(--r-l);
  background:#0E1728;box-shadow:0 0 0 1px var(--line-dark),0 30px 60px -20px rgba(0,0,0,.7);display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,visibility .25s,transform .3s var(--ease)}
.nav-group.open .nav-sub{opacity:1;visibility:visible;transform:none}
.nav .nav-sub a{display:grid;gap:2px;padding:12px 14px;border-radius:12px;opacity:1;color:var(--white)}
.nav .nav-sub a:hover{background:rgba(77,142,255,.1)}
.nav-sub a b{font-weight:700;font-size:.95rem}
.nav-sub a span{font-size:.8rem;color:var(--slate);font-weight:500}
.nav .nav-sub a[aria-current="page"]::after{display:none}
.nav .nav-sub a[aria-current="page"] b{color:var(--cyan)}
@media(max-width:880px){
  .nav-group{display:grid}
  .nav-trigger{font-size:clamp(1.6rem,7vw,2.2rem);font-weight:700;letter-spacing:-.03em;padding:12px 0;border-radius:0;
    border-bottom:1px solid var(--line-dark);opacity:1;justify-content:space-between;width:100%}
  .nav-trigger svg{width:18px;height:18px}
  .nav-sub{position:static;translate:none;min-width:0;box-shadow:none;background:transparent;padding:4px 0 10px 12px;
    display:none;opacity:1;visibility:visible;transform:none}
  .nav-group.open .nav-sub{display:grid}
  .nav .nav-sub a{font-size:1.1rem;padding:10px 0;border-bottom:0}
}

/* ---------- 16. service pages -------------------------------------------- */
.phead .btns{margin-top:30px}
.price-tag{display:inline-flex;align-items:baseline;gap:10px;margin-top:22px;padding:10px 16px;border-radius:999px;
  background:rgba(77,142,255,.1);box-shadow:inset 0 0 0 1px rgba(77,142,255,.3);color:var(--white);font-weight:700}
.price-tag small{color:var(--slate);font-weight:500;font-size:.85rem}
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.area{padding:22px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);display:grid;gap:8px;align-content:start}
.area .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(37,99,235,.08)}
.area .ic svg{width:20px;height:20px;stroke:var(--blue-act);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.area h3{font-size:1.05rem;letter-spacing:-.015em;line-height:1.3}
.area p{font-size:.9rem;color:var(--ink-2)}
/* Hover: the card lifts, its edge warms to blue, a soft light follows the
   cursor (--mx/--my, set by orbit.js) and the icon tile fills. `translate`,
   not `transform`, so it never fights the scroll reveal; the reveal keeps its
   stagger delay while the hover answers at once. */
.area{position:relative;isolation:isolate;
  transition:translate .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.js .areas .area[data-rv]{
  transition:opacity 1s var(--ease),transform 1.1s var(--ease),translate .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
  transition-delay:var(--d,0ms),var(--d,0ms),0s,0s,0s}
.area::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(37,99,235,.09),transparent 70%);
  transition:opacity .45s var(--ease)}
.area .ic,.area .ic svg{transition:background .35s var(--ease),stroke .35s var(--ease),transform .45s var(--ease)}
@media(hover:hover){
  .area:hover{translate:0 -4px;border-color:rgba(37,99,235,.32);box-shadow:var(--shadow-2)}
  .area:hover::before{opacity:1}
  .area:hover .ic{background:var(--blue-act);transform:scale(1.06) rotate(-4deg)}
  .area:hover .ic svg{stroke:#fff}
}
@media(prefers-reduced-motion:reduce){.area:hover{translate:none}.area:hover .ic{transform:none}}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.shot-card{display:grid;gap:12px;text-decoration:none;color:inherit;align-content:start}
.shot-card .frame{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--shadow-2);aspect-ratio:4/3;
  transition:transform .5s var(--ease)}
.shot-card .frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot-card:hover .frame{transform:translateY(-5px)}
.shot-card b{font-size:1rem}
.shot-card span{font-size:.88rem;color:var(--ink-2)}
@media(max-width:860px){.shots{grid-template-columns:minmax(0,1fr)}}
.steps-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:st}
.steps-row.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps-row li{list-style:none;padding:24px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);display:grid;gap:8px;align-content:start}
.steps-row li::before{counter-increment:st;content:"0" counter(st);font:700 .78rem/1 var(--mono);color:var(--blue-act);letter-spacing:.1em}
.steps-row h3{font-size:1.1rem}
.steps-row p{font-size:.93rem;color:var(--ink-2)}
@media(max-width:1000px){.steps-row.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.steps-row,.steps-row.four{grid-template-columns:minmax(0,1fr)}}
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-weight:700;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-8px;border-right:2px solid var(--blue-act);
  border-bottom:2px solid var(--blue-act);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details p{padding:0 0 20px;color:var(--ink-2);max-width:68ch}

/* Websites: a real client project is the visual proof in the opening screen;
   the copy stays on the calm left side of the Intelligent Transitions image. */
.website-hero{min-height:clamp(700px,88svh,840px);display:flex;align-items:center;padding-block:128px 64px;background:#041020}
.website-hero::before{z-index:0;background:
  linear-gradient(90deg,rgba(3,12,27,.99) 0%,rgba(3,12,27,.94) 29%,rgba(3,12,27,.68) 47%,rgba(3,12,27,.08) 72%),
  linear-gradient(0deg,rgba(3,12,27,.78),transparent 35%)}
.website-hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.website-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;animation:website-hero-in 1.5s var(--ease) both}
.website-hero-inner{position:relative;z-index:2}
.website-hero-copy{width:min(610px,47vw)}
.website-hero-copy>*{animation:website-copy-in .85s var(--ease) both}
.website-hero-copy .eyebrow{animation-delay:.12s}
.website-hero-copy h1{max-width:12ch;margin-top:24px;font-size:clamp(3rem,4.55vw,5rem);line-height:1.03;letter-spacing:-.05em}
.website-hero-copy h1{animation-delay:.2s}
.website-hero-copy .lede{max-width:54ch;margin-top:25px;font-size:clamp(1rem,.92rem + .36vw,1.24rem);line-height:1.55;animation-delay:.28s}
.website-hero-copy .btns{margin-top:30px;animation-delay:.36s}
.website-hero-copy .btn{min-height:56px}
.website-hero-points{display:flex;align-items:center;gap:0;margin-top:38px;color:var(--slate-2);list-style:none;animation-delay:.44s}
.website-hero-points li{display:flex;align-items:center;gap:10px;padding:0 22px;border-left:1px solid rgba(180,192,210,.28);font-size:.88rem;white-space:nowrap}
.website-hero-points li:first-child{padding-left:0;border-left:0}
.website-hero-points svg{width:23px;height:23px;fill:none;stroke:#D7E5F6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes website-hero-in{from{opacity:.2;transform:scale(1.035)}to{opacity:1;transform:none}}
@keyframes website-copy-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Recent work: three editorial project columns, with the real site imagery
   doing the work rather than device chrome or generic portfolio mockups. */
.website-projects{padding-block:clamp(58px,6vw,88px);background:linear-gradient(135deg,#fff 0%,#F4F7FB 100%)}
.website-projects-head{display:grid;grid-template-columns:minmax(320px,.92fr) minmax(280px,.78fr) auto;gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:34px}
.website-projects-head .eyebrow{margin-bottom:16px}
.website-projects-head h2{font-size:clamp(2rem,2.8vw,3rem);line-height:1.03}
.website-projects-head>p{max-width:48ch;color:var(--ink-2);line-height:1.55}
.website-projects-head .btn{justify-self:end;min-height:48px}
.website-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.website-project{min-width:0;padding:18px 22px 0 0}
.website-project+.website-project{padding-left:22px;border-left:1px solid var(--line)}
.website-project-image{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;border-radius:12px;background:#DCE4EF;box-shadow:0 18px 38px -26px rgba(11,17,32,.5)}
.website-project-image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s var(--ease),filter .5s ease}
.website-project:hover .website-project-image img{transform:scale(1.035);filter:saturate(1.07) contrast(1.02)}
/* Hover to play (orbit.js 19): the site's own recording fades in over the
   still and plays while the pointer is on the card; mouse and trackpad only. */
.wp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;pointer-events:none;transition:opacity .45s ease}
.website-project-image.is-playing .wp-video{opacity:1}
.wp-video.is-art{object-position:center}
.website-project-copy{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:12px;padding-top:18px}
.website-project-copy h3{font-size:1.22rem;letter-spacing:-.03em}
.website-project-sector{margin-top:2px;color:var(--blue-act);font-size:.84rem;font-weight:600}
.website-project-copy>p{grid-column:1/-1;color:var(--ink-2);font-size:.93rem;line-height:1.5;max-width:42ch}
.website-project-arrow{grid-column:2;grid-row:1;width:32px;height:32px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:color .25s,background .25s,transform .35s var(--ease)}
.website-project-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.website-project:hover .website-project-arrow{color:#fff;background:var(--blue-act);border-color:var(--blue-act);transform:translateX(3px)}
@media(max-width:1050px){
  .website-hero-copy{width:min(590px,54vw)}
  .website-hero::before{background:linear-gradient(90deg,rgba(3,12,27,.99) 0%,rgba(3,12,27,.92) 39%,rgba(3,12,27,.45) 68%,rgba(3,12,27,.14) 100%)}
  .website-hero-points li{padding-inline:15px;font-size:.8rem}
  .website-projects-head{grid-template-columns:minmax(300px,1fr) minmax(280px,1fr)}
  .website-projects-head .btn{grid-column:2;justify-self:start}
}
@media(max-width:760px){
  .website-hero{min-height:820px;align-items:flex-end;padding:116px 0 52px}
  .website-hero-media img{object-position:68% center}
  .website-hero::before{background:linear-gradient(180deg,rgba(3,12,27,.4) 0%,rgba(3,12,27,.72) 28%,rgba(3,12,27,.97) 59%,#030C1B 100%)}
  .website-hero-copy{width:100%}
  .website-hero-copy h1{font-size:clamp(2.8rem,12vw,4.2rem)}
  .website-hero-copy .lede{max-width:40ch}
  .website-hero-copy .btns{align-items:stretch;flex-direction:column}
  .website-hero-copy .btn{width:100%}
  .website-hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
  .website-hero-points li{padding:0 10px;justify-content:center;text-align:center;white-space:normal;line-height:1.3}
  .website-hero-points li:first-child{padding-left:0}
  .website-hero-points svg{display:none}
  .website-projects-head{grid-template-columns:minmax(0,1fr);gap:20px}
  .website-projects-head .btn{grid-column:auto;justify-self:start}
  .website-project-grid{grid-template-columns:minmax(0,1fr);border-top:0}
  .website-project{padding:24px 0;border-top:1px solid var(--line)}
  .website-project+.website-project{padding-left:0;border-left:0}
  .website-project-image{aspect-ratio:16/9}
}
@media(prefers-reduced-motion:reduce){
  .website-hero-media img,.website-hero-copy>*{animation:none}
  .website-project-image img,.website-project-arrow{transition:none}
}

/* Websites approach: one compact, editorial statement replaces the three
   repeated service bands. The principles share the page's existing type,
   colour and reveal language, with dividers instead of card chrome. */
.website-approach{position:relative;padding-block:clamp(72px,8vw,112px);background:linear-gradient(145deg,#F2F6FB 0%,#F8FAFD 55%,#EEF4FA 100%)}
.website-approach-intro{display:grid;justify-items:center;width:min(820px,100%);margin-inline:auto;text-align:center}
.website-approach-intro .eyebrow{justify-content:center}
.website-approach-intro h2{max-width:18ch;margin-top:20px;font-size:clamp(2.25rem,1.45rem + 2.8vw,4rem);line-height:1.04;letter-spacing:-.045em}
.website-approach-intro>p:not(.eyebrow){max-width:68ch;color:var(--ink-2);line-height:1.7}
.website-approach-lede{margin-top:24px;font-size:clamp(1.08rem,1rem + .34vw,1.3rem);font-weight:600;color:var(--ink)!important;line-height:1.55!important}
.website-approach-lede+p{margin-top:16px}
.website-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.website-principle{min-width:0;padding:clamp(32px,3.5vw,48px) clamp(24px,3.5vw,44px) clamp(34px,4vw,52px)}
.website-principle:first-child{padding-left:0}
.website-principle:last-child{padding-right:0}
.website-principle+.website-principle{border-left:1px solid var(--line-2)}
.website-principle-icon{width:42px;height:42px;margin-bottom:28px;fill:none;stroke:var(--blue-act);stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease),stroke .25s ease,filter .35s var(--ease)}
.website-principle-label{font:650 .7rem/1.35 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--blue-act)}
.website-principle h3{max-width:16ch;margin-top:14px;font-size:clamp(1.35rem,1.17rem + .55vw,1.72rem);line-height:1.16;letter-spacing:-.03em}
.website-principle h3+p{margin-top:17px;color:var(--ink-2);font-size:.96rem;line-height:1.65}
.website-approach-cta{display:flex;justify-content:center;margin-top:34px}
.website-approach-cta .link{min-height:44px;padding-inline:4px}
.js .website-approach [data-rv]{transform:translateY(12px);transition-duration:520ms;transition-timing-function:var(--ease)}
.js .website-approach [data-rv].is-in{transform:none}
@media(hover:hover) and (pointer:fine){
  .website-principle:hover .website-principle-icon{stroke:#4D8EFF;transform:translateY(-3px);filter:drop-shadow(0 5px 8px rgba(37,99,235,.18))}
}
@media(max-width:900px){
  .website-principles{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto}
  .website-principle,.website-principle:first-child,.website-principle:last-child{padding:30px 0}
  .website-principle+.website-principle{border-left:0;border-top:1px solid var(--line-2)}
  .website-principle-icon{margin-bottom:20px}
  .website-principle h3{max-width:28ch}
  .website-principle h3+p{max-width:66ch}
}
@media(max-width:560px){
  .website-approach{padding-block:64px}
  .website-approach-intro{justify-items:start;text-align:left}
  .website-approach-intro .eyebrow{justify-content:flex-start}
  .website-approach-intro h2{font-size:clamp(2.1rem,10vw,3rem)}
  .website-principles{margin-top:42px}
  .website-approach-cta{justify-content:flex-start;margin-top:28px}
}
@media(prefers-reduced-motion:reduce){
  .website-principle-icon{transition:none}
}
.website-price-route{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(112deg,#071326 0%,#0B1D3E 62%,#0A1730 100%);color:var(--white)}
.website-price-route::before,.website-price-route::after{content:"";position:absolute;z-index:-1;pointer-events:none;border:1px solid rgba(77,142,255,.2);border-radius:50%;transform:rotate(-18deg)}
.website-price-route::before{right:-8%;top:-115%;width:min(710px,54vw);aspect-ratio:1}
.website-price-route::after{right:4%;top:-74%;width:min(480px,38vw);aspect-ratio:1;border-color:rgba(88,217,232,.14)}
.website-price-route-inner{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);align-items:center;gap:clamp(32px,7vw,110px);padding-block:clamp(48px,5vw,70px)}
.website-price-route .eyebrow{margin-bottom:17px;color:#58D9E8}
.website-price-route h2{color:var(--white)}
.website-price-route p:not(.eyebrow){max-width:62ch;margin-top:18px;color:var(--slate-2);font-size:clamp(1rem,.95rem + .25vw,1.15rem);line-height:1.65}
.website-price-action{display:grid;justify-items:start;gap:18px}
.website-price-action span{max-width:34ch;color:var(--slate-2);line-height:1.55}
.website-faq{background:linear-gradient(150deg,#fff 0%,#F7FAFE 100%)}
.website-faq-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);align-items:start;gap:clamp(42px,8vw,120px)}
.website-faq-intro .head{margin-bottom:0}
.website-faq-intro .lede{margin-top:20px;max-width:38ch}
.website-next-steps{display:grid;gap:0;margin-top:clamp(34px,5vw,58px);padding-top:22px;border-top:1px solid var(--line)}
.website-next-steps p{margin-bottom:9px;color:var(--ink-3);font:600 .68rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.website-next-steps a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:700;text-decoration:none;transition:color .2s ease}
.website-next-steps a span{color:var(--blue-act);transition:transform .25s var(--ease)}
.website-next-steps a:hover{color:var(--blue-act)}
.website-next-steps a:hover span{transform:translate(3px,-3px)}
.website-faq-list{max-width:none}
.website-faq-list details:first-child{border-top:1px solid var(--line)}
.website-faq-list summary{font-size:clamp(1rem,.94rem + .2vw,1.12rem);padding-block:22px}
.website-faq-list details p{padding-bottom:24px}
@media(max-width:850px){
  .website-price-route-inner,.website-faq-layout{grid-template-columns:minmax(0,1fr)}
  .website-price-route::before{right:-32%;top:-35%;width:90vw}
  .website-price-route::after{display:none}
  .website-faq-intro .head{max-width:680px}
  .website-next-steps{max-width:680px;margin-top:30px}
}
.cta-band{border-radius:var(--r-xl);padding:clamp(32px,5vw,56px);
  background:radial-gradient(70% 120% at 85% 0%,rgba(37,99,235,.35),transparent 60%),var(--navy);
  color:var(--white);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cta-band h2{font-size:var(--step-3);max-width:20ch}
.cta-band p{color:var(--slate-2);margin-top:10px;max-width:50ch}
.callout-l{padding:20px 22px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--blue-act);
  color:var(--ink-2);font-size:.95rem;max-width:820px}
.callout-l strong{color:var(--ink)}

/* ---------- 17. pricing --------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.plans.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 24px;border-radius:var(--r-xl);background:var(--paper);
  border:1px solid var(--line)}
.plan.pick{border-color:var(--blue-act);box-shadow:0 0 0 1px var(--blue-act),var(--shadow-2)}
.plan .flag{position:absolute;top:-12px;left:24px;font:700 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  background:var(--blue-act);color:#fff;padding:7px 10px;border-radius:999px}
.plan h3{font-size:1.15rem;letter-spacing:-.02em}
.plan .amt{font-size:clamp(2rem,1.6rem + 1.2vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.plan .amt small{font-size:.9rem;font-weight:600;color:var(--ink-3);letter-spacing:0;margin-left:4px}
.plan .offer-amt{color:var(--blue-act)}
.plan .offer-rate{margin-top:-7px;font-size:.78rem;font-weight:650;color:var(--ink-3)}
.plan p{font-size:.92rem;color:var(--ink-2)}
.plan .ticks li{font-size:.9rem}
.plan .btn{margin-top:auto;width:100%}
@media(max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.plans.three{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.plans{grid-template-columns:minmax(0,1fr)}}
.extra{display:flex;justify-content:space-between;gap:16px;padding:18px 20px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.extra b{display:block;font-size:.98rem}
.extra span{font-size:.85rem;color:var(--ink-2)}
.extra em{font-style:normal;font-weight:800;white-space:nowrap;color:var(--ink)}
.pricing-enhancements{position:relative;overflow:hidden;padding-block:clamp(52px,4.8vw,76px)}
.pricing-enhancements::before{content:"";position:absolute;z-index:0;right:-8%;top:0;width:62%;height:100%;pointer-events:none;
  background:radial-gradient(ellipse at 62% 40%,rgba(74,137,218,.24),rgba(173,207,239,.12) 44%,transparent 72%)}
.pricing-enhancements>.wrap{position:relative;z-index:1;max-width:calc(1500px + var(--gutter)*2)}
.enhancement-head{max-width:760px;margin-bottom:clamp(22px,2vw,32px)}
.enhancement-head .lede{max-width:710px;margin-top:14px;font-size:clamp(1rem,.92rem + .24vw,1.16rem)}
.enhancement-layout{display:grid;grid-template-columns:minmax(680px,.98fr) minmax(620px,1.02fr);gap:clamp(8px,1.4vw,24px);align-items:center}
.extras{position:relative;z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pricing-enhancements .extra{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;min-height:174px;padding:17px 18px;
  border:1px solid #D7E0EC;border-radius:15px;background:rgba(255,255,255,.9);box-shadow:0 12px 30px rgba(23,45,82,.035);
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.pricing-enhancements .extra:hover{z-index:2;transform:translateY(-3px);border-color:rgba(37,99,235,.42);box-shadow:0 16px 38px rgba(23,74,153,.11)}
.pricing-enhancements .extra-icon{width:34px;height:34px;fill:none;stroke:var(--blue-act);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pricing-enhancements .extra-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.pricing-enhancements .extra b{font-size:.99rem;line-height:1.25}
.pricing-enhancements .extra em{font-size:.98rem}
.pricing-enhancements .extra span{display:block;min-height:37px;font-size:.82rem;line-height:1.42}
.pricing-enhancements .extra ul{display:grid;gap:2px;margin:7px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:.77rem;line-height:1.32}
.pricing-enhancements .extra li{position:relative;padding-left:20px}
.pricing-enhancements .extra li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue-act);font-weight:800}
.enhancement-visual{position:relative;z-index:1;width:clamp(800px,54vw,1010px);min-height:610px;margin:-76px -15vw -72px -70px;overflow:visible}
.enhancement-visual::before{content:"";position:absolute;z-index:-1;inset:6% 0 4% 2%;background:radial-gradient(ellipse,rgba(67,136,219,.17),transparent 67%);filter:blur(10px)}
.enhancement-visual img{position:absolute;z-index:2;left:50%;bottom:0;width:100%;height:auto;max-width:none;translate:-50% 0;object-fit:contain;filter:drop-shadow(0 28px 30px rgba(5,17,35,.18))}
.enhancement-orbits{position:absolute;z-index:0;inset:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
.enhancement-orbits ellipse{fill:none;stroke:#58AFFF;stroke-width:.22;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(43,139,255,.28))}
.enhancement-orbits g+g ellipse{stroke:#74CFFF;stroke-opacity:.72}
.enhancement-comets{z-index:1}
.pricing-audit-visual{position:relative;margin:0;overflow:hidden;border-radius:var(--r-xl);background:var(--navy);box-shadow:var(--shadow-2)}
.pricing-audit-visual img,.pricing-audit-visual video{display:block;width:100%;height:100%;object-fit:cover}
.pricing-audit-visual video{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.pricing-audit-visual.is-playing video{opacity:1}
.pricing-audit-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.86fr);gap:clamp(34px,5vw,72px);align-items:center}
.pricing-audit-copy .head{margin-bottom:28px}
.pricing-audit-copy .extra{padding:26px 28px;background:var(--white)}
.pricing-audit-copy .extra b{font-size:1.15rem}
.pricing-audit-copy .extra em{font-size:1.6rem}
.pricing-audit-visual{aspect-ratio:4/3}
.pricing-audit-visual img{object-position:center}
@media(max-width:1450px) and (min-width:1181px){
  .enhancement-layout{grid-template-columns:minmax(560px,.96fr) minmax(520px,1.04fr)}
  .enhancement-visual{width:clamp(720px,55vw,850px);margin-left:-62px;margin-right:-18vw}
  .pricing-enhancements .extra{grid-template-columns:32px minmax(0,1fr);gap:11px;padding-inline:15px}
  .pricing-enhancements .extra-icon{width:31px;height:31px}
  .pricing-enhancements .extra-title{gap:7px}
  .pricing-enhancements .extra b,.pricing-enhancements .extra em{font-size:.92rem}
}
@media(max-width:1180px){
  .enhancement-layout{grid-template-columns:minmax(0,1fr)}
  .enhancement-layout{gap:32px}
  .enhancement-visual{order:-1;width:calc(100% + 12vw);min-height:0;aspect-ratio:1.88;margin:-45px -6vw -24px}
  .enhancement-visual img{width:100%}
}
@media(max-width:980px){
  .pricing-audit-layout{grid-template-columns:minmax(0,1fr)}
  .pricing-audit-visual{aspect-ratio:16/8}
}
@media(max-width:620px){
  .pricing-enhancements{padding-block:64px}
  .extras{grid-template-columns:minmax(0,1fr)}
  .pricing-enhancements .extra{min-height:0;padding:20px 18px}
  .enhancement-visual{width:calc(100% + 28vw);aspect-ratio:1.7;margin:-28px -14vw -6px}
  .pricing-audit-visual{aspect-ratio:4/3;border-radius:var(--r-l)}
  .pricing-audit-copy .extra{padding:22px 20px}
}
@media(prefers-reduced-motion:reduce){.pricing-audit-visual video{display:none}}
.tablewrap{overflow-x:auto;border-radius:var(--r-l);border:1px solid var(--line)}
.compare{width:100%;min-width:620px;border-collapse:collapse;font-size:.93rem;background:var(--paper)}
.compare th,.compare td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center}
.compare th:first-child,.compare td:first-child{text-align:left}
.compare thead th{font-weight:750;background:var(--white)}
.compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:0}
.compare .y{color:var(--blue-act);font-weight:700}
.note-line{margin-top:18px;font-size:.9rem;color:var(--ink-2)}
.note-line.related{margin:0 0 22px;font-size:.95rem}

/* Pricing FAQ: advisory introduction beside a compact, accessible accordion. */
.pricing-faq{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(52px,6vw,82px);background:#FBFDFF}
.pricing-faq::before,.pricing-faq::after{content:"";position:absolute;z-index:-1;pointer-events:none;border:1px solid rgba(74,145,255,.15);border-radius:50%;transform:rotate(23deg)}
.pricing-faq::before{left:-19%;top:6%;width:58%;height:58%}
.pricing-faq::after{left:-14%;top:29%;width:51%;height:42%;border-color:rgba(74,145,255,.11)}
.faq-orbit-dot{position:absolute;z-index:-1;left:35.6%;top:17%;width:7px;height:7px;border-radius:50%;background:#378CFF;box-shadow:0 0 5px #fff,0 0 15px 5px rgba(55,140,255,.52)}
.pricing-faq-layout{display:grid;grid-template-columns:minmax(390px,.72fr) minmax(610px,1.28fr);gap:clamp(48px,6vw,94px);align-items:start;max-width:calc(1500px + var(--gutter)*2)}
.pricing-faq-intro .head{gap:18px;margin:0 0 34px;max-width:490px}
.pricing-faq-intro .head h2{font-size:clamp(2.75rem,3.35vw,4rem);line-height:.98;letter-spacing:-.055em}
.pricing-faq-intro .head .lede{max-width:470px;font-size:clamp(1.04rem,.94rem + .38vw,1.28rem);line-height:1.55;color:var(--ink-2)}
.faq-help{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;max-width:500px;padding:28px 30px;border:1px solid #D6E1EF;border-radius:18px;background:rgba(255,255,255,.72);box-shadow:0 18px 55px rgba(43,85,145,.045)}
.faq-help-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(37,99,235,.08)}
.faq-help-icon svg{width:36px;height:36px;fill:none;stroke:var(--blue-act);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.faq-help h3{font-size:1.08rem;letter-spacing:-.02em}
.faq-help p{margin-top:7px;color:var(--ink-2);font-size:.93rem;line-height:1.5}
.faq-help .btn{margin-top:16px;padding:.78em 1.35em}
.faq-promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:510px;margin-top:26px}
.faq-promises>div{display:flex;gap:12px;align-items:flex-start;padding:4px 20px}
.faq-promises>div:first-child{padding-left:4px}.faq-promises>div+div{border-left:1px solid var(--line)}
.faq-promises svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:var(--blue-act);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.faq-promises span{color:var(--ink-2);font-size:.76rem;line-height:1.5}
.pricing-faq-list{display:grid;gap:8px;max-width:none}
.pricing-faq-list details{border:1px solid #D8E1ED;border-radius:14px;background:rgba(255,255,255,.72);overflow:hidden;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.pricing-faq-list details[open]{border-color:#92B9FF;background:linear-gradient(120deg,#fff 0%,#F4F8FF 100%);box-shadow:0 10px 30px rgba(37,99,235,.05)}
.pricing-faq-list summary{padding:15px 58px 15px 28px;font-size:.98rem;line-height:1.35}
.pricing-faq-list summary::before,.pricing-faq-list summary::after{content:"";position:absolute;right:27px;top:50%;width:14px;height:2px;margin:0;border:0;border-radius:2px;background:var(--blue-act);transform:translateY(-50%);transition:transform .25s ease,opacity .25s ease}
.pricing-faq-list summary::after{transform:translateY(-50%) rotate(90deg)}
.pricing-faq-list details[open] summary::after{opacity:0;transform:translateY(-50%) rotate(0)}
.pricing-faq-list details[open] summary::before{transform:translateY(-50%)}
.pricing-faq-list details p{max-width:78ch;padding:0 58px 18px 28px;color:var(--ink-2);font-size:.9rem;line-height:1.55;animation:faq-answer-in .3s var(--ease) both}
@keyframes faq-answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(max-width:1100px){
  .pricing-faq-layout{grid-template-columns:minmax(0,1fr);gap:48px}
  .pricing-faq-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);gap:34px;align-items:end}
  .pricing-faq-intro .head{margin:0}.faq-help{max-width:none}.faq-promises{grid-column:1/-1;max-width:640px;margin-top:-8px}
  .faq-orbit-dot{left:68%;top:12%}
}
@media(max-width:720px){
  .pricing-faq{padding-block:64px}.pricing-faq::before{left:-75%;top:2%;width:145%;height:32%}.pricing-faq::after,.faq-orbit-dot{display:none}
  .pricing-faq-intro{grid-template-columns:minmax(0,1fr)}
  .pricing-faq-intro .head h2{font-size:clamp(2.55rem,13vw,3.7rem)}
  .faq-help{grid-template-columns:52px minmax(0,1fr);gap:16px;padding:22px 20px}.faq-help-icon{width:52px;height:52px}.faq-help-icon svg{width:30px;height:30px}
  .faq-promises{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:0}.faq-promises>div{padding:0}.faq-promises>div+div{border-left:0}
  .pricing-faq-list summary{padding:16px 50px 16px 18px}.pricing-faq-list summary::before,.pricing-faq-list summary::after{right:20px}
  .pricing-faq-list details p{padding:0 18px 18px;font-size:.88rem}
}

/* ---------- 18. contact form ---------------------------------------------- */
.enquiry{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:900px){.enquiry{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;gap:20px;padding:clamp(24px,4vw,40px);border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.form .row2{grid-template-columns:minmax(0,1fr)}}
.fld{display:grid;gap:7px;min-width:0}
.fld label,.fld legend{font-weight:700;font-size:.92rem}
.fld .opt{font-weight:500;color:var(--ink-3)}
.fld input,.fld textarea{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;
  font-size:1rem;transition:border-color .2s,box-shadow .2s}
.fld textarea{min-height:150px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--blue-act);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.fld .hint{font-size:.82rem;color:var(--ink-3)}
.fld .err{display:none;font-size:.85rem;color:#B42318;font-weight:600}
.fld.bad .err{display:block}
.fld.bad input,.fld.bad textarea{border-color:#B42318}
fieldset.fld{border:0;padding:0;margin:0}
fieldset.fld legend{padding:0;margin-bottom:7px}
.needs{display:flex;flex-wrap:wrap;gap:8px}
.needs label{position:relative;font-weight:600;font-size:.9rem}
.needs input{position:absolute;opacity:0;width:1px;height:1px}
.needs span{display:inline-flex;align-items:center;min-height:44px;padding:9px 15px;border-radius:999px;border:1.5px solid var(--line-2);
  background:#fff;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.needs input:checked + span{border-color:var(--blue-act);background:rgba(37,99,235,.08);color:var(--blue-act)}
.needs input:focus-visible + span{outline:2px solid var(--blue-act);outline-offset:2px}
/* Contact page service picker (orbit.js 9a): a 2x2 grid of categories, each
   opening its own sub-options and one optional question in a 200ms reveal. */
.enquiry .fld textarea{min-height:124px}
.fld select{width:100%;padding:13px 40px 13px 14px;border-radius:12px;border:1.5px solid var(--line-2);font-size:1rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;transition:border-color .2s,box-shadow .2s;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B6B82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 14px center/16px no-repeat}
.fld select:focus{outline:none;border-color:var(--blue-act);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.svc-fld>.hint{margin:-4px 0 4px}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.svc{position:relative;display:flex}
.svc input{position:absolute;opacity:0;width:1px;height:1px}
.svc span{position:relative;flex:1;display:grid;align-content:start;gap:4px;padding:16px 44px 16px 16px;border-radius:14px;border:1.5px solid var(--line-2);
  background:#fff;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.svc span::after{content:"";position:absolute;right:14px;top:16px;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);background:#fff;
  transition:background .2s,border-color .2s}
.svc b{font-size:.95rem;line-height:1.25}
.svc small{font-size:.84rem;line-height:1.4;color:var(--ink-3)}
.svc:hover span{border-color:#A9BCD8}
.svc input:checked + span{border-color:var(--blue-act);background:rgba(37,99,235,.06);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.svc input:checked + span::after{border-color:var(--blue-act);
  background:var(--blue-act) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/13px no-repeat}
.svc input:focus-visible + span{outline:2px solid var(--blue-act);outline-offset:2px}
.svc .tag{justify-self:start;margin-top:6px;padding:3px 9px;border-radius:999px;font:600 .62rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal}
.svc .tag.live{background:rgba(22,163,74,.1);color:#11713A}
.svc .tag.dev{background:rgba(217,119,6,.12);color:#8A4B06}
.svc-unsure{margin-top:2px}
.svc-inner{display:grid;gap:12px;border:0;margin:0;padding:16px;border-radius:14px;background:rgba(37,99,235,.04);border-left:3px solid rgba(37,99,235,.35)}
.svc-inner legend{float:left;width:100%;padding:0;margin:0 0 2px;font-weight:700;font-size:.9rem}
.svc-inner legend + *{clear:both}
.svc-inner .needs span{min-height:40px;padding:7px 13px;font-size:.86rem}
.svc-inner .dev-note{font-size:.84rem;color:#8A4B06;background:rgba(217,119,6,.08);padding:9px 12px;border-radius:10px}
.svc-panel[data-for="any"] .svc-inner{background:none;border-left:0;padding:4px;margin:-4px}
/* closed panels leave the layout entirely; an opening one eases in over 200ms */
.js .svc-panel:not(.is-open){display:none}
.js .svc-panel.is-open{animation:svc-in .2s ease-out}
@keyframes svc-in{from{opacity:0;transform:translateY(-6px)}}
@media(max-width:600px){.svc-grid{grid-template-columns:minmax(0,1fr)}.svc span{padding:14px 44px 14px 14px}}
@media(prefers-reduced-motion:reduce){.js .svc-panel.is-open{animation:none}}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.form .small{font-size:.84rem;color:var(--ink-3)}
.status{display:none;padding:16px 18px;border-radius:12px;font-weight:600;font-size:.95rem}
.status.ok,#sent:target{display:block;background:#E8F6EE;color:#0F5B34}
.status.fail,#failed:target{display:block;background:#FDECEA;color:#8A1C12}
.side{display:grid;gap:18px}
.side .card{padding:22px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line)}
.side h3{font-size:1.02rem;margin-bottom:6px}
.side p{font-size:.92rem;color:var(--ink-2)}

/* ---------- 19. work page ------------------------------------------------- */
.case{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,72px);align-items:start}
.case .long{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-2);max-height:760px;overflow-y:auto;background:#fff}
.case .long img{width:100%}
@media(max-width:900px){.case{grid-template-columns:minmax(0,1fr)}}

/* ---------- 20. attachments ---------------------------------------------- */
.fld input[type=file]{padding:12px;border-style:dashed;background:var(--white);cursor:pointer;font-size:.92rem}
.fld input[type=file]::file-selector-button{font:inherit;font-weight:700;margin-right:14px;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer}
.fld input[type=file]:hover::file-selector-button{border-color:var(--blue-act);color:var(--blue-act)}
.file-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.file-list:empty{display:none}
.file-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:10px;background:var(--white);
  border:1px solid var(--line);font-size:.88rem;color:var(--ink-2)}
.file-list li b{font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list li.bad{border-color:#F3B4AD;background:#FDECEA;color:#8A1C12}

/* Kepler (Horizon page) */
.horizon-kepler{position:relative;display:grid;justify-items:center;justify-self:center;width:min(520px,40vw)}
.horizon-kepler img{position:relative;z-index:1;width:100%;height:auto;animation:hk-float 7s ease-in-out infinite}
.hk-glow{position:absolute;inset:8% 14% 14%;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.28),transparent 66%);filter:blur(8px)}
.horizon-kepler span{margin-top:6px;font:600 .62rem/1 var(--mono);letter-spacing:.2em;color:var(--cyan)}
@keyframes hk-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.kepler-face{display:block;width:76px;height:76px;border-radius:50%;margin-bottom:18px;box-shadow:0 0 0 1px rgba(37,99,235,.35),0 10px 30px rgba(11,17,32,.25)}
@media(max-width:900px){.horizon-kepler{width:min(420px,80vw);order:-1}}
@media(prefers-reduced-motion:reduce){.horizon-kepler img{animation:none}}

/* Kepler intro: plays once per visit when arriving at the Horizon page from another page */
.kepler-intro{display:none}
.ki-on body{overflow:hidden}
.ki-on .kepler-intro{display:grid;place-items:center;position:fixed;inset:0;z-index:300;background:#00000b;
  transition:opacity 1s cubic-bezier(.45,0,.25,1),visibility 0s linear 1s}
.kepler-intro video{width:min(1100px,94vw,calc(94svh * 16 / 9));aspect-ratio:16/9;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent);
  clip-path:circle(0% at 50% 50%);scale:1.12;transition:clip-path 1.3s cubic-bezier(.22,.8,.2,1),scale 1.6s cubic-bezier(.22,.8,.2,1),filter 1s ease}
.kepler-intro.playing video{clip-path:circle(75% at 50% 50%);scale:1}
.kepler-intro.out{opacity:0;visibility:hidden}
.kepler-intro.out video{scale:1.06;filter:blur(4px)}
.ki-skip{position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);padding:10px 16px;border:1px solid rgba(207,226,255,.3);border-radius:999px;
  background:transparent;color:#CFE2FF;font:600 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.ki-skip:hover,.ki-skip:focus-visible{border-color:#58D9E8;color:#fff}
.kf-sm{width:32px;height:32px;border-radius:50%;vertical-align:middle;margin-right:10px}

/* Horizon sky traffic: tiny satellites drifting behind the hero copy */
.sky-traffic{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;container-type:size}
.sky-traffic.paused *{animation-play-state:paused!important}
.sat{position:absolute;left:0;top:0;width:var(--w,20px);opacity:0;animation:sat-cross var(--t) linear var(--d) infinite}
.sat svg{display:block;width:100%;height:auto;overflow:visible;animation:sat-tilt var(--t) linear var(--d) infinite}
.sat svg{filter:drop-shadow(0 0 3px rgba(120,170,255,.35))}
.sat .pn rect{fill:url(#po-sat-pn);stroke:#8DB4F0;stroke-width:.6}
.sat .pn path{stroke:#8DB4F0;stroke-width:.45;opacity:.75;fill:none}
.sat .pn .gl{fill:#fff;stroke:none;opacity:0;animation:sat-glint 11s ease-in-out var(--d) infinite}
.sat .bm{stroke:#C7D3E8;stroke-width:1;fill:none}
.sat .dish{fill:#EEF3FB}
.sat .bd{fill:url(#po-sat-bd)}
.sat .foil{fill:url(#po-sat-foil)}
.sat .l{fill:#fff;filter:drop-shadow(0 0 2px #fff);animation:sat-blink 2.2s steps(1) infinite}
@keyframes sat-glint{0%,82%,100%{opacity:0}88%{opacity:.55}}
.sat.s1{--w:38px;--t:72s;--d:-14s;--o:.95;--x0:-4cqw;--y0:26cqh;--x1:104cqw;--y1:9cqh;--r0:-10deg;--r1:6deg}
.sat.s2{--w:28px;--t:96s;--d:-58s;--o:.75;--x0:104cqw;--y0:84cqh;--x1:-4cqw;--y1:63cqh;--r0:14deg;--r1:-4deg}
.sat.s3{--w:20px;--t:130s;--d:-30s;--o:.55;--x0:30cqw;--y0:-4cqh;--x1:78cqw;--y1:104cqh;--r0:60deg;--r1:75deg}
@keyframes sat-cross{0%{translate:var(--x0) var(--y0);opacity:0}5%,95%{opacity:var(--o)}100%{translate:var(--x1) var(--y1);opacity:0}}
@keyframes sat-tilt{from{rotate:var(--r0)}to{rotate:var(--r1)}}
@keyframes sat-blink{0%{opacity:1}6%{opacity:.1}100%{opacity:.1}}
@media(max-width:900px){.sat.s3{display:none}}
@media(prefers-reduced-motion:reduce){.sky-traffic{display:none}}

/* Opening screen -> Earth hero: one continuous sky */
.intro::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-3;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,10,19,0),#030a13 92%)}
.intro + .hero .hero-earth{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.hero-sky{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
@media(prefers-reduced-motion:reduce){.hero-meteors{display:none}}

/* Decorative orbits in these sections reach past the viewport; clip them at the section edge
   (body overflow-x:hidden alone does not stop sideways panning on iOS). */
.sec.deep,

/* ---------- work showcase (homepage "Selected work") ---------------------
   The laptop-and-phone image is the section's backdrop: it sits large on the
   right and fades into the dark ground on its left, top and bottom, so the
   copy on the left never lies over the devices at any width. Below 900px the
   image sits above the copy instead. */
.work-showcase{position:relative;isolation:isolate;overflow:hidden;background:#010b1a;
  min-height:min(52vw,900px);display:flex;align-items:center}
.work-showcase-bg{position:absolute;right:0;top:50%;translate:0 -50%;z-index:-1;width:min(80%,1560px);height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%),linear-gradient(0deg,transparent 0%,#000 14%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%),linear-gradient(0deg,transparent 0%,#000 14%,#000 88%,transparent 100%);
  mask-composite:intersect}
.work-showcase .wrap{width:100%;translate:0 clamp(-46px,-3vw,-28px)}
.work-showcase .head,.work-showcase .feature{max-width:min(470px,36%)}
.work-showcase .head{margin-bottom:clamp(22px,3vw,36px)}
.work-showcase .h-l{font-size:clamp(1.9rem,1.3rem + 1.5vw,2.75rem);line-height:1.08}
.work-showcase .feature{display:block}
.work-showcase .feature .meta{gap:14px}
.work-showcase .feature .meta h3{font-size:var(--step-2)}
.work-showcase .muted{color:var(--slate-2)}
.work-showcase .kv{border-top-color:rgba(152,166,186,.2)}
.work-showcase .kv div{padding:9px 0;border-bottom-color:rgba(152,166,186,.2)}
.work-showcase .kv dt{color:var(--slate)}
.work-showcase .kv dd{color:var(--white)}
.work-showcase .badge.live{background:rgba(31,164,99,.14);color:#5FE0A0}
.badge.soon{background:rgba(37,99,235,.1);color:var(--blue-act)}
.badge.soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue-act);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
@media (max-width:900px){
  .work-showcase{display:block;min-height:0;padding-top:0}
  .work-showcase-bg{position:relative;top:auto;translate:none;width:100%;
    -webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 30%);mask-image:linear-gradient(0deg,transparent 0%,#000 30%)}
  .work-showcase .wrap{margin-top:clamp(8px,3vw,24px);translate:none}
  .work-showcase .head,.work-showcase .feature{max-width:none}
}

/* ---------- Our work hero ------------------------------------------------
   The downloaded 3D laptop is the primary visual. The existing composited
   image remains beneath it as a no-WebGL/no-JavaScript fallback. */
.work-hero{position:relative;isolation:isolate;overflow:hidden}
.work-hero-visual{position:absolute;right:0;bottom:0;z-index:-1;width:min(62%,1180px);height:min(100%,760px);pointer-events:none;
  display:grid;place-items:end center;isolation:isolate}
.work-hero-visual::before{content:"";position:absolute;z-index:-1;left:24%;right:4%;bottom:4%;height:32%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(46,121,255,.28),rgba(46,121,255,0) 68%);filter:blur(22px);opacity:0;transition:opacity .7s ease}
.work-fall-field{position:absolute;inset:3% 0 0;z-index:0;overflow:hidden;opacity:.78;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 88%,transparent 100%)}
.work-fall-field::before,.work-fall-field::after{content:"";position:absolute;left:18%;bottom:-30%;width:52%;height:72%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(39,104,255,.24),rgba(39,104,255,0) 68%);filter:blur(24px);
  animation:work-haze-rise 8.6s linear -5.2s infinite}
.work-fall-field::after{left:51%;width:34%;height:58%;background:radial-gradient(ellipse,rgba(65,211,230,.2),rgba(65,211,230,0) 70%);
  animation-duration:10.4s;animation-delay:-1.7s}
.work-fall-field i{position:absolute;left:var(--x);bottom:-52%;width:var(--w);height:var(--h);border-radius:999px;
  background:linear-gradient(180deg,transparent 0,rgba(72,213,234,.16) 10%,rgba(62,145,255,.92) 62%,rgba(37,99,235,0) 100%);
  box-shadow:0 0 16px rgba(69,198,237,.55);filter:blur(var(--blur,1px));opacity:0;
  animation:work-stream-rise var(--speed) linear var(--delay) infinite;will-change:transform,opacity}
.work-fall-field i:nth-child(3n+2){background:linear-gradient(180deg,transparent,rgba(56,200,224,.72),rgba(56,200,224,0));
  box-shadow:0 0 20px rgba(56,200,224,.42)}
.work-fall-field i:nth-child(3n){background:linear-gradient(180deg,transparent,rgba(61,112,255,.82),rgba(61,112,255,0))}
@keyframes work-stream-rise{
  0%{transform:translate3d(0,0,0) scaleY(.72);opacity:0}
  12%{opacity:var(--o)}
  76%{opacity:var(--o)}
  100%{transform:translate3d(0,-155vh,0) scaleY(1.12);opacity:0}
}
@keyframes work-haze-rise{
  0%{transform:translate3d(0,18vh,0);opacity:0}
  18%,72%{opacity:.75}
  100%{transform:translate3d(5%,-125vh,0);opacity:0}
}
.work-hero-bg{position:relative;z-index:2;width:100%;height:auto;pointer-events:none;transition:opacity .55s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%)}
.work-laptop-canvas{position:absolute;z-index:2;inset:0;width:100%;height:100%;max-width:none;opacity:0;transition:opacity .7s ease;filter:drop-shadow(0 34px 32px rgba(0,0,0,.42))}
.work-hero-visual.is-3d .work-laptop-canvas{opacity:1}
.work-hero-visual.is-3d .work-hero-bg{opacity:0}
.work-hero-visual.is-3d::before{opacity:1}
.work-hero .wrap>*{position:relative}
.work-hero h1{max-width:14ch}
.work-hero .lede{max-width:min(40ch,46%)}
.work-hero .lede.fact{max-width:min(56ch,46%)}
@media (max-width:900px){
  .work-hero{padding-bottom:0}
  .work-hero .lede,.work-hero .lede.fact{max-width:none}
  .work-hero-visual{position:relative;display:grid;width:100%;max-width:none;height:auto;min-height:clamp(330px,72vw,620px);margin:24px 0 0;order:2}
  .work-hero-bg{position:relative;display:block;width:100%;max-width:none;
    aspect-ratio:1400/932;object-fit:cover;object-position:100% 50%;   /* the laptop, without the empty left side */
    -webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 22%);mask-image:linear-gradient(0deg,transparent 0%,#000 22%)}
  .work-hero{display:flex;flex-direction:column}
  .work-hero .wrap{order:1}
  .work-fall-field{opacity:.52}
}
.work-hero-track,.work-scroll-hint{display:none}

@media (prefers-reduced-motion:reduce){
  .work-fall-field{opacity:.18}
  .work-fall-field::before,.work-fall-field::after,.work-fall-field i{animation:none}
  .work-fall-field i{opacity:calc(var(--o) * .45);transform:translateY(-34vh)}
}

/* Scroll-opened laptop (work-laptop.js). The hero becomes a tall rail; the copy
   and the laptop share one grid cell and both stick to the top, so they stay
   anchored while the lid opens. overflow:clip, not hidden, so sticky works.
   Reduced motion and .is-static (no WebGL) keep the layout above. */
@media (prefers-reduced-motion:no-preference){
  .js .work-hero:not(.is-static){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:300vh;
    padding:0;overflow:clip}
  .js .work-hero:not(.is-static)::before{display:none}
  .js .work-hero:not(.is-static)>*{grid-area:1/1}
  .js .work-hero:not(.is-static) .work-hero-track{display:block}
  .js .work-hero:not(.is-static) .work-hero-copy{position:sticky;top:0;align-self:start;height:100vh;height:100svh;
    display:flex;flex-direction:column;justify-content:center;padding-top:clamp(84px,10vh,120px);padding-bottom:40px;
    width:100%;pointer-events:none}
  .js .work-hero:not(.is-static) .work-hero-copy>*{pointer-events:auto}
  .js .work-hero:not(.is-static) .work-hero-visual{position:sticky;top:0;align-self:start;justify-self:end;
    width:min(64%,1240px);height:100vh;height:100svh;margin:0;
    background:radial-gradient(55% 55% at 58% 46%,rgba(37,99,235,.26),transparent 72%)}
  .js .work-hero:not(.is-static) .work-hero-visual::before{left:12%;right:10%;bottom:12%;height:26%}
  .js .work-hero:not(.is-static) .work-laptop-canvas{filter:drop-shadow(0 40px 36px rgba(0,0,0,.5))}
  .js .work-hero:not(.is-static) .work-scroll-hint{display:flex;position:absolute;left:50%;bottom:28px;translate:-50% 0;
    flex-direction:column;align-items:center;gap:10px;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--slate-2);opacity:calc(1 - var(--p,0) * 12);transition:opacity .3s}
  .js .work-hero:not(.is-static) .work-scroll-hint::after{content:"";width:1px;height:34px;
    background:linear-gradient(var(--cyan),transparent);animation:work-hint 1.8s ease-in-out infinite}
  @keyframes work-hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
    51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
  .js .work-hero:not(.is-static) .work-hero-visual:not(.is-3d) .work-scroll-hint{display:none}
  @media (max-width:900px){
    /* Phones: the copy reads first in normal flow, then the laptop pins
       full-screen beneath it for the opening. */
    .js .work-hero:not(.is-static){grid-template-rows:auto 220svh}
    .js .work-hero:not(.is-static) .work-hero-copy{grid-area:1/1;position:relative;height:auto;padding-top:clamp(120px,16vh,150px);padding-bottom:0}
    .js .work-hero:not(.is-static) .work-hero-visual,.js .work-hero:not(.is-static) .work-hero-track{grid-area:2/1}
    .js .work-hero:not(.is-static) .work-hero-visual{width:100%;min-height:0}
    .js .work-hero:not(.is-static) .work-hero-visual .work-hero-bg{position:absolute;inset:auto 0 30%;-webkit-mask-image:none;mask-image:none}
  }
}

/* ---------- Our work: the scroll-through video ------------------------------ */
.it-demo{position:relative}
.it-demo .it-demo-video,.it-demo .it-demo-toggle{display:none}
.case .long.it-demo{overflow:hidden;max-height:none}
.case .long.it-demo.is-video{background:#0B1120}
.it-demo.is-video .it-demo-video{display:block;width:100%;height:auto;aspect-ratio:1200/750}
.it-demo.is-video .it-demo-still{display:none}
.it-demo.is-video .it-demo-toggle{display:inline-flex;position:absolute;right:14px;bottom:14px;align-items:center;gap:8px;
  padding:9px 14px 9px 12px;border:1px solid rgba(255,255,255,.25);border-radius:999px;cursor:pointer;
  background:rgba(11,17,32,.72);color:#fff;font:600 13px/1 var(--font);backdrop-filter:blur(6px)}
.it-demo-toggle:hover{background:rgba(11,17,32,.9)}
.it-demo-toggle:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.it-demo-toggle svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.it-demo-toggle .i-play{fill:currentColor;stroke-width:1.5}
.it-demo-toggle .i-play,.it-demo-toggle.is-paused .i-pause{display:none}
.it-demo-toggle.is-paused .i-play{display:block}
.it-demo-still{max-height:760px;overflow-y:auto}

/* ---------- line waves (line-waves.js) ---------------------------------------
   Fine dark lines on a light ground, behind the section's content. overflow:clip
   rather than hidden, so position:sticky inside still works. */
[data-line-waves]{position:relative;isolation:isolate;overflow:clip}
.line-waves{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.line-waves path{fill:none;stroke-width:1}

/* ---------- home enquiry: one screen, gently anchored ------------------------
   On desktop the enquiry section is exactly one screen tall (below the fixed
   header), and anchor.js settles the page onto it when a scroll comes to rest
   close by (CSS scroll-snap was tried first: its pull reaches so far that the
   footer below could not be scrolled to).
   The form card has a fixed height, so it does not jump between steps; each
   step is tightened to fit, its buttons sit at the bottom of the card, and on
   an unusually short screen the step scrolls inside the card. Phones and
   tablets keep ordinary scrolling. */
@media (min-width:1101px) and (min-height:600px){
  .home-contact{--hc-pad:clamp(14px,2.6vh,34px);min-height:calc(100svh - 90px);padding-block:var(--hc-pad);
    display:grid;align-content:center}
  .home-contact-layout{align-items:center}
  .home-contact-copy{position:static;padding-top:0}
  .home-contact-copy h2{font-size:clamp(2.6rem,1.2rem + 4.4vh,4.4rem)}
  .home-contact-form{display:flex;flex-direction:column;height:min(calc(100svh - 90px - 2 * var(--hc-pad)),790px);min-height:0;
    padding:clamp(20px,2.8vh,34px) clamp(24px,2.4vw,38px);gap:clamp(10px,1.6vh,16px);overflow:hidden}
  /* overflow-x clip: each step slides in from 18px right, which otherwise
     shows a horizontal scrollbar; the vertical scroll (very short screens only)
     works by wheel and touch without a visible bar */
  .home-contact-form .enquiry-flow{flex:1;min-height:0;overflow-x:clip;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column}
  .home-contact-form .enquiry-flow::-webkit-scrollbar{display:none}
  .home-contact-form .enquiry-step{display:flex;flex-direction:column;gap:clamp(10px,1.7vh,18px);flex:1 0 auto}
  .home-contact-form .enquiry-step-head{gap:6px}
  .home-contact-form .enquiry-step-head h3{font-size:clamp(1.45rem,.9rem + 1.9vh,2.2rem)}
  .home-contact-form .enquiry-step-actions,.home-contact-form .actions{margin-top:auto;padding-top:clamp(10px,1.6vh,18px)}
  .home-contact-form textarea{min-height:clamp(64px,10vh,110px)}
  .home-contact-form .timeline-grid span{min-height:clamp(70px,9vh,96px)}
  .home-contact-form .fld{gap:6px}
}
@media (min-width:1101px) and (min-height:600px) and (max-height:760px){
  /* short laptop screens: a little tighter still, so every step fits */
  .home-contact-form .fld input:not([type=checkbox]):not([type=radio]):not([type=file]){padding-block:9px}
  .home-contact-form .svc span{padding:10px 40px 10px 12px}
  .home-contact-form .svc small{font-size:.8rem}
  .home-contact-form .enquiry-step-head>p:last-child{font-size:.92rem}
  .home-contact-form .fld .hint{display:none}
  .home-contact-form .btn.lg{padding-block:.7em}
}
@media (min-width:1101px) and (min-height:600px) and (max-height:680px){
  .home-contact-form textarea{min-height:52px}
  .home-contact-form .enquiry-step-head .eyebrow{display:none}
  .home-contact-form{padding-block:16px;gap:8px}
}

/* Home Earth hero: the Horizon's satellites, crossing the black sky above the
   copy and now and then passing over the Earth (never behind the headline).
   Above the Earth (-3) and level with the star canvas and orbit ring (-1):
   at -2 the star canvas's dark sky wash covered them. */
.hero[data-sky-traffic] .sky-traffic{z-index:-1}
.hero[data-sky-traffic] .sat.s1{--w:40px;--t:64s;--d:-6s;--o:.9;--x0:-4cqw;--y0:9cqh;--x1:104cqw;--y1:24cqh;--r0:-8deg;--r1:8deg}
.hero[data-sky-traffic] .sat.s2{--w:32px;--t:88s;--d:-40s;--o:.8;--x0:104cqw;--y0:20cqh;--x1:56cqw;--y1:104cqh;--r0:22deg;--r1:-6deg}
.hero[data-sky-traffic] .sat.s3{--w:22px;--t:120s;--d:-75s;--o:.55;--x0:48cqw;--y0:-4cqh;--x1:104cqw;--y1:56cqh;--r0:50deg;--r1:70deg}

/* Enquiry steps: Back as a proper button, an outlined pill the same height as
   Continue, with a left chevron */
.home-contact-form .step-back{align-items:center;gap:.6em;min-height:60px;padding:0 1.7em 0 1.45em;border:1.5px solid var(--line-2);
  border-radius:999px;background:#fff;color:var(--ink);font:700 1.05rem/1 var(--font);text-decoration:none;
  transition:border-color .2s,color .2s,background .2s,transform .25s var(--ease)}
.home-contact-form .step-back::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateX(2px) rotate(45deg);transition:transform .25s var(--ease)}
.home-contact-form .step-back:hover{border-color:var(--blue-act);color:var(--blue-act);background:rgba(37,99,235,.05)}
.home-contact-form .step-back:hover::before{transform:translateX(-1px) rotate(45deg)}
.home-contact-form .step-back:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:3px;border-radius:999px}
@media (min-width:1101px) and (min-height:600px) and (max-height:760px){.home-contact-form .step-back{min-height:48px}}
@media (max-width:520px){.home-contact-form .step-back{min-height:52px;padding-inline:1.2em 1.4em}}

/* ---------- 3D emblem away from the opening (emblem.js, [data-emblem]) -------
   The flat mark stays until the 3D one is ready, then becomes it in one full
   turn; the same grab / sway / cursor-watching as the opening. */
.horizon-mark{position:relative;z-index:1;width:105%}
.horizon-core .horizon-mark img{width:100%}
[data-emblem]{position:relative}
[data-emblem].is-3d .intro-emblem{opacity:1;pointer-events:auto;cursor:grab}
[data-emblem].is-dragging .intro-emblem{cursor:grabbing}
[data-emblem].is-3d img{opacity:0;transition:opacity 1.1s ease}
[data-emblem].emblem-entrance img{opacity:0;transition:none}
[data-emblem].emblem-entrance .intro-emblem{opacity:1;transition:none;pointer-events:none;transform:rotate(-360deg) translateZ(0);
  animation:mark-spin 1.44s cubic-bezier(.16,.84,.32,1) .1s forwards}
/* What's Next headline, split for the cursor pull (orbit.js 1e): words stay
   whole so the line breaks are unchanged; letters can move on their own */
.horizon-hero h1 .g-word{display:inline-block;white-space:nowrap}
.horizon-hero h1 .g-letter{display:inline-block;will-change:translate}
.horizon-hero h1 .g-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-repeat:no-repeat}
/* What's Next hero: the opening's two orbits and their travelling lights,
   centred on the logo disc (in place of the older rings and arc) */
.horizon-core::before{display:none}
.hz-orbits{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(1150px,64vw);height:auto;max-width:none;overflow:visible;pointer-events:none;z-index:-1}
.hz-orbits .orb{fill:none;stroke-width:1.3}
.hz-orbits .core{fill:#F2F8FF;filter:drop-shadow(0 0 4px rgba(220,242,255,.9))}
@media(max-width:900px){.hz-orbits{width:200vw}}
.hz-tails{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ---------- site footer --------------------------------------------------------
   A call-to-action band (left out on Home, Contact, Audit and Care & growth,
   which end with their own), the brand and three link columns over a faint
   PROSPECT ORBIT watermark, orbit streaks with drifting lights on the right,
   and the legal bar. */
.pf{position:relative;isolation:isolate;overflow:hidden;background:#050B18;color:var(--slate-2);font-size:1rem}
.pf-orbits{position:absolute;right:0;top:0;height:100%;width:min(62vw,980px);max-width:none;z-index:-1;pointer-events:none;overflow:visible}
.pf-orbits path{fill:none;stroke:url(#pfLine);stroke-width:1.4}
.pf-orbits path.faint{stroke:rgba(77,142,255,.14);stroke-width:1}
.pf-orbits .core{fill:#F2F8FF;filter:drop-shadow(0 0 5px rgba(160,205,255,.95))}

.pf-cta{position:relative;background:linear-gradient(100deg,#0A1630 0%,#0B1D3E 55%,rgba(11,29,62,.2) 100%);border-bottom:1px solid rgba(77,142,255,.12)}
.pf-cta-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,64px);padding-block:clamp(40px,5vw,60px)}
.pf-eyebrow{display:flex;align-items:center;gap:22px;margin:0 0 16px;font:600 .72rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--slate-2)}
.pf-eyebrow::before{content:"";width:32px;height:2px;background:var(--blue-act);border-radius:2px}
.pf-cta h2{margin:0;color:var(--white);font-size:clamp(1.9rem,1.2rem + 2.2vw,3rem);line-height:1.08;letter-spacing:-.03em}
.pf-grad{background:linear-gradient(100deg,#2E6BFF 0%,#3D8BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-cta p:last-child{margin:14px 0 0;color:var(--slate-2);font-size:clamp(1rem,.95rem + .3vw,1.2rem);max-width:78ch}
.pf-cta .btn{flex:0 0 auto}

.pf-main{position:relative;padding-block:clamp(56px,6vw,80px) clamp(150px,13vw,230px)}
.pf-watermark{position:absolute;left:50%;bottom:clamp(-6px,-.5vw,0px);translate:-50% 0;margin:0;z-index:-1;pointer-events:none;
  font-weight:800;font-size:min(11.5vw,15rem);line-height:.8;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,rgba(77,142,255,.11),rgba(77,142,255,.025) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,.8fr) minmax(0,1.05fr) minmax(0,1.15fr);gap:clamp(28px,3.6vw,60px)}
.pf-logo{display:inline-flex;align-items:center;gap:18px;color:var(--white);text-decoration:none}
.pf-logo img{width:clamp(64px,5vw,84px);height:auto}
.pf-wm{font-weight:700;font-size:clamp(1.2rem,.9rem + .75vw,1.6rem);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.pf-wm b{font-weight:800;background:linear-gradient(100deg,#2E6BFF,#4D8EFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-tag{margin:22px 0 0;font-size:1rem;letter-spacing:.16em;color:var(--slate-2)}
.pf-about{margin:26px 0 0;max-width:31ch;font-size:clamp(1.02rem,.95rem + .3vw,1.2rem);line-height:1.55;color:var(--slate-2)}
.pf-col h2{display:flex;align-items:center;gap:22px;margin:6px 0 22px;font:600 .74rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#4DA3FF}
.pf-col h2::before{content:"";width:28px;height:2px;margin-left:-50px;background:#2E8BFF;border-radius:2px}
.pf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pf-col a{color:var(--white);opacity:.88;text-decoration:none;font-size:1.05rem;line-height:1.3;transition:opacity .2s,color .2s}
.pf-col ul a:hover{opacity:1;color:#7FB8FF}
.pf-contact{display:grid;align-content:start;justify-items:start;gap:14px}
.pf-contact h2{margin-bottom:8px}
.pf-email{display:inline-flex;align-items:center;gap:14px}
.pf-mail{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:#3D8BFF;stroke-width:1.6;stroke-linejoin:round}
.pf-start{display:inline-flex;align-items:center;gap:10px;color:#3D8BFF!important;opacity:1!important;font-size:1.2rem!important;font-weight:600;
  text-decoration:underline!important;text-underline-offset:5px;text-decoration-thickness:1px}
.pf-start svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.pf-start:hover svg{transform:translateX(4px)}
.pf-contact p{margin:4px 0 0;max-width:26ch;color:var(--slate-2);line-height:1.5}

.pf-legal{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:26px 30px;font-size:.92rem;color:var(--slate)}
.pf-legal::before{content:"";position:absolute;left:50%;top:0;width:100vw;translate:-50% 0;height:1px;background:rgba(152,166,186,.16)}
.pf-legal p{margin:0;line-height:1.6}
.pf-legal nav{display:flex;align-items:center}
.pf-legal nav a{color:var(--slate-2);text-decoration:none;padding:4px 0}
.pf-legal nav a+a::before{content:"|";margin:0 22px;color:rgba(152,166,186,.4)}
.pf-legal nav a:hover{color:var(--white)}
.pf a:focus-visible{outline:2px solid #4DA3FF;outline-offset:3px;border-radius:3px}

@media(max-width:1100px){
  .pf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pf-brand,.pf-contact{grid-column:1/-1}
  .pf-col h2::before{margin-left:0}
}
@media(max-width:760px){
  .pf-cta-in{flex-direction:column;align-items:flex-start}
  .pf-legal{flex-direction:column;align-items:flex-start}
  .pf-orbits{width:120vw;opacity:.6}
}
@media(max-width:480px){
  .pf-grid{grid-template-columns:minmax(0,1fr)}
  .pf-wm{letter-spacing:.14em}
  .pf-tag{letter-spacing:.12em}
}

/* Care plans: launch offer strip above the plans, and its terms below */
.offer-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 22px;padding:14px 18px;border-radius:var(--r);
  background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.22);color:var(--ink);font-size:.98rem;line-height:1.5}
.offer-strip .flag{position:static;flex:0 0 auto;font:700 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  background:var(--blue-act);color:#fff;padding:7px 10px;border-radius:999px}
.offer-terms{margin-top:22px;max-width:96ch;color:var(--ink-3);font-size:.84rem;line-height:1.6}

/* Launch card: "From" price and its two sizes */
.plan .amt .from{display:block;margin:0 0 4px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.launch-opts{display:grid;gap:8px;margin:2px 0 4px}
.launch-opts div{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.launch-opts dt{font-weight:700;font-size:.9rem;color:var(--ink)}
.launch-opts dd{margin:0;font-size:.86rem;color:var(--ink-2)}
.launch-opts dd b{color:var(--blue-act);margin-right:6px}

/* Pricing: the package comparison folds away under the cards */
.compare-fold{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.compare-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;
  font-weight:700;font-size:1.02rem;color:var(--ink)}
.compare-fold>summary::-webkit-details-marker{display:none}
.compare-fold>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--blue-act);border-bottom:2px solid var(--blue-act);
  transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.compare-fold[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.compare-fold>summary:hover{color:var(--blue-act)}
.compare-fold>summary:focus-visible{outline:2px solid var(--blue-act);outline-offset:3px;border-radius:var(--r)}
.compare-fold .tablewrap{margin:0 12px 12px}

/* 404: useful wayfinding wrapped in a restrained orbital scene. */
.error-hero{position:relative;isolation:isolate;display:grid;align-items:center;min-height:clamp(650px,calc(100svh - 90px),860px);overflow:hidden;
  background:radial-gradient(circle at 76% 46%,rgba(26,91,213,.22),transparent 34%),linear-gradient(135deg,#050B18 0%,#071226 62%,#050B18 100%);color:var(--white)}
.error-hero::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.32;pointer-events:none;
  background-image:radial-gradient(circle,rgba(188,220,255,.8) 0 1px,transparent 1.2px);background-size:73px 73px;background-position:17px 9px}
.error-layout{display:grid;grid-template-columns:minmax(0,720px) 1fr;align-items:center;padding-block:clamp(72px,9vw,130px)}
.error-copy{position:relative;z-index:2}
.error-copy .eyebrow{color:#65D9FF}
.error-code{margin:8px 0 4px;font:800 clamp(6.5rem,4rem + 9vw,12.5rem)/.8 var(--font);letter-spacing:-.075em;
  background:linear-gradient(120deg,#F8FBFF 5%,#79B9FF 48%,#246BFF 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.error-copy h1{max-width:720px;margin:24px 0 0;font-size:clamp(2.7rem,1.7rem + 3.2vw,5.2rem);line-height:.98;letter-spacing:-.055em;color:var(--white)}
.error-copy .lede{max-width:610px;margin-top:24px;color:#B9C7DB}
.error-actions{margin-top:34px}
.error-actions .ghost{border-color:rgba(151,187,237,.38);color:var(--white)}
.error-actions .ghost:hover{background:rgba(58,125,255,.12);border-color:#70A9FF}
.error-routes{display:flex;gap:0;margin-top:30px}
.error-routes a{display:inline-flex;align-items:center;color:#AFC0D9;text-decoration:none;font-weight:650;transition:color .2s ease}
.error-routes a::after{content:"\2197";margin-left:8px;color:#4D8EFF;font-size:.88em}
.error-routes a+a::before{content:"";width:1px;height:18px;margin:0 20px;background:rgba(151,187,237,.25)}
.error-routes a:hover{color:var(--white)}
.error-orbit{position:absolute;left:max(62%,760px);top:50%;z-index:-1;width:min(55vw,790px);aspect-ratio:1;translate:-50% -50%;pointer-events:none}
.error-ring{position:absolute;inset:11%;border:1px solid rgba(80,153,255,.3);border-radius:50%;transform:rotate(-18deg) scaleY(.48)}
.error-ring-b{inset:0;border-color:rgba(80,153,255,.14);transform:rotate(24deg) scaleY(.63)}
.error-planet{position:absolute;left:50%;top:50%;width:clamp(150px,18vw,250px);aspect-ratio:1;translate:-50% -50%;border:1px solid rgba(116,183,255,.48);border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#3187E9 0 4%,#123B79 34%,#091A38 72%);box-shadow:0 0 75px rgba(35,117,255,.3),inset -25px -22px 48px rgba(1,7,18,.65)}
.error-satellite{position:absolute;left:5%;top:42%;width:18px;aspect-ratio:1;border:3px solid #CBE8FF;border-radius:50%;background:#3C91FF;box-shadow:0 0 18px 7px rgba(67,151,255,.58);animation:error-orbit-drift 9s ease-in-out infinite alternate}
@keyframes error-orbit-drift{to{transform:translate(38vw,-8vh)}}
@media(max-width:900px){
  .error-layout{grid-template-columns:1fr}
  .error-orbit{left:86%;top:58%;width:88vw;opacity:.58}
}
@media(max-width:600px){
  .error-hero{min-height:720px}
  .error-layout{padding-block:68px 90px}
  .error-code{font-size:clamp(6rem,32vw,9rem)}
  .error-copy h1{margin-top:18px}
  .error-actions{align-items:stretch}
  .error-actions .btn{justify-content:center;text-align:center}
  .error-routes{flex-wrap:wrap;row-gap:14px}
  .error-routes a+a::before{margin-inline:14px}
  .error-orbit{left:100%;top:67%;width:130vw}
}
@media(prefers-reduced-motion:reduce){.error-satellite{animation:none}}

/* What's Next, "Beyond websites": headline and copy, then the platform concept
   render (transparent PNG-style webp, so it melts into the light ground), its
   rock fading into a dark band that carries the three outcomes. The render is
   a concept, not the product: the badge and its alt text say so. */
.horizon-platform{padding-bottom:0;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#F3F7FC 55%,#E6EEF9 100%)}
.horizon-platform-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.horizon-platform-head h2{margin-top:18px;max-width:none;font-size:clamp(2.4rem,1.2rem + 3vw,4.1rem);line-height:1.02}
.horizon-platform-head .lede{max-width:46ch}
.horizon-platform-head .muted{margin-top:18px;max-width:58ch;line-height:1.65}
.horizon-platform-visual{position:relative;width:min(1942px,100%);margin:clamp(16px,3.5vw,44px) auto 0}
.horizon-platform-visual img{display:block;width:100%;height:auto}
.horizon-platform-visual::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,16,29,0) 0%,rgba(9,16,29,.55) 55%,#09101D 100%)}
.concept-badge{position:absolute;z-index:1;right:clamp(16px,4vw,80px);bottom:9%;display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-radius:12px;border:1px solid rgba(255,255,255,.7);background:rgba(234,242,252,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 12px 30px -14px rgba(11,17,32,.5)}
.concept-badge svg{width:22px;height:22px;fill:none;stroke:var(--blue-act);stroke-width:2;stroke-linecap:round}
.concept-badge span{display:grid;gap:5px;font:600 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.concept-badge b{font-weight:600;color:var(--blue-act)}
.horizon-platform-points{background:#09101D;color:var(--white);padding:clamp(6px,1.2vw,16px) 0 clamp(46px,5vw,70px)}
.horizon-platform-points ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.horizon-platform-points li{display:flex;align-items:center;justify-content:center;gap:18px;padding:8px clamp(14px,2.5vw,40px)}
.horizon-platform-points li+li{border-left:1px solid rgba(152,166,186,.22)}
.pp-icon{flex:0 0 52px;height:52px;display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(77,142,255,.8);
  box-shadow:0 0 24px -8px rgba(77,142,255,.9),inset 0 0 14px -6px rgba(77,142,255,.8)}
.pp-icon svg{width:24px;height:24px;fill:none;stroke:#8DBBFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.horizon-platform-points b{display:block;font-size:1.12rem;letter-spacing:-.01em}
.horizon-platform-points li div>span{display:block;margin-top:4px;color:var(--slate-2);font-size:.95rem;line-height:1.45}
@media(max-width:900px){
  .horizon-platform-head{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
  .horizon-platform-points ul{grid-template-columns:minmax(0,1fr);gap:4px}
  .horizon-platform-points li{justify-content:flex-start;padding:14px 0}
  .horizon-platform-points li+li{border-left:0;border-top:1px solid rgba(152,166,186,.18)}
}
@media(max-width:700px){
  .horizon-platform-visual{width:168%;margin-left:-34%}
  .concept-badge{right:auto;bottom:auto;left:50%;top:1%;translate:-50% 0;padding:7px 11px;gap:9px}
  .concept-badge svg{width:17px;height:17px}
  .concept-badge span{font-size:.56rem}
}

/* What's Next, "Our journey": three stages on one path. The path svg is
   stretched across the row; the orbs sit at 1/6, 1/2 and 5/6 of it, centred
   on the path's height (115 of 230), so the line runs through each one. */
.horizon-journey{overflow-x:clip;background:radial-gradient(60% 70% at 15% 60%,rgba(77,142,255,.08),transparent 70%),linear-gradient(180deg,#F5F8FD 0%,#EEF3FB 100%)}
.journey-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:start}
.journey-head h2{margin-top:18px;max-width:14ch;font-size:clamp(2.4rem,1.3rem + 2.8vw,4rem);line-height:1.04}
.journey-sub{margin-top:18px;font-size:var(--step-1);color:var(--ink-2)}
.journey-intro{padding-top:clamp(0px,3vw,40px);max-width:56ch;font-size:1.06rem;line-height:1.7;color:var(--ink-2)}
.journey-stages{position:relative;margin-top:clamp(34px,5vw,64px)}
.journey-path{position:absolute;left:-20%;top:0;width:140%;max-width:none;height:230px;overflow:visible;pointer-events:none}
.journey-path path{fill:none;vector-effect:non-scaling-stroke}
.journey-path .jp-main{stroke:url(#jpLine);stroke-width:2.2;filter:drop-shadow(0 0 4px rgba(47,107,255,.35));animation:journey-thread 9.5s ease-in-out infinite}
.journey-path .jp-faint{stroke:rgba(77,142,255,.32);stroke-width:1.2;stroke-dasharray:2 7}
.journey-path .jp-dots{stroke:rgba(77,142,255,.6);stroke-width:1.6;stroke-dasharray:1 7;stroke-linecap:round}
.journey-list{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.journey-stage{display:flex;flex-direction:column;align-items:center;text-align:center}
.journey-orb{position:relative;width:100%;height:230px;display:grid;place-items:center;will-change:transform;animation:journey-bob-a 9.5s ease-in-out infinite}
.journey-stage:nth-child(2) .journey-orb{animation-name:journey-bob-b}
.journey-stage:nth-child(3) .journey-orb{animation-name:journey-bob-c}
.journey-num{position:absolute;z-index:2;top:2px;left:50%;translate:-50% 0;font:700 .78rem/1 var(--mono);letter-spacing:.14em;color:var(--blue-act)}
.journey-moons{position:absolute;left:50%;top:50%;width:178px;height:178px;margin:-89px 0 0 -89px;border-radius:50%;
  border:1.5px dotted rgba(77,142,255,.35);animation:journey-turn 26s linear infinite}
.journey-stages.has-gravity .journey-core{transform:translate3d(var(--gravity-x,0),var(--gravity-y,0),0);will-change:transform}
.journey-stages.has-gravity .journey-moons{transform:translate3d(var(--gravity-ring-x,0),var(--gravity-ring-y,0),0);will-change:transform}
.journey-moons::before,.journey-moons::after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9EC3FF,#2F6BFF 55%,#0B2A8A);box-shadow:0 2px 6px rgba(11,42,138,.4)}
.journey-moons::before{left:12px;top:30px}
.journey-moons::after{right:4px;bottom:46px;width:9px;height:9px;background:radial-gradient(circle at 35% 30%,#C9D7EE,#5B6B86 60%,#27324A)}
.journey-stage:nth-child(2) .journey-moons{animation-duration:32s;animation-direction:reverse}
.journey-stage:nth-child(3) .journey-moons{animation-duration:38s}
@keyframes journey-turn{to{rotate:360deg}}
@keyframes journey-bob-a{0%,100%{transform:translateY(0)}25%{transform:translateY(-6px)}50%{transform:translateY(4px)}75%{transform:translateY(-4px)}}
@keyframes journey-bob-b{0%,100%{transform:translateY(0)}25%{transform:translateY(6px)}50%{transform:translateY(-5px)}75%{transform:translateY(4px)}}
@keyframes journey-bob-c{0%,100%{transform:translateY(0)}25%{transform:translateY(-4px)}50%{transform:translateY(6px)}75%{transform:translateY(-2px)}}
@keyframes journey-thread{
  0%,100%{d:path("M0 142C70 100 230 92 314 115C400 138 470 165 540 156C572 151 586 126 600 118C680 88 800 150 886 118C990 80 1100 36 1200 0")}
  25%{d:path("M0 142C70 100 230 86 314 109C400 132 470 169 540 162C572 157 586 132 600 124C680 94 800 146 886 114C990 80 1100 36 1200 0")}
  50%{d:path("M0 142C70 100 230 96 314 119C400 142 470 160 540 151C572 146 586 121 600 113C680 83 800 156 886 124C990 80 1100 36 1200 0")}
  75%{d:path("M0 142C70 100 230 88 314 111C400 134 470 169 540 160C572 155 586 130 600 122C680 92 800 148 886 116C990 80 1100 36 1200 0")}
}
.journey-core{position:relative;z-index:1;width:132px;height:132px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#3D7BFF 0%,#1543D6 45%,#0A2479 100%);
  box-shadow:0 0 0 10px rgba(255,255,255,.55),0 0 0 11px rgba(77,142,255,.18),0 18px 44px -10px rgba(21,67,214,.65),0 0 60px rgba(47,107,255,.35)}
.journey-core svg{width:50px;height:50px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.is-dev .journey-core{background:radial-gradient(circle at 38% 30%,#8CC0FF 0%,#3D86FF 40%,#1A56E8 100%)}
.is-dev .journey-core svg{stroke-width:3.2}
.is-future .journey-core{background:radial-gradient(circle at 38% 28%,#fff 0%,#E7EDF6 40%,#AEBBD0 100%);
  box-shadow:0 0 0 10px rgba(255,255,255,.55),0 0 0 11px rgba(120,140,170,.18),0 18px 44px -12px rgba(39,50,74,.4)}
.is-future .journey-core svg{stroke:#1B2740}
.is-future .journey-core .journey-rocket{width:78px;height:78px;overflow:visible;stroke:none;filter:drop-shadow(0 5px 5px rgba(21,39,75,.34))}
.journey-rocket .jr-body{fill:url(#jrBody);stroke:#627089;stroke-width:1.1}
.journey-rocket .jr-shadow{fill:rgba(48,65,91,.2)}
.journey-rocket .jr-fin{fill:url(#jrBlue);stroke:#1747b7;stroke-width:1.1}
.journey-rocket .jr-nozzle{fill:#48566c;stroke:#263248;stroke-width:1}
.journey-rocket .jr-stripe{fill:#246fea;opacity:.88}
.journey-rocket .jr-window-ring{fill:#dce8f6;stroke:#63748d;stroke-width:1.25}
.journey-rocket .jr-window{fill:url(#jrGlass);stroke:#173b77;stroke-width:1}
.journey-rocket .jr-glint{fill:#fff;opacity:.86}
.journey-rocket .jr-highlight{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.25;stroke-linecap:round}
.journey-rocket .jr-flame{fill:url(#jrFlame);filter:drop-shadow(0 3px 4px rgba(47,107,255,.55))}
.journey-rocket .jr-flame-core{fill:#eaffff;opacity:.92}
.journey-kicker{margin-top:14px;font:700 .82rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blue-act)}
.journey-stage h3{margin-top:12px;max-width:16ch;font-size:clamp(1.3rem,1.1rem + .6vw,1.65rem);line-height:1.15;letter-spacing:-.025em}
.journey-stage>p:not(.journey-kicker){margin-top:12px;max-width:34ch;color:var(--ink-2);font-size:.98rem;line-height:1.6}
.journey-status{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:9px 18px;border-radius:999px;
  font:700 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-act);background:rgba(47,107,255,.12)}
.journey-status::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.is-dev .journey-status{color:#3D86FF;background:rgba(61,134,255,.1)}
.is-future .journey-status{color:#3A4760;background:rgba(58,71,96,.08)}
@media(max-width:900px){
  .journey-head{grid-template-columns:minmax(0,1fr);gap:18px}
  .journey-intro{padding-top:0}
  .journey-path{display:none}
  .journey-list{grid-template-columns:minmax(0,1fr);gap:48px}
  .journey-orb{height:200px}
}
@media(prefers-reduced-motion:reduce){.journey-moons,.journey-orb,.journey-path .jp-main{animation:none}.journey-core,.journey-moons{transform:none!important}}

/* What's Next, "Our belief": centred message over a starry night, then the
   flow render (transparent edges, so it melts into the ground). The five
   hurdles are real text placed on the render (--x/--y, % of the image);
   on phones they become a list beneath it. */
.horizon-belief{position:relative;overflow:hidden;color:var(--white);isolation:isolate;
  background:radial-gradient(48% 38% at 50% 64%,rgba(37,99,235,.16),transparent 75%),radial-gradient(40% 40% at 85% 10%,rgba(37,99,235,.14),transparent 70%),#010B1C}
.horizon-belief::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.75;pointer-events:none;
  background-image:radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 78% 9%,#cfe4ff 0 1px,transparent 1.5px),
  radial-gradient(circle at 92% 34%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 5% 62%,#cfe4ff 0 1px,transparent 1.5px),
  radial-gradient(circle at 35% 6%,#fff 0 .8px,transparent 1.3px),radial-gradient(circle at 62% 92%,#cfe4ff 0 1px,transparent 1.5px),
  radial-gradient(circle at 24% 88%,#fff 0 .8px,transparent 1.3px),radial-gradient(circle at 96% 80%,#fff 0 .8px,transparent 1.3px)}
.belief-head{text-align:center;display:grid;justify-items:center}
.belief-head .eyebrow{justify-content:center}
.belief-head h2{margin-top:18px;max-width:20ch;font-size:clamp(2.3rem,1.2rem + 3vw,4.3rem);line-height:1.05}
.belief-head .lede{margin-top:22px;max-width:76ch;color:var(--slate-2)}
.belief-visual{position:relative;width:min(1918px,100%);margin:clamp(20px,3.5vw,48px) auto 0}
.belief-visual img{display:block;width:100%;height:auto;-webkit-mask-image:radial-gradient(75% 78% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(75% 78% at 50% 50%,#000 70%,transparent 100%)}
.belief-hurdles{list-style:none}
.belief-hurdles li{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:10px;padding:clamp(7px,.8vw,11px) clamp(11px,1.2vw,17px);
  border-radius:10px;border:1px solid rgba(152,180,220,.32);background:rgba(10,20,40,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);
  font-size:clamp(.72rem,.5rem + .55vw,1rem);font-weight:600;color:#E6EEF9;white-space:nowrap}
.belief-hurdles svg{width:1.35em;height:1.35em;flex:0 0 auto;fill:none;stroke:#D7E5F6;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.belief-close{display:grid;justify-items:center;margin-top:clamp(10px,2vw,26px);text-align:center}
.belief-close::before{content:"";width:42px;height:2px;margin-bottom:24px;border-radius:2px;background:var(--blue)}
.belief-close p{font-size:clamp(1.25rem,1rem + 1vw,1.9rem);font-weight:650;letter-spacing:-.02em;color:var(--white)}
@media(max-width:760px){
  .belief-visual{width:150%;margin-left:-25%}
  .belief-hurdles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:6px 25% 0}
  .belief-hurdles li{position:static;font-size:.8rem}
}

/* What's Next, "Orbit Updates": the newsletter sign-up (orbit.js 8, posting
   to functions/api/subscribe.js). Copy and three perks on the left, the form
   card on the right, light orbits and planets drawn behind both. */
.horizon-updates{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(50% 60% at 80% 40%,rgba(77,142,255,.1),transparent 70%),linear-gradient(180deg,#F5F8FD,#EDF2FA)}
.updates-orbits{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:-1;pointer-events:none}
.updates-orbits .uo-line{fill:none;stroke:rgba(77,142,255,.38);stroke-width:1.2}
.updates-orbits .uo-line.faint{stroke:rgba(77,142,255,.2)}
.updates-orbits .uo-dash{fill:none;stroke:rgba(77,142,255,.32);stroke-width:1.2;stroke-dasharray:3 7}
.updates-orbits .uo-moon{fill:#1E4FE0;filter:drop-shadow(0 2px 5px rgba(30,79,224,.45))}
.updates-orbits .uo-moon.sm{fill:#3D86FF}
.updates-orbits .uo-moon.lt{fill:#5AA8FF;filter:drop-shadow(0 0 8px rgba(90,168,255,.8))}
.updates-orbits .uo-planet{fill:#3D86FF;filter:drop-shadow(0 14px 20px rgba(30,79,224,.35))}
.updates-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,100px);align-items:center}
.updates-copy h2{margin-top:18px;max-width:14ch;font-size:clamp(2.4rem,1.3rem + 3vw,4.3rem);line-height:1.02}
.updates-copy .lede{margin-top:22px;max-width:50ch}
.updates-perks{list-style:none;display:grid;margin-top:30px;max-width:560px}
.updates-perks li{display:flex;gap:clamp(18px,2.4vw,32px);align-items:center;padding:14px 0 14px clamp(0px,2.4vw,32px)}
.updates-perks li+li{border-top:1px solid var(--line)}
.up-icon{flex:0 0 76px;height:76px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#fff,#EEF3FB);
  box-shadow:0 12px 26px -12px rgba(30,60,120,.35),inset 0 1px 0 #fff}
.up-icon svg{width:30px;height:30px;fill:none;stroke:#0F1B33;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.updates-perks small{display:block;font:700 .76rem/1 var(--mono);letter-spacing:.12em;color:var(--blue-act)}
.updates-perks b{display:block;margin-top:8px;font:700 1rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.updates-perks div>span{display:block;margin-top:6px;color:var(--ink-2);font-size:.98rem;line-height:1.5}
.updates-card{position:relative;display:grid;gap:18px;padding:clamp(26px,3.4vw,46px);border-radius:28px;background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 70px -30px rgba(30,60,120,.35),0 2px 6px rgba(11,17,32,.04)}
.updates-card-head{display:flex;gap:18px;align-items:center;margin-bottom:6px}
.uc-logo{flex:0 0 66px;height:66px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 38% 30%,#1B2B4D,#0A1426 72%);box-shadow:0 10px 24px -10px rgba(10,20,38,.6)}
.uc-logo img{width:84px;max-width:none;height:auto}
.updates-card-head h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.03em;line-height:1.1}
.updates-card-head p{margin-top:6px;color:var(--ink-2)}
.updates-card .fld input::placeholder{color:#8A96A8}
.updates-card .h-consent{font-size:.86rem;line-height:1.55}
.updates-card .consent-err{display:none;margin-top:-8px;color:#C2262E;font-size:.84rem}
.updates-card .consent-err.show{display:block}
.updates-card .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:4px}
.updates-card .actions .small{flex:1 1 auto;margin:0;font-size:.9rem;color:var(--ink-2)}
.updates-card .actions .small a{color:var(--ink-2)}
.updates-card .status{display:none}
.updates-card .status.ok,.updates-card .status.fail,.updates-card .status:target{display:block}
#updates-joined:target{background:#E8F6EE;color:#0F5B34}
#updates-failed:target{background:#FDECEA;color:#8A1C12}
@media(max-width:900px){
  .updates-grid{grid-template-columns:minmax(0,1fr)}
  .updates-orbits{opacity:.55}
}
@media(max-width:560px){
  .up-icon{flex-basis:60px;height:60px}
  .up-icon svg{width:24px;height:24px}
  .updates-card{border-radius:22px}
  .updates-card .actions .btn{width:100%}
}