/* =============================================================
   VIGIL VECTOR - LUXE
   A merge of the two builds. From the editorial site: a single dark ground
   with no light sections, the page-transition veil, the hover-lit index, the
   line-by-line headline reveal, and full-bleed bands. From the govcon site:
   the Archivo display face, the danger-gap instrument, the carousels, the
   hero film and the workflow diagrams.

   The governing idea is restraint. One ground, one accent, one display face,
   and a lot of air. Everything that was competing for attention across the
   two sites gets a rank here instead.
   ============================================================= */

:root{
  /* ground: neutral near-black, no blue cast. Blue-cast darks read cheap at
     scale; the accent should be the only blue on the page. */
  --ink:#08090B;
  --ink-2:#0C0E11;
  --ink-3:#111418;
  --line:rgba(150,170,190,.13);
  --line-2:rgba(150,170,190,.26);

  --paper:#F4F7FA;
  --paper-dim:#9AA7B4;
  --paper-faint:#6F7C8A;

  --signal:#19AAFD;
  --signal-deep:#2395E2;
  --ok:#3DDC97;
  --warn:#F5B841;

  /* Display face: Archivo (grotesk). Sans fallback so a font-load failure degrades to sans, not serif. */
  --serif:"Archivo",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --shell:1360px;
  --gut:clamp(22px,5vw,80px);
  --nav-h:78px;
  --r:2px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper-dim);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:2px}
::selection{background:var(--signal);color:#00131f}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);position:relative}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--signal);color:#00131f;padding:12px 20px;font:600 14px/1 var(--sans)}
.skip:focus{left:0}

/* ---------- type ---------- */
.d1{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,8.4vw,7.4rem);line-height:.96;letter-spacing:-.035em;color:var(--paper);text-wrap:balance}
.d2{font-family:var(--serif);font-weight:400;font-size:clamp(1.95rem,4vw,3.3rem);line-height:1.04;letter-spacing:-.026em;color:var(--paper);text-wrap:balance}
.d3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.7vw,2.3rem);line-height:1.12;letter-spacing:-.02em;color:var(--paper)}
.lead{font-size:clamp(1.06rem,1.5vw,1.3rem);line-height:1.6;color:var(--paper-dim);max-width:56ch}
.body{color:var(--paper-dim);line-height:1.75;max-width:66ch}
.tag{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--signal);
  display:inline-flex;align-items:center;gap:.9em;
}
.tag::before{content:"";width:30px;height:1px;background:var(--signal);display:inline-block}
.tag--bare::before{display:none}
.fine{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint)}

/* ---------- section rhythm: the luxury is the air ---------- */
.sec{padding-block:clamp(60px,9vh,120px);position:relative}
.sec--tight{padding-block:clamp(44px,6vh,80px)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.head{display:grid;gap:16px;max-width:80ch;margin-bottom:clamp(18px,2.6vw,34px)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,90px);align-items:start}
/* centre the shorter text column against a taller media column (founder) */
@media (min-width:901px){.split--vc{align-items:center}}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:22px}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  border-bottom:1px solid transparent;transition:background .45s var(--ease),border-color .45s var(--ease)}
.nav.is-solid{background:rgba(8,9,11,.78);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--line)}
.nav .shell{display:flex;align-items:center;gap:30px;width:100%}
.mark{display:inline-flex;align-items:center;gap:12px;flex:none}
.mark img{width:46px;height:46px}
.mark b{font-family:var(--sans);font-weight:600;font-size:1.02rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--paper);line-height:1}
.mark small{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-faint);margin-top:5px}
.nav-links{display:flex;align-items:center;gap:clamp(20px,2.6vw,38px);margin-left:auto}
.nav-links a:not(.btn){font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim);position:relative;padding-block:6px;transition:color .2s var(--ease)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--signal);transition:width .4s var(--ease)}
.nav-links a:not(.btn):hover{color:var(--paper)}
.nav-links a:not(.btn):hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.menu-btn{display:none;width:44px;height:44px;position:relative;margin-left:auto}
.menu-btn i,.menu-btn i::before,.menu-btn i::after{position:absolute;left:11px;right:11px;height:1.5px;background:var(--paper);content:"";transition:transform .3s var(--ease),opacity .2s}
.menu-btn i{top:21px}.menu-btn i::before{top:-7px;left:0;right:0}.menu-btn i::after{top:7px;left:0;right:0}
.menu-btn[aria-expanded="true"] i{background:transparent}
.menu-btn[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);padding:10px var(--gut) 30px;border-bottom:1px solid var(--line);clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .55s var(--ease)}
  .nav-links.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
  .nav-links a:not(.btn){padding:19px 0;border-bottom:1px solid var(--line);font-size:.85rem}
  .nav-links .btn{margin-top:22px}
  body.lock{overflow:hidden}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px;min-height:48px;border:1px solid var(--line-2);color:var(--paper);position:relative;overflow:hidden;
  transition:color .45s var(--ease),border-color .45s var(--ease)}
.btn>span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.btn:hover{color:var(--ink);border-color:var(--paper)}
.btn:hover::before{transform:scaleY(1)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn--fill{background:var(--signal);border-color:var(--signal);color:#00131f}
.btn--fill:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(84svh,780px);display:flex;align-items:center;overflow:hidden;padding-bottom:clamp(40px,6vh,72px);padding-top:calc(var(--nav-h) + 24px)}
.hero__film{position:absolute;inset:0;top:0;left:0;transform:none;width:100%;height:100%;overflow:hidden;z-index:0;border:0}
.hero__film video,.hero__film img{width:100%;height:100%;object-fit:cover;opacity:.6;
  filter:saturate(.8) brightness(.82) contrast(1.04)}
/* headline sits on the left, so keep that side dark and let footage read on the right/centre */
.hero__film::after{content:"";position:absolute;inset:0;background:
  radial-gradient(84% 66% at 50% 50%,rgba(8,9,11,.58) 0%,rgba(8,9,11,0) 66%),
  linear-gradient(180deg,rgba(8,9,11,.36) 0%,rgba(8,9,11,.14) 42%,rgba(8,9,11,.32) 78%,var(--ink) 100%)}
.hero__grat{position:absolute;top:-6%;left:50%;width:min(1500px,145%);transform:translateX(-50%);opacity:.28;z-index:0;pointer-events:none}
.hero .shell{z-index:2;width:100%}
.hero__eyebrow{margin-bottom:26px}
.hero .d1{max-width:none;font-size:clamp(2.5rem,6.3vw,5.7rem)}
.hero__sub{margin-top:28px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.rail{display:flex;flex-wrap:wrap;gap:10px 46px;margin-top:clamp(40px,7vh,72px);padding-top:24px;border-top:1px solid var(--line)}
.rail div{display:flex;flex-direction:column;gap:6px}
.rail dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-faint)}
.rail dd{margin:0;font-size:.9rem;color:var(--paper)}
@media (max-width:900px){.hero__film{inset:0;width:100%;height:100%;top:0;left:0;bottom:auto}}

