/* ============================================================
   Co-Bot — cinematic one-pager
   Type: Clash Display (display) · Satoshi (body) · system mono (HUD)
   The WebGL hero owns its own grade (bloom/grain/vignette in-shader);
   this sheet owns layout, typography, and the DOM grade.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #050607;
  --ink: #f4f6f0;
  --muted: #9aa6a0;
  --soft: #cfd8d2;
  --line: rgba(244, 246, 240, 0.14);
  --accent: #01a2f6;
  --font-display: "Clash Display", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Satoshi", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --pad-x: max(24px, calc((100vw - 1240px) / 2));
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  overflow-x: clip;
  scrollbar-color: rgba(244, 246, 240, 0.25) #0a0c0d;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: #0a0c0d;
}

::-webkit-scrollbar-thumb {
  background: rgba(244, 246, 240, 0.22);
  border-radius: 99px;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}

body[data-loading] {
  overflow: hidden;
}

::selection {
  color: #07100b;
  background: var(--accent);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- split-text plumbing ---------- */
.split-word {
  display: inline-block;
  white-space: nowrap;
}

.split-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}

.split-inner {
  display: inline-block;
  will-change: transform;
}

/* ============================================================
   PAGE CHROME
   ============================================================ */

.grain {
  position: fixed;
  inset: -60%;
  z-index: 200;
  pointer-events: none;
  width: 220%;
  height: 220%;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain-jump 1.1s steps(1) infinite;
}

@keyframes grain-jump {
  0% { transform: translate(0, 0); }
  13% { transform: translate(-3%, -5%); }
  26% { transform: translate(4%, -2%); }
  39% { transform: translate(-2%, 4%); }
  52% { transform: translate(5%, 3%); }
  65% { transform: translate(-5%, 1%); }
  78% { transform: translate(2%, -4%); }
  91% { transform: translate(-1%, 2%); }
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 140;
  height: 2px;
  pointer-events: none;
}

.progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #2df4cf);
  transform: scaleX(0);
  transform-origin: left center;
}

.cursor-light {
  position: fixed;
  left: -13px;
  top: -13px;
  z-index: 220;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(244, 246, 240, 0.75);
  border-radius: 999px;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: width 200ms var(--ease-expo), height 200ms var(--ease-expo),
    margin 200ms var(--ease-expo), border-color 200ms ease, opacity 200ms ease;
}

.cursor-light.is-on {
  opacity: 1;
}

.cursor-light.is-hot {
  width: 54px;
  height: 54px;
  margin: -14px 0 0 -14px;
  border-color: var(--accent);
}

/* ============================================================
   PRELOADER
   ============================================================ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.preloader-shutter {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.25%;
  background: #07090a;
}

.preloader-shutter--top {
  top: 0;
  border-bottom: 1px solid rgba(244, 246, 240, 0.06);
}

.preloader-shutter--bottom {
  bottom: 0;
}

.preloader-core {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(1.4rem, 4vw, 3rem);
}

.preloader-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.preloader-label span {
  color: var(--accent);
}

.preloader-count {
  position: absolute;
  left: clamp(1.4rem, 4vw, 3rem);
  bottom: clamp(2.6rem, 7vh, 4.6rem);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4.6rem, 14vw, 11rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.preloader-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4.4vh, 2.6rem);
  height: 1px;
  margin-inline: clamp(1.4rem, 4vw, 3rem);
  background: rgba(244, 246, 240, 0.12);
}

.preloader-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
}

.preloader-status {
  position: absolute;
  right: clamp(1.4rem, 4vw, 3rem);
  bottom: clamp(2.6rem, 7vh, 4.6rem);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

body.no-motion .preloader {
  display: none;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem var(--pad-x) 1.5rem;
  background: linear-gradient(180deg, rgba(5, 6, 7, 0.82), rgba(5, 6, 7, 0.35) 64%, transparent);
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #07100b;
  background: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  transition: background 300ms ease;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.site-header nav {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.2rem);
}

.site-header nav a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 200ms ease;
}

.site-header nav a i {
  margin-right: 0.45em;
  font-style: normal;
  color: var(--accent);
  opacity: 0.55;
  transition: opacity 200ms ease;
}

.site-header nav a.is-active,
.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: var(--ink);
}

.site-header nav a.is-active i {
  opacity: 1;
}

.demo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  color: #07100b;
  background: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform 250ms var(--ease-expo), background 250ms ease;
}

.demo-link:hover,
.demo-link:focus-visible {
  transform: translateY(-2px);
  background: var(--accent);
}

/* ============================================================
   HERO — the film
   ============================================================ */

