/* =====================================================================
   Onebrief / One Shared Now, Website Concept 2, v4.0 "Precision in Motion"
   Jason Walker, 1 October 2026.

   Type: Archivo (Omnibus-Type, SIL OFL 1.1), one variable file, width axis 62 to 125.
     Display caps   wdth 62, wght 820, line-height .84
     Section heads  wdth 72, wght 700, sentence case
     Reading        wdth 100, wght 400
     Labels         wdth 86, wght 600, caps, +0.09em, tabular figures
   Colour: near-black and off-white carry the system; Onebrief blue #019EFF (verified on onebrief.com)
   is the identity accent; red and blue appear only as transient registration, always resolving to zero.
   ===================================================================== */

@font-face{
  font-family:'Archivo OB';
  src:url('assets/fonts/Archivo-wdth-wght.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}

:root{
  --ink:#0e0f10; --ink-2:#151618; --ink-3:#1d1f22; --ink-4:#2a2d31;
  --paper:#f2f1ec; --paper-2:#e6e5df; --paper-3:#d6d5cf;
  --fg:#f2f1ec; --fg-2:rgba(242,241,236,.76); --fg-3:rgba(242,241,236,.54); --fg-4:rgba(242,241,236,.30);
  --rule:rgba(242,241,236,.16); --rule-2:rgba(242,241,236,.30);
  --ink-fg-2:rgba(14,15,16,.74); --ink-fg-3:rgba(14,15,16,.56); --rule-l:rgba(14,15,16,.16);
  --gray:#8f9193;
  --blue:#019eff;           /* Onebrief primary, verified --color--primary on onebrief.com */
  --reg-r:rgb(255,34,40);   /* registration accents: green suppressed */
  --reg-b:rgb(28,74,255);
  --reg-r-l:rgb(214,18,36);
  --reg-b-l:rgb(18,56,224);
  --frame:0px; --nav-h:64px;
  --gut:clamp(16px,4.2vw,64px);
  --max:1440px;
  --f:'Archivo OB',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--f);font-stretch:100%;font-weight:400;font-size:18px;line-height:1.55;
  font-kerning:normal;font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  padding-top:var(--frame)}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,figure,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:calc(var(--frame) + 8px);z-index:3000;padding:10px 14px;background:var(--paper);color:var(--ink);font-weight:600;transform:translateY(-200%)}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ---------- type primitives ---------- */
.lbl{font-stretch:86%;font-weight:600;font-size:12px;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;font-variant-numeric:tabular-nums lining-nums}
.fine{font-size:12.5px;line-height:1.5;color:var(--fg-3);font-stretch:94%}
.body{font-size:clamp(17px,1.25vw,19px);line-height:1.58;color:var(--fg-2);max-width:36em}
.kicker{display:flex;align-items:center;gap:12px;color:var(--fg-3)}
.kicker__n{color:var(--fg);padding-right:12px;border-right:1px solid var(--rule-2)}
.h2{font-stretch:72%;font-weight:700;font-size:clamp(38px,5vw,80px);line-height:.95;letter-spacing:-.012em;color:var(--fg);text-wrap:balance}

/* ---------- buttons (stable, square, accessible contrast) ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;border-radius:2px;font-stretch:96%;font-weight:600;font-size:15px;letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn--sm{height:38px;padding:0 14px;font-size:14px}
.btn--blue{background:var(--blue);color:var(--ink)}
.btn--blue:hover{background:#3cb4ff}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:#fff}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:#000}
.btn--line{border-color:var(--rule-2);color:var(--fg);background:transparent}
.btn--line:hover{border-color:var(--fg)}
.btn--line-ink{color:var(--ink);border-color:var(--rule-l)}
.btn--line-ink:hover{border-color:var(--ink)}
.ext{width:9px;height:9px;flex:none;background:currentColor;clip-path:polygon(25% 0,100% 0,100% 75%,84% 75%,84% 27%,11% 100%,0 89%,73% 16%,25% 16%)}
.arr{width:10px;height:12px;flex:none;background:currentColor;clip-path:polygon(41% 0,59% 0,59% 70%,86% 43%,100% 57%,50% 100%,0 57%,14% 43%,41% 70%)}
.btn__play{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.btn__t{font-variant-numeric:tabular-nums;color:var(--fg-3);font-weight:500;padding-left:10px;border-left:1px solid var(--rule)}
.ctas{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- navigation ---------- */
.nav{position:fixed;left:0;right:0;top:var(--frame);z-index:1000;height:var(--nav-h);transition:background-color .35s,border-color .35s;border-bottom:1px solid transparent}
.nav::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(rgba(10,11,12,.55),rgba(10,11,12,0));pointer-events:none;transition:opacity .35s}
.nav--solid{background:var(--ink);border-bottom-color:var(--rule)}
.nav--solid::before{opacity:0}
.nav__inner{position:relative;height:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:28px}
.nav__logo img{width:97px;height:auto}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__grp{position:relative}
.nav__a,.nav__grp-b{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 11px;border:0;background:none;cursor:pointer;
  font-size:14.5px;font-weight:500;text-decoration:none;color:var(--fg-2);box-shadow:inset 0 -1px 0 transparent;transition:color .2s,box-shadow .2s}
.nav__a:hover,.nav__grp-b:hover,.nav__grp-b[aria-expanded="true"]{color:var(--fg)}
.nav__a.is-here,.nav__grp-b.is-here{color:var(--fg);box-shadow:inset 0 -1px 0 var(--fg-3)}
.nav__chev{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav__grp-b[aria-expanded="true"] .nav__chev{transform:translateY(1px) rotate(-135deg)}
.nav__dd{position:absolute;left:0;top:calc(100% + 12px);min-width:230px;display:grid;padding:6px;background:#121315;box-shadow:0 0 0 1px var(--rule),0 34px 70px -24px rgba(0,0,0,.9)}
.nav__dd[hidden]{display:none}
.nav__dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav__dd a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;font-size:15px;font-weight:500;color:var(--fg-2);text-decoration:none;border-radius:2px}
.nav__dd a:hover,.nav__dd a[aria-current="page"]{background:var(--ink-3);color:var(--fg)}
.nav__dd a[aria-current="page"]{box-shadow:inset 2px 0 0 var(--blue)}
.nav__end{display:flex;align-items:center;gap:12px}
.nav__motion{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1px solid var(--rule);border-radius:2px;background:transparent;cursor:pointer;font-size:12px;font-stretch:86%;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2)}
.nav__motion:hover{color:var(--fg);border-color:var(--rule-2)}
.nav__motion-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}
.nav__motion[aria-pressed="true"] .nav__motion-dot{background:var(--blue);border-color:var(--blue)}
.nav__menu{display:none;align-items:center;gap:10px;height:38px;padding:0 10px;background:none;border:1px solid var(--rule);border-radius:2px;cursor:pointer}
.nav__menu-label{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-stretch:86%}
.nav__menu-icon{display:grid;gap:5px}
.nav__menu-icon i{display:block;width:16px;height:1.5px;background:currentColor}
.menu{position:absolute;left:0;right:0;top:var(--nav-h);background:var(--ink);border-bottom:1px solid var(--rule);padding:12px var(--gut) 24px}
.menu__grid{display:grid;gap:22px}
.menu__k{color:var(--fg-3);margin-bottom:4px}
.menu__grp a{display:block;padding:11px 0;border-bottom:1px solid var(--rule);font-size:21px;font-stretch:80%;font-weight:600;text-decoration:none}
.menu__grp a[aria-current="page"]{color:var(--blue)}
.menu__cta{margin-top:20px}
@media (max-width:1023px){
  .nav__links,.nav__cta{display:none}
  .nav__menu{display:inline-flex}
  .nav__end{margin-left:auto}
}
@media (max-width:420px){ .nav__motion-t{display:none} .nav__motion{padding:0 11px} }

/* =====================================================================
   STAGE: theater, contexts, glass. Each plane has its own clock (app.js).
   ===================================================================== */
.stage{position:relative;height:760vh;background:var(--ink)}
.anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
#top{top:0}
.anchor--how{top:150vh}
.stage__sticky{position:sticky;top:var(--frame);height:calc(100vh - var(--frame));height:calc(100svh - var(--frame));overflow:hidden}
.world{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 55%;
  --lk-x:.16;--lk-y:.16;--lf-x:.88;--lf-y:.86}

