/* SevenTrain v3 shared stylesheet. Contract: _spec/v3/COMPONENTS.md, DESIGN-V3.md. Kitchen sink: /_kit.
   Black ground, flat neon, no glow. Instrument Serif display, Inter text, JetBrains Mono for data only.
   Rule kept everywhere: no CSS transition on transform or opacity of anything GSAP animates; hover lifts use `translate`. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}

/* the live token: fixed chrome follows the section on screen (nav CTA, progress hairline, focus ring, selection) */
@property --neon-live{syntax:'<color>';inherits:true;initial-value:#E8C96A}
@property --r{syntax:'<percentage>';inherits:false;initial-value:140%}
@property --k{syntax:'<number>';inherits:false;initial-value:1}

:root{
  --ink:#000;--text:#F2F2F3;--text-2:#C4C5CA;--muted:#8E9097;
  --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.2);
  --neon:#E8C96A;
  /* R50: the quantum ramp is Mats's teal (was violet): q2 = #3fbaa6 (on ink), q3 = #1d897b (fills) */
  --q1:#BFEDE4;--q2:#3FBAA6;--q3:#1D897B;--q4:#145F56;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --container:1160px;--wide:1360px;--gutter:clamp(16px,4vw,56px);
  --space-section:clamp(4rem,2.5rem + 4vw,7.5rem);   /* R34: 64 px phone, 120 px at 1440; statements x1.2 */
  --nav-h:72px;--train-h:clamp(56px,12vh,140px);
  --ease:cubic-bezier(.16,1,.3,1);
  --z-train:5;--z-rail:90;--z-nav:100;--z-bar:95;
  color-scheme:dark;
}
[data-neon="gold"]{--neon:#E8C96A}
[data-neon="cyan"]{--neon:#3DD6F5}
[data-neon="orange"]{--neon:#FF7A45}
/* R50 (Luis, 3 Nov): Quantum is Mats's teal, never violet. #3fbaa6 is the neon on ink (text, lines, buttons: 8.8:1 on
   #000, black on it 8.8:1); #1d897b is the fill (a quantum Flood ground and a door's hover fill: black type on it 4.9:1).
   "violet" stays as an alias of the same teal, so a page not yet renamed can never show violet.
   Fills read var(--neon-fill,var(--neon)); every other neon clears it, so a nested section never inherits teal's fill. */
[data-neon]{--neon-fill:initial}
[data-neon="quantum"],[data-neon="violet"]{--neon:#3FBAA6;--neon-fill:#1D897B}
[data-neon="emerald"]{--neon:#35D17E}
[data-neon="sapphire"]{--neon:#5B8CFF}
/* R44: Decision OS wears Lithium silver as its section neon; flame #FF6B3D lives only inside its figures (figs.css --human) */
[data-neon="lithium"]{--neon:#C5CEDB}
html[data-page-neon="gold"]{--neon-live:#E8C96A}
html[data-page-neon="cyan"]{--neon-live:#3DD6F5}
html[data-page-neon="orange"]{--neon-live:#FF7A45}
html[data-page-neon="quantum"],html[data-page-neon="violet"]{--neon-live:#3FBAA6}
html[data-page-neon="emerald"]{--neon-live:#35D17E}
html[data-page-neon="sapphire"]{--neon-live:#5B8CFF}
html[data-page-neon="lithium"]{--neon-live:#C5CEDB}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--ink);transition:--neon-live .5s linear;scroll-padding-top:calc(var(--nav-h) + 16px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{font-family:var(--sans);font-weight:300;font-size:1rem;line-height:1.65;color:var(--text);background:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,video,svg,canvas{display:block;max-width:100%}
picture{display:contents}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
ul,ol{list-style:none}
strong{font-weight:500;color:var(--text)}
em{font-style:italic}
::selection{background:var(--neon-live);color:#000}
:focus-visible{outline:2px solid var(--neon-live);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:-999px;top:12px;z-index:400;background:var(--neon);color:#000;padding:14px 18px;font:500 .875rem/1 var(--sans)}
.skip:focus{left:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]:not([hidden="until-found"]){display:none!important}

/* ---------- type roles (COMPONENTS 3) ---------- */
h1,h2,h3,.t-0,.a{font-family:var(--serif);font-weight:400;color:#fff}
h1{font-size:clamp(2.75rem,1rem + 4.9vw,5.25rem);line-height:1.02;letter-spacing:-.022em;max-width:20ch}
h2{font-size:clamp(2rem,1.1rem + 3vw,3.5rem);line-height:1.06;letter-spacing:-.02em;max-width:22ch}
h3{font-size:clamp(1.375rem,1.1rem + 1.1vw,1.875rem);line-height:1.18;letter-spacing:-.01em}
:is(h1,h2,h3,.a,.t-0,.lead) em{font-style:italic;color:var(--neon)}
.t-0{font-size:clamp(3.5rem,9vw,9rem);line-height:1;letter-spacing:-.03em;max-width:none}
.q{font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.4;color:var(--text-2);letter-spacing:0;max-width:52ch;font-style:normal}
.a{font-size:clamp(2rem,1.1rem + 3vw,3.5rem);line-height:1.06;letter-spacing:-.02em;max-width:22ch}
.a.a--3{font-size:clamp(1.375rem,1.1rem + 1.1vw,1.875rem);line-height:1.2;letter-spacing:-.01em;max-width:34ch}
.a.a--lead{font-family:var(--sans);font-weight:300;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.6;color:var(--text);letter-spacing:0;max-width:58ch}
.a.t-0{font-size:clamp(3.5rem,9vw,9rem);line-height:1;letter-spacing:-.03em;max-width:16ch}
.qa{display:flex;flex-direction:column;gap:14px}
.lead{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.6;color:var(--text-2);max-width:56ch;text-wrap:pretty}
p{max-width:64ch;text-wrap:pretty}
.label{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--muted);font-weight:400}
.next{font-size:.875rem;line-height:1.5;color:var(--text-2)}
.cap{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted);margin-top:12px}
.addr{font-size:.875rem;color:var(--muted)}
.small{font-size:.875rem;line-height:1.6}
.muted{color:var(--muted)}
.body{color:var(--text-2)}
.body p + p,.drawer-c p + p,.more p + p{margin-top:1em}
.split-line{display:block}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--wide)}
main{position:relative;z-index:2;overflow-x:clip}
.crumb{position:absolute;z-index:6;top:calc(var(--nav-h) + 12px);left:0;right:0;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);font-size:.875rem;color:var(--muted)}
.crumb a{color:var(--text-2);display:inline-flex;align-items:center;min-height:44px}   /* R52: a 44 px target on every device */
.crumb a:hover{color:#fff}
.crumb [aria-current]{color:var(--text-2)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);height:var(--nav-h);display:flex;align-items:center;background:rgba(0,0,0,0);border-bottom:1px solid transparent;transition:background-color .36s linear,border-color .36s linear}
html.scrolled .nav{background:#000;border-bottom-color:var(--line)}
.nav__wrap{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
.nav__logo{display:flex;align-items:center;min-height:44px;flex-shrink:0;margin-right:auto}
.nav__logo img{height:34px;width:auto}
.nav__logo picture,.footer__logo picture{display:flex}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav__links a{position:relative;font-size:.9375rem;font-weight:400;color:var(--text-2);padding:10px 0;white-space:nowrap;transition:color .18s linear}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--neon-live);transform:scaleX(0);transform-origin:left;transition:transform .36s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:#fff}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--neon-live);border-radius:2px;font-size:.9375rem;font-weight:500;color:#fff;white-space:nowrap;transition:background-color .36s linear,color .36s linear,border-color .36s linear}
.nav__cta.is-filled{background:var(--neon-live);color:#000}
.nav__cta:hover{background:#fff;border-color:#fff;color:#000}
.nav__progress{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--neon-live);transform:scaleX(0);transform-origin:left}
.nav__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:7px;margin-right:-10px}
.nav__burger span{display:block;width:22px;height:1.5px;background:#fff}
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;background:#000;color:#fff;padding:calc(var(--nav-h) + 8px) var(--gutter) 40px;overflow:auto}
.menu::backdrop{background:#000}
.menu__x{position:absolute;top:14px;right:var(--gutter);min-height:44px;padding:0 14px;font-size:.9375rem;font-weight:500;border:1px solid var(--line-2);border-radius:2px}
.menu__list{display:flex;flex-direction:column;max-width:560px}
.menu__list a{font-family:var(--serif);font-size:clamp(2rem,7vw,2.75rem);line-height:1.15;color:var(--text-2);padding:10px 0;border-bottom:1px solid var(--line)}
.menu__list a[aria-current="page"],.menu__list a:hover{color:#fff}
.menu .btn{margin-top:28px}

/* ---------- index rail (/quantum only) ---------- */
.index{position:fixed;left:clamp(16px,1.6vw,24px);top:50%;transform:translateY(-50%);z-index:var(--z-rail);display:none;flex-direction:column;gap:2px;width:150px}
.index--hidden,.index--flood{visibility:hidden}
.index a{display:grid;grid-template-columns:2.4ch 1fr;gap:10px;align-items:baseline;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.5);line-height:1.3;padding:6px 0}
.index a .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.index a:hover,.index a.is-active{color:#fff}
.index a.is-active .n{color:var(--neon-live)}
@media(min-width:1360px){.index{display:flex}}

/* ---------- heroes (COMPONENTS 8) ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#000;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 72px) 0 clamp(56px,8vh,96px);--fx:50%;--fy:50%}
.hero__plate{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#000}
.hero__plate img,.hero__plate video,.hero__plate canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__plate,.hero__media,[data-lightup]{-webkit-mask-image:radial-gradient(circle at var(--fx,50%) var(--fy,50%),#000 var(--r),transparent calc(var(--r) + 30%));mask-image:radial-gradient(circle at var(--fx,50%) var(--fy,50%),#000 var(--r),transparent calc(var(--r) + 30%))}
.hero__inner{position:relative;z-index:1;width:100%}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:8px}
.hero .label{display:block;margin-bottom:18px}
.hero__media{position:relative;overflow:hidden;background:#050505;border-radius:2px}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
html.js:not(.hero-ready):not(.js-late) .hero h1{visibility:hidden}
/* R48: scripts arrive after the first paint, so the first frame already shows the entrance's start state (no flash of the
   end state): the plate's light-up mask at 30%, its media at 1.04, the CTA and a figure hero's media hidden. js-late lifts it. */
@media (prefers-reduced-motion: no-preference){
  html.js:not(.hero-ready):not(.js-late) body[data-hero="light"] .hero :is(.hero__plate,.hero__media){--r:30%}
  html.js:not(.hero-ready):not(.js-late) body[data-hero="light"] .hero :is(.hero__plate,.hero__media) :is(img,video){transform:scale(1.04)}
  html.js:not(.hero-ready):not(.js-late) body[data-hero="light"] .hero .cta,
  html.js:not(.hero-ready):not(.js-late) body[data-hero="figure"] .hero .hero__media{visibility:hidden}
}
/* door: Home. Plate untouched, H1 in the sky, doors on the track */
.hero--door{height:100svh;min-height:640px;justify-content:space-between;padding-bottom:0}
.hero--door .hero__plate img{object-position:center bottom}
.hero--door h1{font-size:clamp(2.75rem,min(1rem + 4.9vw,11.4vh),5.25rem);line-height:1.04;max-width:14ch}
.hero--door h1 em{display:block}
.hero__routes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;padding:14px 0 18px}
.hero__routes a{font-size:.9375rem;color:var(--text-2);padding-block:8px}
.hero__routes a:hover{color:#fff}
.hero__routes .next{margin-left:auto}
/* plate: full-bleed video, subject right */
.hero--plate{min-height:100svh;--fx:70%;--fy:45%}
.hero--plate .hero__inner > *{max-width:640px}
/* mirror: picture left in a box capped at 900 px, type right */
.hero--mirror .hero__inner,.hero--type .hero__inner,.hero--fig .hero__inner,.hero--split .hero__inner{display:grid;align-items:center;column-gap:clamp(32px,5vw,80px);row-gap:40px}
.hero--mirror .hero__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.hero--mirror .hero__media{max-width:900px;aspect-ratio:16/9}
.hero--mirror,.hero--type,.hero--fig,.hero--split,.hero--top{padding-bottom:clamp(64px,8vw,120px);justify-content:center;min-height:min(100svh,980px)}
/* top: framed picture at grid width on top, type under it */
.hero--top{justify-content:flex-start}
.hero--top .hero__media{height:min(46svh,52vw);margin-bottom:clamp(32px,4vw,56px)}
/* type: type-led, display date, picture framed at right */
.hero--type .hero__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.hero--type .hero__media{max-width:900px;aspect-ratio:16/9}
/* fund: full-bleed wave loop, fund name above the H1 */
.hero--fund{min-height:100svh;--fx:62%;--fy:50%}
.hero--fund .hero__fund{font-family:var(--serif);font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.2;color:var(--neon);margin-bottom:18px;max-width:36ch}
/* figure: text left, figure or cover right */
.hero--fig .hero__inner{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.hero--fig .hero__media{background:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
/* split: text left, 4:5 photo bleeding right */
.hero--split .hero__inner{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.hero--split .hero__media{aspect-ratio:4/5;margin-right:calc(-1 * var(--gutter) - max(0px,(100vw - var(--container)) / 2))}
/* wide: the H1 runs the full grid width (R28 keeps the type at display-1, so the layout gives it room); copy left, picture right below it */
@media(min-width:901px){
  .hero--wide{justify-content:flex-start;min-height:0;padding-top:calc(var(--nav-h) + 60px)}
  .hero--wide .hero__inner{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0;align-items:start}
  .hero--wide .hero__inner > div:not(.hero__media){display:contents}
  .hero--wide h1{grid-column:1/-1;grid-row:1;max-width:none;margin-bottom:28px}
  .hero--wide .label{grid-column:1/-1;grid-row:1}
  .hero--wide .label + h1{grid-row:2}
  .hero--wide .hero__inner > div > :not(h1):not(.label){grid-column:1;max-width:46ch}
  .hero--wide .hero__inner > div > .cta{max-width:none}
  .hero--wide .hero__media{grid-column:2;grid-row:3 / span 8;margin:0;max-width:none;width:100%;height:auto;aspect-ratio:16/10}
}

/* ---------- sections (COMPONENTS 4) ---------- */
.s{position:relative;background:#000;padding-block:var(--space-section)}
.s .qa,.s > .wrap > h2,.s > .sec > .wrap > h2{margin-bottom:clamp(32px,4vw,56px)}
.s .qa:last-child{margin-bottom:0}
.s h2 + .lead,.s h2 + p,.s .qa + .lead{margin-top:-12px;margin-bottom:28px}
.s .qa > .q + .a{margin:0}   /* the answer keeps the 14px .qa gap; the rule above is for a heading and its sub, not a question and its answer */
.sec{position:relative}
.s__media{position:relative;overflow:hidden;background:#050505}
.s__media img,.s__media video{width:100%;height:100%;object-fit:cover}
/* statement: one sentence, wide margins */
.s--statement{padding-block:calc(var(--space-section) * 1.2)}
.s--statement .a{max-width:20ch}
.s--statement .a.t-0{max-width:15ch}
/* split */
.s--split > .wrap,.s--split > .sec > .wrap{display:grid;align-items:center;column-gap:clamp(40px,6vw,96px);row-gap:40px}
.split--7-5 > .wrap,.split--7-5 > .sec > .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--5-7 > .wrap,.split--5-7 > .sec > .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--4-8 > .wrap,.split--4-8 > .sec > .wrap{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.split--8-4 > .wrap,.split--8-4 > .sec > .wrap{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.split--6-6 > .wrap,.split--6-6 > .sec > .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.s--split .s__media{aspect-ratio:4/5}
.s__media--bleed-l{margin-left:calc(-1 * var(--gutter) - max(0px,(100vw - var(--container)) / 2))}
.s__media--bleed-r{margin-right:calc(-1 * var(--gutter) - max(0px,(100vw - var(--container)) / 2))}
/* figure section: head above, figure to 1360 px, two columns under */
.s--fig .fig{width:100%;max-width:var(--wide);margin-inline:auto}
.s--fig .fig + .cols2,.s--fig .wrap + .wrap{margin-top:clamp(32px,4vw,56px)}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
/* bleed: 0 padding, full-bleed media, optional type */
.s--bleed{padding-block:0}
.s--bleed .s__media{width:100%;aspect-ratio:21/9;min-height:60svh}
.s__type{position:absolute;z-index:3;left:0;right:0;bottom:clamp(32px,6vw,80px)}
.s__type > *{max-width:min(560px,100%)}
.s__type > .wrap{max-width:var(--container)}   /* a wrap inside the type layer keeps the grid edge; the 560 cap is for loose type */
/* strip: 21:9 media capped at 1160 px, type in the left third */
.s--strip{padding-block:0}
.s--strip .s__media{max-width:var(--container);margin-inline:auto;aspect-ratio:21/9}
.s--strip .s__type{left:max(var(--gutter),(100% - var(--container)) / 2 + var(--gutter));right:auto;width:min(33%,420px);bottom:auto;top:50%;transform:translateY(-50%)}
.s--strip .s__type > *{max-width:100%}
/* open columns under one top rule */
.cols-3,.cols-4{display:grid;gap:clamp(24px,3vw,48px);border-top:1px solid var(--line-2);padding-top:clamp(24px,2.4vw,32px)}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.s--cols.cols-3,.s--cols.cols-4{display:block;border:0;padding-top:var(--space-section)}
.col{display:flex;flex-direction:column;gap:10px}
.col h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem)}
.col p{font-size:.9375rem;color:var(--text-2)}
.col[data-neon]{border-top:2px solid var(--neon);padding-top:16px;margin-top:-1px}
/* index rows: key, line, link */
.rows{border-top:1px solid var(--line-2)}
.row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr) auto;gap:clamp(16px,3vw,40px);align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.row__k{font-family:var(--mono);font-size:12px;color:var(--muted)}
.row__l{color:var(--text)}
.row__a{color:var(--neon);font-size:.9375rem;font-weight:500;white-space:nowrap}
button.row,a.row{translate:0 0;transition:translate .36s var(--ease)}
button.row:hover,a.row:hover{translate:6px 0}
/* the page's one bordered table */
.cells{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.cells--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cells--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cells--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cell{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.4vw,32px);background:#000;text-align:left;width:100%}
.cell h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem)}
.cell p{font-size:.9375rem;color:var(--text-2)}
button.cell::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--neon);transform:scaleX(0);transform-origin:left;transition:transform .36s var(--ease)}
button.cell:hover::before,button.cell:focus-visible::before{transform:scaleX(1)}
/* same-size card grids */
.grid-2,.grid-3{display:grid;grid-auto-rows:1fr;gap:clamp(20px,2.4vw,32px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s--grid.grid-2,.s--grid.grid-3{display:block}
.s--plain .grid-3,.s--plain .grid-2{margin-top:clamp(32px,4vw,48px)}
.s--tabs .tabs{margin-top:8px}
/* flood: full viewport, flat neon, #000 type (R2 switch on html[data-floods]) */
/* R32 landing: the content sits low in the panel, so at the page's last scroll position (footer in view) the heading and
   button are still on screen, and a Train or Doors seat never covers them. Nothing follows a Flood but a one-line .endline. */
.s--flood{min-height:100svh;display:flex;align-items:flex-end;background:var(--neon-fill,var(--neon));color:#000;padding-block:calc(var(--nav-h) + clamp(32px,8vh,96px)) clamp(32px,6vh,96px)}
.s--flood > .wrap,.s--flood > .sec > .wrap{width:100%}
/* R34 rhythm at the edges of colour: a neon Flood counts as ink from its top edge, and Home's door hero ends on its doors,
   so the black gap there would be one section padding (half the page's seam). Double it, so every seam reads the same. */
/* a black close (R44 /decision-os) is not ink at its top edge, so it keeps the plain seam */
html:not([data-floods="black"]) .s:has(+ .s--flood:not([data-flood="black"])),html:not([data-floods="black"]) .s:has(+ .seam-doors > .s--flood:not([data-flood="black"])){padding-bottom:calc(var(--space-section) * 2)}
html:not([data-floods="black"]) .s.s--statement:has(+ .s--flood:not([data-flood="black"])),html:not([data-floods="black"]) .s.s--statement:has(+ .seam-doors > .s--flood:not([data-flood="black"])){padding-bottom:calc(var(--space-section) * 2.2)}
.hero--door + .s{padding-top:calc(var(--space-section) * 2)}
.s--flood :is(h2,h3,.a,.a em,h2 em,.q,p,.lead,.next,.addr,.label,.cap,.lnk,.trig){color:#000}
.s--flood .btn{background:#000;color:var(--neon);border-color:#000}
.s--flood .btn:hover{background:#fff;border-color:#fff;color:#000}
.s--flood :focus-visible{outline-color:#000}
.s--flood ::selection{background:#000;color:var(--neon)}
.s--flood .lnk{background-image:linear-gradient(#000,#000),linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35))}
/* black close: R2's one switch (html[data-floods="black"]) or one section (data-flood="black") */
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]){background:#000;color:var(--text)}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) :is(h2,h3,.a){color:#fff}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) :is(h2,h3,.a) em{color:var(--neon)}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) :is(.q,.next,p,.lead,.label,.cap){color:var(--text-2)}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) .addr{color:var(--muted)}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) .btn{background:var(--neon);color:#000;border-color:var(--neon);min-height:76px;padding:0 44px;font-size:1.25rem}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) .btn:hover{background:#fff;border-color:#fff}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) :focus-visible{outline-color:var(--neon)}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) ::selection{background:var(--neon);color:#000}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) :is(.lnk,.trig){color:var(--text);background-image:linear-gradient(var(--neon),var(--neon)),linear-gradient(var(--line-2),var(--line-2))}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) .copy{color:var(--neon)}
/* band: between two neon hairlines, two columns */
.s--band{padding-block:clamp(36px,5vw,64px);border-block:1px solid var(--neon)}
.s--band > .wrap,.s--band > .sec > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
/* legal: nothing moves */
.s--legal{padding-block:clamp(40px,5vw,64px);font-size:.875rem;color:var(--text-2);border-top:1px solid var(--line)}
.s--legal p{font-size:.875rem;max-width:90ch}
.s--legal p + p{margin-top:.8em}
.endline{font-size:.875rem;color:var(--muted);padding-block:20px}
.s--fit{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--nav-h) + 24px) 48px}

/* ---------- cards, doors, people, logos ---------- */
.card{position:relative;display:flex;flex-direction:column;gap:12px;height:100%;width:100%;background:#000;border-top:1px solid var(--line-2);padding-top:20px;text-align:left;translate:0 0;transition:translate .36s var(--ease)}
.card::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--neon);transform:scaleX(0);transform-origin:left;transition:transform .36s var(--ease)}
.card:hover,.card:focus-within{translate:0 -2px}
.card:hover::before,.card:focus-within::before{transform:scaleX(1)}
.card h3{font-size:clamp(1.375rem,1.1rem + .8vw,1.75rem)}
.card p{font-size:.9375rem;color:var(--text-2)}
.card .lnk,.card .trig{margin-top:auto;align-self:flex-start}
/* type roles keep their size inside cards, cells and columns (`.card p` and kin would make a label 15 px) */
:is(.card,.cell,.col) :is(.label,.cap){font-size:12px;color:var(--muted)}
:is(.card,.cell,.col) .next{font-size:.875rem;color:var(--text-2)}
.card__media,.card__type{position:relative;aspect-ratio:16/10;overflow:hidden;background:#050505;margin-bottom:8px}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__type{display:flex;align-items:flex-end;padding:24px;border-top:2px solid var(--neon);background:#000;font-family:var(--serif);font-style:italic;font-size:clamp(2.5rem,2rem + 2vw,4rem);line-height:1;color:var(--neon)}
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.door{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:clamp(92px,12.5vh,128px);height:100%;padding:16px 18px 18px;background:#000;border-top:2px solid var(--neon)}
.door::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--neon-fill,var(--neon));transform:scaleY(0);transform-origin:bottom;transition:transform .36s var(--ease)}
.door__l{font-size:1.0625rem;font-weight:500;line-height:1.3;color:var(--neon)}
.door__t{font-size:.9375rem;line-height:1.45;color:var(--text)}
.door:active::before{transform:scaleY(1)}
.door:active :is(.door__l,.door__t){color:#000}
@media(hover:hover){.door:hover::before{transform:scaleY(1)}.door:hover :is(.door__l,.door__t){color:#000}}
.door :is(.door__l,.door__t){transition:color .36s linear}
.door:focus-visible{outline-color:var(--neon)}
.portrait{display:inline-block;flex:0 0 auto;width:var(--ps,96px);height:var(--ps,96px);overflow:hidden;background:#0a0a0a;border-radius:2px;vertical-align:middle}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait--72{--ps:72px}.portrait--96{--ps:96px}.portrait--120{--ps:120px}.portrait--168{--ps:168px}.portrait--280{--ps:min(280px,100%)}
.mono{display:inline-flex;align-items:center;justify-content:center;background:#8E9097;color:#000;font-family:var(--serif);font-size:calc(var(--ps,96px) * .36);letter-spacing:.02em;line-height:1}
.person{display:flex;gap:16px;align-items:center}
.person__n{font-family:var(--serif);font-size:1.25rem;line-height:1.2;color:#fff}
.person__t{font-size:.875rem;color:var(--text-2)}
/* R31 name row: people with no real photo sit under the portrait grid as names, never as initials tiles.
   One quiet row on the grid's own column rhythm; every cell the same height, the bio trigger a 44 px target. */
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));grid-auto-rows:1fr;column-gap:clamp(20px,2.4vw,32px);margin-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.names:first-child{margin-top:0}
.names > li{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 0 12px;border-bottom:1px solid var(--line);min-width:0}
.names strong{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.25;color:#fff}
.names span{font-size:.875rem;line-height:1.45;color:var(--text-2)}
.names .trig{min-height:44px;margin-top:auto;align-self:flex-start}
.names .trig:only-child{margin-top:0}
.logo{height:24px;width:auto;filter:brightness(0) invert(1)}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(20px,3vw,40px)}

/* ---------- figures (internals: assets/css/figs.css) ---------- */
.fig{position:relative;color:var(--neon)}
.fig svg{display:block;width:100%;height:auto;overflow:visible}
.strike{position:relative;display:inline}
.strike::after{content:'';position:absolute;left:-2%;right:-2%;top:56%;height:2px;background:var(--neon);transform:scaleX(var(--k));transform-origin:left}
/* the term that replaces a struck one: neon at rest (no JS, reduced motion); with motion it waits for the strike (site.js data-struck) */
.term--new{color:var(--neon)}
section[data-strike]:not([data-struck]) .term--new{color:#fff}
/* a figure carried from its card into a drawer (site.js carryFig) */
.fig--carried{display:block;width:100%;max-width:440px;margin:4px 0 28px}
.fig-ph{display:block;flex:0 0 auto}
.bar2{display:grid;grid-template-columns:7fr 3fr;gap:4px;margin-top:24px}
.bar2 > div{display:flex;flex-direction:column;gap:10px}
.bar2 i{display:block;height:20px;background:var(--q1);transform-origin:left}
.bar2 > div + div i{background:var(--q3)}

/* ---------- CTA system (COMPONENTS 10) ---------- */
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:clamp(28px,3vw,40px)}
.cta .next{margin-top:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font-family:var(--sans);font-size:1rem;font-weight:500;line-height:1.1;letter-spacing:0;border-radius:2px;border:1px solid var(--neon);background:var(--neon);color:#000;text-align:center;transition:background-color .18s linear,border-color .18s linear,color .18s linear}
.btn:hover{background:#fff;border-color:#fff;color:#000}
.btn:active{translate:0 1px}
.btn--outline{background:transparent;color:var(--neon)}
.btn--outline:hover{background:var(--neon);border-color:var(--neon);color:#000}
.lnk,.trig,.more__btn{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;font-weight:500;color:var(--text);background-image:linear-gradient(var(--neon),var(--neon)),linear-gradient(var(--line-2),var(--line-2));background-repeat:no-repeat;background-position:0 calc(100% - 10px),0 calc(100% - 10px);background-size:0 1px,100% 1px;transition:background-size .36s var(--ease),color .18s linear}
.lnk:hover,.trig:hover,.more__btn:hover,.lnk:focus-visible,.trig:focus-visible{background-size:100% 1px,100% 1px}
.trig,.more__btn{color:var(--neon)}
.copy{display:inline-flex;align-items:center;min-height:44px;margin-left:10px;padding:0 12px;border:1px solid currentColor;border-radius:2px;font-size:.875rem;font-weight:500;color:var(--neon)}
.s--flood .copy{color:#000}
/* Copy fallback for the nav CTA, phone bar and menu (FIXES #9): a mailto does nothing on a device with no mail app */
.copytip{position:fixed;z-index:calc(var(--z-nav) + 1);right:var(--gutter);top:calc(var(--nav-h) + 12px);width:min(420px,calc(100vw - 2 * var(--gutter)));padding:16px 18px 14px;background:#000;border:1px solid var(--neon-live);border-radius:2px;color:var(--text)}
.copytip[hidden]{display:none}
.copytip__next{font-size:.9375rem;line-height:1.5;color:var(--text);padding-right:64px;max-width:none}
.copytip__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:8px;font-size:.875rem;color:var(--text-2);max-width:none}
.copytip__row .lnk{color:var(--neon-live);background-image:linear-gradient(var(--neon-live),var(--neon-live)),linear-gradient(var(--line-2),var(--line-2))}
.copytip .copy{margin-left:0;color:var(--neon-live)}
.copytip__x{position:absolute;top:8px;right:8px;min-height:44px;padding:0 12px;font-size:.875rem;font-weight:500;color:var(--text-2)}
.copytip__x:hover{color:#fff}
/* phone bar: one full-width button after the hero button leaves */
.bar{display:none}

/* ---------- form (R53): shared by /construction and /enterprise (moved from the page css). Printed on the page ground: black ink on a neon Flood, white on black. No card, no shadow. Errors are words plus a mark. ---------- */
.form-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,104px);align-items:start}
.s .form-split > .qa{margin-bottom:0}   /* the split's own gap spaces it; site.css's heading margin would double it */
.form-split > .qa .next{margin-top:6px;margin-bottom:0;max-width:40ch}
.form-col,.form{--f-ink:var(--text);--f-line:var(--line-2);--f-hi:var(--text);--f-hint:var(--text-2);--f-fill:transparent;--f-auto:#000}
html:not([data-floods="black"]) .s--flood:not([data-flood="black"]) :is(.form-col,.form){--f-ink:#000;--f-line:#000;--f-hi:#000;--f-hint:color-mix(in srgb,#000 82%,var(--neon));--f-fill:color-mix(in srgb,#000 5%,var(--neon));--f-auto:color-mix(in srgb,#000 5%,var(--neon))}
.form{position:relative}
.form__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form__fields{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.form__fields--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.field--full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__l{font-size:.9375rem;font-weight:500;line-height:1.4;color:var(--f-ink)}
.field__o{font-weight:400;color:var(--f-hint)}
.field__h{font-size:.875rem;line-height:1.45;color:var(--f-hint);margin-top:-2px}
.field__i{display:block;width:100%;min-height:52px;padding:13px 14px;font:300 1.0625rem/1.4 var(--sans);color:var(--f-ink);background-color:var(--f-fill);border:1px solid var(--f-line);border-radius:2px;caret-color:var(--f-ink);transition:box-shadow .18s linear}
.field__i:hover{box-shadow:inset 0 0 0 1px var(--f-hi)}
.field__i:focus-visible{outline:2px solid var(--f-hi);outline-offset:2px}
.field__i::placeholder{color:var(--f-hint);opacity:1}
.field__i--area{min-height:128px;resize:vertical}
.field__i--select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--f-ink) 50%),linear-gradient(135deg,var(--f-ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field__i--select option{color:#F2F2F3;background:#000}
.field__i:-webkit-autofill{-webkit-text-fill-color:var(--f-ink);box-shadow:inset 0 0 0 100px var(--f-auto);transition:background-color 9999s linear 0s}
.field__i[aria-invalid="true"]{border-width:2px;padding:12px 13px}
.field__i--select[aria-invalid="true"]{padding-right:43px}
.field__e{display:flex;gap:8px;align-items:baseline;font-size:.875rem;font-weight:500;line-height:1.45;color:var(--f-ink)}
.field__e::before{content:'';flex:0 0 10px;height:9px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
.form__go{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:22px}
.form__go .btn{min-width:min(100%,240px)}
.form__go .btn[aria-disabled="true"]{cursor:progress}
.form__note{max-width:52ch}
.form__note .lnk,.form__status .lnk{display:inline;min-height:0;padding-block:12px;background-origin:content-box;background-clip:content-box;background-position:0 100%,0 100%}
.form__status{font-size:.875rem;font-weight:500;line-height:1.5;color:var(--f-ink);max-width:52ch}
.form__status:empty{display:none}
.form__done{padding-top:20px;border-top:2px solid var(--f-ink)}
.form__done h3{color:var(--f-ink)}
.form__done .next{margin-top:8px;color:var(--f-ink)}
.form__done:focus{outline:none}
.form__done:focus-visible{outline:2px solid var(--f-hi);outline-offset:6px}
.form__alt{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;margin-top:clamp(24px,3vw,32px);padding-top:14px;border-top:1px solid var(--f-line)}
.form__alt .next{flex-basis:100%}
.form__alt .lnk{color:var(--f-ink)}
@media(max-width:900px){
  .form-split{grid-template-columns:minmax(0,1fr);row-gap:clamp(32px,6vw,44px)}
}
@media(max-width:700px){
  .field__i{min-height:56px}
  .form__go .btn{width:100%}
}
@media(max-width:560px){
  .form__fields--2{grid-template-columns:minmax(0,1fr)}
}
/* ---------- click to view (COMPONENTS 6) ---------- */
/* hidden="until-found" keeps the box (content-visibility only skips the contents): no paint, no size while closed */
.drawer-c[hidden],.more[hidden],[role="tabpanel"][hidden],.stepper__panels > [hidden],.flip__back[hidden]{margin:0;padding:0;border:0;background:none;min-height:0!important}
.drawer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--text);overflow:hidden}
.drawer[open]{display:flex;justify-content:flex-end;align-items:stretch}
.drawer::backdrop{background:rgba(0,0,0,.78)}
.drawer__panel{position:relative;display:flex;flex-direction:column;width:min(640px,90vw);height:100%;background:#000;border-left:1px solid var(--line-2);padding-top:54px;transform-origin:0 0}
.drawer__x{position:absolute;top:12px;right:16px;z-index:3;min-height:44px;padding:0 16px;font-size:.9375rem;font-weight:500;color:var(--text);border:1px solid var(--line-2);border-radius:2px}
.drawer__x:hover{border-color:var(--neon-live)}
.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px clamp(24px,4vw,48px) 48px}   /* 10px: the heading's focus ring (2px + 6px offset) is never clipped */
.drawer__body > .drawer-c{display:block}
.drawer .drawer-c > h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);margin-bottom:18px;outline-offset:6px}
.drawer .drawer-c > h2:focus{outline:none}
.drawer .drawer-c > h2:focus-visible{outline:2px solid var(--neon-live)}
.drawer .drawer-c p{color:var(--text-2)}
.drawer .drawer-c h3{font-size:1.375rem;margin:28px 0 10px}
.drawer__pin{position:sticky;top:0;z-index:2;background:#000;padding:12px 0;border-bottom:1px solid var(--line);font-size:.875rem;color:var(--text-2);margin-bottom:20px}
.drawer__foot{position:sticky;bottom:-48px;z-index:2;background:#000;padding:16px 0 48px;margin-top:28px;border-top:1px solid var(--line);font-size:.875rem;color:var(--text-2)}
.is-target{box-shadow:inset 0 2px 0 var(--neon)}
.routes{display:flex;flex-direction:column;margin-top:24px;border-top:1px solid var(--line)}
.route{padding:20px 0 16px;border-bottom:1px solid var(--line)}
.route__l{font-family:var(--sans)!important;font-size:1rem!important;font-weight:500;color:var(--neon);margin:0 0 6px!important}
.route .cta{margin-top:6px;gap:4px}
.drawer-c .route .next{color:var(--text-2)}
/* tabs */
.tabs{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-bottom:1px solid var(--line-2)}
.tabs [role="tab"]{position:relative;min-height:52px;padding:0 24px;font-size:1rem;font-weight:500;color:var(--text-2);text-align:center;transition:color .18s linear}
.tabs [role="tab"][aria-selected="true"]{color:#fff}
.tabs [role="tab"]:hover{color:#fff}
.tabs__ul{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--neon);pointer-events:none}
/* tabs on a Flood: black ink, solid mixes only (no alpha text on a Flood); the black close keeps the neon underline */
.s--flood .tabs{border-bottom-color:color-mix(in srgb,#000 35%,var(--neon))}
.s--flood .tabs [role="tab"]{color:color-mix(in srgb,#000 72%,var(--neon))}
.s--flood .tabs [role="tab"]:is([aria-selected="true"],:hover){color:#000}
.s--flood .tabs__ul{background:#000}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) .tabs{border-bottom-color:var(--line-2)}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) .tabs [role="tab"]{color:var(--text-2)}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) .tabs [role="tab"]:is([aria-selected="true"],:hover){color:#fff}
:is(html[data-floods="black"] .s--flood,.s--flood[data-flood="black"]) .tabs__ul{background:var(--neon)}
[role="tabpanel"]{padding-top:clamp(28px,3vw,40px)}
[role="tabpanel"]:focus-visible{outline-offset:8px}
/* flip card: flat, the back wipes up, card size never changes */
.flip{position:relative;display:flex;flex-direction:column;width:100%;height:100%;text-align:left;background:#000;border-top:1px solid var(--line-2);padding:0;overflow:hidden}
.flip__front{display:flex;flex-direction:column;gap:10px;padding:20px 0 16px;height:100%}
.flip__back{position:absolute;inset:0;display:block;z-index:2;background:#000;border-top:2px solid var(--neon);padding:20px 0 0;font-size:.9375rem;line-height:1.55;color:var(--text);overflow:auto;clip-path:inset(0)}
.flip[aria-expanded="true"]{border-top-color:transparent}
.flip .trig{min-height:32px;margin-top:auto;align-self:flex-start;pointer-events:none}
.flip__links{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:8px}
.flip__trig{margin-top:10px}
/* hover or tap tip (WCAG 1.4.13) */
.tip{position:absolute;width:44px;height:44px;translate:-50% -50%;border-radius:50%;z-index:3}
.tip::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:1.5px solid var(--neon);background:#000}
.tip[aria-expanded="true"]::after{background:var(--neon)}
.tip__c{position:absolute;z-index:6;padding:8px 12px;background:#000;border:1px solid var(--neon);border-radius:2px;font-size:.875rem;font-weight:500;color:#fff;white-space:nowrap;translate:-50% calc(-100% - 10px);opacity:0;transition:opacity .18s linear,translate .18s var(--ease)}
.tip__c.is-open{opacity:1;translate:-50% calc(-100% - 22px)}
/* stepper */
.stepper{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--line-2)}
.stepper button{position:relative;width:100%;min-height:52px;padding:14px 12px 10px 0;font-size:1rem;font-weight:500;color:var(--muted);text-align:left;transition:color .18s linear}
.stepper button::before{content:'';position:absolute;left:0;right:12px;top:-1px;height:2px;background:var(--neon);transform:scaleX(0);transform-origin:left;transition:transform .36s var(--ease)}
.stepper button:hover{color:var(--text)}
.stepper button[aria-current="step"]{color:#fff}
.stepper button[aria-current="step"]::before{transform:scaleX(1)}
.stepper__panels{position:relative;margin-top:24px}
.stepper__panels > div{max-width:64ch;color:var(--text-2)}
.stepper__panels > div > :first-child{color:var(--text)}
/* read on */
.more{overflow:hidden}
.more > :first-child{padding-top:12px}
.more__btn{margin-top:8px}

/* ---------- transitions (COMPONENTS 5): builders set data-seam; site.js injects the markup ---------- */
.seam{position:absolute;z-index:4;top:0;--seam-x:max(var(--gutter),calc((100% - var(--container)) / 2 + var(--gutter)));left:var(--seam-x);right:var(--seam-x);height:1px;pointer-events:none}   /* R33: drawn inside the content grid */
.seam::before{content:'';position:absolute;inset:0;background:var(--neon);transform:scaleX(var(--k));transform-origin:left}
.seam i{position:absolute;top:-2px;left:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--neon)}
/* Train: overlay centred on the seam boundary, never takes layout space. Flat neon hairlines, no glow, no alpha. */
/* Train height is the spec's --train-h, clamp(56px,12vh,140px): 108 px at 1440 x 900 (it measured 41 px before). */
.train{--car-h:var(--train-h);--car-w:calc(var(--car-h) * 3.1);position:absolute;z-index:var(--z-train);left:0;top:0;height:var(--car-h);translate:0 -50%;display:flex;align-items:center;pointer-events:none;will-change:transform}
.train::after{content:'';position:absolute;left:-30vw;right:-30vw;bottom:calc(var(--car-h) * -.09);height:1.5px;background:var(--neon)}
.train i{position:relative;flex:0 0 auto;box-sizing:border-box;width:var(--car-w);height:100%;border:1.5px solid var(--neon);border-radius:calc(var(--car-h) * .22) calc(var(--car-h) * .22) 4px 4px;background:#000;display:flex;align-items:center;justify-content:space-evenly;padding:0 calc(var(--car-h) * .26)}
.train b{flex:0 0 auto;width:calc(var(--car-h) * .3);height:30%;margin-top:-6%;background:var(--neon);border-radius:1px}
.train u{flex:0 0 auto;width:calc(var(--car-h) * .22);height:1.5px;background:var(--neon)}
.train i:last-of-type::after{content:'';position:absolute;right:calc(var(--car-h) * -.02);top:50%;width:6px;height:6px;margin:-3px -3px 0 0;border-radius:50%;background:var(--neon)}
@media(max-width:700px){.train{--car-w:calc(var(--car-h) * 2.4)}.train u:last-of-type,.train i:nth-of-type(3){display:none}.train i:nth-of-type(2)::after{content:'';position:absolute;right:-2px;top:50%;width:6px;height:6px;margin:-3px -3px 0 0;border-radius:50%;background:var(--neon)}.train i b:nth-child(n+5){display:none}}
/* Doors (R32): two black panels with an 8 px neon slit (4 px lit edge each) part while the section rises from top 85% to
   top top; then the section holds (pin +=40%). Desktop: the arriving panel is a full viewport, so no black sits under a pin. */
.seam-doors{position:relative;overflow-x:clip}
.seam-doors > i{position:absolute;top:0;bottom:0;z-index:7;width:calc(50% + .5px);background:#000;pointer-events:none;box-sizing:border-box}
.seam-doors > i:first-of-type{left:0;border-right:4px solid var(--neon)}
.seam-doors > i:last-of-type{right:0;border-left:4px solid var(--neon)}
@media(min-width:701px){
  .seam-doors > section{min-height:100svh}
  .seam-doors > .s--strip,.seam-doors > .s--bleed{display:flex;flex-direction:column;justify-content:center}
  .seam-doors > .s--bleed > .s__media{flex:1 0 auto}
}
.slant-to{z-index:3;clip-path:polygon(0 var(--edge,0%),100% 0,100% 100%,0 100%);background-color:rgb(0 0 0 / var(--land,1))}
.slant-to::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--edge,0%);z-index:7;pointer-events:none;background:linear-gradient(to bottom right,transparent calc(50% - 1px),var(--neon) calc(50% - 1px),var(--neon) calc(50% + 3px),transparent calc(50% + 3px))}
.slant-from{z-index:2}
.slant-from::after{content:'';position:absolute;inset:0;z-index:6;background:#000;opacity:var(--cover,0);pointer-events:none}
.pin-spacer{position:relative}
.carry-proxy{position:absolute;left:0;top:0;z-index:8;pointer-events:none;transform-origin:0 0;will-change:transform}
.carry-land{display:block;width:56px;height:4px;margin-bottom:14px;visibility:hidden}

/* ---------- media ---------- */
.loop__poster{width:100%;height:100%;object-fit:cover}
video[data-loop]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s linear}
video[data-loop].is-ready{opacity:1}
.ink{isolation:isolate}
.ink::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background-repeat:repeat;background-size:256px 256px;mix-blend-mode:overlay;opacity:.5}
/* R48: the 52 KB grain tile waits for the first paint (html.painted, set by the script loader), so it never competes with a hero plate */
html:is(.painted,:not(.js)) .ink::after{background-image:url('grain-256.png')}
[data-parallax]{position:relative;overflow:hidden}
[data-parallax] > img,[data-parallax] > video,[data-parallax] > .loop__poster{height:112%;max-width:none;width:100%;object-fit:cover}

/* ---------- booking dialog ---------- */
.cal-dlg{width:min(980px,calc(100vw - 24px));height:min(860px,calc(100dvh - 24px));max-width:none;max-height:none;margin:auto;padding:0;border:1px solid var(--line-2);border-radius:2px;background:#fff;color:#111;overflow:hidden}
.cal-dlg::backdrop{background:rgba(0,0,0,.8)}
.cal-dlg[open]{display:flex;flex-direction:column}
.cal-top{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;padding:8px 12px 8px 20px;background:#000;color:var(--text)}
.cal-note{flex:1 0 100%;max-width:none;margin:0;padding-bottom:4px;color:var(--text-2)}
.cal-note .lnk{min-height:32px;font-size:inherit}
.cal-top h2{flex:1;font-size:1.375rem;max-width:none}
.cal-x{min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:2px;font-size:.9375rem;font-weight:500;color:var(--text)}
.cal-dlg iframe{flex:1;width:100%;border:0;background:#fff}

/* ---------- footer ---------- */
/* Short on purpose (R32): at the last scroll position a Flood's heading and button must still fit above it. */
.footer{position:relative;z-index:2;background:#000;border-top:1px solid var(--line);padding:clamp(36px,3.6vw,56px) 0 28px}
.footer__grid{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"logo cols" "legal cols";column-gap:clamp(40px,6vw,96px);align-items:start}
.footer__logo{grid-area:logo}
.footer__logo{display:inline-flex;min-height:44px;justify-self:start}
.footer__logo img{height:46px;width:auto}
.footer__cols{grid-area:cols;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.footer__col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.footer__h{font-size:.875rem;font-weight:500;color:#fff;margin-bottom:6px}
.footer__col a{font-size:.9375rem;line-height:1.4;color:var(--text-2);padding:5px 0;transition:color .18s linear}
.footer__col a:hover{color:#fff}
.footer__legal{grid-area:legal;align-self:end;display:flex;flex-direction:column;gap:6px;max-width:300px;padding-top:24px;font-size:.875rem;line-height:1.5;color:var(--muted)}
/* legal/INTEGRATION.md section 1: Privacy and Terms on every page, read as links, 44 px on touch */
.footer__legal a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2);transition:color .18s linear}
.footer__legal a:hover{color:#fff}
@media(hover:none){.footer__legal a{display:inline-flex;align-items:center;min-height:44px}}

/* ---------- page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
::view-transition-group(door){animation-duration:.42s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.vt-door{position:fixed;inset:0;z-index:1000;view-transition-name:door;pointer-events:none;transition:opacity .36s linear}
.vt-door.is-out{opacity:0}

/* ---------- logo intro (assets/js/intro.js, ?intro=1 only) ---------- */
.intro{position:fixed;inset:0;z-index:300;background:#000;display:flex;align-items:center;justify-content:center;clip-path:circle(150vmax at 50% 50%)}
.intro__logo{display:flex;align-items:center;gap:clamp(14px,2vw,28px);width:min(72vw,760px);will-change:transform}
.intro__mark{width:26%;flex:0 0 26%;height:auto;overflow:visible}
.intro__word{width:74%;height:auto;flex:0 0 74%}
.intro svg .i-rail,.intro svg .i-track{stroke:rgba(232,201,106,.55);stroke-width:1.2}
.intro svg .i-arc{fill:none;stroke:#fff;stroke-width:9}
.intro svg .i-ringSolid{fill:none;stroke:#fff;stroke-width:9}
.intro svg .i-bar,.intro svg .i-stem{fill:#fff}
.intro svg .i-bead{fill:#E8C96A}
.intro svg .i-streak{fill:#E8C96A;opacity:.7}
.intro svg .i-light{fill:#fff}
.intro svg .i-echo{fill:none;stroke:rgba(232,201,106,.8);stroke-width:1.2}
html.intro-on .nav__logo{visibility:hidden}
html.intro-on .hero__inner{visibility:hidden}
.intro--record{clip-path:none;background:#000}
.intro--record .intro__logo{width:min(60vw,900px)}

/* ---------- responsive ---------- */
@media(hover:none){.footer__col a,.crumb a{min-height:44px;display:inline-flex;align-items:center}}
@media(max-width:1180px){   /* six links (R38) plus the longest CTA a section can swap in (R37) fit from 1181 px */
  .nav__links{display:none}
  .nav__burger{display:flex}
  .index{display:none!important}
}
@media(max-width:900px){
  .s--split > .wrap,.s--split > .sec > .wrap,.hero--mirror .hero__inner,.hero--type .hero__inner,.hero--fig .hero__inner,.hero--split .hero__inner{grid-template-columns:minmax(0,1fr)!important}
  .s__media--bleed-l,.s__media--bleed-r,.hero--split .hero__media{margin-inline:calc(-1 * var(--gutter))}
  .cols-4,.cells--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols-3,.grid-3,.cells--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"logo" "cols" "legal"}
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px}
  .footer__legal{max-width:none;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
  .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s--band > .wrap,.s--band > .sec > .wrap{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  :root{--nav-h:64px}
  html{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .nav__cta{display:none}
  .nav__logo img{height:28px}
  h1{font-size:clamp(2.25rem,9.6vw,2.75rem)}
  .hero{padding-top:calc(var(--nav-h) + 56px)}
  .hero--door h1{font-size:clamp(2.25rem,9.6vw,2.625rem)}
  .hero--door{height:auto;min-height:100svh}
  .doors,.grid-2,.grid-3,.cols-3,.cols-4,.cols2,.cells--2,.cells--3,.cells--4{grid-template-columns:minmax(0,1fr)}
  .footer{padding-bottom:calc(72px + env(safe-area-inset-bottom))}   /* FIXES #28: the sticky bar never covers the last line */
  /* phones: no pin, and the footer is taller than a screen, so the low landing buys nothing; the Flood centres its content
     so no full screen of empty neon scrolls by before the heading */
  .s--flood{align-items:center;padding-block:calc(var(--nav-h) + 32px) 56px}
  .footer__cols{gap:20px 16px}
  .copytip{top:auto;bottom:calc(80px + env(safe-area-inset-bottom));right:var(--gutter)}
  .doors{grid-auto-rows:1fr}
  .grid-2,.grid-3{grid-auto-rows:auto}
  .row{grid-template-columns:minmax(0,1fr);gap:6px}
  .tabs{display:grid;width:100%}
  .tabs [role="tab"]{padding:0 8px}
  .stepper{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .stepper button{font-size:.9375rem}
  .s--bleed .s__media{aspect-ratio:4/5;min-height:0}
  .s--strip .s__media{aspect-ratio:4/5}
  .s--strip .s__type{position:relative;top:auto;transform:none;left:auto;width:auto;padding:28px var(--gutter) 0}
  .drawer[open]{align-items:flex-end}
  .drawer__panel{width:100%;height:auto;max-height:88svh;border-left:0;border-top:1px solid var(--line-2);border-radius:2px 2px 0 0}
  .bar{display:block;position:fixed;z-index:var(--z-bar);left:0;right:0;bottom:0;padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));background:#000;border-top:1px solid var(--line);translate:0 110%;visibility:hidden;transition:translate .36s var(--ease),visibility 0s linear .36s}
  .bar[data-on="true"]{translate:0 0;visibility:visible;transition:translate .36s var(--ease),visibility 0s}
  .bar .btn{width:100%;min-height:56px}
  .btn{min-height:56px}
  .intro__logo{width:84vw}
  .copy{margin:6px 0 0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  video[data-loop]{display:none}
  @view-transition{navigation:none}
}

/* R32 landing on short desktop screens (1280x720, 1366x768): the Flood's own spacing and the footer tighten, so the question,
   answer and button share the last screen under the nav. Type sizes stay R28's; footer links keep a 24 px target. */
@media (min-width:701px) and (max-height:820px){
  .s--flood{padding-bottom:20px}
  .s--flood .cta{margin-top:20px;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 24px;align-items:center;justify-items:start}
  .s--flood .cta > .btn{grid-row:span 4}   /* the next step, address and All routes sit beside the button */
  .s--flood .cta > :not(.btn){grid-column:2}
  .s--flood .a{max-width:30ch}
  .footer{padding-top:24px;padding-bottom:16px}
  .footer__col a{padding:2px 0}
  .footer__legal{padding-top:12px}
}