/* ---------- the gap instrument ---------- */
.gap{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:700px){.gap{grid-template-columns:1fr}}
.gap>div{background:var(--ink-2);padding:clamp(24px,3.4vw,42px)}
.gap__k{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint)}
.gap__t{font-family:var(--serif);font-size:clamp(2.6rem,6vw,4.6rem);line-height:1;letter-spacing:-.03em;margin:16px 0 10px;font-variant-numeric:tabular-nums}
.gap__old .gap__t{color:var(--paper-faint)}
.gap__new .gap__t{color:var(--signal)}
.gap__d{font-size:.9rem;color:var(--paper-dim)}
.gap__meter{height:2px;background:var(--line-2);margin-top:20px;position:relative;overflow:hidden}
.gap__meter i{position:absolute;inset:0;background:var(--signal);transform-origin:left;transform:scaleX(0)}
.gap__meter--old i{background:var(--warn)}

/* ---------- manifest: the hover-lit index, the signature interaction ---------- */
.manifest{position:relative;margin-top:clamp(40px,6vw,72px)}
.manifest__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .9s var(--ease)}
.manifest.is-lit .manifest__bg{opacity:.34}
.manifest__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);filter:saturate(.6) brightness(.6)}
.manifest__bg img.is-live{opacity:1}
.manifest__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(8,9,11,.6) 55%,rgba(8,9,11,.92) 100%)}
.mrow{position:relative;z-index:1;display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1fr) 44px;gap:22px;align-items:center;
  padding-block:clamp(22px,2.8vw,34px);border-top:1px solid var(--line);transition:border-color .45s var(--ease),padding-left .45s var(--ease)}
.mrow:last-child{border-bottom:1px solid var(--line)}
.mrow__i{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--paper-faint);transition:color .45s var(--ease)}
.mrow__t{font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,2.2rem);line-height:1.04;letter-spacing:-.022em;color:var(--paper-dim);transition:color .45s var(--ease),transform .45s var(--ease)}
.mrow__d{font-size:.9rem;color:var(--paper-faint);transition:color .45s var(--ease)}
.mrow__a{justify-self:end;width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--paper-faint);transition:all .45s var(--ease)}
.mrow:hover{padding-left:16px}
.mrow:hover .mrow__i{color:var(--signal)}
.mrow:hover .mrow__t{color:var(--paper);transform:translateX(6px)}
.mrow:hover .mrow__d{color:var(--paper-dim)}
.mrow:hover .mrow__a{border-color:var(--signal);color:var(--signal);transform:rotate(-45deg)}
@media (max-width:820px){.mrow{grid-template-columns:52px minmax(0,1fr) 30px}.mrow__d{display:none}.mrow:hover .mrow__t{transform:none}}

/* ---------- full-bleed band ---------- */
.band{position:relative;min-height:min(88svh,860px);display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--line)}
/* shorter band for sparse content (heading only) — less empty space */
.band--short{min-height:min(40svh,360px)}
.band img,.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.65) brightness(.6)}
/* fade top AND bottom into ink so stacked bands cross-blend at the seam
   rather than hard-cutting from one full-bleed image to the next */
.band::after{content:"";position:absolute;inset:0;background:
  radial-gradient(78% 66% at 50% 50%,rgba(8,9,11,.6) 0%,rgba(8,9,11,0) 68%),
  linear-gradient(180deg,var(--ink) 0%,rgba(8,9,11,.34) 16%,rgba(8,9,11,.22) 50%,rgba(8,9,11,.34) 84%,var(--ink) 100%)}
.band .shell{position:relative;z-index:2;width:100%;padding-block:clamp(30px,5vh,56px);text-align:center}
.band .tag{margin-bottom:16px;justify-content:center}
.band .lead{margin-inline:auto}
.band .d2{margin-inline:auto}

/* ---------- credentials ---------- */
/* auto-fit rather than a hard four, so the row stays correct when its
   contents change; two cards no longer leave two empty columns. */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (max-width:900px){.creds{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.creds{grid-template-columns:1fr}}
.cred{background:var(--ink);padding:clamp(16px,2vw,26px);transition:background .5s var(--ease)}
.cred:hover{background:var(--ink-2)}
.cred__k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:14px}
.cred__v{font-family:var(--serif);font-size:1.2rem;color:var(--paper);display:block;margin-bottom:8px;line-height:1.2}
.cred__s{font-size:.86rem;color:var(--paper-faint);line-height:1.55}

/* ---------- seals ---------- */
.seals{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);align-items:center;margin-top:34px}
.seals img{height:clamp(104px,11vw,146px);width:auto;opacity:1;background:#fff;padding:10px;border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.14),0 10px 26px rgba(0,0,0,.42);
  transition:box-shadow .3s var(--ease),transform .45s var(--ease)}
.seals a:hover img,.seals figure:hover img{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.2),0 14px 32px rgba(0,0,0,.5)}
.seals figure{display:flex}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(56px,7vw,84px) 34px;background:var(--ink-2)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px)}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}
.foot p{font-size:.88rem;color:var(--paper-faint);margin-top:18px;max-width:36ch;line-height:1.7}
/* brand column centred: blurb sits under the VIGIL VECTOR mark */
.foot__grid>div:first-child{text-align:center}
.foot__grid>div:first-child .mark{justify-content:center}
.foot__grid>div:first-child p{margin-inline:auto}
.foot__grid>div:first-child .foot__chain{justify-content:center}
.foot h5{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:16px;font-weight:500}
.foot li{margin-bottom:10px}
.foot a,.foot li{font-size:.9rem;color:var(--paper-dim);transition:color .2s var(--ease)}
.foot a:hover{color:var(--signal)}
.foot__end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line)}

