/* PerimeterOne home · the vault. One dark world by choice: black, Apple greys, white type.
   The only colour on the page is the blue ring in the vault photograph. */
:root{
  --bg:#000; --bg2:#0b0b0c; --t1:#f5f5f7; --t2:#a1a1a6; --t3:#86868b;
  --line:rgba(245,245,247,.14); --line2:rgba(245,245,247,.08);
  --nav-bg:rgba(0,0,0,.66);
  --sans:"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Baskervville","Iowan Old Style",Georgia,"Times New Roman",serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-h1:clamp(38px,5.2vw,80px); --fs-h2:clamp(30px,3.6vw,52px); --fs-h3:21px; --fs-sub:clamp(17px,1.35vw,21px); --fs-cap:12px;
  --ease:cubic-bezier(.22,1,.36,1); --arrive:cubic-bezier(.16,1,.3,1);
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  --nav-h:60px; color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
.wrap{width:min(1180px,100%);margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--t1);color:#000;padding:8px 14px;border-radius:8px}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--t1);outline-offset:3px;border-radius:4px}
main:focus{outline:none}

/* type */
.kicker,.tag{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.h1{font-weight:600;letter-spacing:-.03em;font-size:var(--fs-h1);line-height:1.02;text-wrap:balance}
.h2{font-weight:600;letter-spacing:-.025em;font-size:var(--fs-h2);line-height:1.08;text-wrap:balance;max-width:20ch}
.h3{font-weight:600;font-size:var(--fs-h3);letter-spacing:-.015em;line-height:1.25}
.sub{font-size:var(--fs-sub);line-height:1.45;color:var(--t2);max-width:60ch;text-wrap:pretty}
.body{color:var(--t2);font-size:15.5px;max-width:60ch;text-wrap:pretty}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--t1);text-decoration:none;white-space:nowrap}
.more::after{content:"›";font-size:1.25em;line-height:1;transform:translateY(-1px);transition:transform .3s var(--ease)}
.more:hover::after{transform:translate(3px,-1px)}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;background:var(--t1);color:#000;text-decoration:none;font-weight:600;font-size:15px;transition:transform .3s var(--ease),background-color .3s var(--ease)}
.btn:hover{transform:translateY(-1px);background:#fff}
.btn.ghost{background:transparent;color:var(--t1);box-shadow:inset 0 0 0 1px rgba(245,245,247,.5)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--t1);background:rgba(245,245,247,.06)}

/* arrivals (the OPTAVIUS system): words from a soft blur, blocks rise, one curve, 90 ms cascade */
.rv{transition:opacity 1.2s var(--arrive) var(--d,0s),transform 1.5s var(--arrive) var(--d,0s),filter 1.2s var(--arrive) var(--d,0s)}
.js .rv{opacity:0;transform:translateY(28px)}
.js .kicker.rv,.js .h1.rv,.js .h2.rv,.js .sub.rv{filter:blur(8px);transform:translateY(20px)}
.js .rv.in{opacity:1;transform:none;filter:none}
.settle .stage{transition:scale 2.4s var(--arrive)}
.js .settle .stage{scale:1.07}
.js .settle.in .stage{scale:1}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--nav-h) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);
  padding-left:var(--gl);padding-right:var(--gr);display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid var(--line2);
  transition:transform .6s var(--ease)}