/* --- theater: the footage, one scene at a time --- */
.theater{position:absolute;inset:-4% -3%;z-index:1;background:#05080b}
.scene{position:absolute;inset:0;opacity:0}
.scene.is-on{opacity:1}
.scene img,.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene__video{opacity:0;transition:opacity .8s var(--ease)}
.scene__video.is-on{opacity:1}
.theater__shade{position:absolute;inset:0;pointer-events:none;opacity:var(--shade,1);
  background:radial-gradient(ellipse 46% 42% at 80% 74%,rgba(6,8,10,.5) 0%,rgba(6,8,10,0) 100%),
             linear-gradient(180deg,rgba(6,8,10,.55) 0%,rgba(6,8,10,.05) 30%,rgba(6,8,10,.25) 60%,rgba(6,8,10,.9) 100%),
             linear-gradient(90deg,rgba(6,8,10,.55) 0%,rgba(6,8,10,0) 55%)}
/* the lamps you can see: the same two lights the type answers to */
.lamps{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.lamp{position:absolute;border-radius:50%;opacity:var(--lamp,.0)}
.lamp--key{left:calc(var(--lk-x) * 100% - 40vmax);top:calc(var(--lk-y) * 100% - 40vmax);width:80vmax;height:80vmax;background:radial-gradient(closest-side,rgba(255,250,240,.16),rgba(255,250,240,0))}
.lamp--fill{left:calc(var(--lf-x) * 100% - 34vmax);top:calc(var(--lf-y) * 100% - 34vmax);width:68vmax;height:68vmax;background:radial-gradient(closest-side,rgba(1,158,255,.14),rgba(1,158,255,0))}

/* --- glass: lit type. The fill is a light field fixed to the viewport (app.js keeps it there) --- */
.lit{color:#E6EAEE}
.motion-on .lit{color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  background-color:#E2E4E0;background-repeat:no-repeat;
  background-image:radial-gradient(circle at var(--lkx,20%) var(--lky,20%),#FFFFFF 0,rgba(255,255,255,.72) 26%,rgba(255,255,255,0) 58%),
                   radial-gradient(circle at var(--lfx,85%) var(--lfy,85%),rgba(196,226,255,.9) 0,rgba(196,226,255,0) 46%);
  background-size:var(--lw,100%) var(--lh,100%);background-position:var(--lx,0) var(--ly,0);
  filter:drop-shadow(var(--tsx,0) var(--tsy,8px) var(--tsb,16px) rgba(0,0,0,.38))}
/* a text-shadow would paint over a clipped fill and grey the letters; the shadow is a filter, so it falls behind them */
/* the light model, for review: key lamp warm white from the upper left, a cool fill from the lower right; the light
   field is fixed to the viewport, so the surface changes only because the type moves through it */
.glass{position:absolute;inset:0;pointer-events:none}
.word{position:absolute;z-index:6;left:0;top:34%;margin:0;font-stretch:62%;font-weight:820;text-transform:uppercase;white-space:nowrap;
  font-size:min(27vh,17vw);line-height:.84;letter-spacing:-.004em;opacity:0;will-change:transform}
.big{position:absolute;right:var(--gut);top:calc(var(--nav-h) + 5svh);font-stretch:62%;font-weight:840;font-size:min(28vh,18vw);line-height:1;
  letter-spacing:-.005em;font-variant-numeric:tabular-nums lining-nums;opacity:0;--roll:0;will-change:transform;z-index:8}
.big .reg{--rx:0px;--ra:0}
/* the numeral casts one shadow as a whole (a filter per rolling digit would shadow its clipping window) */
.motion-on .big .lit{filter:none}
.motion-on .big .reg__c--k{filter:drop-shadow(10px 14px 20px rgba(0,0,0,.4))}
.datum--big{position:absolute;left:var(--gut);right:var(--gut);height:1px;top:calc(var(--nav-h) + 5svh + min(28vh,18vw) * .834);background:rgba(242,241,236,.5);transform-origin:100% 50%;transform:scaleX(0)}

/* --- entry --- */
.entry{position:absolute;inset:0;z-index:9;pointer-events:none}
.entry > *{pointer-events:auto}
.entry__title{position:absolute;left:var(--gut);bottom:19svh;font-stretch:62%;font-weight:820;text-transform:uppercase;transform-origin:0 100%;
  font-size:min(13.2vw,25svh);line-height:.84;letter-spacing:-.004em;margin:0 0 0 -.035em;will-change:transform}
.entry__ln{display:block}
.entry__aside{position:absolute;right:var(--gut);bottom:19svh;width:min(31vw,430px)}
.entry__deck{font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--fg);margin-bottom:24px;text-wrap:pretty;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.filmctl{position:absolute;right:var(--gut);top:calc(var(--nav-h) + 18px);display:grid;place-items:center;width:34px;height:34px;
  background:rgba(14,15,16,.42);border:1px solid var(--rule);border-radius:2px;cursor:pointer;color:var(--fg-2)}
.filmctl:hover{color:var(--fg)}
.filmctl__i{width:9px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.filmctl[aria-pressed="true"] .filmctl__i{border:0;border-left:9px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;height:0;width:0}

/* --- the act lines: one line each, stable position, crossfaded --- */
.lines{position:absolute;z-index:10;left:var(--gut);top:calc(var(--nav-h) + 6svh);width:min(40vw,580px);pointer-events:none}
.lines__list{display:grid}
.line{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:auto}
.line__k{color:var(--fg-2);margin-bottom:12px}
.line__t{font-stretch:72%;font-weight:700;font-size:clamp(28px,min(3.2vw,5.4svh),52px);line-height:1;letter-spacing:-.01em;color:var(--fg);text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.stage__skip{position:absolute;z-index:10;right:var(--gut);bottom:2.4svh;font-size:13px;opacity:0;visibility:hidden}
.stage__skip a{color:var(--fg-3);text-underline-offset:3px}
.stage__skip a:hover{color:var(--fg)}

/* --- contexts: three panes on one datum --- */
.domains{position:absolute;left:var(--gut);right:var(--gut);top:55svh;bottom:5svh;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,26px);pointer-events:none}
.pane{position:relative;z-index:5;--rx:0px;--ra:0;--lum:0;--sh:0;pointer-events:auto;will-change:transform}
/* shadow falls away from the key lamp (upper left): down and to the right */
.pane::before{content:"";position:absolute;inset:0;box-shadow:28px 46px 90px -20px rgba(0,0,0,.92);opacity:var(--sh);pointer-events:none}
.pane__r,.pane__b{display:none}
.pane__r{box-shadow:inset 0 0 0 2px var(--reg-r);transform:translate3d(calc(var(--rx) * -1),calc(var(--rx) * -.25),0)}
.pane__b{box-shadow:inset 0 0 0 2px var(--reg-b);transform:translate3d(var(--rx),calc(var(--rx) * .25),0)}
.pane__in{position:relative;height:100%}
.pane__in::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:rgba(5,8,11,.9);opacity:clamp(0,calc(var(--lum) * -1),1)}
.pane__in::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 45%);opacity:clamp(0,var(--lum),1)}
.pane__view{position:absolute;left:0;top:0;width:64%;bottom:12%;overflow:hidden;background:#06090c;box-shadow:0 0 0 1px rgba(242,241,236,.14)}
.pane__view img,.pane__view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pane__video{opacity:0;transition:opacity .6s var(--ease)}
.pane__video.is-on{opacity:1}
.pane__meta{position:absolute;right:0;top:16%;bottom:0;width:48%;display:grid;grid-template-rows:auto auto auto 1fr;padding:14px 16px 0;min-width:0;
  background:rgba(9,12,15,.9);box-shadow:0 0 0 1px rgba(242,241,236,.16),18px 30px 60px -24px rgba(0,0,0,.85);
  transform:translate3d(calc(var(--lum) * 12px),calc(var(--lum) * -14px),0)}
.pane__name{color:var(--fg)}
.pane__state{display:grid;margin-top:6px;color:var(--fg-3)}
.pane__state > span{grid-area:1/1}
.pane__state .v-new{color:var(--fg)}
.pane__cause{margin-top:6px;color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-new{opacity:0}
.pane .num{grid-row:4;align-self:end;justify-self:start}
.pane .datum{display:none}
.domains::after{content:"";position:absolute;left:0;right:0;bottom:calc(min(12svh,7.4vw) * .166);height:1px;background:rgba(242,241,236,.6);opacity:var(--gd,0)}
.thread{position:absolute;left:0;right:0;bottom:calc(min(12svh,7.4vw) * .166 - 1px);height:3px;background:linear-gradient(90deg,rgba(1,158,255,.0),var(--blue) 12%);transform-origin:0 50%;box-shadow:0 0 14px rgba(1,158,255,.75);border-radius:2px;pointer-events:none;z-index:6}

/* revision numerals: the rolling last digit is one strip, all copies share --roll */
.num{display:inline-block;font-stretch:62%;font-weight:840;font-size:min(12svh,7.4vw);line-height:1;letter-spacing:-.005em;font-variant-numeric:tabular-nums lining-nums;color:var(--fg);--roll:0}
.reg{position:relative;display:inline-flex;--rx:0px;--ra:0}
.reg__c{display:inline-flex}
.reg__c--r,.reg__c--b{position:absolute;left:0;top:0;opacity:var(--ra);pointer-events:none;mix-blend-mode:screen}
.reg__c--r,.reg__c--r *{color:var(--reg-r)!important;-webkit-text-fill-color:var(--reg-r)!important;background:none!important;text-shadow:none!important}
.reg__c--b,.reg__c--b *{color:var(--reg-b)!important;-webkit-text-fill-color:var(--reg-b)!important;background:none!important;text-shadow:none!important}
.reg__c--r{transform:translate3d(calc(var(--rx) * -1),0,0)}
.reg__c--b{transform:translate3d(var(--rx),0,0)}
.reg__c--k{position:relative}
.num__win,.big .num__win{display:inline-block;height:1em;overflow:hidden;vertical-align:top;clip-path:inset(.12em -.1em .15em -.1em)}
.num__strip{display:flex;flex-direction:column;transform:translate3d(0,calc(var(--roll) * -1em),0)}
.num__strip span{display:block;height:1em}

@media (max-width:1023px){
  .lines{width:min(62vw,560px)}
  .entry__aside{width:min(40vw,380px)}
  .pane__view{width:auto;right:0;bottom:44%}
  .pane__meta{left:12%;width:auto;top:34%;padding:10px 12px 0}
}
@media (min-width:760px) and (max-width:1199px){
  .entry__title{bottom:calc(16svh + 190px)}
  .entry__aside{left:var(--gut);right:auto;bottom:calc(14svh);width:min(64vw,560px)}
  .entry__deck{margin-bottom:18px}
}
@media (min-width:760px) and (max-aspect-ratio:1/1){ .domains{top:58svh} .word{top:33%} }

/* --- phones: contexts stack on a vertical datum, the type crosses above them --- */
@media (max-width:759px){
  .stage{height:700vh}
  .anchor--how{top:115vh}
  .entry__title{font-size:min(20.4vw,13svh);white-space:nowrap;bottom:auto;top:calc(var(--nav-h) + 9svh)}
  .entry__aside{left:var(--gut);right:var(--gut);width:auto;bottom:5svh}
  .entry__deck{font-size:16.5px;margin-bottom:18px}
  .filmctl{top:calc(var(--nav-h) + 12px)}
  .lines{width:auto;right:var(--gut);top:calc(var(--nav-h) + 2.5svh)}
  .line__t{font-size:clamp(24px,7vw,32px)}
  .line__k{margin-bottom:8px}
  .word{font-size:min(19vw,12svh);top:31%}
  .big{font-size:min(11svh,22vw);top:calc(var(--nav-h) + 12svh)}
  .datum--big{top:calc(var(--nav-h) + 12svh + min(11svh,22vw) * .834)}
  .domains{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);top:44svh;bottom:6svh;left:calc(var(--gut) + 14px);gap:10px}
  .domains::before{content:"";position:absolute;left:-14px;top:0;bottom:0;width:1px;background:var(--rule-2)}
  .pane__view{width:52%;right:auto;bottom:0}
  .pane__meta{left:auto;width:56%;top:10%;bottom:0;padding:9px 11px 0}
  .num{font-size:min(8.5svh,15vw)}
  .datum,.domains::after,.thread{display:none}
  .stage__skip{bottom:1.4svh}
}
/* =====================================================================
   REGISTRATION ACROSS THE PAGE. Headings and numerals arrive split into their red and blue
   copies and click into exact register as they reach the screen (app.js buildSnaps).
   Static: the copies never show.
   ===================================================================== */
.snap{position:relative;--rx:0px;--ra:0}
.snap__c,.snap__k{display:inherit;align-items:inherit;justify-content:inherit;gap:inherit}
.snap__k{position:relative}
.snap__c{position:absolute;left:0;top:0;width:100%;opacity:var(--ra);pointer-events:none;mix-blend-mode:screen}
.snap__c,.snap__c *{-webkit-text-fill-color:currentColor!important;text-shadow:none!important;border-color:transparent!important;background:none!important;filter:none!important}
.snap__c--r,.snap__c--r *{color:var(--reg-r)!important}
.snap__c--b,.snap__c--b *{color:var(--reg-b)!important}
.snap__c--r{transform:translate3d(calc(var(--rx) * -1),calc(var(--rx) * -.12),0)}
.snap__c--b{transform:translate3d(var(--rx),calc(var(--rx) * .12),0)}
.platform .snap__c{mix-blend-mode:multiply}
.platform .snap__c--r,.platform .snap__c--r *{color:var(--reg-r-l)!important}
.platform .snap__c--b,.platform .snap__c--b *{color:var(--reg-b-l)!important}
/* the decode: an aria-hidden duplicate performs over the real text while its ink is held (app.js decoder) */
.is-dec>.snap__k,.is-dec>.dec__k{opacity:0}
.dec{position:absolute;left:0;top:0;width:100%;white-space:nowrap;pointer-events:none;user-select:none;display:inherit;align-items:inherit;justify-content:inherit;gap:inherit}
.dec .dc{display:inline!important;white-space:pre}
/* a lit heading paints its light through the duplicate; the parent's shadow already falls behind it */
.motion-on .dec.lit{filter:none}
.line__t .dec{text-wrap:initial}
/* the slide: panels and figures arrive from below with their red and blue edges apart, and settle exactly */
.slide{--rx:0px;--ra:0;position:relative}
.slide::before,.slide::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:var(--ra);mix-blend-mode:screen;box-shadow:inset 0 0 0 2px var(--reg-r)}
.slide::before{transform:translate3d(calc(var(--rx) * -1),calc(var(--rx) * -.3),0)}
.slide::after{box-shadow:inset 0 0 0 2px var(--reg-b);transform:translate3d(var(--rx),calc(var(--rx) * .3),0)}
.platform .slide::before,.sp-paper .slide::before{mix-blend-mode:multiply;box-shadow:inset 0 0 0 2px var(--reg-r-l)}
.platform .slide::after,.sp-paper .slide::after{mix-blend-mode:multiply;box-shadow:inset 0 0 0 2px var(--reg-b-l)}
/* the section numeral, and the datum it sets for everything under it */
.secn{font-stretch:62%;font-weight:840;font-size:clamp(76px,8.4vw,136px);line-height:.78;letter-spacing:-.005em;font-variant-numeric:tabular-nums lining-nums;color:var(--fg);margin-left:-.045em}
.rule{display:block;height:1px;background:var(--rule-2);transform-origin:0 50%}
.sec-head .rule{grid-column:1/-1;margin-top:-6px}
.platform .secn{color:var(--ink)}
.platform .rule{background:var(--ink)}

/* =====================================================================
   SECTIONS
   ===================================================================== */
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,1.6vw,26px);row-gap:22px;margin-bottom:clamp(40px,6vw,88px)}
.sec-head .secn{grid-column:1/-1}
.sec-head .h2{grid-column:1/8}
.sec-head__side{grid-column:8/13;align-self:end;display:grid;gap:22px}
@media (max-width:899px){ .sec-head .h2,.sec-head__side{grid-column:1/-1} }