/* ---------- motion ---------- */
.js [data-rise]{opacity:0;transform:translateY(26px);will-change:opacity,transform}
.js [data-rise].in{opacity:1;transform:none;transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0ms)}
.js .rvl{display:block;overflow:hidden}
.js .rvl>i{display:block;font-style:normal;transform:translateY(105%);animation:lineUp 1.1s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes lineUp{to{transform:none}}
.js [data-intro]{opacity:0;animation:fadeUp .95s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* page-transition veil, carried over from the editorial build */
.veil{position:fixed;inset:0;z-index:400;background:var(--ink);pointer-events:none;transform:scaleY(0);transform-origin:bottom;transition:transform .62s var(--ease-io);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.veil.up{transform:scaleY(1);pointer-events:auto}
/* The mark is a still frame at rest; its own keyframes run at 34s and 22s,
   which is invisible across a 520ms wipe. This drives it for the duration
   of the transit so the transition reads as the beacon sweeping. */
.veil img{width:88px;height:88px;opacity:0;transform:scale(.86);
  transition:opacity .3s var(--ease) .14s,transform .5s var(--ease) .14s}
.veil span{font-family:var(--sans);font-weight:600;font-size:1.5rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--paper);opacity:0;transition:opacity .3s var(--ease) .22s}
.veil.up img{opacity:1;transform:none;animation:veil-spin 1.5s linear infinite}
.veil.up span{opacity:1}
@keyframes veil-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.veil.up img{animation:none}}

.cur{position:fixed;top:0;left:0;z-index:350;pointer-events:none;width:22px;height:22px;margin:-11px 0 0 -11px;border:1px solid rgba(154,167,180,.5);border-radius:50%;opacity:0;
  transition:opacity .3s var(--ease),width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),border-color .3s var(--ease)}
.cur.on{opacity:1}
.cur.hot{width:38px;height:38px;margin:-19px 0 0 -19px;border-color:var(--signal)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

.rail-progress{position:fixed;top:0;left:0;height:1.5px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--signal);z-index:150;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-rise]{opacity:1;transform:none}
  .js .rvl>i{transform:none;animation:none}
  .js [data-intro]{opacity:1;animation:none}
  .veil,.cur,.rail-progress{display:none}
}

/* ---------- interior page hero ---------- */
.phero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(460px,64svh,700px);
  padding-top:calc(var(--nav-h) + clamp(28px,5vh,58px));padding-bottom:clamp(32px,5vh,60px)}
.phero__grat{position:absolute;top:-14%;left:50%;width:min(1400px,140%);transform:translateX(-50%);opacity:.22;z-index:0;pointer-events:none}
.phero .shell{z-index:1}
.crumbs{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:28px}
.crumbs a{transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--signal)}
.phero .d1{max-width:17ch;margin-top:24px}
.phero .lead{margin-top:26px}
/* ---------- centered heroes ---------- */
.hero{text-align:center}
.hero__cta{justify-content:center}
.hero .rail{justify-content:center}
.phero{text-align:center}
.phero .lead{margin-left:auto;margin-right:auto}
.phero .crumbs{justify-content:center}

/* ---------- stack: the integration layer sits above the primes ---------- */
.stack{display:flex;flex-direction:column;gap:12px;margin-top:clamp(40px,6vw,72px)}
.tier{border:1px solid var(--line);background:var(--ink-2);padding:clamp(22px,3vw,34px)}
.tier__k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);display:block;margin-bottom:14px}
.tier__n{font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.35rem);color:var(--paper);display:block;letter-spacing:-.015em}
.tier__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tier__c{border:1px solid var(--line-2);padding:8px 14px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--paper-dim)}
.tier--us{border-color:var(--signal);background:linear-gradient(180deg,rgba(25,170,253,.08),rgba(25,170,253,.02))}
.tier--us .tier__k{color:var(--signal)}
.tier--us p{color:var(--paper-dim);font-size:.94rem;margin-top:8px;max-width:60ch}
.stack__up{align-self:center;color:var(--signal);font-family:var(--mono);font-size:1.1rem;line-height:1}

/* ---------- tables ---------- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dt{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.dt caption{text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);padding-bottom:16px}
.dt th,.dt td{text-align:left;padding:9px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.dt th{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint);font-weight:500}
.dt td{color:var(--paper-dim)}
.dt tbody tr{transition:background .3s var(--ease)}
.dt tbody tr:hover{background:rgba(25,170,253,.05)}
.dt .ok{color:var(--ok);font-family:var(--mono);font-size:.8rem}

/* ---------- form ---------- */
.fgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,88px);align-items:start}
@media (max-width:920px){.fgrid{grid-template-columns:1fr;gap:44px}}
.f{display:grid;gap:24px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:560px){.fr{grid-template-columns:1fr}}
.fld{display:grid;gap:9px}
.fld label{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint)}
.fld input,.fld select,.fld textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);color:var(--paper);
  font:400 1rem/1.5 var(--sans);padding:12px 0;transition:border-color .35s var(--ease)}
.fld textarea{min-height:130px;resize:vertical}
.fld select{cursor:pointer}
.fld select option{background:var(--ink-2);color:var(--paper)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--signal)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--paper-faint)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.aside{display:grid;gap:34px}
.aside section{border-top:1px solid var(--line);padding-top:24px}
.aside h3{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);margin-bottom:16px;font-weight:500}
.aside p,.aside a{font-size:.94rem;color:var(--paper-dim);line-height:1.7}
.aside a.line{display:block;padding:6px 0;color:var(--paper);transition:color .2s var(--ease)}
.aside a.line:hover{color:var(--signal)}
.note{display:none;border:1px solid rgba(61,220,151,.4);background:rgba(61,220,151,.07);padding:18px 20px;color:var(--ok);font-size:.94rem;margin-bottom:24px}
.note.on{display:block}

