/* ==========================================================================
   SPR SIP Systems: site.css
   Direction: drawing-sheet precision. Charcoal + off-white surfaces, gold as
   the single accent, hairline rules, mono annotations, panel-tag motif.
   Brand: Brand Identity Guidelines v1 (colour p.02, web p.05).
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------ */
:root {
  /* Brand palette */
  --charcoal: #1F2428;
  --charcoal-900: #171B1E;
  --charcoal-700: #262C31;
  --charcoal-600: #2E353B;
  --gold: #CF9941;
  --gold-600: #B8862F;
  --gold-300: #E3BC7A;
  --white: #FFFFFF;
  --grey: #E5E7EB;
  --slate: #374151;
  --steel: #6B7280;
  --sand: #D6C9B8;
  --sand-100: #EDE6DB;
  --offwhite: #F9F7F3;
  --error: #B3341F;

  /* Semantic: light surface is the default */
  --bg: var(--offwhite);
  --bg-elev: var(--white);
  --bg-sunk: var(--sand-100);
  --fg: var(--charcoal);
  --fg-muted: #545B65;
  --fg-faint: #5C646E;
  --line: rgba(31, 36, 40, .14);
  --field-line: rgba(31, 36, 40, .45);
  --line-soft: rgba(31, 36, 40, .08);
  --line-strong: var(--charcoal);
  --accent: var(--gold);
  --accent-hover: var(--gold-600);
  --on-accent: var(--charcoal);
  /* Gold is 2.4:1 on off-white, so small gold TEXT uses a deeper bronze that
     passes WCAG AA. Fills, rules, icons and the 3D keep the brand gold. */
  --accent-text: #8A5F1F;
  /* Large gold text (24px+) only needs 3:1, so it can stay closer to the brand gold. */
  --accent-display: #A4752A;
  --grid-line: rgba(31, 36, 40, .06);

  /* Type. Monument Extended is the licensed brand face; Archivo Expanded is
     the open substitute with matching width. Swap --font-display when licensed. */
  --font-display: 'Archivo', 'Monument Extended', 'Arial Black', Impact, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-display: clamp(2.25rem, 1rem + 5vw, 5.5rem);
  --fs-h1: clamp(2.5rem, 1.4rem + 3.8vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 1.1rem + 2.9vw, 3.5rem);
  --fs-h3: clamp(1.375rem, 1.05rem + 1.2vw, 2rem);
  --fs-h4: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, .95rem + .45vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-label: .75rem;
  --fs-mono: .6875rem;

  --lh-body: 1.65;
  --track-label: .14em;

  /* Layout */
  --gutter: clamp(20px, 5.5vw, 80px);
  --maxw: 1440px;
  --measure: 60ch;
  --section-y: clamp(96px, 11vw, 168px);
  --block-y: clamp(48px, 6vw, 96px);
  --header-h: 88px;
  --header-h-tall: 104px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: .9s;
  --dur-fast: .25s;
}

/* Dark surface variant: any section or wrapper can carry .dark */
.dark {
  --bg: var(--charcoal);
  --bg-elev: var(--charcoal-700);
  --bg-sunk: var(--charcoal-900);
  --fg: var(--white);
  --fg-muted: #A3AAB3;
  --fg-faint: #8E97A1;
  --line: rgba(255, 255, 255, .14);
  --field-line: rgba(255, 255, 255, .42);
  --line-soft: rgba(255, 255, 255, .08);
  --line-strong: var(--white);
  --on-accent: var(--charcoal);
  --accent-text: var(--gold);
  --accent-display: var(--gold);
  --grid-line: rgba(255, 255, 255, .05);
  color-scheme: dark;
}
.sand { --bg: var(--sand-100); --bg-elev: var(--white); --bg-sunk: var(--sand); }
.white { --bg: var(--white); --bg-elev: var(--white); --bg-sunk: var(--offwhite); }

/* ---------- Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Smooth wheel scrolling (Lenis, js/site.js): its required base rules */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--charcoal); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px;
  background: var(--gold); color: var(--charcoal); font-weight: 600;
  transform: translateY(-200%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* ---------- Typography -------------------------------------------------- */
.display, .h1, .h2, .h3, .h4,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .95;
  text-wrap: balance;
  color: var(--fg);
}
/* The long single words ("DIFFERENTLY.", "PERFORMANCE.") must fit a 320px phone
   column (100vw less two 20px gutters): about 9 and 10.5 font-sizes wide. */
.display, h1.display { font-size: min(var(--fs-display), calc((100vw - 40px) / 9)); line-height: .92; font-weight: 800; }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: min(var(--fs-h2), calc((100vw - 40px) / 11)); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.08; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.15; }
.h-accent { color: var(--accent-display); }

.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: var(--measure); text-wrap: pretty; }
p { max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: 1em; }
.muted { color: var(--fg-muted); }
.small { font-size: var(--fs-small); }

.label, .eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow { color: var(--accent-text); }
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .04em;
  line-height: 1.5;
}
.mono.muted { color: var(--fg-faint); }

/* Text link with sliding underline */
.link {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label);
  text-transform: uppercase; padding-bottom: 6px; position: relative; color: var(--fg);
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform-origin: left; transition: transform .35s var(--ease-out);
}
.link:hover { color: var(--accent-text); }
.link:hover::after { transform: scaleX(.6); }
.link .arrow { transition: transform .35s var(--ease-out); }
.link:hover .arrow { transform: translateX(4px); }

/* ---------- Layout ------------------------------------------------------ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 1120px; }
.section { position: relative; background: var(--bg); color: var(--fg); padding-block: var(--section-y); }
.section--tight { padding-block: var(--block-y); }
.section--flush-top { padding-top: 0; }
.section-inner { position: relative; z-index: 2; }

/* Drawing-sheet grid, painted on the section (below the shared GL canvas) */
.sheet {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  background-position: center top;
}
.sheet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, transparent 40%, var(--bg) 100%);
  opacity: .9;
}

.grid { display: grid; gap: clamp(24px, 3vw, 48px); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5-7 { grid-template-columns: 5fr 7fr; }
.grid--7-5 { grid-template-columns: 7fr 5fr; }
.grid--4-8 { grid-template-columns: 4fr 8fr; }
@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4, .grid--5-7, .grid--7-5, .grid--4-8 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .grid--4 { grid-template-columns: 1fr; } }

.stack { display: flex; flex-direction: column; gap: var(--stack, 24px); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, 16px); align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Section head: numeral, rule, heading */
.sec-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-num {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; color: var(--accent-text);
}
.sec-num .rule {
  display: block; width: 40px; height: 1px; background: var(--gold);
  transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease-out) .15s;
}
.is-in .sec-num .rule, .sec-num.is-in .rule { transform: scaleX(1); }
.sec-head .lead { margin-top: 8px; }

hr, .hr { border: 0; height: 1px; background: var(--line); margin: 0; }

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  --btn-bg: var(--gold); --btn-fg: var(--charcoal); --btn-line: var(--gold);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  min-height: 52px; padding: 0 28px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-600);
  transform: translateY(101%); transition: transform .4s var(--ease-out);
}
.btn:hover::before { transform: none; }
.btn .arrow { display: inline-block; transition: transform .35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--gold); font-weight: 500; }
.btn--ghost::before { background: var(--gold); }
.btn--ghost:hover { color: var(--charcoal); }
.btn--dark { --btn-bg: var(--charcoal); --btn-fg: #fff; --btn-line: var(--charcoal); }
.btn--dark::before { background: var(--gold); }
.btn--dark:hover { color: var(--charcoal); }
.btn--lg { min-height: 60px; padding: 0 36px; }
.btn--sm { min-height: 44px; padding: 0 20px; }
.btn--block { display: flex; width: 100%; }

/* ---------- Header ------------------------------------------------------ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h-tall);
  display: flex; align-items: center;
  background: transparent; color: #fff;
  transition: height .35s var(--ease-out), background .35s, box-shadow .35s, transform .4s var(--ease-out);
}
.site-header::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px;
  background: rgba(255,255,255,.12); opacity: 0; transition: opacity .35s;
}
.site-header.is-solid { height: var(--header-h); background: var(--charcoal); }
.site-header.is-solid::after { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transform: translateY(18px);
  transition: transform .35s var(--ease-out);
}
.site-header.is-solid .container { transform: none; }
.brand { display: flex; align-items: center; flex: none; }
/* The wordmark is about 2.5:1, so it is sized by height */
.brand img { height: 56px; width: auto; transition: height .35s var(--ease-out); }
.is-solid .brand img { height: 44px; }
@media (max-width: 900px) {
  :root { --header-h: 88px; --header-h-tall: 88px; }
  .site-header, .site-header.is-solid { height: var(--header-h); }
  .site-header .container { transform: translateY(8px); }
  .site-header.is-solid .container { transform: none; }
  .brand img { height: 46px; }
  .is-solid .brand img { height: 40px; }
}

.nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav a {
  position: relative; padding: 6px 0; color: #fff;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav a.is-active::after { transform: scaleX(1); }
.nav .btn { min-height: 44px; padding: 0 20px; margin-left: 8px; }
.nav .btn::after { display: none; }
.site-header .nav .btn--ghost { color: #fff; }
.site-header .nav .btn--ghost:hover { color: var(--charcoal); }

.menu-btn {
  display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; color: #fff;
}
.menu-btn span {
  position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor;
  transition: transform .35s var(--ease-out), opacity .2s;
}
.menu-btn span:nth-child(1) { top: 16px; }
.menu-btn span:nth-child(2) { top: 22px; }
.menu-btn span:nth-child(3) { top: 28px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 49; background: var(--charcoal); color: #fff;
  display: flex; flex-direction: column; padding: 96px var(--gutter) 32px;
  transform: translateY(-4%); opacity: 0; visibility: hidden;
  transition: opacity .35s, transform .45s var(--ease-out), visibility 0s .45s;
}
.mobile-menu.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: center; }
.mobile-menu nav a {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 8vw, 40px); line-height: 1.1; letter-spacing: -.015em; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--ease-out);
}
.mobile-menu.is-open nav a { opacity: 1; transform: none; transition-delay: calc(.08s + var(--i, 0) * .05s); }
.mobile-menu nav a:hover { color: var(--gold); }
.mobile-menu .mm-foot { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
/* Eight links need the room: below 1180px the menu button takes over */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: block; }
}
body.menu-open { overflow: hidden; }