.hero {
  position: relative;
  height: 850vh;
  height: 850svh;
  background: var(--bg);
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background:
    radial-gradient(circle at 50% 64%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 36rem),
    var(--bg);
}

.hero-fallback img {
  width: min(480px, 70vw);
  filter: drop-shadow(0 50px 50px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 38px color-mix(in srgb, var(--accent) 24%, transparent));
}

body.no-webgl .hero-canvas {
  display: none;
}

body.no-webgl .hero-fallback {
  display: grid;
}

/* --- act 0: title --- */
.hero-intro {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  pointer-events: none;
  padding: 0 16px;
}

.hero-kicker {
  color: var(--accent);
  margin-bottom: clamp(1rem, 2.6vh, 1.8rem);
}

.hero-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4.6rem, 16.5vw, 15rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
}

.hero-tagline {
  margin-top: clamp(1rem, 2.6vh, 1.7rem);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--soft);
}

.hero-scrollcue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.6rem, 5vh, 3rem);
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  transform: translateX(-50%);
  color: var(--muted);
  pointer-events: none;
}

.scrollcue-line {
  position: relative;
  width: 1px;
  height: 52px;
  overflow: hidden;
  background: rgba(244, 246, 240, 0.14);
}

.scrollcue-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--accent));
  animation: cue-drop 2.1s var(--ease-expo) infinite;
}

@keyframes cue-drop {
  0% { transform: translateY(0); }
  62%, 100% { transform: translateY(200%); }
}

/* --- acts 1–4: beats --- */
.beat {
  position: absolute;
  z-index: 5;
  max-width: min(33rem, 40vw);
  pointer-events: none;
}

/* soft scrim so copy survives bright pixels behind it */
.beat--left::before,
.beat--right::before {
  content: "";
  position: absolute;
  inset: -22% -16%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(5, 6, 7, 0.62), transparent);
  filter: blur(6px);
}

.beat--left {
  left: clamp(1.4rem, 7vw, 8rem);
  top: 50%;
  transform: translateY(-50%);
}

.beat--right {
  right: clamp(1.4rem, 7vw, 8rem);
  top: 50%;
  transform: translateY(-50%);
}

.beat--center {
  left: 50%;
  bottom: clamp(3rem, 11svh, 7rem);
  transform: translateX(-50%);
  max-width: min(44rem, 88vw);
  text-align: center;
}

.beat-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

.beat--center .beat-meta {
  justify-content: center;
}

.beat-meta span {
  display: inline-grid;
  place-items: center;
  padding: 0.22rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 4px;
}

.beat-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 4.6vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.beat-copy {
  margin-top: 1.2rem;
  max-width: 29rem;
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  line-height: 1.7;
  color: var(--soft);
}

.beat--center .beat-copy {
  margin-inline: auto;
}

.beat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: var(--ink);
}

.beat--center .beat-chips {
  justify-content: center;
}

.beat-chips li {
  padding: 0.52rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(5, 6, 7, 0.55);
  backdrop-filter: blur(10px);
}

.beat-cue {
  margin-top: 1.7rem;
  color: var(--accent);
}

.beat-cue::after {
  content: " ↓";
}

/* --- HUD --- */
.hero-hud {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 1.5rem;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  pointer-events: none;
}

.hud-readout {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.hud-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  animation: hud-pulse 2.2s ease-out infinite;
}

@keyframes hud-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

/* --- LiDAR aperture portal (hero → scrubber) ---
   A dark-teal iris with concentric scan rings + a thin glowing leading edge.
   Sized by --iris (a length): grows from the sensor point to fill the screen
   on the hero's last frame, then contracts away into the airport scene. The
   centre stays dark, so it reads as diving through an aperture — not a flash. */
/* a brief dark-teal dip that bridges the hero cleanup into the next section
   (the robot-sweeps-the-hero choreography is the real transition) */
.warp-iris {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 45%, #062a1e 0%, #04120d 70%, #030b08 100%);
}

/* ============================================================
   CHAPTERS 02–04
   ============================================================ */

/* Dwell. 340vh looked generous but wasn't: the -100vh overlap plus the entrance
   and exit transitions left only ~140vh actually settled and readable — less
   than ONE hero beat gets (the hero spends 850vh on four). The entrance
   timelines are viewport-relative (+=68%, +=110%), so they don't grow with this
   number: raising the height buys settled reading time almost 1:1. */
.chapter {
  position: relative;
  height: 680vh;
  height: 680svh;
  background: var(--bg);
}

/* stacked-cover transitions: each later section overlaps the previous and
   paints over it (negative margin = overlap, z-index = paint order) so the
   incoming section can slide / zoom over the one that stays pinned behind it */
.hero {
  z-index: 1;
}