/* ---------- steps ---------- */
.steps{display:grid;gap:0;margin-top:clamp(18px,2.4vw,30px);border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:74px minmax(0,1fr);gap:24px;padding-block:clamp(15px,2.1vw,24px);border-bottom:1px solid var(--line)}
.step__n{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--signal)}
.step__t{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.7rem);color:var(--paper);letter-spacing:-.018em}
.step__d{font-size:.94rem;color:var(--paper-dim);margin-top:8px;max-width:62ch}
@media (max-width:640px){.step{grid-template-columns:52px minmax(0,1fr);gap:16px}}
.steps--grid{grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-top:1px solid var(--line);margin-inline:auto;max-width:1040px}
.steps--grid .step{grid-template-columns:44px minmax(0,1fr);gap:16px;background:var(--ink);padding:clamp(18px,2.2vw,28px);border-bottom:0}
@media (max-width:700px){.steps--grid{grid-template-columns:1fr}}

/* ---------- cards: engagement models, mistake set (from the draft site) ---------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.qcard{background:var(--ink);padding:clamp(26px,3.4vw,44px);display:flex;flex-direction:column}
/* No text-transform here: uppercasing turned the brand term "DSaaS" into
   "DSAAS". Labels are authored in the case they should render. */
.qcard__k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--signal)}
.qcard__t{font-family:var(--serif);font-weight:400;font-size:clamp(1.18rem,2.1vw,1.5rem);line-height:1.14;
  letter-spacing:-.018em;color:var(--paper);margin:18px 0 14px}
.qcard__d{font-size:.94rem;line-height:1.68;color:var(--paper-dim)}
.qcard__l{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:9px}
.qcard__l li{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--paper-faint);
  padding-left:18px;position:relative}
.qcard__l li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:1px;background:var(--signal)}

/* A standing note, not the transient form banner that .note carries. */
.callout{border:1px solid var(--line);border-left:2px solid var(--signal);background:var(--ink-2);
  padding:clamp(26px,3.4vw,42px)}
.callout .lead{max-width:82ch}

/* ---------- the watch floor: ten rooms collapse into one picture ----------
   The sentence above it names three things each feed needs: its own monitor,
   its own room, its own operator. Those are the three things the drawing takes
   away, in that order, so the image and the sentence say one thing rather than
   two adjacent things.

   The collapse is done by scaling the whole floor toward its own centre rather
   than converging ten units along ten computed paths. That reads as the same
   implosion, needs no per-unit coordinates, and so survives the grid changing
   shape at the breakpoint. */
.wf{margin:clamp(44px,6vw,80px) 0 clamp(24px,3.5vw,48px);padding:0}
.wf__stage{position:relative;padding:clamp(24px,4vw,56px) clamp(14px,2vw,26px);
  min-height:clamp(460px,58vh,680px);display:flex;flex-direction:column;justify-content:center}

.wf__floor{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);
  transform-origin:50% 50%;
  transition:transform 1.15s var(--ease) .8s,opacity .85s var(--ease) .85s}

/* the room: the box each operator sits inside */
.wf__room{border:1px solid var(--line-2);background:var(--ink-2);padding:clamp(7px,.8vw,11px);
  display:flex;flex-direction:column;gap:clamp(6px,.7vw,9px);
  transform:rotate(var(--r,0deg));
  transition:border-color .65s var(--ease) .35s,background .65s var(--ease) .35s,transform .7s var(--ease) .35s}
/* the monitor inside it */
.wf__mon{aspect-ratio:16/10;background:var(--ink-3);border:1px solid var(--line);position:relative;
  overflow:hidden;transition:border-color .65s var(--ease) .35s}
.wf__sig{position:absolute;left:8%;right:8%;top:50%;height:1px;background:var(--line-2);overflow:hidden}
.wf__sig::after{content:"";position:absolute;inset:0;width:36%;background:var(--paper-faint);
  transform:translateX(var(--sig,0))}
/* the operator */
.wf__op{width:clamp(11px,1.2vw,15px);height:clamp(11px,1.2vw,15px);color:var(--paper-faint);
  align-self:center;transition:opacity .5s var(--ease),color .5s var(--ease)}

/* the one that remains */
.wf__one{position:absolute;left:50%;top:50%;width:min(78%,660px);
  transform:translate(-50%,-50%) scale(.82);opacity:0;
  transition:opacity .8s var(--ease) 1.5s,transform 1s var(--ease) 1.5s}
.wf__one .wf__room{border-color:var(--signal);background:var(--ink-2);transform:none;padding:clamp(10px,1.2vw,16px)}
.wf__one .wf__mon{border-color:rgba(25,170,253,.45);aspect-ratio:16/9}
.wf__one .wf__sig{background:rgba(25,170,253,.3)}
.wf__one .wf__sig::after{background:var(--signal);transform:none}
.wf__one .wf__op{color:var(--signal);width:clamp(15px,1.7vw,20px);height:clamp(15px,1.7vw,20px)}

.wf.is-one .wf__op{opacity:0}
.wf.is-one .wf__one .wf__op{opacity:1}
.wf.is-one .wf__room{border-color:transparent;background:transparent;transform:none}
.wf.is-one .wf__one .wf__room{border-color:var(--signal);background:var(--ink-2)}
.wf.is-one .wf__mon{border-color:transparent}
.wf.is-one .wf__one .wf__mon{border-color:rgba(25,170,253,.45)}
.wf.is-one .wf__floor{transform:scale(.14);opacity:0}
.wf.is-one .wf__one{opacity:1;transform:translate(-50%,-50%) scale(1)}

.wf__legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(14px,2vw,22px);
  padding-top:16px;border-top:1px solid var(--line)}
.wf__legend span{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-faint);transition:color .6s var(--ease) 1.5s,opacity .6s var(--ease) 1.5s}
.wf__legend .was{opacity:.45}
.wf.is-one .wf__legend .was{opacity:.3}
.wf.is-one .wf__legend .now{color:var(--signal)}

/* The second half of the passage is the caption's job: it lands under the
   image, not beside it, so the drawing is not asked to carry it too. */
