/* =====================================================================================
   Optronix deck kit, v4 (decks/v4/deck.css). Shared by every deck in decks/.
   A fixed 1920x1080 stage scaled to fit the window; colours, type and motion come from the v4
   tokens (../css/ox/tokens.css, loaded first). Paper sheets (.slide.paper) remap the tokens,
   so every component here re-themes itself. Bespoke components stay in each deck's own <style>.
   Built from the Company Overview v4 design. See KIT.md for how to use it.
   ===================================================================================== */
:root{--px:96px;--ease:cubic-bezier(0.16,1,0.3,1);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink-0)}
body{font-family:var(--font-sans);font-size:20px;line-height:1.55;color:var(--fg-2);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
img,svg{display:block}
svg{overflow:visible}
b,strong{font-weight:500;color:var(--fg)}
::selection{background:rgba(123,126,242,.42);color:#fff}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------- stage */
#viewport{position:fixed;inset:0;overflow:hidden;background:var(--ink-0)}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;overflow:hidden;isolation:isolate;
  transform:translate(-50%,-50%);transform-origin:center center;
  background:
    radial-gradient(120% 90% at 85% 10%,rgba(43,45,102,.30) 0%,rgba(8,8,13,0) 55%),
    linear-gradient(180deg,var(--ink-0) 0%,var(--ink-1) 100%);
  box-shadow:0 0 0 1px var(--line),0 40px 120px rgba(0,0,0,.8);
  /* chrome colours, flipped for paper slides */
  --c-fg:var(--fg-2);--c-dim:var(--fg-3);--c-faint:var(--fg-4);--c-line:var(--line-2);--c-line3:var(--line-3);
  --c-glass:rgba(8,8,13,.62);--c-accent:var(--ox-300);--c-hover:rgba(123,126,242,.12)}
/* each chrome piece flips on its own, at the moment the incoming sheet passes under it */
#stage .is-paper{--c-fg:var(--paper-fg-2);--c-dim:var(--paper-fg-3);--c-faint:#8d8fa5;--c-line:rgba(11,11,18,.16);
  --c-line3:rgba(11,11,18,.28);--c-glass:rgba(245,245,242,.78);--c-accent:var(--ox-600);--c-hover:rgba(90,93,199,.08)}

/* soft brand light, drifting slowly (transform only) */
.orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;
  translate:-50% -50%;background:radial-gradient(circle,var(--c,rgba(123,126,242,.3)) 0%,transparent 66%);
  animation:orb var(--d,22s) ease-in-out infinite alternate}