/* paint order comes from build.py (--z), so re-ordering products.json can't
   scramble the stack the way hardcoded ids did */
.chapter {
  z-index: var(--z, 2);
}

/* "cover" sections must be TRANSPARENT — otherwise their own dark background
   paints over the still-pinned section behind them during the overlap, which
   showed up as a black band. "zoom" deliberately keeps its dark background:
   that black panel rising IS the "scroll into black" before the zoom. */
.chapter[data-entrance="cover"] {
  margin-top: -100vh;
  margin-top: -100svh;
  background: transparent;
}

.chapter[data-entrance="zoom"] {
  margin-top: -100vh;
  margin-top: -100svh;
}

.finale {
  position: relative;
  z-index: 20;
}

/* the "vertical line" that opens section 2 — a sibling of the (clipped) stage
   so the stage's clip-path doesn't hide it; sticky so it holds at viewport
   centre while the section is pinned */
.reveal-line {
  position: sticky;
  top: 10vh;
  top: 10svh;
  z-index: 11;
  display: block;
  width: 2px;
  height: 80vh;
  height: 80svh;
  margin-inline: auto;
  transform: scaleY(0);
  transform-origin: 50% 50%;
  background: linear-gradient(180deg, transparent, var(--accent) 14%, var(--accent) 86%, transparent);
  box-shadow: 0 0 24px 3px color-mix(in srgb, var(--accent) 75%, transparent);
  opacity: 0;
  pointer-events: none;
}

/* The seam-bridging survey line. FIXED, not sticky: it must hold steady in
   the viewport across the hero's emptied last screen AND the first chapter's
   opening — a span no single section owns. Scroll-driven from script.js. */
.handoff-line {
  position: fixed;
  top: 10vh;
  top: 10svh;
  left: 50%;
  z-index: 15;
  width: 2px;
  height: 80vh;
  height: 80svh;
  margin-left: -1px;
  transform: scaleY(0);
  transform-origin: 50% 50%;
  background: linear-gradient(180deg, transparent, #01a2f6 14%, #01a2f6 86%, transparent);
  box-shadow: 0 0 24px 3px rgba(1, 162, 246, 0.75);
  opacity: 0;
  pointer-events: none;
}

.chapter-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.chapter-bg {
  position: absolute;
  inset: -3%;
  z-index: 1;
  background-image: var(--scene);
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) contrast(1.05);
}

.chapter-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(5, 6, 7, 0.9), rgba(5, 6, 7, 0.34) 52%, rgba(5, 6, 7, 0.14)),
    linear-gradient(180deg, rgba(5, 6, 7, 0.5), transparent 34%, rgba(5, 6, 7, 0.8));
}

.chapter-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 70% 40%,
    color-mix(in srgb, var(--accent) 9%, transparent),
    transparent 26rem
  );
  mix-blend-mode: screen;
}

.chapter--flip .chapter-veil {
  background:
    linear-gradient(270deg, rgba(5, 6, 7, 0.9), rgba(5, 6, 7, 0.34) 52%, rgba(5, 6, 7, 0.14)),
    linear-gradient(180deg, rgba(5, 6, 7, 0.5), transparent 34%, rgba(5, 6, 7, 0.8));
}

.chapter-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1.08fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 4rem);
  height: 100%;
  padding: 6.5rem var(--pad-x) 3.5rem;
}

.chapter--flip .chapter-copy {
  order: 2;
}

.chapter--flip .chapter-visual {
  order: 1;
}

.chapter-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

.chapter-meta span {
  display: inline-grid;
  place-items: center;
  padding: 0.22rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 4px;
}

.chapter-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.2rem, 8.5vw, 7.5rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
}

.chapter-lede {
  margin-top: 1.4rem;
  max-width: 33rem;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.72;
  color: var(--soft);
}

.chapter-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
  color: var(--muted);
}

.chapter-stats li {
  display: grid;
  gap: 0.18rem;
  min-width: 120px;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(5, 6, 7, 0.5);
  backdrop-filter: blur(12px);
}

.chapter-stats strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.chapter-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(78vh, 640px);
  perspective: 1100px;
}

/* always opaque — the canvas content is transparent (alpha renderer) and the
   robot sits off-screen until it drives in, so there's nothing to fade. A fade
   here would "materialise" the robot over the photo when the model loads late. */
.chapter-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}

.chapter-visual.is-3d-ready .visual-ring,
.chapter-visual.is-3d-ready .chapter-render {
  opacity: 0;
}

.visual-ring {
  position: absolute;
  width: min(560px, 86%);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 50%;
  transform: rotateX(72deg) rotateZ(0deg);
  transition: opacity 500ms ease;
  animation: ring-spin 30s linear infinite;
}