.wf__cap{margin-top:clamp(24px,3.4vw,40px);font-size:clamp(1.15rem,2.5vw,1.95rem);line-height:1.36;
  letter-spacing:-.012em;color:var(--paper);max-width:none;text-align:center}
/* keep it on a single line spanning the page on desktop; wrap on smaller screens */
@media (min-width:980px){.wf__cap{white-space:nowrap;font-size:min(2.5vw,2rem)}}

@media (max-width:900px){
  .wf__floor{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .wf__room{padding:4px;gap:4px}
  .wf__op{width:9px;height:9px}
  .wf__one{width:62%}
}
@media (prefers-reduced-motion:reduce){
  .wf__floor,.wf__room,.wf__mon,.wf__op,.wf__one,.wf__legend span{transition:none}
}

/* ---------- enterprise advantage: three stat cards ---------- */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.stat{background:var(--ink-2);padding:clamp(28px,3.6vw,46px);display:flex;flex-direction:column}
.stat__f{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1;
  letter-spacing:-.03em;color:var(--signal);display:flex;align-items:baseline;gap:.28em}
.stat__f .to{color:var(--paper-faint);font-size:.62em}
.stat__u{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-faint);margin-top:14px}
.stat__t{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2.1vw,1.55rem);line-height:1.14;
  letter-spacing:-.018em;color:var(--paper);margin:26px 0 12px}
.stat__d{font-size:.94rem;line-height:1.68;color:var(--paper-dim)}

/* ---------- compliance first: the checklist ---------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:700px){.checks{grid-template-columns:1fr}}
.check{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;align-items:start;
  background:var(--ink);padding:clamp(16px,2vw,26px)}
.check__i{width:26px;height:26px;border-radius:50%;border:1px solid rgba(25,170,253,.4);
  background:rgba(25,170,253,.08);display:grid;place-items:center;margin-top:2px}
.check__i svg{width:13px;height:13px;color:var(--signal)}
.check__t{font-size:1.02rem;font-weight:500;color:var(--paper)}
.check__d{font-size:.94rem;line-height:1.66;color:var(--paper-dim);margin-top:6px;max-width:70ch}

/* ---------- closing call to action ---------- */
.close{text-align:center}
.close .d1{margin:26px auto 0;max-width:none;font-size:clamp(2.4rem,5.4vw,4.6rem)}
.close__sub{margin:26px auto 0;max-width:52ch;font-size:clamp(1.06rem,1.5vw,1.3rem);line-height:1.6;
  color:var(--paper-dim)}
.close__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(32px,4vw,46px)}

/* ---------- footer chain: interoperability to scalability ---------- */
/* Flex, not inline. The three terms are written with no whitespace between the
   tags and each is nowrap, so as inline content they formed one unbreakable run
   that overflowed this column and painted over the next one. Flex items always
   have a break opportunity between them. The arrow stays a pseudo-element on
   the term so a wrap can never strand it at the end of a line. */
.foot__chain{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:14px;row-gap:4px}
.foot__chain span{font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--paper-dim);white-space:nowrap}
/* On the following term, not the preceding one. As an ::after it wrapped
   with the term it trailed and sat stranded at the end of a line; as a
   ::before it travels down with the term it points at. */
.foot__chain span:not(:first-child)::before{content:"\2192";color:var(--signal);margin:0 .4em}

/* ---------- who we serve: three audiences, carried by image ---------- */
.who{display:grid;gap:clamp(14px,1.8vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.wcard{position:relative;display:block;margin:0}
.wcard__f{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2);
  border:1px solid var(--line)}
.wcard__f img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.72);
  transform:scale(1.02);transition:transform 1.1s var(--ease),filter .7s var(--ease)}
.wcard:hover .wcard__f img{transform:scale(1.06);filter:saturate(.75) brightness(.82)}
.wcard__f::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,11,.08) 0%,rgba(8,9,11,.55) 58%,rgba(8,9,11,.92) 100%)}
.wcard__t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.2vw,28px);
  font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.12;
  letter-spacing:-.018em;color:var(--paper);text-wrap:balance}
/* the rule sits under the frame, not on the photograph, so it reads as a
   marker for the card rather than another line inside the picture */
.wcard__r{display:block;width:56px;height:2px;background:var(--signal);margin-top:14px;
  transition:width .6s var(--ease)}
.wcard:hover .wcard__r{width:96px}

/* ---------- the workflow, five panels read at once ----------
   Replaces a carousel that showed one stage at a time. The five stages are a
   sequence whose whole point is the order, and a carousel hid four fifths of
   it behind a timer. */
.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,16px)}
.stg{position:relative;display:flex;flex-direction:column;min-width:0}
/* the rule fills left to right as the stage arrives, so the row reads as the
   pipeline advancing rather than five panels appearing */
.stg__r{height:2px;background:var(--line-2);position:relative;overflow:hidden;flex:none}
.stg__r::after{content:"";position:absolute;inset:0;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.stg.in .stg__r::after{transform:scaleX(1)}
.stg:last-child .stg__r::after{background:var(--paper)}

.stg__f{position:relative;flex:1;aspect-ratio:9/16;overflow:hidden;background:var(--ink-2);
  border:1px solid var(--line);border-top:0}
.stg__f img{width:100%;height:100%;object-fit:cover;opacity:.9;
  transform:scale(1.02);transition:transform 1.2s var(--ease),opacity .7s var(--ease)}
.stg:hover .stg__f img{transform:scale(1.07);opacity:1}
.stg__f::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,11,.3) 0%,rgba(8,9,11,.2) 42%,rgba(8,9,11,.94) 100%)}
.stg__n{position:absolute;top:clamp(12px,1.4vw,20px);left:clamp(12px,1.4vw,20px);z-index:2;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--paper-faint)}
.stg.in .stg__n{color:var(--signal)}
.stg__b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.6vw,24px)}
.stg__t{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.85rem);line-height:1.05;
  letter-spacing:-.02em;color:var(--paper)}
.stg__q{font-family:var(--mono);font-size:.62rem;line-height:1.55;letter-spacing:.08em;
  color:var(--paper-dim);margin-top:9px}

