/* ==========================================================================
   LAYAW Project Manager — site.css
   Written phone first. Everything above the first @media is the phone; the
   blocks after it add room for a tablet (768), a laptop (1024), a desktop
   (1440) and a large monitor (1920).

   Brand: navy ink, white leads, ice supports, teal ONCE per screen (in most
   sections the one teal thing is the block in the structure, or the mark).
   Gotham is the brand face; Montserrat stands in on the web. Plex Mono is
   for data, numbers and small labels.
   ========================================================================== */

/* ---- fonts: served from here, so the first screen waits on no other server.
   latin-ext is only there for the peso sign. ---- */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/plex-mono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/plex-mono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/plex-mono-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/plex-mono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/montserrat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- tokens ---- */
:root{
  --navy:#04284D; --navy-2:#0B3763; --navy-3:#123F6B;
  --teal:#0B97A6; --ice:#9EC2CD; --ice-2:#DCE8EC; --paper:#F2F6F8; --white:#fff;
  --ink:var(--navy); --ink-2:#47607A; --ink-3:#5C7186;
  --line:rgba(4,40,77,.14); --line-d:rgba(255,255,255,.17);

  --display:"Gotham","Montserrat",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --gut:16px; --sec:92px; --nav-h:60px;
  --t-body:16px; --t-lede:17px; --t-mono:10.5px; --t-h2:clamp(34px,10.6vw,46px); --t-h3:21px;

  --ease:cubic-bezier(.16,1,.3,1);          /* arrives slowly: reveals, sheets, the curtain */
  --ease-io:cubic-bezier(.65,0,.35,1);      /* there and back: swaps */
  --d-press:.16s; --d-ui:.45s; --d-reveal:.9s; --d-film:1.3s;

  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important}