.visual-ring::after {
  content: "";
  position: absolute;
  inset: -14%;
  border: 1px solid rgba(244, 246, 240, 0.1);
  border-radius: 50%;
}

@keyframes ring-spin {
  to { transform: rotateX(72deg) rotateZ(360deg); }
}

.chapter-render {
  position: relative;
  z-index: 2;
  width: min(520px, 84%);
  max-height: 62vh;
  max-height: 62svh;
  object-fit: contain;
  filter: drop-shadow(0 44px 44px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 34px color-mix(in srgb, var(--accent) 20%, transparent));
  transition: opacity 500ms ease;
}

/* ============================================================
   FINALE
   ============================================================ */

.finale {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 8rem 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 36%, rgba(45, 244, 207, 0.12), transparent 26rem),
    radial-gradient(circle at 24% 70%, rgba(255, 184, 77, 0.1), transparent 24rem),
    var(--bg);
}

.finale-marquee {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(5rem, 17vw, 15rem);
  letter-spacing: 0;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 246, 240, 0.07);
}

.marquee-track {
  display: inline-flex;
  animation: marquee 46s linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.finale-core {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(900px, 100%);
  text-align: center;
}

.finale-core .chapter-meta {
  justify-content: center;
}

.finale-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.7rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.finale-lede {
  margin-top: 1.5rem;
  max-width: 36rem;
  color: var(--soft);
  line-height: 1.72;
}

.finale-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2.6rem;
}

.demo-link--large {
  min-height: 52px;
  padding: 0.85rem 1.8rem;
  font-size: 1rem;
}

.ghost-link {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.3rem;
  transition: color 200ms ease, border-color 200ms ease;
}

.ghost-link:hover,
.ghost-link:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================================
   NO-MOTION FAILSAFE (scripts blocked / CDN down)
   ============================================================ */

body.no-motion .beat,
body.no-motion .hero-intro,
body.no-motion .site-header,
body.no-motion .hero-scrollcue,
body.no-motion .hero-hud {
  opacity: 1 !important;
  visibility: visible !important;
}

body.no-motion .beat {
  position: relative;
  inset: auto;
  transform: none;
  max-width: 36rem;
  margin: 3rem auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1060px) {
  .chapter-inner {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.2rem;
    padding-top: 6rem;
  }

  .chapter--flip .chapter-copy {
    order: 1;
  }

  .chapter--flip .chapter-visual {
    order: 2;
  }

  .chapter-visual {
    min-height: 300px;
  }

  .chapter-render {
    max-height: 38vh;
    max-height: 38svh;
  }

  .beat {
    max-width: min(34rem, 62vw);
  }
}

@media (max-width: 720px) {
  .cursor-light {
    display: none;
  }

  .site-header {
    padding: 0.9rem 16px 1.2rem;
  }

  .site-header nav {
    gap: 0.9rem;
  }

  .site-header nav a {
    font-size: 0;
  }

  .site-header nav a i {
    font-size: 0.7rem;
    margin: 0;
  }

  .brand-name {
    display: none;
  }

  .demo-link {
    min-height: 36px;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
  }

  .hero-wordmark {
    font-size: clamp(3.4rem, 21vw, 6.4rem);
  }

  .beat,
  .beat--left,
  .beat--right,
  .beat--center {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 9svh;
    transform: none;
    max-width: none;
    text-align: left;
  }

  .beat--center .beat-meta,
  .beat--center .beat-chips {
    justify-content: flex-start;
  }

  .beat--center .beat-copy {
    margin-inline: 0;
  }

  .beat-line {
    font-size: clamp(1.9rem, 8.6vw, 2.6rem);
  }

  .beat-copy {
    font-size: 0.94rem;
    line-height: 1.62;
  }

  .hero-hud {
    display: none;
  }

  .preloader-count {
    font-size: clamp(4rem, 22vw, 7rem);
  }

  .chapter-inner {
    padding-inline: 16px;
  }

  .chapter-stats li {
    min-width: calc(50% - 0.3rem);
  }

  .finale-actions {
    flex-direction: column;
    gap: 1.1rem;
  }
}