@media (max-width:900px){
  /* Five 9:16 panels at phone width are thumbnails. Stacked and letterboxed
     they stay legible and the numbering still carries the order. */
  .strip{grid-template-columns:1fr;gap:14px}
  .stg__f{aspect-ratio:16/9}
  .stg__t{font-size:1.5rem}
}

/* ---------- the three-word standard, heading of On the record ----------
   Stacked, one word per line. Kept in the mono at heading scale rather than
   set in the display face: three full-caps words at d2 in the display grotesk
   read as shouting, and this treatment is the one already approved. */
.creed{display:grid;gap:.12em;margin:0;
  font-family:var(--mono);font-size:clamp(1.35rem,3.1vw,2.5rem);font-weight:500;
  letter-spacing:.14em;line-height:1.14;text-transform:uppercase}
.creed span{color:var(--paper);display:block}
.creed .hi{color:var(--signal)}
/* one-line variant: the three words run across the page */
.creed--row{display:block;text-align:center}
.creed--row span{display:inline}
.body--wide{max-width:none;text-align:center}

/* ---------- the line that sets up the gap instrument ---------- */
.gap__lead{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.1vw,2.6rem);
  line-height:1.08;letter-spacing:-.024em;color:var(--paper);max-width:36ch;
  margin-bottom:clamp(24px,3vw,38px)}

/* the accented sentence in the hero headline */
.rvl--hi i{color:var(--signal)}

/* ---------- sector chips ---------- */
.sectors{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(30px,4vw,46px)}
.sectors span{border:1px solid var(--line-2);padding:13px 18px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-dim);white-space:nowrap;transition:border-color .4s var(--ease),color .4s var(--ease)}
.sectors span:hover{border-color:var(--signal);color:var(--paper)}
/* one clean row spanning the page on desktop; wraps on smaller screens */
@media (min-width:1300px){
  .sectors{flex-wrap:nowrap;gap:6px;justify-content:space-between}
  .sectors span{padding:10px 12px;font-size:.62rem;letter-spacing:.08em}
}
@media (max-width:600px){.sectors span{white-space:normal}}

/* A page-hero title long enough to run four lines needs a step down: the d1
   scale is set for short titles and a full sentence at that size swamps the
   page it is introducing. */
.phero--long .d1{font-size:clamp(2rem,4.6vw,3.9rem);line-height:1.04;letter-spacing:-.028em}
/* certifications hero: keep the title and lead each on a single line spanning
   the page on desktop; wrap normally on smaller screens so nothing overflows */
/* interior heroes: prominent and spanning the page — one line where they fit,
   two at most for long titles — never smaller than the section headings below */
.phero--oneline .d1{max-width:none}
@media (min-width:760px){
  .phero--oneline .d1{font-size:clamp(2.5rem,4.6vw,3.7rem);line-height:1.04;letter-spacing:-.03em}
  .phero--oneline .lead{max-width:62ch}
}

/* ---------- the three-stage flow, read left to right ----------
   Replaces a bottom-up vertical stack. Sensors, then us, then the decision, in
   the order the data actually travels. */
.flow3{display:grid;align-items:stretch;gap:clamp(10px,1.4vw,22px);
  grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr) auto minmax(0,1fr);
  margin-top:clamp(40px,6vw,72px)}
.flow3__ar{align-self:center;color:var(--signal);font-size:.8rem;line-height:1}
.flow3 .tier{display:flex;flex-direction:column;justify-content:center}
.tier__seq{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-dim);margin-top:14px;line-height:1.9}
@media (max-width:900px){
  .flow3{grid-template-columns:1fr}
  .flow3__ar{transform:rotate(90deg);justify-self:center}
}

/* ---------- why: four numbered cards ---------- */
.why4{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr))}
.why4 article{background:var(--ink-2);padding:clamp(24px,2.8vw,36px)}
.why4 b{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--signal);
  font-weight:400}
.why4 h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.45rem);
  letter-spacing:-.016em;color:var(--paper);margin:20px 0 12px}
.why4 p{font-size:.92rem;line-height:1.65;color:var(--paper-dim)}

/* Checks read as a pass, so they take the confirm colour rather than the accent. */
.check__i{border-color:rgba(61,220,151,.4);background:rgba(61,220,151,.09)}
.check__i svg{color:var(--ok)}

/* the figure the gap section turns on */
.gap__lead .n{color:var(--signal);font-style:italic}

/* ---------- zoom parallax ----------
   Seven plates scale out of one frame as the section scrolls. Ported from the
   React component; the geometry lives in CSS custom properties so the driver
   only ever writes one number per tile.

   Transform-only, so it composites without layout or paint. */
.zp{position:relative;height:300vh}
.zp__stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.zp__t{position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  transform:scale(var(--s,1));will-change:transform}
.zp__f{position:relative;overflow:hidden;border:1px solid var(--line-2);background:var(--ink-2);
  height:var(--h,25vh);width:var(--w,25vw);top:var(--y,0);left:var(--x,0)}
.zp__f img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(1.05)}
.zp__f::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,11,.35) 0%,rgba(8,9,11,.2) 45%,rgba(8,9,11,.75) 100%)}
/* The label is a child of a tile scaled up to 9x, so it counter-scales to hold
   its natural size, and fades before its tile can carry it off the edge. */
.zp__l{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:6%;
  transform:scale(var(--is,1));opacity:var(--o,1)}
.zp__l span{font-family:var(--mono);font-size:clamp(9px,.85vw,15px);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--paper);white-space:nowrap;text-align:center}
/* The caption sits over the tile field, so it carries its own ground.
   Without it the words landed on whichever plate happened to be beneath. */
.zp__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;text-align:center;
  padding:clamp(26px,5vh,60px) var(--gut) clamp(20px,4vh,44px);
  background:linear-gradient(180deg,rgba(8,9,11,0),rgba(8,9,11,.86) 42%);
  opacity:var(--co,1);transition:opacity .4s var(--ease)}