/* ---------- Hero -------------------------------------------------------- */
.hero {
  position: relative; background-color: var(--charcoal); color: #fff;
  min-height: 100svh; display: grid; align-items: center;
  padding-top: var(--header-h-tall);
  padding-bottom: var(--header-h-tall);
}
.hero .section-inner { display: grid; gap: 32px; }
.hero-copy { max-width: 760px; }
.hero-copy .display { margin-bottom: 24px; }
.hero-accent { color: var(--gold); }
.hero-copy .lead { color: rgba(255,255,255,.82); margin-bottom: 40px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero-actions .link { color: #fff; }
.hero-actions .link:hover { color: var(--gold); }

/* Title block: drawing-sheet corner detail */
.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.82);
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .4s;
}
.scroll-cue i { width: 2px; height: 38px; background: linear-gradient(var(--gold), transparent); animation: cue 2s var(--ease-in-out) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero.is-scrolled .scroll-cue { opacity: 0; }
@media (max-width: 900px) { .scroll-cue { bottom: 12px; } }

/* ---------- Hero video -------------------------------------------------- */
/* The footage sits at the very back. The drawing grid and the gradient are
   repainted above it, because a section background would be hidden behind a
   full-bleed video. A scrim under the grid keeps the white copy legible over
   bright frames (sky, sand, pale OSB). */
.hero-media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: var(--charcoal);
}
.hero-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Nudged right on wide screens so the build stays clear of the headline */
  object-position: 62% 60%;
}
.hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Scrim first, so the grid above it stays crisp rather than being washed out */
.hero-overlay::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(31,36,40,.94) 0%, rgba(31,36,40,.86) 30%, rgba(31,36,40,.42) 62%, rgba(31,36,40,.30) 80%, rgba(31,36,40,.52) 100%),
    linear-gradient(to top, rgba(31,36,40,.92) 0%, rgba(31,36,40,.25) 38%, transparent 60%),
    radial-gradient(120% 85% at 50% 0%, transparent 38%, rgba(31,36,40,.85) 100%);
}
.hero-overlay::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.085) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  background-position: center top;
}
@media (max-width: 900px) {
  .hero-media video { object-position: 58% 55%; }
  .hero-overlay::before {
    background:
      linear-gradient(to top, rgba(31,36,40,.96) 0%, rgba(31,36,40,.82) 42%, rgba(31,36,40,.45) 70%, rgba(31,36,40,.6) 100%),
      radial-gradient(130% 70% at 50% 0%, transparent 30%, rgba(31,36,40,.8) 100%);
  }
  .hero-overlay::after { background-size: 56px 56px, 56px 56px; }
}
/* Fade the footage in over its own poster so there is no flash on load */
/* The poster sits behind the video, so the hero is never blank: before the
   footage loads, for data savers, without scripts or if the video fails */
.hero-media { background: var(--charcoal) url(../assets/video/hero-poster.jpg) center / cover no-repeat; }
.hero-media video { opacity: 0; transition: opacity .7s var(--ease-out); }
.hero-media video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-media video { opacity: 1; transition: none; } }

/* ---------- 3D scenes --------------------------------------------------- */
#gl { position: fixed; inset: 0; z-index: 1; pointer-events: none; display: block; width: 100%; height: 100%; }
.scene { position: relative; z-index: 2; min-height: 320px; touch-action: pan-y; }
.scene[data-orbit] { cursor: grab; touch-action: pan-y pinch-zoom; }
.scene[data-orbit]:active { cursor: grabbing; }
.scene--tall { min-height: min(72vh, 720px); }
.scene--wide { aspect-ratio: 16 / 9; min-height: 0; }
/* A wall panel is portrait, so on a phone the scene box needs height, not width:
   at 60vw the model had to shrink to a sliver inside a 234px box. */
@media (max-width: 900px) { .scene--tall { min-height: min(104vw, 460px); } }
/* "Requires WebGL" is only true once WebGL has failed (html.no-gl, set by
   home.js, or a scene marked .is-broken). Until the first frame, say it is loading. */
.scene-fallback { position: absolute; inset: 0; display: none; place-items: center; color: var(--fg-faint); }
.no-gl .scene-fallback { display: grid; }
html:not(.gl-ready):not(.no-gl) .scene[data-scene]::after {
  content: "Loading 3D model\2026"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--fg-faint); font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none;
}
.orbit-hint { display: none; position: absolute; left: 50%; bottom: clamp(12px, 3vw, 24px); z-index: 4; transform: translateX(-50%); align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid rgba(207,153,65,.7); background: rgba(31,36,40,.9); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.15); font: 500 .68rem/1.2 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.gl-ready .scene[data-orbit]:not(.is-broken) .orbit-hint { display: inline-flex; }
.orbit-hint-icon { color: var(--gold-300); font: 400 1.4rem/0.7 var(--font-body); }
.orbit-hint-touch { display: none; }
/* Explode slider for the panel scene: directly under the model, centred on
   the rotate hint above it */
.explode-control { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
.explode-control input { width: min(320px, 100%); accent-color: var(--gold); }
@media (hover: none) and (pointer: coarse) {
  .orbit-hint-desktop { display: none; }
  .orbit-hint-touch { display: inline; }
}

/* Annotation callouts projected from 3D */
.callout {
  /* left/top is the anchor: centre the 22px dot on it, the label runs right */
  position: absolute; z-index: 3; transform: translate(-11px, -50%); pointer-events: none;
  display: inline-flex; align-items: center; gap: 10px; opacity: 0; transition: opacity .3s;
}
.callout.is-on { opacity: 1; }
.callout .dot { width: 22px; height: 22px; display: grid; place-items: center; background: var(--gold); color: var(--charcoal); font: 600 10px/1 var(--font-mono); }
.callout .txt { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em; color: var(--fg); background: var(--bg); padding: 3px 8px; border: 1px solid var(--line); white-space: nowrap; }
/* The label can flip to the left of its dot, or be dropped entirely, when it
   would collide or run out of the box (3D scenes: updateCallouts in
   js/scenes.js). The dot stays on its anchor either way. */
.callout.is-flipped { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -50%); }
.callout.is-bare .txt { display: none; }

/* Panel tag motif (W-014) */
.tag {
  display: inline-block; background: var(--gold); color: var(--charcoal);
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .08em;
  padding: 3px 8px; line-height: 1.4;
}
.tag--ghost { background: transparent; color: var(--accent-text); border: 1px solid var(--accent-text); }

.source-note {
  margin-top: 22px; max-width: 110ch;
  color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.65;
}
.source-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reveal & motion ------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="scale"] { transform: scale(.96); }

/* ---------- Components -------------------------------------------------- */
/* Feature strip (icons in hairline cells) */
.strip { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); background: var(--line); gap: 1px; }
.strip > div { background: var(--bg); padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; justify-content: space-between; gap: 36px; min-height: 180px; }
.strip svg { width: 36px; height: 36px; color: var(--gold); }
.strip .label { color: var(--fg); }
@media (max-width: 1100px) { .strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .strip { grid-template-columns: repeat(2, 1fr); } .strip > div { min-height: 140px; } .strip:not(.strip--3) > div:last-child:nth-child(odd) { grid-column: span 2; } }
/* Three-up trust strip: slimmer cells, stacks earlier than the 5-up strip */
.strip--3 { grid-template-columns: repeat(3, 1fr); }
.strip--3 > div { min-height: 0; gap: 20px; padding: clamp(24px, 2.6vw, 32px); }
@media (max-width: 900px) { .strip--3 { grid-template-columns: 1fr; } .strip--3 > div { min-height: 0; } }

/* Big stats */

/* Numbered spec list (rows) */
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 40px 1fr auto; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.row .n { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--accent-text); }
.row .t { font-weight: 500; }
.row .m { color: var(--fg-muted); font-size: var(--fs-small); text-align: right; }
.row.is-active .t { color: var(--accent-text); }

/* Chain: tagged steps in a narrow column (model -> panel -> site) */