.orb.v{--c:rgba(140,82,255,.30)} .orb.c{--c:rgba(92,225,230,.15)} .orb.b{--c:rgba(111,168,240,.20)}
@keyframes orb{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-6%,0) scale(1.08)}100%{transform:translate3d(-5%,4%,0) scale(.96)}}
/* film grain, plain alpha (no blend mode, so it costs nothing per frame) */
.grain{position:absolute;inset:0;z-index:70;pointer-events:none;opacity:.045;background-size:180px 180px;transition:opacity .5s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#stage.on-paper .grain{opacity:0}
/* registration marks at the four corners of the sheet */
.reg{position:absolute;z-index:65;width:22px;height:22px;pointer-events:none}
.reg::before,.reg::after{content:"";position:absolute;background:var(--c-line3);transition:background .22s}
.reg::before{left:0;right:0;top:10.5px;height:1px}
.reg::after{top:0;bottom:0;left:10.5px;width:1px}
.reg.tl{left:29px;top:29px}.reg.tr{right:29px;top:29px}.reg.bl{left:29px;bottom:29px}.reg.br{right:29px;bottom:29px}

/* ---------------------------------------------------------------- chrome */
.progress{position:absolute;left:0;top:0;width:100%;height:3px;z-index:60;background:var(--grad-mark-h);
  transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 14px rgba(140,82,255,.45)}
/* the wordmark is inline, its letters in currentColor, so a paper slide only changes one colour.
   The cover shows the site header's lockup ("a part of the GS Group") in the same place. */
.brand{position:absolute;left:var(--px);bottom:58px;z-index:50;width:155px;height:32px;color:#fff;
  transform-origin:0 100%;transition:transform .8s var(--ease),color .22s}
.brand.is-paper{color:#0b0b12}
.brand .wm{display:block;width:155px;height:32px;transition:opacity .22s}
.brand .wm-gs{position:absolute;left:-1.6px;top:-1.3px;height:47px;width:auto;max-width:none;opacity:0;transition:opacity .22s}
.brand.is-cover{transform:scale(1.5)}
.brand.is-cover .wm{opacity:0}
.brand.is-cover .wm-gs{opacity:1}

.tblock{position:absolute;right:calc(var(--px) + 140px);bottom:46px;z-index:50;display:grid;grid-auto-flow:column;
  border:1px solid var(--c-line);border-radius:4px;background:var(--c-glass);
  font:500 12.5px/1.25 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;transition:border-color .22s,background-color .22s}
.tblock>div{padding:8px 14px 9px;min-width:0}
.tblock>div+div{border-left:1px solid var(--c-line);transition:border-color .22s}
.tblock dt{color:var(--c-faint);margin-bottom:4px;transition:color .22s}
.tblock dd{color:var(--c-fg);white-space:nowrap;transition:color .22s}
.tblock .tb-view{width:236px}
.tblock .tb-view dd{overflow:hidden;text-overflow:ellipsis}
.tblock .tb-sheet{width:96px}

.navs{position:absolute;right:var(--px);bottom:44px;z-index:50;display:flex;gap:12px}
.navbtn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:var(--c-fg);
  border:1px solid var(--c-line3);transition:background-color .32s var(--ease),border-color .32s var(--ease),color .32s,opacity .32s,transform .16s var(--ease)}
.navbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.navbtn:hover{border-color:var(--c-accent);background:var(--c-hover)}
.navbtn:active{transform:scale(.96)}
.navbtn.next{background:var(--ox-500);border-color:var(--ox-500);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px -14px rgba(123,126,242,.7)}
.navbtn.next:hover{background:var(--ox-400);border-color:var(--ox-400)}
.navbtn.off{opacity:.25;pointer-events:none}

.helpbar{position:absolute;top:38px;right:var(--px);z-index:58;display:flex;align-items:center;gap:22px;
  font:500 12.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-dim);transition:color .22s}
.hb-item{display:flex;align-items:center;gap:8px;white-space:nowrap}
.key{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border:1px solid var(--c-line);border-radius:4px;
  color:var(--c-fg);font-size:13px;letter-spacing:0;transition:border-color .22s,color .22s}
.hb-btn{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 16px;border:1px solid var(--c-line3);border-radius:999px;
  color:var(--c-fg);font:inherit;letter-spacing:inherit;text-transform:inherit;transition:border-color .3s,background-color .3s,color .3s}
.hb-btn:hover{border-color:var(--c-accent);background:var(--c-hover)}
.hb-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.hb-home{width:38px;padding:0;justify-content:center}
.hb-menu-btn.open svg{transform:rotate(180deg)}
.hb-menu{position:absolute;top:52px;right:0;width:460px;max-height:820px;overflow-y:auto;padding:8px;
  background:var(--ink-4);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px var(--line);
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .3s var(--ease);
  font:400 17px/1.3 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--fg-2)}
.hb-menu.open{opacity:1;transform:none;pointer-events:auto}
.hb-menu div{display:flex;align-items:center;gap:16px;padding:9px 14px;border-radius:8px;cursor:pointer;transition:background-color .2s,color .2s}
.hb-menu div:hover{background:rgba(123,126,242,.14);color:var(--fg)}
.hb-menu div.cur{color:var(--fg);background:rgba(255,255,255,.04)}
.hb-menu .mn{font:500 12.5px/1 var(--font-mono);letter-spacing:.1em;color:var(--fg-4);min-width:24px}
.hb-menu div.cur .mn{color:var(--ox-300)}