@media (max-width:900px){
  /* A pinned 300vh stage on a phone is three screens of scroll for one effect,
     and the address bar resizing the viewport fights the pin. The plates
     become a plain responsive grid instead. */
  .zp{height:auto}
  .zp__stick{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;
    gap:10px;padding-block:clamp(40px,7vh,72px)}
  .zp__t{position:static;transform:none;display:block}
  .zp__f{height:auto;width:auto;top:0;left:0;aspect-ratio:4/3}
  .zp__l{transform:none;opacity:1}
  .zp__cap{position:static;margin-top:18px;grid-column:1/-1;opacity:1;background:none;padding:0}
}
@media (prefers-reduced-motion:reduce){
  .zp{height:auto}
  .zp__stick{position:static;height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
    gap:10px;padding-block:clamp(40px,7vh,72px)}
  .zp__t{position:static;transform:none;display:block}
  .zp__f{height:auto;width:auto;top:0;left:0;aspect-ratio:4/3}
  .zp__l{transform:none;opacity:1}
  .zp__cap{position:static;margin-top:18px;grid-column:1/-1;opacity:1;background:none;padding:0}
}

/* The Chamber sticker is a 120x60 rectangle sitting in a row of circular
   seals, so it gets its own sizing rather than being forced into a circle. */
.seal--uscc img{width:clamp(132px,13vw,168px);height:auto;border-radius:2px;
  transition:transform .4s var(--ease),opacity .4s var(--ease);opacity:.9}
.seal--uscc a:hover img{transform:translateY(-3px);opacity:1}

/* ============================================================
   Media edge-softening — photos blend into the page, not
   slapped-on rectangles. Added on top of the base scrims.
   (SBA seals are intentionally left crisp.)
   ============================================================ */
.wcard__f,.stg__f,.band,.hero__film,.manifest{border-radius:8px;}
.wcard__f img,.stg__f img,.band img,.band video{
  -webkit-mask-image:radial-gradient(135% 130% at 50% 44%,#000 70%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(135% 130% at 50% 44%,#000 70%,rgba(0,0,0,0) 100%);
}
.manifest__bg img{
  -webkit-mask-image:radial-gradient(120% 120% at 60% 45%,#000 55%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(120% 120% at 60% 45%,#000 55%,rgba(0,0,0,0) 100%);
}
.hero__film{border:0;}
.hero__film video,.hero__film img{
  -webkit-mask-image:radial-gradient(200% 180% at 50% 45%,#000 88%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(200% 180% at 50% 45%,#000 88%,rgba(0,0,0,0) 100%);
}
/* soft inner vignette so the frame edge melts into the ink ground */
.wcard__f::before,.stg__f::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 clamp(20px,3.4vw,54px) rgba(8,9,11,.66);}

/* 4-up enterprise-advantage stat band */
.stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:920px){.stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stats--4{grid-template-columns:1fr}}
.stats--4 .stat__t{margin-top:14px}

/* ============================================================
   Aug refinements: two-tone heroes, page-hero video, gap
   before/after, softened headshot, bare seals.
   ============================================================ */

/* two-tone headline accent: one accented phrase per heading (heroes + sections) */
.hl{color:var(--signal);font-style:inherit;font-weight:inherit}

/* section headings forced onto a single line spanning the page (desktop),
   viewport-scaled so they never overflow; wrap normally on small screens */
@media (min-width:760px){
  .nowrapline{white-space:nowrap;max-width:none;font-size:min(2.9vw,2.6rem)}
}
/* capability band descriptions on a single line spanning the band (desktop);
   viewport-scaled so the longest never overflows; wraps on smaller screens */
@media (min-width:980px){
  .band .lead{white-space:nowrap;max-width:none;font-size:min(1.45vw,1.15rem)}
}

/* keep italic descenders from being clipped by the reveal mask */
.js .rvl{padding-bottom:.09em;margin-bottom:-.09em}

/* hero film cross-fades between clips */
.hero__film video{transition:opacity .7s var(--ease)}

/* ---------- page-hero background video ---------- */
.phero__film{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.phero__film video{width:100%;height:100%;object-fit:cover;opacity:.62;
  filter:saturate(.78) brightness(.82) contrast(1.04)}
/* text sits on the left, so keep that side dark for legibility and let the
   footage read clearly on the right and centre */
.phero__film::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,9,11,.5) 0%,rgba(8,9,11,.24) 45%,var(--ink) 100%),
    radial-gradient(96% 82% at 50% 50%,rgba(8,9,11,.5) 0%,rgba(8,9,11,0) 64%)}
.phero__film video{
  -webkit-mask-image:radial-gradient(165% 150% at 52% 42%,#000 74%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(165% 150% at 52% 42%,#000 74%,rgba(0,0,0,0) 100%)}

/* ---------- the danger-gap before / after ---------- */
.cmp{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(16px,2.4vw,34px);margin-top:clamp(40px,6vw,76px)}
.cmp__ar{color:var(--signal);font-size:1rem;line-height:1;justify-self:center}
.cmp__f{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--line)}
.cmp__f img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) brightness(.82)}
.cmp__c--now .cmp__f img,.cmp__c:last-of-type .cmp__f img{filter:saturate(.92) brightness(.92)}
.cmp__f::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 40px rgba(8,9,11,.6)}
.cmp__cap{display:block;margin-top:16px}
.cmp__k{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:8px}
.cmp__k--was{color:var(--paper-faint)}
.cmp__k--now{color:var(--signal)}
.cmp__d{display:block;font-size:.94rem;line-height:1.6;color:var(--paper-dim);max-width:34ch}
@media (max-width:760px){
  .cmp{grid-template-columns:1fr;gap:26px}
  .cmp__ar{transform:rotate(90deg)}
}

/* ---------- circular founder portrait, blue ring + Ken Burns ---------- */
.rounder{margin:26px 0 0;width:300px;max-width:74%;aspect-ratio:1/1;border-radius:50%;
  overflow:hidden;position:relative;flex:none;
  box-shadow:0 0 0 3px var(--signal),0 0 0 11px rgba(25,170,253,.14),0 30px 58px -24px rgba(0,0,0,.72)}
.rounder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;
  display:block;animation:kenburnsPortrait 34s var(--ease-io) infinite alternate;will-change:transform}
