/* Ancilia Shield. One page, plain CSS. */
:root{
  --canvas:#EEF2F5;
  --panel:#F8FAFB;
  --deep:#0B1824;
  --deep-panel:#132638;
  --accent:#1F6E96;
  --accent-hover:#185A7B;
  --accent-lt:#55B3D6;
  --accent-muted:rgba(47,143,179,.22);
  --beam:#CFE9F5;
  --hit:#F07A4A;
  --text-secondary:#4A5F70;
  --text-primary:#14324A;
  --hero-ink:#F2F6F9;
  --line:rgba(20,50,74,.14);
  --line-strong:#7D8D9B;
  --ease-out:cubic-bezier(.22,.8,.24,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(4,10,16,.95),0 3px 12px rgba(4,10,16,.78),0 10px 44px rgba(4,10,16,.8);
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  /* the logo, light-page colorway */
  --lg-left:#3E86AF;--lg-right:#14324A;--lg-planet:#E2A93B;--lg-lit:#F2C66A;--lg-belt-i:#2F8FB3;--lg-belt-o:#2F8FB3;--lg-word1:#14324A;--lg-word2:#2F8FB3;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font:400 17px/1.62 var(--body);-webkit-font-smoothing:antialiased;animation:page-in .8s var(--ease-out) both}
@keyframes page-in{from{opacity:0}to{opacity:1}}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--accent);color:#fff;padding:10px 16px;border-radius:6px;font-weight:600;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.hero :focus-visible,.nav.on-hero :focus-visible,.contact :focus-visible{outline-color:var(--accent-lt)}
main{position:relative;z-index:1;outline:none}
/* the logo on dark backgrounds: the reverse colorway */
.dark,.nav.on-hero,.contact{--lg-right:#1E4865;--lg-belt-i:#55B3D6;--lg-belt-o:#E3E9EC;--lg-word1:#EEF2F5;--lg-word2:#55B3D6}

/* the one fixed environment: faint strata, like the shield's layers, drifting up as the visitor descends,
   and a rare whisper-thin streak falling behind the content */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-strata{position:absolute;inset:-60px;background:repeating-linear-gradient(180deg,rgba(20,50,74,.03) 0 1px,transparent 1px 22px,rgba(20,50,74,.018) 22px 23px,transparent 23px 34px);animation:strata-drift 90s linear infinite;will-change:transform}
@keyframes strata-drift{to{transform:translate3d(0,-34px,0)}}
.env-streak{position:absolute;left:68%;top:-30vh;width:1.5px;height:30vh;background:linear-gradient(180deg,rgba(47,143,179,0),rgba(47,143,179,.28));transform:rotate(9deg);animation:streak 12s linear infinite;animation-delay:-4s;opacity:0}
@keyframes streak{0%{transform:translate3d(0,0,0) rotate(9deg);opacity:0}3%{opacity:1}14%{transform:translate3d(-20vh,130vh,0) rotate(9deg);opacity:0}100%{transform:translate3d(-20vh,130vh,0) rotate(9deg);opacity:0}}

/* type */
.kicker{font:500 12.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:18px}
h2{font:700 clamp(2rem,3.7vw,3.3rem)/1.08 var(--display);letter-spacing:-.018em;max-width:20ch;color:var(--text-primary)}
.lede{font-size:clamp(1.05rem,1.3vw,1.18rem);line-height:1.62;color:var(--text-secondary);max-width:60ch;margin-top:22px}
.fine{font-size:.92rem;color:var(--text-secondary);max-width:66ch;margin-top:18px}

/* the signature: beam tags, pinned by a stopped-track glyph */
.tag{display:inline-flex;align-items:center;gap:9px;font:500 11.5px/1.45 var(--mono);letter-spacing:.06em;color:var(--text-secondary);text-transform:uppercase}
.tag .x{width:15px;height:15px;flex:none;color:var(--accent);opacity:.95}
.js [data-reveal] .tag .x,.js [data-stagger] .tag .x{transform:translate(-5px,-9px);opacity:0;transition:transform .9s var(--ease-out) .3s,opacity .5s var(--ease-out) .3s}
.js .in .tag .x{transform:none;opacity:.95}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#F7FBFD;font:600 1rem/1.2 var(--body);padding:15px 24px;border-radius:7px;text-decoration:none;border:0;cursor:pointer;text-shadow:none;transition:background-color .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out);box-shadow:0 1px 0 rgba(0,0,0,.08),0 8px 24px -10px rgba(31,110,150,.6)}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:10px 16px;font-size:.92rem}
.btn-wide{width:100%}
.link-light{color:var(--hero-ink);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--text-primary);text-decoration:none;border-bottom:1.5px solid var(--accent-muted);padding-bottom:3px;transition:border-color .3s var(--ease-out)}
.link-arrow svg{width:18px;height:18px;transition:transform .35s var(--ease-out)}
.link-arrow:hover{border-color:var(--accent)}
.link-arrow:hover svg{transform:translateX(4px)}
@media (pointer:coarse){.btn,.link-arrow,.nav-links a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;height:68px;padding:0 clamp(20px,4vw,56px);background:rgba(238,242,245,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out),color .5s var(--ease-out)}
.nav.on-hero{background:linear-gradient(180deg,rgba(4,10,16,.62),rgba(4,10,16,0)) border-box no-repeat;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent;color:var(--hero-ink)}
.nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.nav-logo .logo-mark{width:46px;height:34px}
.nav-logo .logo-word{width:150px;height:19px}
.nav nav{margin-left:auto}
.nav-links{display:flex;gap:26px}
.nav-links a{text-decoration:none;font-weight:500;font-size:.95rem;opacity:.86;transition:opacity .3s}
.nav-links a:hover{opacity:1}
@media (max-width:1080px){.nav-links{display:none}.nav-cta{margin-left:auto}}

/* ============ HERO ============ */
.hero{position:relative;height:800vh;background:#070F18;z-index:2}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#070F18;color:var(--hero-ink)}
.poster{position:absolute;inset:0;background:#070F18 center/cover no-repeat}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease-out);transform:translateZ(0);will-change:transform}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 125% 100% at 50% 50%,rgba(4,10,16,0) 45%,rgba(4,10,16,.5) 100%)}

/* five title blocks that stay once they appear: top left, top right, centre, bottom left, bottom right.
   Each sits on its own frosted panel so it reads over every frame, the bright layers included.
   They are placed in a frame centred on the film: the whole screen up to 1920x1080 (and never wider than
   2.2 times its height), so on wide or large screens they gather round the centre block instead of the
   far edges. --fu is 1% of the frame's width and stands in for vw in the block sizes below. */
.stage{--fw:min(100vw,220vh,1920px);--fh:min(100vh,1080px);--fu:calc(var(--fw) / 100);
  --hl:clamp(1.5rem,min(3.05 * var(--fu),5.4vh),3.6rem);
  --gx:calc(max(0px,50% - var(--fw) / 2) + clamp(20px,3.4 * var(--fu),60px));
  --gt:calc(max(68px,50% - var(--fh) / 2) + clamp(12px,2.4vh,30px));
  --gb:calc(max(0px,50% - var(--fh) / 2) + clamp(18px,3.6vh,40px))}
.band{position:absolute;width:max-content;max-width:min(46 * var(--fu),760px);padding:clamp(16px,1.6 * var(--fu),28px) clamp(18px,2 * var(--fu),32px);border-radius:16px;background:rgba(6,13,21,.58);border:1px solid rgba(207,233,245,.16);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);opacity:0;color:var(--hero-ink);text-shadow:0 1px 2px rgba(4,10,16,.7),0 2px 14px rgba(4,10,16,.45);pointer-events:none;--k:0}
.band.on{pointer-events:auto}
.b1{top:var(--gt);left:var(--gx)}
.b2{top:var(--gt);right:var(--gx)}
.b3{top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
/* b4 gets a wider cap so "Boron catches the strays." stays on one line at the full 3.6rem headline (needs about 781px) */
.b4{bottom:var(--gb);left:var(--gx);max-width:min(46 * var(--fu),820px)}
.b5{bottom:var(--gb);right:var(--gx)}
/* one headline size, --hl, for the corner titles and the centre title (capped by height too, so short screens
   never collide). site.js lowers --fit below 1 only on a screen too tight for the centre title to clear the corners. */
.band-line{font:700 var(--hl)/1.08 var(--display);letter-spacing:-.02em}
.b3 .band-line{font-size:calc(var(--hl) * var(--fit,1));max-width:16ch;margin-inline:auto}
.band-sub{font:500 clamp(.95rem,min(1.2 * var(--fu),2vh),1.25rem)/1.5 var(--body);color:rgba(242,246,249,.92);max-width:38ch;margin-top:12px}
.band .kicker{color:rgba(242,246,249,.86);margin-bottom:12px;font-size:12px}
.settle-title{font:700 clamp(2.7rem,5.4vw,5.4rem)/1.02 var(--display);letter-spacing:-.025em;max-width:12ch}
.settle-sub{font:500 clamp(1.05rem,1.4vw,1.3rem)/1.5 var(--body);color:rgba(242,246,249,.92);max-width:38ch;margin-top:20px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px}
.band .settle-title{font-size:clamp(2rem,min(4.2 * var(--fu),7vh),4.8rem);line-height:1.02;max-width:none}
.band .settle-sub{font-size:clamp(.95rem,min(1.2 * var(--fu),2vh),1.25rem);max-width:34ch;margin-top:12px}
.band .cta-row{gap:12px 22px;margin-top:20px}
.band .btn{padding:13px 22px;font-size:1rem}
.band .btn,.hero-static .btn{text-shadow:none}
@media (max-height:780px){
  .band{padding:12px 16px}
  .band .cta-row{margin-top:12px}
}

/* split text */
.vis{display:inline}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}

/* entrance 1: starlight assemble, characters gather from scattered points */
[data-fx=scatter] .c{--kc:clamp(0,(var(--k) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))}
[data-fx=scatter] .band-sub{--ks:clamp(0,(var(--k) - .5)*2.4,1)}
/* entrance 2: drift-down, words fall into place with the rays */
[data-fx=drift] .w{--kc:clamp(0,(var(--k) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}
/* entrance 3: word-punch with overshoot, the impact */
[data-fx=punch] .w{--kc:clamp(0,(var(--k) - var(--th,0))*3,1);--ks:clamp(0,(var(--k) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(.6 + (.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
[data-fx=punch] .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* entrance 4: blur-to-sharp, two stacked copies, filter never animated */
.blurwrap{display:grid}
.blurwrap>*{grid-area:1/1}
.blur-soft{filter:blur(10px);opacity:calc(1 - var(--k))}
.blur-sharp{opacity:var(--k);transform:scale(calc(.965 + .035*var(--k)));transform-origin:0 50%}
.b3 .blur-sharp{transform-origin:50% 50%}
/* entrance 5: word-by-word rise into a staged settle */
[data-fx=settle] .w{--kc:clamp(0,(var(--k) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*30px))}
[data-fx=settle] .kicker{opacity:clamp(0,var(--k)*3,1)}
[data-fx=settle] .settle-sub{--ks:clamp(0,(var(--k) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
[data-fx=settle] .cta-row{--kb:clamp(0,(var(--k) - .76)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

.loader{position:absolute;left:50%;bottom:36px;width:40px;height:40px;margin-left:-20px;color:var(--hero-ink);transition:opacity .6s var(--ease-out)}
.ring{width:40px;height:40px;transform:rotate(-90deg)}
.stage.video-ready .loader,.stage.video-failed .loader{opacity:0}
.cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hero-ink);opacity:0;transition:opacity .6s var(--ease-out);text-shadow:var(--tshadow);pointer-events:none}
.cue svg{width:18px;height:18px;animation:cue-bob 2.4s var(--ease-io) infinite;animation-delay:-.6s}
@keyframes cue-bob{50%{transform:translateY(5px)}}
.stage.cue-on .cue{opacity:.9}
@media (max-height:560px){.cue,.loader{display:none}}
/* auto-play: the film plays itself; this control in the nav pauses, resumes or replays it */
.stage.autoplay .cue{display:none}
.film-toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:999px;border:1px solid rgba(20,50,74,.28);background:transparent;color:inherit;font:600 .9rem/1 var(--body);cursor:pointer;transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),opacity .3s}
.film-toggle[hidden]{display:none}
.film-toggle:hover{border-color:currentColor}
.nav.on-hero .film-toggle{border-color:rgba(242,246,249,.4);background:rgba(6,13,21,.35)}
.ft-icon{width:16px;height:16px}
@media (pointer:coarse){.film-toggle{min-height:44px}}

/* static hero (phones, portrait tablets, coarse portrait, landscape phones, reduced motion) */
.hero-static{display:none}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{display:none}
  .hero-static{position:relative;display:flex;align-items:flex-end;min-height:100vh;min-height:100svh;padding:120px clamp(20px,6vw,64px) clamp(48px,9vh,88px);background:#070F18 url(hero-static.jpg) 50% 50%/cover no-repeat;color:var(--hero-ink)}
  .hero-static::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,16,.45) 0%,rgba(4,10,16,.1) 30%,rgba(4,10,16,.4) 55%,rgba(4,10,16,.88) 100%)}
  .hs-copy{position:relative;max-width:640px;text-shadow:var(--tshadow)}
  .hs-copy .kicker{color:rgba(242,246,249,.86)}
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse){.hero-static{background-image:url(hero-static-phone.jpg)}}
/* phones: the tall film plays once while the story lines take turns, then the settle copy arrives */
.hero-static::before{z-index:1}
.hs-copy{z-index:2;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.pf-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease-out)}
.hero-static.pf-on .pf-video{opacity:1}
.pf-end{position:absolute;inset:0;z-index:0;background:#070F18 center/cover no-repeat;opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none}
.hero-static.pf-skipped .pf-end{opacity:1}
.pf-captions{position:absolute;z-index:2;left:clamp(16px,5vw,64px);right:clamp(16px,5vw,64px);bottom:clamp(40px,8vh,88px);height:0;pointer-events:none}
.pf-line{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 18px;border-radius:14px;background:rgba(6,13,21,.6);border:1px solid rgba(207,233,245,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--hero-ink);text-shadow:0 1px 2px rgba(4,10,16,.7),0 2px 14px rgba(4,10,16,.45);opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.pf-line.on{opacity:1;transform:none}
.pf-title{font:700 clamp(1.6rem,7vw,2.5rem)/1.08 var(--display);letter-spacing:-.02em}
.pf-sub{font:500 1rem/1.45 var(--body);color:rgba(242,246,249,.92);margin-top:8px}
.hero-static.pf-on .hs-copy{opacity:0;transform:translateY(16px);pointer-events:none}
.hero-static.pf-on.pf-done .hs-copy{opacity:1;transform:none;pointer-events:auto}
.pf-skip{position:absolute;z-index:3;top:82px;right:16px;padding:9px 16px;min-height:40px;border-radius:999px;border:1px solid rgba(242,246,249,.4);background:rgba(6,13,21,.4);color:var(--hero-ink);font:600 .9rem/1 var(--body);cursor:pointer}
.pf-play{position:absolute;z-index:3;left:50%;top:38%;width:68px;height:68px;margin-left:-34px;border-radius:50%;border:1px solid rgba(242,246,249,.45);background:rgba(6,13,21,.5);color:var(--hero-ink);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pf-play svg{width:26px;height:26px;margin-left:4px}
.pf-skip[hidden],.pf-play[hidden]{display:none}

/* ============ SECTIONS ============ */
.section{position:relative;z-index:1;padding:clamp(88px,11vw,152px) 0}
.wrap{width:min(1200px,calc(100% - 40px));margin:0 auto}
.dark{background:var(--deep);color:#E3EAF0}
.dark h2{color:#F2F6F9}
.dark .kicker{color:#9DB4C6}
.dark .lede{color:#C2D0DB}
.dark .tag{color:#A9BCCB}
.dark .tag .x{color:var(--accent-lt)}
.dark .fine{color:#A9BCCB}
.sec-head{margin-bottom:clamp(40px,5vw,64px)}

/* reveal choreography */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}
[data-stagger]{opacity:1;transform:none}
.js [data-stagger]>*{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out);transition-delay:calc(var(--i,0)*120ms)}
.js [data-stagger].in>*{opacity:1;transform:none}
[data-stagger].settled>*{transition-delay:0s!important}

/* the problem: three pain cards */
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pain{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.6vw,32px);background:var(--panel);border:1px solid var(--line);border-radius:12px}
.pain:hover{border-color:rgba(20,50,74,.28);box-shadow:0 18px 40px -28px rgba(20,50,74,.45)}
.pain-art{width:64px;height:64px;color:var(--text-primary);margin-bottom:8px}
.pain-art .acc{stroke:var(--accent)}
.pain-art .hit{fill:var(--hit);opacity:.9}
.live .pain:first-child .hit{animation:hit-pulse 4.5s ease-in-out infinite;animation-delay:-1.2s}
@keyframes hit-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.pain h3{font:600 1.22rem/1.3 var(--display);letter-spacing:-.01em}
.pain p{color:var(--text-secondary)}

/* self-drawing divider: a track falls and stops on a layered bar */
.divider{position:relative;z-index:1;width:min(1200px,calc(100% - 40px));margin:0 auto;height:90px}
.divider svg{width:100%;height:100%}
.divider path{fill:none;stroke:var(--text-primary);stroke-opacity:.32;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-io);vector-effect:non-scaling-stroke}
.divider path+path{transition-delay:1.1s}
.js .divider path{stroke-dashoffset:1}.js .divider.in path{stroke-dashoffset:0}

/* the beam test */
.test{overflow:hidden}
.test::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.2px 1.2px at 12% 18%,rgba(227,234,240,.5),transparent),radial-gradient(1px 1px at 72% 12%,rgba(227,234,240,.45),transparent),radial-gradient(1.4px 1.4px at 86% 64%,rgba(227,234,240,.45),transparent),radial-gradient(1px 1px at 34% 78%,rgba(227,234,240,.4),transparent),radial-gradient(1.2px 1.2px at 56% 42%,rgba(227,234,240,.35),transparent),radial-gradient(1px 1px at 22% 56%,rgba(227,234,240,.4),transparent);opacity:.55}
.test.live::before{animation:twinkle 9s ease-in-out infinite alternate;animation-delay:-3s}
@keyframes twinkle{to{opacity:1}}
.test-grid{position:relative;display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px,6vw,88px);align-items:start}
.why{margin-top:22px;color:#C2D0DB;max-width:56ch;padding-left:16px;border-left:2px solid rgba(85,179,214,.45)}
.data-panel{background:var(--deep-panel);border:1px solid rgba(207,233,245,.12);border-radius:16px;padding:clamp(24px,3vw,36px)}
.data-stat{font:600 clamp(1.25rem,1.8vw,1.55rem)/1.3 var(--display);letter-spacing:-.01em;color:#F2F6F9;margin-bottom:22px}
.data-rows{display:flex;flex-direction:column;gap:18px;margin-bottom:22px}
.data-row{display:grid;grid-template-columns:1fr auto auto;gap:4px 18px;align-items:baseline}
.dr-name{font-weight:600;color:#E3EAF0}
.dr-val,.dr-per{font:400 .95rem/1.3 var(--body);color:#A9BCCB;white-space:nowrap}
.dr-val b,.dr-per b{font:700 1.25rem/1 var(--display);color:#F2F6F9;margin-right:4px;font-variant-numeric:tabular-nums}
.is-ours .dr-per b{color:var(--accent-lt)}
.dr-bar{grid-column:1/-1;height:6px;border-radius:3px;background:rgba(207,233,245,.08);position:relative;overflow:hidden}
.dr-bar::after{content:"";position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--v));background:#7F96A8;border-radius:3px;transition:transform 1.4s var(--ease-out) .4s}
.is-ours .dr-bar::after{background:var(--accent-lt)}
.js .data-panel:not(.in) .dr-bar::after{transform:scaleX(0)}

/* the photo strip: real lab photos */
.photos{position:relative;display:grid;grid-template-columns:2.2fr 1.2fr 1.6fr 1.6fr 1fr;gap:14px;margin-top:clamp(56px,7vw,88px);align-items:end}
.ph .frame{overflow:hidden;border-radius:10px;background:#0E1D2B}
.ph img{width:100%;height:clamp(180px,22vw,280px);object-fit:cover;transition:transform 1.2s var(--ease-out)}
.ph:hover img{transform:scale(1.04)}
.ph figcaption{font:400 .86rem/1.4 var(--body);color:#A9BCCB;margin-top:10px}
.ph-sign img{object-position:50% 30%}

/* the interactive moment: fire the beam */
.beam-lab{position:relative;display:grid;grid-template-columns:4fr 7fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(56px,7vw,96px);background:var(--deep-panel);border:1px solid rgba(207,233,245,.12);border-radius:16px;padding:clamp(24px,4vw,48px);overflow:hidden}
.lab-title{font:700 clamp(1.8rem,2.8vw,2.5rem)/1.08 var(--display);letter-spacing:-.02em;color:#F2F6F9;margin-bottom:26px}
.hold{display:inline-flex;align-items:center;gap:14px;padding:10px 22px 10px 10px;border-radius:999px;border:1.5px solid rgba(207,233,245,.35);background:rgba(6,13,21,.4);color:#F2F6F9;font:600 1rem/1.2 var(--body);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;transition:border-color .3s var(--ease-out),transform .3s var(--ease-out),background-color .3s}
.hold:hover{border-color:#F2F6F9}
.hold.holding{transform:scale(.98);background:rgba(85,179,214,.12)}
.hold-ring{width:44px;height:44px;color:var(--accent-lt)}
.hold-ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.beam-lab.done .hold{border-color:var(--accent-lt)}
.lab-done{min-height:3em;margin-top:18px;font-weight:600;color:#E3EAF0;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-out) .35s,transform .6s var(--ease-out) .35s}
.beam-lab.done .lab-done{opacity:1;transform:none}
.bl-svg{width:100%;height:auto;--p:0}
.bl-tracks path,.bl-below path{fill:none;stroke:var(--beam);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,var(--p)*1.6,1))}
.bl-tracks path{stroke-opacity:.8}
.bl-below path{stroke-dashoffset:calc(1 - clamp(0,(var(--p) - .45)*2.2,1))}
.bl-below.pe path{stroke-opacity:.55}
.bl-below.an path{stroke-opacity:.38}
.bl-guide path{fill:none;stroke:var(--beam);stroke-width:1;stroke-dasharray:3 6;opacity:calc(.22 - .22*clamp(0,var(--p)*3,1))}
.bl-labels text{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;fill:#A9BCCB}
.bl-labels text:first-child{text-anchor:end}
.bl-hull{fill:#8FA3B3;opacity:.75}
.bl-spray path{fill:none;stroke:var(--beam);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:3 4;opacity:calc(clamp(0,(var(--p) - .12)*5,1)*.55)}
.bl-slab.pe{fill:#E4EAEE;opacity:.9}
.bl-slab.an rect{fill:#D3E6EF}
.bl-slab.an path{fill:none;stroke:#8EB7CC;stroke-width:1}
.bl-hits circle{fill:var(--hit);opacity:calc(clamp(0,(var(--p) - .32)*6,1)*.9)}
.bl-det{fill:none;stroke:rgba(207,233,245,.4);stroke-width:1.5}
.bl-readouts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0 16px}
.bl-read{display:flex;flex-direction:column;gap:4px;border-top:2px solid rgba(207,233,245,.14);padding-top:12px;transition:border-color .5s var(--ease-out)}
.bl-name{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#A9BCCB}
.bl-num{font:700 clamp(1.8rem,2.8vw,2.4rem)/1 var(--display);font-variant-numeric:tabular-nums;color:#F2F6F9}
.is-ours .bl-num{color:var(--accent-lt)}
.bl-unit{font-size:.9rem;color:#A9BCCB}
.bl-meter{height:5px;border-radius:3px;background:rgba(207,233,245,.08);overflow:hidden;margin-top:6px}
.bl-meter i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--m,0));background:#7F96A8}
.is-ours .bl-meter i{background:var(--accent-lt)}
.beam-lab.done .bl-read{border-color:rgba(85,179,214,.6)}
.beam-lab.done .bl-read+.bl-read{transition-delay:.15s}

/* two forms */
.form-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
.fcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fcard .frame{overflow:hidden}
.fcard img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.live .fcard img{animation:slow-zoom 26s ease-in-out infinite alternate;animation-delay:-7s}
.live .fcard+.fcard img{animation-delay:-16s}
@keyframes slow-zoom{from{transform:scale(1)}to{transform:scale(1.05)}}
.fcard-body{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,32px)}
.fcard h3{font:600 1.4rem/1.2 var(--display);letter-spacing:-.015em}
.fcard p{color:var(--text-secondary)}
.fcard .tag{margin-top:6px}
.under{margin-top:26px;color:var(--text-secondary);font-size:1.05rem}

/* how it works */
.how-grid{display:grid;grid-template-columns:6fr 6fr;gap:clamp(32px,6vw,96px);align-items:center}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:40px 0 0}
.facts div{display:flex;flex-direction:column-reverse;gap:6px;border-left:2px solid var(--accent-muted);padding-left:16px}
.facts dd{margin:0;font:700 clamp(1.35rem,2vw,1.8rem)/1.1 var(--display);letter-spacing:-.015em;color:var(--text-primary)}
.facts dt{font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.lanes{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,2.4vw,28px)}
.lanes-svg{width:100%;height:auto}
.ln-track,.ln-spray,.ln-thru{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ln-track{stroke:var(--accent);stroke-width:2.2;transition:stroke-dashoffset 1.1s var(--ease-io)}
.ln-spray{stroke:#C0563A;stroke-width:1.5;stroke-opacity:.8;transition:stroke-dashoffset 1.3s var(--ease-out) 1s}
.ours .ln-spray{stroke-opacity:.6}
.ln-thru{stroke:var(--accent);stroke-width:1.6;stroke-opacity:.35;transition:stroke-dashoffset .9s var(--ease-out) 1.6s}
.ln-plate{fill:#8FA3B3}
.ln-block rect{fill:#DCE8EE}
.ln-block path{fill:none;stroke:#9DBFD0;stroke-width:1}
.ln-ends circle{fill:#C0563A;opacity:.75;transition:opacity .5s 2s}
.ln-boron circle{fill:var(--accent);transition:opacity .5s 2s}
.js .lanes:not(.in) .ln-track,.js .lanes:not(.in) .ln-spray,.js .lanes:not(.in) .ln-thru{stroke-dashoffset:1}
.js .lanes:not(.in) .ln-ends circle,.js .lanes:not(.in) .ln-boron circle{opacity:0}
.lanes-cap{display:grid;grid-template-columns:1fr 1fr;text-align:center;font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin-top:10px}

/* roadmap */
.roadmap{background:#0E1E2C}
.stages-wrap{position:relative}
.stage-line{position:absolute;left:0;right:0;top:9px;width:100%;height:20px}
.stage-line path{fill:none;stroke:#9DB4C6;stroke-opacity:.45;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--ease-io);vector-effect:non-scaling-stroke}
.js .stages-wrap:not(.in) .stage-line path{stroke-dashoffset:1}
.stages{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.st{position:relative;padding-top:44px;display:flex;flex-direction:column;gap:8px}
.st::before{content:"";position:absolute;left:0;top:12px;width:14px;height:14px;border-radius:50%;background:#0E1E2C;border:1.6px solid #9DB4C6}
.st-done::before{background:#9DB4C6}
.st-now::before{background:var(--accent-lt);border-color:var(--accent-lt)}
.roadmap.live .st-now::before{animation:pulse 3.2s ease-out infinite;animation-delay:-1s}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(85,179,214,.5)}100%{box-shadow:0 0 0 14px rgba(85,179,214,0)}}
.st-name{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lt)}
.st h3{font:700 1.5rem/1.2 var(--display);letter-spacing:-.015em;color:#F2F6F9}
.st p{color:#C2D0DB}

/* audiences: two small panels */
.audiences{padding-bottom:clamp(40px,5vw,72px)}
.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.aud{padding:clamp(28px,3.4vw,44px) 0;border-top:1.5px solid var(--text-primary)}
.aud h2{font-size:clamp(1.7rem,2.6vw,2.4rem);margin-bottom:18px}
.aud p{color:var(--text-secondary);max-width:54ch;margin-bottom:24px}

/* team */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,56px)}
.person{display:flex;flex-direction:column;gap:6px}
.mono-ring{position:relative;display:grid;place-items:center;width:72px;height:72px;margin-bottom:14px;border-radius:50%;border:1.5px solid rgba(20,50,74,.35);font:700 1.3rem/1 var(--display);letter-spacing:.02em;color:var(--text-primary)}
.mono-ring::after{content:"";position:absolute;left:-13px;right:-13px;top:24px;bottom:22px;border-radius:50%;border:1.5px solid rgba(47,143,179,.55);border-top-color:transparent;transform:rotate(-9deg)}
.live .mono-ring::after{animation:orbit 28s linear infinite}
.person:nth-child(2) .mono-ring::after{animation-delay:-9s}
.person:nth-child(3) .mono-ring::after{animation-delay:-18s}
@keyframes orbit{to{transform:rotate(351deg)}}
.person h3{font:700 1.3rem/1.15 var(--display);letter-spacing:-.01em}
.role{font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.person p:not(.role){color:var(--text-secondary);font-size:.97rem;line-height:1.6;margin-top:6px}
.person p:not(.role)+p{margin-top:4px}

/* faq */
.faq-grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,6vw,96px);align-items:start}
.faq-head{position:sticky;top:110px}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font:600 1.12rem/1.4 var(--body);transition:color .3s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;transition:transform .45s var(--ease-out)}
.faq-list details[open] summary::after{transform:rotate(135deg)}
.faq-list summary:hover{color:var(--accent)}
.faq-list details p{padding:0 0 26px;max-width:62ch;color:var(--text-secondary)}
.faq-list details[open] p{animation:faq-in .55s var(--ease-out)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* the one call to action */
.contact{background:var(--deep);color:#E3EAF0;overflow:hidden;padding-bottom:clamp(64px,8vw,104px)}
.contact-bg{position:absolute;inset:0;background:#0B1824 center/cover no-repeat;opacity:0;transition:opacity 1.2s var(--ease-out)}
.contact-bg.loaded{opacity:1}
.contact-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,12,19,.92) 0%,rgba(5,12,19,.76) 45%,rgba(5,12,19,.55) 100%)}
.contact.live .contact-bg{animation:slow-zoom 30s ease-in-out infinite alternate;animation-delay:-10s}
.contact-grid{position:relative;display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,88px);align-items:start}
.contact h2{color:#F2F6F9;text-shadow:0 2px 18px rgba(4,10,16,.5)}
.contact .kicker{color:#B6C6D3}
.contact .lede{color:#D0DBE4}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;background:var(--panel);color:var(--text-primary);border-radius:16px;padding:clamp(22px,3vw,36px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide,.form .btn,.form-error,.form-success{grid-column:1/-1}
.field label{font:600 .9rem/1.3 var(--body)}
.field input,.field select,.field textarea{font:400 1rem/1.4 var(--body);color:var(--text-primary);background:#FCFDFE;border:1.5px solid var(--line-strong);border-radius:8px;padding:12px 13px;min-height:46px;transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.field.bad input{border-color:#B3261E}
.form-error{color:#B3261E;font-weight:600;font-size:.94rem}
.form-error:empty{display:none}
.form-success{display:none;font-weight:600;line-height:1.5}
.form.sent .field,.form.sent .btn{display:none}
.form.sent .form-success{display:block;animation:faq-in .6s var(--ease-out)}
.closing{position:relative;text-align:center;font:600 clamp(1.35rem,2.3vw,1.9rem)/1.3 var(--display);letter-spacing:-.015em;color:#F2F6F9;margin:clamp(64px,8vw,104px) auto 0;width:min(1200px,calc(100% - 40px))}

/* footer */
.footer{position:relative;z-index:1;padding:64px 0 56px;border-top:1px solid rgba(157,180,198,.18);font-size:.94rem}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 64px}
.foot-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.foot-logo .logo-mark{width:54px;height:40px}
.foot-logo .logo-word{width:176px;height:22px}
.foot-brand p{margin-top:14px;color:#C2D0DB}
.foot-notes p{color:#A9BCCB}
.foot-notes p+p{margin-top:8px}
.foot-disclose{font-size:.88rem}

/* layout breakpoints */
@media (max-width:960px){
  .test-grid,.how-grid,.contact-grid,.faq-grid,.beam-lab,.aud-grid{grid-template-columns:1fr}
  .faq-head{position:static}
  .pains,.people{grid-template-columns:1fr}
  .photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ph-team{grid-column:1/-1}
  .stages{grid-template-columns:1fr}
  .stage-line{display:none}
  .st{padding-top:0;padding-left:30px}
  .st::before{top:6px}
}
@media (max-width:640px){
  .form-cards,.form{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .nav-logo .logo-word{width:118px;height:15px}
  .nav-logo .logo-mark{width:38px;height:28px}
  .data-row{grid-template-columns:1fr 1fr}
  .dr-name{grid-column:1/-1}
  body{font-size:16.5px}
}
@media (max-width:420px){.nav-logo .logo-word{display:none}}

/* pause everything off-tab */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* reduced motion: final states, nothing moves */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  [data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important}
  .divider path,.stage-line path,.ln-track,.ln-spray,.ln-thru{stroke-dashoffset:0!important}
  .ln-ends circle,.ln-boron circle{opacity:.75!important}
  .dr-bar::after{transform:scaleX(var(--v))!important}
  .tag .x{opacity:.95!important;transform:none!important}
  .bl-svg{--p:1!important}
  .env-streak{display:none}
}
body.rm-pinned [data-reveal],body.rm-pinned [data-stagger]>*{opacity:1;transform:none}
body.rm-pinned .divider path,body.rm-pinned .stage-line path,body.rm-pinned .ln-track,body.rm-pinned .ln-spray,body.rm-pinned .ln-thru{stroke-dashoffset:0}
body.rm-pinned .ln-ends circle,body.rm-pinned .ln-boron circle{opacity:.75}
body.rm-pinned .dr-bar::after{transform:scaleX(var(--v))}