/* product: one stable frame, Classic and Updated in the same place */
.product{position:relative;padding:clamp(96px,12vw,180px) 0 clamp(96px,10vw,160px);background:var(--ink)}
.viewer{--vs:1}
.viewer__bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-bottom:14px}
.vtabs,.look{display:flex;gap:2px;padding:3px;border-radius:3px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule)}
.vtab,.look__b{height:38px;padding:0 16px;border:0;border-radius:2px;background:none;color:var(--fg-3);font-size:14.5px;font-weight:600;font-stretch:90%;cursor:pointer;transition:background-color .2s,color .2s}
.vtab:hover,.look__b:hover{color:var(--fg)}
.vtab[aria-selected="true"]{background:var(--ink-4);color:var(--fg)}
.look{margin-left:auto}
.look__b[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.look__b[data-look="updated"][aria-pressed="true"]{background:var(--blue);color:var(--ink)}
.viewer__zoom{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 14px;border:1px solid var(--rule);border-radius:2px;background:none;color:var(--fg-2);font-size:13.5px;font-weight:600;font-stretch:92%;cursor:pointer}
.viewer__zoom:hover,.viewer__zoom[aria-pressed="true"]{color:var(--fg);border-color:var(--rule-2)}
.viewer__zoom-i{position:relative;width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%}
.viewer__zoom-i::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.viewer__frame{position:relative;overflow:hidden;background:#04090E;box-shadow:0 0 0 1px var(--rule),0 50px 120px -40px rgba(0,0,0,.9);outline-offset:4px}
.viewer__frame::before,.viewer__frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.viewer__frame::before{box-shadow:inset 0 0 0 2px var(--reg-r)}
.viewer__frame::after{box-shadow:inset 0 0 0 2px var(--reg-b)}
.viewer__frame.is-snap::before{animation:frameR .62s cubic-bezier(.16,1,.3,1)}
.viewer__frame.is-snap::after{animation:frameB .62s cubic-bezier(.16,1,.3,1)}
@keyframes frameR{from{opacity:.9;transform:translate3d(-9px,-2px,0)}to{opacity:0;transform:none}}
@keyframes frameB{from{opacity:.9;transform:translate3d(9px,2px,0)}to{opacity:0;transform:none}}
.viewer__size{position:relative;width:calc(1287px * var(--vs));height:calc(802px * var(--vs))}
.viewer__stage{position:absolute;left:0;top:0;width:1287px;height:802px;transform:scale(var(--vs));transform-origin:0 0}
.viewer__classic,.viewer__updated{position:absolute;inset:0}
.viewer__classic{background:#fff}
.viewer__classic img{position:absolute;left:0;top:0;width:1287px;height:802px;max-width:none;object-fit:cover;object-position:0 0;visibility:hidden}
.viewer__updated{transition:opacity .42s var(--ease)}
.viewer__updated .obui{position:absolute;left:0;top:0;visibility:hidden}
.viewer[data-look="classic"] .viewer__updated{opacity:0;pointer-events:none}
.viewer[data-view="board"] [data-v="board"],.viewer[data-view="map"] [data-v="map"],.viewer[data-view="doc"] [data-v="doc"],
.viewer[data-view="board"] .obui[data-view="board"],.viewer[data-view="map"] .obui[data-view="map"],.viewer[data-view="doc"] .obui[data-view="doc"]{visibility:visible}
.viewer.is-zoom .viewer__frame{overflow:auto;max-height:min(84svh,900px);overscroll-behavior:contain;cursor:grab}
.viewer.is-zoom .viewer__frame.is-drag{cursor:grabbing}
.viewer__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:14px}
.viewer__src{display:grid;font-size:14px;color:var(--fg-2)}
.viewer__src > span{grid-area:1/1;transition:opacity .3s}
.viewer[data-look="updated"] .viewer__src-c,.viewer[data-look="classic"] .viewer__src-u{opacity:0;visibility:hidden}
.viewer__hint{display:none;font-size:13px;color:var(--fg-3)}
.viewer.is-zoom .viewer__hint{display:block}
.moves{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,32px);margin-top:clamp(40px,5vw,72px)}
.moves__i{padding-top:16px;border-top:1px solid var(--rule-2)}
.moves__t{font-stretch:74%;font-weight:700;font-size:clamp(19px,1.5vw,23px);line-height:1.08;margin-bottom:8px}
.moves__i p{font-size:15px;line-height:1.5;color:var(--fg-2)}
@media (max-width:1023px){ .moves{grid-template-columns:1fr 1fr} }
@media (max-width:759px){
  .viewer__bar{gap:10px}
  .look{margin-left:0}
  .viewer__zoom{margin-left:auto}
  .viewer__frame{overflow-x:auto;overscroll-behavior-x:contain}
  .viewer__hint{display:block}
  .moves{grid-template-columns:1fr}
}

/* platform: the light chapter. One model, four foundations */
.platform{background:var(--paper);color:var(--ink);padding:clamp(96px,11vw,170px) 0 clamp(80px,9vw,140px)}
.platform .h2{color:var(--ink)}
.platform .body{color:var(--ink-fg-2)}
.model{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:18px clamp(24px,4vw,72px);align-items:center;margin:0 0 clamp(40px,5vw,72px);padding:clamp(32px,4vw,64px) 0 clamp(40px,5vw,72px);border-top:1px solid var(--ink)}
.model__t{grid-column:1;align-self:end;font-stretch:70%;font-weight:760;font-size:clamp(32px,3.2vw,52px);line-height:.96;letter-spacing:-.01em}
.model__d{grid-column:1;align-self:start;font-size:16.5px;line-height:1.55;color:var(--ink-fg-2);max-width:24em}
.model__fig{grid-column:2;grid-row:1/3;display:grid;justify-items:center}
.model__card{display:grid;grid-template-columns:auto auto;column-gap:22px;align-items:end;padding:14px 18px 15px;background:#fff;border-radius:3px;
  box-shadow:0 0 0 1px var(--rule-l),0 1px 0 rgba(14,15,16,.06),0 22px 44px -20px rgba(14,15,16,.4)}
.model__k{grid-column:1;font-stretch:86%;font-weight:600;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-fg-3)}
.model__v{grid-column:1;font-stretch:76%;font-weight:700;font-size:20px;line-height:1.1}
.model__r{grid-column:2;grid-row:1/3;font-stretch:62%;font-weight:840;font-size:40px;line-height:.8;font-variant-numeric:tabular-nums}
.model__stem{display:block;width:1px;height:36px;background:var(--ink);transform-origin:50% 0}
.model__bus{display:block;width:calc(100% - 100% / 6);height:1px;background:var(--ink)}
.model__out{display:grid;grid-template-columns:repeat(6,1fr);width:100%}
.model__out li{position:relative;padding-top:30px;text-align:center;font-stretch:76%;font-weight:700;font-size:clamp(15px,1.3vw,20px);line-height:1.1}
.model__out li::before{content:"";position:absolute;left:50%;top:0;width:1px;height:20px;background:var(--ink)}
.found{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.found__i{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;column-gap:clamp(18px,2.4vw,40px);row-gap:12px;padding:clamp(28px,3vw,44px) clamp(20px,3vw,52px) clamp(32px,3.4vw,52px) 0;border-bottom:1px solid var(--rule-l)}
.found__i:nth-child(odd){border-right:1px solid var(--rule-l)}
.found__i:nth-child(even){padding-left:clamp(20px,3vw,52px)}
.found__n{grid-row:1/4;font-stretch:62%;font-weight:820;font-size:clamp(64px,6.4vw,104px);line-height:.78;font-variant-numeric:tabular-nums;color:var(--ink)}
.found__t{font-stretch:72%;font-weight:700;font-size:clamp(24px,2.1vw,32px);line-height:1.02;letter-spacing:-.005em}
.found__d{font-size:16px;line-height:1.55;color:var(--ink-fg-2);max-width:30em}
.found__l{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.found__l li{padding:5px 9px;border:1px solid var(--rule-l);border-radius:2px;font-size:13px;font-stretch:92%;font-weight:600;color:var(--ink-fg-2)}
.platform__foot{margin-top:clamp(36px,4vw,56px)}
@media (max-width:899px){
  .model{grid-template-columns:1fr}
  .model__fig{grid-column:1;grid-row:auto;margin-top:12px}
  .model__d{grid-column:1}
}
@media (max-width:759px){
  .model__out{grid-template-columns:1fr 1fr;gap:0 16px;margin-top:4px}
  .model__out li{padding:12px 0;text-align:left;border-top:1px solid var(--rule-l)}
  .model__out li::before,.model__bus{display:none}
  .found{grid-template-columns:1fr}
  .found__i,.found__i:nth-child(even){padding-left:0;border-right:0}
  .found__n{grid-row:auto}
  .found__i{grid-template-columns:1fr}
}

/* people and proof: the human message on the image, the documented result beside it */
.people{position:relative;background:var(--ink)}
.people__photo{position:relative;height:min(84svh,60vw);min-height:440px;margin:0;overflow:hidden;background:#0b0c0d}
.people__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.people__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,16,.35) 0%,rgba(14,15,16,0) 22%,rgba(14,15,16,0) 52%,rgba(14,15,16,.82) 84%,var(--ink) 100%)}
.people__in{position:relative;margin-top:calc(-1 * min(26svh,17vw));padding-bottom:clamp(80px,9vw,140px)}
.people__head{display:grid;gap:14px}
.people__title{font-stretch:62%;font-weight:820;text-transform:uppercase;font-size:min(9.4vw,16svh);line-height:.86;letter-spacing:-.004em;margin-left:-.035em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.people__title span{display:block}
.people__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,96px);align-items:start;margin-top:clamp(36px,5vw,72px)}
.people__lead{font-stretch:78%;font-weight:600;font-size:clamp(22px,2vw,30px);line-height:1.22;color:var(--fg);max-width:22em;margin-bottom:20px}
.proof{margin:0;display:grid;gap:14px;padding:clamp(24px,2.6vw,36px);background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule)}
.proof__k{color:var(--fg-3);padding-bottom:12px;border-bottom:1px solid var(--rule)}
.proof__num{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 14px;margin:4px 0 0;font-variant-numeric:lining-nums}
.proof__more{width:100%;font-stretch:72%;font-weight:700;font-size:clamp(18px,1.6vw,24px);color:var(--fg-2)}
.proof__v{font-stretch:62%;font-weight:840;font-size:clamp(108px,11vw,190px);line-height:.8;letter-spacing:-.01em;margin-left:-.035em}
.proof__unit{font-stretch:72%;font-weight:700;font-size:clamp(22px,2vw,30px);line-height:1;padding-bottom:.2em;color:var(--fg-2)}
.proof__ctx{font-size:16px;line-height:1.55;color:var(--fg-2);max-width:32em}
.proof__q p{font-stretch:76%;font-weight:600;font-size:clamp(18px,1.4vw,22px);line-height:1.3;color:var(--fg);padding-left:16px;border-left:2px solid var(--blue)}
.proof__link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--fg-2);text-underline-offset:3px}
.proof__link:hover{color:var(--fg)}
@media (max-width:899px){ .people__grid{grid-template-columns:1fr} }
@media (max-width:759px){
  .people__photo{height:78svh}
  .people__photo img{object-position:50% 30%}
  .people__title{font-size:min(15vw,11svh)}
  .people__in{margin-top:-22svh}
}