.hint{position:absolute;left:50%;bottom:64px;translate:-50% 0;z-index:50;display:flex;align-items:center;gap:12px;
  font:500 12.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.hint .key{margin-right:2px}
.hint .sep{width:24px}

/* ---------------------------------------------------------------- slides, type, cards, chips, tags, pills */
.slide{position:absolute;inset:0;z-index:2;visibility:hidden;display:flex;flex-direction:column;isolation:isolate;
  padding:128px var(--px) 154px;color:var(--fg-2);
  /* every slide is an opaque sheet, so a slide pushing in covers the one leaving cleanly */
  background:
    radial-gradient(120% 90% at 85% 10%,rgba(43,45,102,.30) 0%,rgba(8,8,13,0) 55%),
    radial-gradient(55% 60% at 2% 100%,rgba(92,225,230,.07) 0%,rgba(8,8,13,0) 70%),
    linear-gradient(180deg,var(--ink-0) 0%,var(--ink-1) 100%)}
/* blueprint grid: twelve hairline columns on the content edges */
.slide::before{content:"";position:absolute;top:0;bottom:0;left:var(--px);right:var(--px);z-index:-1;pointer-events:none;
  border-right:1px solid var(--grid-c,rgba(255,255,255,.06));background-image:linear-gradient(90deg,var(--grid-c,rgba(255,255,255,.06)) 1px,transparent 1px);
  background-size:calc(100% / 12) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%)}
.slide.active{visibility:visible}
/* hidden slides keep their looping animations paused, so an idle deck does no per-frame work */
#stage .slide:not(.active) *,#stage .slide:not(.active) *::before,#stage .slide:not(.active) *::after{animation-play-state:paused}
/* paper: remaps the tokens so every component re-themes itself (as .theme-paper on the site) */
.slide.paper{
  --ink-0:var(--paper-2);--ink-1:var(--paper);--ink-2:#ffffff;--ink-3:#fbfbf8;--ink-4:#ffffff;
  --line:var(--paper-line);--line-2:rgba(11,11,18,.16);--line-3:rgba(11,11,18,.28);
  --fg:var(--paper-fg);--fg-2:var(--paper-fg-2);--fg-3:var(--paper-fg-3);--fg-4:#8d8fa5;
  --accent-text:var(--ox-600);--focus:var(--ox-600);
  --shadow-1:0 1px 2px rgba(11,11,18,.05),0 18px 40px -26px rgba(11,11,18,.35);
  --grad-text:linear-gradient(90deg,var(--ox-600) 0%,var(--violet) 48%,#2a9fb0 100%);
  --chip-bg:#fff;--card-shadow:var(--shadow-1);--card-glow:rgba(123,126,242,.08);--grid-c:rgba(11,11,18,.06);
  color:var(--fg-2);color-scheme:light;
  background:
    radial-gradient(90% 80% at 88% 0%,rgba(123,126,242,.14) 0%,rgba(245,245,242,0) 60%),
    radial-gradient(60% 70% at 0% 100%,rgba(92,225,230,.10) 0%,rgba(245,245,242,0) 70%),
    var(--paper)}

.body{margin-top:56px;margin-bottom:auto;padding-top:28px;width:100%}

/* type */
.eyebrow{display:inline-flex;align-items:center;gap:14px;align-self:flex-start;margin-bottom:26px;
  font:500 16px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.eyebrow::before{content:"";flex:none;width:15px;height:15px;background:var(--grad-mark);clip-path:polygon(32% 0,100% 0,68% 100%,0 100%)}
.eyebrow .n{color:var(--fg-3)}
.eyebrow .n::after{content:"/";margin-left:14px;color:var(--fg-4)}
h1,h2,h3,h4{font-weight:500;color:var(--fg);text-wrap:balance}
h2{font-size:76px;line-height:1.03;letter-spacing:-.035em}
h3{letter-spacing:-.02em}
.grad{background:var(--grad-text,var(--grad-mark-h));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline-end:.06em;margin-inline-end:-.06em;padding-bottom:.08em}
.lead{font-size:27px;line-height:1.5;color:var(--fg-2);max-width:1240px;text-wrap:pretty}
.mono{font-family:var(--font-mono);font-weight:500;text-transform:uppercase;letter-spacing:.12em}
/* SplitText line masks: room for descenders while the line rises */
.ln-mask{padding-bottom:.14em;margin-bottom:-.14em}

/* cards (the v4 card: hairline, small radius, a glow that follows the pointer) */
.card{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:32px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--card-shadow,none);color:var(--fg-2);
  transition:border-color .32s var(--ease),transform .32s var(--ease),box-shadow .32s var(--ease),opacity .4s var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,-20%),var(--card-glow,rgba(123,126,242,.12)),transparent 42%);
  opacity:0;transition:opacity .32s var(--ease)}