@media (hover: none) {
  .cursor-light {
    display: none;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .grain,
  .scrollcue-line::before,
  .hud-dot,
  .visual-ring,
  .marquee-track {
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------------- chapter film (scroll-scrubbed) ---------------- */
/* Sits exactly where .chapter-bg sits, over the CSS photo. The photo stays
   underneath as the never-black fallback while the film loads or if it fails. */
/* Exactly 100%, not 106%. The oversize was copied from .chapter-bg, which needs
   the extra so it has room to parallax — the film does not parallax, so all the
   oversize did was crop 6% off every shot for nothing. Every film is 16:9, so at
   100% on a 16:9 viewport the whole frame is visible. Any further movement is
   done with a transform (see script.js), which scales from the centre and can be
   eased, rather than being baked into the layout. */
.chapter-film {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.05);
  opacity: 0;
  transition: opacity 520ms ease;
  pointer-events: none;
  will-change: transform;
}

.chapter.is-film-ready .chapter-film { opacity: 1; }

/* film chapters carry the product in-frame, so the copy gets a single column
   with room to breathe instead of sharing the grid with a render panel */
.chapter--film .chapter-inner {
  grid-template-columns: minmax(0, 52ch);
  align-content: center;
}

.chapter--film.chapter--flip .chapter-inner {
  justify-content: end;
  text-align: right;
}

.chapter--film.chapter--flip .chapter-meta { justify-content: flex-end; }
.chapter--film.chapter--flip .chapter-stats { justify-content: flex-end; }

@media (max-width: 860px) {
  .chapter--film .chapter-inner,
  .chapter--film.chapter--flip .chapter-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
    text-align: left;
  }
  .chapter--film.chapter--flip .chapter-meta,
  .chapter--film.chapter--flip .chapter-stats { justify-content: flex-start; }
}

/* brand lockup — the real i-cobots wordmark replaces the mark+text placeholder */
.brand-logo {
  display: block;
  width: clamp(104px, 9vw, 136px);
  height: auto;
}

/* supporting detail under the stat chips — the "why it matters" line */
.chapter-note {
  margin-top: 1.35rem;
  max-width: 46ch;
  font-size: 0.92rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 62%, transparent);
}

.chapter--flip .chapter-note { margin-left: auto; }

@media (max-width: 860px) {
  .chapter-note { font-size: 0.86rem; }
  .chapter--flip .chapter-note { margin-left: 0; }
}

/* three chips always sit as one row on film chapters — ragged wrapping made the
   right-aligned (flip) sections look accidental */
.chapter--film .chapter-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.chapter--film .chapter-stats li { min-width: 0; }

@media (max-width: 700px) {
  .chapter--film .chapter-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- film chapters on narrow screens ----
   A 16:9 film in a portrait viewport gets centre-cropped hard, and centred copy
   then sits straight on top of the machine. Push the copy to the bottom third
   and weight the scrim to match, so the upper half stays clean film. */
@media (max-width: 700px) {
  .chapter--film .chapter-inner,
  .chapter--film.chapter--flip .chapter-inner {
    align-content: end;
    padding-bottom: 5rem;
  }

  .chapter--film .chapter-veil,
  .chapter--film.chapter--flip .chapter-veil {
    background: linear-gradient(
      180deg,
      rgba(5, 6, 7, 0.42) 0%,
      rgba(5, 6, 7, 0.12) 26%,
      rgba(5, 6, 7, 0.82) 62%,
      rgba(5, 6, 7, 0.95) 100%
    );
  }

  /* bias the crop upward so the machine sits in the visible band, not under
     the copy */
  .chapter-film { object-position: 50% 34%; }

  .chapter--film .chapter-note { display: none; } /* spec chips carry it on mobile */
}

/* ---------------- brochure specs ---------------- */

.spec-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.62rem 1.15rem 0.62rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, rgba(5, 6, 7, 0.5));
  color: var(--ink, #f4f6f0);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.spec-toggle:hover {
  background: color-mix(in srgb, var(--accent) 20%, rgba(5, 6, 7, 0.5));
  border-color: var(--accent);
}

.spec-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* a "+" drawn from two bars so it can rotate into an "x" when open */
.spec-toggle-mark {
  position: relative;
  width: 11px;
  height: 11px;
  flex: none;
}
.spec-toggle-mark::before,
.spec-toggle-mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--accent);
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.spec-toggle-mark::after { transform: rotate(90deg); }
.spec-toggle[aria-expanded="true"] .spec-toggle-mark::before { transform: rotate(135deg); }
.spec-toggle[aria-expanded="true"] .spec-toggle-mark::after { transform: rotate(45deg); }

/* The panel sits INSIDE .chapter-stage and above .chapter-inner, so opening it
   changes nothing about document flow — the sticky stages and their stacked
   overlap transitions stay exactly as they were. */
.spec-panel {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 5.5rem var(--pad-x) 3rem;
  background: rgba(4, 6, 8, 0.9);
  backdrop-filter: blur(18px) saturate(0.9);
  opacity: 0;
  transition: opacity 300ms ease;
}

.spec-panel[hidden] { display: none; }
.spec-panel.is-open { opacity: 1; }