/* editorial: the entrance (homepage and the Perspective page) */
.ed{position:relative;background:var(--ink);overflow-x:clip}
.ed__entry{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.ed__media{position:absolute;inset:0}
.ed__media img,.ed__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ed__video{opacity:0;transition:opacity 1s var(--ease)}
.ed__video.is-on{opacity:1}
.ed__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,11,12,.92) 0%,rgba(10,11,12,.4) 40%,rgba(10,11,12,.15) 70%,rgba(10,11,12,.5) 100%)}
.ed__entry-in{position:relative;padding-top:calc(var(--nav-h) + 12svh);padding-bottom:clamp(48px,7svh,96px)}
.ed__entry-in .secn{margin-bottom:18px}
.ed__title{font-stretch:62%;font-weight:820;text-transform:uppercase;font-size:min(10.4vw,16.5svh);line-height:.84;letter-spacing:-.004em;margin:0 0 0 -.035em}
.ed__ln{display:block}
.ed__meta{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:end;margin-top:clamp(26px,4svh,48px);padding-top:20px;border-top:1px solid var(--rule-2)}
.ed__dek{font-stretch:80%;font-weight:600;font-size:clamp(20px,1.8vw,27px);line-height:1.25;color:var(--fg);max-width:28em}
.ed__go{display:flex;align-items:center;justify-content:flex-end;gap:18px}
.ed__len{font-size:14px;color:var(--fg-3)}
.arr--r{transform:rotate(-90deg)}
@media (max-width:759px){ .ed__meta{grid-template-columns:1fr} .ed__go{justify-content:flex-start} }