.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:2;padding:1px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,-20%),rgba(185,170,255,.95),rgba(92,225,230,.45) 35%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .32s var(--ease)}
.card:hover::before,.card:hover::after{opacity:1}
a.card:hover,.card.lift:hover{transform:translateY(-4px);border-color:var(--line-2)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:26px}
.cnum{font:500 15px/1 var(--font-mono);letter-spacing:.12em;color:var(--fg-3)}
.ibox{flex:none;width:58px;height:58px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);color:var(--accent-text)}
.ibox svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:30px;line-height:1.15;color:var(--fg)}
.card p{font-size:20px;line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.golink{display:inline-flex;align-items:center;gap:10px;font:500 14.5px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.golink svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .32s var(--ease)}
a:hover .golink svg,.golink:hover svg{transform:translateX(4px)}
.arrowc{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--fg);
  transition:background-color .32s var(--ease),border-color .32s,color .32s}
.arrowc svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-45deg);transition:transform .32s var(--ease)}
a:hover .arrowc{background:var(--ox-500);border-color:var(--ox-500);color:#fff}
a:hover .arrowc svg{transform:none}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:7px 16px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--chip-bg,rgba(255,255,255,.02));font-size:17px;line-height:1.2;color:var(--fg-2);white-space:nowrap}
.chip i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc,var(--ox-500))}
.tag{display:inline-flex;align-items:center;padding:7px 11px;border:1px solid var(--line-2);border-radius:4px;
  font:500 14px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 13px 7px 11px;border:1px solid var(--line-2);border-radius:999px;
  font:500 13.5px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);background:rgba(255,255,255,.02)}
.pill i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.pill i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--cyan);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.8);opacity:0}}
/* text in a solution or stage colour: as is on dark, deepened on paper so it reads on white */
.acc-t{color:var(--acc,var(--accent-text))}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fine{font-size:17px;line-height:1.5;color:var(--fg-3);text-wrap:pretty}
.hint-mono{font:500 15px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}