/* Headings sized from their own column, not the viewport.
   An expanded grotesk at display size overflows a narrow grid track and prints
   over the column beside it, so cap these from the container's inline size. */
/* Only put .col-fit on an element whose width comes from its container (a grid
   item in an fr track). Inline-size containment ignores the contents when
   computing width, so on a content-sized box it collapses to nothing. */
.col-fit { container-type: inline-size; width: 100%; }
.col-fit .display { font-size: min(var(--fs-display), 10.4cqi); }
.col-fit h2:not(.display) { font-size: min(var(--fs-h2), 10.5cqi); }

/* Cards (About: Values and People) */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { position: relative; background: var(--bg); padding: clamp(28px, 3vw, 44px) clamp(24px, 2.4vw, 36px); min-height: 300px; display: flex; flex-direction: column; gap: 20px; transition: background .35s; overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.card:hover { background: var(--bg-elev); }
.card:hover::before { transform: scaleX(1); }
.card .n { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--accent-text); letter-spacing: .08em; }
.card h3 { font-size: var(--fs-h4); }
.card p { color: var(--fg-muted); font-size: var(--fs-small); flex: 1; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } .card { min-height: 0; } }

/* A scene that fails at runtime shows its fallback rather than an empty box */
.scene.is-broken .scene-fallback { display: grid; }

/* Key/value definition rows (Technical page) */
.kv { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.kv > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.kv .k { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); overflow-wrap: anywhere; }
.kv .v { font-size: var(--fs-body); }
.kv .v.big { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase; font-size: var(--fs-h3); line-height: 1.05; }
@media (max-width: 900px) { .kv > div { grid-template-columns: 1fr; gap: 6px; } }

/* System section (Home 02). A heading row with the Wall / Floor / Roof
   switch, then one stage: a short summary beside the model, then one note.
   The .sys-spec / .sys-fig / .sys-n rules below are shared with Performance. */
.sx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-bottom: clamp(36px, 4.4vw, 64px); }
.sx-head .sec-head { margin: 0; max-width: 46rem; }
/* Segmented switch: three equal buttons and a charcoal thumb that slides
   under the selected one */
.sx-switch {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 5px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px -22px rgba(31, 36, 40, .5);
}
.sx-switch button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 128px; padding: 14px 22px; border: 0; background: none; cursor: pointer; color: var(--fg-muted);
  font: 700 13px/1 var(--font-display); font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase;
  transition: color .35s var(--ease-out);
}
.sx-switch button:hover { color: var(--fg); }
.sx-switch button[aria-selected="true"] { color: #fff; }
.sx-switch button[aria-selected="true"] svg { color: var(--gold); }
.sx-switch button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.sx-thumb {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3);
  background: var(--charcoal); transition: transform .45s var(--ease-out);
}
.sx-switch:has(#tab-floor[aria-selected="true"]) .sx-thumb { transform: translateX(100%); }
.sx-switch:has(#tab-roof[aria-selected="true"]) .sx-thumb { transform: translateX(200%); }

.sx-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.sx-panel:not([hidden]) { animation: sx-in .5s var(--ease-out) both; }
@keyframes sx-in { from { opacity: 0; transform: translateY(10px); } }
.sx-title { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; }
.sx-desc { margin-top: 12px; max-width: 44ch; color: var(--fg-muted); line-height: 1.6; }
/* Three figures in a ruled row, the value above its label */
.sx-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(22px, 2.4vw, 32px) 0; border-block: 1px solid var(--line); }
.sx-figs > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 18px 16px 18px 0; animation: sx-in .55s var(--ease-out) both; animation-delay: calc(120ms + var(--k, 0) * 80ms); }
.sx-figs > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.sx-figs dd { margin: 0; font-family: var(--font-display); font-stretch: 125%; font-weight: 800; letter-spacing: -.03em; font-size: clamp(20px, 1.9vw, 28px); line-height: 1; color: var(--accent-display, var(--gold)); white-space: nowrap; }
.sx-figs dd small { margin-left: .15em; font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.sx-figs dt { font-size: 12px; line-height: 1.3; color: var(--fg-muted); }
.sx-k { margin-bottom: 12px; font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
/* Parts: two columns of small tiles, numbered like the dots on the model */
#system .sx-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; }
#system .sx-parts .row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); cursor: default;
  transition: border-color .25s, background-color .25s, transform .25s var(--ease-out);
}
#system .sx-parts .n {
  grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px;
  background: var(--gold); color: var(--charcoal); font: 600 10px/1 var(--font-mono);
}
#system .sx-parts .t { font-size: 14px; font-weight: 600; line-height: 1.25; }
#system .sx-parts .m { font-size: 12px; line-height: 1.4; color: var(--fg-muted); text-align: left; }
#system .sx-parts .row.is-active { border-color: var(--gold); background: #fff; transform: translateX(2px); }
#system .sx-parts .row.is-active .t { color: var(--fg); }
#system .sx-parts .row:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.sx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: clamp(24px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--line); }
.sx-note { font-size: 12px; color: var(--fg-faint); }
/* The model's box is sized to the model rather than a tall one, unframed.
   It must stay transparent: the WebGL canvas is drawn behind the page and
   every .scene is a window onto it. The drafting grid is the section's own
   .sheet background, under the canvas. */