@keyframes kenburnsPortrait{from{transform:scale(1.02)}to{transform:scale(1.08) translate3d(-1%,-1.2%,0)}}
@media (prefers-reduced-motion:reduce){.rounder img{animation:none;transform:none}}
/* founder quote + attribution, sitting under the portrait in smaller type */
.founder__q{position:relative;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.12rem,1.5vw,1.42rem);line-height:1.5;color:var(--paper);
  margin:26px 0 0;padding-left:20px;max-width:36ch;quotes:"\201C""\201D"}
.founder__q::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:2px;
  background:var(--signal);border-radius:2px}
.founder__q::after{content:open-quote;position:absolute;left:14px;top:-.42em;
  font-size:2.4em;line-height:1;color:var(--signal);opacity:.28;font-style:normal}
.founder__cite{margin-top:20px}
.founder__name{font-family:var(--sans);font-weight:600;font-size:.98rem;letter-spacing:.005em;
  color:var(--paper);margin:0}
.founder__title{font-weight:500;color:var(--paper-dim);white-space:nowrap}
.founder__role{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-faint);line-height:1.9;margin:8px 0 0;max-width:44ch}

/* ---------- softened founder headshot ---------- */
.founder{margin:26px 0 0;max-width:440px;position:relative}
.founder img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:14px;box-shadow:0 34px 66px -26px rgba(0,0,0,.72)}
.founder{
  -webkit-mask-image:radial-gradient(128% 108% at 50% 42%,#000 66%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(128% 108% at 50% 42%,#000 66%,rgba(0,0,0,0) 100%)}

/* ---------- bare seals: transparent, no white plates ----------
   (SBA badges carry their own panels; the third-party USCC sticker
   keeps a plate so it stays legible on the dark ground.) */
.seals--bare figure:not(.seal--uscc) img{background:transparent;padding:0;border-radius:0;
  box-shadow:none;filter:none}
.seals--bare figure:not(.seal--uscc):hover img{box-shadow:none;transform:translateY(-3px)}

/* ---------- watch-floor boxes now carry real feed images ---------- */
.wf__mon{overflow:hidden}
.wf__mon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.9;filter:saturate(.62) brightness(.66) contrast(1.02);z-index:0}
.wf__mon .wf__sig,.wf__mon .wf__op{z-index:1}
/* the fused picture: bright, full-colour, the payoff of the collapse */
.wf__mon--cop img{opacity:1;filter:saturate(.96) brightness(.98) contrast(1.02)}
.wf__one .wf__mon{aspect-ratio:16/9}

/* ============================================================
   Ken Burns — still images drift slowly so full-bleed sections read
   as motion, not static cuts. Especially the stacked capability
   bands, where a static still next to a video band looks choppy.
   ============================================================ */
@keyframes kenburns{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.4%,-1.6%,0)}
}
@keyframes kenburnsAlt{
  from{transform:scale(1.14) translate3d(-1.2%,-1.2%,0)}
  to{transform:scale(1.05) translate3d(1.2%,0.6%,0)}
}
.band img{animation:kenburns 26s var(--ease-io) infinite alternate;will-change:transform}
.band:nth-of-type(even) img{animation:kenburnsAlt 32s var(--ease-io) infinite alternate}
/* the dim home advantage backdrop drifts too (no hover state to protect) */
#advantage img{animation:kenburnsAlt 40s var(--ease-io) infinite alternate}
@media (prefers-reduced-motion: reduce){
  .band img,#advantage img{animation:none}
}

/* ---------- flipped danger-gap lede: two lead statements ---------- */
.gaplede{margin-top:clamp(30px,5vw,66px);display:grid;gap:clamp(16px,2.2vw,28px)}
.gaplede__a{font-family:var(--sans);font-size:clamp(1.02rem,1.5vw,1.34rem);line-height:1.55;
  color:var(--paper-dim);max-width:none;text-align:center;margin:0}
/* the "We fuse…" line: its own centered statement underneath */
.gaplede__b{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.3;text-align:center;
  color:var(--signal);max-width:none;margin:clamp(14px,1.8vw,22px) auto 0}
.gaplede .gap__lead{margin-bottom:0}
/* animated accent underline that draws in when the line reveals */
.gap__lead--anim{position:relative;padding-bottom:.26em}
.gap__lead--anim::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:min(360px,58%);
  background:linear-gradient(90deg,var(--signal),rgba(25,170,253,0));
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .35s}
.js .gap__lead--anim.in::after{transform:scaleX(1)}
/* full-width variant: the sentence spans the page above the 13:00/00:02 box */
.gap__lead--wide{max-width:none;text-align:center;margin:clamp(30px,5vw,60px) auto 0;
  font-size:clamp(1.5rem,3.3vw,2.9rem)}
.gap__lead--wide::after{left:50%;width:min(440px,46%);transform:translateX(-50%) scaleX(0);transform-origin:center}
.js .gap__lead--wide.in::after{transform:translateX(-50%) scaleX(1)}
/* one-shot glow on "13 minutes" as the line arrives */
.js .gap__lead--anim.in .n{animation:nPulse 1.5s var(--ease) .45s 1 both}
@keyframes nPulse{
  0%{opacity:.45}
  45%{opacity:1;text-shadow:0 0 20px rgba(25,170,253,.55)}
  100%{opacity:1;text-shadow:0 0 0 rgba(25,170,253,0)}
}
@media (prefers-reduced-motion: reduce){
  .gap__lead--anim::after{transition:none;transform:scaleX(1)}
  .js .gap__lead--anim.in .n{animation:none}
}

/* ---------- FAQ (native details, no JS) ---------- */
.faq{max-width:840px;margin-inline:auto;border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1.9vw,1.35rem);
  color:var(--paper);letter-spacing:-.012em;line-height:1.3;
  padding:clamp(16px,2vw,22px) 44px clamp(16px,2vw,22px) 0;
  cursor:pointer;position:relative;list-style:none;transition:color .3s var(--ease)}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--signal)}
.faq__q::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--signal);font-family:var(--mono);font-size:1.35rem;line-height:1;transition:opacity .3s var(--ease)}
.faq__i[open] .faq__q::after{content:"\2013"}
.faq__a{padding:0 44px clamp(18px,2.4vw,26px) 0;color:var(--paper-dim);line-height:1.72;max-width:72ch}
.faq__a p{margin:0}