.nav.tuck{transform:translateY(-100%)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:-.01em;font-size:16px}
.brand img{height:22px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500}
.nav-links > a,.drop-btn{opacity:.8;text-decoration:none;position:relative;padding-block:4px;transition:opacity .3s var(--ease)}
.nav-links > a:hover,.drop-btn:hover,.drop-btn[aria-expanded="true"]{opacity:1}
.nav-links > a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav-links > a:hover::after{transform:scaleX(1)}
.drop{position:relative}
.drop-btn{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.drop-btn span{font-size:10px;transition:transform .3s var(--ease)}
.drop-btn[aria-expanded="true"] span{transform:rotate(180deg)}
.drop-menu{position:absolute;top:calc(100% + 14px);left:-14px;min-width:240px;padding:8px;border-radius:14px;background:rgba(14,14,15,.94);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px var(--line),0 24px 48px -24px #000;
  display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.drop:hover .drop-menu,.drop-menu.open,.drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:none}
.drop-menu a{padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--t2);transition:background-color .2s,color .2s}
.drop-menu a:hover{background:rgba(245,245,247,.06);color:var(--t1)}
.nav-end{display:flex;align-items:center;gap:18px}
.nav-text{font-size:14px;font-weight:500;text-decoration:none;opacity:.8}.nav-text:hover{opacity:1}
.nav-cta{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;background:var(--t1);color:#000;font-size:13px;font-weight:600;text-decoration:none}
.menu-only{display:none!important}
.burger{display:none;appearance:none;border:0;background:none;width:44px;height:44px;position:relative;cursor:pointer;color:var(--t1)}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.menu-open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:980px){
  .nav-text,.nav-cta{display:none}
  .burger{display:block}
  .nav-links{position:fixed;inset:calc(var(--nav-h) + env(safe-area-inset-top,0px)) 0 0 0;flex-direction:column;align-items:stretch;gap:0;
    padding:16px var(--gr) calc(32px + env(safe-area-inset-bottom,0px)) var(--gl);background:#000;font-size:20px;overflow-y:auto;
    opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
  .menu-open .nav-links{opacity:1;visibility:visible}
  /* a backdrop-filter makes the nav the containing block for its fixed menu; drop it while the menu is open */
  .menu-open .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#000}
  .nav-links > a,.drop-btn{opacity:1;padding:14px 0;border-bottom:1px solid var(--line2);width:100%}
  .nav-links > a::after{display:none}
  .menu-only{display:block!important}
  .drop-menu{position:static;opacity:1;visibility:visible;transform:none;display:none;background:none;box-shadow:none;padding:0 0 8px 12px;min-width:0}
  .drop-menu.open{display:flex}
  .drop:hover .drop-menu:not(.open){display:none}
  .drop-menu a{font-size:17px}
}

/* hero: copy left, the vault right, full bleed */
.hero{display:grid;grid-template-columns:1fr}
.hero-copy{display:flex;flex-direction:column;justify-content:center;gap:26px;padding-block:calc(var(--nav-h) + 40px) 56px}
.hero-photo{position:relative;overflow:hidden;min-height:62svh;background:#050505}
/* the stage is the whole photo, sized by script like object-fit:cover; the ring layers are placed in % of it (img/rings/rings.json) */
.hero-photo .stage{position:absolute;left:0;top:-6%;width:100%;height:112%;will-change:transform;transform-origin:50.11% 49.9%}
.hero-photo .stage > .base{position:absolute;inset:0;width:100%;height:100%;display:block}
.rings{position:absolute;left:30.3013%;top:34.75%;width:39.5926%;height:30.2917%;pointer-events:none}
/* the vault's blue light: a layer made from the photo's own LED light plus its soft spill, added with screen blending.
   Hover the door: it brightens. Click or tap: a soft pulse that settles back. */
.hero-photo .glow{position:absolute;left:5.859%;top:17.208%;width:88.811%;height:82.792%;display:block;pointer-events:none;
  mix-blend-mode:screen;opacity:0;transition:opacity 1.1s var(--arrive);will-change:opacity}
.hero-photo.lit .glow{opacity:.85}
.hero-photo.pulse .glow{animation:vaultPulse 2.2s var(--arrive)}
@keyframes vaultPulse{0%{opacity:.15}22%{opacity:1}100%{opacity:.85}}
.hero-photo:not(.lit).pulse .glow{animation-name:vaultPulseOut}
@keyframes vaultPulseOut{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
.door-hit{position:absolute;left:13.672%;top:22.771%;width:72.74%;height:51.021%;border-radius:50%;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent}
.rings img{position:absolute;inset:0;width:100%;height:100%;display:block}
.rings .ring{will-change:transform}
.rings .ring-light{mix-blend-mode:multiply}
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 14%)}
.stats{display:flex;flex-wrap:wrap;gap:12px 40px;padding-top:8px;border-top:1px solid var(--line2);margin-top:6px}
.stats div{display:flex;flex-direction:column-reverse;gap:2px}
.stats dt{font-size:13px;color:var(--t3)}
.stats dd{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:100svh}
  .hero-copy{order:1;padding-right:48px}
  .hero-photo{order:2;min-height:100svh}
}
@media (max-width:899px){ .hero-photo::after{background:linear-gradient(0deg,#000 0,rgba(0,0,0,0) 22%)} .hero-photo{order:2} }

/* the promise band */
.band{border-block:1px solid var(--line2)}
.promises{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;padding-block:22px;color:var(--t2);font-size:15px}
.promises li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--t1);margin-right:10px;vertical-align:2px}

/* sections */
.section{padding-block:clamp(80px,11vh,136px)}
.section + .section{border-top:1px solid var(--line2)}
.stack{display:flex;flex-direction:column;gap:18px}
.split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px}}