.spec-panel-inner {
  width: min(100%, 62rem);
  max-height: 100%;
  overflow-y: auto;
  transform: translateY(14px);
  transition: transform 380ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.spec-panel.is-open .spec-panel-inner { transform: none; }

.spec-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(244, 246, 240, 0.14);
}

.spec-panel-head p {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.spec-close {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244, 246, 240, 0.2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink, #f4f6f0);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.spec-close:hover { background: rgba(244, 246, 240, 0.1); border-color: var(--accent); }
.spec-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 2.6rem;
}

.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.72rem 0;
  border-bottom: 1px solid rgba(244, 246, 240, 0.08);
}

.spec-row dt {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 55%, transparent);
}

.spec-row dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink, #f4f6f0);
}

.spec-source {
  margin-top: 1.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 34%, transparent);
}

@media (max-width: 860px) {
  .spec-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spec-panel { padding: 4.5rem 1.25rem 2rem; }
  .spec-row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.6rem 0; }
}

/* ================= substance sections (post-film) ================= */
/* These are ordinary flow sections — deliberately NOT sticky. The film is the
   pitch; everything below it is for someone who has decided to evaluate, and
   that reader wants to scroll normally and scan. */

.slab {
  position: relative;
  z-index: 21;
  background: var(--bg);
  padding: clamp(5rem, 11vh, 8.5rem) var(--pad-x);
  border-top: 1px solid rgba(244, 246, 240, 0.08);
}

.slab-inner { width: min(100%, 74rem); margin-inline: auto; }

.slab-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}

.slab-lede {
  max-width: 54ch;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 72%, transparent);
}

.slab-foot {
  margin-top: 2.6rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 34%, transparent);
}

/* ---- resource-use pillars ---- */
.slab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  margin-top: 3.4rem;
  background: rgba(244, 246, 240, 0.09);
  border: 1px solid rgba(244, 246, 240, 0.09);
}

.pillar { background: var(--bg); padding: 2.1rem 1.7rem 2.3rem; }

.pillar-figure {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.7vw, 2.3rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 1rem;
}

.pillar h3 {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.6rem;
}

.pillar p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 62%, transparent);
}

/* ---- workstation vs charging station ---- */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.2rem;
  margin-top: 3.4rem;
}

.compare-card {
  padding: 2.2rem 2rem 2.4rem;
  border: 1px solid rgba(244, 246, 240, 0.12);
  border-radius: 14px;
  background: rgba(244, 246, 240, 0.02);
}

/* the workstation is the one that actually removes labour — say so visually */
.compare-card--lead {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, rgba(244, 246, 240, 0.02));
}

.compare-tag {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.compare-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  margin-bottom: 0.85rem;
}

.compare-card h3 em { font-style: italic; color: var(--accent); }

.compare-card > p {
  font-size: 0.9rem;
  line-height: 1.62;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 66%, transparent);
}

.compare-list { margin-top: 1.6rem; border-top: 1px solid rgba(244, 246, 240, 0.1); }

.compare-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(244, 246, 240, 0.07);
  font-size: 0.85rem;
}

.compare-list strong { font-weight: 600; }

.compare-list span {
  font-size: 0.76rem;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 52%, transparent);
  text-align: right;
}

/* ---- demo form ---- */
.demo-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.6rem;
  margin-top: 3.2rem;
  max-width: 52rem;
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--wide { grid-column: 1 / -1; }

.field label {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 62%, transparent);
}