/* the Perspective page: a reading column, an index that stays with you, full-width moments between passages */
.ed__body{position:relative;--tl:calc(max(var(--gut),(100% - var(--max)) / 2 + var(--gut)) + clamp(190px,17vw,250px) + clamp(32px,5vw,96px));padding:clamp(72px,9vw,140px) 0 clamp(80px,9vw,140px)}
.ed__tocwrap{position:absolute;top:clamp(72px,9vw,140px);bottom:0;left:max(var(--gut),(100% - var(--max)) / 2 + var(--gut));width:clamp(190px,17vw,250px)}
.ed__toc{position:sticky;top:calc(var(--frame) + var(--nav-h) + 32px)}
.ed__toc ol{display:grid;border-top:1px solid var(--rule-2)}
.ed__toc a{display:grid;grid-template-columns:2.4em 1fr;padding:11px 0;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.3;color:var(--fg-3);text-decoration:none}
.ed__toc a .lbl{color:inherit;padding-top:1px}
.ed__toc a:hover,.ed__toc a.is-here{color:var(--fg)}
.ed__progress{height:2px;margin-top:14px;background:var(--rule)}
.ed__progress i{display:block;height:100%;width:100%;background:var(--fg);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.ed__body > .ch,.ed__body > .ed__sources{margin-left:var(--tl);margin-right:var(--gut);max-width:740px}
.ch{position:relative;padding-bottom:clamp(40px,5vw,72px)}
.ch__head{position:relative;display:grid;margin-bottom:clamp(26px,3vw,40px)}
.ch__n{font-stretch:62%;font-weight:840;font-size:clamp(110px,13vw,210px);line-height:.78;color:var(--fg);font-variant-numeric:tabular-nums;margin-left:-.04em}
.ch__head .rule{margin-top:16px}
.ch__t{font-stretch:72%;font-weight:700;font-size:clamp(34px,3.8vw,60px);line-height:.98;letter-spacing:-.01em;margin-top:18px;text-wrap:balance}
.ch > p{font-size:clamp(18px,1.3vw,20.5px);line-height:1.64;color:var(--fg-2);max-width:34em}
.ch > p + p{margin-top:1.05em}
.ch sup a{color:var(--blue);text-decoration:none;font-size:.72em;padding:0 2px}
.ed-bleed{position:relative;z-index:2;height:min(86svh,56vw);margin:clamp(40px,6vw,96px) 0 clamp(64px,8vw,128px);overflow:hidden;background:#000}
.ed-bleed img{width:100%;height:100%;object-fit:cover;max-width:none}
.ed-bleed--tall{height:min(96svh,62vw)}
.split{position:relative;z-index:1;display:grid;gap:clamp(40px,5vw,72px);margin:clamp(24px,3vw,48px) var(--gut) clamp(72px,9vw,140px) var(--tl);max-width:980px}
.split__t{font-size:15px;line-height:1.5;color:var(--fg-3);max-width:34em}
.split__row{position:relative;display:grid;grid-template-columns:96px repeat(3,minmax(0,1fr));align-items:end;column-gap:clamp(12px,2.2vw,36px)}
.split__h{align-self:start;padding-top:12px;color:var(--fg-3)}
.split__c{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--rule-2)}
.split__c .lbl{color:var(--fg-2)}
.split__n{font-stretch:62%;font-weight:840;font-size:clamp(64px,7.6vw,124px);line-height:.8;letter-spacing:-.005em;font-variant-numeric:tabular-nums lining-nums}
.split__n.is-stale{color:var(--fg-4)}
.split__row--div .split__c[data-off="1"]{transform:translateY(26px)}
.split__row--div .split__c[data-off="2"]{transform:translateY(-14px)}
.split__datum{position:absolute;left:calc(96px + clamp(12px,2.2vw,36px));right:0;bottom:-16px;background:var(--fg)}
.ed-statement{position:relative;z-index:1;margin:clamp(40px,5vw,80px) var(--gut) clamp(72px,9vw,128px) var(--tl);padding:clamp(28px,3vw,48px) 0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.ed-statement p{font-stretch:64%;font-weight:780;font-size:clamp(40px,5.4vw,92px);line-height:.94;letter-spacing:-.01em;color:var(--fg);max-width:13em;text-wrap:balance}
.ed-wide{position:relative;z-index:1;margin:clamp(24px,3vw,48px) var(--gut) clamp(72px,9vw,128px) var(--tl)}
.ed-wide .shot__frame{position:relative;background:#fff;box-shadow:0 0 0 1px var(--rule),0 50px 120px -40px rgba(0,0,0,.9)}
.ed-wide img{width:100%;height:auto}
.ed-wide__c{margin-top:12px;font-size:13.5px;color:var(--fg-3)}
.ed__next{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px!important}
.ed__sources{padding-top:28px;border-top:1px solid var(--rule-2)}
.ed__sources h2{color:var(--fg-3);margin-bottom:14px}
.ed__sources ol{display:grid;gap:10px;list-style:decimal;padding-left:1.4em;font-size:14px;line-height:1.5;color:var(--fg-2)}
.ed__sources a{color:var(--fg-2)}
@media (max-width:899px){
  .ed__body{--tl:var(--gut)}
  .ed__tocwrap{position:relative;top:auto;left:auto;width:auto;margin:0 var(--gut) 56px}
  .ed__toc{position:relative;top:0}
}
@media (max-width:759px){
  .split__row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split__h{grid-column:1/-1;padding:0 0 10px}
  .split__datum{left:0}
  .split__row--div .split__c[data-off="1"]{transform:translateY(16px)}
  .split__row--div .split__c[data-off="2"]{transform:translateY(-8px)}
}

/* close */
.close{position:relative;height:240vh;background:var(--ink)}
.close__sticky{position:sticky;top:var(--frame);height:calc(100vh - var(--frame));height:calc(100svh - var(--frame));display:flex;align-items:center;overflow:hidden}
.close__in{padding-top:calc(var(--frame) + var(--nav-h))}
.close__row{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,26px)}
.close__col{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--rule-2)}
.close__col .lbl{color:var(--fg-3)}
.close__col .num{font-size:min(22svh,15vw)}
.close__datum{position:absolute;left:0;right:0;bottom:calc(min(22svh,15vw) * .16);height:1px;background:var(--fg);transform-origin:0 50%;transform:scaleX(var(--d,1))}
.close__state{display:grid;margin-top:18px;color:var(--fg-2)}
.close__s{grid-area:1/1}
.close__s--b{opacity:0;color:var(--fg)}
.close__title{font-stretch:70%;font-weight:740;font-size:clamp(44px,6vw,100px);line-height:.94;letter-spacing:-.014em;margin-top:clamp(36px,7svh,84px);max-width:11em;text-wrap:balance}
.close__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 40px;margin-top:clamp(24px,3.4svh,40px)}
.close__body{font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--fg-2);max-width:28em}
.close .ctas{align-items:center;gap:22px}
.btn--lg{height:56px;padding:0 26px;font-size:16px}
.close__link{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;font-weight:600;color:var(--fg-2);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--rule-2)}
.close__link:hover{color:var(--fg);border-bottom-color:var(--fg-3)}
@media (max-width:759px){
  .close{height:220vh}
  .close__row{grid-template-columns:1fr;gap:8px}
  .close__col{grid-template-columns:1fr auto;align-items:end}
  .close__col .num{font-size:min(10svh,20vw)}
  .close__datum{display:none}
}