.ledger{border:1px solid var(--line);border-radius:14px;background:var(--bg2);overflow:hidden;box-shadow:0 40px 80px -48px #000}
.ledger-head{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line2);font-family:var(--mono);font-size:12px;color:var(--t3);letter-spacing:.04em}
.ledger pre{margin:0;padding:18px 18px 22px;font-family:var(--mono);font-size:14px;line-height:1.8;color:var(--t2);white-space:pre-wrap;overflow-x:auto}
.ledger .ln{display:block;transition:opacity .8s var(--arrive),translate .9s var(--arrive);transition-delay:calc(var(--i)*120ms + .4s)}
.ledger .cmd,.ledger .ok{color:var(--t1)} .ledger .dim{color:var(--t3)}
.js .ledger .ln{opacity:0;translate:0 .4em}
.js .ledger.in .ln{opacity:1;translate:none}

.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-block:52px 36px;padding-block:32px;border-block:1px solid var(--line2)}
.fig{display:flex;flex-direction:column;gap:6px}
.fig b{font-size:clamp(34px,4vw,56px);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.fig span{color:var(--t3);font-size:15px}

.quote-band{padding-block:clamp(72px,10vh,120px)}
.quote-band figure{display:flex;flex-direction:column;gap:18px}
.quote{font-family:var(--serif);font-size:clamp(26px,3vw,42px);line-height:1.22;letter-spacing:-.01em;max-width:28ch;text-wrap:balance;color:var(--t2)}
.quote em{font-style:italic;color:var(--t1)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;margin-top:52px}
.step{display:flex;flex-direction:column;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.step .tag{color:var(--t1)}
.step .more{margin-top:4px}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-block:52px 32px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg2)}
.pillar{padding:30px 28px 34px;display:flex;flex-direction:column;gap:12px}
.pillar + .pillar{border-left:1px solid var(--line2)}

.cta .h2{max-width:24ch}
.cta .stack{gap:26px}

/* footer */
.foot{border-top:1px solid var(--line2);padding-block:64px calc(40px + env(safe-area-inset-bottom,0px));color:var(--t2);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:36px 28px}
.foot-brand{display:flex;flex-direction:column;gap:14px;max-width:30ch}
.foot h3{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:12px}
.foot ul{display:flex;flex-direction:column;gap:9px}
.foot ul a{text-decoration:none;color:var(--t2);transition:color .2s}.foot ul a:hover{color:var(--t1)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:52px;padding-top:24px;border-top:1px solid var(--line2);color:var(--t3);font-size:13px}