/* ---------------------------------------------------------------- cover */
.slide.cover{padding:0}
.cv-copy{position:absolute;left:var(--px);top:170px;width:940px;z-index:3}
.cv-copy h1{margin-top:6px;font-size:150px;line-height:.95;letter-spacing:-.045em;color:var(--fg)}
.cv-rule{width:600px;height:1px;background:var(--grad-line);margin:54px 0 30px}
.cv-sub{font-size:31px;line-height:1.4;color:var(--fg-2)}
.cv-rev{margin-top:34px;display:flex;gap:14px;font:500 15px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.cv-rev i{font-style:normal;color:var(--fg-4)}
.cv-art{position:absolute;left:1372px;top:520px;width:760px;height:760px;translate:-50% -50%;z-index:2}
.cv-art svg{position:absolute;inset:0;width:100%;height:100%}
.rg-run{animation:spin 44s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* lifecycle ring, shared by the cover and slide 04 (kit.js geometry) */
.rg-tick{stroke:rgba(255,255,255,.16);stroke-width:1;fill:none}
.rg-tick.maj{stroke:rgba(255,255,255,.34)}
.rg-inner{fill:none;stroke:rgba(255,255,255,.1);stroke-dasharray:2 6}
.rg-spoke{stroke:rgba(255,255,255,.09);stroke-dasharray:2 4}
.rg-seg{fill:none;stroke-width:10}
.rg-node{fill:var(--ink-1);stroke-width:1.5}
.rg-num{font:500 13px/1 var(--font-mono);letter-spacing:.06em;fill:var(--fg-2);text-anchor:middle}
.rg-lbl{font:400 15px/1.2 var(--font-sans);letter-spacing:0;text-transform:none;fill:var(--fg-3)}
.rg-trail{fill:none;stroke-width:2;stroke-linecap:round}
.rg-head{fill:#fff}

/* ---------------------------------------------------------------- contents */
.toc{column-count:2;column-gap:96px}
.toc li{break-inside:avoid;display:flex;align-items:center;gap:22px;padding:15px 18px;border-top:1px solid var(--line);cursor:pointer;
  transition:background-color .3s var(--ease),padding-left .3s var(--ease)}
.toc li:nth-child(9),.toc li:nth-child(18){border-bottom:1px solid var(--line)}
.toc li:hover{background:rgba(255,255,255,.03);padding-left:26px}
.toc .n{font:500 15px/1 var(--font-mono);letter-spacing:.12em;color:var(--accent-text);min-width:28px}
.toc .t{font-size:25px;line-height:1.2;letter-spacing:-.01em;color:var(--fg)}
.toc .arr{margin-left:auto;opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .3s var(--ease);color:var(--accent-text)}
.toc li:hover .arr{opacity:1;transform:none}
.toc .arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- strip (a labelled band under a section) */
.strip{display:flex;align-items:center;gap:30px;margin-top:36px;padding:24px 30px;border-radius:14px;border:1px solid transparent;
  background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box,var(--grad-mark) border-box}
.strip-l{flex:none;font:500 14.5px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.strip-t{font-size:21px;line-height:1.45;color:var(--fg-2)}

/* ---------------------------------------------------------------- process steps (.way cards with a progress bar) */
.way{padding:40px 30px 34px 34px;overflow:hidden}
.way .wbar{position:absolute;left:0;top:0;height:3px;width:var(--w,25%);background:var(--grad-mark-h)}
.way .card-top{margin-bottom:22px}
.way h3{font-size:34px;line-height:1.1;margin:0 0 14px}
.way p{font-size:20px}
.wout{margin-top:auto;padding-top:24px}
.wout em{display:block;font:500 15px/1.2 var(--font-mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin-bottom:10px}
.wout span{display:block;padding-left:16px;border-left:2px solid var(--ox-500);font-size:18px;line-height:1.45;color:var(--fg);text-wrap:pretty}

/* ---------------------------------------------------------------- timeline rail (.lrail: numbered nodes on a line that fills) */
.lrail{position:relative;max-width:1700px;margin:24px auto 0;--rail:rgba(255,255,255,.12);--rail-on:var(--ox-500)}
.slide.paper .lrail{--rail:rgba(11,11,18,.10);--rail-on:var(--ox-600)}
.lline{position:relative;height:3px;background:var(--rail);border-radius:2px;margin:0 70px}
.lfill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--grad-mark-h);border-radius:2px;transition:width .6s var(--ease)}
.lnodes{display:flex;justify-content:space-between;margin-top:-21px}
.lnode{position:relative;width:140px;text-align:center}
.lnode .ldot{width:40px;height:40px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:var(--ink-2);border:1px solid var(--line-3);
  font:500 14px/1 var(--font-mono);color:var(--fg-3);transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s}
.lnode.past .ldot{border-color:var(--rail-on);color:var(--rail-on)}
.lnode.on .ldot{background:var(--rail-on);border-color:var(--rail-on);color:#fff;box-shadow:0 0 0 5px rgba(123,126,242,.18),0 8px 24px -8px rgba(90,93,199,.7)}
.lnode .t{display:block;margin-top:12px;font-size:18px;font-weight:500;line-height:1.25;color:var(--fg-3);transition:color .3s}
.lnode.on .t{color:var(--fg)}

/* ---------------------------------------------------------------- engineers component (built by deck.js into [data-ox-engineers]; paper sheet only) */
.engsplit{display:grid;grid-template-columns:600px minmax(0,1fr);gap:56px;align-items:center}
.logowall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);background:rgba(255,255,255,.55)}
.logo{height:104px;display:grid;place-items:center;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transition:background-color .3s}
.logo:hover{background:#fff}
.logo img{height:46px;width:auto;max-width:176px;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.72;transition:filter .32s,opacity .32s}
.logo:hover img{filter:none;opacity:1}
.logo b{font-size:20px;font-weight:400;color:var(--fg-2);white-space:nowrap}
.logo.has b{display:none}
.mapwrap{position:relative;padding:22px}
.mapwrap::before{content:"";position:absolute;inset:-6px;pointer-events:none;--c:var(--line-3);
  background:
    linear-gradient(var(--c),var(--c)) left 0 top 6px/13px 1px,linear-gradient(var(--c),var(--c)) left 6px top 0/1px 13px,
    linear-gradient(var(--c),var(--c)) right 0 top 6px/13px 1px,linear-gradient(var(--c),var(--c)) right 6px top 0/1px 13px,
    linear-gradient(var(--c),var(--c)) left 0 bottom 6px/13px 1px,linear-gradient(var(--c),var(--c)) left 6px bottom 0/1px 13px,
    linear-gradient(var(--c),var(--c)) right 0 bottom 6px/13px 1px,linear-gradient(var(--c),var(--c)) right 6px bottom 0/1px 13px;
  background-repeat:no-repeat}
.wmap{width:100%;height:500px;display:block;overflow:visible}
.wmap .land{display:none}
.wmap .dots{fill:none;stroke:rgba(11,11,18,.30);stroke-width:4.4;stroke-linecap:round}
.wmap .link{fill:none;stroke:rgba(90,93,199,.45);stroke-width:1.5;stroke-linecap:round}
.wmap .pulse{fill:none;stroke:var(--ox-500);stroke-width:3;stroke-linecap:round;stroke-dasharray:7 100;stroke-dashoffset:107;
  animation:lp 4.6s linear infinite}
@keyframes lp{to{stroke-dashoffset:0}}
.wmap .ld{stroke:rgba(11,11,18,.35);stroke-width:1}
.wmap .halo{fill:none;stroke:var(--ox-600);stroke-width:1.5;opacity:.55;transform-box:fill-box;transform-origin:center;animation:hping 3s var(--ease) infinite}
@keyframes hping{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.wmap .dot{fill:var(--ox-600);stroke:#fff;stroke-width:2.5}
.wmap .lbl{font:500 24px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;fill:var(--paper-fg);
  paint-order:stroke;stroke:var(--paper);stroke-width:8px;stroke-linejoin:round}

/* ---------------------------------------------------------------- case cards and duotone photos */
.projs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.proj{padding:28px 30px 24px}
.proj .pk{font:500 14.5px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.proj h3{font-size:30px;line-height:1.12;margin:14px 0 12px}
.proj p{font-size:19px;line-height:1.5}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:20px}
.pstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.ph{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:2/1;border-radius:14px;border:1px solid var(--line-2);background:var(--ox-900)}
.ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.92);mix-blend-mode:luminosity;opacity:.9;
  transition:filter .7s var(--ease),opacity .7s var(--ease),transform 1.2s var(--ease)}
.ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:color;transition:opacity .7s var(--ease);
  background:linear-gradient(160deg,rgba(140,82,255,.42) 0%,rgba(8,8,13,.1) 46%,rgba(92,225,230,.22) 100%)}
.ph:hover img{filter:none;mix-blend-mode:normal;opacity:1;transform:scale(1.04)}
.ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .7s var(--ease);
  background:linear-gradient(180deg,rgba(5,5,8,0) 40%,rgba(5,5,8,.55) 100%)}
.ph:hover::before,.ph:hover::after{opacity:0}
.pcap{grid-column:1/-1;font:500 15px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}

/* ---------------------------------------------------------------- quotes */
.qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-2)}
.qcard{position:relative;padding:32px 44px 32px 0}
.qcard::before{content:"";position:absolute;left:0;top:-1px;width:36px;height:2px;background:var(--grad-mark-h)}
.qcard:nth-child(even){padding-left:44px;border-left:1px solid var(--line)}
.qcard:nth-child(even)::before{left:44px}
.qcard:nth-child(n+3){border-top:1px solid var(--line)}
.qcard p{font-size:25px;line-height:1.45;letter-spacing:-.01em;color:var(--fg);text-wrap:pretty}
.qcard small{display:block;margin-top:16px;font:500 15px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.toolstrip{flex-wrap:wrap;gap:16px 26px}
.toolstrip .chips{gap:8px}

/* ---------------------------------------------------------------- why (three cards and a closing line) */
.why .card{padding:40px}
.why .lead{margin-top:44px;font-size:29px;color:var(--fg)}

/* ---------------------------------------------------------------- related deck cards */
.dive{gap:10px;padding:26px 28px 24px}
.dive .dn{font:500 14.5px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.dive b{font-size:26px;font-weight:500;line-height:1.15;letter-spacing:-.015em;color:var(--fg)}
.dive>span:not(.dn):not(.foot){font-size:18px;line-height:1.45;color:var(--fg-2)}
.dive .foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between}

/* ---------------------------------------------------------------- stats, related decks */
/* a row of figures: <div class="stats" style="--cols:3"><div><b>4</b><small>data halls</small></div>...</div> */
.stats{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.stats>div{position:relative;padding:22px 18px 0 0;border-top:1px solid var(--line-2)}
.stats>div::before{content:"";position:absolute;left:0;top:-1px;width:32px;height:2px;background:var(--grad-mark-h)}
.stats>div+div{padding-left:18px;border-left:1px solid var(--line)}
.stats>div+div::before{left:18px}
.stats b{display:block;font-size:var(--stat-size,56px);font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--fg);font-variant-numeric:tabular-nums}
.stats small{display:block;margin-top:12px;text-wrap:balance;font:500 14px/1.45 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
/* related decks: <div class="dives" style="--cols:5"> of a.card.dive */
.dives{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:20px}
.dive .dart{display:block;width:auto;height:64px;margin-bottom:8px;color:var(--accent-text)}

/* ---------------------------------------------------------------- closing */
.slide.closing h1{font-size:104px;line-height:1.0;letter-spacing:-.04em}
.slide.closing .lead{margin-top:28px;max-width:1560px;font-size:26px;text-wrap:balance}
.closegrid{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:56px;align-items:start;margin-top:40px}
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ci{gap:16px;padding:26px 28px 24px}
.ci .ibox{width:50px;height:50px}
.ci .ci-t{font-size:19px;line-height:1.5;color:var(--fg-2)}
.ci .ci-t b{display:block;font-size:23px;color:var(--fg);margin-bottom:2px}
.ci .golink{opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s var(--ease)}
.ci:hover .golink{opacity:1;transform:none}
.regoff{grid-column:1/-1;margin-top:6px;font-size:17px;line-height:1.5;color:var(--fg-3)}
.regoff a{color:var(--ox-300);border-bottom:1px solid rgba(161,163,255,.35)}
.regoff a:hover{color:var(--fg)}
.lcards{display:flex;flex-direction:column;gap:14px}
.lcard{flex-direction:row;align-items:center;gap:20px;padding:18px 20px 18px 22px}
.lcard .ibox{width:50px;height:50px}
.lc-t{display:flex;flex-direction:column;gap:3px;min-width:0;margin-right:auto}
.lc-t b{font-size:23px;line-height:1.15;color:var(--fg)}
.lc-t em{font-style:normal;font-size:16.5px;line-height:1.35;color:var(--fg-3)}
.cl-note{margin-top:26px;display:inline-flex;align-items:center;gap:14px;font:500 15px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.cl-note::before{content:"";width:40px;height:1px;background:var(--grad-mark-h)}

/* ---------------------------------------------------------------- phone in portrait, touch, reduced motion */
.mbar,.mhint{display:none}
@media (orientation:portrait) and (max-width:900px){
  .mbar{position:fixed;left:50%;top:calc(50% + 28.125vw + 22px);translate:-50% 0;z-index:5;display:flex;align-items:center;gap:22px;
    font:500 13px/1 var(--font-mono);letter-spacing:.12em;color:var(--fg-2);white-space:nowrap}
  .mbar button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-3);color:var(--fg)}
  .mbar button.next{background:var(--ox-500);border-color:var(--ox-500);color:#fff}
  .mbar button.off{opacity:.3;pointer-events:none}
  .mbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .helpbar .hb-item,.hint,.tblock,.navs{display:none}
  .mhint{display:block;position:fixed;left:0;right:0;top:calc(50% - 28.125vw - 46px);z-index:5;text-align:center;
    font:500 11.5px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
}

@media (hover:none){.helpbar .hb-item,.slide .hint{display:none}}

@media (prefers-reduced-motion:reduce){
  .orb,.rg-run,.pill i::after,.wmap .pulse,.wmap .halo{animation:none}
  .wmap .pulse{stroke-dashoffset:60}
  .card,.toc li,.ph img,.lfill{transition:none}
}