.field .opt { color: color-mix(in srgb, var(--ink, #f4f6f0) 34%, transparent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.78rem 0.9rem;
  border: 1px solid rgba(244, 246, 240, 0.16);
  border-radius: 9px;
  background: rgba(244, 246, 240, 0.03);
  color: var(--ink, #f4f6f0);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color 200ms ease, background 200ms ease;
}

.field textarea { resize: vertical; min-height: 6.5rem; }

.field select { appearance: none; cursor: pointer; }
.field select option { background: #0b0f12; color: #f4f6f0; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(244, 246, 240, 0.06);
}

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: #ff6f59; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 0.6rem;
}

.demo-form button[type="submit"] { border: 0; cursor: pointer; font: inherit; }

.form-note {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 42%, transparent);
}

.form-note[data-state="error"] { color: #ff8a78; }
.form-note[data-state="ok"] { color: var(--accent); }

/* ================= footer ================= */
.site-footer {
  position: relative;
  z-index: 21;
  background: #04070a;
  border-top: 1px solid rgba(244, 246, 240, 0.1);
  padding: clamp(3.4rem, 7vh, 5rem) var(--pad-x) 2rem;
}

.footer-inner {
  width: min(100%, 74rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2.6rem 2rem;
}

.footer-brand .brand-logo { margin-bottom: 1.3rem; }

.footer-line {
  max-width: 34ch;
  font-size: 0.85rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 58%, transparent);
}

.footer-oem {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 40%, transparent);
}

.footer-heading {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

.footer-nav li,
.footer-contact li { margin-bottom: 0.6rem; font-size: 0.87rem; }

.footer-nav a,
.footer-contact a {
  color: color-mix(in srgb, var(--ink, #f4f6f0) 72%, transparent);
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-nav a:hover,
.footer-contact a:hover { color: var(--ink, #f4f6f0); }

/* unmistakable in the browser, invisible in intent — these are unfilled */
[data-placeholder] {
  color: color-mix(in srgb, var(--ink, #f4f6f0) 34%, transparent);
  font-style: italic;
}

.footer-base {
  width: min(100%, 74rem);
  margin: 3.2rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(244, 246, 240, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  justify-content: space-between;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 40%, transparent);
}

/* scroll is frozen while a spec panel is open */
.specs-open { overflow: hidden; }

@media (max-width: 860px) {
  .demo-form { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ================= fleet menu ================= */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  margin-right: 0.9rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(244, 246, 240, 0.22);
  border-radius: 999px;
  background: rgba(8, 11, 14, 0.5);
  backdrop-filter: blur(8px);
  color: var(--ink, #f4f6f0);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.nav-toggle:hover { border-color: var(--accent); background: rgba(8, 11, 14, 0.75); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.nav-toggle-bars { display: grid; gap: 3px; width: 13px; }
.nav-toggle-bars i {
  display: block;
  height: 1.5px;
  background: var(--accent);
  transition: transform 250ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform: translateY(2.2px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child { transform: translateY(-2.2px) rotate(-45deg); }

.fleet-menu {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: start center;
  padding: 6.5rem var(--pad-x) 3rem;
  overflow-y: auto;
  background: rgba(4, 6, 8, 0.94);
  backdrop-filter: blur(20px) saturate(0.9);
  opacity: 0;
  transition: opacity 320ms ease;
}

.fleet-menu[hidden] { display: none; }
.fleet-menu.is-open { opacity: 1; }

.fleet-menu-inner {
  width: min(100%, 68rem);
  transform: translateY(16px);
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fleet-menu.is-open .fleet-menu-inner { transform: none; }

.fleet-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid rgba(244, 246, 240, 0.14);
}

.fleet-menu-head p {
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fleet-close {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(244, 246, 240, 0.2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink, #f4f6f0);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.fleet-close:hover { background: rgba(244, 246, 240, 0.1); border-color: var(--accent); }
.fleet-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.fleet-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.5rem 1.4rem;
}

.fleet-list a {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.1rem 1rem;
  padding: 0.7rem;
  border-radius: 11px;
  text-decoration: none;
  color: var(--ink, #f4f6f0);
  transition: background 200ms ease;
}

.fleet-list a:hover { background: rgba(244, 246, 240, 0.06); }
.fleet-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fleet-list img {
  grid-row: 1 / 3;
  width: 76px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  filter: saturate(0.85) contrast(1.05);
}

.fleet-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.12rem;
  align-self: end;
}

.fleet-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 46%, transparent);
  align-self: start;
}

.fleet-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(244, 246, 240, 0.12);
}

.fleet-more a {
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--ink, #f4f6f0) 70%, transparent);
  text-decoration: none;
  transition: color 180ms ease;
}
.fleet-more a:hover { color: var(--accent); }

.menu-open { overflow: hidden; }

@media (max-width: 620px) {
  .nav-toggle { padding: 0.5rem 0.85rem; font-size: 0.64rem; }
  .fleet-menu { padding: 5.5rem 1.25rem 2.5rem; }
  .fleet-list { grid-template-columns: minmax(0, 1fr); }
}


/* Depth dim — painted over an outgoing chapter as the next one covers it, so
   the stack reads as cards receding rather than sections simply vanishing.
   Created by script.js so it needs no markup change. An overlay is used instead
   of filter: brightness() because a filter on the sticky stage would make it a
   containing block and costs far more to composite. */
.chapter-dim {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: #04070a;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   THE FLEET, TO SCALE — the one section on paper.
   Machines are charcoal: they read as hardware on a light ground
   and as silhouettes on a dark one, so this section inverts. The
   fixed header inverts with it via .site-header.on-light (scale.js).
   ============================================================ */

.scale {
  position: relative;
  z-index: 21; /* above the last chapter's stacked-cover stack */
  background: #e7e4dc;
  color: #101318;
  background-image:
    linear-gradient(rgba(1, 162, 246, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 162, 246, 0.10) 1px, transparent 1px);
  background-size: 72px 72px;
}

.scale-rail {
  --scale-base: 168px; /* floor line height above the rail bottom; read by JS */
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.scale-head {
  position: absolute;
  z-index: 3;
  top: clamp(5rem, 12vh, 8rem);
  left: var(--pad-x, 24px);
  right: var(--pad-x, 24px);
  max-width: min(44rem, 66vw);
  pointer-events: none;
}

.scale-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #018fe0;
  margin-bottom: 1.1rem;
}

.scale-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: #101318;
}

.scale-lede {
  margin-top: 1.2rem;
  max-width: 34rem;
  font-size: clamp(0.98rem, 1.15vw, 1.06rem);
  line-height: 1.65;
  color: #4c5158;
}

.scale-track {
  position: absolute;
  left: 0;
  bottom: var(--scale-base);
  display: flex;
  align-items: flex-end;
  gap: clamp(1.75rem, 4.5vw, 5rem);
  padding: 0 var(--pad-x, 24px);
  will-change: transform;
}

.scale-baseline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--scale-base);
  height: 1px;
  background: #101318;
  z-index: 2;
}
.scale-baseline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7px;
  background-image: linear-gradient(to right, #101318 1px, transparent 1px);
  background-size: 2.5rem 100%;
  opacity: 0.3;
}

.scale-hint {
  position: absolute;
  right: var(--pad-x, 24px);
  top: clamp(5rem, 12vh, 8rem);
  margin: 0;
  z-index: 4;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8f96;
}

.scale-unit {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.scale-art {
  position: relative;
  height: calc(var(--mm) * var(--ppm, 0.3px)); /* real millimetres drive height */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.scale-art img {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 6px 5px rgba(15, 17, 20, 0.16));
}
.scale-art svg {
  height: 100%;
  width: auto;
  aspect-ratio: 60 / 180;
  fill: #101318;
  opacity: 0.16;
}
/* contact ellipse — what makes a cutout stand ON the line, not near it */
.scale-unit:not(.scale-unit--human) .scale-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -2px;
  width: 82%;
  height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(15, 17, 20, 0.36) 0%,
    rgba(15, 17, 20, 0.15) 52%,
    transparent 72%
  );
}
/* blue scan ring under whichever machine the caliper is measuring */
.scale-unit:not(.scale-unit--human) .scale-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -5px;
  width: 108%;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(1, 162, 246, 0.55);
  opacity: 0;
  transition: opacity 0.3s;
}
.scale-unit.is-active .scale-art::before {
  opacity: 1;
}

.scale-meta {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0.8rem;
  text-align: center;
  width: max-content;
  max-width: 12rem;
}

.scale-mm {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #018fe0;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.scale-mm::after {
  content: " MM";
  opacity: 0.55;
}
.scale-name {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  margin: 0.25rem 0 0;
  white-space: nowrap;
  color: #8a8f96;
  transition: color 0.3s;
}
.scale-unit.is-active .scale-name {
  color: #101318;
}
.scale-use {
  font-size: 0.52rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8f96;
  margin: 0.3rem auto 0;
  max-width: 16ch;
}
.scale-unit--human .scale-mm,
.scale-unit--human .scale-name {
  color: #8a8f96;
}

.scale-caliper {
  position: absolute;
  bottom: var(--scale-base);
  z-index: 3;
  pointer-events: none;
  height: 0;
  opacity: 0;
  transform: translateX(var(--capx, 0px));
  transition: opacity 0.25s;
}
.scale-caliper i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--capw, 0px);
  height: 1px;
  background: #01a2f6;
}
.scale-caliper i::before,
.scale-caliper i::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 20px;
  background: #01a2f6;
}
.scale-caliper i::before { left: 0; }
.scale-caliper i::after { right: 0; }

/* the fixed chrome inverts while the paper section is under it */
.site-header.on-light .demo-link,
.site-header.on-light .nav-toggle {
  color: #101318;
  border-color: rgba(16, 19, 24, 0.5);
}
.site-header.on-light .nav-toggle-bars i {
  background: #101318;
}
.progress.on-light {
  background: rgba(16, 19, 24, 0.14);
}

@media (max-width: 720px) {
  .scale-head {
    max-width: none;
  }
  .scale-use {
    display: none;
  }
  .scale-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scale-rail {
    height: auto;
    overflow-x: auto;
    padding-bottom: 3rem;
  }
  .scale-track {
    position: relative;
    bottom: auto;
    margin-top: 3rem;
  }
  .scale-head {
    position: relative;
    top: auto;
    padding: 5rem 0 0;
  }
  .scale-caliper {
    display: none;
  }
}