@media (max-width:980px){.foot-grid{grid-template-columns:repeat(3,1fr)}.foot-brand{grid-column:1/-1}}
@media (max-width:860px){
  .steps,.pillars{grid-template-columns:1fr}
  .pillar + .pillar{border-left:0;border-top:1px solid var(--line2)}
}
@media (max-width:640px){
  .figures{grid-template-columns:1fr;gap:22px}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .promises{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .rv,.settle .stage,.ledger .ln,.nav{transition:none!important}
  .js .rv{opacity:1;transform:none;filter:none}
  .js .settle .stage{scale:1}
  .js .ledger .ln{opacity:1;translate:none}
}

/* ===== the vault carried down the page: close-ups cut from the same 4K photograph ===== */
:root{ --led:#3f3ea1; --led-hi:#a9b0ff; }
.js .settle:not(.hero-photo) img{scale:1.07}
.settle:not(.hero-photo) img{transition:scale 2.4s var(--arrive)}
.js .settle.in:not(.hero-photo) img{scale:1}
.media{position:relative;overflow:hidden;border-radius:14px;background:#050505;margin:0}
.media img{display:block;width:100%;height:100%;object-fit:cover}
.media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line2);pointer-events:none}

/* a signed run: the record card floats over the cipher rings */
.ledger-stage{position:relative;border-radius:18px;overflow:hidden;padding:clamp(28px,4vw,56px);background:#050505}
.ledger-stage .ledger-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.55}
.ledger-stage::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 50% 100%,rgba(0,0,0,.25),rgba(0,0,0,.85))}
.ledger-stage .ledger{position:relative;z-index:2;background:rgba(10,10,11,.72);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
.ledger .ok{color:var(--led-hi);text-shadow:0 0 14px rgba(63,62,161,.95),0 0 2px rgba(169,176,255,.6)}

/* why: words left, the shaft of light right */
.why-top{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.why-media{aspect-ratio:3/2}
@media (min-width:900px){ .why-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px} }
.fig b{font-size:clamp(44px,6vw,92px);font-weight:600;letter-spacing:-.04em}

/* the pattern: the black P1 core fills the right side, the words sit in the dark */
.photo-band{position:relative;overflow:hidden;min-height:min(80svh,760px);display:flex;align-items:center;border-top:1px solid var(--line2)}
.photo-band .band-bg{position:absolute;inset:0;margin:0}
.photo-band .band-bg img{position:absolute;right:0;top:50%;translate:0 -50%;height:118%;width:auto;max-width:none;object-fit:cover}
.photo-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#000 0,#000 30%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.15) 100%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,#000 100%)}
.photo-band .band-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;padding-block:clamp(72px,10vh,120px)}
.photo-band .quote{color:var(--t1)}
.photo-band .quote em{color:#fff}
@media (max-width:899px){
  .photo-band{display:block;min-height:0}
  .photo-band .band-bg{position:relative;height:56svh}
  .photo-band .band-bg img{position:absolute;left:50%;right:auto;translate:-50% -50%;height:100%;width:auto}
  .photo-band::after{background:linear-gradient(0deg,#000 0,rgba(0,0,0,0) 40%),linear-gradient(180deg,#000 0,rgba(0,0,0,0) 18%);height:56svh;bottom:auto}
  .photo-band .band-copy{padding-top:12px}
}

/* how it works: the steps scroll, the picture stays and changes with the step you are reading */
.how-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-top:52px}
.how-steps{display:flex;flex-direction:column;gap:28px;margin:0}
.how-steps .step{grid-template-columns:none}
.step-img{aspect-ratio:16/10;margin-bottom:6px}
.how-media{display:none}
@media (min-width:900px){
  .how-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
  .how-steps{gap:0}
  .how-steps .step{min-height:56svh;justify-content:center;border-top:0;padding-block:24px}
  .how-steps .step + .step{border-top:1px solid var(--line2)}
  .step-img{display:none}
  .how-media{display:block;position:sticky;top:calc(var(--nav-h) + 9svh);height:min(66svh,620px);border-radius:16px;overflow:hidden;background:#050505;box-shadow:inset 0 0 0 1px var(--line2)}
  .how-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.05;transition:opacity 1s var(--arrive),scale 1.8s var(--arrive)}
  .how-media img.on{opacity:1;scale:1}
}
.steps{grid-template-columns:none}

/* the three layers each carry a close-up */
.pmedia{margin:-30px -28px 6px;aspect-ratio:16/10;overflow:hidden;background:#050505;border-bottom:1px solid var(--line2)}
.pmedia img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--arrive)}
.pillar:hover .pmedia img{scale:1.04}

/* the last word sits on the vault's blue floor light */
.cta{position:relative;overflow:hidden}
.cta .wrap{position:relative;z-index:1}
.cta-glow{position:absolute;left:0;right:0;bottom:0;height:78%;margin:0;pointer-events:none}
.cta-glow img{width:100%;height:100%;object-fit:cover;object-position:50% 85%;opacity:.9}
.cta-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 100%)}
@media (prefers-reduced-motion:reduce){ .settle:not(.hero-photo) img,.how-media img,.pmedia img{transition:none!important} .js .settle:not(.hero-photo) img{scale:1} }