body{margin:0;font:400 var(--t-body)/1.55 var(--display);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,ol,ul,dl,dd,figure,fieldset{margin:0;padding:0}
ol,ul{list-style:none} fieldset{border:0;min-width:0} legend{padding:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a,label{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 5px #fff}
.dark :focus-visible,.menu :focus-visible{outline-color:#fff;box-shadow:0 0 0 5px var(--navy)}
.skip{position:absolute;left:-999px;top:8px;z-index:400;background:#fff;padding:12px 16px;border-radius:6px}
.skip:focus{left:8px}

.display{font-weight:800;letter-spacing:-.038em;line-height:.96;text-wrap:balance}
h2.display{font-size:var(--t-h2)}
.mono{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.mono b{font-weight:500}
.tag{color:var(--ink-3);margin-bottom:20px}
.dark .tag{color:var(--ice)}
.lede{font-size:var(--t-lede);line-height:1.5;color:var(--ink-2);max-width:36ch}
.dark{background:var(--navy);color:#fff}
.dark .lede{color:var(--ice)}

/* ---- buttons, links, press ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border-radius:999px;
  background:var(--navy);color:#fff;font:500 16px/1 var(--display);text-decoration:none;white-space:nowrap;
  transition:transform var(--d-press) ease,background var(--d-ui) ease,color var(--d-ui) ease}
.btn i{font-style:normal;transition:transform var(--d-ui) var(--ease)}
.btn-light{background:#fff;color:var(--navy)}
.btn-nav{display:none}
.ulink{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 1px no-repeat}
.ulink i{font-style:normal}
.press{position:relative;overflow:hidden;isolation:isolate}
.press:active{transform:scale(.97)}
.rip{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;background:currentColor;opacity:.16;transform:scale(0);animation:rip .7s var(--ease) forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---- preloader ---- */
.pre{display:none}
/* Runs on the stylesheet's own clock, from the first paint: it never waits for a script,
   so a slow phone is not held behind the curtain while one loads. --pre-d is how long. */
@property --pre-n{syntax:'<integer>';initial-value:0;inherits:false}
.js .pre{--pre-d:.55s;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;position:fixed;inset:0;z-index:300;background:var(--navy);color:#fff;
  padding:var(--gut) var(--gut) calc(28px + var(--safe-b));clip-path:inset(0);animation:preOut .9s var(--ease) var(--pre-d) forwards}
@keyframes preOut{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.js .pre.is-done{animation:none;clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none;transition:clip-path .7s var(--ease),visibility 0s .7s}
.pre-tower i{animation:preBar calc(var(--pre-d) / 6) linear forwards}
.pre-tower i:nth-child(2){animation-delay:calc(var(--pre-d) / 6)}.pre-tower i:nth-child(3){animation-delay:calc(var(--pre-d) / 6 * 2)}
.pre-tower i:nth-child(4){animation-delay:calc(var(--pre-d) / 6 * 3)}.pre-tower i:nth-child(5){animation-delay:calc(var(--pre-d) / 6 * 4)}
.pre-tower i:nth-child(6){animation-delay:calc(var(--pre-d) / 6 * 5)}
@keyframes preBar{to{transform:scaleX(1)}}
.pre-row b{counter-reset:n var(--pre-n);animation:preN var(--pre-d) linear forwards}
.pre-row b::after{content:counter(n,decimal-leading-zero)}
@keyframes preN{to{--pre-n:100}}
.pre-tower{display:flex;flex-direction:column-reverse;gap:5px;width:min(46vw,220px)}
.pre-tower i{height:9px;background:var(--ice);transform:scaleX(0);transform-origin:0 50%}
.pre-tower i:nth-child(odd){background:#fff}
.pre-row{display:flex;justify-content:space-between;color:var(--ice)}
.pre-row b{color:#fff}
.pre-skip{position:absolute;right:var(--gut);top:calc(var(--gut) + var(--safe-t));min-height:44px;padding:0 4px;color:var(--ice)}

/* ---- the curtain between sections ---- */
.wipe{position:fixed;inset:0;z-index:250;background:var(--navy);color:#fff;display:grid;place-items:center;clip-path:inset(100% 0 0 0);pointer-events:none}
.wipe span{font-size:13px;color:var(--ice)}
.wipe.in{clip-path:inset(0);transition:clip-path .5s var(--ease-io)}
.wipe.out{clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-io)}

/* ---- cursor (fine pointers only; switched on by the script) ---- */
.cursor{display:none}
.has-cursor .cursor{display:block;position:fixed;left:0;top:0;z-index:290;pointer-events:none;color:var(--navy)}
.cursor i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:currentColor;transition:transform .35s var(--ease),background .2s,box-shadow .2s}
.cursor.is-link i{transform:scale(3.4);background:transparent;box-shadow:inset 0 0 0 .4px currentColor}
.cursor.is-block i{transform:scale(2.2) rotate(45deg);border-radius:1px;background:transparent;box-shadow:inset 0 0 0 .6px currentColor}
.cursor span{position:absolute;left:18px;top:14px;white-space:nowrap;background:var(--navy);color:#fff;padding:7px 10px;border-radius:4px;font-size:10px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .4s var(--ease)}
.cursor.has-label span{opacity:1;transform:none}
.cursor.on-dark{color:#fff} .cursor.on-dark span{background:#fff;color:var(--navy)}

/* ---- nav ---- */
.nav{position:fixed;left:0;right:0;top:0;z-index:200;height:calc(var(--nav-h) + var(--safe-t));padding:var(--safe-t) var(--gut) 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  color:var(--navy);transition:background var(--d-ui) ease,color var(--d-ui) ease,box-shadow var(--d-ui) ease,transform .5s var(--ease)}
.nav.is-stuck{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--line)}
.nav.on-dark{color:#fff}
.nav.on-dark.is-stuck{background:rgba(4,40,77,.97);box-shadow:0 1px 0 var(--line-d)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-size:13px;white-space:nowrap}
.brand img{width:26px;height:32px;object-fit:contain}
.nav.on-dark .brand img{background:#fff;border-radius:6px;padding:3px 4px;width:32px;height:36px}
.brand b{font-weight:800;letter-spacing:.02em}
.nav-links,.sound{display:none}
.nav-right{display:flex;align-items:center;gap:14px}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding-left:10px}
.menu-btn i{width:20px;height:9px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:height .35s var(--ease),border-width .2s}
.menu-open .menu-btn i{height:0;border-bottom-width:0}

/* ---- the phone menu ---- */
.menu{position:fixed;inset:0;z-index:190;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:calc(var(--nav-h) + var(--safe-t) + 28px) var(--gut) calc(22px + var(--safe-b));overflow:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s}
.menu-open .menu{clip-path:inset(0);visibility:visible;transition:clip-path .7s var(--ease)}
.menu nav a{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-d);text-decoration:none;
  font:800 clamp(28px,8.8vw,52px)/1.02 var(--display);letter-spacing:-.035em;opacity:0;transform:translateY(26px);transition:opacity .4s ease,transform .9s var(--ease)}
.menu nav a span{color:var(--ice);min-width:2.4em;letter-spacing:.1em}
.menu-open .menu nav a{opacity:1;transform:none}
.menu-open .menu nav a:nth-child(1){transition-delay:.14s}.menu-open .menu nav a:nth-child(2){transition-delay:.2s}
.menu-open .menu nav a:nth-child(3){transition-delay:.26s}.menu-open .menu nav a:nth-child(4){transition-delay:.32s}
.menu-open .menu nav a:nth-child(5){transition-delay:.38s}
.menu-foot{display:grid;gap:12px;opacity:0;transition:opacity .4s ease}
.menu-open .menu-foot{opacity:1;transition:opacity .6s ease .5s}
.menu-foot .btn{width:100%}
.menu-foot p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;align-items:center;color:var(--ice);font-size:15px}
.menu-foot p a{min-height:44px;display:inline-flex;align-items:center;color:#fff}
.sound-m{min-height:44px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ice)}
.menu-open .nav{color:#fff;background:transparent;box-shadow:none}
.menu-open .nav .brand img{background:#fff;border-radius:6px;padding:3px 4px;width:32px;height:36px}
.menu-open body{overflow:hidden}

/* ---- the structure ---- */
[data-seat]{position:relative}
.gl{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.gl canvas{width:100%;height:100%;display:block}
.gl-live .gl{opacity:1}
.anchor{position:relative}
.tower{position:absolute;inset:0;margin:auto;width:auto;height:100%;max-height:100%;max-width:100%;object-fit:contain;transition:opacity .8s ease}
.gl-live .tower{opacity:0}
.hint,.floor{position:absolute;color:var(--ink-3);pointer-events:none;white-space:nowrap}
.tip3d{position:absolute !important;z-index:3 !important;left:0;top:0;white-space:nowrap;background:var(--navy);color:#fff;padding:8px 11px;border-radius:5px;font-size:10px;pointer-events:none;
  opacity:0;transition:opacity .25s}
.tip3d.on{opacity:1}
.dark .tip3d{background:#fff;color:var(--navy)}

/* ==========================================================================
   01 hero — one screen: whose desk, the structure, the claim, the button.
   ========================================================================== */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(170px,1fr) auto auto;gap:10px;
  padding:calc(var(--nav-h) + var(--safe-t) + 6px) var(--gut) calc(18px + var(--safe-b));overflow:hidden;touch-action:pan-y}
.hero > :not(.gl){position:relative;z-index:1}
.hero-meta{display:flex;flex-wrap:wrap;gap:2px 16px;color:var(--ink-3)}
.hero-meta b{color:var(--ink)}
.roles{display:flex;align-items:center;gap:8px;min-height:48px;overflow-x:auto;margin-inline:calc(var(--gut) * -1);padding:2px var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
.roles::-webkit-scrollbar{display:none}
.roles-k{flex:none;color:var(--ink-3);margin-right:4px}
.chip{flex:none;min-height:44px;padding:0 17px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 14px/1 var(--display);color:var(--ink);white-space:nowrap;
  transition:background var(--d-ui) ease,color var(--d-ui) ease,border-color var(--d-ui) ease,transform var(--d-press) ease}
.chip[aria-checked="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.hero-zone{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);align-items:stretch;min-height:0;pointer-events:none}
.callouts{align-self:end;display:grid;gap:12px;padding-bottom:6px}
.callouts dt{color:var(--ink-3);font-size:9.5px;letter-spacing:.12em}
.callouts dd{font-size:15px;letter-spacing:0;font-weight:500;color:var(--ink);text-transform:none}
.hero-zone .anchor{min-height:0;margin:-14px calc(var(--gut) * -.6) -30px 0}
.hero-meta span:first-child{display:none}
.hint{right:calc(var(--gut) * .6);bottom:28px;font-size:9.5px}
.hero-h1{font-size:clamp(38px,12.2vw,150px);line-height:.93;margin-top:4px}
.hero-h1 .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;white-space:nowrap}
.hero-h1 .ln > span{display:inline-block;will-change:transform}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.hero .lede{font-size:16px;max-width:none}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 18px}
.hero-cta .btn{flex:1 1 100%}
.sample{color:var(--ink-3);font-size:9px;letter-spacing:.1em;margin-top:-8px}

/* ==========================================================================
   02 where it goes wrong — the same figure, drifting from desk to desk
   ========================================================================== */
.drift{position:relative;z-index:1;padding:var(--sec) var(--gut)}
.drift h2{margin-bottom:22px}
.copies{margin-top:44px;border-top:1px solid var(--line-d)}
.copies li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:end;padding:16px 0;border-bottom:1px solid var(--line-d)}
.copies-k{color:var(--ice);grid-column:1}
.copies-who{grid-column:1;font-size:14px;line-height:1.35;color:#fff}
.copies b{grid-column:2;grid-row:1 / span 2;font-size:22px;letter-spacing:-.01em;text-transform:none;color:#fff;font-weight:400}
.copies u{text-decoration:none;background:linear-gradient(var(--ice),var(--ice)) 0 100%/100% 2px no-repeat;color:var(--ice)}
/* the break in the grid: the answer is pulled out to the page edge, white on the navy */
.once{margin:36px calc(var(--gut) * -1) 0;padding:30px var(--gut) 28px;background:#fff;color:var(--navy)}
.once-k{color:var(--ink-3);margin-bottom:14px}
.once-line{display:grid;gap:6px;font-weight:700;font-size:17px;line-height:1.25}
.once-line b{font-size:clamp(38px,12vw,84px);letter-spacing:-.04em;text-transform:none;font-weight:500;color:var(--teal);line-height:1}
.once-note{margin-top:14px;color:var(--ink-2);max-width:40ch}
.once-sample{margin-top:14px;color:var(--ink-3);font-size:9.5px}

/* ==========================================================================
   03 how a job moves — a pinned stage. The structure gains a floor per step,
   and the real screen for that step comes forward out of the stack.
   Without scripts, or on a screen too short to hold a stage, it is a list.
   ========================================================================== */
.story{position:relative;z-index:1}
.story-stage{padding:var(--sec) var(--gut)}
.story-nav{display:none}
.story-view .anchor{display:none}
.rig{display:grid;gap:14px;margin:26px 0}
.plane{border-radius:10px;overflow:hidden;background:#fff}
.plane:nth-child(1){z-index:5}.plane:nth-child(2){z-index:4}.plane:nth-child(3){z-index:3}.plane:nth-child(4){z-index:2}.plane:nth-child(5){z-index:1}   /* the nearer screen is drawn over the ones behind */
.plane-bar{display:flex;align-items:center;gap:8px;height:26px;padding:0 10px;background:var(--paper);color:var(--ink-3);font-size:9px;border-bottom:1px solid var(--line)}
.plane-bar i{width:6px;height:6px;border-radius:50%;background:var(--ice)}
.plane-view{overflow:hidden}
.chapters{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.chap-n{color:var(--ice);margin-bottom:12px}
.chap-n b{color:#fff}
.chap h3{font-size:clamp(30px,9.4vw,44px);margin-bottom:10px}
.chap > p:not(.chap-n){color:var(--ice);max-width:44ch}
.data{margin-top:14px;border-top:1px solid var(--line-d)}
.data div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-d)}
.data dt{color:var(--ice)} .data dd{color:#fff;font-weight:500;text-align:right;letter-spacing:.06em}
.story-foot{display:none}

/* the stage itself: scripts on, and a screen tall enough to hold it */
.js:not(.flat) .story{height:520vh}
.js:not(.flat) .story-stage{position:sticky;top:0;height:100svh;padding:calc(var(--nav-h) + var(--safe-t) + 4px) var(--gut) calc(14px + var(--safe-b));
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;overflow:hidden;touch-action:pan-y}
.js:not(.flat) .story-stage > :not(.gl){position:relative;z-index:1}
.js:not(.flat) .story-head .tag{margin-bottom:6px}
.js:not(.flat) .story-nav{display:flex;gap:0;overflow-x:auto;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none}
.story-nav::-webkit-scrollbar{display:none}
.story-nav button{min-height:44px;padding:0 16px 0 0;white-space:nowrap;color:var(--ice);opacity:.7;font:inherit;letter-spacing:inherit;text-transform:inherit;
  background:linear-gradient(#fff,#fff) 0 calc(100% - 8px)/0 1px no-repeat;transition:background-size .6s var(--ease),opacity .3s}
.story-nav li.on button{color:#fff;opacity:1;background-size:calc(100% - 16px) 1px}
.js:not(.flat) .story-view{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:0;min-height:0}
.js:not(.flat) .story-view .anchor{display:block;min-height:0;margin-right:calc(var(--gut) * -1)}
.floor{right:var(--gut);top:0;color:var(--ice);font-size:9.5px}
.js:not(.flat) .rig{display:block;position:relative;margin:0;min-height:0;perspective:1100px;perspective-origin:30% 45%}
.js:not(.flat) .plane{position:absolute;inset:6px 0 6px 0;margin:0;box-shadow:0 30px 60px -28px rgba(0,0,0,.7);will-change:transform,opacity;transform-origin:50% 50%;backface-visibility:hidden}
.js:not(.flat) .plane-view{position:absolute;inset:26px 0 0 0}
.js:not(.flat) .plane-view img{height:128%;width:auto;max-width:none;will-change:transform}
.js:not(.flat) .chapters{display:grid;gap:0}
.js:not(.flat) .chap{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s ease,transform .6s var(--ease),visibility 0s .35s}
.js:not(.flat) .chap.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .12s,transform .8s var(--ease) .12s}
.js:not(.flat) .chap h3{font-size:clamp(28px,8.6vw,40px);margin-bottom:8px}
.js:not(.flat) .chap > p:not(.chap-n){font-size:15px;line-height:1.45}
.js:not(.flat) .chap-n{margin-bottom:8px}
.js:not(.flat) .data{margin-top:10px}
.js:not(.flat) .data div{padding:7px 0}
.js:not(.flat) .data div:nth-child(n+2){display:none}
.js:not(.flat) .story-foot{display:flex;justify-content:space-between;gap:12px;color:var(--ice);font-size:9.5px;opacity:.8}

/* ==========================================================================
   04 your desk
   ========================================================================== */
.desk{position:relative;z-index:1;background:var(--paper);padding:var(--sec) var(--gut)}
.desk h2 span{color:var(--ink-2);display:inline-block}
.roles-desk{margin-top:26px}
.roles-desk .chip{background:transparent}
.roles-desk .chip[aria-checked="true"]{background:var(--navy)}
.desk-body{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-top:26px}
.desk-list{border-top:1px solid var(--line);counter-reset:d}
.desk-list li{position:relative;padding:18px 0 18px 44px;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:15.5px;line-height:1.45;counter-increment:d}
.desk-list li::before{content:"0" counter(d);position:absolute;left:0;top:21px;font:400 var(--t-mono)/1 var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.desk-list b{display:block;color:var(--ink);font-weight:700;font-size:18px;line-height:1.25;margin-bottom:5px}
.desk-shot{margin-inline:calc(var(--gut) * -1) calc(var(--gut) * -1)}
.frame{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;padding-left:var(--gut);-webkit-overflow-scrolling:touch}
.frame::-webkit-scrollbar{display:none}
.frame img{height:clamp(300px,52svh,440px);width:auto;max-width:none;border-radius:10px 0 0 10px;border:1px solid var(--line);border-right:0;box-shadow:0 26px 60px -34px rgba(4,40,77,.5);
  transition:opacity .3s ease,transform .7s var(--ease)}
.frame img.is-swapping{opacity:0;transform:translateX(24px)}
.desk-shot figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px var(--gut) 0;color:var(--ink-3);font-size:9.5px}
.desk-note{margin-top:34px;font-size:var(--t-lede);line-height:1.5;color:var(--ink-2);max-width:44ch}

/* ==========================================================================
   05 build your workspace — the structure above, a sheet of choices below,
   one question at a time. On a wide screen the sheet opens out into a list.
   ========================================================================== */
.build{position:relative;z-index:1;background:#fff;padding:var(--sec) 0 0}
.build-head{padding:0 var(--gut) 26px}
.cfg-wrap{display:grid;grid-template-columns:minmax(0,1fr)}
.cfg-preview{background:var(--paper);min-height:300px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;padding:14px var(--gut) 30px;overflow:hidden;touch-action:pan-y}
.cfg-preview > :not(.gl){position:relative;z-index:1}
.cfg-preview .anchor{min-height:150px}
.cfg-plan{color:var(--ink-3)}
.cfg-big{display:flex;align-items:baseline;gap:10px;margin:4px 0 2px}
.cfg-big b{font:800 clamp(40px,12vw,84px)/1 var(--display);letter-spacing:-.045em}
.cfg-big small{color:var(--ink-3)}
.cfg-count{color:var(--ink-3)}
.cfg{position:relative;z-index:2;background:#fff;border-radius:22px 22px 0 0;margin-top:-18px;box-shadow:0 -18px 44px -26px rgba(4,40,77,.45);
  padding:0 var(--gut) calc(16px + var(--safe-b));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
.cfg-top{display:grid;justify-items:center;gap:8px;padding:10px 0 6px}
.cfg-handle{width:40px;height:4px;border-radius:2px;background:var(--ice-2)}
.cfg-step{justify-self:start;color:var(--ink-3)}
.cfg-step b{color:var(--ink)}
.step{padding:6px 0 10px}
.step legend,.legend{display:flex;align-items:baseline;gap:12px;font:800 24px/1.1 var(--display);letter-spacing:-.03em;margin-bottom:14px;width:100%}
.step legend .mono,.legend .mono{color:var(--ink-3);font-weight:400}
.opt{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;cursor:pointer;
  transition:border-color var(--d-ui) ease,background var(--d-ui) ease,transform var(--d-press) ease}
.opt input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border-radius:50%;border:1.5px solid var(--ink-3);display:grid;place-items:center}
.opt input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--navy);transform:scale(0);transition:transform .3s var(--ease)}
.opt input:checked{border-color:var(--navy)} .opt input:checked::after{transform:scale(1)}
.opt:has(input:checked){border-color:var(--navy);background:var(--paper)}
.opt span{display:block;color:var(--ink-2);font-size:14.5px;line-height:1.4}
.opt b{display:block;color:var(--ink);font-weight:700;font-size:17px;margin-bottom:3px}
.opt-row span{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%}
.opt-row b{margin:0}
.opt-row em{font-style:normal;color:var(--ink-2);font-size:11px;letter-spacing:.08em}
.stepper{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;gap:10px;margin-bottom:8px}
.stepper button{height:64px;border-radius:16px;border:1px solid var(--line);font:500 28px/1 var(--display);transition:transform var(--d-press) ease,background var(--d-ui)}
.stepper output{text-align:center;font-size:19px;letter-spacing:.04em;color:var(--ink);text-transform:none;font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(var(--navy),var(--navy)) 0/var(--fill,14%) 100% no-repeat,var(--ice-2)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--ice-2)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--navy)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:var(--navy);border:5px solid #fff;box-shadow:0 0 0 1px var(--navy)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--navy);border:5px solid #fff;box-shadow:0 0 0 1px var(--navy)}
.step-note{color:var(--ink-2);font-size:14px;line-height:1.45;margin-top:6px}
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tog{display:block;cursor:pointer;transition:transform var(--d-press) ease}
.tog:last-child{grid-column:1 / -1}
.tog input{position:absolute;opacity:0;pointer-events:none}
.tog span{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:0 16px;border-radius:14px;border:1px solid var(--line);font-weight:500;font-size:15.5px;color:var(--ink-2);
  transition:background var(--d-ui) ease,color var(--d-ui) ease,border-color var(--d-ui) ease}
.tog span::after{content:"";flex:none;width:34px;height:20px;border-radius:10px;background:radial-gradient(circle at 10px 50%,#fff 0 7px,transparent 7.6px),var(--ice);transition:background .3s ease}
.tog input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}
.tog input:checked + span::after{background:radial-gradient(circle at 24px 50%,var(--navy) 0 7px,transparent 7.6px),#fff}
.tog input:focus-visible + span{outline:2px solid var(--navy);outline-offset:3px}
fieldset:disabled{opacity:.4}
.quote-lines{border-top:1px solid var(--line)}
.quote-lines div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.quote-lines dt{color:var(--ink-2)} .quote-lines dd{font-weight:500;text-align:right;letter-spacing:.06em}
.quote-note{margin:14px 0 16px;color:var(--ink-2);font-size:14.5px;line-height:1.45}
.quote-k{color:var(--ink-3);margin-bottom:8px}
.mods{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.mods li{padding:6px 9px;border-radius:5px;background:var(--paper);color:var(--ink-2);font-size:9.5px;letter-spacing:.08em}
.quote-cta{display:grid;gap:8px;justify-items:start}
.quote-cta .btn{width:100%}
.cfg-nav{display:none}
/* scripts on: one question at a time, with the way forward under the thumb */
.js .cfg-wrap{height:calc(100svh - var(--nav-h) - var(--safe-t));min-height:560px;grid-template-rows:minmax(0,43fr) minmax(0,57fr)}
.js .quote-cta .btn{display:none}
.cfg-nav [hidden]{display:none}
.js .cfg-preview{min-height:0}
.js .steps{overflow-y:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:none}
.js .step{display:none}
.js .step.on{display:block;animation:stepin .7s var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateX(26px)}}
.js .cfg-nav{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding-top:10px}
.cfg-back{min-height:54px;padding:0 18px;border-radius:999px;border:1px solid var(--line);color:var(--ink)}
.cfg-back:disabled{opacity:.35}


/* ==========================================================================
   06 the rest of LAYAW — the finished structure becomes one block among seven
   ========================================================================== */
.suite{position:relative;z-index:1}
.suite-stage{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(330px,1fr) auto;gap:8px;padding:var(--sec) var(--gut) calc(var(--sec) * .7);overflow:hidden;touch-action:pan-y}
.suite-stage > :not(.gl){position:relative;z-index:1}
.suite-anchor{min-height:0;margin-inline:calc(var(--gut) * -1)}
.orbit{display:grid;gap:0;padding:0 var(--gut);align-content:center;height:100%}
.node{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;min-height:44px;text-align:left;border-bottom:1px solid var(--line-d)}
.node b{font-weight:700;font-size:17px}
.node span{color:var(--ice);font-size:9.5px}
/* scripts and 3D on: the names leave the list and sit on their blocks */
.gl-live .orbit{display:block;padding:0}
.gl-live .orbit li{position:absolute;left:0;top:0;will-change:transform,opacity}
.gl-live .node{position:absolute;left:-60px;top:-22px;width:120px;min-height:44px;display:grid;place-items:center;align-content:center;text-align:center;border:0;gap:2px;padding:0}
.gl-live .node b{font:500 9.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;transform:translateY(22px)}
.gl-live .node span{display:none}

.suite-now{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:14px 0;margin-bottom:16px;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.suite-now b{font-weight:800;font-size:24px;letter-spacing:-.03em}
.suite-now span{color:var(--ice)}
.suite-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 18px;margin-top:14px}
.hint-inline{color:var(--ice);font-size:9.5px}

/* ==========================================================================
   07 your data — short editorial cards, and one band pulled edge to edge
   ========================================================================== */
.trust{position:relative;z-index:1;background:#fff;padding:var(--sec) var(--gut) 0}
.trust-head .lede{margin-top:18px}
.cards{display:grid;grid-template-columns:minmax(0,1fr);margin-top:40px;border-top:1px solid var(--line)}
.card{padding:26px 0 28px;border-bottom:1px solid var(--line)}
.card-n{color:var(--ink-3);margin-bottom:14px}
.card h3{font:800 clamp(24px,7vw,32px)/1.08 var(--display);letter-spacing:-.03em;margin-bottom:10px;text-wrap:balance}
.card p:last-child{color:var(--ink-2);max-width:46ch}
.onboard{margin:var(--sec) calc(var(--gut) * -1) 0;padding:calc(var(--sec) * .75) var(--gut)}
.onboard-k{color:var(--ice);margin-bottom:22px}
.onboard-steps{display:grid;border-top:1px solid var(--line-d)}
.onboard-steps li{position:relative;padding:20px 0 20px 92px;border-bottom:1px solid var(--line-d);color:var(--ice);font-size:15.5px;line-height:1.45}
.onboard-steps span{position:absolute;left:0;top:24px;color:var(--ice)}
.onboard-steps b{display:block;color:#fff;font-weight:700;font-size:19px;line-height:1.2;margin-bottom:5px}
.onboard-note{margin-top:22px;color:var(--ice);font-size:14.5px;max-width:48ch}

/* ==========================================================================
   08 closing — the roof lands, the block is seen from the mark's own angle,
   and gives way to the mark
   ========================================================================== */
.closing{position:relative;z-index:1;background:#fff}
.closing-stage{padding:var(--sec) var(--gut);display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.closing-anchor{height:min(46svh,360px)}
.mark{position:absolute;inset:0;margin:auto;height:86%;width:auto;max-height:340px}
.closing-copy{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;justify-items:start}
.closing-copy .tag{margin:0}
.closing-copy h2{font-size:clamp(44px,14vw,132px)}
.closing-copy .btn{width:100%;margin-top:6px}
.js:not(.flat) .closing{height:240vh}
.js:not(.flat) .closing-stage{position:sticky;top:0;height:100svh;grid-template-rows:minmax(0,1fr) auto;padding:calc(var(--nav-h) + var(--safe-t)) var(--gut) calc(22px + var(--safe-b));overflow:hidden}
.js:not(.flat) .closing-stage > :not(.gl){position:relative;z-index:1}
.js:not(.flat) .closing-anchor{height:auto;min-height:0}
.js:not(.flat).gl-live .mark{opacity:0}

/* ---- thumb reach, counter, footer ---- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:170;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:10px var(--gut) calc(10px + var(--safe-b));
  transform:translateY(110%);transition:transform .6s var(--ease)}
.dock-on .dock{transform:none}
.dock .btn{width:100%}
.counter{display:none}
.foot{position:relative;z-index:1;padding:64px var(--gut) calc(28px + var(--safe-b))}
.dock-pad .foot{padding-bottom:calc(96px + var(--safe-b))}
.foot-grid{display:grid;gap:34px}
.foot-k{color:var(--ice);margin-bottom:8px}
.foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:17px}
.foot-dim{color:var(--ice);margin-top:6px}
.foot-clock{color:var(--ice);margin-top:8px} .foot-clock b{color:#fff}
.foot-base{display:flex;flex-direction:column;gap:6px;margin-top:44px;padding-top:20px;border-top:1px solid var(--line-d);color:var(--ice)}

/* ---- reveals: only when scripts run; without them everything is simply there ---- */
.js [data-reveal]{opacity:0;transform:translateY(26px)}
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity var(--d-reveal) ease,transform var(--d-film) var(--ease)}

/* ---- small phones: the first screen still ends in the button ---- */
@media (max-height:700px) and (max-width:767px){
  .hero{grid-template-rows:auto auto minmax(130px,1fr) auto auto;gap:8px}
  .hero .lede{font-size:14.5px;line-height:1.42}
  .callouts{gap:8px} .callouts dd{font-size:13px}
  .sample{display:none}
  .js:not(.flat) .chap > p:not(.chap-n){font-size:14px}
}
@media (max-width:359px){
  .brand{font-size:11.5px;gap:8px}
  .callouts div:nth-child(3){display:none}
}

/* ==========================================================================
   768 — tablet upright. Still a touch layout; the room is used, not filled.
   ========================================================================== */
@media (min-width:768px){
  :root{--gut:40px;--sec:128px;--nav-h:72px;--t-body:17px;--t-lede:20px;--t-mono:11.5px;--t-h2:clamp(52px,7.4vw,76px);--t-h3:24px}
  .brand{font-size:15px} .brand img{width:30px;height:37px}
  .hero{grid-template-rows:auto auto minmax(260px,1fr) auto auto;gap:14px;padding-bottom:36px}
  .hero-zone{grid-template-columns:minmax(0,30fr) minmax(0,70fr)}
  .callouts dd{font-size:19px} .callouts dt{font-size:11px}
  .hero .lede{font-size:20px;max-width:36ch}
  .hero-foot{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 40px}
  .hero-cta{flex-direction:column;align-items:flex-start}
  .hero-cta .btn{flex:none;min-width:300px}
  .sample{position:static;grid-column:1 / -1}
  .copies li{grid-template-columns:minmax(0,3fr) minmax(0,5fr) auto;align-items:baseline;padding:22px 0}
  .copies-who{grid-column:2;font-size:17px}
  .copies b{grid-row:1;grid-column:3;font-size:30px}
  .once{padding:44px var(--gut)}
  .once-line{font-size:20px}
  .js:not(.flat) .story-view{grid-template-columns:minmax(0,70fr) minmax(0,30fr);gap:0}
  .js:not(.flat) .story-view .anchor{margin-left:-12%}
  .js:not(.flat) .plane-view img{height:auto;width:100%;max-width:100%}
  .js:not(.flat) .rig{align-self:center;aspect-ratio:1600 / 1042;max-height:100%}
  .js:not(.flat) .plane{inset:0}
  .js:not(.flat) .chap h3{font-size:clamp(40px,6vw,56px)}
  .js:not(.flat) .chap > p:not(.chap-n){font-size:18px;max-width:48ch}
  .js:not(.flat) .data div:nth-child(n+2){display:flex}
  .js:not(.flat) .data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;border:0}
  .js:not(.flat) .data div{flex-direction:column;border-top:1px solid var(--line-d);border-bottom:0}
  .js:not(.flat) .data dd{text-align:left}
  .desk-list li{font-size:17px} .desk-list b{font-size:21px}
  .frame img{height:clamp(380px,48svh,560px)}
  .cfg-wrap,.js .cfg-wrap{height:auto;min-height:0;grid-template-rows:none}
  .js .cfg-preview{min-height:420px}
  .cfg{padding-inline:var(--gut)}
  .js .steps{overflow:visible}
  .js .step{min-height:330px}
  .toggles{grid-template-columns:repeat(3,1fr)} .tog:last-child{grid-column:auto}
  .suite-stage{grid-template-rows:auto minmax(420px,1fr) auto}
  .gl-live .node b{font-size:11px}
  .cards{grid-template-columns:1fr 1fr;column-gap:40px}
  .onboard-steps{grid-template-columns:1fr 1fr;column-gap:40px}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  .foot-base{flex-direction:row;justify-content:space-between}
  .dock{display:flex;justify-content:center} .dock .btn{max-width:420px}
  .menu-foot .btn,.closing-copy .btn{width:auto;min-width:320px}
  .closing-copy h2 br{display:none}
}

/* ==========================================================================
   1024 — a pointer and a wide screen. The grid goes to twelve columns, the
   nav opens out, the sheet becomes a list beside a pinned preview.
   ========================================================================== */
@media (min-width:1024px){
  :root{--gut:clamp(40px,4.6vw,96px);--sec:clamp(130px,18vh,220px);--nav-h:84px;--t-h2:clamp(54px,5.4vw,104px);--t-lede:clamp(19px,1.5vw,24px)}
  .nav-links{display:flex;gap:clamp(18px,2.4vw,40px);font-size:14px}
  .nav-links a{text-decoration:none;opacity:.72;transition:opacity .25s} .nav-links a:hover{opacity:1}
  .sound{display:block;opacity:.72;min-height:44px} .sound:hover{opacity:1}
  .btn-nav{display:inline-flex;min-height:44px;padding:0 20px;font-size:14px}
  .nav.on-dark .btn-nav{background:#fff;color:var(--navy)}
  .menu-btn,.menu,.dock{display:none}
  .js .pre{--pre-d:1.3s}
  .btn:hover i{transform:translateX(5px)}
  .press:active{transform:scale(.985)}

  .hero{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:24px;row-gap:14px;padding-bottom:clamp(30px,5vh,60px)}
  .hero-meta{grid-column:1 / 8;grid-row:1}
  .roles{overflow:visible;margin:0;padding:0;flex-wrap:wrap}
  .hero .roles{grid-column:1 / 8;grid-row:2}
  /* the zone dissolves: the structure takes the right of the screen, the figures the foot of it */
  .hero-zone{display:contents}
  .hero-zone .anchor{grid-column:7 / 13;grid-row:1 / 4;margin:-2% -5% 0 0;z-index:0;pointer-events:none}
  .callouts{grid-column:9 / 13;grid-row:4;align-self:end;justify-self:end;display:flex;gap:clamp(22px,2.6vw,48px);padding:0 0 30px;text-align:left}
  .callouts dd{font-size:clamp(15px,1.25vw,20px)}
  .hint{right:6%;bottom:6%}
  .hero-h1{grid-column:1 / 9;grid-row:3;align-self:end;font-size:clamp(64px,8.2vw,190px)}
  .hero-foot{grid-column:1 / 9;grid-row:4;grid-template-columns:minmax(0,27rem) auto;align-items:end;column-gap:clamp(20px,2.4vw,48px)}
  .hero-cta{flex-wrap:nowrap}
  .hero-cta{flex-direction:row;align-items:center;gap:30px}
  .hero-cta .btn{min-width:0}
  .sample{grid-column:1 / -1;margin:0}

  .drift{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .drift .tag{grid-column:1 / -1}
  .drift h2{grid-column:1 / 10}
  .drift .lede{grid-column:8 / 13;grid-row:3;margin-top:8px}
  .copies{grid-column:1 / 13;margin-top:clamp(50px,8vh,110px)}
  .copies li{grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);padding:26px 0}
  .copies b{font-size:clamp(30px,3vw,48px);text-align:right}
  .once{grid-column:4 / 13;margin:clamp(40px,7vh,90px) calc(var(--gut) * -1) 0 0;padding:clamp(40px,6vh,70px) var(--gut) clamp(36px,5vh,60px) clamp(36px,4vw,72px);
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:end}
  .once-k{grid-column:1 / -1}
  .once-line{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;gap:30px;font-size:clamp(20px,1.7vw,28px)}
  .once-note{grid-column:1;font-size:var(--t-lede);line-height:1.45}
  .once-sample{grid-column:2;margin:0}

  .js:not(.flat) .story-stage{grid-template-columns:minmax(0,27fr) minmax(0,73fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:clamp(30px,4vw,72px);row-gap:16px;
    padding-top:calc(var(--nav-h) + 10px);padding-bottom:clamp(22px,4vh,44px)}
  .js:not(.flat) .story-head{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;gap:30px}
  .js:not(.flat) .story-head .tag{margin:0}
  .js:not(.flat) .story-nav{overflow:visible;margin:0;padding:0}
  .story-nav button{padding-right:26px} .story-nav li:last-child button{padding-right:0}
  .story-nav li.on button{background-size:calc(100% - 26px) 1px}
  .story-nav li:last-child.on button{background-size:100% 1px}
  .js:not(.flat) .story-view{grid-column:2;grid-row:2;grid-template-columns:minmax(0,80fr) minmax(0,20fr);gap:0;align-items:center}
  /* the structure stands behind the screen's far edge: the screen is nearer, the job is the backdrop */
  .js:not(.flat) .story-view .anchor{align-self:stretch;margin:0 calc(var(--gut) * -.7) 0 -34%}
  .js:not(.flat) .rig{perspective:1900px;perspective-origin:20% 50%}
  .js:not(.flat) .plane-bar{height:30px;font-size:10px} .js:not(.flat) .plane-view{inset:30px 0 0 0}
  .js:not(.flat) .chapters{grid-column:1;grid-row:2;align-self:center}
  .js:not(.flat) .chap h3{font-size:clamp(42px,4.5vw,92px);margin-bottom:18px}
  .js:not(.flat) .chap > p:not(.chap-n){font-size:var(--t-lede);line-height:1.45}
  .js:not(.flat) .chap-n{margin-bottom:18px}
  .js:not(.flat) .data{display:block;margin-top:26px;border-top:1px solid var(--line-d)}
  .js:not(.flat) .data div{flex-direction:row;border-top:0;border-bottom:1px solid var(--line-d);padding:10px 0}
  .js:not(.flat) .data dd{text-align:right}
  .js:not(.flat) .story-foot{grid-column:1 / -1}
  .floor{font-size:10.5px}

  .desk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .desk .tag,.desk h2,.roles-desk{grid-column:1 / -1}
  .roles-desk{margin-top:36px}
  .desk-body{grid-column:1 / -1;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(30px,4vw,72px);align-items:start;margin-top:40px}
  .desk-shot{margin:0 calc(var(--gut) * -1) 0 0}
  .frame{overflow:hidden;padding:0}
  .frame img{height:auto;width:112%;max-width:none}
  .pan-hint{display:none}
  .desk-shot figcaption{padding:14px var(--gut) 0 0}
  .desk-note{grid-column:1 / 6;margin-top:50px}

  .build{padding-bottom:var(--sec)}
  .build-head{padding-bottom:50px}
  .cfg-wrap,.js .cfg-wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(30px,4vw,80px);padding:0 var(--gut);align-items:start}
  .cfg{order:1;margin:0;padding:0;border-radius:0;box-shadow:none;display:block}
  .cfg-top{display:none}
  .js .step,.step{display:block;min-height:0;padding:0 0 38px;animation:none}
  .step legend,.legend{font-size:clamp(22px,1.9vw,30px);margin-bottom:18px}
  .js .cfg-nav{display:none}
  .cfg-preview,.js .cfg-preview{order:2;position:sticky;top:calc(var(--nav-h) + 16px);height:calc(100vh - var(--nav-h) - 40px);min-height:480px;border-radius:20px;padding:26px 30px 30px}
  .cfg-big b{font-size:clamp(60px,6.4vw,120px)}
  .opt:hover,.stepper button:hover{border-color:var(--navy)}
  .tog span{min-height:52px}
  .quote-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
  .quote-cta .btn,.js .quote-cta .btn{width:auto;display:inline-flex}

  .suite-stage{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:24px;min-height:100vh;padding-bottom:var(--sec)}
  .suite-head{grid-column:1 / 7;grid-row:1}
  .suite-anchor{grid-column:7 / 13;grid-row:1 / 3;margin:0 calc(var(--gut) * -.6) 0 0;min-height:520px}
  .suite-copy{grid-column:1 / 5;grid-row:2;align-self:end}
  .gl-live .node{cursor:pointer}

  .trust{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .trust-head{grid-column:1 / 6;align-self:start}
  .cards{grid-column:7 / 13;grid-template-columns:1fr;margin-top:0}
  .card{padding:40px 0 44px}
  .card h3{font-size:clamp(28px,2.6vw,44px)}
  .card p:last-child{font-size:var(--t-lede);line-height:1.45}
  .onboard{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .onboard-k{grid-column:1 / -1}
  .onboard-steps{grid-column:1 / -1;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;border:0}
  .onboard-steps li{padding:22px 0 0;border-bottom:0;border-top:1px solid var(--line-d)}
  .onboard-steps span{position:static;display:block;margin-bottom:38px}
  .onboard-steps b{font-size:clamp(20px,1.7vw,28px);margin-bottom:10px}
  .onboard-note{grid-column:1 / 7;margin-top:44px}

  .js:not(.flat) .closing-stage{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr);column-gap:24px;align-items:end;padding-bottom:clamp(36px,7vh,80px)}
  .js:not(.flat) .closing-anchor{grid-column:6 / 13;grid-row:1;align-self:stretch}
  .closing-copy{grid-column:1 / 8;grid-row:1}
  .closing-copy h2 br{display:inline}
  .closing-copy .btn{min-width:0}
  .mark{max-height:520px}

  .counter{display:block;position:fixed;right:14px;top:50%;z-index:150;writing-mode:vertical-rl;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;transition:color .4s,opacity .4s}
  .counter b{color:var(--ink)} .counter.on-dark{color:var(--ice)} .counter.on-dark b{color:#fff}
  .counter.is-hidden{opacity:0}
  .foot{padding-top:90px}
  .foot a{min-height:34px}
}

/* ==========================================================================
   1440 and 1920 — the same page with more air, and type that keeps its weight
   ========================================================================== */
@media (min-width:1440px){
  .hero-zone .anchor{grid-column:8 / 13}
  .once{grid-column:5 / 13}
  .desk-body{grid-template-columns:minmax(0,3.6fr) minmax(0,8.4fr)}
}
@media (min-width:1920px){
  :root{--t-body:19px;--t-mono:13px}
  .btn{font-size:18px;min-height:60px;padding:0 32px}
  .chip{font-size:16px;min-height:48px;padding:0 20px}
  .nav-links{font-size:16px}
  .opt b{font-size:20px} .opt span{font-size:16.5px}
}

/* a wide but short window (a laptop with the dock up): the pinned stages tighten */
@media (min-width:1024px) and (max-height:760px){
  .js:not(.flat) .chap h3{font-size:clamp(34px,3.4vw,52px);margin-bottom:12px}
  .js:not(.flat) .data{margin-top:14px}
  .hero-h1{font-size:clamp(56px,7vw,120px)}
}

/* ---- "flat": a screen too short to pin a stage (a phone on its side). The story and
   the closing become ordinary sections; nothing is cut off. ---- */
.flat .plane-view img{width:100%;height:auto}
.flat .story-stage{display:grid;grid-template-columns:minmax(0,1fr)}
.flat .closing-anchor{height:150px}
@media (max-height:519px) and (min-width:560px){
  /* a phone on its side: the structure beside the words, not above them */
  .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:20px;min-height:100svh}
  .hero-meta,.hero .roles{grid-column:1 / -1}
  .hero-zone{grid-column:2;grid-row:3 / 5;display:block}
  .hero-zone .anchor{position:absolute;inset:0;margin:0}
  .callouts{display:none}
  .hero-h1{grid-column:1;grid-row:3;align-self:end}
  .hero-foot{grid-column:1;grid-row:4}
  .hero .lede{font-size:14px;line-height:1.4}
  .hero-cta .btn{min-height:46px}
  .sample{display:none}
  .menu nav a{font-size:26px;padding:8px 0}
  .dock{padding-block:6px} .dock .btn{min-height:44px}
}

/* ---- reduced motion: the same page, standing still ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .pre{display:none}
}

@media print{
  .nav,.menu,.pre,.wipe,.cursor,.dock,.counter,.gl{display:none !important}
  .story,.closing{height:auto !important}
  .story-stage,.closing-stage{position:static !important;height:auto !important}
}