/* footer */
.foot{border-top:1px solid var(--rule);padding:44px 0 56px;background:var(--ink)}
.foot__grid{display:grid;grid-template-columns:auto 1fr;gap:32px 40px;align-items:start}
.foot__cols{display:grid;grid-template-columns:repeat(3,auto);gap:16px clamp(32px,5vw,80px);justify-self:end}
.foot__cols div{display:grid;gap:9px;align-content:start}
.foot__cols .lbl{color:var(--fg-3);margin-bottom:3px}
.foot__cols a{font-size:14px;color:var(--fg-2);text-decoration:none}
.foot__cols a:hover{color:var(--fg)}
.foot__attr{grid-column:1/-1;max-width:64em;font-size:13px;line-height:1.55;color:var(--fg-3)}
@media (max-width:759px){ .foot__grid{grid-template-columns:1fr} .foot__cols{justify-self:start;grid-template-columns:repeat(2,auto)} }

/* =====================================================================
   SUBPAGES. One kit, a different composition for each page's job. The homepage's sequence is not repeated:
   pages share the lit title on glass, the registration that settles headings and numerals, the graded footage,
   the datum rules and the light chapter.
   ===================================================================== */
.sp-hero{position:relative;min-height:min(94svh,1000px);display:flex;align-items:flex-end;overflow:hidden;background:#05080b}
.sp-hero--short{min-height:min(74svh,760px)}
.sp-hero__media{position:absolute;inset:0}
.sp-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.sp-hero__shade{position:absolute;inset:0;background:radial-gradient(ellipse 46% 40% at 82% 78%,rgba(6,8,10,.45),rgba(6,8,10,0)),
  linear-gradient(180deg,rgba(6,8,10,.55) 0%,rgba(6,8,10,0) 26%,rgba(6,8,10,.12) 52%,rgba(6,8,10,.9) 100%),linear-gradient(90deg,rgba(6,8,10,.5),rgba(6,8,10,0) 58%)}
.sp-hero__in{position:relative;width:100%;padding-top:calc(var(--nav-h) + 14svh);padding-bottom:clamp(40px,7svh,88px)}
.sp-title{font-stretch:62%;font-weight:820;text-transform:uppercase;font-size:min(10vw,16.5svh);line-height:.84;letter-spacing:-.004em;margin-left:-.035em}
.sp-title span{display:block}
.sp-hero__foot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px 48px;align-items:end;margin-top:clamp(24px,4svh,44px);padding-top:20px;border-top:1px solid var(--rule-2)}
.sp-deck{font-stretch:80%;font-weight:600;font-size:clamp(19px,1.7vw,26px);line-height:1.28;color:var(--fg);max-width:30em;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.sp-hero__foot .ctas{justify-content:flex-end}
@media (max-width:759px){ .sp-hero__foot{grid-template-columns:1fr} .sp-hero__foot .ctas{justify-content:flex-start} .sp-title{font-size:min(15vw,11svh)} }

.sp-sec{position:relative;padding:clamp(88px,10vw,160px) 0}
.sp-sec--tight{padding-top:clamp(56px,6vw,96px)}
.sp-paper{background:var(--paper);color:var(--ink)}
.sp-paper .h2,.sp-paper .secn{color:var(--ink)}
.sp-paper .body{color:var(--ink-fg-2)}
.sp-paper .rule{background:var(--ink)}
.sp-paper .snap__c{mix-blend-mode:multiply}
.sp-paper .snap__c--r,.sp-paper .snap__c--r *{color:var(--reg-r-l)!important}
.sp-paper .snap__c--b,.sp-paper .snap__c--b *{color:var(--reg-b-l)!important}
.sp-ink2{background:var(--ink-2)}

/* the statement: one idea, set large */
.sp-statement{font-stretch:64%;font-weight:780;font-size:clamp(44px,6vw,104px);line-height:.92;letter-spacing:-.012em;max-width:12.5em;text-wrap:balance}
.sp-statement + .body{margin-top:clamp(24px,3vw,40px)}
.sp-lede{font-stretch:80%;font-weight:600;font-size:clamp(21px,1.9vw,30px);line-height:1.26;max-width:28em}
.sp-paper .sp-lede{color:var(--ink)}

/* numbered rows: numeral, name, explanation on one line of the grid */
.sp-rows{border-top:1px solid var(--rule-2)}
.sp-paper .sp-rows{border-top-color:var(--ink)}
.sp-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,4fr) minmax(0,6fr);gap:10px clamp(20px,3vw,48px);align-items:baseline;padding:clamp(22px,2.4vw,34px) 0;border-bottom:1px solid var(--rule)}
.sp-paper .sp-row{border-bottom-color:var(--rule-l)}
.sp-row__n{font-stretch:62%;font-weight:820;font-size:clamp(40px,4vw,64px);line-height:.8;font-variant-numeric:tabular-nums lining-nums}
.sp-row__t{font-stretch:72%;font-weight:700;font-size:clamp(22px,1.9vw,30px);line-height:1.05;letter-spacing:-.005em}
.sp-row__d{font-size:16.5px;line-height:1.58;color:var(--fg-2);max-width:38em}
.sp-paper .sp-row__d{color:var(--ink-fg-2)}
@media (max-width:899px){ .sp-row{grid-template-columns:auto 1fr} .sp-row__d{grid-column:2} }