/* fixes after the first look */
.js .ledger-stage.in .ledger .ln{opacity:1;translate:none}        /* the record's lines arrive with their frame */
@media (min-width:900px){ .how-steps .step{min-height:44svh} .how-media{aspect-ratio:4/5;height:auto;max-height:min(70svh,640px)} }
.quote-pair .pair{display:grid;grid-template-columns:1fr;gap:56px}
.quote-pair figure{margin:0;display:flex;flex-direction:column;gap:18px}
.quote-pair .quote{font-size:clamp(24px,2.4vw,34px);max-width:none}
@media (min-width:900px){ .quote-pair .pair{grid-template-columns:1fr 1fr;gap:72px} .quote-pair figure + figure{border-left:1px solid var(--line2);padding-left:72px} }

/* the campaign shots: framed for each spot */
.photo-band .band-bg img{left:auto;right:0;top:0;translate:none;height:100%;width:72%;object-fit:cover;object-position:62% 50%}
@media (max-width:899px){ .photo-band .band-bg img{left:0;width:100%;translate:none;object-position:62% 50%} }
.ledger-stage .ledger-bg{object-position:50% 70%;opacity:.6}
.step-img{aspect-ratio:4/5;max-height:72svh}
.cta-glow img{object-position:50% 70%}

/* ===== the middle, in the language of the top and the bottom: big type and the vault's own blue light, no object photos ===== */
.glow-field{position:absolute;left:0;right:0;pointer-events:none;margin:0;z-index:0}
.glow-field img{display:block;width:100%;height:100%;object-fit:cover}
.why-lit,.statement{position:relative;overflow:hidden}
.why-lit > .wrap,.statement > .wrap{position:relative;z-index:1}
/* why: the floor light turned upside down glows down from above the numbers */
.why-lit .glow-top{top:0;height:70%;opacity:.55}
.why-lit .glow-top img{transform:scaleY(-1);object-position:50% 80%}
.why-lit .glow-top::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000 0,rgba(0,0,0,.2) 60%,rgba(0,0,0,.6) 100%)}
.why-top{grid-template-columns:1fr!important}
.fig b{font-size:clamp(56px,8vw,128px)}
/* the pattern: one statement, centred, in the big sans of the call to action */
.statement{padding-block:clamp(110px,16vh,190px);border-top:1px solid var(--line2)}
.statement .glow-field{inset:0;opacity:.7}
.statement .glow-field img{object-position:50% 40%}
.statement .glow-field::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,rgba(0,0,0,.35),#000 100%)}
.statement figure{margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.statement-text{margin:0;font-weight:600;letter-spacing:-.025em;font-size:clamp(28px,3.4vw,50px);line-height:1.12;max-width:26ch;color:var(--t2);text-wrap:balance}
.statement-text em{font-style:normal;color:var(--t1)}
/* how it works: three steps, big numerals */
.steps.numbered{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px;margin-top:64px}
.steps.numbered .step{min-height:0;padding-top:28px;border-top:1px solid var(--line);justify-content:flex-start}
.steps.numbered .num{font-family:var(--mono);font-size:clamp(44px,4.4vw,64px);line-height:1;color:var(--t3);letter-spacing:-.02em}
@media (max-width:860px){ .steps.numbered{grid-template-columns:1fr;gap:36px} }
/* the signed record sits on the blue floor light */
.ledger-stage .ledger-bg{object-position:50% 85%;opacity:.75}
.fig b{font-size:clamp(48px,6.2vw,100px);white-space:nowrap}
.why-lit .glow-top{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 35%,transparent 92%),linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 0,#000 35%,transparent 92%),linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-composite:intersect}
/* ── the polish pass: one left edge, the vault first on phones, no boxes, no rules between sections, a shine on the steel ── */
/* one left edge: the nav and the hero copy line up with the edge every section below uses (.wrap) */
.nav{padding-left:calc(max(0px,(100% - 1180px)/2) + var(--gl));padding-right:calc(max(0px,(100% - 1180px)/2) + var(--gr))}
@media (min-width:900px){
  .hero{container-type:inline-size}
  .hero-copy{padding-left:max(var(--gl),5vw);padding-left:calc(max(0px,(100cqw - 1180px)/2) + var(--gl));padding-right:clamp(32px,3.6vw,56px);container-type:inline-size}
  .hero-copy .h1{font-size:min(var(--fs-h1),calc(100cqw / 8.9))}   /* "Governed AI agents" is about 8.7 em: two lines, always */
}
/* phones open on the vault, the words follow */
@media (max-width:899px){ .hero-photo{order:0} .hero-copy{padding-top:28px} }
/* no boxes: the record's light fades into the black instead of ending in a rectangle */
.ledger-stage{background:none;overflow:visible;border-radius:0}
.ledger-stage::before{display:none}
.ledger-stage .ledger-bg{left:-10%;top:-16%;width:120%;height:132%;opacity:.6;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%)}
/* the pattern sits inside a ring of the vault's own light */
.statement .glow-field{opacity:.9;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 66%,transparent 100%)}
.statement .glow-field img{object-position:50% 20%}
.statement .glow-field::after{background:radial-gradient(40% 38% at 50% 58%,rgba(0,0,0,.6),rgba(0,0,0,0) 100%)}
/* no rules between sections: space and light do the separating */
.band,.statement,.foot,.photo-band{border-block:0}
.section + .section{border-top:0}
.promises li::before{background:var(--led-hi);box-shadow:0 0 10px 1px var(--led),0 0 2px var(--led-hi)}
.cta-glow{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%)}
/* light, not photos: the record and the numbers sit in a drawn pool of the vault's blue (img/shoot/light_pool), no floor seams, no door edge */
.ledger-stage .ledger-bg{object-position:50% 72%;opacity:.95}
.why-lit .glow-top{opacity:.85}
.why-lit .glow-top img{object-position:50% 70%}
.statement .glow-field{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 66%,transparent 100%)}
.why-lit .glow-top{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 46%,transparent 94%),linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 46%,transparent 94%),linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
@media (min-width:900px){ .statement{padding-block:clamp(170px,23vh,250px) clamp(130px,18vh,210px)} }
/* the numbers row spans the rule exactly: first flush left, last flush right, equal space between;
   big numerals carry their own side space, so each is pulled back to sit flush with its label */