.scene--system { min-height: 0; aspect-ratio: 6 / 5; }
.scene--system .orbit-hint { bottom: 14px; }
/* Rows and dots name the same parts: lighting one lights the other */
.scene--system .callout.is-on .dot { pointer-events: auto; cursor: pointer; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.scene--system.has-hot .callout.is-on:not(.is-hot) { opacity: .32; }
.scene--system .callout.is-hot { z-index: 4; }
.scene--system .callout.is-hot .dot { transform: scale(1.4); box-shadow: 0 0 0 5px rgba(207,153,65,.32); }
@media (max-width: 900px) {
  .sx-head { align-items: stretch; }
  .sx-switch { width: 100%; }
  .sx-switch button { min-width: 0; padding: 13px 10px; }
  .sx-stage { grid-template-columns: minmax(0, 1fr); }
  .sx-stage .scene--system { order: -1; }
}
@media (max-width: 520px) {
  #system .sx-parts { grid-template-columns: minmax(0, 1fr); }
  .sx-figs > div { padding-right: 10px; }
  .sx-figs > div + div { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) { .sx-panel:not([hidden]), .sx-figs > div { animation: none; } .sx-thumb { transition: none; } }

/* Key figures, shared with Performance (.perf-spec) */
.sys-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-bottom: 18px; }
.sys-fig { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tabpanel:not([hidden]) .sys-fig { animation: sys-fig-in .6s var(--ease-out) both; animation-delay: calc(80ms + var(--k, 0) * 90ms); }
@keyframes sys-fig-in { from { opacity: 0; transform: translateY(10px); } }
.sys-n {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(19px, 1.75vw, 26px); line-height: 1; color: var(--gold); white-space: nowrap;
}
.sys-n small { margin-left: .2em; font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.sys-l { font-size: var(--fs-small); line-height: 1.35; color: var(--fg-muted); }
@media (max-width: 900px) { .sys-spec { gap: 12px; } }
@media (max-width: 420px) { .sys-spec { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .tabpanel:not([hidden]) .sys-fig { animation: none; } }

/* Display tabs (WALL / FLOOR / ROOF) */

/* Image bands: slim full-width photographs between sections. The image is
   taller than its band; js/site.js sizes it to the scroll distance and slides
   it through the band at half scroll speed. Without scripts it sits centred. */
.pband { position: relative; margin: 0; height: clamp(160px, 22vw, 300px); overflow: hidden; background: var(--charcoal); }
.pband img {
  position: absolute; left: 0; top: -25%; width: 100%; height: 150%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  will-change: transform;
}
.pband::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.25); }

/* Mid-page call to action: a slim band after the programme comparison */
.section.cta-strip { padding-block: clamp(44px, 5.5vw, 80px); border-block: 1px solid var(--line); }
.cta-strip-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px 56px; }
.cta-strip h2 { margin-top: 16px; }
.cta-strip p { margin-top: 10px; max-width: 60ch; }

/* Performance: a numbered tab bar over a live 3D stage and the notes.
   The stage is a window onto the WebGL canvas behind the page, so it can
   carry a frame, corner ticks and a label but never a fill. */
.sec-head.perf-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; gap: 20px clamp(32px, 5vw, 80px); }
.perf-head .lead { max-width: 46ch; }
.perf-caveat { margin-top: 14px; max-width: 58ch; font: 400 11px/1.55 var(--font-mono); letter-spacing: .02em; color: var(--fg-faint); }
.perf-tabs {
  display: flex; gap: clamp(18px, 2.6vw, 44px); margin-bottom: clamp(28px, 3.5vw, 48px);
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.perf-tabs::-webkit-scrollbar { display: none; }
.perf-tabs button {
  position: relative; display: flex; align-items: baseline; gap: 9px; padding: 14px 0 16px; white-space: nowrap;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase; letter-spacing: -.005em;
  font-size: clamp(13px, 1.15vw, 17px); line-height: 1.2; color: var(--fg-muted); transition: color .25s;
}
.perf-tabs button .n { font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--accent-text); }
.perf-tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.perf-tabs button:hover, .perf-tabs button[aria-selected="true"] { color: var(--fg); }
.perf-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.perf-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
/* The notes run longer than the stage: keep the model in view while they are read */
@media (min-width: 901px) { .perf-body .perf-stage { position: sticky; top: calc(var(--header-h) + 24px); } }
.perf-stage { position: relative; border: 1px solid var(--line); }
.perf-stage::before, .perf-stage::after { content: ""; position: absolute; z-index: 3; width: 12px; height: 12px; border: solid var(--gold); pointer-events: none; }
.perf-stage::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.perf-stage::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.scene--perf { min-height: 0; aspect-ratio: 4 / 3; }
.perf-stage-tag {
  position: absolute; z-index: 3; left: 16px; top: 14px; display: inline-flex; align-items: center; gap: 8px;
  font: 500 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted);
}
.perf-stage-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(207,153,65,.6); animation: perf-live 2s ease-out infinite; }
/* What the loop is showing, in one line along the foot of the stage */
.perf-stage-cap {
  position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 12px; margin: 0;
  display: flex; gap: 10px; align-items: baseline;
  font: 400 11px/1.5 var(--font-mono); letter-spacing: .02em; color: var(--fg-muted);
}
.perf-stage-cap::before { content: ""; flex: none; width: 18px; height: 1px; margin-bottom: 4px; background: var(--gold); }
.perf-stage-cap.is-swapping { animation: perf-cap-in .5s var(--ease-out); }
@keyframes perf-cap-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes perf-live { 0% { box-shadow: 0 0 0 0 rgba(207,153,65,.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(207,153,65,0); } }
.perf-kicker { display: flex; align-items: center; gap: 10px; font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.perf-kicker .rule { width: 22px; height: 1px; background: var(--gold); }
.perf-title { margin: 14px 0 clamp(18px, 2.4vw, 28px); font-size: var(--fs-h3); line-height: 1.05; max-width: 18ch; }
.perf-panel .kv > div { padding-block: 12px; }
.perf-panel .kv .v { font-size: var(--fs-small); line-height: 1.5; }
/* Key figures for the topic, from the issued documents. Longer values
   ("60/60/60", "N1–N6 · C1–C4") are allowed to wrap in a narrow column. */
.perf-spec { padding-bottom: 20px; }
.perf-spec .sys-n { font-size: clamp(17px, 1.45vw, 22px); white-space: normal; line-height: 1.05; }
.perf-src { margin-top: 14px; font: 400 10.5px/1.55 var(--font-mono); letter-spacing: .02em; color: var(--fg-faint); }
/* The line drawing only shows where the 3D stage cannot */
.perf-panel .perf-fig { display: none; max-width: 360px; margin-top: 28px; }
.no-gl .perf-stage { display: none; }
.no-gl .perf-body { grid-template-columns: minmax(0, 1fr); }
.no-gl .perf-panel .perf-fig { display: block; }
/* Same when only this scene fails to build (scenes.js marks it .is-broken) */
.perf-body:has(.scene--perf.is-broken) { grid-template-columns: minmax(0, 1fr); }
.perf-body:has(.scene--perf.is-broken) .perf-stage { display: none; }
.perf-body:has(.scene--perf.is-broken) .perf-fig { display: block; }
@media (max-width: 900px) {
  .sec-head.perf-head, .perf-body { grid-template-columns: minmax(0, 1fr); }
  .perf-tabs { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .perf-title { max-width: none; }
  /* Below the model rather than over it, and a squarer stage for the model */
  .perf-stage-cap { position: static; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
  .scene--perf { aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) { .perf-stage-tag::before { animation: none; } }
.tabpanel[hidden] { display: none; }
.tabpanel { animation: panel-in .5s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }

/* Accordion (native details) */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-family: var(--font-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase;
  letter-spacing: -.01em; font-size: clamp(18px, 1.6vw + .4rem, 28px); line-height: 1.15;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: none; width: 24px; height: 24px;
  background: linear-gradient(var(--gold), var(--gold)) center/100% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) center/1px 100% no-repeat;
  transition: transform .4s var(--ease-out);
}
.acc details[open] summary::after { transform: rotate(45deg); }
.acc details[open] summary { color: var(--accent-text); }
.acc .acc-body { padding: 0 0 28px; max-width: var(--measure); }
.acc summary:hover { color: var(--accent-text); }

/* Questions (index.html #faq): a long list, so the side column carries a
   search box and topic filter (js/site.js initFaq) and stays in view on
   desktop. Rows are tighter than the default accordion. */
.faq-side { align-self: start; }
@media (min-width: 901px) and (min-height: 760px) { .faq-side { position: sticky; top: calc(var(--header-h) + 24px); } }
.faq-tools { margin-top: 28px; }
.faq-search { position: relative; display: block; color: var(--fg-muted); }
.faq-search svg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.faq-search input {
  width: 100%; padding: 12px 0 12px 30px; border: 0; border-bottom: 1px solid var(--line-strong, var(--line)); border-radius: 0;
  background: transparent; color: var(--fg); font: 400 var(--fs-body, 16px)/1.3 var(--font-body, inherit);
}
.faq-search input::placeholder { color: var(--fg-muted); }
.faq-search input:focus { outline: none; border-bottom-color: var(--accent-text); }
.faq-search:focus-within { color: var(--accent-text); }
.faq-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.faq-topics button {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer;
  font: 500 var(--fs-mono)/1.1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.faq-topics button:hover { border-color: var(--fg); }
.faq-topics button[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.faq-n { color: var(--fg-muted); font-size: .9em; }
.faq-topics button[aria-pressed="true"] .faq-n { color: var(--gold); }
.faq-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 32px; }
.faq-more p { margin: 0; max-width: 42ch; }
.faq-status { margin: 0 0 14px; min-height: 1.2em; font: 500 var(--fs-mono)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.faq-list summary { padding: 20px 0; font-size: clamp(16px, .6vw + .8rem, 21px); }
.faq-q { display: block; }
.faq-tag { display: none; margin-bottom: 6px; font: 500 11px/1.2 var(--font-mono); font-stretch: normal; letter-spacing: .1em; color: var(--accent-text); }
.faq.show-tags .faq-tag { display: block; }
.faq-list .acc-body { padding-bottom: 24px; }
.faq-list .acc-body > * + * { margin-top: .75em; }
.faq-list .acc-body ul, .faq-list .acc-body ol { padding-left: 1.2em; }
.faq-list .acc-body li + li { margin-top: .35em; }
.faq-empty { padding: 24px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) {
  /* One scrolling row of topics instead of a block of chips */
  .faq-topics { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter, 16px) * -1); padding-inline: var(--gutter, 16px); scrollbar-width: none; }
  .faq-topics::-webkit-scrollbar { display: none; }
  .faq-topics button { flex: none; }
}

/* Data table */
.table th { text-align: left; padding: 0 16px 14px 0; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.table td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table td:first-child { font-weight: 500; }

/* Why SIPs (Home, between the hero and "What are SIPs")
   Five benefit cards on a white section. On reveal each card settles in after
   the one before it, its icon strokes draw in, and its gold figure counts up
   (initCounters in js/site.js). Hover lifts the card, inks the icon tile and
   runs a small motion in the icon (.m). */
#trust { padding-block: clamp(64px, 7vw, 112px); }
.stats-panel[data-reveal] { opacity: 1; transform: none; transition: none; }
.stats-k {
  display: block; text-align: center; margin-bottom: 14px;
  font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text);
}
.stats-h {
  text-align: center; margin: 0 auto clamp(34px, 4vw, 60px);
  font-size: var(--fs-h3); line-height: 1.1;
}
.bens { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.ben {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: clamp(22px, 2vw, 30px) clamp(18px, 1.6vw, 26px) clamp(24px, 2.2vw, 32px);
  border: 1px solid var(--line); background: #fff; overflow: hidden;
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .35s, border-color .35s;
  transition-delay: calc(120ms + var(--i, 0) * 110ms), calc(120ms + var(--i, 0) * 110ms), 0s, 0s;
}
/* Drafting grid that fades up behind the card on hover */
.ben::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 16px 16px; mask-image: linear-gradient(160deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%);
}
/* Gold rule that runs along the foot of the card on hover */
.ben::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.stats-panel.is-in .ben { opacity: 1; transform: none; }
.ben > * { position: relative; }
.ben-k { position: absolute; top: clamp(18px, 1.6vw, 24px); right: clamp(16px, 1.4vw, 22px); font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: .1em; color: var(--fg-faint, var(--fg-muted)); }
.ben-ic {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px;
  background: var(--sand-100); color: var(--charcoal); transition: background .35s, color .35s;
}
.ben-ic svg { width: 44px; height: 44px; stroke: currentColor; stroke-width: 1.7; overflow: visible; }
.ben-ic .g { stroke: var(--gold); }
.ben-ic .dot { fill: var(--gold); stroke: none; }
.ben-ic .ins { stroke-dasharray: 2.5 2.5; opacity: 0; transition: opacity .5s; transition-delay: calc(700ms + var(--i, 0) * 110ms); }
/* Strokes draw in once the row is revealed */
.ben-ic .d { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out); transition-delay: calc(300ms + var(--i, 0) * 110ms); }
.ben-ic .hand, .ben-ic .flame, .ben-ic .cross, .ben-ic .dot { opacity: 0; transition: opacity .5s; transition-delay: calc(800ms + var(--i, 0) * 110ms); }
.stats-panel.is-in .ben-ic .d { stroke-dashoffset: 0; }
.stats-panel.is-in .ben-ic .ins, .stats-panel.is-in .ben-ic .hand, .stats-panel.is-in .ben-ic .flame,
.stats-panel.is-in .ben-ic .cross, .stats-panel.is-in .ben-ic .dot { opacity: 1; }
/* The hero's brand gold, by choice. It measures about 2.4:1 on white, under
   the 3:1 WCAG asks of large text; the label below each figure carries the
   meaning in full contrast. --accent-display (#A4752A) is the passing tone. */
.stat-n {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  line-height: 1; letter-spacing: -.035em; color: var(--gold); font-variant-numeric: tabular-nums;
}
.stat-sym { margin-left: .02em; }
.stat-pre { font-weight: 700; text-transform: uppercase; }
.stat-l {
  font-family: var(--font-body, inherit); font-stretch: 100%;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3; color: var(--fg);
}
.stat-d { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.55; }
.ben .stat-n { margin-top: 2px; font-size: clamp(34px, 2.7vw, 46px); white-space: nowrap; }
.ben .stat-unit { margin-left: .08em; font-size: .5em; letter-spacing: 0; }
.ben .stat-pre { display: block; margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; line-height: 1; }
.ben .stat-l { margin-top: 4px; }
.ben .stat-d { max-width: none; }
@media (hover: hover) {
  .ben:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(31, 36, 40, .35); border-color: transparent; transition-delay: 0s; }
  .ben:hover::before { opacity: .7; }
  .ben:hover::after { transform: scaleX(1); }
  .ben:hover .ben-ic { background: var(--charcoal); color: #fff; }
  .ben--energy:hover .m { animation: ben-heat 1.2s ease-in-out infinite; }
  .ben--speed:hover .hand { animation: ben-spin 1.4s linear infinite; transform-origin: 26px 27px; }
  .ben--strength:hover .m { animation: ben-gust 1.1s ease-in-out infinite; }
  .ben--fire:hover .flame { animation: ben-flicker .9s ease-in-out infinite; transform-origin: 24px 43px; }
  .ben--precision:hover .cross { animation: ben-aim 1.6s ease-in-out infinite; }
}
@keyframes ben-heat { 50% { transform: translateX(3px); opacity: .45; } }
@keyframes ben-spin { to { transform: rotate(360deg); } }
@keyframes ben-gust { 50% { transform: translateX(-3px); } }
@keyframes ben-flicker { 30% { transform: scale(1.08, .92); } 60% { transform: scale(.94, 1.1); } }
@keyframes ben-aim { 25% { transform: translate(2px, -2px); } 75% { transform: translate(-2px, 2px); } }
.bens-note { margin: clamp(22px, 2.4vw, 32px) auto 0; max-width: 70ch; text-align: center; font: 400 11px/1.6 var(--font-mono); letter-spacing: .02em; color: var(--fg-muted); }
/* Tablet: three over two, the second row centred */
@media (max-width: 1100px) {
  .bens { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ben { grid-column: span 2; }
  .ben:nth-child(4) { grid-column: 2 / span 2; }
}
/* Phone: one column, icon beside the text */
@media (max-width: 640px) {
  .bens { grid-template-columns: minmax(0, 1fr); }
  .ben, .ben:nth-child(4) { grid-column: auto; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: start; }
  .ben-ic { grid-row: 1 / span 3; width: 56px; height: 56px; margin: 0; }
  .ben-ic svg { width: 38px; height: 38px; }
  .ben .stat-n { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .ben, .ben-ic * { transition: none; } }
@media print { .ben { opacity: 1; transform: none; } .ben-ic .d { stroke-dashoffset: 0; } }

/* Progress rail (process) */
.rail { position: relative; display: flex; flex-direction: column; gap: 0; }
.rail::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.rail .fill { position: absolute; left: 7px; top: 12px; width: 1px; height: var(--fill, 0%); background: var(--gold); transition: height .3s linear; }
.rail .step { position: relative; display: flex; align-items: center; gap: 18px; padding: 12px 0; text-align: left; color: var(--fg-muted); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; transition: color .25s; }
.rail .step i { flex: none; width: 15px; height: 15px; border: 1px solid var(--gold); background: var(--bg); transition: background .25s; }
.rail .step.is-active { color: var(--fg); }
.rail .step.is-active i, .rail .step.is-done i { background: var(--gold); }
.rail .step .k { font-family: var(--font-mono); color: var(--accent-text); margin-right: 4px; }

/* Programme: a running timeline (see the comment on #why in index.html).
   The stage is one screen tall and pinned; .tl-track is many screens wide and
   is slid left by js/home.js so the week under the fixed playhead is --now.
   Everything placed on the track uses one coordinate:
     left = --pad + week x --ppw
   so bars, ticks and milestones can never drift apart. Bars grow with --now
   through clamp(), and the summary fades in with --fin. */
.tl { padding: 0; --fin: 0; --lk: 0; --glow: 0; --punch: 1; --brick: #B0705A; --mortar: #5A5550; }
/* About 21 screens of scroll: weeks 0-5 take 11 of them, so the SIP build is
   followed panel by panel; the segments are set out in js/home.js */
.tl-scroll { position: relative; height: 2250svh; }
.tl-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  --lane: 34px; --t1: 44px; --t2: 126px; --cw: 200px;
  --ppw: 256px; --pad: 384px; --play: 384px;
}
.tl-head { position: relative; z-index: 4; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: calc(var(--header-h) + clamp(10px, 2vh, 24px)); }
.tl-head h2 { margin-top: 14px; font-size: clamp(30px, 3.6vw, 56px); line-height: .95; }
.tl-accent { color: var(--gold); }
.tl-sub { margin-top: 10px; max-width: 44ch; color: var(--fg-muted); font-size: var(--fs-small); opacity: calc(1 - var(--fin)); }
.tl-clock { display: grid; justify-items: end; gap: 8px; opacity: calc(1 - var(--fin)); }
.tl-clock-row { display: flex; align-items: baseline; gap: 10px; }
.tl-clock-k, .tl-clock-of { font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.tl-clock strong {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(44px, 5.4vw, 84px); line-height: .9; color: var(--gold); font-variant-numeric: tabular-nums;
}
.tl-ahead {
  padding: 6px 10px; background: var(--gold); color: var(--charcoal);
  font: 600 var(--fs-mono)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.tl-ahead.is-on { opacity: 1; transform: none; }

.tl-viewport {
  position: relative; min-height: 0; opacity: calc(1 - var(--fin));
  transform-origin: var(--play) 50%; transform: scale(calc((1 - var(--fin) * .12) * var(--punch)));
}
.tl-track, .tl-bg { position: absolute; top: 0; bottom: 0; left: 0; will-change: transform; }
.tl-track { --now: 17; width: calc(var(--pad) * 2 + 17 * var(--ppw)); }
/* Week numerals behind the line, on a slower layer: they land on the playhead
   with their week because the layer moves at 0.6x and is spaced at 0.6x */
.tl-bg span {
  position: absolute; top: 50%; left: calc(var(--play) + var(--w) * var(--ppw) * .6); transform: translate(-50%, -50%);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(120px, 26vh, 280px); line-height: 1; color: rgba(255,255,255,.035); white-space: nowrap;
}
.tl-axis { position: absolute; top: 50%; left: var(--pad); width: calc(17 * var(--ppw)); height: 1px; background: rgba(255,255,255,.22); }
.tl-fill { position: absolute; top: calc(50% - 1px); left: var(--pad); height: 3px; width: calc(var(--now) * var(--ppw)); background: var(--gold); }
.tl-ghost { position: absolute; left: calc(var(--pad) + 3 * var(--ppw)); width: calc(14 * var(--ppw)); height: 1px; background: rgba(255,255,255,.08); }
.tl-ghost--sip { top: calc(50% - var(--lane)); }
.tl-ghost--brick { top: calc(50% + var(--lane)); }
.tl-tick { position: absolute; top: 50%; left: calc(var(--pad) + var(--w) * var(--ppw)); width: 1px; height: 9px; transform: translateY(-50%); background: rgba(255,255,255,.35); }
.tl-tick span { position: absolute; top: 15px; left: 0; transform: translateX(-50%); font: 500 10px/1 var(--font-mono); letter-spacing: .06em; color: var(--fg-faint); }
.tl-slab {
  position: absolute; top: 50%; left: var(--pad); width: calc(3 * var(--ppw)); height: 20px; transform: translateY(-50%);
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 2px, transparent 2px 7px);
}
.tl-slab span { padding: 2px 8px; background: var(--charcoal); font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
/* Lane labels stay pinned at the left of the stage while the track pans under them */
.tl-lane-name { position: absolute; z-index: 3; left: max(16px, calc((100vw - var(--maxw, 1440px)) / 2 + var(--gutter, 20px))); transform: translateY(-50%); padding: 5px 12px 5px 6px; background: rgba(31,36,40,.88); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
/* The material itself beside each lane: a SIP panel and a piece of brickwork */
.tl-ico { flex: none; display: block; }
.tl-lane-name--sip { top: calc(50% - var(--lane)); color: var(--gold); opacity: var(--sip-l, 1); translate: calc((1 - var(--sip-l, 1)) * -14px) 0; }
.tl-lane-name--brick { top: calc(50% + var(--lane)); color: #D7B3A4; }
.tl-bar { position: absolute; height: 12px; transform: translateY(-50%); left: calc(var(--pad) + var(--s) * var(--ppw)); width: calc(clamp(0, var(--now) - var(--s), var(--len)) * var(--ppw)); }
.tl-bar--sip { top: calc(50% - var(--lane)); background: linear-gradient(180deg, var(--gold) 0 3px, #F1ECE1 3px 9px, var(--gold) 9px 12px); }
.tl-bar--enclosed { top: calc(50% - var(--lane)); height: 2px; background: repeating-linear-gradient(90deg, rgba(207,153,65,.6) 0 10px, transparent 10px 16px); }
.tl-bar--brick { top: calc(50% + var(--lane)); background: linear-gradient(90deg, var(--brick) 0 18px, transparent 18px) 0 0 / 20px 5px repeat-x, linear-gradient(90deg, var(--brick) 0 18px, transparent 18px) 9px 7px / 20px 5px repeat-x, var(--mortar); }

/* Milestones: a dot on the lane, a stem drawn out from it, then the card */
.tl-events { list-style: none; margin: 0; padding: 0; }
.tl-ev { position: absolute; left: calc(var(--pad) + var(--w) * var(--ppw)); display: flex; align-items: flex-start; }
.tl-ev--sip { bottom: calc(50% + var(--lane) + 4px); flex-direction: column-reverse; }
.tl-ev--brick, .tl-ev--shared { top: calc(50% + var(--lane) + 4px); flex-direction: column; }
.tl-ev::before { content: ""; position: absolute; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(207,153,65,.18); }
.tl-ev--sip::before { bottom: -8px; }
.tl-ev--brick::before { top: -8px; background: #D7B3A4; box-shadow: 0 0 0 4px rgba(176,112,90,.2); }
.tl-stem { display: block; width: 1px; height: var(--t); background: var(--gold); transition: transform .45s var(--ease-out); }
.tl-ev--sip .tl-stem { transform-origin: bottom; }
.tl-ev--brick .tl-stem, .tl-ev--shared .tl-stem { transform-origin: top; background: rgba(229,231,235,.45); }
/* Shared site works hang from the line itself, under the empty brick lane */
.tl-ev--shared { top: calc(50% + 4px); }
.tl-ev--shared::before { top: -8px; background: #e5e7eb; box-shadow: 0 0 0 4px rgba(229,231,235,.12); }
.tl-ev--shared .tl-stem { height: calc(var(--t) + var(--lane)); }
.tl-ev--shared .tl-card { border-left-color: rgba(229,231,235,.7); }
.tl-card {
  display: block; width: var(--cw); padding: 10px 12px;
  background: rgba(24,28,31,.92); border: 1px solid rgba(255,255,255,.12); border-left: 2px solid var(--gold);
  transition: opacity .45s var(--ease-out) .12s, transform .45s var(--ease-out) .12s;
}
.tl-ev--brick .tl-card { border-left-color: var(--brick); }
.tl-card b { display: block; font: 600 14px/1.3 var(--font-body); color: var(--fg); }
.tl-card span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--fg-muted); }
.tl-ev--lock .tl-card { background: var(--gold); border-color: var(--gold); }
.tl-ev--lock.tl-ev--brick .tl-card { background: #E6CFC4; border-color: #E6CFC4; }
.tl-ev--lock .tl-card b, .tl-ev--lock .tl-card span { color: var(--charcoal); }
.tl.is-live .tl-ev:not(.is-on) .tl-stem { transform: scaleY(0); }
.tl.is-live .tl-ev:not(.is-on) .tl-card { opacity: 0; transform: translateY(10px); transition-delay: 0s; }
.tl.is-live :is(.tl-ev--brick, .tl-ev--shared):not(.is-on) .tl-card { transform: translateY(-10px); }
.tl.is-live .tl-ev:not(.is-on)::before { opacity: .25; }

.tl-playhead {
  position: absolute; z-index: 2; top: 6%; bottom: 6%; left: var(--play); width: 1px; pointer-events: none;
  background: linear-gradient(transparent, rgba(207,153,65,.9) 18%, rgba(207,153,65,.9) 82%, transparent);
}
.tl-playhead::after { content: ""; position: absolute; top: 50%; left: -7px; width: 15px; height: 15px; margin-top: -7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(207,153,65,.2), 0 0 24px rgba(207,153,65,.6); }

.tl-legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px; padding-bottom: clamp(16px, 3vh, 32px); opacity: calc(1 - var(--fin));
  font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted);
}
.tl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tl-legend .tl-ico { width: 26px; height: 17px; }
.tl-key { display: inline-block; width: 18px; height: 6px; }
.tl-key--slab { height: 10px; border: 1px solid rgba(255,255,255,.35); background: repeating-linear-gradient(135deg, rgba(255,255,255,.2) 0 2px, transparent 2px 5px); }

/* The lock-up moment (--lk 0..1 while the pan holds at week 5), kept
   documentary-plain: a slight push in on the playhead (--punch), a faint
   column of light behind it (--glow), a gold tick badge at the end of the SIP
   bar (--mk) and a lower-third caption that rises in (--st-o, --st-y) with its
   rule drawing across (--st-r). Every value follows scroll, so it reverses. */
.tl-flash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--glow);
  background: linear-gradient(90deg, transparent calc(var(--play) - 220px), rgba(207,153,65,.09) var(--play), transparent calc(var(--play) + 220px));
}
.tl-mark {
  position: absolute; z-index: 3; left: var(--play); top: calc(50% - var(--lane)); pointer-events: none;
  display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: var(--gold); color: var(--charcoal); box-shadow: 0 0 0 4px rgba(31,36,40,.9), 0 0 0 5px rgba(207,153,65,.5);
  opacity: var(--mk, 0); transform: scale(calc(.7 + var(--mk, 0) * .3));
}
.tl-mark svg { stroke-dasharray: 24; stroke-dashoffset: calc(24 - var(--mk, 0) * 24); }
.tl-stamp {
  /* Upper right: empty while the pan holds, as later milestones are not drawn yet */
  position: absolute; z-index: 4; right: 6vw; top: 33%; pointer-events: none;
  display: grid; justify-items: start; gap: 10px; max-width: 34ch;
  padding-left: 18px; border-left: 2px solid var(--gold);
  opacity: var(--st-o, 0); transform: translateY(calc(var(--st-y, 1) * 16px));
}
.tl-stamp-k { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.tl-stamp-k i { width: 18px; height: 1px; background: currentColor; opacity: .6; }
.tl-stamp strong {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.025em;
  font-size: clamp(34px, 4.4vw, 68px); line-height: .92; color: #fff;
}
.tl-stamp-rule { display: block; width: 100%; height: 1px; background: var(--gold); transform-origin: left; transform: scaleX(var(--st-r, 0)); }
.tl-stamp-d { font-size: var(--fs-small); line-height: 1.5; color: rgba(255,255,255,.78); }
/* While the moment plays, everything but the lock-up card steps back */
.tl-ev { transition: opacity .35s; }
.tl.is-moment .tl-ev:not(.tl-ev--lock) { opacity: .4; }
.tl.is-moment .tl-legend { opacity: .3; transition: opacity .35s; }
.tl.is-moment .tl-ev--lock .tl-card { box-shadow: 0 0 0 1px var(--gold); }
@media (max-width: 700px) {
  .tl-stamp { right: auto; left: 6vw; top: auto; bottom: 17%; }
  .tl-stamp strong { font-size: clamp(30px, 10vw, 44px); }
}

/* The summary that the timeline resolves into */
.tl-finale {
  position: absolute; z-index: 3; left: 0; right: 0; top: 57%; transform: translateY(calc(-50% + (1 - var(--fin)) * 28px));
  display: grid; justify-items: start; gap: clamp(18px, 3vh, 28px); opacity: var(--fin); pointer-events: none;
}
.tl-punch { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(30px, 4.4vw, 68px); line-height: .95; max-width: 16ch; }
.tl-punch strong { color: var(--gold); font-weight: inherit; }
.tl-sum { display: grid; gap: 14px; width: min(100%, 900px); }
.tl-sum-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 90px; align-items: center; gap: 16px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.tl-sum-row b { font: 700 13px/1 var(--font-mono); color: var(--fg); text-align: right; }
.tl-sum-bar { position: relative; height: 14px; background: rgba(255,255,255,.06); }
.tl-sum-bar i { position: absolute; top: 0; bottom: 0; transform-origin: left; transform: scaleX(var(--fin)); }
.tl-sum-slab { left: 0; width: calc(3 / 17 * 100%); background: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 2px, transparent 2px 6px); }
.tl-sum-sip { left: calc(3 / 17 * 100%); width: calc(2 / 17 * 100%); background: linear-gradient(180deg, var(--gold) 0 3px, #F1ECE1 3px 11px, var(--gold) 11px 14px); }
.tl-sum-brick { left: calc(3 / 17 * 100%); width: calc(14 / 17 * 100%); background: linear-gradient(90deg, var(--brick) 0 18px, transparent 18px) 0 0 / 20px 6px repeat-x, linear-gradient(90deg, var(--brick) 0 18px, transparent 18px) 9px 8px / 20px 6px repeat-x, var(--mortar); }
.tl-note { max-width: 86ch; font-size: 12px; line-height: 1.55; color: var(--fg-muted); }

@media (max-width: 700px) {
  .tl-stage { --lane: 28px; --t1: 46px; --t2: 112px; --cw: 144px; }
  .tl-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tl-clock { justify-items: start; }
  .tl-sub { display: none; }
  .tl-card { padding: 8px 10px; }
  .tl-card b { font-size: 12.5px; }
  /* Titles only on a phone: the cards stay short enough for the two tiers */
  .tl-card span { display: none; }
  .tl-lane-name { font-size: 9.5px; left: 12px; gap: 6px; padding: 4px 8px 4px 4px; }
  .tl-lane-name .tl-ico { width: 28px; height: 18px; }
  .tl-sum-row { grid-template-columns: 74px minmax(0, 1fr) 76px; gap: 10px; font-size: 9.5px; }
  .tl-sum-row b { white-space: nowrap; font-size: 11.5px; }
}
@media (max-height: 760px) { .tl-stage { --t2: 96px; --t1: 38px; } .tl-sub { display: none; } }

/* Static: no scroll pan (if REDUCED is ever turned on); the summary stands in */
.tl--static .tl-scroll { height: auto; }
.tl--static .tl-stage { position: relative; height: auto; }
.tl--static .tl-viewport, .tl--static .tl-legend, .tl--static .tl-clock { display: none; }
.tl--static .tl-finale { position: relative; opacity: 1; transform: none; padding-block: 40px clamp(56px, 8vw, 96px); }
.tl--static .tl-sum-bar i { transform: none; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field .lbl { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--field-line, var(--line)); border-radius: 0;
  padding: 10px 0; min-height: 44px; color: var(--fg); outline: none; transition: border-color .25s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 28px; cursor: pointer; }
.field select option { color: var(--charcoal); background: #fff; }
/* The gold underline alone is 2.4:1 on the light surface; keyboard focus also gets the ring */
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); outline: none; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.field.is-error input, .field.is-error select { border-bottom-color: var(--error); }
.field .err { display: none; font-size: var(--fs-small); color: var(--error); }
.field.is-error .err { display: block; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-note { font-size: var(--fs-small); color: var(--fg-muted); border-top: 1px solid var(--line); padding-top: 20px; }
.form-status { display: none; padding: 20px 24px; border: 1px solid var(--gold); background: rgba(207,153,65,.08); }
.form-status.is-on { display: block; }
/* Spam trap: off screen for people, still in the form for bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  min-height: 220px; padding: 24px; border: 1px dashed var(--accent-text); cursor: pointer; transition: background .25s, border-style .25s;
}
.dropzone:hover, .dropzone.is-over { background: rgba(207,153,65,.06); border-style: solid; }
.dropzone:focus-within { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .label { color: var(--fg); }
.dropzone .mono { color: var(--fg-muted); }
.filelist { display: flex; flex-direction: column; gap: 8px; }
.filelist li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--gold); }
.filelist li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist li span:first-child { flex: 1 1 auto; }
.filelist li .mono { flex: none; }
.filelist li button { color: var(--accent-text); font-size: 22px; line-height: 1; padding: 0 4px; }

/* Download rows */

/* Notes and disclaimers */
.note { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); color: var(--fg-muted); max-width: var(--measure); }
.note::before { content: ""; flex: none; width: 24px; height: 1px; background: var(--gold); margin-top: .7em; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; }
.cta-band .display { font-size: clamp(2.25rem, 1rem + 4.6vw, 5rem); }
.cta-band .section-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
@media (max-width: 900px) { .cta-band .section-inner { grid-template-columns: 1fr; } }

/* Sticky side nav (Technical) */

/* Performance micro-scenes — drawn as projected assemblies, animated as independent
   vector layers. No canvas/WebGL requirement; hidden and offscreen scenes are paused. */
.perf-fig {
  position: relative; border: 1px solid var(--line); aspect-ratio: 1;
  padding: 5% 5% 12%; margin: 0; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 49% 46%, rgba(207,153,65,.065), transparent 62%), #20262a;
}
.perf-fig::before, .perf-fig::after {
  content: ""; position: absolute; width: 8px; height: 8px; pointer-events: none;
  border-color: rgba(207,153,65,.7); border-style: solid;
}
.perf-fig::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.perf-fig::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.perf-fig svg { display: block; width: 100%; height: 100%; overflow: visible; }
.perf-fig figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 12px;
  padding-top: 11px; border-top: 1px solid rgba(229,231,235,.14);
  font-size: clamp(9px, .85vw, 11px); letter-spacing: .025em;
}
.perf-fig .pf-grid { fill: none; stroke: #aeb6b9; stroke-width: .55; opacity: .085; }
.perf-fig .pf-ground { fill: none; stroke: #e5e7eb; stroke-width: 1; opacity: .24; }
.perf-fig .pf-cross { fill: none; stroke: #cf9941; stroke-width: 1; opacity: .54; }
.perf-fig .pf-face { fill: #646c6e; stroke: #c8c9c2; stroke-width: 1.3; }
.perf-fig .pf-side { fill: #353c3f; stroke: #abb0ad; stroke-width: 1.2; }
.perf-fig .pf-top { fill: #90938c; stroke: #e0d8c6; stroke-width: 1.2; }
.perf-fig .pf-core { fill: #b08d53; stroke: #d8ae6d; stroke-width: .8; opacity: .87; }
.perf-fig .pf-detail { fill: none; stroke: #ead7ad; stroke-width: 1; opacity: .75; }
.perf-fig .pf-pin { fill: #e3bc7a; stroke: #24292c; stroke-width: 1.5; }
.perf-fig .pf-paper-face { fill: #30383b; stroke: #819093; stroke-width: 1; }
.perf-fig .pf-paper-rule { fill: none; stroke: #849398; stroke-width: 1; opacity: .8; }
.perf-fig .pf-leader { fill: none; stroke: #e3bc7a; stroke-width: 1; stroke-dasharray: 3 3; }
.perf-fig .pf-card { fill: #343b3d; stroke: #cf9941; stroke-width: 1.2; }
.perf-fig .pf-card-line { fill: none; stroke: #e3bc7a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.perf-fig .pf-brace { fill: none; stroke: #e3bc7a; stroke-width: 1.6; stroke-dasharray: 4 4; }
.perf-fig .pf-foundation { fill: #343b3e; stroke: #a8ada8; stroke-width: 1.3; }
.perf-fig .pf-load, .perf-fig .pf-heat, .perf-fig .pf-junction {
  fill: none; stroke: #e3bc7a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.perf-fig .pf-heat { stroke-width: 1.8; }
.perf-fig .pf-junction { stroke: #d1be94; stroke-width: 1.3; }
.perf-fig .pf-opening { fill: #202629; stroke: #e3bc7a; stroke-width: 1.2; }
.perf-fig .pf-opening-edge { fill: #343b3d; stroke: #cf9941; stroke-width: 1; }
.perf-fig .pf-lining-face { fill: #bac0b9; stroke: #e5e7eb; stroke-width: 1; }
.perf-fig .pf-lining-side { fill: #5d6668; stroke: #d9d8cb; stroke-width: 1; }
.perf-fig .pf-flame { fill: #cf9941; stroke: #e3bc7a; stroke-width: 1.2; }
.perf-fig .pf-flame-inner { fill: #f0cb88; stroke: none; }
.perf-fig .pf-embers { fill: #e3bc7a; }
.perf-fig .pf-sound { fill: none; stroke: #e3bc7a; stroke-width: 1.6; stroke-linecap: round; }
.perf-fig .pf-sound--two { stroke-width: 1.2; opacity: .65; }
.perf-fig .pf-sound-axis { fill: none; stroke: #cf9941; stroke-width: .8; stroke-dasharray: 3 5; opacity: .4; }
.perf-fig .pf-sheet { fill: #424b4d; stroke: #bdc0b7; stroke-width: 1.2; }
.perf-fig .pf-sheet-side { fill: #2b3336; stroke: #858f90; stroke-width: 1; }
.perf-fig .pf-nesting { fill: none; stroke: #e3bc7a; stroke-width: 1; stroke-dasharray: 3 3; }
.perf-fig .pf-cut-top { fill: #c29a60; stroke: #edd3a1; stroke-width: 1.2; }
.perf-fig .pf-cut-side { fill: #786b58; stroke: #d1b17b; stroke-width: 1; }
.perf-fig .pf-lift-guide { fill: none; stroke: #cf9941; stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }

/* The solid projected geometry is deliberately static; moving assembly details
   supply the motion without compromising an architect's ability to read it. */
/* Outranks the per-figure animation shorthands (0,2,0), which reset play-state. */
.perf-fig:not(.is-inview) svg * { animation-play-state: paused; }
.perf-fig--compliance .pf-paper { animation: pf-drift 6s ease-in-out infinite; }
.perf-fig--compliance .pf-evidence { animation: pf-evidence 4.5s ease-in-out infinite; transform-origin: 240px 162px; }
.perf-fig--structural .pf-load { animation: pf-load 2.7s ease-in-out infinite; }
.perf-fig--structural .pf-brace { animation: pf-trace 5s linear infinite; }
.perf-fig--thermal .pf-heat { animation: pf-flow 3.6s ease-in-out infinite; }
.perf-fig--thermal .pf-heat--two { animation-delay: -1.2s; }
.perf-fig--thermal .pf-heat--three { animation-delay: -2.4s; }
.perf-fig--thermal .pf-junction { animation: pf-pulse 3.6s ease-in-out infinite; }
.perf-fig--fire .pf-lining { animation: pf-layer 5.4s ease-in-out infinite; }
.perf-fig--fire .pf-flame { animation: pf-flame 2.4s ease-in-out infinite; transform-origin: 264px 202px; }
.perf-fig--fire .pf-embers { animation: pf-embers 2.4s ease-out infinite; }
.perf-fig--acoustic .pf-sound--one { animation: pf-wave 3.1s ease-in-out infinite; transform-origin: 64px 169px; }
.perf-fig--acoustic .pf-sound--two { animation: pf-wave-soft 3.1s ease-in-out infinite; transform-origin: 239px 171px; }
.perf-fig--sustain .pf-cut--one { animation: pf-lift-one 5.6s ease-in-out infinite; }
.perf-fig--sustain .pf-cut--two { animation: pf-lift-two 5.6s ease-in-out infinite; }
@keyframes pf-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-3px,2px); } }
@keyframes pf-evidence { 0%,15%,85%,100% { transform: translateY(0); opacity: .65; } 40%,65% { transform: translateY(-7px); opacity: 1; } }
@keyframes pf-load { 0%,100% { transform: translateY(-6px); opacity: .45; } 55% { transform: translateY(3px); opacity: 1; } }
@keyframes pf-trace { 0% { stroke-dashoffset: 32; opacity: .45; } 50% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .45; } }
@keyframes pf-flow { 0%,100% { transform: translateX(-7px); opacity: .25; } 55% { transform: translateX(6px); opacity: 1; } }
@keyframes pf-pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes pf-layer { 0%,15%,85%,100% { transform: translateX(0); } 45%,65% { transform: translateX(-5px); } }
@keyframes pf-flame { 0%,100% { transform: scale(.93) rotate(-3deg); opacity: .72; } 50% { transform: scale(1.05) rotate(3deg); opacity: 1; } }
@keyframes pf-embers { 0% { transform: translateY(5px); opacity: 0; } 45% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes pf-wave { 0%,100% { transform: scaleX(.86); opacity: .38; } 50% { transform: scaleX(1.09); opacity: 1; } }
@keyframes pf-wave-soft { 0%,100% { transform: scaleX(.8); opacity: .25; } 50% { transform: scaleX(1.08); opacity: .7; } }
@keyframes pf-lift-one { 0%,14%,88%,100% { transform: translateY(0); } 39%,67% { transform: translateY(-15px); } }
@keyframes pf-lift-two { 0%,28%,88%,100% { transform: translateY(0); } 52%,74% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .perf-fig svg * { animation: none !important; }
}

/* Process: sticky scroll rig */
/* Six stages at 400vh each. The longer track gives the detailed panel,
   delivery and builder-install choreography room to read without rushing. */
.process-track { position: relative; height: 2400vh; }
.process-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.process-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 4vw, 64px); align-items: center; width: 100%; }
.process-stage { display: flex; flex-direction: column; gap: 20px; }
.process-copy { min-height: 130px; }
.process-copy h3, .process-copy p {
  transition: opacity .42s var(--ease-out), transform .42s var(--ease-out);
}
.process-copy h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.process-copy.is-swapping h3, .process-copy.is-swapping p { opacity: 0; transform: translateY(6px); }
@media (max-width: 900px) {
  .process-sticky { align-items: flex-start; padding-top: calc(var(--header-h) + 16px); }
  .process-grid { grid-template-columns: 1fr; gap: 16px; }
  .process-side h2 { font-size: var(--fs-h3); }
  .process-side .rail { flex-direction: row; gap: 8px; margin-top: 16px !important; }
  .process-side .rail::before { left: 8px; right: 8px; top: 50%; bottom: auto; width: auto; height: 1px; }
  .process-side .rail .fill { top: 50%; left: 8px; height: 1px; width: var(--fill, 0%); }
  .process-side .rail .step { padding: 6px 4px; }
  /* Labels stay in the accessibility tree: visually hidden, not display:none */
  .process-side .rail .step > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .process-copy { min-height: 0; }
  .process-copy h3 { font-size: var(--fs-h4); }
  .process-copy p { font-size: var(--fs-small); }
}

/* Anchor offset for the fixed header */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
#why { scroll-margin-top: 0; }

/* Page hero (interior pages) */
.page-hero { padding-top: calc(var(--header-h) + clamp(64px, 9vw, 128px)); padding-bottom: clamp(48px, 6vw, 96px); }
.page-hero .display { margin-bottom: 28px; }
.crumbs { display: flex; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; color: var(--fg-muted); margin-bottom: 28px; }
.crumbs a:hover { color: var(--accent-text); }
.crumbs i { width: 16px; height: 1px; background: var(--gold); }

/* ---------- Footer ------------------------------------------------------ */
.site-footer { background: var(--charcoal-900); color: #fff; padding: clamp(64px, 8vw, 112px) 0 40px; border-top: 1px solid rgba(255,255,255,.08); }
.site-footer .top { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px 32px; }
.site-footer .brand img { height: 64px; }
.site-footer .tagline { margin-top: 24px; max-width: 30ch; color: rgba(255,255,255,.7); font-size: var(--fs-small); }
.site-footer .col { display: flex; flex-direction: column; gap: 12px; }
.site-footer .col b { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 8px; }
.site-footer .col a { font-size: var(--fs-small); color: rgba(255,255,255,.72); transition: color .25s; }
.site-footer .col a:hover { color: var(--gold); }
.site-footer .col address { font-style: normal; font-size: var(--fs-small); color: rgba(255,255,255,.72); line-height: 1.7; }
.site-footer .bottom { margin-top: clamp(48px, 6vw, 96px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .05em; color: rgba(255,255,255,.66); }
.site-footer .ack { grid-column: 1 / -1; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: var(--fs-small); color: rgba(255,255,255,.66); max-width: 70ch; }
@media (max-width: 1000px) { .site-footer .top { grid-template-columns: 1fr 1fr; } .site-footer .top > .brand-col { grid-column: 1 / -1; } }
@media (max-width: 560px) { .site-footer .top { grid-template-columns: 1fr; } }

/* ---------- Page load --------------------------------------------------- */
.hero-copy > * { opacity: 0; transform: translateY(18px); animation: rise 1s var(--ease-out) forwards; }
.hero-copy > *:nth-child(1) { animation-delay: .15s; }
.hero-copy > *:nth-child(2) { animation-delay: .3s; }
.hero-copy > *:nth-child(3) { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Print */
@media print {
  .site-header, .mobile-menu, #gl, .scroll-cue, .hero-pause { display: none !important; }
  .section { padding-block: 32px; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* No-JS fallback for the injected header and footer */
.noscript-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 16px var(--gutter, 20px); margin: 0; background: var(--charcoal); color: #fff; font-size: var(--fs-small); }
.noscript-nav a { color: inherit; }

/* Hero video pause control (WCAG 2.2.2) */
.hero-pause {
  position: absolute; z-index: 3; right: var(--gutter); bottom: 18px;
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
  background: rgba(31,36,40,.55); color: #fff;
  transition: border-color .2s, background-color .2s;
}
.hero-pause[hidden] { display: none; }
.hero-pause:hover { border-color: var(--gold); background: rgba(31,36,40,.8); }
.hero-pause:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Pause glyph (two bars); becomes a play triangle when pressed */
.hero-pause i { width: 10px; height: 12px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.hero-pause[aria-pressed="true"] i {
  width: 0; height: 0; border-inline: 0; margin-left: 3px;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor;
}
@media (max-width: 900px) { .hero-pause { bottom: 12px; width: 36px; height: 36px; } }

/* Calls to action closing the System and Performance sections */
.sx-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.perf-cta { margin-top: clamp(22px, 2.6vw, 34px); }

/* Narrow phones: the three System figures wrap rather than overlap */
@media (max-width: 420px) {
  .sx-figs { grid-template-columns: 1fr 1fr; }
  .sx-figs > div:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .sx-figs dd { white-space: normal; font-size: 20px; }
}
/* FAQ search: a visible keyboard focus ring */
.faq-search input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
/* FAQ topics on a phone: a fade at the edge says the row scrolls */
@media (max-width: 900px) {
  .faq-topics { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}