/* cells: a quiet grid of named capabilities */
.sp-cells{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));border-top:1px solid var(--rule-2)}
.sp-paper .sp-cells{border-top-color:var(--ink)}
.sp-cell{padding:22px clamp(16px,2vw,32px) 30px 0;border-bottom:1px solid var(--rule)}
.sp-paper .sp-cell{border-bottom-color:var(--rule-l)}
.sp-cell + .sp-cell{padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--rule)}
.sp-paper .sp-cell + .sp-cell{border-left-color:var(--rule-l)}
.sp-cells > .sp-cell:nth-child(4n+1){padding-left:0;border-left:0}
.sp-cell__n{display:block;font-stretch:62%;font-weight:820;font-size:30px;line-height:.8;margin-bottom:18px;font-variant-numeric:tabular-nums}
.sp-cell__t{font-stretch:74%;font-weight:700;font-size:clamp(19px,1.5vw,23px);line-height:1.08;margin-bottom:10px}
.sp-cell p{font-size:15px;line-height:1.55;color:var(--fg-2)}
.sp-paper .sp-cell p{color:var(--ink-fg-2)}
.sp-cells--3{--cols:3}.sp-cells--3 > .sp-cell:nth-child(4n+1){padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--rule)}
.sp-cells--3 > .sp-cell:nth-child(3n+1){padding-left:0;border-left:0}
.sp-paper .sp-cells--3 > .sp-cell:nth-child(4n+1){border-left-color:var(--rule-l)}
.sp-paper .sp-cells--3 > .sp-cell:nth-child(3n+1){border-left:0}
@media (max-width:1023px){ .sp-cells,.sp-cells--3{--cols:2} .sp-cells > .sp-cell:nth-child(n){padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--rule)} .sp-cells > .sp-cell:nth-child(2n+1){padding-left:0;border-left:0} }
@media (max-width:599px){ .sp-cells,.sp-cells--3{--cols:1} .sp-cells > .sp-cell:nth-child(n){padding-left:0;border-left:0} }

/* sticky media beside a sequence of chapters (the image changes with the chapter in view) */
.sp-sticky{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,96px)}
.sp-sticky__media{position:sticky;top:calc(var(--frame) + var(--nav-h) + 4svh);height:calc(100svh - var(--frame) - var(--nav-h) - 8svh);align-self:start;overflow:hidden;background:#05080b}
.sp-sticky__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;opacity:0;transform:scale(1.04);transition:opacity .8s var(--ease),transform 1.6s var(--ease)}
.sp-sticky__media img.is-on{opacity:1;transform:none}
.sp-sticky__count{position:absolute;left:20px;bottom:18px;font-stretch:62%;font-weight:820;font-size:42px;line-height:.8;color:var(--fg);font-variant-numeric:tabular-nums;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.sp-item{min-height:64svh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:7svh 0;border-bottom:1px solid var(--rule)}
.sp-item:first-child{padding-top:0;min-height:56svh}
.sp-item__n{font-stretch:62%;font-weight:820;font-size:clamp(64px,6.4vw,104px);line-height:.78;font-variant-numeric:tabular-nums}
.sp-item__t{font-stretch:70%;font-weight:740;font-size:clamp(32px,3.4vw,56px);line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.sp-item__k{font-stretch:80%;font-weight:600;font-size:clamp(19px,1.5vw,23px);line-height:1.3;color:var(--fg)}
.sp-item p{font-size:17px;line-height:1.6;color:var(--fg-2);max-width:34em}
.sp-item__img{display:none}
@media (max-width:899px){
  .sp-sticky{grid-template-columns:1fr}
  .sp-sticky__media{display:none}
  .sp-item{min-height:0;padding:40px 0}
  .sp-item__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin-bottom:6px}
}

/* framed product image, as published */
.sp-shot{margin:0}
.sp-shot .shot__frame{background:#fff;box-shadow:0 0 0 1px var(--rule),0 50px 120px -40px rgba(0,0,0,.9)}
.sp-shot img{width:100%;height:auto}
.sp-shot figcaption{margin-top:12px;font-size:13.5px;color:var(--fg-3)}
.sp-paper .sp-shot figcaption{color:var(--ink-fg-3)}

/* alternating rows: an image and its text, side by side */
.sp-alt{display:grid;gap:clamp(72px,9vw,140px)}
.sp-alt__i{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:center}
.sp-alt__i:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.sp-alt__i:nth-child(even) .sp-alt__m{order:2}
.sp-alt__m{position:relative;margin:0}
.sp-alt__m > img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.sp-alt__t{display:grid;gap:14px;align-content:start}
.sp-alt__t h3{font-stretch:70%;font-weight:740;font-size:clamp(30px,3vw,48px);line-height:.98;letter-spacing:-.01em}
.sp-alt__t .sp-alt__k{font-stretch:80%;font-weight:600;font-size:clamp(18px,1.4vw,22px);line-height:1.3}
.sp-alt__t p{font-size:16.5px;line-height:1.6;color:var(--fg-2);max-width:32em}
@media (max-width:899px){ .sp-alt__i,.sp-alt__i:nth-child(even){grid-template-columns:1fr} .sp-alt__i:nth-child(even) .sp-alt__m{order:0} }

/* impact studies */
.sp-studies{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.sp-study{display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding-top:16px;border-top:2px solid var(--fg);text-decoration:none;color:inherit}
.sp-study__v{font-stretch:62%;font-weight:840;font-size:clamp(48px,4.6vw,76px);line-height:.82;letter-spacing:-.008em;font-variant-numeric:lining-nums}
.sp-study__v small{font-size:.36em;font-stretch:72%;font-weight:700;letter-spacing:0;margin-left:.15em;color:var(--fg-2)}
.sp-study__t{font-stretch:76%;font-weight:700;font-size:19px;line-height:1.15}
.sp-study p{font-size:15px;line-height:1.5;color:var(--fg-2)}
.sp-study__go{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--fg-2)}
.sp-study:hover .sp-study__go{color:var(--fg)}
.sp-study:hover .sp-study__t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sp-paper .sp-study{border-top-color:var(--ink)}
.sp-paper .sp-study p,.sp-paper .sp-study__go,.sp-paper .sp-study__v small{color:var(--ink-fg-2)}
@media (max-width:1023px){ .sp-studies{--cols:2} }
@media (max-width:599px){ .sp-studies{--cols:1} }

/* quote */
.sp-quote{max-width:54rem}
.sp-quote p{font-stretch:70%;font-weight:700;font-size:clamp(30px,3.6vw,58px);line-height:1.02;letter-spacing:-.008em;text-wrap:balance}
.sp-quote footer{margin-top:18px;color:var(--fg-3)}
.sp-paper .sp-quote footer{color:var(--ink-fg-3)}

/* close every subpage the same way */
.sp-cta{position:relative;padding:clamp(96px,11vw,180px) 0;background:var(--ink);border-top:1px solid var(--rule)}
.sp-cta__t{font-stretch:66%;font-weight:780;font-size:clamp(48px,6.4vw,112px);line-height:.9;letter-spacing:-.012em;max-width:10em}
.sp-cta__f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px 40px;margin-top:clamp(28px,3vw,44px);padding-top:22px;border-top:1px solid var(--rule-2)}
.sp-cta__f p{font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--fg-2);max-width:30em}

/* two-up columns, lists set large */
.sp-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px)}
@media (max-width:899px){ .sp-two{grid-template-columns:1fr} }
.sp-biglist{display:grid;border-top:1px solid var(--rule-2)}
.sp-biglist li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-stretch:72%;font-weight:700;font-size:clamp(22px,2vw,32px);line-height:1.08}
.sp-biglist li span{font-stretch:86%;font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.sp-paper .sp-biglist{border-top-color:var(--ink)}
.sp-paper .sp-biglist li{border-bottom-color:var(--rule-l)}
.sp-paper .sp-biglist li span{color:var(--ink-fg-3)}
.sp-k{display:block;color:var(--fg-3);margin-bottom:14px}
.sp-paper .sp-k{color:var(--ink-fg-3)}

/* numbered list inside a role or a study */
.sp-ol{display:grid;counter-reset:n;border-top:1px solid var(--rule-2)}
.sp-ol li{counter-increment:n;display:grid;grid-template-columns:3em 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:16.5px;line-height:1.5;color:var(--fg-2)}
.sp-ol li::before{content:counter(n,decimal-leading-zero);font-stretch:86%;font-weight:600;font-size:12px;letter-spacing:.09em;padding-top:4px;color:var(--fg-3);font-variant-numeric:tabular-nums}

/* AI: a three-step explanation on one datum */
.sp-flow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);counter-reset:f}
.sp-flow::before{content:"";position:absolute;left:0;right:0;top:calc(clamp(64px,6vw,96px) * .8 + 18px);height:1px;background:var(--rule-2)}
.sp-flow__s{position:relative;display:grid;gap:12px;align-content:start}
.sp-flow__n{font-stretch:62%;font-weight:820;font-size:clamp(64px,6vw,96px);line-height:.8;font-variant-numeric:tabular-nums;padding-bottom:30px}
.sp-flow__s:not(:last-child)::after{content:"";position:absolute;right:-6px;top:calc(clamp(64px,6vw,96px) * .8 + 14px);width:9px;height:9px;border-top:1px solid var(--fg-2);border-right:1px solid var(--fg-2);transform:rotate(45deg)}
.sp-flow__s h3{font-stretch:72%;font-weight:700;font-size:clamp(22px,1.9vw,30px);line-height:1.06}
.sp-flow__s p{font-size:16px;line-height:1.55;color:var(--fg-2);max-width:26em}
@media (max-width:759px){ .sp-flow{grid-template-columns:1fr} .sp-flow::before,.sp-flow__s::after{display:none} .sp-flow__n{padding-bottom:6px} }