.figures{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.fig b{margin-left:-.045em}
@media (max-width:640px){ .figures{flex-direction:column;gap:22px} }
.fig b{font-variant-numeric:proportional-nums}   /* display numbers: proportional digits, no table-width side space */
/* the pattern's arch, in depth (his pick, 20 Oct): a soft copy of the ring's light (img/shoot/light_ring3_glow, blur 7 baked and its
   wide low haze cut away, never blurred live) and the sharp line drift apart a touch and back, slowly, like two panes of glass;
   paused while off screen. Kept tight on purpose: the first version spilled twice the original haze off the line ("too much light bleed").
   Its brightness follows the scroll from index.html: faint until the words reach the middle of the screen, faint again as they leave.
   Room above (his "its still a hard line... it needs to continue up and maybe a little space could help"): the old picture held only
   100 px of glow above the arch, so the glow stopped in a flat edge. The light is redrawn on a taller canvas (img/shoot/light_ring3:
   the same ring, 280 px more glow above, fading to true black) and the section gains --arch-room on top, so the glow carries on
   upward and dies out softly. The arch keeps its old framing exactly: a box the old section's size under the new room, the picture
   sized in it the way object-fit:cover at 50% 20% sized the old one. */
.statement{--arch-room:clamp(80px,14vh,180px);padding-top:calc(clamp(110px,16vh,190px) + var(--arch-room))}
@media (min-width:900px){ .statement{padding-top:calc(clamp(170px,23vh,250px) + var(--arch-room))} }
.statement .glow-field{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--arch-room),#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 var(--arch-room),#000 66%,transparent 100%)}
.statement .arch{position:absolute;left:0;right:0;bottom:0;top:var(--arch-room);container-type:size}
.statement .arch .line,.statement .arch .halo{position:absolute;left:50%;translate:-50% 0;max-width:none;height:auto;object-fit:fill;
  width:max(100cqw,177.778cqh);top:calc((100cqh - max(100cqw,177.778cqh) * .5625) * .2 - max(100cqw,177.778cqh) * .175)}
.statement .arch .halo{mix-blend-mode:screen;opacity:.55;transform-origin:50% 94.915%}   /* the ring's centre: (800, 1120) of 1600 x 1180 */
.statement .arch .line,.statement .arch .halo{animation:7s cubic-bezier(.37,0,.63,1) infinite alternate paused}
.statement .arch .line{animation-name:archLine}
.statement .arch .halo{animation-name:archHalo}
.statement.on .arch .line,.statement.on .arch .halo{animation-play-state:running}
@keyframes archLine{from{transform:translateY(-.46%)}to{transform:translateY(.61%)}}                    /* same pixels as before on the taller picture */
@keyframes archHalo{from{transform:translateY(.95%) scale(1.005)}to{transform:translateY(-1.14%) scale(1.025)}}
@media (prefers-reduced-motion:reduce){ .statement .arch .line,.statement .arch .halo{animation:none} }
/* round (his "can you round it out a little better please"): measured on his screen, the glow above the line was 79 px thick at the
   top and 133 px at the shoulders, because the straight fade across the top of the section squashed it there. Now the glow fades at
   the same distance from the line all the way round (a circle on the ring's own centre, 50% 94.915% of the picture, radius .4625 of
   its width), the straight fade is gone from the top, and the dark patch behind the words is sized to the words so it no longer
   dims the top of the arch. */
.statement .glow-field{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)}
.statement .arch .line,.statement .arch .halo{--ring-r:calc(max(100cqw,177.778cqh) * .4625);
  -webkit-mask-image:radial-gradient(circle at 50% 94.915%,#000 calc(var(--ring-r) * 1.03),rgba(0,0,0,.5) calc(var(--ring-r) * 1.1),rgba(0,0,0,.15) calc(var(--ring-r) * 1.15),transparent calc(var(--ring-r) * 1.18));
  mask-image:radial-gradient(circle at 50% 94.915%,#000 calc(var(--ring-r) * 1.03),rgba(0,0,0,.5) calc(var(--ring-r) * 1.1),rgba(0,0,0,.15) calc(var(--ring-r) * 1.15),transparent calc(var(--ring-r) * 1.18))}
.statement .glow-field::after{background:radial-gradient(32% 30% at 50% 60%,rgba(0,0,0,.6),rgba(0,0,0,0) 100%)}
/* spacing (his "is the arch to close to the words??? hows spacing??"): measured, the gap straight above the words was fine (140-154 px)
   but the first line's ends came within 30 px of the arch at 1501 wide (67 px at 1903). The words now sit 60 px lower in the dome
   (padding-bottom gives back the same 60 px, so the section's height and the arch do not move) and the type tops out at 46 px
   instead of 50, keeping the same six lines: every line end is now 100 px or more from the arch at every width measured. */
.statement figure{margin-top:60px}
.statement{padding-bottom:calc(clamp(110px,16vh,190px) - 60px)}
@media (min-width:900px){ .statement{padding-bottom:calc(clamp(130px,18vh,210px) - 60px)} }
.statement-text{font-size:clamp(28px,3.1vw,46px)}
/* the numbers are doors (his "can we make it hover as u pass over it and it take u to the next page"): each one opens its own story
   on why.html (#records, #fake-users, #billing). With a mouse, the one under the pointer rises a touch, its label turns white and a
   chevron slides in, and the other two step back. On touch screens the chevron simply shows, so they read as tappable. */
a.fig{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.figures a.fig{transition:opacity 1.2s var(--arrive) var(--d,0s),transform 1.5s var(--arrive) var(--d,0s),translate .6s var(--ease)}   /* keeps the arrival */
a.fig b,a.fig span{transition:opacity .6s ease,color .6s ease}   /* slow, even fades: his "so quick it looks flickery" */
a.fig span::after{content:"\203A";display:inline-block;margin-left:6px;opacity:0;translate:-4px 0;transition:opacity .5s ease,translate .6s var(--ease)}
@media (hover:hover) and (pointer:fine){
  a.fig.is-lit{translate:0 -4px}
  a.fig.is-lit span{color:var(--t1)}
  a.fig.is-lit span::after{opacity:1;translate:0 0}
  .figures.has-lit a.fig:not(.is-lit) > *{opacity:.4}
}
@media (hover:none){ a.fig span::after{opacity:1;translate:0 0} }
a.fig:focus-visible span{color:var(--t1)} a.fig:focus-visible span::after{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){ a.fig,a.fig:hover{translate:none} }
/* the finishing pass (21 Oct): selected text glows in the vault's blue; the closing call's floor light comes up as you arrive (index.html sets --light) */
::selection{background:rgba(63,62,161,.92);color:#fff}
.cta-glow img{opacity:var(--light,1)}   /* on the picture, so the block's own arrival (.rv opacity) is untouched */