/* ==========================================================================
   Kelvin Compute — kelvincompute.com
   Nordic industrial: timber, stone, deep forest green, slate, warm off-white.
   No framework. Custom properties → base → layout → components → motion → print.
   ========================================================================== */

/* ---------- 0. Self-hosted fonts (SIL Open Font License — see fonts/) ---------- */
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/familjen-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("fonts/familjen-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Familjen Grotesk";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/familjen-grotesk-latin-wght-italic.woff2") format("woff2-variations"),
       url("fonts/familjen-grotesk-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ---------- 1. Tokens ---------- */
:root {
  --c-forest-950: #0D1F17;
  --c-forest-900: #12291F;
  --c-forest-800: #1B3A2C;
  --c-forest-700: #245040;
  --c-forest-600: #2F6A4E;
  --c-forest-100: #E3EBE2;

  --c-slate-900: #1E262B;
  --c-slate-700: #3A4A52;
  --c-slate-500: #5B6B73;
  --c-slate-300: #A9B4BA;

  --c-stone-500: #A79E8E;
  --c-stone-400: #BEB5A5;
  --c-stone-300: #D8D1C4;
  --c-stone-200: #E8E3D8;
  --c-stone-100: #F1EDE5;
  --c-offwhite: #F7F3EB;
  --c-paper: #FCFAF6;

  --c-timber-700: #6F4722;
  --c-timber-600: #8C5A2B;
  --c-timber-500: #B07A44;
  --c-timber-400: #C89A63;
  --c-timber-300: #DDBF93;

  --c-power: #0F7A9C;
  --c-power-dark: #6FBBD3;
  --c-heat: #B4802A;
  --c-heat-dark: #E0A64A;

  --c-ink: #171F1B;
  --c-ink-2: #3E4A45;
  --c-ink-3: #5C6862;
  --c-on-dark: #F3EFE6;
  --c-on-dark-2: #C8CFC9;
  --c-on-dark-3: #A3ADA6;

  --focus: var(--c-timber-500);
  --ease: cubic-bezier(.19, 1, .22, 1);
  --dur-press: 0.18s;
  --dur-cross: 0.68s;

  /* Tight type scale: body, small, meta, h1–h3, stat. */
  --font-sans: "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-meta: 0.75rem;
  --fs-h1: clamp(2.5rem, 1.1rem + 4.6vw, 4.4rem);
  --fs-h2: clamp(1.85rem, 1.2rem + 2.2vw, 3.1rem);
  --fs-h3: 1.25rem;
  --fs-stat: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
  --c-sky: #D7E4EA;
  --c-mist: #E8E8E7;
  --c-dark-act: #181414;

  --container: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(3.5rem, 8vw, 7.25rem);
  --header-h: 56px;
  --radius: 4px;
  --radius-sm: 4px;
  --measure: 66ch;

  /* CSS film grain — no texture file */
  --grain:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 36px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-offwhite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 400; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--c-timber-300); color: var(--c-ink); }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  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: absolute; left: 0; right: 0; top: 0; z-index: 200;
  padding: 0.75rem 1rem; background: var(--c-timber-300); color: var(--c-forest-950);
  font-weight: 600; text-align: center; text-decoration: none;
  transform: translateY(-120%);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: 3px solid var(--c-forest-950);
  outline-offset: -3px;
}

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

.section, .hero, #why, #approach, #system, #hall, #sites, #holds, #use-cases, #start, #faq, #contact,
.section__title, #hero-title, #sites-title, #bring-title, #compute-buyers, [id^="part-"],
#flex-unit, #flex-parts, #flex-bring, #flex-specs, #flex-scale, #flex-heat, #flex-compare, #flex-pay, #flex-sheet {
  scroll-margin-top: calc(var(--header-h) + 36px);
}

.hero__inner > *, .hero__copy, .gap-grid > *, .site-footer__grid > *, .tracks > *, .holds-scan > *, .pay-strip ol > *, .faq__list > *, .bring__grid > * { min-width: 0; }
.text-link, .site-footer a { overflow-wrap: anywhere; }

/* ---------- 3. Shared pieces ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-timber-600);
  margin: 0 0 0.85rem;
}

.section { padding-block: var(--section-pad); }
.section__head { max-width: var(--measure); margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.section__title { font-size: var(--fs-h2); }
.section__lead { font-size: var(--fs-body); color: var(--c-ink-2); margin-top: 0.65rem; max-width: var(--measure); line-height: 1.55; }
.section__head--on-dark .section__title { color: var(--c-on-dark); }
.section__head--on-dark .section__lead { color: var(--c-on-dark-2); }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.brand__mark {
  height: 28px;
  width: auto;
  aspect-ratio: 87.233 / 100;
  flex: none;
  display: block;
  overflow: visible;
}
.brand__mark--on-dark { display: none; }
.nav-pill[data-on-dark] .brand__mark--on-light { display: none; }
.nav-pill[data-on-dark] .brand__mark--on-dark { display: block; }
.brand__name { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.brand__name-light { font-weight: 400; }

/* One filled (amber), one ghost. Ghost-light is the same outline on dark. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.55rem 1.15rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn:hover { text-decoration: none; }
.btn--sm { min-height: 36px; padding: 0.35rem 0.85rem; font-size: 0.875rem; }
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } .cta-row > .btn { flex: 1 1 auto; } }

.btn--primary,
.btn--accent { background: var(--c-timber-400); color: var(--c-forest-950); border-color: var(--c-timber-400); }
.btn--primary:hover,
.btn--accent:hover,
.btn--primary:focus-visible,
.btn--accent:focus-visible { background: var(--c-timber-300); border-color: var(--c-timber-300); }
.hero .btn--accent:hover,
.hero .btn--accent:focus-visible { box-shadow: 0 0 0 1px var(--c-timber-300); }

.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-stone-400); }
.btn--ghost:hover { background: transparent; border-color: var(--c-ink); color: var(--c-ink); }

.btn--ghost-light { background: transparent; color: var(--c-on-dark); border-color: rgba(243, 239, 230, 0.45); }
.btn--ghost-light:hover,
.btn--ghost-light:focus-visible { background: rgba(243, 239, 230, 0.06); border-color: rgba(243, 239, 230, 0.85); }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.15rem; }

.text-link { color: var(--c-forest-700); font-weight: 500; }
.text-link:hover { color: var(--c-forest-600); }
.text-btn {
  display: inline; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0;
  font: inherit; font-weight: 500; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.18em; cursor: pointer;
}
.text-btn:hover { text-decoration-thickness: 2px; }

.icon { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 4. Header / nav — floating pill ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border: 0; color: var(--c-ink);
  pointer-events: none;
  --c-power: var(--c-power); --c-heat: var(--c-heat); --focus: var(--c-timber-500);
}
.site-header.is-scrolled { background: transparent; border: 0; }
.nav-pill {
  position: relative;
  pointer-events: auto;
  display: flex; align-items: center; gap: 0.75rem;
  width: min(100% - 1.5rem, 1120px);
  margin: 0.85rem auto 0;
  min-height: 52px;
  padding: 0.2rem 0.2rem 0.2rem 1rem;
  background: rgba(247, 243, 235, 0.52);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(23, 31, 27, 0.08);
  border-radius: 999px 3px 3px 999px;
  box-shadow: 0 8px 32px rgba(13, 31, 23, 0.08);
}
.nav-pill .brand { margin-right: auto; color: var(--c-forest-950); }
.site-header .brand__name { font-weight: 500; }

.nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 48;
  background: rgba(13, 31, 23, 0.28);
  pointer-events: auto;
}
body.nav-open .nav-overlay { display: block; }
body.nav-open { overflow: hidden; }

.site-nav { display: flex; align-items: center; }
.site-nav__list { display: flex; gap: 1.15rem; list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
  display: inline-block; padding: 0.35rem 0; text-decoration: none; font-weight: 500;
  font-size: 0.88rem; color: var(--c-ink-2); border-bottom: 1px solid transparent;
}
.site-nav__list a:hover { color: var(--c-ink); text-decoration: none; }
.site-nav__list a[aria-current="true"] { color: var(--c-ink); border-bottom-color: var(--c-timber-500); }

.nav-toggle {
  display: none; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.3rem 0.7rem;
  background: transparent; border: 1px solid rgba(23, 31, 27, 0.18); border-radius: 999px;
  color: var(--c-ink); cursor: pointer; margin-right: 0.35rem;
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.nav-toggle__bars span { display: block; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-toggle__label { font-size: 0.875rem; font-weight: 500; }

.site-header__cta { flex: none; }

@media (max-width: 1199px) {
  .nav-toggle { display: inline-flex; }
  .site-header__cta { display: none; }
  .site-nav {
    position: absolute; left: 0.75rem; right: 0.75rem; top: calc(100% + 0.55rem); z-index: 51;
    display: none; flex-direction: column; align-items: stretch;
    background: rgba(13, 31, 23, 0.96); color: var(--c-on-dark);
    border-radius: 18px; padding: 0.75rem 1.15rem 1.15rem;
    border: 1px solid rgba(243, 239, 230, 0.1);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { display: block; padding: 0.75rem 0; font-size: 1.05rem; color: var(--c-on-dark-2); border-bottom: 1px solid rgba(243, 239, 230, 0.08); }
  .site-nav__list a[aria-current="true"] { color: var(--c-timber-300); border-bottom-color: rgba(243, 239, 230, 0.08); }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav-overlay { display: none !important; }
  html:not(.js) .site-nav { position: static; display: flex; background: transparent; color: inherit; padding: 0; border: 0; }
  html:not(.js) .site-nav__list { flex-direction: row; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
  html:not(.js) .site-nav__list a { border: 0; padding: 0.35rem 0; font-size: 0.9rem; color: var(--c-ink-2); }
  html:not(.js) .nav-pill { flex-wrap: wrap; border-radius: 18px; }
  html:not(.js) .site-header { position: static; pointer-events: auto; }
  html:not(.js) .site-header__cta { display: inline-flex; }
}

/* ---------- 5. Hero ---------- */
.hero {
  position: relative; color: var(--c-on-dark);
  background: var(--c-forest-950);
  --focus: var(--c-timber-400);
  --c-power: var(--c-power-dark); --c-heat: var(--c-heat-dark);
}
.hero__viewport {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(2.4rem, 11vh, 5.75rem) 0 clamp(3.25rem, 12vh, 6.5rem);
}
.hero__stage {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: #121c22;
}
.hero__layer { position: absolute; will-change: transform; }
.hero__layer picture { position: absolute; inset: 0; display: block; }
.hero__layer img {
  display: block; width: 100%; height: 100%;
  max-width: none; object-fit: cover;
}
.hero__layer--sky {
  inset: -18% -6% -8% -6%;
  z-index: 0;
}
.hero__layer--sky img { object-position: center 38%; }
.hero__layer--halls {
  inset: 6% -8% -22% -8%;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 14%, #000 38%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 14%, #000 38%, #000 100%);
}
.hero__layer--halls img { object-position: 58% 62%; }

/* Photographic scrim: diagonal falloff, not a muddy left slab. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(108deg,
      rgba(8, 16, 13, 0.78) 0%,
      rgba(8, 16, 13, 0.58) 18%,
      rgba(8, 16, 13, 0.28) 38%,
      rgba(8, 16, 13, 0.06) 56%,
      transparent 72%),
    linear-gradient(to top,
      rgba(8, 16, 13, 0.48) 0%,
      rgba(8, 16, 13, 0.12) 22%,
      transparent 40%),
    linear-gradient(to bottom,
      rgba(8, 16, 13, 0.32) 0%,
      transparent 22%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.11; mix-blend-mode: overlay;
  background-image: var(--grain);
  background-size: 180px 180px;
}

.hero__inner { position: relative; z-index: 4; }
.hero__copy { max-width: 36rem; }
.hero__title {
  font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.028em; color: var(--c-on-dark);
  text-shadow: 0 2px 28px rgba(8, 16, 13, 0.55);
}
.nowrap { white-space: nowrap; }
@media (max-width: 1100px) { .hero__title .nowrap { white-space: normal; } }
@media (max-width: 420px) { .nowrap { white-space: normal; } }
.hero__tagline {
  font-size: var(--fs-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35;
  color: var(--c-timber-300); margin: 0.55rem 0 0; max-width: 32rem; text-wrap: balance;
  text-shadow: 0 1px 16px rgba(8, 16, 13, 0.45);
}
.hero__lead {
  font-size: var(--fs-small); color: var(--c-on-dark-2); margin-top: 0.55rem;
  max-width: var(--measure); line-height: 1.5;
  text-shadow: 0 1px 14px rgba(8, 16, 13, 0.5);
}
.hero__audiences {
  list-style: none; display: grid; gap: 0.35rem; margin-top: 0.9rem; max-width: 36rem;
  font-size: var(--fs-small); color: var(--c-on-dark-2); line-height: 1.4;
  text-shadow: 0 1px 12px rgba(8, 16, 13, 0.5);
}
@media (min-width: 560px) { .hero__audiences { grid-template-columns: 1fr 1fr; gap: 0.4rem 1.25rem; } }
.hero__audiences strong { color: var(--c-on-dark); font-weight: 600; }
.hero .cta-row { margin-top: 1.05rem; }
.hero__proof {
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.01em;
  color: var(--c-on-dark-2); margin: 0.7rem 0 0; line-height: 1.45; max-width: 36rem;
}
.hero__proof-note { color: var(--c-on-dark-3); }
.hero__where {
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.04em;
  color: var(--c-on-dark-3); margin: 0.4rem 0 0; line-height: 1.45;
}
.hero__specs {
  list-style: none; display: grid; gap: 0.4rem 1.15rem; margin-top: 1rem;
  padding-top: 0.75rem; border-top: 1px solid rgba(243, 239, 230, 0.14);
  color: var(--c-on-dark-2); font-size: var(--fs-small);
}
@media (min-width: 560px) { .hero__specs { grid-template-columns: repeat(3, 1fr); } }
.hero__specs li { position: relative; padding-left: 1rem; line-height: 1.4; }
.hero__specs li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 0.4rem; height: 0.4rem;
  background: var(--c-timber-400); transform: rotate(45deg);
}
.hero__credit {
  position: absolute; left: 0; right: 0; bottom: clamp(0.85rem, 2.2vw, 1.5rem);
  z-index: 4;
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: 0 auto;
  text-align: right;
  color: var(--c-on-dark-3);
}
.hero__credit.viz-cap { justify-content: flex-end; }
.viz-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.85rem;
  margin: 0.4rem 0 0;
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em;
  color: var(--c-ink-3);
}
.viz-cap__kind {
  text-transform: uppercase; letter-spacing: 0.12em; color: inherit;
}
.viz-cap__line {
  text-transform: none; letter-spacing: 0.02em; color: inherit; opacity: 0.9;
}
.hero__credit .viz-cap__kind,
.hero__credit .viz-cap__line { color: var(--c-on-dark-3); }

.hero__thesis {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-timber-300);
  margin: 0.5rem 0 0;
  text-shadow: 0 1px 12px rgba(8, 16, 13, 0.45);
}

/* Fold: H1 + tagline + both CTAs stay above the first screen. Copy sits in the top third, not the lower fifth. */
@media (min-width: 960px) and (max-height: 860px) {
  :root { --header-h: 52px; }
  .hero__viewport { padding-top: clamp(1.6rem, 8vh, 3.25rem); padding-bottom: 4.25rem; }
  .hero__title { font-size: clamp(2rem, 1.15rem + 2vw, 2.85rem); }
  .hero__tagline { margin-top: 0.4rem; }
  .hero .cta-row { margin-top: 0.8rem; }
  .hero__proof { margin-top: 0.5rem; }
}
@media (max-height: 700px) {
  .hero__viewport { padding-top: 1.35rem; padding-bottom: 3.75rem; }
}
@media (max-width: 700px) {
  .hero__viewport {
    justify-content: flex-end;
    min-height: calc(100svh - var(--header-h));
    padding: clamp(1.1rem, 3vw, 2.2rem) 0 clamp(1.2rem, 2.8vw, 1.9rem);
  }
  .hero__credit { position: relative; bottom: auto; margin-top: 0.7rem; }
  .hero__layer--halls {
    inset: 18% -10% -16% -10%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 100%);
  }
  .hero__layer--halls img { object-position: 50% 70%; }
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(8, 16, 13, 0.28) 0%,
        rgba(8, 16, 13, 0.42) 22%,
        rgba(8, 16, 13, 0.72) 52%,
        rgba(8, 16, 13, 0.9) 100%);
  }
  .hero__credit { text-align: left; justify-content: flex-start; }
}

/* Stat strip — hairlines, not tiles */
.hero-stats { position: relative; z-index: 1; padding-top: clamp(1.35rem, 3vw, 2.15rem); }
.stats__note {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-on-dark-3);
  margin: 0 0 0.85rem;
}
.stats {
  list-style: none; display: grid; gap: 0; margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  background: none; border: 0; border-top: 1px solid rgba(243, 239, 230, 0.14);
  border-radius: 0;
}
@media (min-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: 1.1rem 1.25rem 1.15rem 0;
  background: none;
  border-right: 1px solid rgba(243, 239, 230, 0.1);
}
.stat:last-child { border-right: 0; }
@media (max-width: 959px) {
  .stat { padding: 1rem 1rem 1.1rem 0; border-bottom: 1px solid rgba(243, 239, 230, 0.1); }
  .stats { border-bottom: 0; }
}
.stat__value { font-size: var(--fs-stat); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--c-on-dark); margin: 0 0 0.5rem; }
.stat__label { font-size: var(--fs-small); color: var(--c-on-dark-2); line-height: 1.45; }

/* ---------- 6. The gap ---------- */
.section--gap { background: var(--c-offwhite); }
.gap-grid { display: grid; gap: clamp(2.25rem, 5vw, 4rem); }
@media (min-width: 800px) { .gap-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.gap-col { padding-top: 1.25rem; border-top: 1px solid var(--c-stone-300); }
.gap-col p { color: var(--c-ink-2); max-width: var(--measure); }
.gap-col__title { display: flex; align-items: center; gap: 0.65rem; font-size: var(--fs-h3); margin-bottom: 0.9rem; }
.gap-col__key { width: 0.55rem; height: 0.55rem; border-radius: 1px; flex: none; }
.gap-col__key--power { background: var(--c-power); }
.gap-col__key--heat { background: var(--c-heat); }
.gap-punch {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding: 0 0 0 1.15rem;
  border-left: 2px solid var(--c-timber-500); background: none;
  font-size: var(--fs-h3); line-height: 1.4; max-width: 46rem; border-radius: 0;
}

.viz-frame { margin: 0; overflow: hidden; }
.viz-frame__shot {
  position: relative; overflow: hidden; border-radius: 0;
  aspect-ratio: 16 / 9; background: var(--c-forest-900);
}
.principle:not(:first-child) .viz-frame__shot {
  max-height: min(22vh, 200px);
}
.viz-frame__shot img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translate3d(0, var(--viz-shift, 0px), 0);
  transform-origin: center;
}
.viz-frame__shot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.14;
  mix-blend-mode: overlay;
}
.viz-frame__shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(23, 31, 27, 0.2);
}
.viz-frame .viz-cap { margin-top: 0.45rem; }

@media (hover: hover) {
  .viz-frame--featured .viz-frame__shot picture {
    display: block;
    width: 100%; height: 100%;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
  }
  .viz-frame--featured:hover .viz-frame__shot picture {
    transform: scale(1.03);
  }
}

.hybrid-viz {
  display: grid; gap: 1.5rem;
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--c-stone-300);
}
@media (min-width: 880px) {
  .hybrid-viz { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
}

.aside-card { padding: 0; border-radius: 0; background: none; border: 0; }
.aside-card__title { font-size: var(--fs-h3); margin-bottom: 0.75rem; }
.aside-card p { color: var(--c-ink-2); max-width: var(--measure); font-size: var(--fs-small); }

.section--hall { background: var(--c-offwhite); border-top: 1px solid var(--c-stone-300); }

.section--sites { background: var(--c-stone-100); border-top: 1px solid var(--c-stone-300); }
.sites-layout {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 880px) {
  .sites-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: center;
  }
}
.sites-layout .viz-frame__shot {
  aspect-ratio: 3 / 2;
  width: 100%;
  max-height: none;
  overflow: visible;
  background: var(--c-stone-200);
}
.sites-layout .viz-frame__shot img {
  object-fit: cover;
  object-position: center;
}
.sites-map { position: relative; }
.sites-map picture {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sites-map picture img,
.sites-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sites-map__pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
}
.sites-map__pin:focus { outline: none; }
.sites-map__pin:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.sites-map__pin.is-on,
.sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"],
.sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"],
.sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"] { z-index: 5; }
.site-board {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--c-stone-300);
}
.site-board > li { display: block; }
.site-board__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  padding: 1.1rem 0 1.1rem 0.85rem;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--c-stone-300);
  border-left: 2px solid transparent;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.site-board > li:first-child .site-board__row { padding-top: 0; }
.site-board > li:last-child .site-board__row { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 879px) {
  .site-board { border-top: 1px solid var(--c-stone-300); padding-top: 0.35rem; }
  .site-board > li:first-child .site-board__row { padding-top: 1.1rem; }
}
.site-board__code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-timber-600);
}
.site-board__place {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--c-ink);
}
.site-board__row:focus { outline: none; }
.site-board__row:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.sites-layout[data-active-site="k1"] .site-board__row[data-site="k1"],
.sites-layout:has([data-site="k1"]:hover) .site-board__row[data-site="k1"],
.sites-layout:has([data-site="k1"]:focus-visible) .site-board__row[data-site="k1"],
.sites-layout[data-active-site="k2"] .site-board__row[data-site="k2"],
.sites-layout:has([data-site="k2"]:hover) .site-board__row[data-site="k2"],
.sites-layout:has([data-site="k2"]:focus-visible) .site-board__row[data-site="k2"],
.sites-layout[data-active-site="k3"] .site-board__row[data-site="k3"],
.sites-layout:has([data-site="k3"]:hover) .site-board__row[data-site="k3"],
.sites-layout:has([data-site="k3"]:focus-visible) .site-board__row[data-site="k3"] {
  border-left-color: var(--c-heat);
}
.sites-layout[data-active-site="k1"] .site-board__row[data-site="k1"] .site-board__code,
.sites-layout:has([data-site="k1"]:hover) .site-board__row[data-site="k1"] .site-board__code,
.sites-layout:has([data-site="k1"]:focus-visible) .site-board__row[data-site="k1"] .site-board__code,
.sites-layout[data-active-site="k2"] .site-board__row[data-site="k2"] .site-board__code,
.sites-layout:has([data-site="k2"]:hover) .site-board__row[data-site="k2"] .site-board__code,
.sites-layout:has([data-site="k2"]:focus-visible) .site-board__row[data-site="k2"] .site-board__code,
.sites-layout[data-active-site="k3"] .site-board__row[data-site="k3"] .site-board__code,
.sites-layout:has([data-site="k3"]:hover) .site-board__row[data-site="k3"] .site-board__code,
.sites-layout:has([data-site="k3"]:focus-visible) .site-board__row[data-site="k3"] .site-board__code {
  color: var(--c-heat);
}

/* ---------- 7b. Moats ---------- */
.section--moat { background: var(--c-paper); border-top: 1px solid var(--c-stone-300); }

.moats {
  list-style: none;
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.5rem);
}

.moat--visual {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 800px) {
  .moat--visual {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
  .moat--visual .viz-frame__shot {
    aspect-ratio: 3 / 2;
    max-height: min(48vh, 440px);
  }
  .moat--compare .viz-frame__shot {
    aspect-ratio: 3 / 2;
    max-height: min(56vh, 520px);
  }
}
.moat__shot--split img { object-position: center center; }

.moat__num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--c-timber-600);
  margin: 0 0 0.35rem;
  letter-spacing: 0.1em;
}
.moat__title { font-size: var(--fs-h3); margin-bottom: 0.45rem; }
.moat__copy p:not(.moat__num),
.moat--copy > p:not(.moat__num) {
  color: var(--c-ink-2);
  max-width: var(--measure);
  font-size: var(--fs-small);
}

.moat--copy {
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-stone-300);
  max-width: var(--measure);
}

.moat-quiet {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--c-stone-300);
  max-width: var(--measure);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  line-height: 1.5;
}

.hall { margin: 0; }
.section--faq { background: var(--c-paper); border-top: 1px solid var(--c-stone-300); }
.section--faq .faq { margin-top: 0; padding-top: 0; border-top: 0; }
.hall .section__head { margin-bottom: 1.1rem; }
.hall__deploy {
  max-width: var(--measure);
  color: var(--c-ink-2);
  margin: 0 0 1.75rem;
}

.table-wrap { overflow-x: auto; margin: 0; }
.sizes {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--c-stone-300);
  border-radius: 0;
}
.sizes th, .sizes td {
  text-align: left;
  padding: 0.75rem 0.85rem 0.75rem 0;
  border-bottom: 1px solid var(--c-stone-300);
  vertical-align: top;
  color: var(--c-ink-2);
}
.sizes tbody tr:last-child th, .sizes tbody tr:last-child td { border-bottom: 1px solid var(--c-stone-300); }
.sizes thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  font-weight: 500;
  background: none;
  padding-top: 0.35rem;
}
.sizes tbody th {
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
  padding-right: 1.25rem;
}

.compare {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-stone-300);
}
@media (min-width: 720px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col {
  padding: 1.25rem 1.5rem 1.35rem 0;
  background: none;
  border: 0;
  border-right: 1px solid var(--c-stone-300);
  border-radius: 0;
}
.compare__col:last-child { border-right: 0; padding-right: 0; padding-left: 1.5rem; }
@media (max-width: 719px) {
  .compare__col, .compare__col:last-child { padding: 1.15rem 0; border-right: 0; border-bottom: 1px solid var(--c-stone-300); }
  .compare__col:last-child { border-bottom: 0; }
}
.compare__col--kelvin {
  background: none;
  color: inherit;
  border-color: var(--c-stone-300);
}
.compare__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  font-weight: 500;
  margin: 0 0 0.75rem;
}
.compare__col--kelvin .compare__label { color: var(--c-timber-600); }
.compare__col ul { list-style: none; display: grid; gap: 0.5rem; font-size: var(--fs-small); color: var(--c-ink-2); }
.compare__col--kelvin ul { color: var(--c-ink-2); }
.compare__col li { position: relative; padding-left: 1rem; line-height: 1.4; }
.compare__col li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 0.35rem; height: 0.35rem;
  background: var(--c-stone-500);
  transform: rotate(45deg);
}
.compare__col--kelvin li::before { background: var(--c-timber-500); }

.tracks { display: grid; gap: 0; border-top: 1px solid var(--c-stone-300); }
@media (min-width: 860px) { .tracks { grid-template-columns: 1fr 1fr; } }
.track {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.5rem 1.35rem 0;
  background: none;
  border: 0;
  border-right: 1px solid var(--c-stone-300);
  border-radius: 0;
}
.track:last-child { border-right: 0; padding-right: 0; padding-left: 1.5rem; }
@media (max-width: 859px) {
  .track, .track:last-child { padding: 1.2rem 0; border-right: 0; border-bottom: 1px solid var(--c-stone-300); }
  .track:last-child { border-bottom: 0; }
}
.track__who {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-timber-600);
  margin: 0 0 0.35rem;
}
.track__title { font-size: var(--fs-h3); margin-bottom: 0.9rem; }
.track p { color: var(--c-ink-2); font-size: var(--fs-small); }
.track__steps {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--c-stone-300);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}
.track__steps li { display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.45; }
.track__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--c-timber-600);
  flex: none;
  padding-top: 0.1rem;
}
.track__cta { margin-top: auto; }
.track__cta .btn { width: auto; }

.start__human {
  margin: 1.75rem 0 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.faq { margin: 0; padding: 0; border: 0; }
.faq__list { border-top: 1px solid var(--c-stone-300); }
.faq__item { border-bottom: 1px solid var(--c-stone-300); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  padding: 1rem 0;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  width: 0.45rem; height: 0.45rem;
  border-right: 1.5px solid var(--c-timber-600);
  border-bottom: 1.5px solid var(--c-timber-600);
  transform: rotate(45deg);
  flex: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item[open] summary { color: var(--c-forest-800); }
.faq__item p {
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  padding: 0 0 1.1rem;
  max-width: var(--measure);
}

/* ---------- 8. Use cases ---------- */
.bring { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.bring__title { font-size: var(--fs-h3); margin-bottom: 1rem; }
.bring__grid { display: grid; gap: 0; border-top: 1px solid var(--c-stone-300); }
@media (min-width: 720px) { .bring__grid { grid-template-columns: 1fr 1fr; } }
.bring__col {
  padding: 1.2rem 1.35rem 1.3rem 0;
  background: none;
  border: 0;
  border-right: 1px solid var(--c-stone-300);
  border-radius: 0;
}
.bring__col:last-child { border-right: 0; padding-right: 0; padding-left: 1.35rem; }
@media (max-width: 719px) {
  .bring__col, .bring__col:last-child { padding: 1.1rem 0; border-right: 0; border-bottom: 1px solid var(--c-stone-300); }
  .bring__col:last-child { border-bottom: 0; }
}
.bring__col--kelvin { background: none; color: inherit; border-color: var(--c-stone-300); }
.bring__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  font-weight: 500;
  margin: 0 0 0.75rem;
}
.bring__col--kelvin .bring__label { color: var(--c-timber-600); }
.bring__col ul { list-style: none; display: grid; gap: 0.45rem; font-size: var(--fs-small); color: var(--c-ink-2); }
.bring__col--kelvin ul { color: var(--c-ink-2); }
.bring__col li { position: relative; padding-left: 1rem; line-height: 1.4; }
.bring__col li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 0.35rem; height: 0.35rem;
  background: var(--c-stone-500);
  transform: rotate(45deg);
}
.bring__col--kelvin li::before { background: var(--c-timber-500); }

.section--start { background: var(--c-paper); border-top: 1px solid var(--c-stone-300); }

/* ---------- 12. Footer ---------- */
.site-footer {
  background: var(--c-forest-950); color: var(--c-on-dark-2); padding-block: 1.5rem 1.1rem;
  --c-power: var(--c-power-dark); --c-heat: var(--c-heat-dark); --focus: var(--c-timber-400);
}
.site-footer__grid { display: grid; gap: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(243, 239, 230, 0.1); }
@media (min-width: 800px) { .site-footer__grid { grid-template-columns: 1.55fr 1.15fr 0.85fr; } }
.site-footer .brand { color: var(--c-on-dark); }
.site-footer__line { margin-top: 0.85rem; font-size: var(--fs-small); font-weight: 400; color: var(--c-on-dark-2); max-width: 36rem; line-height: 1.45; }
.site-footer__heading { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-timber-400); margin-bottom: 0.45rem; }
.site-footer ul { list-style: none; display: grid; gap: 0.3rem; font-size: var(--fs-small); }
@media (min-width: 700px) {
  .site-footer nav ul { grid-template-columns: 1fr 1fr; column-gap: 1.15rem; row-gap: 0.3rem; }
}
.site-footer a { color: var(--c-on-dark-2); text-decoration: none; }
.site-footer a:hover { color: var(--c-on-dark); text-decoration: underline; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 0.75rem; font-size: 0.8rem; color: var(--c-on-dark-3); }
.site-footer__bottom p { margin: 0; }
.site-footer__colo {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em;
  max-width: 36rem; line-height: 1.45; color: var(--c-on-dark-3);
}

/* ---------- 13. Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(6px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .nav-toggle__bars span, .site-nav__list a, .faq__item summary::after,
  .viz-frame--featured .viz-frame__shot picture { transition: none; }
  .hero__layer { transform: none !important; will-change: auto; }
  .hero__layer--sky { inset: 0; }
  .hero__layer--halls { inset: 12% 0 -8% 0; }
  .viz-frame__shot img { transform: none !important; }
  .viz-frame--featured:hover .viz-frame__shot picture { transform: none; }
  .site-board__row { transition: none; }
}

@media (max-height: 860px) {
  :root { --header-h: 52px; --section-pad: clamp(2.75rem, 5vw, 4.5rem); }
}

/* ---------- 14. Print ---------- */
@media print {
  .site-header, .nav-toggle, .nav-overlay, .skip-link, .hero__grain { display: none !important; }
  .hero__stage { position: relative; min-height: 12rem; }
  .hero__layer { position: absolute; inset: 0; transform: none !important; }
  .hero__layer--halls { -webkit-mask-image: none; mask-image: none; }
  .hero__viewport { min-height: 0; padding: 1rem 0; }
  body { background: #fff; color: #000; }
  .hero, .site-footer, .stat { background: #fff !important; color: #000 !important; }
  .hero__title, .stat__value, .stat__label, .section__head--on-dark .section__title, .section__head--on-dark .section__lead { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .btn::after, .brand::after { content: none !important; }
  .spec-strip, .scale { break-inside: avoid; }
}

/* ==========================================================================
   Eggsplain-pattern restyle — Kelvin tokens only (forest / timber / heat)
   Light → dark → light sandwich. Floating pill + fused CTA already in §4.
   ========================================================================== */

html { scroll-padding-top: 5.75rem; }
.section, .hero:not(.hero--fold), #why, #approach, #system, #hall, #sites, #holds, #use-cases, #start, #faq, #contact,
.section__title, #hero-title, #sites-title, #bring-title, #compute-buyers, #flex-pay {
  scroll-margin-top: 5.75rem;
}

/* CTA: hard-edged timber rectangle + dark arrow square */
.btn { border-radius: 2px; }
.btn--cta {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--c-timber-400); color: var(--c-forest-950);
  border: 1px solid var(--c-timber-400);
  padding: 0.45rem 0.45rem 0.45rem 1.15rem;
  font-weight: 600;
  border-radius: 2px;
}
.btn--cta:hover,
.btn--cta:focus-visible {
  background: var(--c-timber-300); border-color: var(--c-timber-300);
  color: var(--c-forest-950);
  text-decoration: none;
}
.btn__arrow {
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; margin-left: 0.7rem; flex: none;
  background: var(--c-forest-950); color: var(--c-on-dark);
  border-radius: 2px;
}
.btn__arrow svg { width: 0.85rem; height: 0.85rem; display: block; }
.nav-pill .btn--cta {
  align-self: stretch;
  min-height: 48px;
  border-radius: 2px;
  padding-block: 0;
}

/* Square prev/next */
.sq-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.1rem; min-height: 2.5rem; padding: 0.4rem 0.7rem;
  background: var(--c-timber-400); color: var(--c-forest-950);
  border: 0; border-radius: 2px; font-weight: 600; font-size: 0.82rem;
  cursor: pointer;
}
.sq-btn:hover { background: var(--c-timber-300); }
.sq-btn--ghost {
  background: rgba(243, 239, 230, 0.12); color: var(--c-on-dark);
  border: 1px solid rgba(243, 239, 230, 0.28);
}
.sq-btn--ghost:hover { background: rgba(243, 239, 230, 0.2); }

/* Clip-line reveal */
.js .clip { display: block; overflow: clip; }
.js .clip-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .is-visible .clip-inner,
.js .hero:not(.hero--fold) .clip-inner { transform: none; }
.js .hero:not(.hero--fold) .clip:nth-child(2) .clip-inner { transition-delay: 0.08s; }

/* ---------- Light centered hero (halls as object) ---------- */
.hero:not(.hero--fold) {
  position: relative;
  color: var(--c-ink);
  background:
    linear-gradient(180deg, var(--c-sky) 0%, var(--c-mist) 48%, var(--c-offwhite) 100%);
  --focus: var(--c-timber-500);
  min-height: 100svh;
  padding: 0;
}
.hero:not(.hero--fold) .hero__viewport {
  position: relative;
  isolation: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 7.25rem var(--gutter) 0;
}
.hero:not(.hero--fold) .hero__stage,
.hero:not(.hero--fold) .hero__layer,
.hero:not(.hero--fold) .hero__scrim,
.hero:not(.hero--fold) .hero__grain { display: none; }
.hero:not(.hero--fold) .hero__inner { position: relative; z-index: 1; }
.hero:not(.hero--fold) .hero__copy {
  max-width: 42rem;
  margin-inline: auto;
}
.hero:not(.hero--fold) .hero__title {
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--c-forest-950);
  text-shadow: none;
}
.hero:not(.hero--fold) .hero__tagline {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--c-ink-2);
  margin: 1rem auto 0;
  max-width: 34rem;
  text-shadow: none;
}
.cta-row--center { justify-content: center; margin-top: 1.4rem; }
.hero:not(.hero--fold) .btn--accent, .hero:not(.hero--fold) .btn--ghost-light { /* leftover */ }
.hero:not(.hero--fold) .hero__object {
  width: min(100%, 1080px);
  margin-top: auto;
  padding-top: 1.75rem;
}
.hero:not(.hero--fold) .hero__object picture { display: block; }
.hero:not(.hero--fold) .hero__object img {
  width: 100%; height: auto; max-height: min(56vh, 560px);
  object-fit: cover; object-position: 50% 62%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 100%);
}
.hero:not(.hero--fold) .hero__credit {
  position: static; width: auto; margin: 0.55rem 0 1.25rem;
  text-align: center; justify-content: center;
  color: var(--c-ink-3);
}
.hero:not(.hero--fold) .hero__credit .viz-cap__kind, .hero:not(.hero--fold) .hero__credit .viz-cap__line { color: var(--c-ink-3); }

/* Light stats (moved out of dark hero) */
.section--gap .hero-stats { padding-top: 0; margin: clamp(2rem, 4vw, 3rem) 0; }
.section--gap .stats__note { color: var(--c-ink-3); }
.section--gap .stats {
  border-top-color: var(--c-stone-300);
}
.section--gap .stat { border-right-color: var(--c-stone-300); }
.section--gap .stat__value { color: var(--c-forest-950); }
.section--gap .stat__label { color: var(--c-ink-2); }
@media (max-width: 959px) {
  .section--gap .stat { border-bottom-color: var(--c-stone-300); }
}

.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .section__lead { margin-inline: auto; }

/* Numbered claim chips */
.claims {
  list-style: none;
  display: grid;
  gap: 1.35rem 1.75rem;
  margin: 0 0 clamp(2.25rem, 5vw, 3.5rem);
}
@media (min-width: 800px) { .claims { grid-template-columns: 1fr 1fr; } }
.claim { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; }
.claim__n {
  display: grid; place-items: center;
  width: 1.55rem; height: 1.55rem; flex: none;
  background: var(--c-timber-500); color: var(--c-forest-950);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  border-radius: 2px;
}
.claim__title { font-size: 1.15rem; font-weight: 500; margin: 0 0 0.3rem; letter-spacing: -0.02em; }
.claim__body p { margin: 0; color: var(--c-ink-2); font-size: 1rem; line-height: 1.5; max-width: 42ch; }

/* Six reasons — hairline rows */
.section--thesis { background: var(--c-paper); border-top: 1px solid var(--c-stone-300); }
.thesis {
  display: grid; gap: clamp(1.75rem, 4vw, 3.25rem);
}
@media (min-width: 880px) {
  .thesis { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); align-items: start; }
  .thesis__pin { position: sticky; top: 6rem; }
}
.thesis__title { font-size: var(--fs-h2); font-weight: 400; }
.reason-rows { list-style: none; margin: 0; border-top: 1px solid var(--c-stone-300); }
.reason-row {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem;
  padding: 1.05rem 0; border-bottom: 1px solid var(--c-stone-300); align-items: start;
}
.reason-row__title { font-size: 1.15rem; font-weight: 500; margin: 0 0 0.25rem; }
.reason-row p { margin: 0; color: var(--c-ink-2); font-size: 1rem; line-height: 1.5; }

/* ---------- Dark act ---------- */
.section--dark {
  position: relative;
  background: var(--c-dark-act);
  color: var(--c-on-dark);
  overflow: hidden;
  border-top: 0;
}
.section--dark::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 72% -10%, rgba(176, 122, 68, 0.32), transparent 55%),
    radial-gradient(ellipse 55% 40% at 18% -8%, rgba(243, 239, 230, 0.14), transparent 50%);
}
.section--dark::after {
  content: "";
  position: absolute; left: 50%; top: 4%; z-index: 0; pointer-events: none;
  width: min(78vw, 760px); height: min(78vw, 760px);
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg, transparent 0 7deg, rgba(243,239,230,0.07) 7deg 7.35deg);
  -webkit-mask-image: radial-gradient(circle, transparent 61%, #000 62.5%, #000 66%, transparent 67.5%);
  mask-image: radial-gradient(circle, transparent 61%, #000 62.5%, #000 66%, transparent 67.5%);
}
.section--dark > .container { position: relative; z-index: 1; }
.section--dark .section__title { color: var(--c-on-dark); font-weight: 400; }
.section--dark .section__lead { color: var(--c-on-dark-2); max-width: 36rem; }

.hall-stage__features {
  list-style: none;
  display: grid;
  gap: 1rem 1.5rem;
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
}
@media (min-width: 800px) { .hall-stage__features { grid-template-columns: 1fr 1fr; } }
.hall-stage__feat-title { font-weight: 500; margin: 0 0 0.25rem; }
.hall-stage__features p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--c-ink-2); }
.hall-stage__features--dark p { color: var(--c-on-dark-2); }
.hall-stage__features--dark .hall-stage__feat-title { color: var(--c-on-dark); }

.sizes--on-dark { border-top-color: rgba(243,239,230,0.14); }
.sizes--on-dark th, .sizes--on-dark td { color: var(--c-on-dark-2); border-bottom-color: rgba(243,239,230,0.12); }
.sizes--on-dark thead th { color: var(--c-on-dark-3); }
.sizes--on-dark tbody th { color: var(--c-on-dark); }

/* ---------- Audience verticals: full-bleed + frost ---------- */
.section--verticals {
  padding: 0;
  background: var(--c-dark-act);
  color: var(--c-on-dark);
  border-top: 0;
}
.verticals { position: relative; min-height: min(92vh, 820px); }
.vertical {
  display: none;
  position: relative;
  min-height: min(92vh, 820px);
}
.vertical.is-active { display: grid; }
html:not(.js) .vertical { display: grid; min-height: 0; }
html:not(.js) .verticals { display: grid; gap: 0; }
.vertical__media {
  position: absolute; inset: 0;
}
.vertical__media img {
  width: 100%; height: 100%; object-fit: cover; max-width: none;
}
.vertical__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(24,20,20,0.15) 0%, rgba(24,20,20,0.25) 42%, rgba(24,20,20,0.55) 100%);
}
.vertical__panel {
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: min(100%, 34rem);
  min-height: min(92vh, 820px);
  padding: clamp(5.5rem, 12vw, 7.5rem) clamp(1.25rem, 3vw, 2.25rem) 2rem;
  background: rgba(28, 24, 24, 0.52);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border-left: 1px solid rgba(243, 239, 230, 0.1);
  display: flex; flex-direction: column;
}
.vertical__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.15rem;
}
.kicker-pill {
  display: inline-flex; align-items: center;
  margin: 0; padding: 0.28rem 0.7rem;
  background: var(--c-timber-500); color: var(--c-forest-950);
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 999px;
}
.vertical__idx {
  margin: 0; font-family: var(--font-mono); font-size: 1rem;
  letter-spacing: 0.04em; color: var(--c-on-dark-3);
}
.vertical__title {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.35rem);
  font-weight: 400; color: var(--c-on-dark); margin: 0 0 0.65rem;
}
.vertical__lead {
  margin: 0 0 1.1rem; color: var(--c-on-dark-2); font-size: 1rem; line-height: 1.5; max-width: 38ch;
}
.vertical__cta { margin-top: 1.1rem; padding-top: 0; }

.vertical-index {
  position: absolute; z-index: 3;
  left: auto; right: 0; bottom: 0;
  width: min(100%, 34rem);
  list-style: none; margin: 0; padding: 0 1.25rem 1.35rem;
}
.vertical-index li { display: list-item; visibility: visible; }
.vertical-index button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0.48rem 0;
  background: none; border: 0; border-top: 1px solid rgba(243,239,230,0.16);
  color: var(--c-on-dark); cursor: pointer; text-align: left; font: inherit;
}
.vertical-index li:last-child button { border-bottom: 1px solid rgba(243,239,230,0.16); }
.vertical-index__name {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-on-dark-2);
}
.vertical-index__n {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--c-on-dark-3);
}
.vertical-index button[aria-pressed="true"] .vertical-index__name,
.vertical-index button[aria-pressed="true"] .vertical-index__n { color: var(--c-timber-300); }
.vertical-index button:focus-visible { outline: 3px solid var(--c-timber-400); outline-offset: 2px; }

.vertical-controls {
  position: relative; z-index: auto;
  left: auto; bottom: auto;
  display: flex; gap: 0.45rem;
}

.cases-follow {
  background: var(--c-stone-100);
  padding-block: var(--section-pad);
  color: var(--c-ink);
}

@media (max-width: 720px) {
  .vertical, .vertical.is-active { display: flex; flex-direction: column; min-height: 0; }
  .vertical__media { position: relative; height: 42vw; min-height: 180px; }
  .vertical__panel {
    width: 100%; min-height: 0; margin: 0;
    padding: 1.5rem var(--gutter) 1.25rem;
    border-left: 0;
  }
  .vertical-index { position: relative; width: 100%; padding: 0 var(--gutter) 1.25rem; }
  html:not(.js) .vertical-controls { display: none; }
}

/* FAQ denser */
.faq__item summary { font-size: 1.15rem; font-weight: 500; padding: 1.15rem 0; }
.faq__item p { padding-bottom: 1.25rem; }

/* Light sandwich sections */
.section--gap { background: var(--c-offwhite); }
.section--sites { background: var(--c-offwhite); }
.section--moat { background: var(--c-paper); }
.section--start { background: var(--c-mist); }
.section--faq { background: var(--c-offwhite); }

@media (prefers-reduced-motion: reduce) {
  .js .clip-inner { transform: none; transition: none; }
}

@media print {
  .nav-pill, .vertical-controls { display: none !important; }
  .hero:not(.hero--fold) { background: #fff !important; color: #000 !important; min-height: 0; }
  .section--dark, .section--verticals { background: #fff !important; color: #000 !important; }
  .vertical { display: grid !important; position: relative; min-height: 0; }
}

.nav-pill { background: rgba(247, 243, 235, 0.42); }


/* ==========================================================================
   Eggsplain-analog motion — Kelvin tokens. No Lenis / GSAP / WebGL.
   ========================================================================== */

.hero:not(.hero--fold) {
  --p: 0;
  --claim: -1;
  min-height: 0;
  padding: 0;
  color: var(--c-ink);
  background: var(--c-stone-100);
}
.hero:not(.hero--fold) .hero__track { height: 240vh; position: relative; }
.hero:not(.hero--fold) .hero__pin {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}
.hero:not(.hero--fold) .hero__sky {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--c-sky) 0%, var(--c-mist) 52%, var(--c-offwhite) 100%);
  opacity: calc(1 - var(--p) * 0.92);
}
.hero:not(.hero--fold) .hero__copy {
  position: relative; z-index: 4;
  max-width: 42rem; margin-inline: auto; text-align: center;
  padding: 6.6rem var(--gutter) 7.5rem;
  opacity: clamp(0, calc(1 - var(--p) * 16), 1);
  transform: translateY(calc(var(--p) * -28px));
  pointer-events: none;
}
.hero:not(.hero--fold) .hero__copy .btn { pointer-events: auto; }
.hero:not(.hero--fold)[data-claim="0"] .hero__copy,
.hero:not(.hero--fold)[data-claim="1"] .hero__copy,
.hero:not(.hero--fold)[data-claim="2"] .hero__copy,
.hero:not(.hero--fold)[data-claim="3"] .hero__copy { pointer-events: none; }

.hero:not(.hero--fold) .hero__stage {
  display: block;
  position: absolute;
  top: 50%;
  right: auto;
  left: 50%;
  bottom: auto;
  z-index: 2;
  width: min(40vw, 540px);
  max-height: none;
  background: transparent;
  overflow: visible;
  transform:
    translate3d(-50%, calc(var(--p) * -14vh), 0)
    scale(calc(1 - var(--p) * 0.16))
    rotate(calc(var(--p) * -5deg));
  transform-origin: 50% 100%;
  will-change: transform;
}
.hero:not(.hero--fold) .hero__object { width: 100%; margin: 0; padding: 0; position: relative; z-index: 1; }
.hero:not(.hero--fold) .hero__object img {
  width: 100%;
  height: min(32vh, 300px);
  max-height: none;
  object-fit: cover;
  object-position: 50% calc(8% + var(--p) * 24%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%);
}
.hero:not(.hero--fold) .hero__credit {
  position: absolute; right: 0.5rem; bottom: 0.85rem;
  z-index: 3; margin: 0; width: auto; text-align: right;
  justify-content: flex-end;
  color: var(--c-ink-3);
}

/* Orbiting claims */
.orbits { list-style: none; margin: 0; }
.orbit {
  position: absolute; z-index: 5;
  width: min(22.5rem, 34vw);
  display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  pointer-events: none;
  transition: opacity 0.48s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.orbit.is-on,
.orbit.is-active { opacity: 1; transform: none; }
.orbit:not(.is-active):not(.is-on) { opacity: 0; }
.orbit--1 { right: 5.5%; top: 46%; left: auto; bottom: auto; }
.orbit--2 { left: 5.5%; top: 46%; right: auto; bottom: auto; }
.orbit--3 { right: 5.5%; top: 46%; left: auto; bottom: auto; }
.orbit--4 { left: 5.5%; top: 46%; right: auto; bottom: auto; }
.orbit__n {
  display: grid; place-items: center;
  width: 1.55rem; height: 1.55rem;
  background: var(--c-timber-500); color: var(--c-forest-950);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  border-radius: 2px;
}
.orbit__title { font-size: 1.15rem; font-weight: 500; margin: 0; letter-spacing: -0.02em; }
.orbit__body p { margin: 0; color: var(--c-ink-2); font-size: 0.98rem; line-height: 1.45; }

.js .hero:not(.hero--fold) .clip-inner { transform: translateY(110%); }
.js .hero:not(.hero--fold).is-ready .clip-inner { transform: none; }
.js .hero:not(.hero--fold).is-ready .clip:nth-child(2) .clip-inner { transition-delay: 0.08s; }

@media (max-width: 880px) {
  .orbit { width: min(15rem, 42vw); }
  .orbit--1, .orbit--3 { right: var(--gutter); left: auto; top: 46%; bottom: auto; }
  .orbit--2 { left: var(--gutter); right: auto; top: 46%; bottom: auto; }
  .hero:not(.hero--fold) .hero__stage { width: min(48vw, 420px); }
  .hero:not(.hero--fold) .hero__copy { padding-top: 5.6rem; }
}

@media (max-width: 640px) {
  .hero:not(.hero--fold) .hero__object img { height: min(28vh, 240px); }
}

/* Flexbox spec strip */
.spec-strip {
  display: grid; gap: 1rem 1.5rem;
  margin: 0 0 0.85rem;
  padding: 1.35rem 0;
  border-top: 1px solid rgba(243, 239, 230, 0.14);
  border-bottom: 1px solid rgba(243, 239, 230, 0.14);
}
@media (min-width: 720px) { .spec-strip { grid-template-columns: 1fr 1fr 1fr; } }
.spec-strip dt {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-on-dark-3);
}
.spec-strip dd { margin: 0.25rem 0 0; color: var(--c-on-dark); font-size: 1rem; line-height: 1.35; }
.spec-strip__note {
  font-size: 0.9rem; color: var(--c-on-dark-3); margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}

/* Clip-path image reveals */
.js .viz-frame__shot picture {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .sites-map picture,
.js .viz-frame__shot.sites-map picture {
  clip-path: none;
  transition: none;
}
.js .is-visible .viz-frame__shot picture,
.js .viz-frame.is-in .viz-frame__shot picture {
  clip-path: inset(0);
}

/* Verticals: stacked crossfade */
.verticals { position: relative; }
.vertical {
  display: grid;
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.vertical.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; z-index: 1;
}
html:not(.js) .vertical { position: relative; opacity: 1; visibility: visible; pointer-events: auto; }

/* Nav tint over dark acts */
.nav-pill[data-on-dark] {
  background: rgba(24, 20, 20, 0.52);
  border-color: rgba(243, 239, 230, 0.14);
  box-shadow: 0 8px 32px rgba(8, 10, 10, 0.28);
}
.nav-pill[data-on-dark] .brand { color: var(--c-on-dark); }
.nav-pill[data-on-dark] .site-nav__list a { color: var(--c-on-dark-2); }
.nav-pill[data-on-dark] .site-nav__list a:hover,
.nav-pill[data-on-dark] .site-nav__list a[aria-current="true"] { color: var(--c-on-dark); }
.nav-pill[data-on-dark] .site-nav__list a[aria-current="true"] { border-bottom-color: var(--c-timber-400); }
.nav-pill[data-on-dark] .nav-toggle {
  color: var(--c-on-dark);
  border-color: rgba(243, 239, 230, 0.28);
}

/* CTA: fill slide from left + arrow nudge */
.btn--cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--c-timber-300);
  transform: translateX(-101%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.btn--cta:hover::before,
.btn--cta:focus-visible::before { transform: none; }
.btn__arrow {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn--cta:hover .btn__arrow,
.btn--cta:focus-visible .btn__arrow {
  transform: translate(2px, -2px) rotate(12deg);
}

@media (prefers-reduced-motion: reduce) {
  .hero:not(.hero--fold) .hero__track { height: auto; }
  .hero:not(.hero--fold) .hero__pin { position: relative; height: auto; min-height: 100svh; overflow: visible; }
  .hero:not(.hero--fold) .hero__copy { opacity: 1; transform: none; padding-bottom: 1rem; }
  .hero:not(.hero--fold) .hero__stage {
    position: relative; top: auto; left: auto; bottom: auto;
    transform: none; width: min(1080px, 100%);
    margin: 0 auto;
    will-change: auto;
  }
  .hero:not(.hero--fold) .hero__object img { height: auto; max-height: min(56vh, 520px); object-position: 50% 40%; }
  .orbits {
    position: relative;
    display: grid; gap: 1.15rem;
    padding: 1.25rem var(--gutter) 2.5rem;
    width: min(100%, 52rem); margin-inline: auto;
  }
  @media (min-width: 800px) { .orbits { grid-template-columns: 1fr 1fr; } }
  .orbit { position: static; opacity: 1; visibility: visible; transform: none; width: auto; }
  .js .viz-frame__shot picture { clip-path: none; transition: none; }
  .btn--cta::before, .btn__arrow { transition: none; }
}

html:not(.js) .hero:not(.hero--fold) .hero__track { height: auto; }
html:not(.js) .hero:not(.hero--fold) .hero__pin { position: relative; height: auto; min-height: 100svh; }
html:not(.js) .orbit { position: static; opacity: 1; visibility: visible; transform: none; }
html:not(.js) .orbits {
  display: grid; gap: 1.15rem; padding: 1.25rem var(--gutter) 2.5rem;
  width: min(100%, 52rem); margin-inline: auto;
}

@media print {
  .hero:not(.hero--fold) .hero__track { height: auto !important; }
  .hero:not(.hero--fold) .hero__pin { position: relative !important; height: auto !important; }
  .orbit { position: static; opacity: 1; visibility: visible; transform: none; }
}

.nav-pill[data-on-dark] {
  background: rgba(18, 16, 16, 0.62);
  border-color: rgba(243, 239, 230, 0.16);
}


/* ---- Ship extras: tilt, rail, chips, map pulse ---- */
.hero:not(.hero--fold) .hero__copy { z-index: 6; isolation: isolate; }
.hero:not(.hero--fold) .hero__stage {
  top: 50%; right: auto; left: 50%; bottom: auto;
  z-index: 2; max-height: none; pointer-events: auto;
  background: transparent; overflow: visible;
}
.hero:not(.hero--fold) .hero__object img { height: auto; max-height: min(42vh, 380px); object-position: 50% 58%; }
.hero:not(.hero--fold) .hero__object {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero:not(.hero--fold) .hero__object.is-tilting { transition: transform 0.1s linear; }

.page-rail {
  position: fixed; right: 0.85rem; top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: none;
  flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0;
}
.page-rail::before {
  content: "";
  position: absolute; left: 50%; top: 0.2rem; bottom: 0.2rem;
  width: 1px; margin-left: -0.5px;
  background: linear-gradient(to bottom, var(--c-timber-400) 0%, var(--c-timber-400) calc(var(--rail-p, 0) * 100%), var(--c-stone-300) calc(var(--rail-p, 0) * 100%), var(--c-stone-300) 100%);
  pointer-events: none;
}
.page-rail a {
  position: relative; z-index: 1;
  width: 8px; height: 8px; padding: 0;
  background: var(--c-stone-300);
  border: 0; transform: rotate(45deg);
  display: block;
}
.page-rail a span { display: none; }
.page-rail a[aria-current="true"] {
  background: var(--c-timber-500);
  transform: rotate(45deg) scale(1.35);
}
.page-rail a:focus-visible { outline: 2px solid var(--c-timber-500); outline-offset: 3px; }
@media (min-width: 1100px) { .page-rail { display: flex; } }

.spec-chips {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem;
  margin: 0 0 1.25rem;
}
.spec-chips li {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-on-dark-3);
  border: 1px solid rgba(243,239,230,0.16);
  padding: 0.45rem 0.8rem;
  border-radius: 2px;
  transform: scale(0.96);
  opacity: 0.55;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.spec-chips.is-lit li,
.spec-chips li:hover {
  opacity: 1; transform: scale(1);
  color: var(--c-forest-950);
  background: var(--c-timber-400);
  border-color: var(--c-timber-400);
}
.spec-chips.is-lit li:nth-child(2) { transition-delay: 0.08s; }
.spec-chips.is-lit li:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .hero:not(.hero--fold) .hero__object { transform: none; }
  .spec-chips li { opacity: 1; transform: none; transition: none; }
  /* Pass 82: do not hide .page-rail. Pulse is already gated; the rail is nav. */
}


/* ---- Craft pass: Flexbox hero, scale, heat, chips, mobile pin ---- */
.spec-chips { list-style: none; }
.spec-chips button {
  font: inherit;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-on-dark-3);
  background: transparent;
  border: 1px solid rgba(243,239,230,0.16);
  padding: 0.45rem 0.8rem;
  border-radius: 2px;
  cursor: pointer;
  transform: scale(0.96);
  opacity: 0.55;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.spec-chips__hint { font-weight: 400; letter-spacing: 0.04em; opacity: 0.8; }
.spec-chips.is-lit button,
.spec-chips button:hover,
.spec-chips button:focus-visible,
.section--hall:has([data-chip="mw"]:hover) .spec-chips [data-chip="mw"],
.section--hall:has([data-chip="mw"]:focus-visible) .spec-chips [data-chip="mw"],
.section--hall:has([data-chip="ft"]:hover) .spec-chips [data-chip="ft"],
.section--hall:has([data-chip="ft"]:focus-visible) .spec-chips [data-chip="ft"],
.section--hall:has([data-chip="ms"]:hover) .spec-chips [data-chip="ms"],
.section--hall:has([data-chip="ms"]:focus-visible) .spec-chips [data-chip="ms"] {
  opacity: 1; transform: scale(1);
  color: var(--c-forest-950);
  background: var(--c-timber-400);
  border-color: var(--c-timber-400);
}
.spec-chips.is-lit:has(button:hover) button,
.spec-chips.is-lit:has(button:focus-visible) button { opacity: 0.45; transform: scale(0.96); background: transparent; color: var(--c-on-dark-3); }
.spec-chips.is-lit:has(button:hover) button:hover,
.spec-chips.is-lit:has(button:focus-visible) button:focus-visible {
  opacity: 1; transform: scale(1);
  color: var(--c-forest-950); background: var(--c-timber-400); border-color: var(--c-timber-400);
}

.flex-hotspot {
  position: absolute; left: var(--hx); top: var(--hy);
  transform: translate(-50%, -50%);
  pointer-events: auto; cursor: default;
  padding: 0.28rem 0.5rem;
  background: rgba(252, 250, 246, 0.88);
  border: 1px solid rgba(23, 31, 27, 0.18);
  color: var(--c-forest-950);
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em;
  white-space: nowrap;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}
.flex-hotspot:hover,
.section--hall:has([data-chip="mw"]:hover) .flex-hotspot[data-chip="mw"],
.section--hall:has([data-chip="mw"]:focus-visible) .flex-hotspot[data-chip="mw"],
.section--hall:has([data-chip="ft"]:hover) .flex-hotspot[data-chip="ft"],
.section--hall:has([data-chip="ft"]:focus-visible) .flex-hotspot[data-chip="ft"],
.section--hall:has([data-chip="ms"]:hover) .flex-hotspot[data-chip="ms"],
.section--hall:has([data-chip="ms"]:focus-visible) .flex-hotspot[data-chip="ms"] {
  background: var(--c-timber-400);
  border-color: var(--c-timber-400);
}

.scale, .heat-pick, .mode-pick {
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}
.scale__label, .heat-pick__label, .mode-pick__label {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-timber-300); margin: 0 0 0.7rem;
}
.scale__stops, .heat-pick__stops, .mode-pick__stops {
  display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1rem;
}
.scale__stops button, .heat-pick__stops button, .mode-pick__stops button {
  font: inherit; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  padding: 0.45rem 0.75rem; min-height: 44px;
  background: transparent; color: var(--c-on-dark-2);
  border: 1px solid rgba(243,239,230,0.18); cursor: pointer;
}
.scale__stops button[aria-pressed="true"],
.heat-pick__stops button[aria-pressed="true"],
.mode-pick__stops button[aria-pressed="true"] {
  background: var(--c-timber-400); color: var(--c-forest-950); border-color: var(--c-timber-400);
}
.scale__panel { margin: 0; }
.scale__panel[hidden] { display: none; }
html:not(.js) .scale__panel[hidden] { display: block; }
.scale__note, .heat-pick__copy, .mode-pick__copy {
  margin: 0.65rem 0 0; color: var(--c-on-dark-2); font-size: 0.95rem; max-width: var(--measure);
}
.heat-pick__tag {
  margin: 0.85rem 0 0; color: var(--c-on-dark); font-size: 1.02rem; max-width: var(--measure);
}
.section--dark .scale .viz-frame__shot,
.section--dark .heat-pick .viz-frame__shot {
  aspect-ratio: 16 / 9; max-height: min(42vh, 380px);
}
.section--dark .heat-pick .viz-cap,
.section--dark .scale .viz-cap {
  color: var(--c-on-dark-3);
}

.site-board__meta {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--c-ink-3); margin-top: 0.15rem;
}
.site-board__why {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-ink-2);
  max-width: 28rem;
  margin-top: 0.2rem;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  text-transform: none;
}
.sites-why {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.5rem;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  padding: 1.1rem 0 1.15rem;
  border-top: 1px solid var(--c-stone-300);
  border-bottom: 1px solid var(--c-stone-300);
}
.sites-why__kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-timber-600);
  margin: 0 0 0.3rem;
}
.sites-why h3 {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 0.3rem;
}
.sites-why p {
  margin: 0;
  color: var(--c-ink-2);
  font-size: 0.92rem;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .sites-why { grid-template-columns: 1fr; }
}
.sites-quiet {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--c-stone-300);
  max-width: var(--measure);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  line-height: 1.5;
}

@media (max-width: 719px) {
  .hero:not(.hero--fold) .hero__track { height: auto; }
  .hero:not(.hero--fold) .hero__pin { position: relative; height: auto; min-height: 0; overflow: visible; }
  .hero:not(.hero--fold) .hero__copy {
    opacity: 1; transform: none; pointer-events: auto;
    padding: 5.6rem var(--gutter) 1rem;
  }
  .hero:not(.hero--fold) .hero__stage {
    position: relative; top: auto; left: auto; bottom: auto;
    transform: none; width: min(1080px, 100%);
    margin: 0 auto 1.25rem;
    will-change: auto;
  }
  .hero:not(.hero--fold) .hero__object img {
    height: auto; max-height: min(52vh, 420px);
    object-position: 50% 50%;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero:not(.hero--fold) .hero__credit { position: relative; right: auto; bottom: auto; text-align: left; padding: 0 var(--gutter) 1.5rem; }

  .flex-hotspots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero:not(.hero--fold) .hero__track { height: auto; }
  .hero:not(.hero--fold) .hero__pin { position: relative; height: auto; overflow: visible; }
  .hero:not(.hero--fold) .hero__copy { opacity: 1; transform: none; pointer-events: auto; }
  .hero:not(.hero--fold) .hero__stage { position: relative; left: auto; transform: none; width: min(1080px, 100%); margin: 0 auto; }
  .flex-hotspot { transition: none; }
  .scale__stops button, .heat-pick__stops button, .mode-pick__stops button, .spec-chips button { transition: none; }
  html:not(.js) .scale__panel[hidden],
  .scale.is-static .scale__panel { display: block; }
  .scale.is-static .scale__panel[hidden] { display: block; }
}

.section--dark .scale,
.section--dark .heat-pick,
.section--dark .mode-pick {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(243, 239, 230, 0.12);
}
.section--dark .mode-pick { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.scale__stops button:focus-visible,
.heat-pick__stops button:focus-visible,
.mode-pick__stops button:focus-visible {
  outline: 3px solid var(--c-timber-400);
  outline-offset: 2px;
}


/* ---- Visualization pass: still-seq, anatomy hotspots, heat stills, Ken Burns ---- */
.still-seq__frames { position: relative; }
.still-seq__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: still-seq-a 7.5s ease-in-out infinite;
}
.still-seq__frame:nth-child(1) {
  position: relative;
  opacity: 1;
  animation-name: still-seq-a;
}
.still-seq__frame:nth-child(2) { animation-name: still-seq-b; }
.still-seq__frame:nth-child(3) { animation-name: still-seq-c; }
.still-seq__frame img,
.still-seq__frame source + img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.still-seq:hover .still-seq__frame,
.still-seq:focus-within .still-seq__frame { animation-play-state: paused; }
@keyframes still-seq-a {
  0%, 26% { opacity: 1; }
  34%, 92% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes still-seq-b {
  0%, 26% { opacity: 0; }
  34%, 58% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes still-seq-c {
  0%, 58% { opacity: 0; }
  66%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
.js .still-seq .still-seq__frame { clip-path: none; transition: none; }

.hall-pair { margin: 0 0 clamp(1.25rem, 3vw, 2rem); }
.hall-pair__shot { margin: 0 0 1rem; }
.hall-pair .viz-frame__shot {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: none;
}
.hall-pair .flex-hotspots {
  list-style: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  margin: 0;
}

.heat-pick .viz-frame__shot,
.scale .viz-frame__shot {
  position: relative;
}
.heat-pick .viz-frame__shot picture,
.scale .viz-frame__shot picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.heat-pick .viz-frame__shot picture:not(.is-on),
.scale .viz-frame__shot picture:not(.is-on),
.heat-pick .viz-frame__shot picture[hidden],
.scale .viz-frame__shot picture[hidden] { display: none; }
.heat-pick .viz-frame__shot picture img,
.scale .viz-frame__shot picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .heat-pick .viz-frame--featured .viz-frame__shot picture,
  .heat-pick .viz-frame--featured:hover .viz-frame__shot picture {
    transform: none;
    transition: none;
  }
  .heat-pick img {
    animation: none !important;
    object-position: 50% 50%;
  }
}

/* Ken Burns keyframes removed */
.sites-map img,
.still-seq img { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .still-seq__frame {
    animation: none !important;
    opacity: 0 !important;
  }
  .still-seq__frame:first-child {
    opacity: 1 !important;
    position: relative;
  }
  .flex-hotspot { opacity: 1; }
}
@media print {
  .still-seq__frame { animation: none !important; opacity: 0 !important; position: absolute; }
  .still-seq__frame:first-child { opacity: 1 !important; position: relative; }
}


/* ---- Scroll-with-the-object: 3-layer still stack (no WebGL / Lenis / GSAP) ---- */
.hero:not(.hero--fold) .hero__track { height: 240vh; }
.hero:not(.hero--fold) .hero__copy {
  padding: 6.4rem var(--gutter) 0;
  z-index: 6;
}
.hero:not(.hero--fold) .hero__stage {
  top: 50%; left: 50%; bottom: auto; right: auto;
  width: min(40vw, 540px);
  /* p=0: lower fold under H1; p>=0.08: dead center for the pin */
  transform: translate3d(-50%, calc(18% - min(var(--p), 0.08) * 850%), 0);
  transform-origin: 50% 50%;
}
.hero:not(.hero--fold) .hero__object[data-scrub] { width: 100%; }
.hero__stack {
  position: relative;
  width: 100%;
  transform: scale(calc(1 + var(--p) * 0.03));
  transform-origin: 50% 50%;
  will-change: transform;
}
.hero__still {
  display: block;
  width: 100%;
}
.hero__still[data-layer="0"] {
  position: relative;
  z-index: 1;
  opacity: 1;
}
.hero__still[data-layer="1"],
.hero__still[data-layer="2"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero__still[data-layer="1"] {
  opacity: clamp(0, calc((var(--p) - 0.28) / 0.27), 1);
}
.hero__still[data-layer="2"] {
  z-index: 3;
  opacity: clamp(0, calc((var(--p) - 0.55) / 0.35), 1);
}
.hero:not(.hero--fold) .hero__still img,
.hero:not(.hero--fold) .hero__object .hero__still img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(42vh, 380px);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 58%;
  -webkit-mask-image: none;
  mask-image: none;
}
.orbit.is-active { opacity: 1; transform: none; }
.orbit:not(.is-active):not(.is-on) { opacity: 0; }

@media (max-width: 719px) {
  .hero:not(.hero--fold) .hero__track { height: auto; }
  .hero:not(.hero--fold) .hero__pin { position: relative; height: auto; min-height: 0; overflow: visible; }
  .hero:not(.hero--fold) .hero__copy {
    opacity: 1; transform: none; pointer-events: auto;
    padding: 5.6rem var(--gutter) 1.15rem;
  }
  .hero:not(.hero--fold) .hero__stage {
    position: relative; top: auto; left: auto; bottom: auto;
    transform: none; width: min(1080px, 100%);
    margin: 0 auto 0.85rem;
    will-change: auto;
  }
  .hero__stack { transform: none; will-change: auto; }
  .hero__stack,
  .hero:not(.hero--fold) .hero__stack {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
  }
  .hero__still,
  .hero__still[data-layer="0"],
  .hero__still[data-layer="1"],
  .hero__still[data-layer="2"] {
    position: relative;
    inset: auto;
    opacity: 1;
    z-index: 1;
  }
  .hero__still img,
  .hero:not(.hero--fold) .hero__object img,
  .hero:not(.hero--fold) .hero__object .hero__still img,
  .hero:not(.hero--fold) .hero__still img {
    height: auto;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-position: 50% 50%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .orbits {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
    padding: 0 var(--gutter) 1.5rem;
    width: 100%;
    margin: 0;
  }
  .orbit,
  .orbit.orbit--1, .orbit.orbit--2, .orbit.orbit--3 {
    position: static;
    width: auto;
    left: auto; right: auto; top: auto; bottom: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: block;
    grid-template-columns: none;
  }
  .orbit__n { margin-bottom: 0.25rem; }
  .orbit__title { font-size: 0.92rem; }
  .orbit__body p { font-size: 0.82rem; }
  .hero:not(.hero--fold) .hero__credit { position: relative; right: auto; bottom: auto; text-align: left; padding: 0 var(--gutter) 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero:not(.hero--fold) .hero__track { height: auto; }
  .hero:not(.hero--fold) .hero__pin { position: relative; height: auto; overflow: visible; }
  .hero:not(.hero--fold) .hero__copy { opacity: 1; transform: none; pointer-events: auto; padding-bottom: 1.15rem; }
  .hero:not(.hero--fold) .hero__stage {
    position: relative; top: auto; left: auto; bottom: auto;
    transform: none; width: min(1080px, 100%);
    margin: 0 auto 0.85rem;
    will-change: auto;
  }
  .hero__stack { transform: none; will-change: auto; }
  .hero__stack {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.55rem;
  }
  .hero__still,
  .hero__still[data-layer="0"],
  .hero__still[data-layer="1"],
  .hero__still[data-layer="2"] {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    z-index: 1;
  }
  .hero__still img {
    height: auto;
    max-height: min(36vh, 280px);
    aspect-ratio: 4 / 3;
    object-position: 50% 50%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .orbits {
    position: relative;
    display: grid;
    gap: 1.15rem;
    padding: 1.25rem var(--gutter) 2.5rem;
    width: min(100%, 52rem);
    margin-inline: auto;
  }
  @media (min-width: 800px) { .orbits { grid-template-columns: 1fr 1fr 1fr; } }
  .orbit { position: static; opacity: 1 !important; visibility: visible !important; transform: none; width: auto; }
  .hero:not(.hero--fold) .hero__object { transform: none; }
}

/* ==========================================================================
   Merge cut — restore Classic fold, namespace Eggsplain pin to .chapter
   ========================================================================== */

.hero.hero--fold {
  --p: 0;
  position: relative;
  min-height: 0;
  padding: 0;
  color: var(--c-on-dark);
  background: var(--c-forest-950);
  --focus: var(--c-timber-400);
}
.hero.hero--fold .hero__viewport {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(6.25rem, 12vh, 7rem) 0 clamp(3.25rem, 12vh, 6.5rem);
}
.hero.hero--fold .hero__stage {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  width: auto;
  max-height: none;
  overflow: hidden;
  pointer-events: none;
  background: #121c22;
  transform: none;
  display: block;
  will-change: auto;
}
.hero.hero--fold .hero__copy {
  position: relative;
  z-index: 4;
  max-width: 36rem;
  margin: 0;
  text-align: left;
  padding: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  isolation: auto;
}
.hero.hero--fold .hero__title { color: var(--c-on-dark); }
.hero.hero--fold .hero__credit {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(0.85rem, 2.2vw, 1.5rem);
  z-index: 4;
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: 0 auto;
  text-align: right;
  justify-content: flex-end;
  color: var(--c-on-dark-3);
}
.hero.hero--fold .hero__layer img { animation: none !important; }
@media (min-width: 960px) and (max-height: 860px) {
  /* 6.25rem clears the sticky pill (margin 0.85rem + ~56px) with air for the H1. */
  .hero.hero--fold .hero__viewport { padding-top: 6.25rem; padding-bottom: 4.25rem; }
}
@media (max-height: 700px) {
  .hero.hero--fold .hero__viewport { padding-top: 6.25rem; padding-bottom: 3.75rem; }
}
@media (max-width: 700px) {
  .hero.hero--fold .hero__viewport {
    justify-content: flex-end;
    min-height: calc(100svh - var(--header-h));
    padding: clamp(1.1rem, 3vw, 2.2rem) 0 clamp(1.2rem, 2.8vw, 1.9rem);
  }
  .hero.hero--fold .hero__credit {
    position: relative; bottom: auto; margin-top: 0.7rem;
    text-align: left; justify-content: flex-start;
  }
  .hero.hero--fold .hero__stage {
    position: absolute; inset: 0; width: auto; margin: 0; transform: none;
  }
}
@media (max-width: 719px) {
  .hero.hero--fold .hero__copy { padding: 0; opacity: 1; transform: none; }
  .hero.hero--fold .hero__stage {
    position: absolute; inset: 0; top: 0; left: 0; bottom: 0; right: 0;
    width: auto; margin: 0; transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero.hero--fold .hero__layer { transform: none !important; will-change: auto; }
  .hero.hero--fold .hero__stage {
    position: absolute; inset: 0; width: auto; margin: 0; transform: none;
  }
  .hero.hero--fold .hero__copy { padding: 0; }
}

/* Sticky Approach chapter */
.chapter {
  --p: 0;
  --claim: -1;
  position: relative;
  min-height: 0;
  padding: 0;
  color: var(--c-ink);
  background: var(--c-stone-100);
}
.chapter__track { height: 240vh; position: relative; }
.chapter__pin {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}
.chapter__sky {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--c-sky) 0%, var(--c-mist) 52%, var(--c-offwhite) 100%);
  opacity: calc(1 - var(--p) * 0.92);
}
.chapter__copy {
  position: relative; z-index: 6;
  max-width: 42rem; margin-inline: auto; text-align: center;
  padding: 6.4rem var(--gutter) 0;
  opacity: clamp(0, calc(1 - var(--p) * 16), 1);
  transform: translateY(calc(var(--p) * -28px));
  pointer-events: none;
  isolation: isolate;
}
.chapter[data-claim="0"] .chapter__copy,
.chapter[data-claim="1"] .chapter__copy,
.chapter[data-claim="2"] .chapter__copy { pointer-events: none; }
.chapter__title {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0;
}
.chapter__lead {
  margin: 0.7rem 0 0;
  color: var(--c-ink-2);
  font-size: var(--fs-body);
  line-height: 1.45;
}
.chapter__stage {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(40vw, 540px);
  max-height: none;
  background: transparent;
  overflow: visible;
  pointer-events: auto;
  transform: translate3d(-50%, calc(18% - min(var(--p), 0.08) * 850%), 0);
  transform-origin: 50% 50%;
  will-change: transform;
}
.chapter__object {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.chapter__object.is-tilting { transition: transform 0.1s linear; }
.chapter .hero__still img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(42vh, 380px);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 58%;
  -webkit-mask-image: none;
  mask-image: none;
}
.chapter__credit {
  position: absolute; right: 0.5rem; bottom: 0.85rem;
  z-index: 3; margin: 0; width: auto; text-align: right;
  justify-content: flex-end;
  color: var(--c-ink-3);
}
.chapter .orbit { z-index: 5; }

.js .chapter .clip-inner { transform: translateY(110%); }
.js .chapter.is-ready .clip-inner { transform: none; }

@media (max-width: 880px) {
  .chapter__stage { width: min(48vw, 420px); }
  .chapter__copy { padding-top: 5.6rem; }
}

@media (max-width: 719px) {
  .chapter__track { height: auto; }
  .chapter__pin { position: relative; height: auto; min-height: 0; overflow: visible; }
  .chapter__copy {
    opacity: 1; transform: none; pointer-events: auto;
    padding: 5.6rem var(--gutter) 1.15rem;
  }
  .chapter__sky { opacity: 1; }
  .chapter__stage {
    position: relative; top: auto; left: auto; bottom: auto;
    transform: none; width: min(1080px, 100%);
    margin: 0 auto 0.85rem;
    will-change: auto;
  }
  .chapter .hero__stack {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
    transform: none;
    will-change: auto;
  }
  .chapter .hero__still,
  .chapter .hero__still[data-layer="0"],
  .chapter .hero__still[data-layer="1"],
  .chapter .hero__still[data-layer="2"] {
    position: relative; inset: auto; opacity: 1; z-index: 1;
  }
  .chapter .hero__still img {
    height: auto; max-height: none; aspect-ratio: 4 / 3;
    object-position: 50% 50%;
  }
  .chapter .orbits {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 0 var(--gutter) 2rem;
    width: 100%;
    margin: 0;
  }
  @media (min-width: 560px) {
    .chapter .orbits { grid-template-columns: 1fr 1fr 1fr; }
  }
  .chapter .orbit,
  .chapter .orbit.orbit--1,
  .chapter .orbit.orbit--2,
  .chapter .orbit.orbit--3 {
    position: static;
    width: auto;
    left: auto; right: auto; top: auto; bottom: auto;
    opacity: 1; visibility: visible; transform: none;
    display: block;
  }
  .chapter__credit {
    position: relative; right: auto; bottom: auto;
    text-align: left; padding: 0 var(--gutter) 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter__track { height: auto; }
  .chapter__pin { position: relative; height: auto; overflow: visible; }
  .chapter__copy { opacity: 1; transform: none; pointer-events: auto; padding-bottom: 1.15rem; }
  .chapter__sky { opacity: 1; }
  .chapter__stage {
    position: relative; top: auto; left: auto; bottom: auto;
    transform: none; width: min(1080px, 100%);
    margin: 0 auto 0.85rem;
    will-change: auto;
  }
  .chapter .hero__stack {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.55rem;
    transform: none;
    will-change: auto;
  }
  .chapter .hero__still,
  .chapter .hero__still[data-layer="0"],
  .chapter .hero__still[data-layer="1"],
  .chapter .hero__still[data-layer="2"] {
    position: relative; inset: auto; opacity: 1 !important; z-index: 1;
  }
  .chapter .hero__still img {
    height: auto; max-height: min(36vh, 280px); aspect-ratio: 4 / 3;
  }
  .chapter .orbits {
    position: relative;
    display: grid;
    gap: 1.15rem;
    padding: 1.25rem var(--gutter) 2.5rem;
    width: min(100%, 52rem);
    margin-inline: auto;
  }
  @media (min-width: 800px) { .chapter .orbits { grid-template-columns: 1fr 1fr 1fr; } }
  .chapter .orbit { position: static; opacity: 1 !important; visibility: visible !important; transform: none; width: auto; }
  .chapter__object { transform: none; }
}

html:not(.js) .chapter__track { height: auto; }
html:not(.js) .chapter__pin { position: relative; height: auto; min-height: 100svh; }
html:not(.js) .chapter .orbit { position: static; opacity: 1; visibility: visible; transform: none; }
html:not(.js) .chapter .orbits {
  display: grid; gap: 1.15rem; padding: 1.25rem var(--gutter) 2.5rem;
  width: min(100%, 52rem); margin-inline: auto;
}
html:not(.js) .chapter .hero__stack {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem;
}
html:not(.js) .chapter .hero__still { position: relative; opacity: 1; }

@media print {
  .chapter__track { height: auto !important; }
  .chapter__pin { position: relative !important; height: auto !important; }
  .chapter .orbit { position: static; opacity: 1; visibility: visible; transform: none; }
  .spec-strip, .scale { break-inside: avoid; }
}

/* Classic map rings — no on-map name labels (avoids 390px collisions) */
.sites-map__ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 0.7rem; height: 0.7rem;
  margin: -0.35rem 0 0 -0.35rem;
  background: var(--c-paper);
  border: 1.5px solid var(--c-heat);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(252, 250, 246, 0.72);
  pointer-events: none;
}
.sites-map__pin::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0.7rem; height: 0.7rem;
  margin: -0.35rem 0 0 -0.35rem;
  border: 1.5px solid var(--c-heat);
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
}
.sites-map__pin:hover .sites-map__ring,
.sites-map__pin:focus-visible .sites-map__ring,
.sites-map__pin[aria-pressed="true"] .sites-map__ring,
.sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"] .sites-map__ring,
.sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"] .sites-map__ring,
.sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"] .sites-map__ring {
  background: var(--c-heat);
  box-shadow: 0 0 0 4px rgba(252, 250, 246, 0.85), 0 0 0 7px rgba(180, 128, 42, 0.28);
}

/* Clearer spec chips on the dark Flexbox act */
.section--dark .spec-chips {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  margin: 0 0 0.5rem;
}
.section--dark .spec-chips .flex-chip {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(243, 239, 230, 0.18);
  background: rgba(252, 250, 246, 0.04);
  color: inherit;
  cursor: pointer;
  border-radius: 2px;
  transform: none;
  opacity: 1;
}
.section--dark .spec-chips .flex-specs__value {
  display: block;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-on-dark);
  margin: 0 0 0.35rem;
}
.section--dark .spec-chips .flex-specs__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}
.section--dark .spec-chips.is-lit .flex-chip,
.section--dark .spec-chips .flex-chip:hover,
.section--dark .spec-chips .flex-chip:focus-visible,
.section--hall:has([data-chip="mw"]:hover) .spec-chips [data-chip="mw"],
.section--hall:has([data-chip="mw"]:focus-visible) .spec-chips [data-chip="mw"],
.section--hall:has([data-chip="ft"]:hover) .spec-chips [data-chip="ft"],
.section--hall:has([data-chip="ft"]:focus-visible) .spec-chips [data-chip="ft"],
.section--hall:has([data-chip="ms"]:hover) .spec-chips [data-chip="ms"],
.section--hall:has([data-chip="ms"]:focus-visible) .spec-chips [data-chip="ms"] {
  background: var(--c-timber-400);
  border-color: var(--c-timber-400);
  color: var(--c-forest-950);
}
.section--dark .spec-chips .flex-chip:hover .flex-specs__value,
.section--dark .spec-chips .flex-chip:focus-visible .flex-specs__value,
.section--hall:has([data-chip="mw"]:hover) .spec-chips [data-chip="mw"] .flex-specs__value,
.section--hall:has([data-chip="ft"]:hover) .spec-chips [data-chip="ft"] .flex-specs__value,
.section--hall:has([data-chip="ms"]:hover) .spec-chips [data-chip="ms"] .flex-specs__value {
  color: var(--c-forest-950);
}
.section--dark .spec-chips .flex-chip:hover .flex-specs__label,
.section--dark .spec-chips .flex-chip:focus-visible .flex-specs__label {
  color: var(--c-forest-800);
}

/* Forest rhythm after the cinematic acts (fold + pin + dark Flexbox) */
.section--sites { background: var(--c-offwhite); }
.section--moat { background: var(--c-paper); }
.section--start { background: var(--c-mist); }
.section--faq { background: var(--c-offwhite); }

/* ==========================================================================
   2026-08-31 craft pass — fold isolation, nav contrast, pin, print, CTA
   Leftover eggs .hero pin/object rules are namespaced to :not(.hero--fold).
   These explicit .hero.hero--fold selectors win over a later unscoped
   `.hero .hero__stage` (0,3,0 vs 0,2,0) so the parallax opening cannot regress.
   ========================================================================== */

.hero.hero--fold {
  --p: 0;
  position: relative;
  min-height: 0;
  padding: 0;
  color: var(--c-on-dark);
  background: var(--c-forest-950);
  --focus: var(--c-timber-400);
  --c-power: var(--c-power-dark);
  --c-heat: var(--c-heat-dark);
}
.hero.hero--fold .hero__viewport {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  padding: clamp(6.25rem, 12vh, 7rem) 0 clamp(2.5rem, 9vh, 5.25rem);
}
.hero.hero--fold .hero__stage {
  display: block;
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  width: auto;
  max-height: none;
  overflow: hidden;
  pointer-events: none;
  background: #121c22;
  transform: none;
  transform-origin: 50% 50%;
  will-change: auto;
}
.hero.hero--fold .hero__layer {
  display: block;
  position: absolute;
  will-change: transform;
}
.hero.hero--fold .hero__layer picture { position: absolute; inset: 0; display: block; }
.hero.hero--fold .hero__layer img {
  display: block; width: 100%; height: 100%;
  max-width: none; object-fit: cover;
  animation: none;
}
.hero.hero--fold .hero__scrim,
.hero.hero--fold .hero__grain { display: block; }
.hero.hero--fold .hero__inner { position: relative; z-index: 4; }
.hero.hero--fold .hero__copy {
  position: relative;
  z-index: 4;
  max-width: 36rem;
  margin: 0;
  text-align: left;
  padding: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  isolation: auto;
}
.hero.hero--fold .hero__title {
  color: var(--c-on-dark);
  text-shadow: 0 2px 28px rgba(8, 16, 13, 0.55);
}
.hero.hero--fold .hero__tagline {
  color: var(--c-timber-300);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0.55rem 0 0;
  max-width: 32rem;
  text-shadow: 0 1px 16px rgba(8, 16, 13, 0.45);
}
.hero.hero--fold .hero__credit {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(0.85rem, 2.2vw, 1.5rem);
  z-index: 4;
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: 0 auto;
  text-align: right;
  justify-content: flex-end;
  color: var(--c-on-dark-3);
}
.hero.hero--fold .hero__layer img { animation: none; }

.js .hero.hero--fold .clip-inner { transform: translateY(110%); }
.js .hero.hero--fold.is-ready .clip-inner { transform: none; }
.js .hero.hero--fold.is-ready .clip:nth-child(2) .clip-inner { transition-delay: 0.08s; }

@media (min-width: 960px) and (max-height: 860px) {
  /* Clear the sticky pill so the full H1 sits below the nav at 1280×800. */
  .hero.hero--fold .hero__viewport { padding-top: 6.25rem; padding-bottom: 3.5rem; }
}
@media (max-height: 700px) {
  .hero.hero--fold .hero__viewport { padding-top: 6.25rem; padding-bottom: 3.25rem; }
}
@media (max-width: 700px) {
  .hero.hero--fold .hero__viewport {
    justify-content: flex-end;
    min-height: calc(100svh - var(--header-h));
    padding: clamp(1.1rem, 3vw, 2.2rem) 0 clamp(1.1rem, 2.6vw, 1.7rem);
  }
  .hero.hero--fold .hero__credit {
    position: relative; bottom: auto; margin-top: 0.7rem;
    text-align: left; justify-content: flex-start;
  }
  .hero.hero--fold .hero__stage {
    position: absolute; inset: 0; width: auto; margin: 0; transform: none;
  }
}
@media (max-width: 719px) {
  .hero.hero--fold .hero__copy { padding: 0; opacity: 1; transform: none; pointer-events: auto; }
  .hero.hero--fold .hero__stage {
    position: absolute; inset: 0; top: 0; left: 0; bottom: 0; right: 0;
    width: auto; margin: 0; transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero.hero--fold .hero__layer { transform: none; will-change: auto; }
  .hero.hero--fold .hero__stage {
    position: absolute; inset: 0; width: auto; margin: 0; transform: none;
  }
  .hero.hero--fold .hero__copy { padding: 0; opacity: 1; transform: none; }
  .js .hero.hero--fold .clip-inner,
  .js .hero.hero--fold.is-ready .clip-inner { transform: none; transition: none; }
}

/* Fold → gap → Approach: one story, tighter join */
.section--gap {
  padding-block: clamp(2.35rem, 5.2vw, 4.35rem);
  padding-bottom: clamp(1.35rem, 3vw, 2.35rem);
}
.chapter {
  margin-top: 0;
  padding-top: 0;
}
@media (min-width: 720px) {
  .chapter__copy { padding-top: 5.5rem; }
}

/* Chapter is H2 after the fold H1 — never restyle it as a second H1 */
.chapter .chapter__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--c-ink);
  text-shadow: none;
}
.chapter .hero__title { display: none; }

/* Pill nav over parallax and dark acts: opaque enough for cream/ink contrast */
.nav-pill {
  background: rgba(247, 243, 235, 0.88);
  border: 1px solid rgba(23, 31, 27, 0.12);
  box-shadow: 0 8px 32px rgba(13, 31, 23, 0.1);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.nav-pill[data-on-dark] {
  background: rgba(13, 22, 18, 0.82);
  border-color: rgba(243, 239, 230, 0.22);
  box-shadow: 0 8px 32px rgba(8, 10, 10, 0.36);
}
.nav-pill[data-on-dark] .brand { color: var(--c-on-dark); }
.nav-pill[data-on-dark] .site-nav__list a { color: var(--c-on-dark-2); }
.nav-pill[data-on-dark] .site-nav__list a:hover,
.nav-pill[data-on-dark] .site-nav__list a[aria-current="true"] { color: var(--c-on-dark); }
.nav-pill[data-on-dark] .nav-toggle { color: var(--c-on-dark); border-color: rgba(243, 239, 230, 0.28); }

/* Email Kelvin CTA: timber fill + forest text on light forest AND dark acts */
.btn--cta,
.btn--accent.btn--cta,
.nav-pill .btn--cta,
.hero.hero--fold .btn--cta,
.section--dark .btn--cta,
.section--verticals .btn--cta,
.section--gap .btn--cta {
  background: var(--c-timber-400);
  color: var(--c-forest-950);
  border-color: var(--c-timber-400);
}
.btn--cta:hover,
.btn--cta:focus-visible,
.btn--accent.btn--cta:hover,
.hero.hero--fold .btn--cta:hover,
.section--dark .btn--cta:hover,
.section--verticals .btn--cta:hover {
  background: var(--c-timber-300);
  color: var(--c-forest-950);
  border-color: var(--c-timber-300);
}
.btn--cta .btn__arrow {
  background: var(--c-forest-950);
  color: var(--c-on-dark);
}

/* Map: Plot-only (already in copy). Hide pins under 720px — board is the UI. */
@media (max-width: 719px) {
  .sites-map__pin { display: none; }
}

/* No Ken Burns anywhere */
.hero.hero--fold img,
.chapter img { animation: none; }

/* <720px and reduced-motion: Approach pin is static (already in .chapter rules) */
@media (max-width: 719px) {
  .chapter__track { height: auto; }
  .chapter__pin { position: relative; height: auto; min-height: 0; overflow: visible; }
}

@media print {
  .site-header, .nav-pill, .nav-toggle, .nav-overlay, .page-rail,
  .vertical-controls, .skip-link, .hero__grain { display: none !important; }
  .hero.hero--fold, .hero.hero--fold .hero__viewport { min-height: 0; padding: 1rem 0; background: #fff; color: #000; }
  .hero.hero--fold .hero__stage { position: relative; min-height: 10rem; inset: auto; width: auto; transform: none; }
  .hero.hero--fold .hero__title, .hero.hero--fold .hero__tagline, .hero.hero--fold .hero__copy { color: #000; opacity: 1; transform: none; }
  .chapter__track { height: auto !important; }
  .chapter__pin { position: relative !important; height: auto !important; overflow: visible; }
  .chapter .orbit, .chapter .hero__still { position: static; opacity: 1; visibility: visible; transform: none; }
  .section--dark, .section--verticals, .site-footer { background: #fff !important; color: #000 !important; }
  .vertical { display: grid !important; position: relative; min-height: 0; opacity: 1; visibility: visible; }
  .btn--cta, .btn--accent { color: #000; border: 1px solid #000; background: #fff; }
}

/* ==========================================================================
   2026-08-31 investor verticals — holds-scan, pay-strip, six For-you chips
   Forest / timber type. No Eggsplain orange. No Lenis / GSAP / WebGL.
   ========================================================================== */

.holds-scan {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 1.1rem 0 0.25rem;
  border-top: 1px solid var(--c-stone-300);
  border-bottom: 1px solid var(--c-stone-300);
}
.holds-scan__kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-timber-600);
  margin: 0 0 0.3rem;
}
.holds-scan h3 {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 0.3rem;
}
.holds-scan p {
  margin: 0;
  color: var(--c-ink-2);
  font-size: 0.92rem;
  line-height: 1.4;
}
.holds-scan__moat {
  margin-top: 0.4rem;
  color: var(--c-ink);
  font-size: 0.92rem;
  line-height: 1.4;
}
.holds-scan__note {
  color: var(--c-ink-3);
}
@media (max-width: 900px) {
  .holds-scan { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .holds-scan { grid-template-columns: 1fr; }
}

.pay-strip {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.05rem 0 1.2rem;
  border-top: 1px solid rgba(243, 239, 230, 0.14);
  border-bottom: 1px solid rgba(243, 239, 230, 0.14);
}
.pay-strip__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-timber-300);
  margin: 0 0 0.85rem;
}
.pay-strip ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
}
.pay-strip h3 {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-on-dark);
  margin: 0 0 0.3rem;
}
.pay-strip p {
  margin: 0;
  color: var(--c-on-dark-2);
  font-size: 0.92rem;
  line-height: 1.4;
}
.pay-strip__note {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--c-on-dark-3);
  max-width: var(--measure);
}
@media (max-width: 900px) {
  .pay-strip ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .pay-strip ol { grid-template-columns: 1fr; }
}

.vertical__cap {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: 4.15rem;
  margin: 0;
  max-width: min(28rem, calc(100% - 36rem));
  color: var(--c-on-dark-3);
  text-shadow: 0 1px 10px rgba(8, 16, 13, 0.55);
}
.vertical-index button[aria-pressed="true"] { display: flex; }

/* Active chip is in-flow so six-row copy cannot clip inside a fixed 820px stage. */
.verticals { min-height: 0; }
.vertical.is-active {
  position: relative;
  inset: auto;
  min-height: min(92vh, 880px);
}

@media (max-width: 720px) {
  .verticals { min-height: 0; }
  .vertical {
    position: absolute;
    inset: auto 0 auto 0;
    min-height: 0;
  }
  .vertical.is-active {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .vertical__media { position: relative; height: 42vw; min-height: 180px; }
  .vertical__panel {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 1.5rem var(--gutter) 1.5rem;
    border-left: 0;
  }
  .vertical__cap {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: none;
    padding: 0.4rem var(--gutter) 0.15rem;
  }
  .vertical-index {
    position: relative;
    width: 100%;
    padding: 0 var(--gutter) 5.5rem;
  }
  .vertical-index li { display: list-item; }
}

@media print {
  .holds-scan { grid-template-columns: 1fr 1fr; }
  .pay-strip ol { grid-template-columns: 1fr 1fr; }
  .vertical-index li { display: list-item !important; }
}

/* ==========================================================================
   2026-08-31 Gigapod-pattern Flexbox chapter
   Chapter bar, glance tiles, Closed/Exploded, sticky spec rail, parts,
   compare table, land-steps, sheet dual close. Forest / timber.
   No Eggsplain orange. No Lenis / GSAP / WebGL. No second scroll-pin.
   ========================================================================== */

.section.section--hall { overflow: visible; }
.section--dark > .hall-chapters { position: sticky; top: 4.75rem; z-index: 20; }

.hall-chapters {
  position: sticky;
  top: 4.75rem;
  z-index: 20;
  background: var(--c-forest-900);
  border-bottom: 1px solid rgba(243, 239, 230, 0.12);
}
.hall-chapters__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.35rem;
  padding: 0.55rem 0;
}
.hall-chapters a {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-on-dark-2);
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
}
.hall-chapters a:hover { color: var(--c-on-dark); text-decoration: none; }
.hall-chapters a[aria-current="true"] {
  color: var(--c-on-dark);
  border-bottom-color: var(--c-timber-400);
}

.glance {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  padding: 0;
  border-top: 1px solid rgba(243, 239, 230, 0.14);
  border-bottom: 1px solid rgba(243, 239, 230, 0.14);
}
@media (min-width: 560px) { .glance { grid-template-columns: repeat(3, 1fr); } }
.glance .stat {
  padding: 1.1rem 1.25rem 1.15rem 0;
  background: none;
  border-right: 1px solid rgba(243, 239, 230, 0.1);
}
.glance .stat:last-child { border-right: 0; }
.glance a { display: block; color: inherit; text-decoration: none; }
.glance a:hover { text-decoration: none; }
.glance a:hover .stat__value,
.glance a:focus-visible .stat__value { color: var(--c-timber-300); }
.glance .stat__value { font-size: var(--fs-stat); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--c-on-dark); margin: 0 0 0.5rem; }
.glance .stat__label { font-size: var(--fs-small); color: var(--c-on-dark-2); line-height: 1.45; margin: 0; }
@media (max-width: 559px) {
  .glance .stat { padding: 1rem 0; border-right: 0; border-bottom: 1px solid rgba(243, 239, 230, 0.1); }
  .glance .stat:last-child { border-bottom: 0; }
}

.shell-pick { margin: 0 0 0.85rem; }
.shell-pick__label,
.parts__label,
.spec-rail__label,
.flex-compare__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-timber-300);
  margin: 0 0 0.7rem;
}
.shell-pick__stops {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
}
.shell-pick__stops button {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.75rem;
  min-height: 44px;
  background: transparent;
  color: var(--c-on-dark-2);
  border: 1px solid rgba(243, 239, 230, 0.18);
  cursor: pointer;
}
.shell-pick__stops button[aria-pressed="true"] {
  background: var(--c-timber-400);
  color: var(--c-forest-950);
  border-color: var(--c-timber-400);
}
.shell-pick__stops button:focus-visible {
  outline: 3px solid var(--c-timber-400);
  outline-offset: 2px;
}

.hall-pair .viz-frame__shot picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hall-pair .viz-frame__shot picture[hidden] { display: none; }
.hall-pair .viz-frame__shot picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hall-pair.is-exploded .flex-hotspot[data-shell="closed"] { display: none; }
.hall-pair:not(.is-exploded) .flex-hotspot[data-shell="exploded"] { display: none; }

.section--hall:has([data-chip="rk"]:hover) .spec-chips [data-chip="rk"],
.section--hall:has([data-chip="rk"]:focus-visible) .spec-chips [data-chip="rk"],
.section--hall:has([data-chip="ht"]:hover) .spec-chips [data-chip="ht"],
.section--hall:has([data-chip="ht"]:focus-visible) .spec-chips [data-chip="ht"],
.section--hall .spec-chips .flex-chip[aria-pressed="true"],
.hall-pair[data-active-chip="mw"] .spec-chips [data-chip="mw"],
.hall-pair[data-active-chip="ft"] .spec-chips [data-chip="ft"],
.hall-pair[data-active-chip="rk"] .spec-chips [data-chip="rk"],
.hall-pair[data-active-chip="ms"] .spec-chips [data-chip="ms"],
.hall-pair[data-active-chip="ht"] .spec-chips [data-chip="ht"] {
  opacity: 1;
  transform: scale(1);
  color: var(--c-forest-950);
  background: var(--c-timber-400);
  border-color: var(--c-timber-400);
}
.section--dark .spec-chips.is-lit .flex-chip {
  background: rgba(252, 250, 246, 0.04);
  border-color: rgba(243, 239, 230, 0.18);
  color: inherit;
}
.section--dark .spec-chips .flex-chip[aria-pressed="true"],
.section--dark .spec-chips .flex-chip:hover,
.section--dark .spec-chips .flex-chip:focus-visible,
.section--hall:has([data-chip="rk"]:hover) .spec-chips [data-chip="rk"],
.section--hall:has([data-chip="ht"]:hover) .spec-chips [data-chip="ht"],
.section--hall:has([data-chip="rk"]:focus-visible) .spec-chips [data-chip="rk"],
.section--hall:has([data-chip="ht"]:focus-visible) .spec-chips [data-chip="ht"] {
  background: var(--c-timber-400);
  border-color: var(--c-timber-400);
  color: var(--c-forest-950);
}
.section--dark .spec-chips .flex-chip[aria-pressed="true"] .flex-specs__value,
.section--dark .spec-chips .flex-chip:hover .flex-specs__value,
.section--dark .spec-chips .flex-chip:focus-visible .flex-specs__value,
.section--hall:has([data-chip="rk"]:hover) .spec-chips [data-chip="rk"] .flex-specs__value,
.section--hall:has([data-chip="ht"]:hover) .spec-chips [data-chip="ht"] .flex-specs__value {
  color: var(--c-forest-950);
}
.section--dark .spec-chips .flex-chip[aria-pressed="true"] .flex-specs__label,
.section--dark .spec-chips .flex-chip:hover .flex-specs__label,
.section--dark .spec-chips .flex-chip:focus-visible .flex-specs__label {
  color: var(--c-forest-800);
}
.section--dark .spec-chips.is-lit:has(button[aria-pressed="true"]) .flex-chip:not([aria-pressed="true"]):not(:hover):not(:focus-visible) {
  opacity: 0.55;
}
.section--hall:has([data-chip="rk"]:hover) .flex-hotspot[data-chip="rk"],
.section--hall:has([data-chip="rk"]:focus-visible) .flex-hotspot[data-chip="rk"],
.section--hall:has([data-chip="ht"]:hover) .flex-hotspot[data-chip="ht"],
.section--hall:has([data-chip="ht"]:focus-visible) .flex-hotspot[data-chip="ht"],
.hall-pair[data-active-chip="mw"] .flex-hotspot[data-chip="mw"],
.hall-pair[data-active-chip="ft"] .flex-hotspot[data-chip="ft"],
.hall-pair[data-active-chip="rk"] .flex-hotspot[data-chip="rk"],
.hall-pair[data-active-chip="ms"] .flex-hotspot[data-chip="ms"],
.hall-pair[data-active-chip="ht"] .flex-hotspot[data-chip="ht"] {
  background: var(--c-timber-400);
  border-color: var(--c-timber-400);
}

.spec-rail { margin: 0 0 clamp(1.25rem, 3vw, 2rem); }
.spec-rail .spec-strip__note { margin-bottom: 0; }
.spec-rail .mode-pick { margin-top: 1.25rem; }
.spec-strip > div[data-chip].is-on {
  border-left: 2px solid var(--c-timber-400);
  padding-left: 0.7rem;
}

@media (min-width: 900px) {
  .hall-unit {
    display: block;
    grid-template-columns: none;
    gap: 0;
  }
  .spec-rail {
    position: static;
    top: auto;
  }
  .section--dark .spec-chips { grid-template-columns: 1fr 1fr; }
}

.parts {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.1rem 0 0.25rem;
  border-top: 1px solid rgba(243, 239, 230, 0.14);
  border-bottom: 1px solid rgba(243, 239, 230, 0.14);
}
.parts__list { overflow: hidden; }
.parts__item { border-bottom: 1px solid rgba(243, 239, 230, 0.1); }
.parts__item:last-child { border-bottom: 0; }
.parts__btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0;
  background: none;
  border: 0;
  color: var(--c-on-dark);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.parts__btn::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--c-timber-300);
}
.parts__btn[aria-expanded="true"]::after { content: "–"; }
.parts__code {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-timber-300);
  min-width: 4.5rem;
}
.parts__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.parts__panel p {
  margin: 0 0 0.95rem;
  padding-left: 5.25rem;
  color: var(--c-on-dark-2);
  font-size: 0.95rem;
  max-width: var(--measure);
}
html:not(.js) .parts__panel,
html:not(.js) .parts__panel[hidden] {
  display: block;
  max-height: none;
}
.spec-rail .spec-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(243, 239, 230, 0.14);
  border-bottom: 0;
}
.spec-rail .spec-strip > div {
  padding: 0.8rem 0 0.85rem;
  border-bottom: 1px solid rgba(243, 239, 230, 0.12);
}
.spec-rail .spec-strip > div[data-chip].is-on {
  border-left: 2px solid var(--c-timber-400);
  padding-left: 0.7rem;
}
.spec-rail .spec-strip dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}
.spec-rail .spec-strip dd {
  margin: 0.2rem 0 0;
  color: var(--c-on-dark);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.spec-strip__hint {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--c-on-dark-2);
}

.flex-compare {
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(243, 239, 230, 0.12);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  background: transparent;
}
.compare-table th,
.compare-table td {
  text-align: left;
  padding: 0.75rem 0.85rem 0.75rem 0;
  border-bottom: 1px solid rgba(243, 239, 230, 0.12);
  vertical-align: top;
  color: var(--c-on-dark-2);
}
.compare-table thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--c-forest-900);
  color: var(--c-on-dark-3);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.compare-table thead th:nth-child(2) { color: var(--c-timber-300); }
.compare-table tbody th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--c-on-dark);
  white-space: nowrap;
  padding-right: 1.15rem;
}
.compare-table tbody td:first-of-type {
  color: var(--c-on-dark);
  box-shadow: inset 2px 0 0 var(--c-timber-400);
  padding-left: 0.7rem;
}
.flex-compare__note {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--c-on-dark-3);
}
@media (max-width: 719px) {
  .compare-table, .compare-table thead, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td {
    display: block;
  }
  .compare-table thead { display: none; }
  .compare-table tbody th {
    padding-top: 1rem;
    border-bottom: 0;
    white-space: normal;
  }
  .compare-table tbody td {
    border-bottom: 1px solid rgba(243, 239, 230, 0.1);
    padding-left: 0;
    box-shadow: none;
  }
  .compare-table tbody td:first-of-type {
    box-shadow: none;
    padding-left: 0;
  }
  .compare-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-timber-300);
    margin-bottom: 0.2rem;
  }
}

.flex-sheet {
  margin: 0;
  padding: 1.35rem 0 0.25rem;
  border-top: 1px solid rgba(243, 239, 230, 0.14);
}
.flex-sheet__title {
  font-size: var(--fs-h3);
  color: var(--c-on-dark);
  margin: 0 0 0.35rem;
  max-width: 28rem;
}
.flex-sheet .cta-row { margin-top: 1rem; }
.flex-sheet__note,
.flex-sheet__next {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  color: var(--c-on-dark-3);
  max-width: var(--measure);
}
.flex-sheet__next a { color: var(--c-timber-300); }
.flex-sheet__next a:hover { color: var(--c-timber-400); }


@media (min-width: 900px) and (max-height: 820px) {
  .hall-chapters__inner { padding: 0.35rem 0; }
  .spec-rail { top: 7.1rem; }
  .spec-rail .spec-strip > div { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .spec-strip__hint { font-size: 0.78rem; }
  .spec-rail .mode-pick { margin-top: 0.85rem; }
}
@media (max-width: 719px) {
  .hall-chapters,
  .section--dark > .hall-chapters { position: static; top: auto; }
  .hall-pair .viz-frame__shot {
    aspect-ratio: auto;
    max-height: none;
    display: grid;
    gap: 0.5rem;
  }
  .hall-pair .viz-frame__shot picture,
  .hall-pair .viz-frame__shot picture[hidden] {
    display: block;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }
  .hall-pair .viz-frame__shot picture img { height: auto; }
  .spec-rail { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .hall-pair .flex-hotspots { display: none; }
  .parts__panel { transition: none; }
  .hall-chapters,
  .section--dark > .hall-chapters { position: static; top: auto; }
  .spec-rail { position: static; top: auto; }
  .shell-pick__stops button { transition: none; }
  .hall-pair .viz-frame__shot {
    aspect-ratio: auto;
    max-height: none;
    display: grid;
    gap: 0.5rem;
  }
  .hall-pair .viz-frame__shot picture,
  .hall-pair .viz-frame__shot picture[hidden] {
    display: block;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }
  .hall-pair .viz-frame__shot picture img { height: auto; }
}

html:not(.js) .hall-pair .viz-frame__shot {
  aspect-ratio: auto;
  max-height: none;
  display: grid;
  gap: 0.5rem;
}
html:not(.js) .hall-pair .viz-frame__shot picture,
html:not(.js) .hall-pair .viz-frame__shot picture[hidden] {
  display: block;
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
}

@media print {
  .hall-chapters,
  .section--dark > .hall-chapters { position: static; top: auto; background: #fff; }
  .hall-chapters a { color: #000; }
  .glance .stat__value, .glance .stat__label { color: #000 !important; }
  .compare-table th, .compare-table td { color: #000; border-color: #ccc; }
  .spec-rail { position: static; }
  .spec-strip, .flex-compare, .flex-sheet, .parts { break-inside: avoid; }
}


/* ==========================================================================
   2026-08-31 next investor pass
   Datasheet pack, scannable compare, short-viewport rail,
   For-you six-row in-flow, print packet. Forest / timber. No orange.
   ========================================================================== */

.hero__pack {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  color: var(--c-on-dark-3);
  max-width: 36rem;
}
.hero__pack a {
  color: var(--c-timber-300);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.hero__pack a:hover { color: var(--c-timber-400); }

.flex-sheet__lead {
  margin: 0.35rem 0 0;
  font-size: 1.02rem;
  color: var(--c-on-dark-2);
  max-width: 32rem;
}

/* Slim chapter bar; unstick spec-rail on 1280×800-class viewports */
.hall-chapters__inner { padding: 0.4rem 0; }
.hall-chapters a { padding: 0.28rem 0; }
@media (min-width: 900px) and (max-height: 820px) {
  .hall-chapters,
  .section--dark > .hall-chapters { top: 4.5rem; }
  .hall-chapters__inner { padding: 0.22rem 0; }
  .spec-rail {
    position: static;
    top: auto;
  }
  .spec-rail .spec-strip > div { padding-top: 0.45rem; padding-bottom: 0.45rem; }
  .spec-strip__hint { font-size: 0.76rem; }
  .spec-rail .mode-pick { margin-top: 0.7rem; }
}

/* Compare: sticky criterion column, owned Flexbox header */
.flex-compare .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 36rem;
}
.compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--c-forest-900);
  padding-right: 0.85rem;
}
.compare-table thead th:first-child,
.compare-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-forest-900);
  min-width: 7.5rem;
  box-shadow: 4px 0 8px -6px rgba(0, 0, 0, 0.35);
}
.compare-table thead th:first-child { z-index: 3; }
.compare-table thead th:nth-child(2) {
  color: var(--c-timber-300);
  font-weight: 600;
}
.compare-table tbody td:first-of-type {
  color: var(--c-on-dark);
  box-shadow: inset 2px 0 0 var(--c-timber-400);
}
@media (max-width: 719px) {
  .compare-table { min-width: 0; }
  .compare-table thead th,
  .compare-table thead th:first-child,
  .compare-table tbody th {
    position: static;
    box-shadow: none;
  }
}

/* For-you: six chips in-flow so they cannot clip; active stays visible */
@media (min-width: 721px) {
  .verticals { min-height: 0; }
  .vertical.is-active {
    position: relative;
    inset: auto;
    min-height: min(88vh, 760px);
  }
  .vertical__panel {
    min-height: 0;
    padding-bottom: 1.35rem;
  }
  .vertical-index {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(100%, 34rem);
    margin-left: auto;
    padding: 0.15rem 1.25rem 1.35rem;
    background: rgba(28, 24, 24, 0.52);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    border-left: 1px solid rgba(243, 239, 230, 0.1);
  }
  .vertical-index li { display: list-item; visibility: visible; }
  .vertical-index button,
  .vertical-index button[aria-pressed="true"] { display: flex; }
}
@media (min-width: 721px) and (max-height: 860px) {
  .vertical.is-active { min-height: 0; }
  .vertical__panel { padding-top: 5.25rem; padding-bottom: 0.85rem; }
  .vertical__title { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.85rem); }
  .vertical__lead { margin-bottom: 0.7rem; }
  .vertical-index button { padding: 0.34rem 0; }
  .vertical-controls { bottom: 0.85rem; }
}

@media print {
  .page-rail, .hall-chapters, .section--dark > .hall-chapters,
  .vertical-controls, .shell-pick, .mode-pick,
  .scale__stops, .heat-pick__stops { display: none !important; }
  .holds-scan, .purpose-scan, .pay-strip, .glance, .spec-rail, .spec-strip,
  .flex-compare, .flex-sheet { break-inside: avoid; color: #000; }
  .holds-scan h3, .holds-scan p, .holds-scan__moat, .holds-scan__kicker,
  .pay-strip, .pay-strip h3, .pay-strip p, .pay-strip__label, .pay-strip__note,
  .glance .stat__value, .glance .stat__label,
  .spec-rail .spec-strip dt, .spec-rail .spec-strip dd, .spec-strip__hint, .spec-strip__note,
  .compare-table th, .compare-table td, .flex-compare__label, .flex-compare__note,
  .flex-sheet__title, .flex-sheet__lead, .flex-sheet__note { color: #000 !important; }
  .spec-rail, .hall-chapters { position: static !important; top: auto; background: #fff; }
  .holds-scan { grid-template-columns: 1fr 1fr; }
  .vertical-index { position: relative !important; background: none; }
  .vertical-index li { display: list-item !important; }
  .hero__pack, .hero__pack a { color: #000; }
  .compare-table { min-width: 0; border-collapse: collapse; }
  .compare-table thead th,
  .compare-table thead th:first-child,
  .compare-table tbody th { position: static; background: #fff; box-shadow: none; }
}

/* ==========================================================================
   2026-08-31 continue pass
   Glance as why-it-matters, short-viewport chapter bar,
   compare header nowrap. Forest / timber. No orange.
   ========================================================================== */

/* Glance: thesis scan, not a third copy of ≈1 MW / 4 racks / <0.7 s */
.glance--why .stat__value {
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: normal;
}
.glance--why .stat__label { max-width: 16rem; }

/* 1280×800 sandwich: unstick chapter bar with the rail */
@media (max-height: 800px) {
  .hall-chapters,
  .section--dark > .hall-chapters {
    position: static;
    top: auto;
  }
}

/* Compare: short headers stay on one line */
.compare-table thead th {
  white-space: nowrap;
  letter-spacing: 0.08em;
}
.compare-table {
  min-width: 32rem;
}
@media (max-width: 719px) {
  .compare-table thead th { white-space: normal; }
  .compare-table { min-width: 0; }
}

@media print {
  .sites-why, .site-board__row, .sites-quiet, .sites-geo, .purpose-scan { break-inside: avoid; }
}


/* ==========================================================================
   2026-08-31 interactive verticals
   Two sibling chip groups (Energy / hosts · Compute) on the existing eggs
   For-you stage. Compact chips, wrap per group. Active index rows stay visible.
   Forest / timber. No orange. No Lenis / GSAP / WebGL.
   ========================================================================== */

.vertical-groups {
  position: relative;
  z-index: 3;
  width: min(100%, 34rem);
  margin-left: auto;
  padding: 0.85rem 1.25rem 1.35rem;
  background: rgba(28, 24, 24, 0.52);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border-left: 1px solid rgba(243, 239, 230, 0.1);
  display: grid;
  gap: 0.85rem;
}
.v-group__label {
  margin: 0 0 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}
.v-group.is-active .v-group__label {
  color: var(--c-timber-300);
}
.vertical-groups .vertical-index {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.vertical-groups .vertical-index li {
  display: list-item;
  visibility: visible;
}
.vertical-groups .vertical-index button,
.vertical-groups .vertical-index button[aria-pressed="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  padding: 0.45rem 0.75rem;
  background: transparent;
  color: var(--c-on-dark-2);
  border: 1px solid rgba(243, 239, 230, 0.18);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}
.vertical-groups .vertical-index button .vertical-index__name {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.vertical-groups .vertical-index button[aria-pressed="true"] {
  background: var(--c-timber-400);
  color: var(--c-forest-950);
  border-color: var(--c-timber-400);
}
.vertical-groups .vertical-index button[aria-pressed="true"] .vertical-index__name {
  color: var(--c-forest-950);
}
.vertical-groups .vertical-index button:focus-visible {
  outline: 3px solid var(--c-timber-400);
  outline-offset: 2px;
}

@media (min-width: 1100px) {
  .vertical-groups {
    position: absolute;
    left: var(--gutter);
    top: clamp(5.5rem, 12vw, 7.5rem);
    right: auto;
    bottom: auto;
    width: min(42rem, calc(100% - 36rem));
    margin: 0;
    padding: 0.85rem 1rem 1rem;
    border-left: 0;
    background: rgba(28, 24, 24, 0.45);
  }
}

@media (max-width: 720px) {
  .vertical-groups {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin: 0;
    padding: 1rem var(--gutter) 1.25rem;
    border-left: 0;
    background: rgba(28, 24, 24, 0.52);
  }
}

html:not(.js) .vertical-groups,
html:not(.js) .vertical-controls {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .vertical {
    transition: none;
  }
  .vertical-groups .vertical-index button {
    transition: none;
  }
}

@media print {
  .vertical-groups,
  .vertical-controls {
    display: none !important;
  }
}


/* ==========================================================================
   2026-08-31 homepage IA
   Quiet first screen. Gap stats as proof tiles.
   Numbered FB-40 / CTL / HEAT / LV·MV catalogue teaser → #hall accordion.
   One conversation / every phase (Kelvin-true; no factory, no MW map).
   More air. Chapter bar + spec-rail unstuck. Even dark/light rhythm.
   Forest / timber. No orange. No cookie wall. No testimonials.
   ========================================================================== */

.section--gap .hero-stats { margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.75rem, 6vw, 4.5rem); }
.section--gap .gap-grid { margin-top: 0.25rem; }
.section--gap .gap-punch { margin-top: clamp(2.75rem, 6vw, 4.5rem); }

.section--system {
  background: var(--c-paper);
  border-top: 1px solid var(--c-stone-300);
}
.catalogue {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-stone-300);
}
.catalogue__row {
  display: grid;
  grid-template-columns: 2.4rem 6.25rem minmax(0, 14rem) minmax(0, 1fr);
  gap: 0.75rem 1.1rem;
  align-items: baseline;
  padding: 1.05rem 0 1.1rem;
  border-bottom: 1px solid var(--c-stone-300);
  color: inherit;
  text-decoration: none;
}
.catalogue__row:hover { text-decoration: none; }
.catalogue__row:hover .catalogue__name { color: var(--c-timber-700); }
.catalogue__n,
.catalogue__code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-timber-600);
}
.catalogue__name {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-forest-950);
}
.catalogue__line {
  font-size: 0.95rem;
  color: var(--c-ink-2);
  line-height: 1.45;
}
@media (max-width: 799px) {
  .catalogue__row {
    grid-template-columns: 2.2rem 1fr;
    gap: 0.2rem 0.85rem;
  }
  .catalogue__code { grid-column: 2; }
  .catalogue__name { grid-column: 2; }
  .catalogue__line { grid-column: 2; }
}
.catalogue__next {
  margin: 1.15rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.catalogue__next a { color: var(--c-timber-700); }

.phases {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--c-stone-300);
}
.phases__title {
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--c-forest-950);
  margin: 0 0 0.55rem;
}
.phases > p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--c-ink-2);
  max-width: var(--measure);
  line-height: 1.45;
}
.phases__list {
  list-style: none;
  display: grid;
  gap: 1.35rem 1.5rem;
}
@media (min-width: 720px) { .phases__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .phases__list { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.phases__n {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-timber-600);
  margin: 0 0 0.45rem;
}
.phases__list h4 {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-forest-950);
  margin: 0 0 0.35rem;
}
.phases__list p {
  font-size: 0.92rem;
  color: var(--c-ink-2);
  line-height: 1.45;
  max-width: 22ch;
}
.phases__next {
  margin: 1.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.phases__next a { color: var(--c-timber-700); }

/* Fewer competing stickies — pill + Approach pin stay. Chapter bar and spec-rail sit in flow. */
.hall-chapters,
.section--dark > .hall-chapters {
  position: static;
  top: auto;
}
@media (min-width: 900px) {
  .spec-rail {
    position: static;
    top: auto;
  }
}

@media print {
  .catalogue__row, .phases__list li { break-inside: avoid; color: #000; }
  .catalogue__name, .phases__title, .phases__list h4 { color: #000; }
}


/* ==========================================================================
   2026-08-31 motion pass
   More animation, vanilla CSS. No Lenis / GSAP / WebGL / Ken Burns / orange.
   prefers-reduced-motion and <720px: static — no pin, no parallax, no count-up.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

.js .holds-scan > li,
.js .purpose-scan > li,
.js .pay-strip ol > li,
.js .glance > li,
.js .catalogue > li,
.js .hero-stats .stat,
.js .phases__list > li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .holds-scan.is-visible > li,
.js .purpose-scan.is-visible > li,
.js .pay-strip.is-visible ol > li,
.js .glance.is-visible > li,
.js .catalogue.is-visible > li,
.js .hero-stats.is-visible .stat,
.js .phases.is-visible .phases__list > li {
  opacity: 1;
  transform: none;
}
.js .holds-scan.is-visible > li:nth-child(1),
.js .purpose-scan.is-visible > li:nth-child(1),
.js .pay-strip.is-visible ol > li:nth-child(1),
.js .glance.is-visible > li:nth-child(1),
.js .catalogue.is-visible > li:nth-child(1),
.js .hero-stats.is-visible .stat:nth-child(1),
.js .phases.is-visible .phases__list > li:nth-child(1) { transition-delay: 0.04s; }
.js .holds-scan.is-visible > li:nth-child(2),
.js .purpose-scan.is-visible > li:nth-child(2),
.js .pay-strip.is-visible ol > li:nth-child(2),
.js .glance.is-visible > li:nth-child(2),
.js .catalogue.is-visible > li:nth-child(2),
.js .hero-stats.is-visible .stat:nth-child(2),
.js .phases.is-visible .phases__list > li:nth-child(2) { transition-delay: 0.1s; }
.js .holds-scan.is-visible > li:nth-child(3),
.js .purpose-scan.is-visible > li:nth-child(3),
.js .pay-strip.is-visible ol > li:nth-child(3),
.js .glance.is-visible > li:nth-child(3),
.js .catalogue.is-visible > li:nth-child(3),
.js .hero-stats.is-visible .stat:nth-child(3),
.js .phases.is-visible .phases__list > li:nth-child(3) { transition-delay: 0.16s; }
.js .holds-scan.is-visible > li:nth-child(4),
.js .purpose-scan.is-visible > li:nth-child(4),
.js .pay-strip.is-visible ol > li:nth-child(4),
.js .catalogue.is-visible > li:nth-child(4),
.js .hero-stats.is-visible .stat:nth-child(4),
.js .phases.is-visible .phases__list > li:nth-child(4) { transition-delay: 0.22s; }
.js .holds-scan.is-visible > li:nth-child(5) { transition-delay: 0.28s; }
.js .holds-scan.is-visible > li:nth-child(6) { transition-delay: 0.34s; }
.js .holds-scan.is-visible > li:nth-child(7) { transition-delay: 0.40s; }
.js .holds-scan.is-visible > li:nth-child(8) { transition-delay: 0.46s; }

.js .section__head {
  position: relative;
}
.js .section__head.reveal::after {
  content: "";
  display: block;
  width: min(7.5rem, 42%);
  height: 1px;
  margin-top: 1.05rem;
  background: var(--c-timber-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .section__head--center.reveal::after {
  margin-inline: auto;
  transform-origin: center;
}
.js .section__head.reveal.is-visible::after { transform: scaleX(1); }
.section--dark .section__head.reveal::after,
.section__head--on-dark.reveal::after { background: var(--c-timber-400); }

.js .catalogue { border-top-color: transparent; position: relative; }
.js .catalogue::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--c-stone-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .catalogue.is-visible::before { transform: scaleX(1); }

.js .glance { position: relative; }
.js .glance::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(243, 239, 230, 0.2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .glance.is-visible::before { transform: scaleX(1); }

.stat__value { font-variant-numeric: tabular-nums; }

.catalogue__row {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}
@media (hover: hover) and (min-width: 720px) {
  .catalogue__row:hover { transform: translateY(-4px); }
}

.flex-hotspot { overflow: visible; }
.flex-hotspot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--c-timber-400);
  pointer-events: none;
  opacity: 0;
  animation: hotspot-ring 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes hotspot-ring {
  0% { opacity: 0.65; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.22); }
  100% { opacity: 0; transform: scale(1.22); }
}

.js .heat-pick .viz-frame__shot picture,
.js .hall-pair .viz-frame__shot picture,
.js .scale .viz-frame__shot picture {
  opacity: 0;
  transition: opacity 0.55s ease;
  z-index: 0;
}
.js .heat-pick .viz-frame__shot picture.is-on,
.js .hall-pair .viz-frame__shot picture.is-on,
.js .scale .viz-frame__shot picture.is-on {
  opacity: 1;
  z-index: 1;
}
.js .heat-pick .viz-frame__shot picture[hidden],
.js .hall-pair .viz-frame__shot picture[hidden],
.js .scale .viz-frame__shot picture[hidden],
.js .heat-pick .viz-frame__shot picture:not(.is-on),
.js .hall-pair .viz-frame__shot picture:not(.is-on),
.js .scale .viz-frame__shot picture:not(.is-on) {
  display: block;
}

.js .scale__panels { position: relative; }
.js .scale__panel {
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
.js .scale__panel:not(.is-on) {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.js .scale__panel.is-on {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.page-rail a {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease, box-shadow 0.35s ease;
}
.page-rail a[aria-current="true"] {
  background: var(--c-timber-400);
  transform: rotate(45deg) scale(1.75);
  box-shadow: 0 0 0 4px rgba(176, 122, 68, 0.32);
}

.hall-chapters a {
  position: relative;
  border-bottom-color: transparent;
  transition: color 0.25s ease;
}
.hall-chapters a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--c-timber-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hall-chapters a[aria-current="true"] {
  color: var(--c-timber-300);
  border-bottom-color: transparent;
}
.hall-chapters a[aria-current="true"]::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .js .reveal,
  .js .holds-scan > li,
  .js .purpose-scan > li,
  .js .pay-strip ol > li,
  .js .glance > li,
  .js .catalogue > li,
  .js .hero-stats .stat,
  .js .phases__list > li {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .section__head.reveal::after,
  .js .catalogue::before,
  .js .glance::before {
    transform: none;
    transition: none;
  }
  .js .section__head.reveal.is-visible::after,
  .js .catalogue.is-visible::before,
  .js .glance.is-visible::before { transform: scaleX(1); }
  .hall-chapters a::after { transition: none; }
  .hall-chapters a[aria-current="true"]::after { transform: scaleX(1); }
  .flex-hotspot::after { animation: none; display: none; }
  .catalogue__row,
  .catalogue__row:hover { transform: none; transition: none; }
  .js .heat-pick .viz-frame__shot picture,
  .js .hall-pair .viz-frame__shot picture,
  .js .scale .viz-frame__shot picture,
  .js .scale__panel,
  .page-rail a,
  .vertical {
    transition: none;
  }
  .js .clip-inner { transform: none !important; transition: none; }
  .hero__layer { transform: none !important; }
}

@media print {
  .js .reveal,
  .js .holds-scan > li,
  .js .purpose-scan > li,
  .js .pay-strip ol > li,
  .js .glance > li,
  .js .catalogue > li,
  .js .hero-stats .stat,
  .js .phases__list > li { opacity: 1 !important; transform: none !important; }
  .flex-hotspot::after { display: none; }
}

/* ==========================================================================
   2026-08-31 map + motion audit
   More animation, vanilla CSS. No Lenis / GSAP / WebGL / Ken Burns / orange.
   Pins: K1–K3 codes only. Selected = timber. Subtle pulse, not disco.
   prefers-reduced-motion and <720px: static — no pin, no parallax, no count-up, no pulse.
   ========================================================================== */

html {
  scroll-padding-top: calc(0.85rem + 52px + 40px);
}
#sites,
#sites-title {
  scroll-margin-top: calc(0.85rem + 52px + 40px);
}

/* Map still stays put — pins must lock to geography. No Ken Burns, no drift. */
.sites-map img,
.sites-layout .sites-map img {
  transform: none !important;
  animation: none !important;
  object-position: center;
}
.sites-layout .viz-frame,
.sites-layout .viz-frame__shot {
  overflow: visible;
}

/* Codes on pins; names stay on the board. */
.sites-map__tag {
  position: absolute;
  top: 50%;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--c-forest-800);
  background: rgba(252, 250, 246, 0.92);
  border: 1px solid var(--c-stone-300);
  padding: 0.08rem 0.28rem;
  line-height: 1.2;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(23, 31, 27, 0.06);
  z-index: 4;
}
.sites-map__pin--e .sites-map__tag {
  left: calc(50% + 0.72rem);
  transform: translateY(-50%);
}
.sites-map__pin--w .sites-map__tag {
  right: calc(50% + 0.72rem);
  left: auto;
  transform: translateY(-50%);
}

.sites-map__ring {
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.sites-map__pin:hover .sites-map__ring,
.sites-map__pin:focus-visible .sites-map__ring {
  background: var(--c-timber-400);
  border-color: var(--c-timber-600);
  transform: rotate(45deg) scale(1.18);
  box-shadow: 0 0 0 4px rgba(252, 250, 246, 0.9), 0 0 0 7px rgba(176, 122, 68, 0.28);
}
.sites-map__pin[aria-pressed="true"] .sites-map__ring,
.sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"] .sites-map__ring,
.sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"] .sites-map__ring,
.sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"] .sites-map__ring {
  background: var(--c-timber-500);
  border-color: var(--c-timber-700);
  box-shadow: 0 0 0 4px rgba(252, 250, 246, 0.92), 0 0 0 8px rgba(176, 122, 68, 0.38);
}
.sites-map__pin[aria-pressed="true"] .sites-map__tag,
.sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"] .sites-map__tag,
.sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"] .sites-map__tag,
.sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"] .sites-map__tag,
.sites-map__pin:hover .sites-map__tag,
.sites-map__pin:focus-visible .sites-map__tag {
  color: var(--c-forest-950);
  border-color: var(--c-timber-400);
  background: var(--c-timber-300);
}

/* Idle breathe on the current pin only. One-shot select via .is-pulse. */
.sites-map__pin::before {
  border-color: var(--c-timber-500);
  animation: none;
  opacity: 0;
}
.sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"]::before,
.sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"]::before,
.sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"]::before {
  animation: pin-breathe 3.8s ease-out infinite;
  opacity: 0.4;
  border-color: var(--c-timber-500);
}
@keyframes pin-breathe {
  0% { transform: rotate(45deg) scale(1); opacity: 0.42; }
  70% { transform: rotate(45deg) scale(2.15); opacity: 0; }
  100% { transform: rotate(45deg) scale(2.15); opacity: 0; }
}
.sites-map__pin.is-pulse .sites-map__ring {
  animation: pin-select 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pin-select {
  0% { transform: rotate(45deg) scale(0.72); }
  55% { transform: rotate(45deg) scale(1.28); }
  100% { transform: rotate(45deg) scale(1); }
}

/* Board row: timber wash, instant with data-active-site. */
.site-board__row {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sites-layout[data-active-site="k1"] .site-board__row[data-site="k1"],
.sites-layout:has([data-site="k1"]:hover) .site-board__row[data-site="k1"],
.sites-layout:has([data-site="k1"]:focus-visible) .site-board__row[data-site="k1"],
.sites-layout[data-active-site="k2"] .site-board__row[data-site="k2"],
.sites-layout:has([data-site="k2"]:hover) .site-board__row[data-site="k2"],
.sites-layout:has([data-site="k2"]:focus-visible) .site-board__row[data-site="k2"],
.sites-layout[data-active-site="k3"] .site-board__row[data-site="k3"],
.sites-layout:has([data-site="k3"]:hover) .site-board__row[data-site="k3"],
.sites-layout:has([data-site="k3"]:focus-visible) .site-board__row[data-site="k3"] {
  border-left-color: var(--c-timber-500);
  background: rgba(176, 122, 68, 0.1);
  box-shadow: inset 3px 0 0 var(--c-timber-500);
}
.sites-layout[data-active-site="k1"] .site-board__row[data-site="k1"] .site-board__code,
.sites-layout:has([data-site="k1"]:hover) .site-board__row[data-site="k1"] .site-board__code,
.sites-layout:has([data-site="k1"]:focus-visible) .site-board__row[data-site="k1"] .site-board__code,
.sites-layout[data-active-site="k2"] .site-board__row[data-site="k2"] .site-board__code,
.sites-layout:has([data-site="k2"]:hover) .site-board__row[data-site="k2"] .site-board__code,
.sites-layout:has([data-site="k2"]:focus-visible) .site-board__row[data-site="k2"] .site-board__code,
.sites-layout[data-active-site="k3"] .site-board__row[data-site="k3"] .site-board__code,
.sites-layout:has([data-site="k3"]:hover) .site-board__row[data-site="k3"] .site-board__code,
.sites-layout:has([data-site="k3"]:focus-visible) .site-board__row[data-site="k3"] .site-board__code {
  color: var(--c-timber-600);
}

.sites-context {
  margin: clamp(1.35rem, 3vw, 2rem) 0 0;
  max-width: var(--measure);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  line-height: 1.5;
}
.sites-quiet { margin-top: 0.85rem; padding-top: 0.95rem; }

/* Vertical: article already crossfades; panel gets a short enter. */
@keyframes panel-enter {
  from { opacity: 0.25; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.vertical.is-active .vertical__panel.is-enter {
  animation: panel-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Jump chips: sentence case. Eyebrows / kickers stay tiny mono caps. */
.vertical-groups .vertical-index button,
.vertical-groups .vertical-index button .vertical-index__name {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Diamond rail: quiet current pulse. Chapter bar underline already paints. */
.page-rail a[aria-current="true"] {
  animation: rail-current 2.8s ease-in-out infinite;
}
@keyframes rail-current {
  0%, 100% { box-shadow: 0 0 0 4px rgba(176, 122, 68, 0.32); }
  50% { box-shadow: 0 0 0 7px rgba(176, 122, 68, 0.1); }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .sites-map__pin::before,
  .sites-map__pin:hover::before,
  .sites-map__pin:focus-visible::before,
  .sites-map__pin[aria-pressed="true"]::before,
  .sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"]::before,
  .sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"]::before,
  .sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"]::before,
  .sites-map__pin.is-pulse .sites-map__ring,
  .page-rail a[aria-current="true"] {
    animation: none !important;
  }
  .sites-map__pin::before { opacity: 0 !important; }
  .vertical.is-active .vertical__panel.is-enter { animation: none; }
  .site-board__row { transition: none; }
  .sites-map__ring { transition: none; }
}
@media (max-width: 719px) {
  .sites-map__pin,
  .sites-map__tag { display: none; }
}

@media print {
  .sites-map__pin::before,
  .page-rail a[aria-current="true"],
  .vertical.is-active .vertical__panel.is-enter { animation: none !important; }
  .sites-context, .site-board__row { break-inside: avoid; color: #000; }
}

/* ==========================================================================
   2026-08-31 side pages — Compute / Energy / Thermal
   Compact contact. No sources list. Nav current page.
   ========================================================================== */

.site-nav__list a[aria-current="page"] {
  color: var(--c-ink);
  border-bottom-color: var(--c-timber-500);
}
@media (max-width: 1199px) {
  .site-nav__list a[aria-current="page"] {
    color: var(--c-timber-300);
    border-bottom-color: rgba(243, 239, 230, 0.08);
  }
}
.nav-pill[data-on-dark] .site-nav__list a[aria-current="page"] {
  color: var(--c-on-dark);
  border-bottom-color: var(--c-timber-400);
}

@media (min-width: 1100px) {
  .site-nav__list { gap: 0.72rem; }
  .site-nav__list a { font-size: 0.82rem; }
}
@media (min-width: 1180px) {
  .site-nav__list { gap: 1rem; }
  .site-nav__list a { font-size: 0.88rem; }
}

.holds-scan h3 a,
.purpose-scan h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.holds-scan h3 a:hover,
.purpose-scan h3 a:hover,
.purpose-scan h3 a:focus-visible {
  border-bottom-color: var(--c-timber-500);
}

.cases-more {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.95rem;
  color: var(--c-ink-2);
}
.vertical__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.15rem;
}
.vertical__more {
  color: var(--c-timber-300);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(221, 191, 147, 0.35);
}
.vertical__more:hover { color: var(--c-timber-400); border-bottom-color: var(--c-timber-400); }

/* Side pages */
.side-hero {
  padding: clamp(5.5rem, 10vw, 7.5rem) 0 clamp(2.4rem, 5vw, 3.4rem);
  background: var(--c-offwhite);
  border-bottom: 1px solid var(--c-stone-300);
}
.side-hero .eyebrow { margin-bottom: 0.65rem; }
.side-hero__title {
  font-size: clamp(2.15rem, 1.15rem + 3.6vw, 3.85rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--c-forest-950);
  max-width: 18ch;
  margin: 0;
}
.side-hero__deck {
  margin: 0.9rem 0 0;
  max-width: 38rem;
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--c-ink-2);
}
.side-hero .cta-row { margin-top: 1.25rem; }

.section--side {
  background: var(--c-offwhite);
  padding-block: clamp(2.4rem, 5vw, 3.8rem);
}
.section--side.section--paper { background: var(--c-paper); }
.section--side .section__head { margin-bottom: 1.35rem; }
.section--side .section__title {
  color: var(--c-forest-950);
  font-size: clamp(1.55rem, 1.05rem + 1.6vw, 2.15rem);
}

.side-scan {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem 1.5rem;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--c-stone-300);
}
.side-scan--3 { grid-template-columns: repeat(3, 1fr); }
.side-scan__kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-timber-600);
  margin: 0 0 0.3rem;
}
.side-scan h3 {
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 0.35rem;
}
.side-scan p {
  margin: 0;
  color: var(--c-ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .side-scan,
  .side-scan--3 { grid-template-columns: 1fr; }
}

.side-quiet {
  margin: 1.25rem 0 0;
  max-width: 42rem;
  color: var(--c-ink-2);
  font-size: 0.95rem;
  line-height: 1.5;
}
.side-cta { margin: 1.6rem 0 0; }
.side-back {
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
  color: var(--c-ink-3);
}
.side-still {
  margin: 0 0 1.5rem;
  max-width: 52rem;
}
.side-still .viz-frame__shot { aspect-ratio: 3 / 2; }
.bring--side { margin-top: 0.5rem; }

.js .side-scan > li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .side-scan.is-visible > li { opacity: 1; transform: none; }
.js .side-scan.is-visible > li:nth-child(1) { transition-delay: 0.04s; }
.js .side-scan.is-visible > li:nth-child(2) { transition-delay: 0.1s; }
.js .side-scan.is-visible > li:nth-child(3) { transition-delay: 0.16s; }
.js .side-scan.is-visible > li:nth-child(4) { transition-delay: 0.22s; }
@media (prefers-reduced-motion: reduce) {
  .js .side-scan > li { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 719px) {
  .js .side-scan > li { opacity: 1; transform: none; transition: none; }
}

@media print {
  .side-hero, .section--side, .side-scan { break-inside: avoid; color: #000; }
  .side-hero__title, .section--side .section__title { color: #000 !important; }
}

/* ==========================================================================
   2026-08-31 Compute/AI focus + Flexibility side page
   Vanilla CSS. No orange / WebGL / Calendly. prefers-reduced-motion respected
   via existing .reveal / side-scan rules.
   ========================================================================== */

.hero.hero--fold .hero__quiet {
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
  font-weight: 500;
}
.hero.hero--fold .hero__quiet a {
  color: var(--c-on-dark-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(221, 191, 147, 0.45);
}
.hero.hero--fold .hero__quiet a:hover { color: var(--c-timber-300); }

.section--compute-band {
  background: var(--c-forest-950);
  color: var(--c-on-dark);
  padding-block: clamp(2.2rem, 4.5vw, 3.4rem);
  border-block: 1px solid rgba(243, 239, 230, 0.08);
}
.compute-band .eyebrow { color: var(--c-timber-300); margin-bottom: 0.55rem; }
.compute-band__title {
  font-size: clamp(1.55rem, 1.05rem + 1.8vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--c-on-dark);
  max-width: 22ch;
  margin: 0;
}
.compute-band__lead {
  max-width: 42rem;
  color: var(--c-on-dark-2);
  margin: 0.7rem 0 0;
  font-size: 1.02rem;
  line-height: 1.45;
}
.compute-band__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  margin: 1.1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}
.compute-band__links a {
  color: var(--c-timber-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(221, 191, 147, 0.35);
}
.compute-band__links a:hover { color: var(--c-timber-400); }
.compute-band__cta { margin: 1rem 0 0; }
.compute-band__cta .text-link {
  color: var(--c-timber-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(221, 191, 147, 0.4);
}
.compute-band__cta .text-link:hover { color: var(--c-timber-400); }

.page-compute .side-hero__title { max-width: 22ch; }

.side-ai p {
  max-width: 42rem;
  color: var(--c-ink-2);
  font-size: 1.02rem;
  line-height: 1.5;
  margin: 0 0 0.9rem;
}
.side-ai p:last-child { margin-bottom: 0; }
.side-scan--ai { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .side-scan--ai { grid-template-columns: 1fr; }
}
.section--side .text-link { font-weight: 500; }
.side-scan a.text-link { color: var(--c-forest-700); }

.site-nav__list a { white-space: nowrap; }
@media (min-width: 1100px) {
  .site-nav__list { gap: 0.48rem; }
  .site-nav__list a { font-size: 0.74rem; }
}
@media (min-width: 1180px) {
  .site-nav__list { gap: 0.62rem; }
  .site-nav__list a { font-size: 0.8rem; }
}
@media (min-width: 1360px) {
  .site-nav__list { gap: 0.9rem; }
  .site-nav__list a { font-size: 0.86rem; }
}

@media print {
  .section--compute-band, .compute-band, .side-ai { break-inside: avoid; color: #000; }
  .compute-band__title { color: #000 !important; }
}

/* ==========================================================================
   2026-08-31 deck-purpose gap
   Tight Why Kelvin band. Sites geography. No second H1. Forest / timber.
   ========================================================================== */

.section--purpose {
  background: var(--c-paper);
  border-top: 1px solid var(--c-stone-300);
}
.purpose-scan {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem 2.25rem;
  margin: 0;
  padding: 0;
}
.purpose-scan li {
  padding-top: 1rem;
  border-top: 1px solid var(--c-stone-300);
  min-width: 0;
}
.purpose-scan__kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-timber-600);
  margin: 0 0 0.3rem;
}
.purpose-scan h3 {
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0 0 0.35rem;
}
.purpose-scan p {
  margin: 0;
  color: var(--c-ink-2);
  font-size: 0.95rem;
  line-height: 1.42;
  max-width: 36rem;
}
@media (max-width: 800px) {
  .purpose-scan { grid-template-columns: 1fr; }
}
.sites-geo {
  margin: 0 0 1.15rem;
  max-width: 46rem;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--c-ink);
}
@media print {
  .section--purpose, .purpose-scan, .sites-geo { break-inside: avoid; color: #000; }
  .purpose-scan h3, .purpose-scan p, .purpose-scan__kicker, .sites-geo { color: #000 !important; }
  .purpose-scan { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   2026-08-31 motion + context
   One easing system. Collision cuts live in HTML. Vanilla CSS.
   No Lenis / GSAP / WebGL / Ken Burns / orange.
   prefers-reduced-motion and <720px: static.
   ========================================================================== */

:root {
  --ease: cubic-bezier(.19, 1, .22, 1);
  --dur: 0.7s;
  --dur-stagger: 0.62s;
  --dur-line: 0.7s;
}

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

.js .clip-inner {
  transition: transform var(--dur) var(--ease);
}
.js .side-hero.is-ready .clip-inner { transform: none; }

.js .holds-scan > li,
.js .purpose-scan > li,
.js .pay-strip ol > li,
.js .glance > li,
.js .catalogue > li,
.js .hero-stats .stat,
.js .phases__list > li,
.js .side-scan > li,
.js .sites-why > li,
.js .gap-grid > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-stagger) var(--ease), transform var(--dur-stagger) var(--ease);
}
.js .holds-scan.is-visible > li,
.js .purpose-scan.is-visible > li,
.js .pay-strip.is-visible ol > li,
.js .glance.is-visible > li,
.js .catalogue.is-visible > li,
.js .hero-stats.is-visible .stat,
.js .phases.is-visible .phases__list > li,
.js .side-scan.is-visible > li,
.js .sites-why.is-visible > li,
.js .gap-grid.is-visible,
.js .gap-grid.reveal.is-visible > *,
.js .gap-col.is-visible {
  opacity: 1;
  transform: none;
}
.js .holds-scan.is-visible > li:nth-child(1),
.js .purpose-scan.is-visible > li:nth-child(1),
.js .pay-strip.is-visible ol > li:nth-child(1),
.js .glance.is-visible > li:nth-child(1),
.js .catalogue.is-visible > li:nth-child(1),
.js .hero-stats.is-visible .stat:nth-child(1),
.js .side-scan.is-visible > li:nth-child(1),
.js .sites-why.is-visible > li:nth-child(1),
.js .gap-grid > .reveal.is-visible:nth-child(1) { transition-delay: 0.05s; }
.js .holds-scan.is-visible > li:nth-child(2),
.js .purpose-scan.is-visible > li:nth-child(2),
.js .pay-strip.is-visible ol > li:nth-child(2),
.js .glance.is-visible > li:nth-child(2),
.js .catalogue.is-visible > li:nth-child(2),
.js .hero-stats.is-visible .stat:nth-child(2),
.js .side-scan.is-visible > li:nth-child(2),
.js .sites-why.is-visible > li:nth-child(2),
.js .gap-grid > .reveal.is-visible:nth-child(2) { transition-delay: 0.11s; }
.js .holds-scan.is-visible > li:nth-child(3),
.js .purpose-scan.is-visible > li:nth-child(3),
.js .pay-strip.is-visible ol > li:nth-child(3),
.js .glance.is-visible > li:nth-child(3),
.js .catalogue.is-visible > li:nth-child(3),
.js .hero-stats.is-visible .stat:nth-child(3),
.js .side-scan.is-visible > li:nth-child(3),
.js .sites-why.is-visible > li:nth-child(3) { transition-delay: 0.17s; }
.js .holds-scan.is-visible > li:nth-child(4),
.js .purpose-scan.is-visible > li:nth-child(4),
.js .pay-strip.is-visible ol > li:nth-child(4),
.js .catalogue.is-visible > li:nth-child(4),
.js .hero-stats.is-visible .stat:nth-child(4),
.js .side-scan.is-visible > li:nth-child(4) { transition-delay: 0.23s; }
.js .holds-scan.is-visible > li:nth-child(5) { transition-delay: 0.29s; }
.js .holds-scan.is-visible > li:nth-child(6) { transition-delay: 0.35s; }
.js .holds-scan.is-visible > li:nth-child(7) { transition-delay: 0.41s; }
.js .holds-scan.is-visible > li:nth-child(8) { transition-delay: 0.47s; }

.js .section__head.reveal::after {
  transition: transform var(--dur-line) var(--ease);
}
.js .catalogue::before,
.js .glance::before {
  transition: transform var(--dur-line) var(--ease);
}

.catalogue__row {
  transition: transform 0.5s var(--ease), color 0.25s ease;
}
.btn--cta::before {
  transition: transform 0.55s var(--ease);
}
.nav-toggle__bars span {
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}

.js .heat-pick .viz-frame__shot picture,
.js .hall-pair .viz-frame__shot picture,
.js .scale .viz-frame__shot picture {
  transition: opacity 0.62s var(--ease);
}
.js .scale__panel {
  transition: opacity 0.62s var(--ease), visibility 0.62s var(--ease);
}
.vertical {
  transition: opacity 0.62s var(--ease), visibility 0.62s var(--ease);
}

.flex-hotspot::after {
  animation: hotspot-ring 2.2s var(--ease) infinite;
}
.sites-map__pin.is-pulse .sites-map__ring {
  animation: pin-select 0.55s var(--ease);
}
.page-rail a {
  transition: transform 0.5s var(--ease), background-color 0.5s ease, box-shadow 0.5s ease;
}
.hall-chapters a::after {
  transition: transform 0.5s var(--ease);
}

/* Why Kelvin: even 2x2 scan, not a leftover dump */
.purpose-scan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-stone-300);
}
.purpose-scan li {
  padding: 1.15rem 1.5rem 1.35rem 0;
  border-top: 0;
  border-bottom: 1px solid var(--c-stone-300);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.purpose-scan li:nth-child(odd) { padding-right: 1.6rem; }
.purpose-scan li:nth-child(even) {
  padding-left: 1.6rem;
  border-left: 1px solid var(--c-stone-300);
}
.purpose-scan h3 {
  min-height: 2.5rem;
  display: flex;
  align-items: flex-end;
}
.purpose-scan p { flex: 1; }
@media (max-width: 800px) {
  .purpose-scan { grid-template-columns: 1fr; }
  .purpose-scan li:nth-child(odd),
  .purpose-scan li:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }
  .purpose-scan h3 { min-height: 0; }
}

/* Pill: 8 items, one row at 1280. Compact tracking. Compute is shorter than Compute / AI. */
.nav-pill { flex-wrap: nowrap; }
.site-nav { flex: 1 1 auto; min-width: 0; }
.site-nav__list {
  flex-wrap: nowrap;
  letter-spacing: -0.02em;
}
.site-nav__list a { white-space: nowrap; }
@media (min-width: 1100px) {
  .nav-pill { gap: 0.4rem; padding-left: 0.8rem; }
  .site-nav__list { gap: 0.38rem; }
  .site-nav__list a { font-size: 0.7rem; letter-spacing: -0.025em; }
}
@media (min-width: 1200px) {
  .nav-pill { width: min(100% - 1.5rem, 1240px); gap: 0.55rem; }
  .site-nav__list { gap: 0.55rem; }
  .site-nav__list a { font-size: 0.76rem; }
}
@media (min-width: 1360px) {
  .site-nav__list { gap: 0.78rem; }
  .site-nav__list a { font-size: 0.84rem; letter-spacing: -0.012em; }
}

#purpose,
#compute-band {
  scroll-margin-top: calc(0.85rem + 52px + 40px);
}

.compute-band__cta { margin: 1.15rem 0 0; }
.compute-band__cta .btn--ghost-light {
  color: var(--c-on-dark);
  border-color: rgba(243, 239, 230, 0.28);
}
.compute-band__cta .btn--ghost-light:hover {
  color: var(--c-timber-300);
  border-color: var(--c-timber-400);
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .js .reveal,
  .js .holds-scan > li,
  .js .purpose-scan > li,
  .js .pay-strip ol > li,
  .js .glance > li,
  .js .catalogue > li,
  .js .hero-stats .stat,
  .js .phases__list > li,
  .js .side-scan > li,
    .js .sites-why > li,
  .js .gap-grid > * {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
  .js .clip-inner,
  .js .side-hero.is-ready .clip-inner { transform: none !important; transition: none; }
  .js .section__head.reveal::after,
  .js .catalogue::before,
  .js .glance::before { transform: none; transition: none; }
  .js .section__head.reveal.is-visible::after,
  .js .catalogue.is-visible::before,
  .js .glance.is-visible::before { transform: scaleX(1); }
  .flex-hotspot::after { animation: none; display: none; }
  .sites-map__pin.is-pulse .sites-map__ring { animation: none; }
  .catalogue__row,
  .catalogue__row:hover { transform: none; transition: none; }
  .js .heat-pick .viz-frame__shot picture,
  .js .hall-pair .viz-frame__shot picture,
  .js .scale .viz-frame__shot picture,
  .js .scale__panel,
  .page-rail a,
  .vertical,
  .btn--cta::before,
  .hall-chapters a::after {
    transition: none;
    animation: none;
  }
}

@media print {
  .js .side-scan > li,
    .js .sites-why > li,
  .js .gap-grid > * { opacity: 1 !important; transform: none !important; }
  .purpose-scan { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   2026-08-31 Compute name + page fill
   Flagship Compute page: jump chips, 4-spec scan, section anchors.
   Vanilla CSS. No orange / WebGL / Calendly.
   ========================================================================== */

.side-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.95rem;
  margin: 1.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.side-jump a {
  color: var(--c-forest-700);
  text-decoration: none;
  border-bottom: 1px solid rgba(18, 41, 31, 0.22);
  padding-bottom: 0.12rem;
}
.side-jump a:hover,
.side-jump a:focus-visible {
  color: var(--c-timber-600);
  border-color: var(--c-timber-600);
}

.side-scan--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .side-scan--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .side-scan--4 { grid-template-columns: 1fr; }
}
.js .side-scan.is-visible > li:nth-child(5) { transition-delay: 0.28s; }

#ai, #hpc, #cloud, #edge, #cooling, #parts, #bitcoin, #unit, #century, #contract {
  scroll-margin-top: 5.75rem;
}

.bring--side .bring__col p {
  margin: 0;
  color: var(--c-ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}

@media print {
  .side-jump { display: none; }
  .side-scan--4 { break-inside: avoid; }
}

/* ==========================================================================
   2026-08-31 local energy / compute / AI / heat
   2×2 purpose-scan on energy.html. Same visual system as Why Kelvin.
   Vanilla CSS. No orange / WebGL / Calendly.
   ========================================================================== */

#local,
#sovereign {
  scroll-margin-top: 5.75rem;
}

.section--side .side-scan + .side-ai {
  margin-top: 1.5rem;
}

@media print {
  #local { break-inside: avoid; color: #000; }
}


/* ==========================================================================
   2026-08-31 attached decks — public-safe
   General deck (24 pp) + first-three-sites (56 slides). Investor voice,
   no raise / MW-ready / partner names. Vanilla CSS. No orange / WebGL.
   ========================================================================== */

.chapter__name {
  margin: 0.7rem 0 0;
  font-size: var(--fs-small);
  color: var(--c-ink-3);
  line-height: 1.45;
}

.purpose-quiet {
  margin: 0.75rem 0 1.35rem;
  max-width: 38rem;
  color: var(--c-ink-2);
  font-size: 1.05rem;
  line-height: 1.45;
}

.gap-zone {
  margin: 1.35rem 0 0;
  max-width: 46rem;
  font-size: var(--fs-small);
  color: var(--c-ink-3);
  line-height: 1.5;
}

.trio-quiet {
  margin: 0 0 1.15rem;
  max-width: 46rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--c-on-dark-3);
}

.section--dark .trio-quiet { color: var(--c-on-dark-3); }

.side-hero__quiet {
  margin: 0.85rem 0 0;
  max-width: 40rem;
  color: var(--c-ink-2);
  font-size: 1.05rem;
  line-height: 1.45;
}

.zone-aside {
  margin: 1.35rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-stone-300);
  max-width: 42rem;
}
.zone-aside__note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0 0 0.55rem;
}
.zone-aside p {
  margin: 0 0 0.45rem;
  color: var(--c-ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}
.zone-aside p:last-child { margin-bottom: 0; }

.flex-compare--paper {
  margin: 0 0 1.5rem;
  padding-top: 0;
  border-top: 0;
}
.compare-table--paper th,
.compare-table--paper td {
  color: var(--c-ink-2);
  border-bottom-color: var(--c-stone-300);
}
.compare-table--paper thead th {
  background: transparent;
  color: var(--c-ink-3);
}
.compare-table--paper thead th:nth-child(2) { color: var(--c-timber-600); }
.compare-table--paper tbody th { color: var(--c-ink); }
/* Sticky criterion col: forest-900 was for dark tables — paper needs ink on cream */
.compare-table--paper thead th {
  background: var(--c-paper, #f3efe6);
}
.compare-table--paper thead th:first-child,
.compare-table--paper tbody th {
  background: var(--c-paper, #f3efe6);
  color: var(--c-ink);
  box-shadow: 4px 0 8px -6px rgba(18, 41, 31, 0.12);
}
.compare-table--paper tbody td:first-of-type {
  color: var(--c-ink);
  box-shadow: inset 2px 0 0 var(--c-timber-500);
}
.flex-compare--paper .flex-compare__note {
  color: var(--c-ink-3);
}

#century { scroll-margin-top: 5.75rem; }

@media (max-width: 719px) {
  .compare-table--paper tbody td {
    border-bottom-color: var(--c-stone-300);
  }
}

@media print {
  .chapter__name, .purpose-quiet, .gap-zone, .trio-quiet, .zone-aside { color: #000; }
  .compare-table--paper th, .compare-table--paper td { color: #000 !important; }
}

/* ==========================================================================
   2026-08-31 investor pass 2
   Hierarchy + air. Tasteful extra motion. Vanilla CSS.
   No Lenis / GSAP / WebGL / Ken Burns / orange.
   prefers-reduced-motion and <720px: static.
   Footer / contact: no height animation.
   ========================================================================== */

/* Type: chips own the figures. Glance is why. Rail is catalogue. */
.glance--why .stat__value {
  font-size: clamp(1.02rem, 0.94rem + 0.35vw, 1.2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--c-on-dark-2);
}
.glance--why .stat__label {
  font-size: 0.78rem;
  color: var(--c-on-dark-3);
  max-width: 14rem;
}
.section--dark .spec-chips .flex-specs__value {
  font-size: clamp(1.55rem, 1.2rem + 1.05vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}
.section--dark .spec-chips .flex-specs__label {
  font-size: 0.64rem;
  opacity: 0.9;
}
.spec-rail .spec-strip dd {
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--c-on-dark-2);
}
.spec-rail .spec-strip > div[data-chip].is-on dd {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--c-on-dark);
}
.spec-strip__hint { font-size: 0.78rem; }

/* Catalogue: numbers quieter than the name */
.catalogue__n {
  opacity: 0.5;
  font-weight: 400;
}
.catalogue__name {
  font-weight: 500;
}

/* More air in the Flexbox chapter */
.glance {
  margin-bottom: clamp(2.1rem, 4.5vw, 3rem);
}
.bring-quiet {
  margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem);
  max-width: 40rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--c-on-dark-3);
}


/* Clip-inner: slightly longer, more decisive */
.js .clip-inner {
  transition: transform 0.8s var(--ease);
}
.js .hero.hero--fold.is-ready .clip:nth-child(2) .clip-inner,
.js .hero:not(.hero--fold).is-ready .clip:nth-child(2) .clip-inner,
.js .is-visible .clip:nth-child(2) .clip-inner {
  transition-delay: 0.14s;
}

/* Thin timber kicker line that draws in */
.purpose-scan__kicker,
.side-scan__kicker {
  position: relative;
  display: inline-block;
  padding-bottom: 0.32rem;
}
.purpose-scan__kicker::after,
.side-scan__kicker::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.65rem;
  height: 1px;
  background: var(--c-timber-500);
  transform: scaleX(1);
  transform-origin: left center;
}
.js .purpose-scan__kicker::after,
.js .side-scan__kicker::after {
  transform: scaleX(0);
  transition: transform 0.7s var(--ease);
}
.js .purpose-scan.is-visible .purpose-scan__kicker::after,
.js .side-scan.is-visible .side-scan__kicker::after {
  transform: scaleX(1);
}
.js .purpose-scan.is-visible li:nth-child(1) .purpose-scan__kicker::after,
.js .side-scan.is-visible li:nth-child(1) .side-scan__kicker::after { transition-delay: 0.12s; }
.js .purpose-scan.is-visible li:nth-child(2) .purpose-scan__kicker::after,
.js .side-scan.is-visible li:nth-child(2) .side-scan__kicker::after { transition-delay: 0.2s; }
.js .purpose-scan.is-visible li:nth-child(3) .purpose-scan__kicker::after,
.js .side-scan.is-visible li:nth-child(3) .side-scan__kicker::after { transition-delay: 0.28s; }
.js .purpose-scan.is-visible li:nth-child(4) .purpose-scan__kicker::after,
.js .side-scan.is-visible li:nth-child(4) .side-scan__kicker::after { transition-delay: 0.36s; }

/* Compute-band / dark acts: quiet grain + hairline. Does not fight copy. */
.section--compute-band {
  position: relative;
  isolation: isolate;
}
.section--compute-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.045;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}
.section--compute-band .container { position: relative; z-index: 1; }
.section--hall {
  position: relative;
}
.section--hall::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 122, 68, 0.28), transparent);
  pointer-events: none;
}

/* Chip / hotspot / vertical-index: snappier pressed */
.section--dark .spec-chips .flex-chip {
  transition:
    background-color 0.22s var(--ease),
    border-color 0.22s var(--ease),
    color 0.22s var(--ease),
    transform 0.22s var(--ease),
    opacity 0.22s var(--ease);
}
.section--dark .spec-chips .flex-chip[aria-pressed="true"] {
  transform: scale(0.985);
}
.flex-hotspot {
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.hall-pair[data-active-chip="mw"] .flex-hotspot[data-chip="mw"],
.hall-pair[data-active-chip="ft"] .flex-hotspot[data-chip="ft"],
.hall-pair[data-active-chip="rk"] .flex-hotspot[data-chip="rk"],
.hall-pair[data-active-chip="ms"] .flex-hotspot[data-chip="ms"],
.hall-pair[data-active-chip="ht"] .flex-hotspot[data-chip="ht"] {
  transform: scale(1.08);
}
.vertical-groups .vertical-index button {
  transition:
    color 0.22s var(--ease),
    background-color 0.22s var(--ease),
    border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}
.vertical-groups .vertical-index button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--c-timber-400);
}

/* Page-rail current: slightly more presence */
.page-rail a[aria-current="true"] {
  transform: rotate(45deg) scale(1.9);
  box-shadow: 0 0 0 5px rgba(176, 122, 68, 0.38);
}
@keyframes rail-current {
  0%, 100% { box-shadow: 0 0 0 5px rgba(176, 122, 68, 0.38); }
  50% { box-shadow: 0 0 0 8px rgba(176, 122, 68, 0.12); }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .js .clip-inner,
  .js .hero.hero--fold.is-ready .clip:nth-child(2) .clip-inner,
  .js .hero:not(.hero--fold).is-ready .clip:nth-child(2) .clip-inner,
  .js .is-visible .clip:nth-child(2) .clip-inner {
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
  .purpose-scan__kicker::after,
  .side-scan__kicker::after,
  .js .purpose-scan.is-visible .purpose-scan__kicker::after,
  .js .side-scan.is-visible .side-scan__kicker::after {
    transform: scaleX(1);
    transition: none;
  }
  .section--dark .spec-chips .flex-chip,
  .section--dark .spec-chips .flex-chip[aria-pressed="true"],
  .flex-hotspot,
  .hall-pair[data-active-chip="mw"] .flex-hotspot[data-chip="mw"],
  .hall-pair[data-active-chip="ft"] .flex-hotspot[data-chip="ft"],
  .hall-pair[data-active-chip="rk"] .flex-hotspot[data-chip="rk"],
  .hall-pair[data-active-chip="ms"] .flex-hotspot[data-chip="ms"],
  .hall-pair[data-active-chip="ht"] .flex-hotspot[data-chip="ht"],
  .vertical-groups .vertical-index button {
    transform: none;
    transition: none;
  }
  .page-rail a[aria-current="true"] {
    animation: none !important;
    transform: rotate(45deg) scale(1.35);
    box-shadow: none;
  }
  .section--compute-band::before { opacity: 0.03; }
}

@media print {
  .purpose-scan__kicker::after,
  .side-scan__kicker::after { transform: none; }
  .section--compute-band::before,
  .section--hall::after { display: none; }
  .bring-quiet { color: #000; }
}

/* ==========================================================================
   2026-08-31 pages pass 3 — side-page depth
   Grade scale (thermal). Extra scan delay. Forest / timber. Vanilla CSS.
   Motion off under prefers-reduced-motion and <720px (inherits existing).
   ========================================================================== */

.grade {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 1.35rem 0 0;
  padding: 0;
  border: 1px solid var(--c-stone-300);
}
.grade li {
  padding: 1.05rem 1.1rem 1.15rem;
  border-right: 1px solid var(--c-stone-300);
  min-width: 0;
}
.grade li:last-child { border-right: none; }
.grade__k {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-timber-600);
  margin: 0;
}
.grade__l {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0.35rem 0 0;
  line-height: 1.35;
}
.grade-cap {
  margin: 0.7rem 0 0;
  font-size: 0.88rem;
  color: var(--c-ink-3);
  max-width: 42rem;
  line-height: 1.45;
}
@media (max-width: 860px) {
  .grade { grid-template-columns: 1fr 1fr; }
  .grade li:nth-child(odd) { border-bottom: 1px solid var(--c-stone-300); }
  .grade li:nth-child(2) { border-right: none; }
}
@media (max-width: 520px) {
  .grade { grid-template-columns: 1fr; }
  .grade li {
    border-right: none;
    border-bottom: 1px solid var(--c-stone-300);
  }
  .grade li:last-child { border-bottom: none; }
}

.page-thermal .side-hero__title { max-width: 18ch; }

.js .side-scan.is-visible > li:nth-child(6) { transition-delay: 0.34s; }

#grade, #dest, #capture, #host, #who, #queue, #north, #sign, #plots, #surplus, #wire, #pays, #faas, #uses, #loop, #control, #markets, #bess, #contract, #cooling, #ai, #hpc, #cloud, #edge, #bitcoin, #unit {
  scroll-margin-top: 5.75rem;
}

@media print {
  .grade, .grade li { break-inside: avoid; color: #000; }
  .grade__k, .grade__l { color: #000 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .js .side-scan.is-visible > li:nth-child(6) { transition: none; }
}
@media (max-width: 719px) {
  .js .side-scan.is-visible > li:nth-child(6) { transition: none; }
}


/* ==========================================================================
   2026-08-31 pass 4 — craft + scan
   Grade as a scale (not a text row). Side-scan hairline + stagger.
   Air on purpose / holds. Buffer muted. Hamburger already 1099.
   Vanilla CSS. No Lenis / GSAP / WebGL / Ken Burns / orange.
   New motion off under prefers-reduced-motion and <720px.
   ========================================================================== */

/* Type: one dominant figure. Quieter secondary. More air. */
.purpose-scan li {
  padding-top: 1.45rem;
  padding-bottom: 1.7rem;
}
.purpose-scan h3 {
  min-height: 2.7rem;
  font-size: 1.08rem;
}
.purpose-scan p {
  font-size: 0.92rem;
  line-height: 1.48;
  color: var(--c-ink-2);
}
.holds-scan {
  gap: 1.4rem 1.9rem;
  padding: 1.5rem 0 0.65rem;
}
.holds-scan h3 { font-size: 1.08rem; }
.holds-scan p {
  font-size: 0.9rem;
  line-height: 1.48;
}
.holds-scan__moat {
  margin-top: 0.55rem;
  font-size: 0.9rem;
  color: var(--c-ink);
}
.section--gap .stat__value {
  font-weight: 600;
  letter-spacing: -0.035em;
}
.section--gap .stat__label {
  font-size: 0.78rem;
  color: var(--c-ink-3);
}
.section--side .section__head { margin-bottom: 1.55rem; }
.section--side .section__head .side-quiet {
  margin-top: 0.75rem;
  max-width: 40rem;
}

/* Buffer tier: labelled not a public product — recedes vs Batch/Training */
.side-scan__muted h3 { font-weight: 400; color: var(--c-ink-2); }
.side-scan__muted p { color: var(--c-ink-3); }

/* Grade scale: numbered ticks, teal power-in / amber heat-out, real weight */
.grade {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 1.75rem 0 0;
  padding: 1.7rem 0 0.2rem;
  border: 0;
  position: relative;
}
.grade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--c-stone-300);
}
.grade li {
  position: relative;
  padding: 1.2rem 1.1rem 1.35rem 0;
  border: 0;
  min-width: 0;
}
.grade li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.7rem;
  width: 1px;
  height: 14px;
  background: var(--c-stone-500);
  transform-origin: top center;
}
.grade--power::before { background: var(--c-power); width: 2px; height: 16px; }
.grade--heat::before { background: var(--c-heat); width: 2px; height: 16px; }
.grade__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0 0 0.35rem;
}
.grade__k {
  font-family: var(--font-mono);
  font-size: clamp(1.28rem, 1rem + 1.15vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--c-forest-950);
  margin: 0;
  line-height: 1.1;
}
.grade--power .grade__k { color: var(--c-power); }
.grade--heat .grade__k { color: var(--c-heat); }
.grade__l {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0.45rem 0 0;
  line-height: 1.35;
}
.grade-cap {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  color: var(--c-ink-3);
  max-width: 42rem;
  line-height: 1.45;
}

/* 1. Grade hairline draws left → right once in view */
.js .grade::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-power) 0%, var(--c-timber-500) 52%, var(--c-heat) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease);
  z-index: 1;
}
.js .grade.is-visible::before { transform: scaleX(1); }

/* 2. Grade ticks + cards: same stagger + kicker feel as purpose-scan */
.js .grade > li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-stagger) var(--ease), transform var(--dur-stagger) var(--ease);
}
.js .grade.is-visible > li { opacity: 1; transform: none; }
.js .grade.is-visible > li:nth-child(1) { transition-delay: 0.05s; }
.js .grade.is-visible > li:nth-child(2) { transition-delay: 0.12s; }
.js .grade.is-visible > li:nth-child(3) { transition-delay: 0.19s; }
.js .grade.is-visible > li:nth-child(4) { transition-delay: 0.26s; }
.js .grade li::before {
  transform: scaleY(0);
  transition: transform 0.55s var(--ease);
}
.js .grade.is-visible li::before { transform: scaleY(1); }
.js .grade.is-visible li:nth-child(1)::before { transition-delay: 0.12s; }
.js .grade.is-visible li:nth-child(2)::before { transition-delay: 0.2s; }
.js .grade.is-visible li:nth-child(3)::before { transition-delay: 0.28s; }
.js .grade.is-visible li:nth-child(4)::before { transition-delay: 0.36s; }

/* 3. Side-scan lists: hairline draw-in (kicker already draws) */
.js .side-scan {
  border-top-color: transparent;
  position: relative;
}
.js .side-scan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--c-stone-300);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease);
}
.js .side-scan.is-visible::before { transform: scaleX(1); }

@media (max-width: 860px) {
  .grade { grid-template-columns: 1fr 1fr; padding-top: 1.4rem; }
  .grade li {
    padding: 1.35rem 1rem 1.2rem 0;
    border: 0;
  }
}
@media (max-width: 520px) {
  .grade { grid-template-columns: 1fr; }
  .grade li { padding: 1.15rem 0 1.25rem; border: 0; }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .js .grade::before,
  .js .grade.is-visible::before,
  .js .side-scan::before,
  .js .side-scan.is-visible::before {
    transform: scaleX(1);
    transition: none;
  }
  .js .grade > li,
  .js .grade.is-visible > li {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
  .js .grade li::before,
  .js .grade.is-visible li::before {
    transform: scaleY(1);
    transition: none;
    transition-delay: 0s;
  }
}

@media print {
  .js .grade::before,
  .js .side-scan::before,
  .js .grade > li { opacity: 1 !important; transform: none !important; }
  .grade--power .grade__k,
  .grade--heat .grade__k { color: #000 !important; }
}


/* ==========================================================================
   2026-08-31 pass 5 — hall restack + craft
   Fan carousel gone. Unit = Closed/Exploded still + chips; Specs = rail.
   Spec-rail stays unstuck at max-height 820px. No new sections.
   New motion off under prefers-reduced-motion and <720px.
   Vanilla CSS. No Lenis / GSAP / WebGL / Ken Burns / orange.
   ========================================================================== */

.hall-unit { margin: 0 0 clamp(1.25rem, 3vw, 2rem); }
.hall-unit .hall-pair,
.hall-unit .spec-rail { margin-bottom: 0; }

/* Closed/Exploded: 720ms ease-out-expo, not a cheap snap. */
.js .hall-pair .viz-frame__shot picture {
  transition: opacity 0.72s cubic-bezier(.19, 1, .22, 1);
}

/* Hero: extra top padding so the H1 clears the pill at 1280×800. Not a layout rewrite. */
@media (min-width: 960px) {
  .hero.hero--fold .hero__viewport {
    padding-top: clamp(6.75rem, 13vh, 7.5rem);
  }
}
@media (min-width: 960px) and (max-height: 860px) {
  .hero.hero--fold .hero__viewport { padding-top: 6.9rem; }
}

/* Map pins: selected timber fill a step stronger than hover. Plot codes stay. */
.sites-map__pin[aria-pressed="true"] .sites-map__ring,
.sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"] .sites-map__ring,
.sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"] .sites-map__ring,
.sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"] .sites-map__ring {
  background: var(--c-timber-500);
  border-color: var(--c-timber-700);
  transform: rotate(45deg) scale(1.16);
  box-shadow: 0 0 0 4px rgba(252, 250, 246, 0.94), 0 0 0 9px rgba(176, 122, 68, 0.5);
}

/* Grade: slightly heavier ticks + hairline at 1280. Same four points. */
.grade::after { height: 2px; }
.grade li::before { width: 2px; height: 16px; }
.grade--power::before { width: 3px; height: 18px; }
.grade--heat::before { width: 3px; height: 18px; }
.js .grade::before { height: 3px; }

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .js .hall-pair .viz-frame__shot picture {
    transition: none;
  }
}

/* ==========================================================================
   2026-08-31 pass 6 — interaction upgrades
   Product-switcher stills, grade ticks, load tiers, compare row, map live,
   hall tilt (half Approach), chip pulse, markets current.
   cubic-bezier(.19,1,.22,1), 500–800ms. Off under reduced-motion and <720px.
   Vanilla CSS. No Lenis / GSAP / WebGL / Ken Burns / orange.
   ========================================================================== */

/* Heat + scale: product switcher. Pressed timber. Crossfade 680ms. */
.scale__stops button[aria-pressed="true"],
.heat-pick__stops button[aria-pressed="true"],
.mode-pick__stops button[aria-pressed="true"],
.tier-pick__stops button[aria-pressed="true"] {
  background: var(--c-timber-500);
  color: var(--c-forest-950);
  border-color: var(--c-timber-500);
  box-shadow: inset 0 -2px 0 var(--c-timber-700);
}
.heat-pick__kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-timber-300);
  margin: 0 0 0.7rem;
}
.js .heat-pick .viz-frame__shot picture,
.js .scale .viz-frame__shot picture {
  transition: opacity 0.68s cubic-bezier(.19, 1, .22, 1);
}
.js .scale__panel {
  transition: opacity 0.68s cubic-bezier(.19, 1, .22, 1), visibility 0.68s cubic-bezier(.19, 1, .22, 1);
}

/* Thermal dest: same 3-way, paper surface */
.heat-pick--paper {
  margin: 0 0 1.25rem;
}
.heat-pick--paper .heat-pick__kicker { color: var(--c-timber-600); }
.heat-pick--paper .heat-pick__stops button {
  color: var(--c-ink);
  border-color: var(--c-stone-300);
  background: transparent;
}
.heat-pick--paper .heat-pick__stops button[aria-pressed="true"] {
  background: var(--c-timber-500);
  color: var(--c-paper);
  border-color: var(--c-timber-500);
  box-shadow: inset 0 -2px 0 var(--c-timber-700);
}
.heat-pick--paper .heat-pick__copy { color: var(--c-ink-2); }
.section--side .heat-pick .viz-frame__shot {
  aspect-ratio: 16 / 9;
  max-height: min(42vh, 380px);
}

/* Grade ticks are a control. 273.15 stays a scale point, not a footer. */
.grade button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
.grade button .grade__k,
.grade button .grade__l { display: block; }
.grade button:focus { outline: none; }
.grade button:focus-visible {
  outline: 2px solid var(--c-timber-500);
  outline-offset: 4px;
}
.grade li:has(button[aria-pressed="true"])::before {
  background: var(--c-timber-500);
  width: 3px;
}
.grade--power:has(button[aria-pressed="true"])::before { background: var(--c-power); }
.grade--heat:has(button[aria-pressed="true"])::before { background: var(--c-heat); }
.grade button[aria-pressed="true"] .grade__l { color: var(--c-forest-950); }
.grade-live {
  margin: 0.85rem 0 0;
  font-size: 0.95rem;
  color: var(--c-ink);
  max-width: 42rem;
  line-height: 1.45;
  min-height: 1.45em;
}

/* Compute load tiers: 4-stop, one panel. 01 muted. 04 not first fit. */
.tier-pick { margin: 0 0 1.25rem; }
.tier-pick__stops {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1.1rem;
}
.tier-pick__stops button {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.75rem;
  min-height: 44px;
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-stone-300);
  cursor: pointer;
}
.tier-pick__stops button[aria-pressed="true"] {
  background: var(--c-timber-500);
  color: var(--c-paper);
  border-color: var(--c-timber-500);
}
.tier-pick__stops .tier-pick__muted {
  color: var(--c-ink-3);
  border-style: dashed;
}
.tier-pick__stops .tier-pick__muted[aria-pressed="true"] {
  color: var(--c-paper);
  opacity: 0.82;
}
.tier-pick__stops .tier-pick__aside { color: var(--c-ink-2); }
.tier-pick__stops button:focus-visible {
  outline: 3px solid var(--c-timber-400);
  outline-offset: 2px;
}
.tier-pick__panel { margin: 0; }
.tier-pick__panel[hidden] { display: none; }
html:not(.js) .tier-pick__panel[hidden] { display: block; }
.tier-pick__panel h3 {
  font-size: 1.08rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
  color: var(--c-ink);
}
.tier-pick__panel p { margin: 0; color: var(--c-ink-2); font-size: 0.95rem; line-height: 1.45; }
.tier-pick__panel.side-scan__muted h3 { font-weight: 400; color: var(--c-ink-2); }
.tier-pick__panel.side-scan__muted p { color: var(--c-ink-3); }
.js .tier-pick__panels { position: relative; min-height: 6.5rem; }
.js .tier-pick__panel {
  transition: opacity 0.62s cubic-bezier(.19, 1, .22, 1), visibility 0.62s cubic-bezier(.19, 1, .22, 1);
}
.js .tier-pick__panel:not(.is-on) {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.js .tier-pick__panel.is-on {
  position: relative;
  opacity: 1;
  visibility: visible;
}

/* Compare: row highlight; Flexbox column owned (timber/forest). First col already sticky. */
.compare-table thead th:nth-child(2) {
  color: var(--c-timber-300);
  background: rgba(176, 122, 68, 0.14);
}
.compare-table tbody td:first-of-type {
  background: rgba(176, 122, 68, 0.08);
}
.compare-table--paper thead th:nth-child(2) {
  color: var(--c-timber-700);
  background: rgba(176, 122, 68, 0.1);
}
.compare-table--paper tbody td:first-of-type {
  background: rgba(176, 122, 68, 0.06);
}
@media (hover: hover) and (min-width: 720px) {
  .compare-table tbody tr:hover,
  .compare-table tbody tr:focus-within {
    background: rgba(176, 122, 68, 0.12);
  }
  .compare-table tbody tr:hover th,
  .compare-table tbody tr:focus-within th {
    background: rgba(18, 41, 31, 0.92);
  }
  .compare-table--paper tbody tr:hover th,
  .compare-table--paper tbody tr:focus-within th {
    background: rgba(176, 122, 68, 0.12);
  }
}


/* Hall still: half-strength tilt. Chip click = one-shot pulse on the matching shell hotspot. */
.hall-pair__shot[data-tilt] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.19, 1, .22, 1);
}
.hall-pair__shot[data-tilt].is-tilting { transition: transform 0.1s linear; }
.hall-pair[data-active-chip="mw"] .flex-hotspot[data-chip="mw"],
.hall-pair[data-active-chip="ft"] .flex-hotspot[data-chip="ft"],
.hall-pair[data-active-chip="rk"] .flex-hotspot[data-chip="rk"],
.hall-pair[data-active-chip="ms"] .flex-hotspot[data-chip="ms"],
.hall-pair[data-active-chip="ht"] .flex-hotspot[data-chip="ht"] {
  transform: translate(-50%, -50%) scale(1.08);
}
.flex-hotspot.is-pulse {
  animation: hotspot-select 0.65s cubic-bezier(.19, 1, .22, 1);
}
@keyframes hotspot-select {
  0% { transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -50%) scale(1.14); }
  100% { transform: translate(-50%, -50%) scale(1.08); }
}

/* Flexibility markets: cards stay visible. Current = timber inset. Live line under H2. */
.markets-live,
.queue-live {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  color: var(--c-timber-700);
  max-width: 40rem;
  line-height: 1.4;
}
.side-scan button[data-market],
.side-scan button[data-queue] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
.side-scan button[data-market]:focus,
.side-scan button[data-queue]:focus { outline: none; }
.side-scan button[data-market]:focus-visible,
.side-scan button[data-queue]:focus-visible {
  outline: 2px solid var(--c-timber-500);
  outline-offset: 4px;
}
.side-scan button[data-market] .side-scan__h,
.side-scan button[data-queue] .side-scan__h {
  display: block;
  font-size: 1.08rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
  color: var(--c-ink);
}
.side-scan button[data-market] .side-scan__p,
.side-scan button[data-queue] .side-scan__p {
  display: block;
  margin: 0;
  color: var(--c-ink-2);
  font-size: 0.92rem;
  line-height: 1.45;
}
.side-scan li:has(button[aria-current="true"]) {
  box-shadow: inset 3px 0 0 var(--c-timber-500);
  padding-left: 0.7rem;
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .js .heat-pick .viz-frame__shot picture,
  .js .scale .viz-frame__shot picture,
  .js .scale__panel,
  .js .tier-pick__panel,
  .js .hall-pair .viz-frame__shot picture {
    transition: none;
  }
  .hall-pair__shot[data-tilt],
  .hall-pair__shot[data-tilt].is-tilting,
  .chapter__object,
  .chapter__object.is-tilting {
    transform: none;
    transition: none;
  }
  .flex-hotspot.is-pulse { animation: none; }
  .flex-hotspot,
  .hall-pair[data-active-chip="mw"] .flex-hotspot[data-chip="mw"],
  .hall-pair[data-active-chip="ft"] .flex-hotspot[data-chip="ft"],
  .hall-pair[data-active-chip="rk"] .flex-hotspot[data-chip="rk"],
  .hall-pair[data-active-chip="ms"] .flex-hotspot[data-chip="ms"],
  .hall-pair[data-active-chip="ht"] .flex-hotspot[data-chip="ht"] {
    transform: translate(-50%, -50%);
    animation: none;
  }
  .js .grade::before,
  .js .grade.is-visible::before {
    transform: scaleX(0);
    opacity: 0;
    transition: none;
  }
  .js .grade > li,
  .js .grade.is-visible > li {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
  .js .grade li::before,
  .js .grade.is-visible li::before {
    transform: scaleY(1);
    transition: none;
  }
}

@media print {
  .heat-pick__kicker, .grade-live, .markets-live, .queue-live { color: #000; }
  .tier-pick__panel { opacity: 1 !important; position: relative !important; visibility: visible !important; }
  html:not(.js) .tier-pick__panel[hidden],
  .tier-pick__panel { display: block; }
  .hall-pair__shot[data-tilt] { transform: none; }
}

/* ==========================================================================
   2026-08-31 pass 7 — scale still paints, leftover craft
   One shared scale shot (stack-dusk / halls-hero). Dest stills eager + decode.
   Unit or Specs current — one at a time (shell vs spec-rail). Queue scan like markets.
   Idle hotspot ring Closed-only; click pulse one-shot. No fan / trio.
   cubic-bezier(.19,1,.22,1), 500–800ms. Off under reduced-motion and <720px.
   Vanilla CSS. No Lenis / GSAP / WebGL / Ken Burns / orange.
   ========================================================================== */

.js .scale .viz-frame__shot picture,
.js .heat-pick .viz-frame__shot picture,
.js .hall-pair .viz-frame__shot picture {
  clip-path: none;
}
.js .scale .viz-frame__shot picture {
  transition: opacity 0.68s cubic-bezier(.19, 1, .22, 1);
}

/* Closed still only for the idle ring. Click pulse owns the moment. */
.hall-pair.is-exploded .flex-hotspot::after,
.hall-pair[data-shell="exploded"] .flex-hotspot::after,
.flex-hotspot.is-pulse::after {
  animation: none;
  opacity: 0;
  display: none;
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .js .scale .viz-frame__shot picture,
  .js .heat-pick .viz-frame__shot picture,
  .js .hall-pair .viz-frame__shot picture {
    transition: none;
  }
  .hall-pair.is-exploded .flex-hotspot::after,
  .flex-hotspot.is-pulse::after,
  .flex-hotspot::after {
    animation: none;
    display: none;
  }
}


/* ==========================================================================
   2026-08-31 pass 10 — host switcher, no public PDFs, FaaS paraphrase
   7-stop host / offtake / generation (no greenhouse featured).
   Heat chips wrap. Pressed timber, still crossfade 680ms.
   Reduced-motion and <720px: static (transition none already).
   Vanilla CSS. No Lenis / GSAP / WebGL / Ken Burns / orange.
   ========================================================================== */

.heat-pick__stops {
  gap: 0.35rem;
}
.heat-pick__stops button {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.62rem;
}
.heat-pick--paper .heat-pick__stops button {
  font-size: 0.68rem;
}

@media (min-width: 1100px) {
  .vertical-groups {
    width: min(46rem, calc(100% - 34rem));
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .js .heat-pick .viz-frame__shot picture {
    transition: none;
  }
}


/* ==========================================================================
   2026-08-31 compute pad catalogue (Kelvin four parts on one pad)
   01–04 on compute.html: one panel + still. Pressed timber, 680ms crossfade,
   arrows via bindPressedGroup. Kicker scaleX + stop stagger.
   Pointer-tilt half Approach, off under reduced-motion and <720px.
   Vanilla CSS. No Lenis / GSAP / WebGL / Ken Burns / orange.
   ========================================================================== */

.parts-pick { margin: 0 0 1.25rem; }
.parts-pick .heat-pick__kicker {
  position: relative;
  display: inline-block;
  padding-bottom: 0.32rem;
}
.parts-pick .heat-pick__kicker::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.65rem;
  height: 1px;
  background: var(--c-timber-500);
  transform: scaleX(1);
  transform-origin: left center;
}
.js .parts-pick .heat-pick__kicker::after {
  transform: scaleX(0);
  transition: transform 0.7s var(--ease);
}
.js .parts-pick.is-visible .heat-pick__kicker::after { transform: scaleX(1); }

.js .parts-pick .heat-pick__stops button {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-stagger) var(--ease),
    transform var(--dur-stagger) var(--ease),
    background-color 0.22s var(--ease),
    border-color 0.22s var(--ease),
    color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}
.js .parts-pick.is-visible .heat-pick__stops button {
  opacity: 1;
  transform: none;
}
.js .parts-pick.is-visible .heat-pick__stops button:nth-child(1) { transition-delay: 0.05s; }
.js .parts-pick.is-visible .heat-pick__stops button:nth-child(2) { transition-delay: 0.12s; }
.js .parts-pick.is-visible .heat-pick__stops button:nth-child(3) { transition-delay: 0.2s; }
.js .parts-pick.is-visible .heat-pick__stops button:nth-child(4) { transition-delay: 0.28s; }

.parts-pick .viz-frame[data-tilt] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.19, 1, .22, 1);
}
.parts-pick .viz-frame[data-tilt].is-tilting { transition: transform 0.1s linear; }

.js .parts-pick .viz-frame__shot picture {
  transition: opacity 0.68s cubic-bezier(.19, 1, .22, 1);
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .js .parts-pick .heat-pick__kicker::after,
  .js .parts-pick.is-visible .heat-pick__kicker::after {
    transform: scaleX(1);
    transition: none;
  }
  .js .parts-pick .heat-pick__stops button,
  .js .parts-pick.is-visible .heat-pick__stops button {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
  .parts-pick .viz-frame[data-tilt],
  .parts-pick .viz-frame[data-tilt].is-tilting {
    transform: none;
    transition: none;
  }
  .js .parts-pick .viz-frame__shot picture {
    transition: none;
  }
}

@media print {
  .parts-pick .heat-pick__kicker { color: #000; }
  .parts-pick .heat-pick__stops { display: none !important; }
}

/* ==========================================================================
   2026-08-31 leftover craft — hall spacing, one chapter current
   Glance / parts / rail slightly tighter. No IA restack. No selector rename.
   Vanilla CSS. No Lenis / GSAP / WebGL / Ken Burns / orange.
   ========================================================================== */

.section--hall .glance {
  margin-bottom: clamp(1.15rem, 3vw, 1.75rem);
}
.section--hall .parts {
  margin-bottom: clamp(1.15rem, 2.8vw, 1.85rem);
  padding-top: 0.85rem;
}
.section--hall .pay-strip {
  margin-top: 0.35rem;
}


/* ==========================================================================
   2026-08-31 hall — no third spec reprint; nav pill at 900–1180
   Spec-rail is the Specs chapter, not a second column beside the still.
   Hamburger from 1199 so 8 labels do not collide. No items dropped.
   Vanilla CSS. No Lenis / GSAP / WebGL / Ken Burns / orange.
   ========================================================================== */

/* Kill the 900px two-col: still + AT A GLANCE side-by-side reprint.
   Still was half-width because (1) leftover 1.2fr / 0.8fr on .hall-unit
   and (2) max-height 380px + 16/9, sized for the old first cell, shrinks width. */
.hall-unit {
  display: block;
  width: 100%;
  max-width: none;
  grid-template-columns: none;
}
.hall-unit .hall-pair,
.hall-unit .hall-pair__shot,
.hall-unit .viz-frame {
  width: 100%;
  max-width: none;
}
@media (min-width: 900px) {
  .hall-unit {
    display: block;
    grid-template-columns: none;
    gap: 0;
  }
  .spec-rail {
    position: static;
    top: auto;
    width: 100%;
    max-width: none;
  }
}
.hall-unit .spec-rail {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.hall-unit .hall-pair { margin-bottom: 0; }

/* Specs chapter as a strip, not a leftover side column of the same four numbers. */
@media (min-width: 640px) {
  .spec-rail .spec-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }
}
@media (min-width: 960px) {
  .spec-rail .spec-strip {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.75rem;
  }
}

/* Nav: 8 items collide ~900–1180. Hamburger earlier (was 1099). */
@media (max-width: 1199px) {
  .nav-toggle { display: inline-flex; }
  .site-header__cta { display: none; }
  .site-nav {
    position: absolute; left: 0.75rem; right: 0.75rem; top: calc(100% + 0.55rem); z-index: 51;
    display: none; flex-direction: column; align-items: stretch;
    background: rgba(13, 31, 23, 0.96); color: var(--c-on-dark);
    border-radius: 18px; padding: 0.75rem 1.15rem 1.15rem;
    border: 1px solid rgba(243, 239, 230, 0.1);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; gap: 0; flex-wrap: nowrap; }
  .site-nav__list a {
    display: block; padding: 0.75rem 0; font-size: 1.05rem;
    color: var(--c-on-dark-2); border-bottom: 1px solid rgba(243, 239, 230, 0.08);
    letter-spacing: 0; white-space: normal;
  }
  .site-nav__list a[aria-current="true"],
  .site-nav__list a[aria-current="page"] {
    color: var(--c-timber-300);
    border-bottom-color: rgba(243, 239, 230, 0.08);
  }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav-overlay { display: none !important; }
  html:not(.js) .site-nav { position: static; display: flex; background: transparent; color: inherit; padding: 0; border: 0; }
  html:not(.js) .site-nav__list { flex-direction: row; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
  html:not(.js) .site-nav__list a { border: 0; padding: 0.35rem 0; font-size: 0.9rem; color: var(--c-ink-2); }
  html:not(.js) .nav-pill { flex-wrap: wrap; border-radius: 18px; }
  html:not(.js) .site-header { position: static; pointer-events: auto; }
  html:not(.js) .site-header__cta { display: inline-flex; }
}
@media (min-width: 1200px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static; display: flex; flex-direction: row; align-items: center;
    background: transparent; padding: 0; border: 0; color: inherit;
  }
}


/* ==========================================================================
   2026-08-31 pass 19 — scroll-driven craft
   animation-timeline view()/scroll() with @supports + .has-sda.
   Pressed 0.18s, timber focus, idle tick/card, chapter bar on tall screens,
   hide-on-scroll header on pages without a chapter bar.
   Hall still stays width 100% / max-height none / 16/9. Spec-rail below.
   Reduced-motion and <720px: fully static. No Lenis / GSAP / WebGL /
   Ken Burns / orange / Approach-lerp replacement.
   ========================================================================== */

:root { --dur-press: 0.18s; }

/* Hall still: keep the full content-column width. Do not pinch. */
.hall-unit,
.hall-unit .hall-pair,
.hall-unit .hall-pair__shot,
.hall-unit .viz-frame,
.hall-unit .viz-frame__shot {
  width: 100%;
  max-width: none;
  max-height: none;
}
.hall-unit .viz-frame__shot { aspect-ratio: 16 / 9; }

/* Switcher clusters: timber focus, not power-blue. */
.hall-chapters,
.heat-pick,
.scale,
.spec-chips,
.grade,
.tier-pick,
.shell-pick,
.mode-pick,
.vertical-index,
.side-scan,
.parts,
.parts-pick {
  --focus: var(--c-timber-500);
}

/* :active pressed — 0.18s, designed not sprinkled. */
.flex-chip:active,
.heat-pick__stops button:active,
.scale__stops button:active,
.shell-pick button:active,
.mode-pick__stops button:active,
.tier-pick__stops button:active,
.grade button:active,
.vertical-index button:active,
.hall-chapters a:active,
.parts__btn:active,
.parts-pick .heat-pick__stops button:active,
.side-scan button[data-market]:active,
.side-scan button[data-queue]:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: var(--dur-press);
}
.flex-chip:focus-visible,
.heat-pick__stops button:focus-visible,
.scale__stops button:focus-visible,
.shell-pick button:focus-visible,
.mode-pick__stops button:focus-visible,
.tier-pick__stops button:focus-visible,
.grade button:focus-visible,
.hall-chapters a:focus-visible,
.parts__btn:focus-visible,
.vertical-index button:focus-visible,
.parts-pick .heat-pick__stops button:focus-visible {
  outline: 2px solid var(--c-timber-500);
  outline-offset: 3px;
}

/* Sites-why kickers join the timber underline family (IO draw; view() when supported). */
.sites-why__kicker {
  position: relative;
  display: inline-block;
  padding-bottom: 0.32rem;
}
.sites-why__kicker::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.65rem;
  height: 1px;
  background: var(--c-timber-500);
  transform: scaleX(1);
  transform-origin: left center;
}
.js .sites-why__kicker::after {
  transform: scaleX(0);
  transition: transform 0.7s var(--ease);
}
.js .sites-why.is-visible .sites-why__kicker::after { transform: scaleX(1); }
.js .sites-why.is-visible li:nth-child(1) .sites-why__kicker::after { transition-delay: 0.12s; }
.js .sites-why.is-visible li:nth-child(2) .sites-why__kicker::after { transition-delay: 0.2s; }
.js .sites-why.is-visible li:nth-child(3) .sites-why__kicker::after { transition-delay: 0.28s; }

/* Chapter bar: sticky on tall, wide viewports only. Short viewports stay in flow
   so the bar does not sandwich the pill. */
@media (min-width: 900px) and (min-height: 821px) {
  .hall-chapters,
  .section--dark > .hall-chapters {
    position: sticky;
    top: 4.75rem;
    z-index: 20;
  }
}
@media (max-height: 820px), (max-width: 719px) {
  .hall-chapters,
  .section--dark > .hall-chapters {
    position: static;
    top: auto;
  }
}

/* Hide-on-scroll header (side pages). Off under reduced-motion / <720 / chapter bar. */
.site-header {
  transition: transform 0.22s var(--ease);
}
.site-header.is-away { transform: translateY(-120%); }
body.nav-open .site-header,
body.nav-open .site-header.is-away { transform: none; }

/* Idle breathe on the current grade tick and market/queue card. Not Ken Burns. */
@keyframes kc-tick-idle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 122, 68, 0.32); }
  50% { box-shadow: 0 0 0 6px rgba(176, 122, 68, 0); }
}
@keyframes kc-card-idle {
  0%, 100% { box-shadow: inset 3px 0 0 var(--c-timber-500); }
  50% { box-shadow: inset 3px 0 0 var(--c-timber-400); }
}

@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 720px) {
    .grade li:has(button[aria-pressed="true"])::before {
      animation: kc-tick-idle 3.8s ease-in-out infinite;
    }
    .side-scan li:has(button[aria-current="true"]) {
      animation: kc-card-idle 3.8s ease-in-out infinite;
    }

    /* Scroll-driven: feature-detect. IO remains the no-support path. */
    @supports (animation-timeline: view()) {
      html.has-sda .js .section__head.reveal::after,
      html.has-sda .js .purpose-scan__kicker::after,
      html.has-sda .js .side-scan__kicker::after,
      html.has-sda .js .parts-pick .heat-pick__kicker::after,
      html.has-sda .js .sites-why__kicker::after,
      html.has-sda .js .catalogue::before,
      html.has-sda .js .glance::before,
      html.has-sda .js .grade::before,
      html.has-sda .js .side-scan::before {
        animation: kc-draw-x 1s linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 42%;
        transition: none;
      }
      html.has-sda .js .section__head--center.reveal::after {
        animation-name: kc-draw-x;
        transform-origin: center;
      }

      /* Tiny still settle. Hall / heat / scale / pad only. Never the map. */
      html.has-sda .js .hall-unit .viz-frame,
      html.has-sda .js .heat-pick .viz-frame,
      html.has-sda .js .scale .viz-frame {
        animation: kc-still-settle 1s linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
        transform-origin: center center;
      }
    }

    @supports (animation-timeline: scroll()) {
      html.has-sda::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        z-index: 80;
        pointer-events: none;
        background: var(--c-timber-500);
        transform-origin: 0 50%;
        animation: kc-page-progress 1s linear;
        animation-timeline: scroll();
      }
      html.has-sda .page-rail::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0.2rem;
        bottom: 0.2rem;
        width: 1px;
        margin-left: -0.5px;
        background: var(--c-timber-400);
        transform-origin: top center;
        animation: kc-rail-fill 1s linear;
        animation-timeline: scroll();
        pointer-events: none;
        z-index: 0;
      }
      html.has-sda .page-rail::before { opacity: 0; }
    }
  }
}

@keyframes kc-draw-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes kc-still-settle {
  from { opacity: 0.88; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes kc-page-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes kc-rail-fill {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .site-header,
  .site-header.is-away {
    transform: none !important;
    transition: none;
  }
  .flex-chip:active,
  .heat-pick__stops button:active,
  .scale__stops button:active,
  .shell-pick button:active,
  .mode-pick__stops button:active,
  .tier-pick__stops button:active,
  .grade button:active,
  .vertical-index button:active,
  .hall-chapters a:active,
  .parts__btn:active,
  .parts-pick .heat-pick__stops button:active,
  .side-scan button[data-market]:active,
  .side-scan button[data-queue]:active {
    transform: none;
  }
  .grade li:has(button[aria-pressed="true"])::before,
  .side-scan li:has(button[aria-current="true"]) {
    animation: none !important;
  }
  .js .sites-why__kicker::after,
  .js .sites-why.is-visible .sites-why__kicker::after {
    transform: scaleX(1);
    transition: none;
  }
  html.has-sda::before { content: none !important; display: none !important; }
  html.has-sda .page-rail::after { content: none !important; animation: none !important; }
  html.has-sda .page-rail::before { opacity: 1; }
  html.has-sda .js .section__head.reveal::after,
  html.has-sda .js .purpose-scan__kicker::after,
  html.has-sda .js .side-scan__kicker::after,
  html.has-sda .js .parts-pick .heat-pick__kicker::after,
  html.has-sda .js .sites-why__kicker::after,
  html.has-sda .js .catalogue::before,
  html.has-sda .js .glance::before,
  html.has-sda .js .grade::before,
  html.has-sda .js .side-scan::before,
  html.has-sda .js .hall-unit .viz-frame,
  html.has-sda .js .heat-pick .viz-frame,
  html.has-sda .js .scale .viz-frame {
    animation: none !important;
    transform: none;
  }
  html.has-sda .js .section__head.reveal.is-visible::after,
  html.has-sda .js .purpose-scan.is-visible .purpose-scan__kicker::after,
  html.has-sda .js .side-scan.is-visible .side-scan__kicker::after,
  html.has-sda .js .parts-pick.is-visible .heat-pick__kicker::after,
  html.has-sda .js .sites-why.is-visible .sites-why__kicker::after,
  html.has-sda .js .catalogue.is-visible::before,
  html.has-sda .js .glance.is-visible::before,
  html.has-sda .js .grade.is-visible::before,
  html.has-sda .js .side-scan.is-visible::before {
    transform: scaleX(1);
  }
}

@media print {
  html.has-sda::before,
  html.has-sda .page-rail::after { display: none !important; }
  .site-header.is-away { transform: none !important; }
  .js .sites-why__kicker::after { transform: none; }
}


/* ==========================================================================
   2026-08-31 chapter motion (vanilla)
   Numbered 01–n + Prev/Next + 680ms still/copy crossfade on For-you, heat
   dest, compute #parts. Approach lerp 0.22 kept; claims light with the still.
   Idle breathe on the *current* control only. No Ken Burns on photos.
   Stronger clip on section titles only — H1 stays two-line, not per-word.
   Pass 19 (view()/scroll(), :active 0.18s, chapter bar ≥900×821, hall still
   full-width, spec-rail below) is not undone.
   Reduced-motion and <720px: fully static. No orange. No extra SKUs.
   ========================================================================== */

:root { --dur-cross: 0.68s; }

/* Still overlay: display:none killed the 680ms fade. Keep stacked pictures. */
.js .heat-pick .viz-frame__shot picture,
.js .scale .viz-frame__shot picture,
.js .hall-pair .viz-frame__shot picture,
.js .parts-pick .viz-frame__shot picture {
  display: block;
  transition: opacity var(--dur-cross) var(--ease), visibility var(--dur-cross) var(--ease);
}
.js .heat-pick .viz-frame__shot picture:not(.is-on),
.js .scale .viz-frame__shot picture:not(.is-on),
.js .hall-pair .viz-frame__shot picture:not(.is-on),
.js .parts-pick .viz-frame__shot picture:not(.is-on),
.js .heat-pick .viz-frame__shot picture[hidden],
.js .scale .viz-frame__shot picture[hidden],
.js .hall-pair .viz-frame__shot picture[hidden] {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}
.js .heat-pick .viz-frame__shot picture.is-on,
.js .scale .viz-frame__shot picture.is-on,
.js .hall-pair .viz-frame__shot picture.is-on,
.js .parts-pick .viz-frame__shot picture.is-on {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

/* Copy / kicker / count swap with the still (half of 680ms out, then in). */
.heat-pick__copy,
.heat-pick__kicker,
.scale__note,
.chapter-step__count,
.viz-cap__line {
  transition: opacity 0.34s var(--ease);
}
.heat-pick__copy.is-swap,
.heat-pick__kicker.is-swap,
.scale__note.is-swap,
.chapter-step__count.is-swap,
.viz-cap__line.is-swap {
  opacity: 0;
}

/* Chapter chrome: Prev · 01 / n · Next. Timber, not a product carousel. */
.chapter-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
}
.chapter-step .sq-btn,
.vertical-controls .sq-btn {
  min-width: 3.4rem;
  min-height: 2.6rem;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--c-timber-500);
  color: var(--c-forest-950);
  border: 0;
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 var(--c-timber-700);
}
.chapter-step .sq-btn:hover,
.vertical-controls .sq-btn:hover {
  background: var(--c-timber-400);
}
.chapter-step .sq-btn:focus-visible,
.vertical-controls .sq-btn:focus-visible {
  outline: 2px solid var(--c-timber-500);
  outline-offset: 3px;
}
.chapter-step .sq-btn:active,
.vertical-controls .sq-btn:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: var(--dur-press);
}
.chapter-step__count {
  margin: 0;
  min-width: 4.6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--c-on-dark-2);
}
.heat-pick--paper .chapter-step__count { color: var(--c-ink-2); }
.section--dark .chapter-step { margin-bottom: 0.95rem; }

.vertical-controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.vertical-controls .chapter-step__count { color: var(--c-on-dark); }

html:not(.js) .chapter-step { display: none; }

/* For-you chips: 01–n beside the name. Pressed timber already. */
.vertical-groups .vertical-index button {
  gap: 0.42rem;
}
.vertical-groups .vertical-index__n {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--c-on-dark-3);
  font-variant-numeric: tabular-nums;
}
.vertical-groups .vertical-index button[aria-pressed="true"] .vertical-index__n {
  color: var(--c-forest-950);
}

/* For-you still/copy: same 680ms as heat. */
.js .vertical {
  transition: opacity var(--dur-cross) var(--ease), visibility var(--dur-cross) var(--ease);
}
@keyframes panel-enter {
  from { opacity: 0.2; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.vertical.is-active .vertical__panel.is-enter {
  animation: panel-enter var(--dur-cross) var(--ease);
}

/* Approach: keep --p lerp on the pin. Snap stills to the lit claim. */
.chapter .orbit {
  transition: opacity var(--dur-cross) var(--ease), transform var(--dur-cross) var(--ease);
}
.orbit.is-active .orbit__title { color: var(--c-forest-950); }
.orbit.is-active .orbit__body p { color: var(--c-ink); }
.chapter .hero__still[data-layer="1"],
.chapter .hero__still[data-layer="2"] {
  opacity: 0;
  transition: opacity var(--dur-cross) var(--ease);
}
.chapter[data-claim="1"] .hero__still[data-layer="1"] { opacity: 1; }
.chapter[data-claim="2"] .hero__still[data-layer="1"],
.chapter[data-claim="2"] .hero__still[data-layer="2"] { opacity: 1; }
.chapter[data-claim="all"] .hero__still[data-layer="1"],
.chapter[data-claim="all"] .hero__still[data-layer="2"] { opacity: 1; }

/* Section titles only — slightly deeper clip. H1 / side-hero untouched. */
.js .section__title .clip-inner {
  transform: translateY(126%);
  transition: transform 0.95s var(--ease);
}
.js .is-visible .section__title .clip-inner,
.js .chapter.is-ready .chapter__title .clip-inner {
  transform: none;
}

.chapter-step,
.vertical-controls {
  --focus: var(--c-timber-500);
}

/* Idle breathe: current control only. Not photos. */
@keyframes kc-chip-idle {
  0%, 100% { box-shadow: inset 0 -2px 0 var(--c-timber-700), 0 0 0 0 rgba(176, 122, 68, 0.28); }
  50% { box-shadow: inset 0 -2px 0 var(--c-timber-400), 0 0 0 5px rgba(176, 122, 68, 0.12); }
}

@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 720px) {
    .vertical-groups .vertical-index button[aria-pressed="true"],
    .heat-pick__stops button[aria-pressed="true"],
    .scale__stops button[aria-pressed="true"],
    .parts-pick .heat-pick__stops button[aria-pressed="true"] {
      animation: kc-chip-idle 3.8s ease-in-out infinite;
    }
    .orbit.is-active .orbit__n {
      animation: kc-tick-idle 3.8s ease-in-out infinite;
    }
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .js .heat-pick .viz-frame__shot picture,
  .js .scale .viz-frame__shot picture,
  .js .hall-pair .viz-frame__shot picture,
  .js .parts-pick .viz-frame__shot picture,
  .js .vertical,
  .heat-pick__copy,
  .heat-pick__kicker,
  .scale__note,
  .chapter-step__count,
  .viz-cap__line,
  .chapter .orbit,
  .chapter .hero__still[data-layer="1"],
  .chapter .hero__still[data-layer="2"],
  .js .section__title .clip-inner {
    transition: none !important;
  }
  .js .heat-pick .viz-frame__shot picture:not(.is-on),
  .js .scale .viz-frame__shot picture:not(.is-on),
  .js .hall-pair .viz-frame__shot picture:not(.is-on),
  .js .parts-pick .viz-frame__shot picture:not(.is-on) {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .vertical.is-active .vertical__panel.is-enter { animation: none !important; }
  .js .section__title .clip-inner,
  .js .is-visible .section__title .clip-inner {
    transform: none !important;
  }
  .chapter .hero__still[data-layer="1"],
  .chapter .hero__still[data-layer="2"],
  .chapter[data-claim="1"] .hero__still[data-layer="1"],
  .chapter[data-claim="2"] .hero__still[data-layer="1"],
  .chapter[data-claim="2"] .hero__still[data-layer="2"] {
    opacity: 1;
  }
  .chapter-step .sq-btn:active,
  .vertical-controls .sq-btn:active {
    transform: none;
  }
  .vertical-groups .vertical-index button[aria-pressed="true"],
  .heat-pick__stops button[aria-pressed="true"],
  .scale__stops button[aria-pressed="true"],
  .parts-pick .heat-pick__stops button[aria-pressed="true"],
  .orbit.is-active .orbit__n {
    animation: none !important;
  }
  .heat-pick__copy.is-swap,
  .heat-pick__kicker.is-swap,
  .scale__note.is-swap,
  .chapter-step__count.is-swap,
  .viz-cap__line.is-swap {
    opacity: 1;
  }
}

@media print {
  .chapter-step, .vertical-controls { display: none !important; }
  .js .heat-pick .viz-frame__shot picture:not(.is-on),
  .js .scale .viz-frame__shot picture:not(.is-on) { display: none; }
}


/* ==========================================================================
   2026-08-31 pin ticks, layer offset, bloom break, catalogue as ToC
   Vanilla CSS. Forest / timber. No orange. No canvas rotate sequence.
   Lerp 0.22 on Approach --p kept. Stills still follow data-claim.
   Off under prefers-reduced-motion and <720px (no pin, tick motion,
   bloom drift, explode offset).
   ========================================================================== */

/* 1. Tick-dial around the Approach pin. Arc of 1px marks; active span
   follows --p / claim 01 Power in, 02 Compute, 03 Heat out. Not the
   diamond page-rail. */
.tick-dial {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.tick-dial__marks span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 11px;
  margin: -5.5px 0 0 -0.5px;
  background: var(--c-forest-700);
  opacity: 0.28;
  transform: rotate(calc(var(--i) * 1deg)) translateY(calc(min(40vw, 540px) * -0.56));
  transform-origin: 50% 50%;
}
@media (max-width: 880px) {
  .tick-dial__marks span {
    transform: rotate(calc(var(--i) * 1deg)) translateY(calc(min(48vw, 420px) * -0.56));
  }
}
.chapter[data-claim="0"] .tick-dial__marks span:nth-child(-n+12),
.chapter[data-claim="1"] .tick-dial__marks span:nth-child(n+13):nth-child(-n+24),
.chapter[data-claim="2"] .tick-dial__marks span:nth-child(n+25),
.chapter[data-claim="all"] .tick-dial__marks span:nth-child(-n+12) {
  background: var(--c-timber-500);
  opacity: 0.95;
}
/* Tiny timber leader toward the lit claim. */
.tick-dial__lead {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 42%;
  margin-left: -0.5px;
  background: var(--c-timber-500);
  transform-origin: 50% 0;
  opacity: 0;
  transition: transform var(--dur-cross) var(--ease), opacity 0.34s var(--ease);
}
.chapter[data-claim="0"] .tick-dial__lead {
  opacity: 0.72;
  transform: rotate(-78deg);
}
.chapter[data-claim="1"] .tick-dial__lead {
  opacity: 0.72;
  transform: rotate(78deg);
}
.chapter[data-claim="2"] .tick-dial__lead {
  opacity: 0.72;
  transform: rotate(-108deg);
}

/* 2. Exploded layers: stills still crossfade on data-claim. Subtle Y-offset
   keyed to --p so the current still separates; not a stacked product shot,
   not Ken Burns, not WebGL. Hall Closed/Exploded stays a click toggle. */
.chapter .hero__still[data-layer="0"] {
  transition: opacity var(--dur-cross) var(--ease), transform 0.45s var(--ease);
}
.chapter .hero__still[data-layer="1"],
.chapter .hero__still[data-layer="2"] {
  transition: opacity var(--dur-cross) var(--ease), transform 0.45s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 720px) {
    .chapter .hero__still[data-layer="0"] {
      transform: translateY(calc(var(--p) * 10px));
    }
    .chapter .hero__still[data-layer="1"] {
      transform: translateY(calc(var(--p) * -16px));
    }
    .chapter .hero__still[data-layer="2"] {
      transform: translateY(calc(var(--p) * -26px));
    }
  }
}

/* 1px timber leaders from the pin to 01 / 02 / 03. */
.chapter .orbit__n { position: relative; }
.chapter .orbit.is-active .orbit__n::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2.4rem;
  height: 1px;
  background: var(--c-timber-500);
  opacity: 0.7;
}
.chapter .orbit--1.is-active .orbit__n::after,
.chapter .orbit--3.is-active .orbit__n::after {
  right: calc(100% + 0.5rem);
}
.chapter .orbit--2.is-active .orbit__n::after {
  left: calc(100% + 0.5rem);
}

/* 3. CSS blur-bloom chapter break — #system only (Approach → Flexbox).
   Three forest/timber radials, blur 80px, slow drift. Existing lead sits on top.
   Zero JS. */
.section--system {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section--system::before {
  content: "";
  position: absolute;
  inset: -28% -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 38% at 18% 36%, rgba(36, 80, 64, 0.34) 0%, transparent 68%),
    radial-gradient(ellipse 36% 42% at 82% 52%, rgba(176, 122, 68, 0.14) 0%, transparent 66%),
    radial-gradient(ellipse 32% 30% at 48% 86%, rgba(18, 41, 31, 0.18) 0%, transparent 70%);
  filter: blur(80px);
  transform: translate3d(0, 0, 0);
  animation: kc-bloom-drift 34s ease-in-out infinite alternate;
}
.section--system > .container { position: relative; z-index: 1; }
@keyframes kc-bloom-drift {
  from { transform: translate3d(-2.8%, 1.8%, 0) scale(1.02); }
  to { transform: translate3d(3.6%, -2.4%, 0) scale(1.07); }
}

/* 4. Catalogue as ToC. Numbered rows/chips stay visible; gutter numbers;
   current timber. No greenhouse. No extra section. */
.vertical-groups .vertical-index button {
  justify-content: flex-start;
  gap: 0.5rem;
}
.vertical-groups .vertical-index__n {
  flex: 0 0 1.65rem;
  width: 1.65rem;
  color: var(--c-on-dark-3);
  opacity: 1;
  font-variant-numeric: tabular-nums;
}
.vertical-groups .vertical-index__name {
  color: var(--c-on-dark-2);
}
.vertical-groups .vertical-index button[aria-pressed="true"] .vertical-index__n,
.vertical-groups .vertical-index button[aria-pressed="true"] .vertical-index__name {
  color: var(--c-forest-950);
  opacity: 1;
}

.heat-pick__stops { counter-reset: toc 0; }
.heat-pick:not(.parts-pick) .heat-pick__stops button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.42rem;
  font-variant-numeric: tabular-nums;
}
.heat-pick:not(.parts-pick) .heat-pick__stops button::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--c-on-dark-3);
  font-variant-numeric: tabular-nums;
  min-width: 1.45rem;
}
.heat-pick:not(.parts-pick) .heat-pick__stops button[aria-pressed="true"]::before {
  color: var(--c-forest-950);
}
.heat-pick--paper:not(.parts-pick) .heat-pick__stops button::before {
  color: var(--c-ink-3);
}
.heat-pick--paper:not(.parts-pick) .heat-pick__stops button[aria-pressed="true"]::before {
  color: var(--c-paper);
}

.parts-pick .heat-pick__stops button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .tick-dial { display: none; }
  .chapter .hero__still[data-layer="0"],
  .chapter .hero__still[data-layer="1"],
  .chapter .hero__still[data-layer="2"],
  .chapter[data-claim="1"] .hero__still[data-layer="1"],
  .chapter[data-claim="2"] .hero__still[data-layer="1"],
  .chapter[data-claim="2"] .hero__still[data-layer="2"] {
    transform: none !important;
  }
  .chapter .orbit.is-active .orbit__n::after { content: none; }
  .section--system::before { animation: none; }
  .tick-dial__lead { transition: none; }
}

@media print {
  .tick-dial { display: none !important; }
  .section--system::before { display: none; }
  .chapter .orbit__n::after { content: none; }
}


/* ==========================================================================
   2026-08-31 layout: For-you chrome row + Approach pin/copy gap
   Vanilla CSS. HTML: Prev/Next is a footer of .vertical-groups (picker).
   Do not undo Pass 19 SDA, chapter Prev/Next, tick-dial, #system bloom,
   Approach lerp 0.22. Hall still stays width 100% / spec-rail below.
   Reduced-motion / <720 Approach orbits stay stacked. No orange.
   ========================================================================== */

/* 1. For-you: chapter chrome in its own row, below both chip groups.
   Was position:absolute; bottom on .verticals, so PREV · 01/n · NEXT
   painted over the Compute chips (01 AI / 03 Cloud) and the stone
   .cases-follow band overlapped the panel edge. */
.vertical-groups .vertical-controls {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0.15rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid rgba(243, 239, 230, 0.14);
  background: transparent;
  box-shadow: none;
}
.vertical-groups .vertical-index li,
.vertical-groups .vertical-index button,
.vertical-groups .vertical-index button[aria-pressed="true"],
.vertical-groups .vertical-index button[aria-pressed="false"] {
  display: inline-flex;
  visibility: visible;
}

@media (min-width: 1100px) {
  /* Picker is a left overlay; stage must be tall enough that the
     in-flow panel + abs picker never spill into .cases-follow. */
  .verticals,
  .vertical.is-active {
    min-height: min(92vh, 36rem);
  }
}

@media (min-width: 721px) and (max-height: 860px) {
  .vertical-groups .vertical-controls {
    bottom: auto;
  }
}

@media (max-width: 720px) {
  .vertical-groups {
    padding: 1rem var(--gutter) 1.25rem;
  }
  .vertical-groups .vertical-controls {
    position: relative;
    bottom: auto;
    left: auto;
  }
}

/* 2. Approach: shrink the pin so the still + tick-dial stay in the
   centre column. Raise orbit copy above the object. Tick radius hugs
   the object (0.52 of stage) instead of 0.56 of 40vw, which ate the
   left of Power in / curtailed / hours. Leaders sit in the gap, not
   through glyphs. */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 720px) {
    .chapter__stage {
      --dial-r: min(26vw, 360px);
      width: var(--dial-r);
      z-index: 2;
    }
    .chapter .hero__still img {
      max-height: min(32vh, 280px);
    }
    .tick-dial {
      z-index: 3;
      overflow: visible;
    }
    .tick-dial__marks span {
      transform: rotate(calc(var(--i) * 1deg)) translateY(calc(var(--dial-r) * -0.52));
    }
    .chapter .orbits {
      z-index: 8;
    }
    .chapter .orbit {
      z-index: 8;
      width: min(22rem, 30vw);
    }
    .chapter .orbit--1,
    .chapter .orbit--3 {
      right: max(var(--gutter), 3.25%);
      padding-left: 1.1rem;
    }
    .chapter .orbit--2 {
      left: max(var(--gutter), 3.25%);
      padding-right: 1.1rem;
    }
    /* Leaders from the pin to 01/02/03 — on the li edge, not through
       the number into the title. */
    .chapter .orbit.is-active .orbit__n::after {
      content: none;
    }
    .chapter .orbit.is-active::after {
      content: "";
      position: absolute;
      top: 0.75rem;
      width: 2.15rem;
      height: 1px;
      background: var(--c-timber-500);
      opacity: 0.7;
      pointer-events: none;
    }
    .chapter .orbit--1.is-active::after,
    .chapter .orbit--3.is-active::after {
      right: calc(100% + 0.35rem);
    }
    .chapter .orbit--2.is-active::after {
      left: calc(100% + 0.35rem);
    }
  }
  @media (min-width: 720px) and (max-width: 880px) {
    .chapter__stage {
      --dial-r: min(30vw, 300px);
      width: var(--dial-r);
    }
    .tick-dial__marks span {
      transform: rotate(calc(var(--i) * 1deg)) translateY(calc(var(--dial-r) * -0.52));
    }
    .chapter .orbit {
      width: min(16rem, 38vw);
    }
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .chapter .orbit.is-active::after {
    content: none;
  }
}

@media print {
  .chapter .orbit.is-active::after { content: none; }
}


/* ==========================================================================
   2026-08-31 pass 22 — craft / a11y polish
   Tokens live on :root (timber --focus, --dur-press 0.18s, --dur-cross 0.68s).
   For-you chrome stays in-flow. Approach dial stays small. Hall still 100%.
   Reduced-motion / <720px static. No Lenis / GSAP / WebGL / Ken Burns / orange.
   ========================================================================== */

.section--system .section__title,
.section--system .section__lead {
  color: var(--c-forest-950);
}
.section--system .section__lead {
  max-width: 38rem;
}

/* Heat ToC gutter: keep chips wrapping; don't collide with Prev/Next. */
.heat-pick:not(.parts-pick) .heat-pick__stops {
  margin-bottom: 0.55rem;
}
.section--dark .heat-pick .chapter-step,
.heat-pick--paper .chapter-step {
  margin-top: 0.15rem;
}

/* Paper heat labels: timber-700 on cream, not timber-500 (contrast). */
.heat-pick--paper .heat-pick__label,
.heat-pick--paper .scale__label,
.page-thermal .grade__label,
.page-compute .heat-pick__label {
  color: var(--c-timber-700);
}

.orbit__title { color: var(--c-forest-950); }
.orbit__body p { color: var(--c-ink-2); }
.orbit.is-active .orbit__title { color: var(--c-forest-950); }

.mode-pick__copy,
[data-shell-cap],
.markets-live,
.queue-live,
.grade-live {
  transition: opacity 0.34s var(--ease);
}
.mode-pick__copy.is-swap,
[data-shell-cap].is-swap,
.markets-live.is-swap,
.queue-live.is-swap,
.grade-live.is-swap {
  opacity: 0;
}
.heat-pick:not(.parts-pick) .heat-pick__stops button::before {
  color: var(--c-on-dark-2);
}
.heat-pick--paper:not(.parts-pick) .heat-pick__stops button::before {
  color: var(--c-ink-2);
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .mode-pick__copy,
  [data-shell-cap] {
    transition: none !important;
  }
}

/* ==========================================================================
   2026-08-31 pass 24 — BESS dark-green still, Mitigation link, craft
   Paper criterion stays ink on cream. Side stills never paint forest box.
   Hall / For-you / Approach / SDA / lerp untouched. No Lenis/GSAP/WebGL/orange.
   ========================================================================== */

/* Side / paper stills: cream shot, no clip-path reveal (lazy + inset left forest). */
.side-still {
  margin: 1.5rem 0 1.5rem;
  max-width: 52rem;
}
.side-still .viz-frame__shot,
.section--side .viz-frame__shot,
.section--paper .viz-frame__shot {
  background: var(--c-stone-200, #e8e4db);
}
.js .side-still .viz-frame__shot picture,
.js .section--side .viz-frame__shot picture,
.js .section--paper .viz-frame__shot picture,
.js .side-still.is-visible .viz-frame__shot picture,
.js .section--side .is-visible .viz-frame__shot picture,
.js .section--paper .is-visible .viz-frame__shot picture {
  clip-path: none;
  transition: none;
}

/* Paper compare: ink on cream — beat dark-table sticky forest-900. */
.flex-compare--paper .compare-table--paper thead th,
.flex-compare--paper .compare-table--paper thead th:first-child,
.flex-compare--paper .compare-table--paper tbody th {
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: 4px 0 8px -6px rgba(18, 41, 31, 0.1);
}
.flex-compare--paper .compare-table--paper thead th {
  color: var(--c-ink-3);
}
.flex-compare--paper .compare-table--paper thead th:nth-child(2) {
  color: var(--c-timber-700);
  background: rgba(176, 122, 68, 0.1);
}
.flex-compare--paper .compare-table--paper tbody td:first-of-type {
  color: var(--c-ink);
  background: rgba(176, 122, 68, 0.06);
  box-shadow: inset 2px 0 0 var(--c-timber-500);
}
@media (hover: hover) and (min-width: 720px) {
  .flex-compare--paper .compare-table--paper tbody tr:hover th,
  .flex-compare--paper .compare-table--paper tbody tr:focus-within th {
    background: rgba(176, 122, 68, 0.12);
    color: var(--c-ink);
  }
}

/* Holds / purpose / trio title links: readable text-link, not shouty. */
.holds-scan h3 a,
.purpose-scan h3 a {
  color: var(--c-forest-800);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 122, 68, 0.4);
  transition: color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease);
}
.holds-scan h3 a:hover,
.holds-scan h3 a:focus-visible,
.purpose-scan h3 a:hover,
.purpose-scan h3 a:focus-visible {
  color: var(--c-forest-700);
  border-bottom-color: var(--c-timber-500);
}

/* Washed dark-section labels: one step up for contrast. */
.spec-strip__hint,
.flex-compare__note,
.section--dark .scale__label,
.section--dark .heat-pick__label {
  color: var(--c-on-dark-2);
}
.shell-pick__label,
.parts__label,
.spec-rail__label,
.flex-compare__label {
  color: var(--c-timber-400);
}

/* Side-page back/CTA rhythm: a little air above the CTA after a still. */
.side-cta { margin-top: 1.75rem; }
.side-back { margin-top: 1.15rem; }

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .holds-scan h3 a,
  .purpose-scan h3 a {
    transition: none;
  }
}


/* ==========================================================================
   2026-08-31 pass 35 — map paint, one-source pins, stats row, craft
   Map always paints (absolute picture, cover, no clip-path hide).
   Pins: highlight from data-active-site only. Idle breathe on current pin.
   Board why collapsed until selected / hover / focus.
   Gap stats: one desktop row, buttons, live gloss.
   Reduced-motion / <720px static. No Lenis / GSAP / WebGL / Ken Burns / orange.
   ========================================================================== */

/* Map must paint: picture fills the 3:2 frame. No Ken Burns. No fill squash. */
.js .sites-map picture,
.js .viz-frame__shot.sites-map picture,
.js .sites-layout .sites-map picture,
.js .is-visible .sites-map picture,
.js .viz-frame.is-in .sites-map picture {
  clip-path: none;
  transition: none;
  transform: none;
}
.sites-layout .viz-frame__shot.sites-map,
.sites-map {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  max-height: none;
  overflow: visible;
  background: var(--c-stone-200);
}
.sites-map::after {
  content: "";
  display: block;
  width: 100%;
  padding-top: 66.666%;
  pointer-events: none;
}
.sites-map picture {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  clip-path: none;
}
.sites-map picture img,
.sites-map img,
.sites-layout .sites-map img,
.sites-layout .viz-frame__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none !important;
  animation: none !important;
}

/* One source of visual highlight: data-active-site (+ hover/focus on the pin).
   aria-pressed is the click-selected site for a11y, not a second paint. */
.sites-map__pin[aria-pressed="true"] .sites-map__ring {
  background: var(--c-paper);
  border-color: var(--c-heat);
  box-shadow: 0 0 0 3px rgba(252, 250, 246, 0.72);
  transform: rotate(45deg);
}
.sites-map__pin[aria-pressed="true"] .sites-map__tag {
  color: var(--c-forest-800);
  border-color: var(--c-stone-300);
  background: rgba(252, 250, 246, 0.92);
}
.sites-map__pin:hover::before,
.sites-map__pin:focus-visible::before,
.sites-map__pin[aria-pressed="true"]::before {
  animation: none;
  opacity: 0;
}
.sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"] .sites-map__ring,
.sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"] .sites-map__ring,
.sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"] .sites-map__ring,
.sites-map__pin:hover .sites-map__ring,
.sites-map__pin:focus-visible .sites-map__ring {
  background: var(--c-timber-500);
  border-color: var(--c-timber-700);
  transform: rotate(45deg) scale(1.18);
  box-shadow: 0 0 0 4px rgba(252, 250, 246, 0.92), 0 0 0 8px rgba(176, 122, 68, 0.38);
}
.sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"] .sites-map__tag,
.sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"] .sites-map__tag,
.sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"] .sites-map__tag,
.sites-map__pin:hover .sites-map__tag,
.sites-map__pin:focus-visible .sites-map__tag {
  color: var(--c-forest-950);
  border-color: var(--c-timber-400);
  background: var(--c-timber-300);
}
.sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"]::before,
.sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"]::before,
.sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"]::before {
  animation: pin-breathe 3.8s ease-out infinite;
  opacity: 0.4;
  border-color: var(--c-timber-500);
}

/* Board why: collapsed until that row is selected, hovered, or focused. */
.site-board__why {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transform: translateY(-4px);
  transition:
    max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    margin 0.22s ease,
    transform 0.22s ease;
}
.site-board__row:hover .site-board__why,
.site-board__row:focus-visible .site-board__why,
.site-board__row[aria-pressed="true"] .site-board__why,
.sites-layout[data-active-site="k1"] .site-board__row[data-site="k1"] .site-board__why,
.sites-layout[data-active-site="k2"] .site-board__row[data-site="k2"] .site-board__why,
.sites-layout[data-active-site="k3"] .site-board__row[data-site="k3"] .site-board__why {
  max-height: 12rem;
  opacity: 1;
  margin-top: 0.2rem;
  transform: none;
}
@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"]::before,
  .sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"]::before,
  .sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"]::before,
  .sites-map__pin::before {
    animation: none !important;
    opacity: 0 !important;
  }
  .site-board__why {
    transition: none;
  }
}
.site-board__row:active {
  transition-duration: var(--dur-press);
}

/* Sticky nav: keep First plots / K1 out from under the pill. */
html {
  scroll-padding-top: calc(0.85rem + 64px + 56px);
}
#sites,
#sites-title {
  scroll-margin-top: calc(0.85rem + 64px + 56px);
}
.section--sites {
  padding-top: calc(var(--section-pad) + 1.15rem);
}

/* Gap stats: one desktop row of buttons + live gloss. Hairline / timber. */
.stats--row {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--c-stone-300);
  border-bottom: 1px solid var(--c-stone-300);
  border-radius: 0;
}
@media (min-width: 560px) {
  .stats--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .stats--row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
.stats--row > li { min-width: 0; display: block; }
.stats--row .stat {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1.15rem 1.05rem 1.2rem;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--c-stone-300);
  border-radius: 0;
  box-shadow: inset 0 -2px 0 transparent;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s var(--ease),
    border-color 0.2s ease;
}
.stats--row > li:last-child .stat { border-right: 0; }
@media (max-width: 959px) {
  .stats--row .stat {
    border-right: 0;
    border-bottom: 1px solid var(--c-stone-300);
  }
  .stats--row > li:last-child .stat { border-bottom: 0; }
}
.section--gap .stats--row .stat__value,
.section--side .stats--row .stat__value {
  display: block;
  font-size: clamp(1.85rem, 1.2rem + 1.6vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-forest-950);
  margin: 0 0 0.5rem;
}
.section--gap .stats--row .stat__label,
.section--side .stats--row .stat__label {
  display: block;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--c-ink-2);
  max-width: 22ch;
}
.stats--row .stat:hover,
.stats--row .stat:focus-visible {
  transform: translateY(-2px);
  background: rgba(176, 122, 68, 0.07);
}
.stats--row .stat[aria-pressed="true"] {
  background: rgba(176, 122, 68, 0.1);
  box-shadow: inset 0 -2px 0 var(--c-timber-500);
}
.stats--row .stat:active {
  transform: translateY(1px);
  transition-duration: var(--dur-press);
}
.stats-gloss {
  margin: 0.85rem 0 0;
  min-height: 1.55em;
  max-width: 46rem;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  line-height: 1.45;
  transition: opacity 0.34s var(--ease);
}
.stats-gloss.is-swap { opacity: 0; }
.section--gap .hero-stats .stats--row { margin: 0; }
.section--side .stats--row { margin: 0; }

/* Stagger on the list items (buttons sit inside li). 5th delay. */
.js .hero-stats .stats--row .stat {
  opacity: 1;
  transform: none;
}
.js .hero-stats .stats--row > li,
.js .stats--row.reveal > li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.js .hero-stats.is-visible .stats--row > li,
.js .stats--row.is-visible > li {
  opacity: 1;
  transform: none;
}
.js .hero-stats.is-visible .stats--row > li:nth-child(1),
.js .stats--row.is-visible > li:nth-child(1) { transition-delay: 0.04s; }
.js .hero-stats.is-visible .stats--row > li:nth-child(2),
.js .stats--row.is-visible > li:nth-child(2) { transition-delay: 0.1s; }
.js .hero-stats.is-visible .stats--row > li:nth-child(3),
.js .stats--row.is-visible > li:nth-child(3) { transition-delay: 0.16s; }
.js .hero-stats.is-visible .stats--row > li:nth-child(4),
.js .stats--row.is-visible > li:nth-child(4) { transition-delay: 0.22s; }
.js .hero-stats.is-visible .stats--row > li:nth-child(5),
.js .stats--row.is-visible > li:nth-child(5) { transition-delay: 0.28s; }

/* Idle breathe: current Flexbox chip / mode / shell, matching For-you. */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 720px) {
    .section--dark .spec-chips .flex-chip[aria-pressed="true"],
    .mode-pick__stops button[aria-pressed="true"],
    .shell-pick__stops button[aria-pressed="true"] {
      animation: kc-chip-idle 3.8s ease-in-out infinite;
    }
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .sites-map__pin::before,
  .sites-map__pin:hover::before,
  .sites-map__pin:focus-visible::before,
  .sites-map__pin[aria-pressed="true"]::before,
  .sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"]::before,
  .sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"]::before,
  .sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"]::before,
  .sites-map__pin.is-pulse .sites-map__ring,
  .section--dark .spec-chips .flex-chip[aria-pressed="true"],
  .mode-pick__stops button[aria-pressed="true"],
  .shell-pick__stops button[aria-pressed="true"] {
    animation: none !important;
  }
  .sites-map__pin::before { opacity: 0 !important; }
  .site-board__why,
  .site-board__row:hover .site-board__why,
  .site-board__row:focus-visible .site-board__why,
  .site-board__row[aria-pressed="true"] .site-board__why {
    transition: none;
  }
  .stats--row .stat,
  .stats--row .stat:hover,
  .stats--row .stat:focus-visible,
  .stats--row .stat:active {
    transform: none;
    transition: none;
  }
  .stats-gloss { transition: none; }
  .js .hero-stats .stats--row > li,
  .js .stats--row.reveal > li,
  .js .hero-stats.is-visible .stats--row > li,
  .js .stats--row.is-visible > li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  .site-board__why { max-height: none; opacity: 1; transform: none; overflow: visible; }
  .stats--row .stat { transform: none; box-shadow: none; }
}


/* ==========================================================================
   2026-08-31 pass 36 — finish craft
   Map eager paint, page-progress, stats wrap, timber focus, current-only
   hotspot, hover 1–2px, motionOff infinite, side-page current breathe.
   Do not undo map cover/3:2, Approach lerp, 680ms stills. No Ken Burns.
   Reduced-motion and <720px: static.
   ========================================================================== */

/* Dedicated 2px timber progress. html::before duplicate is suppressed. */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 80;
  pointer-events: none;
  background: var(--c-timber-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
html.has-sda::before { content: none !important; display: none !important; }

@supports (animation-timeline: scroll()) {
  html.has-sda .page-progress {
    animation: kc-page-progress 1s linear;
    animation-timeline: scroll();
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .page-progress { display: none !important; animation: none !important; }
}
@media print {
  .page-progress { display: none !important; }
}

/* Stats: one row ≥960. Below: 3+2 from 720, 2+2+1 from 560. No overflow. */
.stats--row {
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}
.stats--row > li,
.stats--row .stat {
  min-width: 0;
  max-width: 100%;
}
.stats--row .stat__value,
.stats--row .stat__label {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (min-width: 560px) and (max-width: 719px) {
  .stats--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--row > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats--row .stat {
    border-right: 0;
    border-bottom: 1px solid var(--c-stone-300);
  }
  .stats--row > li:nth-child(odd) .stat { border-right: 1px solid var(--c-stone-300); }
  .stats--row > li:last-child:nth-child(odd) .stat { border-right: 0; }
  .stats--row > li:last-child .stat { border-bottom: 0; }
  .stats--row:not(:has(> :nth-child(5))) > li:nth-last-child(2) .stat { border-bottom: 0; }
}
@media (min-width: 720px) and (max-width: 959px) {
  .stats--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats--row .stat {
    border-right: 1px solid var(--c-stone-300);
    border-bottom: 1px solid var(--c-stone-300);
  }
  .stats--row > li:nth-child(3n) .stat { border-right: 0; }
  .stats--row > li:nth-child(n+4) .stat { border-bottom: 0; }
  .stats--row > li:last-child:not(:nth-child(3n)) .stat { border-right: 0; }
}
@media (min-width: 960px) {
  .stats--row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .stats--row .stat {
    border-bottom: 0;
    border-right: 1px solid var(--c-stone-300);
  }
  .stats--row > li:last-child .stat { border-right: 0; }
}

/* Timber focus on stats — never outline:none without a replacement. */
.stats--row .stat:focus { outline: none; }
.stats--row .stat:focus-visible {
  outline: 2px solid var(--c-timber-500);
  outline-offset: 3px;
  transform: translateY(-2px);
  background: rgba(176, 122, 68, 0.07);
}
.sites-map__pin:focus-visible,
.site-board__row:focus-visible,
.spec-chips button:focus-visible,
.flex-chip:focus-visible,
.tier-pick__stops button:focus-visible,
.shell-pick button:focus-visible {
  outline: 2px solid var(--focus, var(--c-timber-500));
  outline-offset: 3px;
}

/* Hover lift 1–2px, 0.18s press. No bounce. */
@media (hover: hover) and (min-width: 720px) {
  .catalogue__row:hover { transform: translateY(-2px); }
}
.catalogue__row:active {
  transform: translateY(1px);
  transition-duration: var(--dur-press);
}
.stats--row .stat:hover { transform: translateY(-2px); }
.stats--row .stat:active {
  transform: translateY(1px);
  transition-duration: var(--dur-press);
}

/* Idle hotspot ring: current chip only. Not every hotspot. */
.flex-hotspot::after {
  animation: none !important;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 720px) {
    .hall-pair[data-active-chip="mw"] .flex-hotspot[data-chip="mw"]::after,
    .hall-pair[data-active-chip="ft"] .flex-hotspot[data-chip="ft"]::after,
    .hall-pair[data-active-chip="rk"] .flex-hotspot[data-chip="rk"]::after,
    .hall-pair[data-active-chip="ms"] .flex-hotspot[data-chip="ms"]::after,
    .hall-pair[data-active-chip="ht"] .flex-hotspot[data-chip="ht"]::after {
      animation: hotspot-ring 2.2s var(--ease) infinite !important;
      opacity: 0.65;
    }
    .tier-pick__stops button[aria-pressed="true"] {
      animation: kc-chip-idle 3.8s ease-in-out infinite;
    }
    .sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"]::before,
    .sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"]::before,
    .sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"]::before {
      animation: pin-breathe 3.8s ease-out infinite;
    }
  }
}

/* Side pages share :active 0.18s press with home controls. */
.stats--row .stat:active,
.tier-pick__stops button:active,
.tier-pick__muted:active,
.side-jump a:active,
.site-board__row:active,
.faq__item summary:active {
  transition-duration: var(--dur-press);
}

/* still-seq leftover (unused in HTML) still gated if it returns. */
@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .still-seq__frame {
    animation: none !important;
  }
  .still-seq__frame:first-child { opacity: 1 !important; }
  .flex-hotspot::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .tier-pick__stops button[aria-pressed="true"],
  .sites-layout[data-active-site="k1"] .sites-map__pin[data-site="k1"]::before,
  .sites-layout[data-active-site="k2"] .sites-map__pin[data-site="k2"]::before,
  .sites-layout[data-active-site="k3"] .sites-map__pin[data-site="k3"]::before,
  .page-rail a[aria-current="true"],
  .section--system::before,
  .grade li:has(button[aria-pressed="true"])::before,
  .side-scan li:has(button[aria-current="true"]) {
    animation: none !important;
  }
  .catalogue__row:hover,
  .catalogue__row:active,
  .stats--row .stat:hover,
  .stats--row .stat:focus-visible,
  .stats--row .stat:active {
    transform: none;
  }
}

/* Map ground while the still decodes — parchment + forest wash, not a beige hole. */
.sites-layout .viz-frame__shot.sites-map,
.sites-map {
  background:
    radial-gradient(ellipse 62% 78% at 34% 52%, rgba(36, 80, 64, 0.14), transparent 64%),
    var(--c-stone-200);
}

/* FAQ summary keeps a visible focus ring. */
.faq__item summary:focus { outline: none; }
.faq__item summary:focus-visible {
  outline: 2px solid var(--c-timber-500);
  outline-offset: 3px;
}

/* ==========================================================================
   2026-08-31 pass 37 — default K1, idle caption, #why air, no triplicate.
   Reduced-motion and <720px: static. No Ken Burns. Don't undo map cover.
   ========================================================================== */
.section--gap .stats-gloss {
  margin-bottom: 2.25rem;
}


/* ==========================================================================
   2026-08-31 pass 38 — grade tick-dial once; one fold object per side page
   Timber ticks around current Thermal grade only. No Approach lerp / 240vh.
   No dial on Flexibility markets. Side stills extend viz-frame / heat-pick
   / hall-unit (width 100%, max-height none, 16/9). Reduced-motion and
   <720px: static. No Lenis / GSAP / WebGL / Ken Burns / orange.
   ========================================================================== */

/* A. Sit-still tick-dial on the current grade button. 24 timber ticks.
   Idle breathe stays on li::before — ticks do not pulse. */
.grade { overflow: visible; }
.grade button { position: relative; z-index: 1; }
.grade .tick-dial,
.grade .tick-dial--grade {
  display: none;
  inset: auto;
  --dial-r: 4.65rem;
  width: var(--dial-r);
  height: var(--dial-r);
  left: 1.15rem;
  top: 1.55rem;
  transform: translate(-50%, -50%);
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.grade .tick-dial__marks span {
  background: var(--c-timber-500);
  opacity: 0.28;
  width: 1px;
  height: 8px;
  margin: -4px 0 0 -0.5px;
  transform: rotate(calc(var(--i) * 1deg)) translateY(calc(var(--dial-r) * -0.48));
  transform-origin: 50% 50%;
}
.grade li:nth-child(1) .tick-dial__marks span:nth-child(1),
.grade li:nth-child(2) .tick-dial__marks span:nth-child(7),
.grade li:nth-child(3) .tick-dial__marks span:nth-child(13),
.grade li:nth-child(4) .tick-dial__marks span:nth-child(19) {
  opacity: 0.95;
  height: 11px;
  margin-top: -5.5px;
  background: var(--c-timber-500);
}

@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 720px) {
    .grade li:has(button[aria-pressed="true"]) .tick-dial {
      display: block;
    }
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .grade .tick-dial,
  .grade .tick-dial--grade { display: none !important; }
}
@media print {
  .grade .tick-dial { display: none !important; }
}

/* B. One fold object per side page — hall-scale still, not a cramped inset.
   Chips / kicker / stepper stay above or below, never beside. */
.page-thermal #dest .heat-pick,
.page-compute #unit .side-still,
.page-energy #surplus .side-still,
.page-flexibility #faas .side-still,
.page-flexibility #bess .flex-compare--paper {
  width: 100%;
  max-width: none;
}
.page-thermal #dest .heat-pick .viz-frame {
  width: 100%;
  margin: 0 0 1.05rem;
}
.page-thermal #dest .heat-pick .viz-frame__shot,
.page-compute #unit .side-still .viz-frame__shot,
.page-energy #surplus .side-still .viz-frame__shot,
.page-flexibility #faas .side-still .viz-frame__shot {
  width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
}
.page-compute #unit .side-still,
.page-energy #surplus .side-still,
.page-flexibility #faas .side-still {
  max-width: none;
  margin: 0 0 1.75rem;
}
.page-thermal #dest .section__head,
.page-compute #unit .section__head,
.page-energy #surplus .section__head,
.page-flexibility #faas .section__head,
.page-flexibility #bess .section__head {
  margin-bottom: 1.85rem;
}
.page-thermal #dest .heat-pick__kicker {
  margin-top: 0.15rem;
  margin-bottom: 0.85rem;
}
.page-thermal #dest .heat-pick__stops { margin-bottom: 0.7rem; }
.page-thermal #dest .heat-pick__copy { margin-top: 1.05rem; }

.page-flexibility #bess .flex-compare--paper {
  margin: 0.25rem 0 2.1rem;
  padding: 0.35rem 0 0;
}
.page-flexibility #bess .compare-table--paper th,
.page-flexibility #bess .compare-table--paper td {
  padding-top: 1.1rem;
  padding-bottom: 1.15rem;
}

@media (max-width: 719px) {
  .page-thermal #dest .heat-pick .viz-frame__shot,
  .page-compute #unit .side-still .viz-frame__shot,
  .page-energy #surplus .side-still .viz-frame__shot,
  .page-flexibility #faas .side-still .viz-frame__shot {
    max-height: none;
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   2026-08-31 pass 39 — tick contrast, short-laptop stills, uses air
   Vanilla CSS. Forest / timber. No orange. No Ken Burns on the map.
   Reduced-motion and <720: static. Eggs/classic untouched.
   ========================================================================== */

/* 1. Grade tick-dial contrast. Idle ticks timber-600; current tick
   timber-700, slightly thicker. Breathe stays on li::before only —
   ticks do not pulse. Hidden under reduced-motion and <720 (pass 38). */
.grade li { overflow: visible; }
.grade__k { white-space: nowrap; }
.grade .tick-dial__marks span {
  background: var(--c-timber-600);
  opacity: 0.85;
  width: 1.5px;
  height: 9px;
  margin: -4.5px 0 0 -0.75px;
}
.grade li:nth-child(1) .tick-dial__marks span:nth-child(1),
.grade li:nth-child(2) .tick-dial__marks span:nth-child(7),
.grade li:nth-child(3) .tick-dial__marks span:nth-child(13),
.grade li:nth-child(4) .tick-dial__marks span:nth-child(19) {
  background: var(--c-timber-700);
  opacity: 1;
  width: 2px;
  height: 12px;
  margin-top: -6px;
  margin-left: -1px;
}
/* 720–860: 2×2 grade grid. Shrink the ring so it stays on the button. */
@media (min-width: 720px) and (max-width: 860px) {
  .grade .tick-dial,
  .grade .tick-dial--grade {
    --dial-r: 3.85rem;
    left: 2.05rem;
    top: 2.1rem;
  }
}

/* 2. Short laptop stills. Cap dest / unit / surplus / cooling / parts.
   object-fit cover so geography is not squashed. Not .sites-map. */
.page-thermal #dest .heat-pick .viz-frame__shot,
.page-thermal #capture .side-still .viz-frame__shot,
.page-compute #unit .side-still .viz-frame__shot,
.page-compute #cooling .side-still .viz-frame__shot,
.page-compute #parts .heat-pick .viz-frame__shot,
.page-energy #surplus .side-still .viz-frame__shot,
.page-flexibility #faas .side-still .viz-frame__shot {
  width: 100%;
  max-height: min(52vh, 520px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.page-thermal #dest .heat-pick .viz-frame__shot img,
.page-thermal #capture .side-still .viz-frame__shot img,
.page-compute #unit .side-still .viz-frame__shot img,
.page-compute #cooling .side-still .viz-frame__shot img,
.page-compute #parts .heat-pick .viz-frame__shot img,
.page-energy #surplus .side-still .viz-frame__shot img,
.page-flexibility #faas .side-still .viz-frame__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-compute #cooling .side-still,
.page-compute #parts .heat-pick {
  width: 100%;
  max-width: none;
  margin: 0 0 1.75rem;
}
.page-compute #parts .heat-pick .viz-frame {
  width: 100%;
  margin: 0 0 1.05rem;
}
.page-compute #cooling .section__head,
.page-compute #parts .section__head {
  margin-bottom: 1.85rem;
}

/* 3. Flexibility #uses — more air, slightly larger h3. Keep 01–04.
   No tick-dial. Copy untouched (no triplicate of Energy curtailment). */
.page-flexibility #uses .side-scan {
  gap: 1.75rem 2rem;
  padding-top: 1.45rem;
}
.page-flexibility #uses .side-scan h3 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

/* 4. Cheap craft: jump-target scroll-margin, timber focus on side-jumps,
   compute jump wrap air. */
#local, #sovereign, #gap {
  scroll-margin-top: 5.75rem;
}
.side-jump a:focus { outline: none; }
.side-jump a:focus-visible {
  outline: 2px solid var(--c-timber-500);
  outline-offset: 3px;
  color: var(--c-timber-600);
  border-color: var(--c-timber-600);
}
.page-compute .side-jump {
  row-gap: 0.7rem;
}

/* ==========================================================================
   2026-08-31 pass 40 — leftover polish
   4-up grade dial stays on the button. Uses 2×2 a little longer.
   Current grade paints above neighbours. Reduced-motion / <720 unchanged.
   ========================================================================== */

.grade li:has(button[aria-pressed="true"]) {
  z-index: 3;
  isolation: isolate;
}
@media (min-width: 861px) {
  .grade .tick-dial,
  .grade .tick-dial--grade {
    --dial-r: 4.2rem;
    top: 1.45rem;
  }
}

@media (max-width: 1100px) {
  .page-flexibility #uses .side-scan--4 {
    grid-template-columns: 1fr 1fr;
  }
}

.page-thermal #dest .heat-pick__stops {
  gap: 0.55rem 0.7rem;
  flex-wrap: wrap;
}

.side-hero__quiet {
  max-width: 38rem;
}

#contact, #faq, #holds, #start {
  scroll-margin-top: 5.75rem;
}

/* ==========================================================================
   2026-08-31 pass 41 — air, type, stills, motion restraint
   Vanilla CSS. Forest / timber. No orange. No Ken Burns on the map.
   Reduced-motion and <720: static. Grade dial size unchanged.
   Eggs/classic untouched. No Lenis / GSAP / WebGL.
   ========================================================================== */

/* More air: home sections, side pages, side-hero vs first section. */
:root { --section-pad: clamp(4rem, 9vw, 8rem); }
@media (max-height: 860px) {
  :root { --section-pad: clamp(3.15rem, 6vw, 5.5rem); }
}
.section--side {
  padding-block: clamp(3.35rem, 7vw, 5.65rem);
}
.side-hero {
  padding: clamp(6.5rem, 12vw, 8.75rem) 0 clamp(3rem, 6.5vw, 4.25rem);
}
.side-hero + .section--side {
  padding-top: clamp(3.5rem, 7.5vw, 5.85rem);
}
.section--side .section__head { margin-bottom: 1.9rem; }

/* Card gap. */
.side-scan {
  gap: 1.55rem 1.85rem;
  padding-top: 1.4rem;
}
.holds-scan { gap: 1.55rem 2rem; }
.purpose-scan li {
  padding-top: 1.6rem;
  padding-bottom: 1.85rem;
}
.gap-grid { gap: clamp(2.5rem, 5.5vw, 4.35rem); }

/* Type: H2 clip readable (descenders). Side-hero title sits below the pill. */
.js .section__title .clip,
.js .chapter__title .clip,
.js .side-hero__title .clip {
  padding-bottom: 0.18em;
  margin-bottom: -0.08em;
}
.js .is-visible .section__title .clip,
.js .is-visible .chapter__title .clip,
.js .hero.is-ready .clip,
.js .side-hero.is-ready .clip,
.js .chapter.is-ready .clip {
  overflow: visible;
}

/* Measure on decks ~38–42rem. */
.side-hero__deck { max-width: 40rem; }
.side-hero__quiet { max-width: 40rem; }
.section--side .section__lead { max-width: 40rem; }

/* Stills: keep fold objects full-width + cover + short-laptop cap.
   Map untouched. */
.page-thermal #dest .heat-pick .viz-frame__shot,
.page-thermal #capture .side-still .viz-frame__shot,
.page-compute #unit .side-still .viz-frame__shot,
.page-compute #cooling .side-still .viz-frame__shot,
.page-compute #parts .heat-pick .viz-frame__shot,
.page-energy #surplus .side-still .viz-frame__shot,
.page-flexibility #faas .side-still .viz-frame__shot {
  max-height: min(52vh, 520px);
  object-fit: cover;
}

/* Hover 1–2px. :active 0.18s already on controls. No new pulses. */
@media (hover: hover) and (min-width: 720px) {
  .heat-pick__stops button:hover,
  .grade button:hover,
  .site-board__row:hover {
    transform: translateY(-1px);
  }
}
.heat-pick__stops button:active,
.grade button:active,
.site-board__row:active {
  transform: translateY(1px);
  transition-duration: var(--dur-press);
}

/* Cheap nits: contrast, wrap, scroll-margin, chip wrap. */
.section--gap .stat__label { color: var(--c-ink-2); }
.side-jump { row-gap: 0.7rem; }
.section--dark .spec-chips,
.heat-pick__stops,
.parts-pick .heat-pick__stops {
  flex-wrap: wrap;
}
.heat-pick__stops { gap: 0.5rem 0.65rem; }
.site-board__why { overflow-wrap: anywhere; }
.section__title,
.side-hero__title { overflow-wrap: break-word; }

#surplus, #queue, #north, #sign, #plots,
#wire, #pays, #faas, #uses, #loop, #control, #markets, #bess,
#grade, #dest, #capture, #who, #host,
#purpose, #why, #system, #compute-band {
  scroll-margin-top: 5.75rem;
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .heat-pick__stops button:hover,
  .heat-pick__stops button:active,
  .grade button:hover,
  .grade button:active,
  .site-board__row:hover,
  .site-board__row:active {
    transform: none;
  }
}

/* ==========================================================================
   2026-09-01 pass 42 — product landing, jump groups, hall object, air
   Vanilla CSS. Forest / timber. No orange. No Ken Burns on the map.
   Reduced-motion and <720: static. Eggs/classic frozen.
   ========================================================================== */

/* 1. Side-page jump: two labelled rows, not a link wall.
   Shared by Compute / Energy / Thermal / Flexibility. */
.side-jump.side-jump--split {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 1.15rem;
  row-gap: 1.15rem;
  margin-top: 1.75rem;
}
.side-jump--split .side-jump__group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.85rem;
  min-width: 0;
  max-width: 100%;
}
.side-jump--split .side-jump__label {
  flex: 1 0 100%;
  margin: 0 0 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.side-jump--split a {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  padding-bottom: 0.16rem;
}

/* 4. Hall Flexbox: current chip + matching hotspot are the object.
   Stronger timber on the pressed chip. Idle ring current-only.
   Still stays full width — no Ken Burns. Spec-rail gets air. */
.section--hall > .container {
  padding-top: clamp(1.15rem, 2.8vw, 2rem);
}
.section--hall .glance {
  margin-bottom: clamp(2.15rem, 4.5vw, 3.15rem);
}
.hall-unit .spec-rail {
  margin-top: clamp(2rem, 4.5vw, 3.15rem);
}

.section--dark .spec-chips .flex-chip[aria-pressed="true"],
.section--hall .spec-chips .flex-chip[aria-pressed="true"],
.hall-pair[data-active-chip="mw"] .spec-chips [data-chip="mw"],
.hall-pair[data-active-chip="ft"] .spec-chips [data-chip="ft"],
.hall-pair[data-active-chip="rk"] .spec-chips [data-chip="rk"],
.hall-pair[data-active-chip="ms"] .spec-chips [data-chip="ms"],
.hall-pair[data-active-chip="ht"] .spec-chips [data-chip="ht"] {
  background: var(--c-timber-500);
  border-color: var(--c-timber-600);
  color: var(--c-forest-950);
  box-shadow: inset 0 -2px 0 var(--c-timber-700);
}
.section--dark .spec-chips .flex-chip[aria-pressed="true"] .flex-specs__value,
.section--hall .spec-chips .flex-chip[aria-pressed="true"] .flex-specs__value {
  color: var(--c-forest-950);
}
.section--dark .spec-chips .flex-chip[aria-pressed="true"] .flex-specs__label,
.section--hall .spec-chips .flex-chip[aria-pressed="true"] .flex-specs__label {
  color: var(--c-forest-800);
}

.hall-pair[data-active-chip="mw"] .flex-hotspot[data-chip="mw"],
.hall-pair[data-active-chip="ft"] .flex-hotspot[data-chip="ft"],
.hall-pair[data-active-chip="rk"] .flex-hotspot[data-chip="rk"],
.hall-pair[data-active-chip="ms"] .flex-hotspot[data-chip="ms"],
.hall-pair[data-active-chip="ht"] .flex-hotspot[data-chip="ht"] {
  background: var(--c-timber-500);
  border-color: var(--c-timber-600);
  color: var(--c-forest-950);
  font-weight: 600;
}

/* Still reads as the selected object — timber hairline, no pan/zoom. */
.hall-pair[data-active-chip] .hall-pair__shot .viz-frame__shot {
  box-shadow: inset 0 0 0 2px var(--c-timber-500);
}

/* Kill the all-hotspot idle ring. Current matching hotspot only. */
.flex-hotspot::after {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 720px) {
    .section--dark .spec-chips .flex-chip[aria-pressed="true"] {
      animation: kc-chip-idle 3.8s ease-in-out infinite;
    }
    .hall-pair[data-active-chip="mw"] .flex-hotspot[data-chip="mw"]::after,
    .hall-pair[data-active-chip="ft"] .flex-hotspot[data-chip="ft"]::after,
    .hall-pair[data-active-chip="rk"] .flex-hotspot[data-chip="rk"]::after,
    .hall-pair[data-active-chip="ms"] .flex-hotspot[data-chip="ms"]::after,
    .hall-pair[data-active-chip="ht"] .flex-hotspot[data-chip="ht"]::after {
      display: block;
      opacity: 0;
      animation: hotspot-ring 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    }
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .section--dark .spec-chips .flex-chip[aria-pressed="true"] {
    animation: none;
  }
  .flex-hotspot::after,
  .hall-pair[data-active-chip="mw"] .flex-hotspot[data-chip="mw"]::after,
  .hall-pair[data-active-chip="ft"] .flex-hotspot[data-chip="ft"]::after,
  .hall-pair[data-active-chip="rk"] .flex-hotspot[data-chip="rk"]::after,
  .hall-pair[data-active-chip="ms"] .flex-hotspot[data-chip="ms"]::after,
  .hall-pair[data-active-chip="ht"] .flex-hotspot[data-chip="ht"]::after {
    animation: none;
    display: none;
  }
  .hall-pair[data-active-chip] .hall-pair__shot .viz-frame__shot {
    box-shadow: inset 0 0 0 2px var(--c-timber-500);
  }
}

/* 5a. 4-up grade: smaller ring so it does not kiss the kelvin number. ≥861 only. */
@media (min-width: 861px) {
  .grade .tick-dial,
  .grade .tick-dial--grade {
    --dial-r: 4.0rem;
  }
}

@media print {
  .side-jump,
  .side-jump.side-jump--split { display: none; }
}

/* ==========================================================================
   2026-09-01 pass 43 — Energy / Thermal / Flexibility product folds
   Shared split jump. Still cap + cover. Grade padding nudge, not a redesign.
   Vanilla CSS. Forest / timber. No orange. No Ken Burns on the map.
   Reduced-motion and <720: static. Eggs/classic frozen.
   ========================================================================== */

.page-thermal #capture .side-still {
  width: 100%;
  max-width: none;
  margin: 0 0 1.75rem;
}

@media (min-width: 861px) {
  .grade li {
    padding: 1.35rem 1.4rem 1.55rem 0.2rem;
  }
}

@media (max-width: 719px) {
  .side-jump.side-jump--split {
    gap: 0.95rem;
    row-gap: 0.95rem;
    overflow-wrap: anywhere;
  }
  .side-jump--split .side-jump__group {
    flex-wrap: wrap;
    gap: 0.4rem 0.7rem;
    min-width: 0;
    max-width: 100%;
  }
  .side-jump--split a {
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   2026-09-01 pass 45 — product stills as objects, For-you chip row,
   Approach stage, side-hero air, Energy 4-up stats.
   Vanilla CSS. Forest / timber. No orange. No Ken Burns on the map.
   Reduced-motion and <720: static. Eggs/classic frozen.
   ========================================================================== */

/* 1. Product-fold stills: full container width, object edge.
   Compute #unit, Energy #surplus, Flexibility #faas, Thermal #dest / #capture.
   Height cap + cover stay. No pan/zoom. Other stills remain 52rem. */
.page-compute #unit .side-still,
.page-energy #surplus .side-still,
.page-flexibility #faas .side-still,
.page-thermal #capture .side-still,
.page-thermal #dest .heat-pick,
.page-thermal #dest .heat-pick .viz-frame {
  width: 100%;
  max-width: none;
}
.page-compute #unit .side-still .viz-frame__shot,
.page-energy #surplus .side-still .viz-frame__shot,
.page-flexibility #faas .side-still .viz-frame__shot,
.page-thermal #capture .side-still .viz-frame__shot,
.page-thermal #dest .heat-pick .viz-frame__shot {
  width: 100%;
  max-height: min(52vh, 520px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  object-fit: cover;
  box-shadow:
    inset 0 0 0 1px var(--c-timber-500),
    0 18px 40px -24px rgba(18, 41, 31, 0.22),
    0 1px 0 rgba(18, 41, 31, 0.04);
}
.page-compute #unit .side-still .viz-frame__shot img,
.page-energy #surplus .side-still .viz-frame__shot img,
.page-flexibility #faas .side-still .viz-frame__shot img,
.page-thermal #capture .side-still .viz-frame__shot img,
.page-thermal #dest .heat-pick .viz-frame__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}
.page-compute #cooling .side-still,
.page-compute #parts .heat-pick {
  max-width: 52rem;
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .page-compute #unit .side-still .viz-frame__shot img,
  .page-energy #surplus .side-still .viz-frame__shot img,
  .page-flexibility #faas .side-still .viz-frame__shot img,
  .page-thermal #capture .side-still .viz-frame__shot img,
  .page-thermal #dest .heat-pick .viz-frame__shot img {
    transform: none;
  }
}

/* 2. Who we build with — two labelled chip rows, side-jump--split pattern.
   Existing data-jump / is-active. Prev/next stay. No auto-advance. */
.vertical-groups.vertical-groups--split {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0.85rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.85rem var(--gutter) 1.05rem;
  background: rgba(28, 24, 24, 0.42);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-left: 0;
}
.vertical-groups--split .v-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.85rem;
  min-width: 0;
  max-width: 100%;
}
.vertical-groups--split .v-group.is-active .v-group__label,
.vertical-groups--split .v-group__label {
  flex: 1 0 100%;
  margin: 0 0 0.08rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}
.vertical-groups--split .v-group.is-active .v-group__label {
  color: var(--c-timber-300);
}
.vertical-groups--split .vertical-index {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.vertical-groups--split .vertical-index li {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}
.vertical-groups--split .vertical-index button,
.vertical-groups--split .vertical-index button[aria-pressed="true"],
.vertical-groups--split .vertical-index button[aria-pressed="false"] {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  width: auto;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 0.2rem 0 0.16rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--c-on-dark-2);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  overflow-wrap: anywhere;
  animation: none;
}
.vertical-groups--split .vertical-index button .vertical-index__name {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  overflow-wrap: anywhere;
}
.vertical-groups--split .vertical-index__n {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.vertical-groups--split .vertical-index button[aria-pressed="true"] {
  background: transparent;
  color: var(--c-timber-300);
  border-bottom-color: var(--c-timber-400);
  box-shadow: none;
  animation: none;
}
.vertical-groups--split .vertical-index button[aria-pressed="true"] .vertical-index__name {
  color: var(--c-timber-300);
}
.vertical-groups--split .vertical-index button:focus-visible {
  outline: 2px solid var(--c-timber-400);
  outline-offset: 3px;
}
.vertical-groups--split .vertical-controls {
  width: 100%;
  margin: 0.1rem 0 0;
  padding: 0.55rem 0 0;
  border-top: 1px solid rgba(243, 239, 230, 0.14);
}

@media (min-width: 720px) {
  .vertical-groups--split .vertical-index button,
  .vertical-groups--split .vertical-index button[aria-pressed="true"],
  .vertical-groups--split .vertical-index button[aria-pressed="false"] {
    min-height: 0;
    padding: 0.12rem 0 0.14rem;
  }
}

@media (min-width: 1100px) {
  .vertical-groups.vertical-groups--split {
    position: absolute;
    left: var(--gutter);
    right: 36rem;
    top: clamp(0.85rem, 1.8vw, 1.35rem);
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0.7rem 0.9rem 0.8rem;
    background: rgba(28, 24, 24, 0.38);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border: 0;
  }
}

@media (max-width: 719px) {
  .vertical-groups.vertical-groups--split {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.85rem var(--gutter) 1.1rem;
    gap: 0.7rem;
    overflow-wrap: anywhere;
  }
  .vertical-groups--split .v-group,
  .vertical-groups--split .vertical-index {
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
    min-width: 0;
    max-width: 100%;
  }
  .vertical-groups--split .vertical-index button,
  .vertical-groups--split .vertical-index button[aria-pressed="true"] {
    overflow-wrap: anywhere;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vertical-groups--split .vertical-index button,
  .vertical-groups--split .vertical-index button[aria-pressed="true"] {
    animation: none !important;
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 720px) {
    .vertical-groups--split .vertical-index button[aria-pressed="true"] {
      animation: none;
    }
  }
}

/* 3. Approach: object occupies more of the stage on ≥880px.
   Copy stays in the orbit gutters. Idle breathe already current-only
   (.orbit.is-active .orbit__n). Motion off / <720: static. No Ken Burns. */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 880px) {
    .chapter__stage {
      --dial-r: min(32vw, 460px);
      width: var(--dial-r);
    }
    .chapter .hero__still img {
      max-height: min(40vh, 360px);
      transform: none;
    }
    .chapter .tick-dial__marks span {
      transform: rotate(calc(var(--i) * 1deg)) translateY(calc(var(--dial-r) * -0.52));
    }
    .chapter .orbit {
      width: min(18.5rem, 26vw);
    }
  }
  @media (min-width: 1100px) {
    .chapter__stage {
      --dial-r: min(34vw, 500px);
      width: var(--dial-r);
    }
    .chapter .hero__still img {
      max-height: min(42vh, 380px);
    }
    .chapter .tick-dial__marks span {
      transform: rotate(calc(var(--i) * 1deg)) translateY(calc(var(--dial-r) * -0.52));
    }
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .chapter .hero__still img {
    transform: none !important;
  }
}

/* 4. Side-hero: jump closer to the H1. Title weight 400. Quiet 0.1rem lift. */
.side-hero__title {
  font-weight: 400;
  font-size: clamp(2.2rem, 1.18rem + 3.65vw, 3.95rem);
}
.side-jump.side-jump--split {
  margin-top: 0.9rem;
  gap: 0.85rem;
  row-gap: 0.85rem;
}

/* 5. Energy #gap: four tiles, one row at 1280. Do not drop 322.
   SE2 679 / Montel aside is gone (pass 60). Tighten padding / labels, not copy. */
@media (min-width: 960px) {
  .page-energy #gap .stats--row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-energy #gap .stats--row .stat {
    padding: 1.05rem 0.7rem 1.1rem;
  }
  .page-energy #gap .stats--row .stat__value {
    font-size: clamp(1.55rem, 1.05rem + 1.15vw, 2.35rem);
    margin-bottom: 0.4rem;
  }
  .page-energy #gap .stats--row .stat__label {
    max-width: none;
    font-size: 0.78rem;
    line-height: 1.35;
  }
}
@media (min-width: 1280px) {
  .page-energy #gap .stats--row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-energy #gap .stats--row .stat {
    padding: 1.1rem 0.75rem 1.15rem;
  }
}

/* ==========================================================================
   2026-09-01 pass 46 — chip bar off the still, locked home stats, wrap
   Vanilla CSS. Forest / timber. No orange. No Ken Burns. No grade-dial restyle.
   Reduced-motion and <720: static. Eggs/classic frozen.
   ========================================================================== */

/* 1. Hosts / Workloads: full-width bar ABOVE the still+panel split.
   Photograph is unobstructed. Prev/next live on the bar, not on the photo.
   Existing data-jump / is-active. Default first host. No auto-advance. */

.verticals {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
html:not(.js) .verticals {
  display: grid;
  gap: 0;
}

.verticals__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: min(72vh, 640px);
  width: 100%;
}

.vertical-groups.vertical-groups--split {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0.55rem 1.35rem;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0.7rem var(--gutter) 0.75rem;
  background: var(--c-dark-act);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-bottom: 1px solid rgba(243, 239, 230, 0.14);
  box-sizing: border-box;
}

.vertical-groups--split .v-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
  min-width: 0;
  max-width: 100%;
}

.vertical-groups--split .v-group.is-active .v-group__label,
.vertical-groups--split .v-group__label {
  flex: 0 0 auto;
  margin: 0 0.35rem 0 0;
}

.vertical-groups--split .vertical-index {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.vertical-groups--split .vertical-controls {
  flex: 0 0 auto;
  width: 100%;
  margin: 0.1rem 0 0;
  padding: 0.5rem 0 0;
  border-top: 1px solid rgba(243, 239, 230, 0.14);
}

@media (min-width: 721px) {
  .verticals {
    min-height: min(92vh, 820px);
  }
  .verticals__stage {
    min-height: min(72vh, 640px);
  }
  .vertical.is-active {
    min-height: min(72vh, 640px);
  }
  .vertical.is-active .vertical__panel {
    min-height: min(72vh, 640px);
  }
}

@media (min-width: 900px) {
  .vertical-groups.vertical-groups--split {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.65rem var(--gutter) 0.7rem;
  }
  .vertical-groups--split .v-group {
    flex: 1 1 16rem;
    min-width: 0;
  }
  .vertical-groups--split .vertical-controls {
    width: auto;
    margin: 0 0 0 auto;
    padding: 0;
    border-top: 0;
  }
}

@media (min-width: 1100px) {
  .verticals {
    min-height: min(92vh, 820px);
  }
  .verticals__stage,
  .vertical.is-active,
  .vertical.is-active .vertical__panel {
    min-height: min(78vh, 680px);
  }
  .vertical-groups.vertical-groups--split {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.65rem var(--gutter) 0.7rem;
    background: var(--c-dark-act);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-bottom: 1px solid rgba(243, 239, 230, 0.14);
  }
}

@media (max-width: 719px) {
  .verticals,
  .verticals__stage,
  .vertical.is-active,
  .vertical.is-active .vertical__panel {
    min-height: 0;
  }
  .vertical-groups.vertical-groups--split {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.85rem var(--gutter) 1.05rem;
    gap: 0.7rem;
    overflow-wrap: anywhere;
    background: var(--c-dark-act);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .vertical-groups--split .v-group,
  .vertical-groups--split .vertical-index {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 0.3rem 0.7rem;
  }
  .vertical-groups--split .v-group.is-active .v-group__label,
  .vertical-groups--split .v-group__label {
    flex: 1 0 100%;
    margin: 0 0 0.08rem;
  }
  .vertical-groups--split .vertical-index button,
  .vertical-groups--split .vertical-index button[aria-pressed="true"] {
    min-height: 44px;
    overflow-wrap: anywhere;
  }
  .vertical-groups--split .vertical-controls {
    width: 100%;
    margin: 0.1rem 0 0;
    padding: 0.55rem 0 0;
    border-top: 1px solid rgba(243, 239, 230, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vertical-groups--split .vertical-index button,
  .vertical-groups--split .vertical-index button[aria-pressed="true"] {
    animation: none !important;
    transition: none;
  }
}

html:not(.js) .verticals__stage {
  display: contents;
}

/* 3. Flexibility H1: ~28ch so “Compute flexes. The host stays on.”
   does not snag on the shared 22ch at 1280. Compute stays 22ch. */
.page-flexibility .side-hero__title {
  max-width: 28ch;
}

/* 4. Approach 880–1000: object a little narrower so orbit copy does not kiss.
   Tick transform still scoped to .chapter. Motion off / <720 unchanged. */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 880px) and (max-width: 1099px) {
    .chapter__stage {
      --dial-r: min(28vw, 400px);
      width: var(--dial-r);
    }
    .chapter .hero__still img {
      max-height: min(36vh, 320px);
      transform: none;
    }
    .chapter .tick-dial__marks span {
      transform: rotate(calc(var(--i) * 1deg)) translateY(calc(var(--dial-r) * -0.52));
    }
  }
}

/* 5. Energy #gap: keep the 4-up from 960 / 1280. Label shortened in HTML. */
@media (min-width: 1280px) {
  .page-energy #gap .stats--row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-energy #gap .stats--row .stat__label {
    max-width: none;
    font-size: 0.76rem;
    line-height: 1.3;
  }
}

/* ==========================================================================
   2026-09-01 pass 47 — Hosts one row, Sites map as object, contact note
   Vanilla CSS. Forest / timber. No orange. No Ken Burns. No pin restyle.
   Reduced-motion and <720: static. Eggs/classic frozen. Bar stays above stage.
   ========================================================================== */

/* 1. Chip bar: names only. 01/07 lives on Prev/Next. */
.vertical-groups--split .vertical-index__n {
  display: none;
}

@media (min-width: 1100px) {
  .vertical-groups.vertical-groups--split {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 1.1rem;
    background: var(--c-dark-act);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .vertical-groups--split .v-group[data-v-group="energy"] {
    flex: 1 0 auto;
    flex-wrap: nowrap;
  }
  .vertical-groups--split .v-group[data-v-group="energy"] .vertical-index {
    flex-wrap: nowrap;
    gap: 0.2rem 0.55rem;
    width: auto;
    flex: 0 0 auto;
  }
  .vertical-groups--split .v-group[data-v-group="compute"] {
    flex: 0 1 auto;
    flex-wrap: nowrap;
  }
  .vertical-groups--split .v-group[data-v-group="compute"] .vertical-index {
    flex-wrap: nowrap;
    gap: 0.2rem 0.55rem;
  }
  .vertical-groups--split .vertical-index button,
  .vertical-groups--split .vertical-index button[aria-pressed="true"],
  .vertical-groups--split .vertical-index button[aria-pressed="false"] {
    font-size: 0.6rem;
    letter-spacing: 0.07em;
    padding: 0.1rem 0 0.12rem;
  }
  .vertical-groups--split .vertical-index button .vertical-index__name {
    white-space: nowrap;
  }
  .vertical-groups--split .vertical-controls {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .vertical-groups--split .v-group[data-v-group="energy"] {
    flex: 1 1 100%;
  }
  .vertical-groups--split .v-group[data-v-group="energy"] .vertical-index {
    flex-wrap: wrap;
    gap: 0.15rem 0.42rem;
    overflow-x: visible;
  }
  .vertical-groups--split .vertical-index button,
  .vertical-groups--split .vertical-index button[aria-pressed="true"],
  .vertical-groups--split .vertical-index button[aria-pressed="false"] {
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    padding: 0.08rem 0 0.1rem;
  }
  .vertical-groups--split .vertical-index button .vertical-index__name {
    white-space: nowrap;
  }
}
@media (max-width: 899px) {
  .vertical-groups--split .vertical-index button .vertical-index__name {
    white-space: normal;
  }
}

/* 2. Sites: why is a quiet row; map + board take the stage.
   Pins, Ken Burns lock, and board collapse untouched. */
#sites .section__head {
  margin-bottom: clamp(0.7rem, 1.6vw, 1.05rem);
}
.sites-why {
  gap: 0.55rem 1.15rem;
  margin: 0 0 clamp(0.85rem, 2vw, 1.25rem);
  padding: 0.45rem 0 0.55rem;
}
.sites-why__kicker {
  font-size: 0.6rem;
  margin: 0 0 0.12rem;
  padding-bottom: 0.22rem;
}
.sites-why h3 {
  font-size: 0.92rem;
  margin: 0 0 0.12rem;
}
.sites-why p {
  font-size: 0.8rem;
  line-height: 1.35;
}
@media (min-width: 720px) {
  .sites-why { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 880px) {
  .sites-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
  }
}

/* Sticky nav must not clip First plots / K1 Söderhamn. */
#sites,
#sites-title {
  scroll-margin-top: calc(1.15rem + 72px + 56px);
}


@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .sites-why__kicker::after {
    transform: none;
  }
  .vertical-groups.vertical-groups--split {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
  }
}


/* ==========================================================================
   2026-09-01 pass 50 — jump spy, product still settle, card hover
   Vanilla CSS. Forest / timber. No orange. No Ken Burns. No map / grade restyle.
   Reduced-motion and <720: static (spy underline is not extra animation).
   Eggs/classic frozen.
   ========================================================================== */

/* 1. Jump spy current: timber underline, same family as primary nav current. */
.side-jump a[aria-current="location"] {
  color: var(--c-ink);
  border-bottom-color: var(--c-timber-500);
}

/* 2. Product still settle — one-shot class from JS. Opacity / a few px only.
   Hall / heat / scale keep the same named keyframe (retuned off scale). */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 720px) {
    .js .side-still .viz-frame__shot.is-settled,
    .js .page-thermal #dest .heat-pick .viz-frame__shot.is-settled {
      animation: kc-still-settle 0.7s var(--ease) both;
    }
  }
}
@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .js .side-still .viz-frame__shot,
  .js .page-thermal #dest .heat-pick .viz-frame__shot {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* 3. Card hover: lift 2px + timber hairline. Pointer devices, ≥720, motion on.
   No hover on touch-only. No idle loop. */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (min-width: 720px) {
    .side-scan > li,
    .purpose-scan > li {
      transition: transform var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease);
    }
    .side-scan > li:hover,
    .side-scan > li:focus-within,
    .purpose-scan > li:hover,
    .purpose-scan > li:focus-within {
      transform: translateY(-2px);
      box-shadow: 0 1px 0 var(--c-timber-500);
    }
  }
}
@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .side-scan > li,
  .purpose-scan > li {
    transition: none;
  }
  .side-scan > li:hover,
  .side-scan > li:focus-within,
  .purpose-scan > li:hover,
  .purpose-scan > li:focus-within {
    transform: none;
    box-shadow: none;
  }
}


/* 4. Home flow — Energy in → Kelvin Flexbox → Value out.
   Adapted from Nick's .flow (not the .kc demo sheet). No chart, no sources.
   <720 stacks. No arrow animation. Map / grade / Approach pin untouched. */
.section--flow {
  background: var(--c-paper);
  border-top: 1px solid var(--c-stone-300);
}
#flow { scroll-margin-top: 5.75rem; }
.flow {
  display: grid;
  gap: 1rem;
  align-items: stretch;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}
.flow > * { min-width: 0; }
.flow__node {
  padding: 1.25rem 1.3rem 1.35rem;
  border-radius: var(--radius);
  background: var(--c-stone-100, #f1ede5);
  border: 1px solid var(--c-stone-300);
}
.flow__node--core {
  background: var(--c-forest-900);
  color: var(--c-on-dark);
  border-color: var(--c-forest-900);
  --c-power: var(--c-power-dark);
  --c-heat: var(--c-heat-dark);
}
.flow__core-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}
.flow__core-head .flow__label { margin: 0; }
.flow__mark {
  height: 40px;
  width: auto;
  aspect-ratio: 87.233 / 100;
  flex: none;
  overflow: visible;
}
.flow__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0 0 0.85rem;
}
.flow__node--core .flow__label { color: var(--c-timber-400); }
.flow__list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}
.flow__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.4;
}
.flow__list .icon { margin-top: 0.08rem; color: var(--c-forest-700); }
.flow__out--compute .icon { color: var(--c-power); }
.flow__out--heat .icon { color: var(--c-heat); }
.flow__out--flex .icon { color: var(--c-forest-600); }
.flow__list--core { color: var(--c-on-dark-2); }
.flow__list--core li {
  position: relative;
  padding-left: 1rem;
  display: block;
}
.flow__list--core li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.35rem;
  height: 0.35rem;
  background: var(--c-timber-400);
  transform: rotate(45deg);
}
.flow__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--c-stone-500);
  padding: 0.15rem 0.35rem;
  text-align: center;
}
.flow__link svg { width: 36px; height: 20px; transform: rotate(90deg); flex: none; }
.flow__link-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--c-ink-3);
  line-height: 1.4;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.12rem 0.3rem;
}
.flow__key-item { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.28rem; }
.flow__key { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.flow__key--compute { background: var(--c-power); }
.flow__key--heat { background: var(--c-heat); }
.flow__key--flex { background: var(--c-forest-600); }
.flow__return {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 0;
}
.flow__return-line { display: none; }
.flow__return-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--c-ink-3);
  text-align: center;
  max-width: 36rem;
  line-height: 1.45;
  margin: 0;
}
.flow__return-label::before { content: "↺ "; color: var(--c-forest-600); }

@media (min-width: 720px) {
  .flow {
    grid-template-columns: minmax(0, 1fr) minmax(5.5rem, auto) minmax(0, 1.15fr) minmax(5.5rem, auto) minmax(0, 1fr);
    gap: 0.4rem;
  }
  .flow__link svg { transform: none; }
  .flow__link-label { max-width: 7.5rem; }
  .flow__return { padding: 0 4%; }
  .flow__return-line {
    display: block;
    width: 100%;
    height: 28px;
    border: 2px dashed var(--c-stone-500);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    position: relative;
    margin-top: -0.2rem;
  }
  .flow__return-line::before {
    content: "";
    position: absolute;
    left: -6px;
    top: -3px;
    width: 10px;
    height: 10px;
    border-left: 2px solid var(--c-stone-500);
    border-top: 2px solid var(--c-stone-500);
    transform: rotate(45deg);
  }
  .flow__return-label::before { content: none; }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .flow__link svg { animation: none; }
  .flow__return-line { animation: none; }
}
@media (max-width: 719px) {
  .flow { grid-template-columns: 1fr; }
  .flow__return-line { display: none; }
  .flow__return-label::before { content: "↺ "; }
}

.flow-beats {
  list-style: none;
  display: grid;
  gap: 0.85rem 1.5rem;
  margin: 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--c-stone-300);
}
.flow-beats li { min-width: 0; }
.flow-beats__kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-timber-600);
  margin: 0 0 0.2rem;
}
.flow-beats h3 {
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0 0 0.2rem;
}
.flow-beats p {
  margin: 0;
  color: var(--c-ink-2);
  font-size: 0.88rem;
  line-height: 1.4;
  max-width: 36rem;
}
@media (min-width: 720px) {
  .flow-beats { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .flow-beats { grid-template-columns: repeat(4, 1fr); gap: 0.85rem 1.25rem; }
}

/* ==========================================================================
   2026-09-01 pass 52 — full-stack chorus, Energy 322-only, cheap craft
   Vanilla CSS. Forest / timber. No orange. No Ken Burns. No map / grade restyle.
   Reduced-motion and <720: static. Eggs/classic frozen.
   ========================================================================== */

/* Home #flow: 720–899 five-col is tight after the longer core line. Smaller type
   and padding so Energy-in / Flexbox / Value-out stay one line. Stack stays <720. */
@media (min-width: 720px) and (max-width: 899px) {
  .flow {
    gap: 0.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(3.4rem, auto) minmax(0, 1.2fr) minmax(3.4rem, auto) minmax(0, 1fr);
  }
  .flow__node { padding: 0.85rem 0.72rem 0.95rem; }
  .flow__label { font-size: 0.62rem; letter-spacing: 0.08em; margin-bottom: 0.55rem; }
  .flow__list { font-size: 0.78rem; gap: 0.45rem; }
  .flow__link { padding: 0.1rem 0.15rem; }
  .flow__link svg { width: 28px; height: 16px; }
  .flow__link-label { max-width: 5.4rem; font-size: 0.6rem; }
  .flow__link--out .flow__link-label { max-width: 7.25rem; }
}

/* Energy #gap: 322 only. Do not stretch a single tile across a 2-up. */
.page-energy .stats--solo {
  grid-template-columns: minmax(0, 22rem);
  max-width: 24rem;
}
@media (min-width: 560px) {
  .page-energy .stats--solo { grid-template-columns: minmax(0, 22rem); }
}

/* ==========================================================================
   2026-09-01 pass 53 — chorus off, leftover crafts
   Vanilla CSS. Forest / timber. No orange. No Ken Burns. No map / grade restyle.
   Reduced-motion and <720: static. Eggs/classic frozen. No Approach redesign.
   ========================================================================== */

/* Flexibility H1: two clip lines. 28ch (pass 46) still applies so
   “The host stays on.” does not snag inside the second line. Compute 22ch. */

/* Approach 880–1000: object a step smaller than the 880–1099 28vw band
   so orbit titles do not kiss on a short laptop. Tick still .chapter.
   transform: none. ≥1100 unchanged. Motion off / <720 unchanged. */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 880px) and (max-width: 1000px) {
    .chapter__stage {
      --dial-r: min(21vw, 320px);
      width: var(--dial-r);
      transform: translate3d(-50%, calc(24% - min(var(--p), 0.08) * 850%), 0);
    }
    .chapter .hero__still img {
      max-height: min(32vh, 280px);
      transform: none;
    }
    .chapter .tick-dial__marks span {
      transform: rotate(calc(var(--i) * 1deg)) translateY(calc(var(--dial-r) * -0.52));
    }
  }
}

/* sites-why: 3-up was dense from 720 (long 02). Stack 720–899; 3-up from 900.
   Type/quiet row from 47 kept. Pins / Ken Burns lock untouched. */
@media (min-width: 720px) and (max-width: 899px) {
  .sites-why { grid-template-columns: 1fr; gap: 0.7rem; }
}


/* ==========================================================================
   2026-09-01 pass 54 — Energy 322 solo wins, dest non-SDA settle
   Vanilla CSS. Forest / timber. No orange. No Ken Burns. No map / grade restyle.
   Reduced-motion and <720: static. Eggs/classic frozen. No Approach redesign.
   ========================================================================== */

/* Energy #gap: pass 46 4-up (id #gap) was beating pass 52 .stats--solo.
   One tile. Do not stretch 322 across four columns. */
@media (min-width: 960px) {
  .page-energy #gap .stats--row.stats--solo,
  .page-energy #gap .stats--solo {
    grid-template-columns: minmax(0, 22rem);
    max-width: 24rem;
  }
}
@media (min-width: 1280px) {
  .page-energy #gap .stats--row.stats--solo,
  .page-energy #gap .stats--solo {
    grid-template-columns: minmax(0, 22rem);
    max-width: 24rem;
  }
}

/* ==========================================================================
   2026-09-01 pass 55 — leftover copy crafts, live-line gone, chip bar row
   Vanilla CSS. Forest / timber. No orange. No Ken Burns. No map / grade restyle.
   Reduced-motion and <720: static. Eggs/classic frozen. No Approach redesign.
   ========================================================================== */

/* Chip bar ≥1100: Workloads was wrapping to a second bar row on a short laptop
   because Hosts was flex-shrink: 0 + nowrap. Keep Hosts + Workloads + controls
   on one bar. Hosts chips may wrap inside the left group. */
@media (min-width: 1100px) {
  .vertical-groups.vertical-groups--split {
    flex-wrap: nowrap;
    gap: 0.35rem 0.85rem;
  }
  .vertical-groups--split .v-group[data-v-group="energy"] {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .vertical-groups--split .v-group[data-v-group="energy"] .vertical-index {
    flex-wrap: wrap;
    gap: 0.15rem 0.42rem;
    min-width: 0;
  }
  .vertical-groups--split .v-group[data-v-group="compute"] {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
  .vertical-groups--split .v-group[data-v-group="compute"] .vertical-index {
    flex-wrap: nowrap;
    gap: 0.2rem 0.45rem;
  }
  .vertical-groups--split .vertical-index button,
  .vertical-groups--split .vertical-index button[aria-pressed="true"],
  .vertical-groups--split .vertical-index button[aria-pressed="false"] {
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    padding: 0.08rem 0 0.1rem;
  }
  .vertical-groups--split .vertical-controls {
    flex: 0 0 auto;
    margin-left: 0.35rem;
  }
}


/* ==========================================================================
   2026-09-01 pass 57 — product-page folds, Approach kiss, chip bar, dead heat-grid
   Vanilla CSS. Forest / timber. No orange. No Ken Burns. No map / grade restyle.
   Reduced-motion and <720: static. Eggs/classic frozen. No Approach redesign.
   ========================================================================== */

/* Compute #sovereign: real card in the Local fold, not an inner h3 jump. */
.page-compute #sovereign {
  scroll-margin-top: 5.75rem;
  margin-top: 1.55rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--c-stone-300);
}
.page-compute #sovereign h3 {
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0.3rem 0 0.35rem;
}

/* Chip bar ≥1280: Hosts nowrap so the bar is one designed row.
   1100–1279 still wrap chips inside Hosts so Workloads stays on the bar. */
@media (min-width: 1280px) {
  .vertical-groups--split .v-group[data-v-group="energy"] {
    flex: 0 1 auto;
  }
  .vertical-groups--split .v-group[data-v-group="energy"] .vertical-index {
    flex-wrap: nowrap;
  }
}

/* ==========================================================================
   2026-09-01 pass 58 — bitcoin body, leftover hedges, dead stats CSS, chip bar
   Vanilla CSS. Forest / timber. No orange. No Ken Burns. No map / grade restyle.
   Reduced-motion and <720: static. Eggs/classic frozen. No Approach redesign.
   ========================================================================== */

/* Chip bar 1100–1279: Hosts chips were wrapping inside the left group.
   Tighter type + nowrap so Hosts + Workloads stay one designed row.
   ≥1280 nowrap from 57 still applies. <1100 wrap unchanged. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .vertical-groups.vertical-groups--split {
    flex-wrap: nowrap;
    gap: 0.3rem 0.7rem;
  }
  .vertical-groups--split .v-group[data-v-group="energy"] {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .vertical-groups--split .v-group[data-v-group="energy"] .vertical-index {
    flex-wrap: nowrap;
    flex: 1 1 auto;
    gap: 0.1rem 0.28rem;
    min-width: 0;
  }
  .vertical-groups--split .v-group[data-v-group="compute"] {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
  .vertical-groups--split .vertical-index button,
  .vertical-groups--split .vertical-index button[aria-pressed="true"],
  .vertical-groups--split .vertical-index button[aria-pressed="false"] {
    font-size: 0.5rem;
    letter-spacing: 0.04em;
    padding: 0.06rem 0 0.08rem;
  }
}

/* ==========================================================================
   2026-09-01 pass 59 — contact lives in the green footer, not a closer band
   Vanilla CSS. Forest / timber. No extra dark Contact section.
   Eggs/classic frozen. No Lenis / GSAP / WebGL / Ken Burns / orange.
   ========================================================================== */

/* Give the Contact column enough width for mail + postal without blowing 3-col. */
@media (min-width: 800px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1.15fr; }
}

.site-footer__contact {
  min-width: 0;
  max-width: 18.5rem;
}
.site-footer__mail {
  margin: 0 0 0.4rem;
  font-size: 0.86rem;
  line-height: 1.35;
}
.site-footer__mail a {
  color: var(--c-on-dark);
  word-break: break-word;
}
.site-footer__note {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--c-on-dark-2);
}
.site-footer__address {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(221, 191, 147, 0.22);
  font-style: normal;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--c-timber-300);
}
.site-footer__address strong {
  font-weight: 500;
  color: var(--c-on-dark);
}

@media print {
  .site-footer__mail,
  .site-footer__note,
  .site-footer__address,
  .site-footer__address strong { color: #000 !important; }
}


/* ==========================================================================
   2026-09-01 pass 62 — G1 mark aspect, Loop H2 clip lines
   Official mark is 87.233:100. Do not squash into a square.
   Loop H2: two clip lines like Flexibility H1.
   ========================================================================== */
#flow-title .clip { display: block; }
#flow-title { overflow-wrap: normal; }
@media (min-width: 900px) {
  #flow-title .clip:nth-child(2) { white-space: nowrap; }
  #flow .section__head { max-width: min(100%, 44rem); }
}

/* ==========================================================================
   2026-09-01 pass 63 — print G1 light mark; hall chips; skip / focus / 720 loop
   Footer print is forced white; on-dark G1 vanishes. Swap to light mark.
   Hall product chips Thermal/Heat. Loop second line may wrap at a space <900.
   Eggs / classic / Approach layout / Ken Burns / no new JS. No destack.
   ========================================================================== */

/* Footer is always on-dark on screen. Print forces the footer white. */
.site-footer .brand__mark--on-light { display: none; }
.site-footer .brand__mark--on-dark { display: block; }

@media print {
  .site-footer .brand,
  .site-footer .brand__name { color: #000 !important; }
  .site-footer .brand__mark--on-dark { display: none !important; }
  .site-footer .brand__mark--on-light { display: block !important; }
}

/* Keep Thermal/Heat as one token when the Loop H2 wraps at 720. */
.nowrap { white-space: nowrap; }
@media (max-width: 899px) {
  #flow-title .clip:nth-child(2) { white-space: normal; }
}

/* Skip-link: viewport-fixed so it is not under the pill; focus ring stays. */
.skip-link {
  position: fixed;
  z-index: 400;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

/* Chip bar: product names nowrap; focus ring not clipped. */
.hall-chapters { overflow: visible; }
.hall-chapters__inner { overflow: visible; }
.hall-chapters a { white-space: nowrap; }

/* ==========================================================================
   2026-09-01 pass 64 — hero kicker THERMODYNAMIC COMPUTE
   Small tag under kept H1. One place, not a chorus.
   Pass 63 print G1 / Loop nowrap / skip-link / chip bar untouched.
   ========================================================================== */
.hero__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-timber-300);
  margin: 0.7rem 0 0;
  text-shadow: 0 1px 16px rgba(8, 16, 13, 0.45);
}
.hero.hero--fold .hero__kicker { color: var(--c-timber-300); }
@media print {
  .hero__kicker,
  .hero.hero--fold .hero__kicker { color: #000 !important; text-shadow: none; }
}

/* ==========================================================================
   2026-09-01 pass 66 — leftover destacks / product-page feel
   Vanilla CSS. No new JS. No Ken Burns. No Approach redesign.
   Pass 63/64 locks: G1, Loop nowrap, Flexibility H1, 50% tile, Approach H2.
   Reduced-motion and <720: static (no new motion).
   ========================================================================== */

/* 2. Home kicker as eyebrow above H1 — not a second timber subline under it. */
.hero__kicker {
  margin: 0 0 0.85rem;
}
.hero.hero--fold .hero__kicker {
  color: var(--c-timber-300);
  margin: 0 0 0.85rem;
}

/* 1. Why Kelvin scan is three products, one row at desktop. Energy #local 4-up untouched. */
@media (min-width: 800px) {
  #purpose .purpose-scan {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media print {
  #purpose .purpose-scan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 7. Compute hero opens on the existing Flexbox still, not an 11-link TOC. */
.page-compute .side-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
  gap: 1.5rem 2rem;
  align-items: center;
}
.page-compute .side-hero__copy { min-width: 0; }
.page-compute .side-hero__still {
  margin: 0;
  max-width: none;
}
.page-compute .side-hero__still .viz-frame__shot {
  aspect-ratio: 3 / 2;
  max-height: min(42vh, 360px);
}
@media (max-width: 899px) {
  .page-compute .side-hero__split {
    grid-template-columns: 1fr;
  }
  .page-compute .side-hero__still { order: -1; }
}
@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .page-compute .side-hero__still .viz-frame__shot img {
    transform: none;
  }
}
@media print {
  .page-compute .side-hero__split { display: block; }
}

/* ==========================================================================
   2026-09-01 pass 67 — leftover destacks / product-page feel
   Vanilla CSS. No new JS. No Ken Burns. No Approach redesign.
   Footer / FAQ / contact / #start untouched this pass.
   Pass 63/64/66 locks: G1, Loop nowrap, Flexibility H1 two lines, 50% tile,
   Approach H2+orbits+pin, Compute split, kicker eyebrow.
   Reduced-motion and <720: static (no new motion).
   ========================================================================== */

/* Energy + Thermal heroes open on the existing still (same split as Compute). */
.page-energy .side-hero__split,
.page-thermal .side-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
  gap: 1.5rem 2rem;
  align-items: center;
}
.page-energy .side-hero__copy,
.page-thermal .side-hero__copy { min-width: 0; }
.page-energy .side-hero__still,
.page-thermal .side-hero__still {
  margin: 0;
  max-width: none;
}
.page-energy .side-hero__still .viz-frame__shot,
.page-thermal .side-hero__still .viz-frame__shot {
  aspect-ratio: 3 / 2;
  max-height: min(42vh, 360px);
}
@media (max-width: 899px) {
  .page-energy .side-hero__split,
  .page-thermal .side-hero__split {
    grid-template-columns: 1fr;
  }
  .page-energy .side-hero__still,
  .page-thermal .side-hero__still { order: -1; }
}
@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .page-energy .side-hero__still .viz-frame__shot img,
  .page-thermal .side-hero__still .viz-frame__shot img {
    transform: none;
  }
}
@media print {
  .page-energy .side-hero__split,
  .page-thermal .side-hero__split { display: block; }
}

/* Flexibility H1 stays two clipped lines; each line nowrap ≥720. */
.page-flexibility .side-hero__title .clip { display: block; }
@media (min-width: 720px) {
  .page-flexibility .side-hero__title .clip-inner { white-space: nowrap; }
}

/* 720: kicker-as-eyebrow should not crowd the kept H1 + tagline. */
@media (max-width: 719px) {
  .hero__kicker,
  .hero.hero--fold .hero__kicker { margin: 0 0 0.4rem; }
  .hero.hero--fold .hero__tagline { margin-top: 0.35rem; }
}

/* BESS table: Compute column is the product, not a spreadsheet dump. */
.page-flexibility #bess .compare-table--paper tbody td:first-of-type {
  font-weight: 500;
  color: var(--c-forest-950);
}

/* ==========================================================================
   2026-09-01 pass 72 — copy + visual engagement
   Product-page craft: BESS table, side-hero jump, side-scan tiles, FAQ,
   footer mail. No new JS. No Ken Burns. No Approach redesign.
   Pass 63/64/66/67/68/69/70/71 locks held. Reduced-motion and <720: static.
   ========================================================================== */

/* 1. BESS table — product comparison, not a spreadsheet. Compute column wins. */
.page-flexibility #bess .flex-compare--paper {
  margin: 0 0 1.65rem;
  border: 1px solid var(--c-stone-300);
  background: var(--c-offwhite);
  overflow: hidden;
}
.page-flexibility #bess .table-wrap { margin: 0; }
.page-flexibility #bess .compare-table--paper {
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}
.page-flexibility #bess .compare-table--paper col.compare-col--key { width: 18%; }
.page-flexibility #bess .compare-table--paper col.compare-col--win { width: 46%; }
.page-flexibility #bess .compare-table--paper col.compare-col--alt { width: 36%; }
.page-flexibility #bess .compare-table--paper th,
.page-flexibility #bess .compare-table--paper td {
  padding: 0.95rem 1.15rem 0.95rem 1rem;
  vertical-align: top;
}
.page-flexibility #bess .compare-table--paper thead th {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}
.page-flexibility #bess .compare-table--paper thead th:nth-child(2) {
  background: rgba(176, 122, 68, 0.18);
  color: var(--c-timber-700);
  font-weight: 600;
}
.page-flexibility #bess .compare-table--paper tbody th {
  white-space: normal;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  width: auto;
  min-width: 0;
}
.page-flexibility #bess .compare-table--paper tbody td:first-of-type {
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--c-forest-950);
  background: rgba(176, 122, 68, 0.1);
  box-shadow: inset 4px 0 0 var(--c-timber-500);
  padding-left: 1.05rem;
}
.page-flexibility #bess .compare-table--paper tbody td:last-of-type {
  color: var(--c-ink-3);
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.4;
}
.page-flexibility #bess .flex-compare__note {
  margin: 0;
  padding: 0.85rem 1.15rem 0.95rem;
  background: rgba(176, 122, 68, 0.1);
  border-top: 1px solid var(--c-stone-300);
  color: var(--c-forest-950);
  font-size: 0.95rem;
  line-height: 1.45;
}
.page-flexibility #bess .flex-compare__note strong {
  font-weight: 600;
  color: var(--c-forest-950);
}
@media (max-width: 719px) {
  .page-flexibility #bess .flex-compare--paper {
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .page-flexibility #bess .compare-table--paper {
    table-layout: auto;
  }
  .page-flexibility #bess .compare-table--paper tbody tr {
    margin: 0 0 0.7rem;
    background: var(--c-offwhite);
    border: 1px solid var(--c-stone-300);
  }
  .page-flexibility #bess .compare-table--paper tbody th {
    padding: 0.85rem 1rem 0.2rem;
    background: transparent;
    box-shadow: none;
  }
  .page-flexibility #bess .compare-table--paper tbody td {
    padding: 0.4rem 1rem 0.75rem;
  }
  .page-flexibility #bess .compare-table--paper tbody td:first-of-type {
    box-shadow: inset 4px 0 0 var(--c-timber-500);
    background: rgba(176, 122, 68, 0.1);
    padding-left: 1rem;
  }
  .page-flexibility #bess .flex-compare__note {
    border: 1px solid var(--c-stone-300);
  }
}
@media print {
  .page-flexibility #bess .flex-compare--paper,
  .page-flexibility #bess .flex-compare__note,
  .page-flexibility #bess .compare-table--paper tbody td:first-of-type,
  .page-flexibility #bess .compare-table--paper thead th:nth-child(2) {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none;
  }
}

/* Home Flexbox / campus / battery — win column weight, destacked footnote. */
#flex-compare .compare-table col.compare-col--key { width: 16%; }
#flex-compare .compare-table col.compare-col--win { width: 32%; }
#flex-compare .compare-table col.compare-col--alt { width: 26%; }
#flex-compare .compare-table tbody td:first-of-type {
  font-weight: 500;
}
#flex-compare .flex-compare__note {
  font-size: 0.95rem;
  color: var(--c-on-dark-2);
}

/* 2. Side-hero jump: one compact chip strip, not a two-row TOC. */
@media (min-width: 900px) {
  .side-jump.side-jump--split {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 2rem;
    row-gap: 0.35rem;
    margin-top: 1.05rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--c-stone-300);
  }
  .side-jump--split .side-jump__group {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 0.4rem 0.75rem;
  }
  .side-jump--split .side-jump__label {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0.2rem 0 0;
  }
}
.page-flexibility .side-hero {
  padding-bottom: clamp(1.6rem, 3.2vw, 2.4rem);
}

/* 3. Side-scan tiles — numbered mid-folds read as product cards, not a brief. */
@media (min-width: 720px) {
  .side-scan {
    gap: 0.75rem 0.9rem;
    border-top: 0;
    padding-top: 0.2rem;
  }
  .side-scan > li {
    padding: 0.95rem 1rem 1.05rem;
    background: var(--c-paper);
    box-shadow: inset 0 2px 0 var(--c-timber-500);
  }
  .section--paper .side-scan > li,
  .section--side.section--paper .side-scan > li {
    background: var(--c-offwhite);
  }
  .js .side-scan { border-top-color: transparent; }
}
@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .side-scan > li { transition: none; }
}
@media print {
  .side-scan > li {
    background: #fff !important;
    box-shadow: none;
    color: #000;
  }
}

/* 4. FAQ accordion — open item is a product panel, not a document list. */
.faq__item summary:hover { color: var(--c-forest-800); }
.faq__item[open] {
  background: var(--c-paper);
  box-shadow: inset 3px 0 0 var(--c-timber-500);
}
.faq__item[open] summary {
  color: var(--c-forest-950);
  padding-left: 0.9rem;
}
.faq__item[open] p {
  padding-left: 0.9rem;
  font-size: 1.02rem;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .faq__item[open] { transition: none; }
}
@media print {
  .faq__item[open] {
    background: #fff !important;
    box-shadow: none;
    color: #000;
  }
}

/* 5. Footer mail is the contact — product size, not a caption. */
.site-footer__mail {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.site-footer__mail a { color: var(--c-on-dark); }

/* Flexibility #loop H2 couplet — two clips, nowrap ≥720. Home Loop H2 untouched. */
.page-flexibility #loop-title .clip { display: block; }
@media (min-width: 720px) {
  .page-flexibility #loop-title .clip-inner { white-space: nowrap; }
}


/* ==========================================================================
   2026-09-01 pass 73 — leftover destacks / 720 chip wrap
   Vanilla CSS. No new JS. No Ken Burns. No Approach redesign.
   Skip-link / print G1 / Loop nowrap / Flexibility H1 / FAQ / Two tracks held.
   Reduced-motion and <720: static (no new motion).
   ========================================================================== */

/* 720 chip wrap: hall spec chips were an implicit max-content column, centered.
   Stretch full width; 2-up from 720 (was 900). */
.section--dark .spec-chips {
  width: 100%;
  justify-content: stretch;
  justify-items: stretch;
}
@media (min-width: 720px) {
  .section--dark .spec-chips { grid-template-columns: 1fr 1fr; }
}

/* 720 jump: label sits with the chips, not a TOC row of its own.
   Groups stay stacked until 900 (pass 72 one-row). */
@media (min-width: 720px) {
  .side-jump--split .side-jump__label {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0.35rem 0 0;
  }
}

/* ==========================================================================
   2026-09-01 pass 76 — leftover destacks / live-swap gate complete
   Vanilla CSS. No new libraries. No Ken Burns. No Approach redesign.
   Reduced-motion and <720: static (no new motion).
   ========================================================================== */

/* Markets / queue / grade live lines still transition under reduced-motion.
   Heat/scale/viz-cap already gated. Complete the set so swap cannot flicker. */
@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .markets-live,
  .queue-live,
  .grade-live,
  .mode-pick__copy,
  [data-shell-cap],
  .stats-gloss {
    transition: none !important;
  }
  .markets-live.is-swap,
  .queue-live.is-swap,
  .grade-live.is-swap,
  .mode-pick__copy.is-swap,
  [data-shell-cap].is-swap,
  .stats-gloss.is-swap {
    opacity: 1;
  }
}

/* ==========================================================================
   2026-09-01 pass 77 — leftover destacks / FAQ open does not jump
   Vanilla CSS. No new libraries. No Ken Burns. No Approach redesign.
   Reduced-motion and <720: static (no new motion).
   ========================================================================== */

/* FAQ open panel: pad the item always so opening does not shove the summary
   0.9rem right. Timber inset stays on [open] only. */
.faq__item { padding-left: 0.9rem; }
.faq__item[open] summary,
.faq__item[open] p { padding-left: 0; }
@media print {
  .faq__item { padding-left: 0; }
}

/* ==========================================================================
   2026-09-01 pass 80 — Approach pin timing / credit fade / RM still gate
   Layout frozen: track 240vh, pin sticky, orbits, tick-dial radius, lerp 0.22.
   Title was gone at p=0.0625 before claim 0 at 0.08 (empty pin). Lead
   opacity 0.34s against 0.68s stills. Layer-0 still still transitioned
   under reduced-motion. No new JS libraries. No Ken Burns. No destack.
   Reduced-motion and <720: static (no new motion).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 720px) {
    /* Hold the H2 until claim 0 is on. *9 → gone at p≈0.11, overlapping 01. */
    .chapter__copy {
      opacity: clamp(0, calc(1 - var(--p) * 9), 1);
    }
    /* Tick leader fades with the still, not in half the time. */
    .tick-dial__lead {
      transition: transform var(--dur-cross) var(--ease), opacity var(--dur-cross) var(--ease);
    }
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .chapter .hero__still[data-layer="0"] {
    transition: none !important;
  }
}

/* ==========================================================================
   2026-09-01 pass 81 — leftover craft / RM rail / hall chips / hamburger
   Vanilla CSS. No new JS. No Ken Burns. No Approach redesign.
   FAQ 77 pad / Loop nowrap / Flex H1 / skip-link fixed 400 / pin gates held.
   Reduced-motion and <720: static (no new motion).
   ========================================================================== */

/* Eggs RM block hid the diamond rail. Pulse is already gated; the rail is nav. */
@media (min-width: 1100px) {
  .page-rail { display: flex; }
}

/* Skip lands on #main; a 3px ring around the whole page is not a target. */
#main:focus,
#main:focus-visible { outline: none; }

/* Hamburger 0.5s + hall-chapter color reintroduced after the early RM gate. */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bars span,
  .hall-chapters a {
    transition: none;
  }
}

/* Hall spec chips: 5th chip was a half-width orphan at 720.
   2-up + last spans on tablet; 5-across once the hall is wide. */
@media (min-width: 720px) {
  .section--dark .spec-chips { grid-template-columns: 1fr 1fr; }
  .section--dark .spec-chips > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .section--dark .spec-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .section--dark .spec-chips > :last-child { grid-column: auto; }
}

/* Footer mail: `overflow-wrap: anywhere` on all footer links could split the address. */
.site-footer__mail a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ==========================================================================
   2026-09-01 pass 82 — rail hits / hamburger 44 / First-fit destack
   Vanilla CSS. No new JS. No Ken Burns. No Approach redesign.
   FAQ 77 pad / Loop two clips nowrap ≥900 / Flex H1 / skip-link fixed 400 /
   pin gates from 80 / hall chips from 81 held.
   Reduced-motion and <720: static (no new motion).
   ========================================================================== */

/* Page-rail diamonds stay 8px. Hit was ~11px rotated (WCAG 2.5.8 is 24px).
   Gap 1rem so 24px circles centred on each box do not intersect. */
.page-rail { gap: 1rem; }
.page-rail a::after {
  content: "";
  position: absolute;
  inset: -10px;
}

/* Hamburger was 40px against 44px buttons. */
.nav-toggle { min-height: 44px; }

/* Eggs RM hide of the rail (pass 81 restored ≥1100). Keep it flex when the rail is on. */
@media (prefers-reduced-motion: reduce) and (min-width: 1100px) {
  .page-rail { display: flex; }
}

/* Text links already pick up the global 3px ring; keep it timber and unclipped. */
.text-link:focus-visible {
  outline: 3px solid var(--c-timber-500);
  outline-offset: 3px;
}
.nav-toggle:focus-visible {
  outline: 3px solid var(--c-timber-500);
  outline-offset: 3px;
}

@media print {
  .page-rail, .skip-link, .nav-toggle, .nav-pill { display: none !important; }
}

/* ==========================================================================
   2026-09-01 pass 83 — hover/active product feel / 900 craft / 404
   Vanilla CSS. No new JS libraries. No Ken Burns. No Approach redesign.
   FAQ 77 pad / Loop two clips nowrap ≥900 / Flex H1 / skip-link fixed 400 /
   pin gates from 80 / hall chips from 81 / rail hits from 82 held.
   Reduced-motion and <720: static (no new motion).
   ========================================================================== */

/* 1. Sticky nav: dark pill was 0.82 over the hero still — cream links washed.
   Light 0.88 kept. Timber CTA already forest-950 on timber-400 both themes. */
.nav-pill[data-on-dark] {
  background: rgba(13, 22, 18, 0.9);
  border-color: rgba(243, 239, 230, 0.28);
}

/* Desktop nav: timber underline on hover, same tell as aria-current. */
@media (min-width: 1200px) {
  .site-nav__list a:hover,
  .site-nav__list a:focus-visible {
    color: var(--c-ink);
    border-bottom-color: var(--c-timber-400);
    text-decoration: none;
  }
  .nav-pill[data-on-dark] .site-nav__list a:hover,
  .nav-pill[data-on-dark] .site-nav__list a:focus-visible {
    color: var(--c-on-dark);
    border-bottom-color: var(--c-timber-400);
  }
}

/* 900 hamburger drawer: base hover was ink on a forest-950 sheet (illegible). */
@media (max-width: 1199px) {
  .site-nav__list a:hover,
  .site-nav__list a:focus-visible {
    color: var(--c-on-dark);
    border-bottom-color: var(--c-timber-400);
  }
  .site-nav__list a[aria-current="true"],
  .site-nav__list a[aria-current="page"] {
    color: var(--c-timber-300);
  }
  .nav-toggle:hover {
    border-color: var(--c-timber-400);
    background: rgba(176, 122, 68, 0.14);
  }
  .nav-pill[data-on-dark] .nav-toggle:hover {
    border-color: var(--c-timber-300);
    background: rgba(176, 122, 68, 0.2);
  }
}

/* Page-rail: diamonds had focus, no hover. Last items stay 28px hits. */
@media (hover: hover) {
  .page-rail a:hover {
    background: var(--c-timber-400);
    transform: rotate(45deg) scale(1.2);
  }
  .page-rail a[aria-current="true"]:hover {
    background: var(--c-timber-500);
    transform: rotate(45deg) scale(1.35);
  }
}
.page-rail a:active {
  transform: rotate(45deg) scale(0.95);
  transition-duration: var(--dur-press);
}

/* FAQ: timber chevron on hover. Open pad from 77 held. */
.faq__item summary:hover { color: var(--c-forest-800); }
.faq__item summary:hover::after {
  border-right-color: var(--c-timber-500);
  border-bottom-color: var(--c-timber-500);
}

/* Scale / mode / tier: heat-pick already lifted 1px; these were :active only. */
@media (hover: hover) and (min-width: 720px) {
  .scale__stops button:hover,
  .mode-pick__stops button:hover,
  .tier-pick__stops button:hover,
  .shell-pick button:hover {
    transform: translateY(-1px);
    border-color: var(--c-timber-400);
  }
  .heat-pick__stops button:hover {
    border-color: var(--c-timber-400);
  }
}

/* Email Kelvin: press. Fill-slide hover already timber-300. */
.btn--cta:active,
.btn--accent.btn--cta:active {
  transform: translateY(1px);
  transition-duration: var(--dur-press);
}

/* For-you Prev/Next: 2.6rem was 41.6px against 44px buttons. */
.chapter-step .sq-btn,
.vertical-controls .sq-btn {
  min-height: 44px;
  min-width: 44px;
}

/* BESS: win-cell reads on row hover (paper table). Couplet / €200–500k untouched. */
@media (hover: hover) and (min-width: 720px) {
  .page-flexibility #bess .compare-table--paper tbody tr:hover td:first-of-type,
  .page-flexibility #bess .compare-table--paper tbody tr:focus-within td:first-of-type {
    background: rgba(176, 122, 68, 0.2);
  }
}

/* 2. 900px — hall chips were 2-up + spanning 5th (sparse). 3+2 until 1100 five-across.
   720 last-full-width and 1280 five-across from 81 held. */
@media (min-width: 900px) and (max-width: 1099px) {
  .section--dark .spec-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .section--dark .spec-chips > :last-child { grid-column: auto; }
}

/* For-you chips at 900–1099 were 0.55rem. Product chips, not micro-labels. */
@media (min-width: 900px) and (max-width: 1099px) {
  .vertical-groups--split .vertical-index button,
  .vertical-groups--split .vertical-index button[aria-pressed="true"],
  .vertical-groups--split .vertical-index button[aria-pressed="false"] {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    min-height: 44px;
    padding: 0.35rem 0.15rem;
  }
  .vertical__cap {
    max-width: min(28rem, calc(100% - 2 * var(--gutter)));
    color: var(--c-on-dark);
    text-shadow: 0 1px 14px rgba(8, 16, 13, 0.85), 0 0 2px rgba(8, 16, 13, 0.9);
  }
}

/* Side-hero jump chips: keep one row wrapping with 44px hits at the 900 split. */
@media (min-width: 900px) and (max-width: 1099px) {
  .side-jump--split .side-jump__group a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* BESS at 900: three columns stay; padding was 1.15rem in ~840px. */
@media (max-width: 900px) {
  .page-flexibility #bess .compare-table--paper th,
  .page-flexibility #bess .compare-table--paper td {
    padding: 0.7rem 0.65rem;
  }
}

/* 3. Side-hero stills: object-fit on the img, not the shot box (no-op on a div). */
.page-compute .side-hero__still .viz-frame__shot img,
.page-energy .side-hero__still .viz-frame__shot img,
.page-thermal .side-hero__still .viz-frame__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.side-hero .viz-cap {
  color: var(--c-ink-2);
}
.side-hero .viz-cap__kind {
  color: var(--c-timber-600);
}

/* For-you overlay caption on the photo — cream, not on-dark-3 grey. */
.vertical__cap {
  color: var(--c-on-dark);
  text-shadow: 0 1px 12px rgba(8, 16, 13, 0.8), 0 0 2px rgba(8, 16, 13, 0.85);
}

/* 4. Print: G1 unsquashed light mark; dark acts print as ink on paper. */
@media print {
  .brand__mark {
    height: 28px !important;
    width: auto !important;
    aspect-ratio: 87.233 / 100 !important;
  }
  .hero,
  .hero.hero--fold,
  .section--dark,
  .section--verticals,
  .side-hero,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
  .hero__title,
  .hero__tagline,
  .hero__kicker,
  .section--dark .section__title,
  .section--dark .section__lead,
  .section--dark p,
  .side-hero__title,
  .site-footer,
  .site-footer * {
    color: #000 !important;
  }
  .hero__scrim,
  .hero__grain,
  .flex-hotspots,
  .page-progress {
    display: none !important;
  }
}

/* 5. 404 — same chrome, no Contact band, locked footer. */
.page-404 .side-hero {
  min-height: min(62vh, 560px);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.page-404 .side-hero__title { max-width: 14ch; }
.page-404 .cta-row { margin-top: 1.35rem; gap: 0.75rem; }

@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .page-rail a:hover,
  .page-rail a:active {
    transform: rotate(45deg);
  }
  .page-rail a[aria-current="true"]:hover {
    transform: rotate(45deg) scale(1.35);
  }
  .scale__stops button:hover,
  .mode-pick__stops button:hover,
  .tier-pick__stops button:hover,
  .shell-pick button:hover,
  .heat-pick__stops button:hover,
  .btn--cta:active,
  .btn--accent.btn--cta:active {
    transform: none;
  }
}

/* Hamburger drawer was under the overlay: overlay z-48 vs .nav-pill z-auto
   inside the header stacking context, so the sheet ate pointer events. */
@media (max-width: 1199px) {
  .nav-overlay { z-index: 1; }
  .nav-pill { z-index: 2; }
}

/* ==========================================================================
   2026-09-01 pass 84 — leftover hover holes 83 missed / dead #copy-email
   Vanilla CSS. No new JS libraries. No Ken Burns. No Approach redesign.
   FAQ 77 pad / Loop two clips nowrap ≥900 / Flex H1 / skip-link fixed 400 /
   pin gates from 80 / hall chips from 81 / rail hits from 82 / overlay z from 83 held.
   Reduced-motion and <720: no new motion (colour + timber underline only).
   ========================================================================== */

/* For-you chips: 83 lifted 44px at 900; unpressed still had no hover tell.
   Pressed stays timber-300. Hover is cream + timber underline (same as nav). */
@media (hover: hover) {
  .vertical-groups--split .vertical-index button:hover {
    color: var(--c-on-dark);
    border-bottom-color: var(--c-timber-400);
  }
  .vertical-groups--split .vertical-index button[aria-pressed="true"]:hover {
    color: var(--c-timber-300);
    border-bottom-color: var(--c-timber-400);
  }
}

/* Hall chapters: colour hover existed; current already timber-underlined.
   Hover now gets the same timber tell 83 gave desktop nav. */
@media (hover: hover) {
  .hall-chapters a:hover {
    color: var(--c-on-dark);
    border-bottom-color: var(--c-timber-400);
    text-decoration: none;
  }
}

/* ==========================================================================
   2026-09-01 pass 85 — Compute as product: workloads scan, Holds fold
   Pass 87: paper tiles + Energy destacked-H2 size on Energy / Flexibility / Thermal
   holds-scan. Home holds-scan layout still untouched.
   Vanilla CSS. Forest / timber. No orange. No Ken Burns. No new JS libraries.
   Reduced-motion and <720: static (colour/underline only; no new motion).
   Eggs/classic frozen.
   ========================================================================== */

#workloads { scroll-margin-top: 5.75rem; }

.page-compute .holds-scan h2,
.page-energy .holds-scan h2 {
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--c-ink);
  margin: 0 0 0.35rem;
  max-width: none;
}

/* Sovereign is a Holds card now, not a bordered inner article. */
.page-compute #sovereign {
  margin-top: 0;
  border-top: 0;
  padding: 0.95rem 1rem 1.15rem;
}
.page-compute #sovereign h3 {
  margin: 0 0 0.35rem;
}

/* Workloads / Holds on Compute: paper cards, same family as side-scan tiles. */
@media (min-width: 720px) {
  .page-compute .holds-scan,
  .page-energy .holds-scan,
  .page-flexibility .holds-scan,
  .page-thermal .holds-scan {
    gap: 0.75rem 0.9rem;
    padding-top: 0.2rem;
    border-top: 0;
    border-bottom: 0;
  }
  .page-compute .holds-scan > li,
  .page-energy .holds-scan > li,
  .page-flexibility .holds-scan > li,
  .page-thermal .holds-scan > li {
    padding: 0.95rem 1rem 1.15rem;
    background: var(--c-paper);
    box-shadow: inset 0 2px 0 var(--c-timber-500);
  }
  .page-compute .section--paper .holds-scan > li,
  .page-energy .section--paper .holds-scan > li,
  .page-flexibility .section--paper .holds-scan > li,
  .page-thermal .section--paper .holds-scan > li {
    background: var(--c-offwhite);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (min-width: 720px) {
    .page-compute .holds-scan > li,
    .page-energy .holds-scan > li,
    .page-flexibility .holds-scan > li,
    .page-thermal .holds-scan > li {
      transition: transform var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease);
    }
    .page-compute .holds-scan > li:hover,
    .page-energy .holds-scan > li:hover,
    .page-flexibility .holds-scan > li:hover,
    .page-thermal .holds-scan > li:hover,
    .page-compute .holds-scan > li:focus-within,
    .page-energy .holds-scan > li:focus-within,
    .page-flexibility .holds-scan > li:focus-within,
    .page-thermal .holds-scan > li:focus-within {
      transform: translateY(-2px);
      box-shadow: 0 1px 0 var(--c-timber-500);
    }
  }
}
@media (prefers-reduced-motion: reduce), (max-width: 719px) {
  .page-compute .holds-scan > li,
  .page-energy .holds-scan > li,
  .page-flexibility .holds-scan > li,
  .page-thermal .holds-scan > li {
    transition: none;
  }
  .page-compute .holds-scan > li:hover,
  .page-energy .holds-scan > li:hover,
  .page-flexibility .holds-scan > li:hover,
  .page-thermal .holds-scan > li:hover,
  .page-compute .holds-scan > li:focus-within,
  .page-energy .holds-scan > li:focus-within,
  .page-flexibility .holds-scan > li:focus-within,
  .page-thermal .holds-scan > li:focus-within {
    transform: none;
    box-shadow: none;
  }
}

@media print {
  .page-compute .holds-scan > li,
  .page-energy .holds-scan > li,
  .page-flexibility .holds-scan > li,
  .page-thermal .holds-scan > li {
    background: #fff !important;
    box-shadow: none;
    color: #000;
  }
  .page-compute .holds-scan h2,
  .page-energy .holds-scan h2 { color: #000; }
}

/* ==========================================================================
   2026-09-01 pass 88 — more use-cases / qualifiers on existing holds-scan.
   Grid stays 3-col / 2-col / 1-col (no 4-across). Paper tiles still product
   pages only (Compute / Energy / Flexibility / Thermal). Home #holds remains
   the document scan. Stagger delays 7–8 above. Eggs/classic frozen.
   ========================================================================== */