/* Connect: the ecosystem on one datum, Onebrief at its centre */
.sp-hub{margin:clamp(64px,8vw,128px) 0 0;display:grid;gap:30px}
.sp-hub__row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(10px,1.4vw,18px)}
.sp-hub__row li{position:relative;padding:16px 22px;border:1px solid var(--rule-2);font-stretch:76%;font-weight:700;font-size:clamp(17px,1.6vw,26px);line-height:1.1;color:var(--fg);background:var(--ink-2)}
.sp-hub__row--a li::after,.sp-hub__row--b li::before{content:"";position:absolute;left:50%;width:1px;height:calc(30px + clamp(32px,3.6vw,60px) * .5 + 18px);background:var(--rule-2);z-index:0}
.sp-hub__row{position:relative;z-index:0}.sp-hub__core{position:relative;z-index:1}
.sp-hub__row--a li::after{top:100%}
.sp-hub__row--b li::before{bottom:100%}
.sp-hub__core{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0}
.sp-hub__core .rule{background:var(--fg-2)}
.sp-hub__ob{padding:18px 36px;background:var(--blue);color:var(--ink);font-stretch:64%;font-weight:820;font-size:clamp(32px,3.6vw,60px);line-height:1;letter-spacing:.005em}
.sp-hub .rule:first-child{transform-origin:100% 50%}

/* Stakeholders: each role gets a band of its own */
.sp-roles-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.sp-roles-nav a{padding:9px 13px;border:1px solid var(--rule-2);font-size:14px;font-weight:600;color:var(--fg-2);text-decoration:none;background:rgba(14,15,16,.4)}
.sp-roles-nav a:hover{color:var(--fg);border-color:var(--fg-3)}
.sp-role{position:relative;background:var(--ink)}
.sp-role__band{position:relative;height:min(78svh,52vw);min-height:420px;overflow:hidden;display:flex;align-items:flex-end;background:#05080b}
.sp-role__band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.sp-role__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,16,.2) 0%,rgba(14,15,16,0) 30%,rgba(14,15,16,.78) 86%,var(--ink) 100%),linear-gradient(90deg,rgba(6,8,10,.45),rgba(6,8,10,0) 60%)}
.sp-role__in{position:relative;width:100%;padding-bottom:clamp(20px,3svh,36px);display:grid;gap:12px}
.sp-role__n{font-stretch:62%;font-weight:820;font-size:clamp(48px,4.6vw,76px);line-height:.8;font-variant-numeric:tabular-nums}
.sp-role__t{font-stretch:62%;font-weight:820;text-transform:uppercase;font-size:min(8.6vw,14svh);line-height:.86;letter-spacing:-.004em;margin-left:-.03em}
.sp-role__t span{display:block}
.sp-role__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,96px);align-items:start;padding-top:clamp(28px,3vw,48px);padding-bottom:clamp(88px,10vw,150px)}
@media (max-width:899px){ .sp-role__body{grid-template-columns:1fr} .sp-roles-nav{justify-content:flex-start} }

/* Impact: the featured result */
.sp-feature{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:end}
.sp-feature__nums{display:grid;gap:18px}
.sp-feature__v{font-stretch:62%;font-weight:840;font-size:clamp(110px,15vw,250px);line-height:.8;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;margin-left:-.035em}
.sp-feature__v.is-was{color:var(--fg-4)}
.sp-feature__t{display:grid;gap:20px}
.sp-feature__t .h2{font-size:clamp(34px,3.6vw,58px)}
.sp-feature .sp-quote p{font-size:clamp(24px,2.4vw,36px)}
@media (max-width:899px){ .sp-feature{grid-template-columns:1fr} }

/* a study page */
.sp-study-pg{display:grid;gap:clamp(56px,7vw,104px);max-width:980px}
.sp-study-pg__s{display:grid;gap:16px}
.sp-study-pg__s > p{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--fg-2);max-width:36em}
.sp-study-pg__h{font-stretch:70%;font-weight:740;font-size:clamp(34px,3.6vw,58px);line-height:.98;letter-spacing:-.01em}
.sp-study-pg__s--result{padding-top:28px;border-top:1px solid var(--rule-2)}
.sp-study-pg__src{font-size:14px;color:var(--fg-3)}
.sp-study-pg__src a{color:var(--fg-2)}

/* Expertise */
.sp-people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-2)}
.sp-people li{display:grid;gap:8px;padding:22px 20px 26px 0;border-bottom:1px solid var(--rule)}
.sp-people__n{font-stretch:72%;font-weight:700;font-size:clamp(24px,2.2vw,34px);line-height:1.02}
.sp-people .lbl{color:var(--fg-3)}
.sp-backed{margin-top:clamp(40px,5vw,72px);font-stretch:80%;font-weight:600;font-size:clamp(20px,1.8vw,28px);line-height:1.3;max-width:30em}
@media (max-width:899px){ .sp-people{grid-template-columns:1fr 1fr} }
@media (max-width:599px){ .sp-people{grid-template-columns:1fr} }

/* =====================================================================
   COMPOSED STATIC MODE: reduced motion, or Motion switched off.
   Every state of the sequence is readable at once, aligned at revision 044.
   ===================================================================== */
.motion-off .stage{height:auto}
.motion-off .stage__sticky{position:relative;height:auto;overflow:visible}
.motion-off .world{position:relative;perspective:none;display:flex;flex-direction:column}
.motion-off .entry{order:1}.motion-off .lines{order:2}.motion-off .domains{order:3}.motion-off .stage__skip{order:4}
.motion-off .lines,.motion-off .domains{align-self:center;width:min(100%,var(--max))}
.motion-off .domains{height:calc(min(40svh,380px) + clamp(80px,10vw,140px))}
.motion-off .theater{position:absolute;inset:0 0 auto 0;height:100svh;min-height:560px}
.motion-off .scene__video,.motion-off .lamps{display:none}
.motion-off .entry{position:relative;height:100svh;min-height:560px}
.motion-off .filmctl,.motion-off .glass,.motion-off .stage__skip,.motion-off .seq-sr{display:none}
.motion-off .lines{position:relative;left:auto;top:auto;width:auto;max-width:var(--max);margin:0 auto;padding:clamp(72px,9vw,120px) var(--gut) 40px;pointer-events:auto}
.motion-off .lines__list{grid-template-columns:repeat(5,1fr);gap:24px}
.motion-off .line{grid-area:auto;opacity:1;visibility:visible;padding-top:14px;border-top:1px solid var(--rule-2)}
.motion-off .line__t{font-size:clamp(22px,1.9vw,30px);text-shadow:none}
.motion-off .domains{position:relative;left:auto;right:auto;top:auto;bottom:auto;max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(80px,10vw,140px);pointer-events:auto}
.motion-off .domains::after{opacity:1;left:var(--gut);right:var(--gut);bottom:calc(clamp(80px,10vw,140px) + min(12svh,7.4vw) * .166)}
.motion-off .v-new{opacity:1}
.motion-off .v-old{opacity:0}
.motion-off .pane .num{--roll:1}
.motion-off .close{height:auto}
.motion-off .close__sticky{position:relative;height:auto;padding:clamp(80px,10vw,140px) 0}
.motion-off .close .num{--roll:1}
.motion-off .close__s--a{opacity:0}
.motion-off .close__s--b{opacity:1}
@media (max-width:1023px){ .motion-off .lines__list{grid-template-columns:1fr 1fr} }
@media (max-width:759px){
  .motion-off .lines__list{grid-template-columns:1fr}
  .motion-off .domains{height:auto;display:grid;grid-template-rows:none;grid-auto-rows:170px;left:auto;padding-left:calc(var(--gut) + 14px)}
}