:root {
  /* Typography (2026-10): Barlow Condensed for display, Space Grotesk for reading and controls,
     Barlow for technical labels; the NAND wordmark keeps its own italic 900 face. */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-technical: "Barlow", "Segoe UI", system-ui, sans-serif;
  --fw-display: 700;
  --red-deep: #5e0000;
  --red: #8f0000;
  --red-bright: #c40a0a;
  --dark: #0d0d0d;
  --text: #e9e9e9;
  --muted: #8a8a8a;
  --split: 29.6%;          /* where the red panel ends */
  --container: 1320px;     /* max width for nav + footer content */
  --gutter: 48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Lenis smooth scrolling (desktop): it animates the scroll itself, so native smooth is off. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html, body { background: var(--dark); color: var(--text); }
body { font-family: var(--font-body); overflow-x: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Hero shell: exactly one viewport tall ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Soft hand-off into the next section: the red panel and studio background fade into the
   same dark the features section starts with, so there is no hard edge between them. */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(140px, 24vh, 260px);
  background: linear-gradient(to bottom, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, .55) 45%, var(--dark) 100%);
  z-index: 0;              /* above panel + background, below the word, footer and car */
  pointer-events: none;
}

.hero__panel {
  position: absolute; inset: 0 auto 0 0;
  width: var(--split);
  background: linear-gradient(180deg, #6b0000 0%, var(--red-deep) 55%, #4a0000 100%);
  z-index: 0;
}

/* ---------- Hero background: engineering studio ---------- */
/* A dark cyclorama studio: back wall + track surface meeting at a lit horizon (the car's eye
   line), overhead softbox, wind-tunnel flow lines and fine dust. Sits above the red panel and
   below the big word; never receives pointer events. */
.hero__bg {
  --horizon: 64%;          /* set by background.js to the car's centre line */
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-layer {
  position: absolute; inset: -4%;   /* bleed so parallax never exposes an edge */
}
/* Only promote the moving layers to their own GPU layer when they actually move (desktop). */
.hero__bg.is-interactive .bg-layer[data-depth] { will-change: transform; }

/* Studio light: overhead softbox, glow where wall meets floor, reflection under the car */
.bg-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 30% at 56% -8%, rgba(255, 255, 255, .07), transparent 70%),
    radial-gradient(ellipse 75% 16% at 55% var(--horizon), rgba(255, 255, 255, .045), transparent 72%),
    radial-gradient(ellipse 48% 20% at 55% var(--horizon), rgba(196, 10, 10, .16), transparent 70%),
    radial-gradient(ellipse 36% 6% at 52% calc(var(--horizon) + 10%), rgba(255, 255, 255, .05), transparent 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, transparent 28%, transparent 100%);
}

/* Fine twill carbon weave, barely there */
.bg-carbon {
  inset: 0;
  will-change: auto;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .26) 0 2px, transparent 2px 4px);
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 55% 45%, #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 75% at 55% 45%, #000 25%, transparent 100%);
}

/* Back wall: two-weight technical grid fading out towards the horizon */
.bg-wall {
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 192px 192px, 192px 192px, 48px 48px, 48px 48px;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 28%, #000 calc(var(--horizon) - 6%), transparent var(--horizon));
          mask-image: linear-gradient(to bottom, transparent 2%, #000 28%, #000 calc(var(--horizon) - 6%), transparent var(--horizon));
}
/* Track surface: the grid laid flat in perspective, converging toward the car */
.bg-floor-wrap { perspective: 520px; perspective-origin: 50% 0; }
.bg-floor {
  position: absolute;
  left: -60%; right: -60%;
  top: var(--horizon);
  height: 120%;
  background-image:
    linear-gradient(rgba(255, 255, 255, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .085) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  background-position: center top;
  transform: rotateX(74deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 42%, transparent 82%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 42%, transparent 82%);
}
/* Track edges and the racing line, tapered at both ends */
.bg-track { width: 108%; height: 108%; }
.bg-track__edge { fill: none; stroke: url(#trk-fade); stroke-width: 1.2; }
.bg-track__edge--far { opacity: .55; }
.bg-track__racing-glow { fill: none; stroke: rgba(196, 10, 10, .07); stroke-width: 9; stroke-linecap: round; }
.bg-track__racing { fill: none; stroke: url(#trk-red); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1 11; }

/* Lit horizon line where wall meets floor, with fine measurement ticks */
.bg-horizon {
  inset: auto -4%;
  top: var(--horizon);
  height: 10px;
  background:
    linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, .16) 40%, rgba(255, 255, 255, .2) 55%, rgba(255, 255, 255, .12) 70%, transparent 95%) top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 32px) 0 1px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 160px) 0 1px / 100% 8px no-repeat;
  box-shadow: 0 0 24px 2px rgba(255, 255, 255, .025);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

/* Volumetric light shafts falling from the overhead studio lights. Pre-blurred gradients
   (no CSS filter) that sway very slowly: transform/opacity only, so they stay on the GPU. */
.bg-shafts {
  position: absolute; inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(var(--horizon) - 12%), transparent calc(var(--horizon) + 4%));
          mask-image: linear-gradient(to bottom, #000 0%, #000 calc(var(--horizon) - 12%), transparent calc(var(--horizon) + 4%));
}
.bg-shafts span {
  position: absolute; top: -20%;
  width: 22%; height: 120%;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025) 45%, transparent 85%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  animation: bg-shaft 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.bg-shafts span:nth-child(1) { left: 30%; --a: -14deg; animation-duration: 19s; }
.bg-shafts span:nth-child(2) { left: 50%; width: 30%; --a: -9deg; animation-duration: 23s; animation-delay: -6s; opacity: .8; }
.bg-shafts span:nth-child(3) {
  left: 70%; width: 16%; --a: -18deg; animation-duration: 16s; animation-delay: -11s;
  background: linear-gradient(to bottom, rgba(255, 90, 90, .06), rgba(196, 10, 10, .02) 45%, transparent 85%);
}
@keyframes bg-shaft {
  0% { transform: rotate(var(--a)) translateX(-2%); opacity: .55; }
  100% { transform: rotate(calc(var(--a) + 5deg)) translateX(2%); opacity: 1; }
}

/* Atmospheric haze lying on the track surface, drifting slowly sideways */
.bg-haze { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bg-haze span {
  position: absolute; left: -30%; width: 160%;
  border-radius: 50%;
  will-change: transform;
}
.bg-haze__a {
  top: calc(var(--horizon) - 9%); height: 24%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .045), transparent 65%);
  animation: bg-haze 26s ease-in-out infinite alternate;
}
.bg-haze__b {
  top: calc(var(--horizon) + 4%); height: 30%;
  background: radial-gradient(ellipse at 50% 50%, rgba(196, 10, 10, .07), transparent 62%);
  animation: bg-haze 34s ease-in-out -12s infinite alternate-reverse;
}
@keyframes bg-haze {
  from { transform: translateX(-6%); }
  to { transform: translateX(6%); }
}

/* Anamorphic flare along the horizon: thin hot core + wide soft glow, breathing gently */
.bg-flare {
  position: absolute; left: -4%; right: -4%;
  top: var(--horizon); height: 0;
}
.bg-flare__glow, .bg-flare__core {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.bg-flare__glow {
  width: 90%; height: 46px;
  background: radial-gradient(ellipse at 55% 50%, rgba(255, 70, 70, .16), rgba(196, 10, 10, .05) 45%, transparent 70%);
  animation: bg-breathe 7s ease-in-out infinite alternate;
}
.bg-flare__core {
  width: 62%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 220, 215, .35) 35%, rgba(255, 255, 255, .55) 55%, rgba(255, 220, 215, .3) 70%, transparent);
  animation: bg-breathe 7s ease-in-out -3.5s infinite alternate;
}
/* Off screen (background.js): the ambient loops hold still, so they never ask for style or paint
   work while the rest of the page scrolls. */
.hero__bg.is-offscreen .bg-shafts span, .hero__bg.is-offscreen .bg-haze span,
.hero__bg.is-offscreen .bg-flare__glow, .hero__bg.is-offscreen .bg-flare__core { animation-play-state: paused; }
@keyframes bg-breathe {
  from { opacity: .65; }
  to { opacity: 1; }
}

/* Glossy track: the cursor light's reflection, squashed by perspective, slides along the floor */
.bg-floor-spec {
  position: absolute; left: 0;
  top: calc(var(--horizon) + 6%);
  width: 520px; height: 70px; margin-left: -260px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 235, 230, .09), rgba(255, 80, 80, .04) 40%, transparent 70%);
  opacity: 0;
  transition: opacity .8s ease;
  will-change: transform, opacity;
}
.hero__bg.is-lit .bg-floor-spec { opacity: 1; }

/* Flow lines, dust and bokeh are drawn here by background.js */
.bg-fx { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Cursor-following studio light: a wide red halo and a soft white core */
.bg-glow {
  position: absolute; left: 0; top: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .8s ease;
  will-change: transform, opacity;
}
.bg-glow--halo {
  width: 860px; height: 860px; margin: -430px 0 0 -430px;
  background: radial-gradient(circle, rgba(255, 60, 60, .085) 0%, rgba(196, 10, 10, .045) 32%, rgba(196, 10, 10, .015) 52%, transparent 70%);
}
.bg-glow--core {
  width: 300px; height: 300px; margin: -150px 0 0 -150px;
  background: radial-gradient(circle, rgba(255, 255, 255, .075) 0%, rgba(255, 235, 235, .03) 40%, transparent 70%);
}
.hero__bg.is-lit .bg-glow { opacity: 1; }

/* Fine photographic grain */
.bg-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .035;
}
.hero__bg.is-low-end .bg-grain { display: none; }

.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 95% 85% at 52% 50%, transparent 52%, rgba(0, 0, 0, .5) 100%);
}

@media (max-width: 900px) {
  .bg-floor { background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; }
}
@media (max-width: 600px) {
  .bg-wall { background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px; }
}
/* Touch devices and reduced motion: keep it static and light */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .bg-glow, .bg-floor-spec { display: none; }
  .bg-shafts span, .bg-haze span, .bg-flare__glow, .bg-flare__core { animation: none; }
}

/* ---------- Nav ---------- */
.nav {
  position: relative;
  z-index: 200;            /* above the 3D layer so the mobile menu is never hidden by the car */
  padding-top: 40px;
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.nav__logo {
  font-family: "Inter", sans-serif;
  font-style: italic; font-weight: 900;
  font-size: 28px; letter-spacing: 0.04em;
  color: #fff; text-decoration: none;
}
.nav__right {
  display: flex; align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.nav__links {
  display: flex; gap: clamp(20px, 3.4vw, 52px);
}
.nav__links a {
  color: #cfcfcf; text-decoration: none;
  font-size: 15px; font-weight: 400;
  position: relative; transition: color .25s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 2px; background: var(--red-bright);
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { transform: scaleX(1); }

/* Mobile menu toggle (hidden on desktop) */
.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.nav__toggle span {
  position: absolute; left: 9px; right: 9px; height: 2px;
  background: #fff; transition: transform .3s, top .3s;
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 23px; }
.nav.is-open .nav__toggle span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { top: 19px; transform: rotate(-45deg); }

/* ---------- Buttons (skewed) ---------- */
.btn {
  position: relative; display: inline-block;
  color: #fff; text-decoration: none;
  font-family: var(--font-body); font-weight: 600;
  letter-spacing: .08em; white-space: nowrap;
  isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0;
  transform: skewX(-14deg);
  transition: filter .3s, transform .3s, background .3s;
  z-index: -1;
}
.btn--ghost { padding: 11px 28px; font-size: 13px; }
.btn--ghost::before { border: 1px solid rgba(255,255,255,.35); }
.btn--ghost:hover::before { background: var(--red); border-color: var(--red); }

.btn--solid { padding: 15px 46px; font-size: 14px; }
.btn--solid::before {
  background: linear-gradient(90deg, var(--red) 0%, #a10000 70%, rgba(161,0,0,0) 100%);
  box-shadow: -2px 0 0 #b30000;
}
.btn--solid:hover::before { filter: brightness(1.3); transform: skewX(-14deg) translateX(4px); }

/* ---------- Big background word ---------- */
.bigword {
  position: absolute; left: 0; right: 0;
  top: 22vh;               /* JS refines this so the car overlaps its lower half */
  z-index: 1;
  pointer-events: none;
  /* Hierarchy: car first, lettering as the backdrop. The letters keep full strength above the car
     (whose top sits ~34% down this box) and ease back to 45% behind it, so the black car reads
     clearly against them. Typeface, size, position and colours are unchanged. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, rgba(0, 0, 0, .45) 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 38%, rgba(0, 0, 0, .45) 92%);
}
.bigword__text {
  display: block;
  text-align: center;
  white-space: nowrap;
  font-family: "Anton", "Impact", sans-serif;   /* the hero word keeps its original face (user, 2026-10-18) */
  font-weight: 400;
  font-size: min(300px, 24vw, 34vh);
  line-height: 1;
  letter-spacing: 0.01em;
  user-select: none;
}
.bigword__text--on-red {
  color: #000;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}
.bigword__text--on-dark {
  position: absolute; inset: 0;
  color: var(--red);
  clip-path: inset(0 0 0 var(--split));
}
.bigword[style*="--word-left"] .bigword__text {
  text-align: left;
  padding-left: var(--word-left);
}
.baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* ---------- 3D layer: fixed, above all content, never blocks clicks ---------- */
#car-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%; display: block;
  z-index: 100;
  pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease;
}
#car-canvas.is-ready { opacity: 1; }

/* ---------- Footer: stats + CTA ---------- */
.hero__footer {
  position: relative;
  z-index: 4;
  padding-bottom: 6vh;
}
.footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.stats {
  display: flex; gap: clamp(28px, 4.5vw, 72px);
  margin-left: max(0px, calc(var(--split) - (100vw - min(100vw, var(--container))) / 2));
}
.stat { text-align: center; }
.stat dt { color: var(--muted); font-weight: 400; font-size: 15px; line-height: 1.4; }
.stat dd { color: #fff; font-weight: 600; font-size: 19px; letter-spacing: .01em; }

/* ---------- Features section ---------- */
.features {
  --reveal: 1;             /* 0..1, driven by scroll in main.js */
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  padding: 72px 0;
  background:
    radial-gradient(ellipse 38% 55% at 50% 50%, rgba(160, 0, 0, .30) 0%, rgba(120, 0, 0, .12) 45%, rgba(13, 13, 13, 0) 75%),
    var(--dark);
  overflow: hidden;
}
.features__grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(150px, 30%) 1fr;
  gap: clamp(14px, 4vw, 64px);
}
.features__col {
  /* Two equal rows so facing cards (01/03, 02/04) share the same top line. */
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: start;
  padding: 7vh 0 0;
  gap: 40px;
}
.features__car { min-height: 0; }

.feature {
  --d: 0;                  /* stagger: lower cards arrive a little later */
  position: relative;
  max-width: 360px;
  padding-top: 26px;
  --shown: clamp(0, calc(var(--reveal) * 1.4 - var(--d)), 1);
  opacity: var(--shown);
  will-change: transform, opacity;
}
.feature:nth-child(2) { --d: 0.4; }
.features__col--left .feature { transform: translateX(calc((1 - var(--shown)) * -70px)); }
.features__col--right .feature { transform: translateX(calc((1 - var(--shown)) * 70px)); }
.feature::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  transition: opacity .3s;
}
.features__col--left .feature { margin-left: auto; text-align: right; }
.features__col--left .feature::before {
  background: linear-gradient(90deg, rgba(196, 10, 10, 0) 0%, rgba(196, 10, 10, .55) 45%, #ff2a2a 100%);
}
.features__col--right .feature::before {
  background: linear-gradient(90deg, #ff2a2a 0%, rgba(196, 10, 10, .55) 55%, rgba(196, 10, 10, 0) 100%);
}

.feature__num {
  display: block;
  font: 500 13px var(--font-technical);
  letter-spacing: .24em;
  color: var(--red-bright);
}
.feature__title {
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #fff;
}
.feature__text {
  font: 400 15px/1.65 var(--font-body);
  color: #9a9a9a;
}

/* ---------- Drive (top speed) section ---------- */
.drive {
  --reveal: 1;             /* 0..1, driven by scroll in main.js */
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  background:
    radial-gradient(ellipse 45% 60% at 18% 60%, rgba(160, 0, 0, .22) 0%, rgba(120, 0, 0, .08) 50%, rgba(13, 13, 13, 0) 80%),
    var(--dark);
  overflow: hidden;
}
.drive__grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.drive__car { align-self: stretch; }
.drive__content {
  max-width: 540px;
  opacity: var(--reveal);
  transform: translateX(calc((1 - var(--reveal)) * 80px));
  will-change: transform, opacity;
}

/* Mirrored variant (plans section): copy on the left, car bleeding off the right edge. */
.drive--reverse {
  background:
    radial-gradient(ellipse 45% 60% at 82% 60%, rgba(160, 0, 0, .22) 0%, rgba(120, 0, 0, .08) 50%, rgba(13, 13, 13, 0) 80%),
    var(--dark);
}
.drive--reverse .drive__grid { grid-template-columns: 1fr 1.15fr; }
.drive--reverse .drive__content { transform: translateX(calc((1 - var(--reveal)) * -80px)); }
.drive__eyebrow {
  display: block;
  font: 500 13px var(--font-technical);
  letter-spacing: .3em;
  color: var(--red-bright);
}
.drive__title {
  margin: 14px 0 22px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: min(110px, 9vw);
  line-height: .95;
  letter-spacing: .01em;
  /* Same display-face + black-to-red treatment as the hero word, as a gradient so it reads on dark. */
  background: linear-gradient(100deg, #3a0000 0%, var(--red) 38%, #c40a0a 70%, #ff2a2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.drive__text {
  font: 400 18px/1.65 var(--font-body);
  color: #9a9a9a;
}
.drive__rule {
  display: block;
  height: 2px;
  margin: 32px 0 26px;
  background: linear-gradient(90deg, #ff2a2a 0%, rgba(196, 10, 10, .55) 55%, rgba(196, 10, 10, 0) 100%);
}
.stats--sm { margin: 0 0 36px; gap: clamp(24px, 3.5vw, 52px); }
.stats--sm .stat { text-align: left; }
.stats--sm .stat dt { font-size: 13px; }
.stats--sm .stat dd { font-size: 16px; }

/* ---------- Finale section ---------- */
.finale {
  --reveal: 1;             /* 0..1, driven by scroll in main.js */
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 80px 0 48px;
  background:
    radial-gradient(ellipse 55% 45% at 50% 100%, rgba(200, 0, 0, .55) 0%, rgba(150, 0, 0, .25) 40%, rgba(13, 13, 13, 0) 75%),
    var(--dark);
  overflow: hidden;
}
.finale__inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.finale__eyebrow {
  font: 500 14px var(--font-technical);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red-bright);
  opacity: var(--reveal);
  will-change: opacity;
}
.finale__title {
  margin-top: 18px;
  font-family: "Anton", "Impact", sans-serif;   /* keeps its original face, like the hero word (user, 2026-10-18) */
  font-weight: 400;
  font-size: var(--finale-fs, min(300px, 15vw));   /* 300px, shrunk by main.js only if a line won't fit */
  line-height: .9;
  letter-spacing: .01em;
  white-space: nowrap;
  background: linear-gradient(180deg, #ff2a2a 0%, #c40a0a 35%, var(--red) 65%, #3a0000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: var(--reveal);
  transform: translateY(calc((1 - var(--reveal)) * 60px));
  /* Own GPU layer: the 300px gradient-clipped text is costly to repaint every frame. */
  will-change: transform, opacity;
}
.finale__title span { display: block; }
.finale__car {
  width: 100%;
  height: min(52vh, 520px);
  /* margin-top and height are set by main.js so the car covers the lower half of the title */
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .stats { margin-left: 0; }
}

/* Tablet */
@media (max-width: 900px) {
  :root { --split: 34%; --gutter: 24px; }
  .nav { padding-top: 24px; }
  .nav__right { gap: 20px; }
  .nav__links { gap: 18px; }
  .nav__links a { font-size: 13px; }
  .footer__inner { flex-direction: column; gap: 20px; }
  .stats { gap: 22px; }
  .stat dt { font-size: 12px; }
  .stat dd { font-size: 14px; }

  .features { min-height: 560px; padding: 56px 0; }
  .features__col { gap: 24px; padding-top: 5vh; }
  .feature { padding-top: 18px; }
  .feature__title { font-size: 24px; margin: 8px 0 8px; }
  .feature__text { font-size: 13px; line-height: 1.55; }

  .drive__text { font-size: 15px; }
  .drive__rule { margin: 24px 0 20px; }
  .stats--sm { margin-bottom: 28px; }

  .finale { padding: 64px 0 40px; }
  .finale__eyebrow { font-size: 12px; }
}

/* Small tablet / large phone: collapse the menu */
@media (max-width: 768px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: calc(100% + 12px); left: var(--gutter); right: var(--gutter);
    flex-direction: column; gap: 0;
    padding: 8px 20px;
    background: rgba(13, 13, 13, .96);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { font-size: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a::after { bottom: 10px; width: 32px; }
  .nav__right { gap: 12px; }
  .btn--ghost { padding: 10px 20px; font-size: 12px; }
}

/* Phones */
@media (max-width: 600px) {
  :root { --gutter: 16px; --split: 36%; }
  .nav { padding-top: 18px; }
  .nav__logo { font-size: 22px; }

  /* Hero */
  .bigword__text { font-size: min(300px, 30vw, 34vh); }
  .hero__footer { padding-bottom: max(5vh, 24px); }
  .stats {
    display: grid; grid-template-columns: repeat(2, auto);
    justify-content: center; gap: 14px 44px;
  }
  .btn--solid { padding: 14px 36px; font-size: 13px; }

  /* Features: cards above and below the car, still in left/right pairs facing it */
  .features { height: auto; min-height: 100svh; padding: 64px 0 56px; }
  .features__grid {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "l1 r1"
      "car car"
      "l2 r2";
    gap: 24px 32px;
  }
  .features__col { display: contents; }
  .features__col--left .feature:nth-child(1) { grid-area: l1; }
  .features__col--left .feature:nth-child(2) { grid-area: l2; }
  .features__col--right .feature:nth-child(1) { grid-area: r1; }
  .features__col--right .feature:nth-child(2) { grid-area: r2; }
  .features__car { grid-area: car; height: 52svh; min-height: 340px; }
  .feature { padding-top: 14px; }
  .feature__num { font-size: 11px; letter-spacing: .2em; }
  .feature__title { font-size: 20px; margin: 6px 0; }
  .feature__text { font-size: 12.5px; line-height: 1.5; }

  /* Drive: car on top, copy underneath */
  .drive { height: auto; min-height: 0; }
  .drive__grid { grid-template-columns: 1fr; gap: 8px; padding-bottom: 64px; }
  .drive__car { height: 42svh; min-height: 260px; }
  .drive__content { max-width: none; }
  .drive__title { font-size: 72px; margin: 10px 0 16px; }
  .drive__text { font-size: 15px; }
  .stats--sm { display: flex; justify-content: flex-start; gap: 28px; }
  /* Plans: same stacked layout as drive, car on top */
  .drive--reverse .drive__grid { grid-template-columns: 1fr; }
  .drive--reverse .drive__car { order: -1; }

  /* Finale */
  .finale { padding: 56px 0 32px; }
  .finale__eyebrow { font-size: 11px; letter-spacing: .25em; }
}

@media (max-width: 380px) {
  .nav__logo { font-size: 20px; }
  .btn--ghost { padding: 9px 14px; letter-spacing: .05em; }
  .stats { gap: 12px 28px; }
  .feature__title { font-size: 18px; }
  .feature__text { font-size: 12px; }
  .drive__title { font-size: 60px; }
}

/* ---------- Section 3.2: engineering breakdown (pinned, scroll-driven) ----------
   Two sticky layers share the pinned viewport: .eng__stage sits under the fixed 3D canvas
   (backdrop + intro), .eng__overlay sits above it (connector lines + callouts).
   engineering.js drives --out / --t / --draw / --fade from scroll progress. */
.eng {
  position: relative;
  height: 420vh;               /* 100vh pinned stage + 320vh of scroll for the sequence */
  overflow-x: clip;            /* clip, not hidden: hidden would break the sticky layers */
}
.eng__stage,
.eng__overlay {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.eng__overlay {
  margin-top: -100vh;          /* same pinned viewport as the stage */
  z-index: 101;                /* above #car-canvas */
  pointer-events: none;
  --fade: 1;
  opacity: var(--fade);
}

/* Backdrop: carbon weave, a faint technical grid and a restrained red key light. */
.eng__backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 42% 52% at 64% 54%, rgba(160, 0, 0, .2) 0%, rgba(120, 0, 0, .07) 50%, rgba(13, 13, 13, 0) 78%),
    var(--dark);
}
.eng__backdrop::before,
.eng__backdrop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.eng__backdrop::before {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 6px);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 55%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 60% 55%, #000 0%, transparent 75%);
  opacity: .8;
}
.eng__backdrop::after {
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 55% 55%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 55% at 55% 55%, #000 0%, transparent 72%);
}

/* Intro copy (left), steps aside as the car opens up. */
.eng__intro {
  --out: 0;
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  opacity: calc(1 - var(--out));
  transform: translateY(calc(var(--out) * -28px));
  will-change: transform, opacity;
}
.eng__intro > * { max-width: min(460px, 36vw); }
.eng__eyebrow {
  font: 500 13px var(--font-technical);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.eng__title {
  margin: 16px 0 22px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: min(92px, 6.4vw);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  background: linear-gradient(100deg, #3a0000 0%, var(--red) 38%, #c40a0a 70%, #ff2a2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eng__title span { display: block; }
.eng__text {
  font: 400 17px/1.65 var(--font-body);
  color: #9a9a9a;
}
/* Scroll cue: a small label over a thin line with a red tick running down it, centred at the
   bottom of the pinned view (clear of the car at every size). Not interactive. Fades with the intro
   (--out). The tick animates transform only (compositor), and pauses off-screen. */
.eng__hint {
  position: absolute; left: 50%; bottom: max(20px, 3.5vh);
  max-width: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-left: .34em;           /* balances the trailing letter-spacing so the label sits centred */
  transform: translateX(-50%);
  font: 500 10px var(--font-technical);
  letter-spacing: .34em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2, #4b443a);
  pointer-events: none;
}
.eng__hint i {
  position: relative; overflow: hidden;
  width: 1px; height: 34px;
  margin-left: -.34em;
  background: rgba(23, 20, 15, .2);
}
.eng__hint i::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 1px; height: 45%;
  background: linear-gradient(transparent, var(--red-bright));
  transform: translateY(-100%);
  animation: eng-hint 2s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes eng-hint { from { transform: translateY(-100%); } to { transform: translateY(225%); } }
.eng.is-offscreen .eng__hint i::after { animation-play-state: paused; }

/* Connector lines (SVG, stage px) */
.eng__lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.eng__line {
  --draw: 0;
  fill: none;
  stroke: rgba(205, 208, 214, .42);
  stroke-width: 1;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--draw));
  vector-effect: non-scaling-stroke;
}
.eng__line-start {
  --t: 0;
  fill: rgba(205, 208, 214, .7);
  opacity: min(1, calc(var(--t) * 6));
}
.eng__marker {
  --t: 0;
  opacity: clamp(0, calc((var(--t) - .7) * 4), 1);
}
.eng__marker-dot { fill: #ff2a2a; }
.eng__marker-halo {
  fill: rgba(255, 42, 42, .12);
  stroke: rgba(255, 42, 42, .55);
  stroke-width: 1;
}

/* Callouts: editorial, no panels; a hairline with a short red lead on the car side. */
.eng__callouts { list-style: none; }
.eng-callout {
  --t: 0;
  --shown: clamp(0, calc((var(--t) - .45) / .55), 1);
  position: absolute;
  width: clamp(220px, 19vw, 300px);
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  opacity: var(--shown);
  will-change: transform, opacity;
}
.eng-callout::before {
  content: ""; position: absolute; top: -1px;
  width: 34px; height: 1px;
  background: #ff2a2a;
}
.eng-callout[data-side="left"] {
  left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  text-align: right;
  transform: translateX(calc((1 - var(--shown)) * -18px));
}
.eng-callout[data-side="left"]::before { right: 0; }
.eng-callout[data-side="right"] {
  right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  transform: translateX(calc((1 - var(--shown)) * 18px));
}
.eng-callout[data-side="right"]::before { left: 0; }
.eng-callout__num {
  display: block;
  font: 500 11px var(--font-technical);
  letter-spacing: .3em;
  color: var(--red-bright);
}
.eng-callout__title {
  margin: 8px 0 8px;
  font: 600 14px/1.3 var(--font-technical);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f2f2f2;
}
.eng-callout__text {
  font: 400 13.5px/1.6 var(--font-body);
  color: #8c8c8c;
}

/* Small screens: the composition sits above, callouts follow one at a time underneath. */
.eng__overlay[data-mode="seq"] .eng-callout {
  left: var(--gutter); right: var(--gutter);
  top: 64vh;
  width: auto;
  max-width: 520px;
  text-align: left;
  transform: translateY(calc((1 - var(--shown)) * 14px));
}
.eng__overlay[data-mode="seq"] .eng-callout::before { left: 0; right: auto; }
@media (max-width: 1023px) {
  .eng { height: 500vh; }
  .eng__intro { justify-content: flex-start; padding-top: 15vh; }
  .eng__intro > * { max-width: 560px; }
  .eng__title { font-size: min(72px, 11vw); margin: 12px 0 16px; }
  .eng__text { font-size: 15px; }
}
@media (max-width: 600px) {
  .eng__intro { padding-top: 12vh; }
  .eng__title { font-size: min(56px, 13.5vw); }
  .eng__text { font-size: 14px; line-height: 1.6; }
  .eng__hint i { height: 26px; }
  .eng-callout__title { font-size: 13px; }
  .eng-callout__text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .eng__hint i::after { animation: none; transform: translateY(60%); }
}


/* ---------- Six machines: digital solutions (pinned, scroll-driven) ----------
   The cars render in the fixed 3D canvas (solutions.js); this stage carries the studio
   environment behind them, the heading and each car's label + hover/tap target.
   solutions.js drives --t (reveal), --mx/--my (eased cursor, -1..1), --light and the focus classes. */
.sol {
  position: relative;
  height: 420vh;               /* 100vh pinned stage + 320vh of scroll for the sequence */
  overflow-x: clip;
}
.sol__stage {
  --mx: 0;
  --my: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Studio environment: near-black graphite, depth from layered planes, restrained red. */
.sol__backdrop {
  position: absolute; inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 50% 58%, #15161a 0%, #101114 45%, #0b0b0d 100%);
}
.sol__backdrop > * { position: absolute; pointer-events: none; }
.sol__haze {
  inset: -8%;
  background:
    /* restrained red key behind the headline */
    radial-gradient(ellipse 30% 34% at 50% 48%, rgba(143, 0, 0, .2) 0%, rgba(110, 0, 0, .07) 48%, rgba(0, 0, 0, 0) 74%),
    /* graphite pools where the two groups of cars stand */
    radial-gradient(ellipse 26% 52% at 19% 50%, rgba(255, 255, 255, .028) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 26% 52% at 81% 50%, rgba(255, 255, 255, .028) 0%, rgba(255, 255, 255, 0) 70%),
    /* low red bounce off the studio floor */
    radial-gradient(ellipse 60% 24% at 50% 104%, rgba(120, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 70%);
  transform: translate3d(calc(var(--mx) * -10px), calc(var(--my) * -6px), 0);
}
/* Two technical grid planes: the far one finer and fainter, each drifting a different amount
   with the cursor, so the wall reads as having depth. Masked to fade long before the edges. */
.sol__grid {
  inset: -6%;
  -webkit-mask-image: radial-gradient(ellipse 58% 54% at 50% 50%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 58% 54% at 50% 50%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
}
.sol__grid--far {
  background:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 44px 44px;
  transform: translate3d(calc(var(--mx) * -6px), calc(var(--my) * -4px), 0);
}
.sol__grid--near {
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 176px 176px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 176px 176px;
  transform: translate3d(calc(var(--mx) * -16px), calc(var(--my) * -10px), 0);
}
.sol__dust {
  inset: 0;
  transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -9px), 0);
}
/* Each mote's strength (--a) is in its colour and its sideways drift is a static rotate (set by
   solutions.js), so the keyframes hold only fixed values: the animation runs on the compositor
   instead of restyling 36 elements on the main thread every frame. */
.sol__dust i {
  position: absolute;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: rgb(255 255 255 / var(--a));
  opacity: 0;
  animation: sol-drift var(--d) linear infinite;
  will-change: transform, opacity;
}
.sol__dust i.near { background: rgb(255 217 212 / var(--a)); }
.sol__dust.is-paused i { animation-play-state: paused; }
@keyframes sol-drift {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(0, -38vh, 0); opacity: 0; }
}
/* Soft studio light that trails the cursor: barely there, never a visible circle. */
.sol__light {
  inset: 0;
  background: radial-gradient(circle 46vmax at calc(50% + var(--mx) * 50%) calc(50% + var(--my) * 50%),
    rgba(255, 245, 240, .045) 0%, rgba(160, 20, 20, .03) 38%, rgba(0, 0, 0, 0) 70%);
  opacity: var(--light, 0);
  transition: opacity .8s ease;
}
.sol__vignette {
  inset: 0;
  background: radial-gradient(ellipse 85% 80% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%);
}

/* Headline: the anchor. A soft dark lens behind it keeps it crisp over the grid. */
.sol__head {
  --t: 0;
  position: absolute; left: 50%; top: 47%;
  width: min(440px, 30vw);
  transform: translate(-50%, calc(-50% + (1 - var(--t)) * 24px));
  text-align: center;
  opacity: var(--t);
  will-change: transform, opacity;
}
.sol__head::before {
  content: ""; position: absolute; inset: -18% -22%; z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(11, 11, 13, .82) 0%, rgba(11, 11, 13, .5) 45%, rgba(11, 11, 13, 0) 72%);
}
.sol__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 12.5px var(--font-technical);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.sol__eyebrow::before,
.sol__eyebrow::after {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, rgba(196, 10, 10, 0), rgba(196, 10, 10, .8));
}
.sol__eyebrow::after { transform: scaleX(-1); }
.sol__title {
  margin: 16px 0 20px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: min(88px, 5.6vw);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  background: linear-gradient(100deg, #3a0000 0%, var(--red) 38%, #c40a0a 70%, #ff2a2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sol__title span { display: block; }
.sol__text {
  font: 400 15.5px/1.65 var(--font-body);
  color: #9a9a9a;
}

/* Each car: an invisible box over its settled footprint (hover / click / tap target) + label below.
   Idle: number + title. Selected (hover or keyboard focus): the description and the car's name
   open underneath and the other labels step back. A click or tap opens the project enquiry. */
.sol__cars { list-style: none; }
.sol-car {
  --t: 0;
  position: absolute;
  pointer-events: none;
  outline: none;
}
.sol-car.is-live { pointer-events: auto; cursor: pointer; }      /* the whole car opens its enquiry */
.sol-car__label {
  position: absolute; left: 50%; top: calc(100% + 4px);
  width: min(280px, 22vw);
  transform: translate(-50%, calc((1 - var(--t)) * 12px));
  text-align: center;
  opacity: var(--t);
  transition: opacity .45s ease;
  will-change: transform, opacity;
}
.sol.has-focus .sol-car:not(.is-focus) .sol-car__label { opacity: calc(var(--t) * .38); }
.sol-car__label::before {
  content: ""; display: block;
  width: 22px; height: 1px; margin: 0 auto 10px;
  background: #c40a0a;
  transition: width .5s cubic-bezier(.2, .7, .2, 1), background-color .4s;
}
.sol-car__num {
  font: 500 10.5px var(--font-technical);
  letter-spacing: .34em;
  color: var(--red-bright);
}
.sol-car__title {
  margin: 6px 0 0;
  font: 600 13px/1.3 var(--font-technical);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e9e9e9;
  transition: color .4s;
}
.sol-car__text {
  /* Space is reserved (checked free at every size), so the reveal is opacity + transform only:
     no layout work while a car is being selected. */
  margin-top: 8px;
  font: 400 13px/1.6 var(--font-body);
  color: #9a9a9a;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.sol-car__model {
  display: block;
  margin-top: 10px;
  font: 500 9.5px var(--font-technical);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #6b6b6b;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s ease .08s, transform .55s cubic-bezier(.2, .7, .2, 1) .04s;
}
.sol-car.is-focus .sol-car__label::before { width: 58px; background: #ff2a2a; }
.sol-car.is-focus .sol-car__title { color: #fff; }
.sol-car.is-focus .sol-car__text,
.sol-car.is-focus .sol-car__model { opacity: 1; transform: none; }
.sol-car:focus-visible .sol-car__title { color: #ff2a2a; }

/* Below 1024px: heading on top, two columns of three cars underneath. */
.sol[data-mode="stack"] .sol__head {
  top: 7vh;
  width: min(560px, calc(100% - 2 * var(--gutter)));
  transform: translate(-50%, calc((1 - var(--t)) * 20px));
}
.sol[data-mode="stack"] .sol-car__label { top: 100%; width: min(240px, 44vw); }
@media (max-width: 1023px) {
  .sol { height: 460vh; }
  .sol__title { font-size: min(64px, 10vw); margin: 10px 0 12px; }
  .sol__text { font-size: 14px; }
  .sol__haze {
    background:
      radial-gradient(ellipse 60% 22% at 50% 16%, rgba(143, 0, 0, .18) 0%, rgba(0, 0, 0, 0) 72%),
      radial-gradient(ellipse 80% 40% at 50% 62%, rgba(255, 255, 255, .025) 0%, rgba(0, 0, 0, 0) 70%);
  }
  .sol__grid--near { background-size: 120px 120px; }
}
/* Touch: no cursor effects; tapping a car opens its enquiry. */
@media (hover: none) {
  .sol__light, .sol__dust { display: none; }
}
@media (max-width: 600px) {
  .sol__eyebrow { font-size: 11px; gap: 8px; }
  .sol__eyebrow::before, .sol__eyebrow::after { width: 14px; }
  .sol-car__title { font-size: 11.5px; letter-spacing: .12em; }
  .sol-car__text { font-size: 12px; }
  .sol-car__label::before { margin-bottom: 6px; }
}
/* Short desktop screens (~180px per row): a more compact open state so a selected car's
   details never reach the car below — wider labels (two-line description), no car name. */
@media (min-width: 1024px) and (max-height: 760px) {
  .sol-car__label { width: min(320px, 25vw); }
  .sol-car__label::before { margin-bottom: 7px; }
  .sol-car__text { margin-top: 5px; font-size: 12px; line-height: 1.5; }
  .sol-car__model { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sol__haze, .sol__grid--far, .sol__grid--near { transform: none; }
  .sol__dust { display: none; }
}

/* Stacked (small-screen) layout: labels stay compact (number + title) and the selected
   machine's details appear in one shared line at the bottom of the stage. */
.sol__detail { display: none; }
.sol[data-mode="stack"] .sol__detail {
  --t: 0;
  display: block;
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 3.5vh;
  min-height: 92px;
  text-align: center;
  opacity: var(--t);
  pointer-events: none;
}
.sol[data-mode="stack"] .sol-car__text,
.sol[data-mode="stack"] .sol-car__model { display: none; }
.sol__detail-hint,
.sol__detail-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.sol__detail-hint {
  font: 500 10.5px var(--font-technical);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #5f5f5f;
}
.sol__detail-body { opacity: 0; transform: translateY(8px); }
.sol.has-focus .sol__detail-hint { opacity: 0; }
.sol.has-focus .sol__detail-body { opacity: 1; transform: none; }
.sol__detail-body::before {
  content: ""; display: block;
  width: 40px; height: 1px; margin: 0 auto 10px;
  background: #ff2a2a;
}
.sol__detail-num {
  font: 500 10.5px var(--font-technical);
  letter-spacing: .34em;
  color: var(--red-bright);
}
.sol__detail-title {
  margin: 5px 0 6px;
  font: 600 13px/1.3 var(--font-technical);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.sol__detail-text {
  max-width: 460px; margin: 0 auto;
  font: 400 13px/1.55 var(--font-body);
  color: #9a9a9a;
}
.sol__detail-model {
  margin-top: 8px;
  font: 500 9.5px var(--font-technical);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #6b6b6b;
}

/* Selection light in the studio: a soft white/red pool that drifts to the selected exhibit
   (position eased in solutions.js), so the environment answers the car, not just the cursor. */
.sol__focus {
  inset: 0;
  background: radial-gradient(ellipse 22% 26% at calc(var(--fx, 50) * 1%) calc(var(--fy, 50) * 1%),
    rgba(255, 240, 236, .05) 0%, rgba(150, 10, 10, .07) 40%, rgba(0, 0, 0, 0) 72%);
  opacity: var(--focus, 0);
}

/* Seams with the neighbouring sections: while the stage's edge is on screen it starts from the
   same #0d0d0d as the section above (carrying that section's red glow on at the same position
   and falloff) and ends in the finale's #0d0d0d below — so there is no line between them. */
.sol__seam { left: 0; right: 0; height: 100%; }
.sol__seam--top {
  top: 0;
  background:
    radial-gradient(ellipse 45% 60% at 82% -40%, rgba(160, 0, 0, .22) 0%, rgba(120, 0, 0, .08) 50%, rgba(13, 13, 13, 0) 80%),
    linear-gradient(180deg, var(--dark) 0%, rgba(13, 13, 13, .85) 8%, rgba(13, 13, 13, 0) 30%);
  opacity: var(--seam-in, 0);
}
.sol__seam--bottom {
  bottom: 0;
  background: linear-gradient(0deg, var(--dark) 0%, rgba(13, 13, 13, .85) 8%, rgba(13, 13, 13, 0) 30%);
  opacity: var(--seam-out, 0);
}
@media (max-width: 1023px) {
  /* the section above stacks differently on small screens: blend into its plain base only */
  .sol__seam--top { background: linear-gradient(180deg, var(--dark) 0%, rgba(13, 13, 13, .85) 8%, rgba(13, 13, 13, 0) 30%); }
}

/* Refined reveal: rule draws, then title, description and car name follow in sequence on the
   way in; on the way out everything leaves together (no delays), so switching cars is clean. */
.sol-car.is-focus .sol-car__label::before { transition: width .55s cubic-bezier(.2, .7, .2, 1), background-color .4s; }
.sol-car.is-focus .sol-car__text { transition: opacity .45s ease .08s, transform .6s cubic-bezier(.2, .7, .2, 1) .08s; }
.sol-car.is-focus .sol-car__model { transition: opacity .45s ease .18s, transform .6s cubic-bezier(.2, .7, .2, 1) .18s; }
.sol-car__label { transition: opacity .5s ease; }


/* =====================================================================================
   PAPER THEME
   The whole site is one continuous sheet of crumpled cream paper lying on a charcoal
   drafting table; new F1 drawings are drafted endlessly in the table margins (drafting.js).
   Everything below overrides the dark studio look above; layout and motion are unchanged.

   Stacking: .paper must never create a stacking context (no z-index, transform, opacity,
   filter, isolation, will-change or contain on it), so the 3D canvas (z 100), the engineering
   overlay (z 101) and the nav (z 200) keep layering exactly as before. The table and the
   drafting canvases sit at negative z-index: above the page background, under the paper.
   ===================================================================================== */
:root {
  --ink: #17140f;
  --ink-2: #4b443a;            /* body copy */
  --ink-3: #7c7366;            /* muted / meta */
  --paper: #efe9dc;
  --table: #15171b;
  --text: var(--ink);
  --muted: var(--ink-3);
  /* the table margin around the sheet, and the sheet's width */
  --paper-gap: max(clamp(8px, 8.6vw, 150px), (100vw - 1400px) / 2);
  --paper-y: clamp(8px, 2.4vw, 34px);
  --pw: calc(100vw - 2 * var(--paper-gap));
}
html { background: var(--table); color: var(--ink); }
/* body stays transparent: its own background would paint over the negative-z table layers */
body { background: transparent; color: var(--ink); }

/* ---------- The drafting table ---------- */
.table {
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 255, 255, .025) 0%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(rgba(150, 170, 200, .055) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(150, 170, 200, .055) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgba(150, 170, 200, .022) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(150, 170, 200, .022) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(ellipse 120% 90% at 50% 40%, #1a1d22 0%, #131518 60%, #0c0d0f 100%);
}
.draft {
  position: fixed; top: 0;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  display: none;               /* shown by drafting.js when the margins are wide enough */
}
.draft--l { left: 0; }
.draft--r { right: 0; }
.draft.is-on { display: block; }

/* ---------- The sheet ---------- */
.paper {
  position: relative;
  display: block;
  width: calc(100% - 2 * var(--paper-gap));
  margin: var(--paper-y) auto;
  background-color: var(--paper);
  background-image:
    url("assets/paper-crease.webp"),
    radial-gradient(ellipse 140% 60% at 30% 0%, rgba(255, 252, 244, .55) 0%, rgba(255, 252, 244, 0) 60%),
    linear-gradient(90deg, rgba(120, 100, 70, .07) 0%, rgba(120, 100, 70, 0) 6%, rgba(120, 100, 70, 0) 94%, rgba(120, 100, 70, .07) 100%);
  background-size: 1024px 1024px, 100% 100vh, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 2px 3px rgba(0, 0, 0, .35),
    0 18px 40px rgba(0, 0, 0, .45),
    0 50px 120px rgba(0, 0, 0, .55);
}
/* Drawing-sheet frame: an ink hairline with a fine red rule just inside it, and corner ticks.
   ::after paints over the sections' own backgrounds but under the 3D layer. */
.paper::after {
  content: "";
  position: absolute;
  inset: clamp(6px, 1.1vw, 16px);
  border: 1px solid rgba(23, 20, 15, .38);
  outline: 1px solid rgba(143, 0, 0, .32);
  outline-offset: -5px;
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 22px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 2px 22px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 22px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 2px 22px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 22px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 2px 22px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 22px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 2px 22px no-repeat;
}

/* Viewport-based measurements now refer to the sheet. */
.stats { margin-left: max(0px, calc(var(--split) - (var(--pw) - min(var(--pw), var(--container))) / 2)); }
.eng-callout[data-side="left"] { left: max(var(--gutter), calc((var(--pw) - var(--container)) / 2 + var(--gutter))); }
.eng-callout[data-side="right"] { right: max(var(--gutter), calc((var(--pw) - var(--container)) / 2 + var(--gutter))); }

/* ---------- Hero ---------- */
.hero {
  background: none;
  height: calc(100vh - var(--paper-y));
  height: calc(100svh - var(--paper-y));
}
.hero::after { display: none; }
/* The red panel keeps the same creases as the sheet (same texture, same origin). */
.hero__panel {
  background:
    url("assets/paper-crease.webp") 0 0 / 1024px 1024px,
    linear-gradient(180deg, #7a0000 0%, var(--red-deep) 55%, #4f0000 100%);
}
/* The studio becomes a pencil drawing: wall grid, floor grid, track and horizon in ink. */
.bg-backdrop, .bg-carbon, .bg-shafts, .bg-haze, .bg-flare__glow, .bg-floor-spec,
.bg-glow, .bg-grain, .bg-vignette { display: none; }
.bg-wall {
  background-image:
    linear-gradient(rgba(23, 20, 15, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 20, 15, .085) 1px, transparent 1px),
    linear-gradient(rgba(23, 20, 15, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 20, 15, .035) 1px, transparent 1px);
}
.bg-floor {
  background-image:
    linear-gradient(rgba(23, 20, 15, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 20, 15, .14) 1px, transparent 1px),
    linear-gradient(rgba(23, 20, 15, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 20, 15, .05) 1px, transparent 1px);
}
#trk-fade stop { stop-color: #17140f; }
.bg-track__racing-glow { stroke: rgba(196, 10, 10, .05); }
.bg-horizon {
  background:
    linear-gradient(90deg, transparent 5%, rgba(23, 20, 15, .3) 40%, rgba(23, 20, 15, .38) 55%, rgba(23, 20, 15, .24) 70%, transparent 95%) top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(23, 20, 15, .16) 0 1px, transparent 1px 32px) 0 1px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, rgba(23, 20, 15, .24) 0 1px, transparent 1px 160px) 0 1px / 100% 8px no-repeat;
  box-shadow: none;
}
.bg-flare__core {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 10, 10, .35) 35%, rgba(196, 10, 10, .55) 55%, rgba(196, 10, 10, .3) 70%, transparent);
}

/* Nav: the logo stays white on the red panel; links and controls are ink on paper. */
.nav__links a { color: var(--ink-2); }
.nav__links a:hover { color: var(--ink); }
.nav__toggle span { background: var(--ink); }
.btn--ghost { color: var(--ink); }
.btn--ghost::before { border-color: rgba(23, 20, 15, .45); }
.btn--ghost:hover { color: #fff; }
@media (max-width: 768px) {
  .nav__links {
    background: rgba(239, 233, 220, .97);
    border: 1px solid rgba(23, 20, 15, .16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  }
  .nav__links a { border-bottom-color: rgba(23, 20, 15, .1); }
}

/* ---------- Sections: the sheet shows through ---------- */
.features, .drive, .drive--reverse, .finale { background: none; }
.stat dd { color: var(--ink); }
.feature__title { color: var(--ink); }
.feature__text, .drive__text, .eng__text, .sol__text { color: var(--ink-2); }

/* Engineering: a faint drafting grid instead of the carbon studio. */
.eng__backdrop { background: none; }
.eng__backdrop::before { display: none; }
.eng__backdrop::after {
  background:
    linear-gradient(rgba(23, 20, 15, .07) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(90deg, rgba(23, 20, 15, .07) 1px, transparent 1px) 0 0 / 80px 80px;
}
.eng__line { stroke: rgba(23, 20, 15, .5); }
.eng__line-start { fill: rgba(23, 20, 15, .75); }
.eng__marker-halo { fill: rgba(196, 10, 10, .1); stroke: rgba(196, 10, 10, .6); }
.eng__marker-dot { fill: #c40a0a; }
.eng-callout { border-top-color: rgba(23, 20, 15, .2); }
.eng-callout::before { background: #c40a0a; }
.eng-callout__title { color: var(--ink); }
.eng-callout__text { color: var(--ink-2); }

/* Six machines: the studio becomes a lit drawing board. */
.sol__backdrop { background: none; }
.sol__haze {
  background:
    radial-gradient(ellipse 30% 34% at 50% 48%, rgba(143, 0, 0, .06) 0%, rgba(143, 0, 0, 0) 74%),
    radial-gradient(ellipse 26% 52% at 19% 50%, rgba(60, 45, 25, .045) 0%, rgba(60, 45, 25, 0) 70%),
    radial-gradient(ellipse 26% 52% at 81% 50%, rgba(60, 45, 25, .045) 0%, rgba(60, 45, 25, 0) 70%);
}
.sol__grid--far {
  background:
    linear-gradient(rgba(23, 20, 15, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(23, 20, 15, .045) 1px, transparent 1px) 0 0 / 44px 44px;
}
.sol__grid--near {
  background:
    linear-gradient(rgba(23, 20, 15, .08) 1px, transparent 1px) 0 0 / 176px 176px,
    linear-gradient(90deg, rgba(23, 20, 15, .08) 1px, transparent 1px) 0 0 / 176px 176px;
}
.sol__dust i { background: rgb(58 49 40 / var(--a)); }
.sol__dust i.near { background: rgb(143 26 18 / var(--a)); }
.sol__light {
  background: radial-gradient(circle 46vmax at calc(50% + var(--mx) * 50%) calc(50% + var(--my) * 50%),
    rgba(255, 252, 244, .5) 0%, rgba(196, 10, 10, .025) 40%, rgba(0, 0, 0, 0) 70%);
}
.sol__focus {
  background: radial-gradient(ellipse 22% 26% at calc(var(--fx, 50) * 1%) calc(var(--fy, 50) * 1%),
    rgba(255, 252, 244, .6) 0%, rgba(196, 10, 10, .05) 42%, rgba(0, 0, 0, 0) 72%);
}
.sol__vignette, .sol__seam { display: none; }
.sol__head::before {
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(239, 233, 220, .85) 0%, rgba(239, 233, 220, .5) 45%, rgba(239, 233, 220, 0) 72%);
}
.sol-car__title { color: var(--ink); }
.sol-car.is-focus .sol-car__title { color: var(--ink); }
.sol-car:focus-visible .sol-car__title { color: #c40a0a; }
.sol-car__text { color: var(--ink-2); }
.sol-car__model, .sol__detail-model { color: var(--ink-3); }
.sol-car.is-focus .sol-car__label::before { background: #c40a0a; }
.sol__detail-hint { color: var(--ink-3); }
.sol__detail-title { color: var(--ink); }
.sol__detail-text { color: var(--ink-2); }
.sol__detail-body::before { background: #c40a0a; }

/* Phones: a thin table edge, a lighter frame. */
@media (max-width: 600px) {
  .paper { box-shadow: 0 2px 3px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 0, 0, .45); }
  .paper::after { outline: none; }
}

/* ---------- Paper surface: creases, fibres and a moving desk light (paper.js) ----------
   One viewport-sized layer, sticky inside the sheet. paper.js slides the texture with the page
   (transform only, no repaints) except while a section is pinned, when it holds still, so a pinned
   scene reads as a still page with the cars moving across it. Two crease maps of the same sheet
   lit from the left and from the right are crossfaded to move the light (--ll / --lr). */
.paper { background-image:
    radial-gradient(ellipse 140% 60% at 30% 0%, rgba(255, 252, 244, .55) 0%, rgba(255, 252, 244, 0) 60%),
    linear-gradient(90deg, rgba(120, 100, 70, .07) 0%, rgba(120, 100, 70, 0) 6%, rgba(120, 100, 70, 0) 94%, rgba(120, 100, 70, .07) 100%);
  background-size: 100% 100vh, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}
.paper__light {
  position: sticky; top: 0;
  display: block;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  pointer-events: none;
}
.paper__tex {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(100vh + 1024px);
  will-change: transform;
}
.paper__crease, .paper__fibre, .paper__lamp { position: absolute; inset: 0; }
.paper__crease { background: url("assets/paper-crease.webp") 0 0 / 1024px 1024px repeat; }
.paper__crease--l { opacity: var(--ll, .55); }
.paper__crease--r { background-image: url("assets/paper-crease-r.webp"); opacity: var(--lr, .45); }
.paper__fibre { background: url("assets/paper-fibre.webp") 0 0 / 512px 512px repeat; }
/* Desk lamp: a warm pool of light over the sheet that drifts with the light direction, and a soft
   fall-off towards the lower corners. */
.paper__lamp {
  inset: 0 -30%;
  background:
    radial-gradient(ellipse 38% 46% at 50% 18%, rgba(255, 251, 240, .42) 0%, rgba(255, 251, 240, .14) 45%, rgba(255, 251, 240, 0) 75%),
    radial-gradient(ellipse 60% 85% at 50% 30%, rgba(70, 50, 25, 0) 55%, rgba(70, 50, 25, .1) 100%);
  transform: translate3d(calc(var(--lx, 0) * 18%), 0, 0);
  will-change: transform;
}
/* The red panel carries the same creases under the same light. */
.hero__panel { background: linear-gradient(180deg, #7a0000 0%, var(--red-deep) 55%, #4f0000 100%); }
.hero__panel::before, .hero__panel::after {
  content: ""; position: absolute; inset: 0;
  background: url("assets/paper-crease.webp") 0 0 / 1024px 1024px repeat;
  opacity: var(--ll, .55);
}
.hero__panel::after { background-image: url("assets/paper-crease-r.webp"); opacity: var(--lr, .45); }

/* ---------- Paper surface, compositor-only (supersedes the crossfade above) ----------
   Each crease map is painted once into its own opaque sheet (paper colour + fibres + creases);
   the light moves by changing only the right-lit sheet's opacity, which the GPU composites
   without repainting anything. */
.paper__tex {
  background:
    url("assets/paper-fibre.webp") 0 0 / 512px 512px repeat,
    url("assets/paper-crease.webp") 0 0 / 1024px 1024px repeat,
    var(--paper);
}
.paper__crease--l, .paper__fibre { display: none; }
.paper__crease--r {
  background:
    url("assets/paper-fibre.webp") 0 0 / 512px 512px repeat,
    url("assets/paper-crease-r.webp") 0 0 / 1024px 1024px repeat,
    var(--paper);
  opacity: .5;
  will-change: opacity;
}
.paper__lamp { transform: none; }
/* Red panel: the left-lit creases, static (no per-frame work on the page layer). */
.hero__panel::before { opacity: .9; }
.hero__panel::after { display: none; }

/* "Preparing the machines": only until all six are ready, then it folds away. */
.sol__loading {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding-bottom: 8px;
  font: 500 10.5px var(--font-technical);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: opacity .6s ease, transform .6s ease;
}
.sol__loading-n { color: #c40a0a; letter-spacing: .12em; }
.sol__loading i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(23, 20, 15, .14);
  overflow: hidden;
}
.sol__loading i::before {
  content: ""; position: absolute; inset: 0;
  background: #c40a0a;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.sol__loading i::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg, rgba(196, 10, 10, 0), rgba(196, 10, 10, .5), rgba(196, 10, 10, 0));
  animation: sol-loading 1.4s ease-in-out infinite;
}
@keyframes sol-loading { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.sol.is-ready .sol__loading { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.sol.is-ready .sol__loading i::after { animation: none; }

/* ---------- Pencil annotations (sketch.js) ----------
   Small drafting marks in section corners that draw themselves once, the first time the section
   comes into view (stroke transitions only; nothing runs afterwards). */
.sketch {
  position: absolute;
  width: clamp(190px, 17vw, 260px);
  aspect-ratio: 260 / 140;
  pointer-events: none;
  overflow: visible;
  fill: none;
  stroke: rgba(23, 20, 15, .34);
  stroke-width: 1;
  stroke-linecap: round;
}
.sketch--tl { left: clamp(28px, 3vw, 52px); top: clamp(28px, 4vh, 48px); }
.sketch--tr { right: clamp(28px, 3vw, 52px); top: clamp(28px, 4vh, 48px); }
.sketch--bl { left: clamp(28px, 3vw, 52px); bottom: clamp(24px, 3.5vh, 44px); }
.sketch--br { right: clamp(28px, 3vw, 52px); bottom: clamp(24px, 3.5vh, 44px); }
.sketch line, .sketch circle, .sketch path {
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.55, .05, .25, 1) var(--d, 0s);
}
.sketch .sk-dash { stroke-dasharray: .012 .01; stroke-dashoffset: 0; opacity: 0; transition: opacity 1.2s ease var(--d, 0s); }
.sketch .sk-red { stroke: rgba(196, 10, 10, .6); }
.sketch.is-drawn line, .sketch.is-drawn circle, .sketch.is-drawn path { stroke-dashoffset: 0; }
.sketch.is-drawn .sk-dash { opacity: 1; }
.sk-text {
  font: 500 9.5px var(--font-technical);
  letter-spacing: .22em;
  fill: rgba(23, 20, 15, .5);
  stroke: none;
  opacity: 0;
  transition: opacity .8s ease var(--d, 0s);
}
.sk-red-text { fill: rgba(196, 10, 10, .75); }
.sk-faint { fill: rgba(23, 20, 15, .34); }
.sketch.is-drawn .sk-text { opacity: 1; }

/* =====================================================================================
   HERO COPY + NAVIGATION (business content)
   The copy sits in the hero's existing footer slot, to the right of the red panel, under the
   car (main.js sizes the car to fit above it). Destinations that don't exist yet are buttons
   marked [data-pending] with a "coming soon" note, never dead links.
   ===================================================================================== */
.hero__footer {
  /* start just right of the red panel; end on the content edge (same as the nav) */
  padding-left: calc(var(--split) + clamp(28px, 3vw, 52px));
  padding-right: calc((100% - min(100%, var(--container))) / 2 + var(--gutter));
  padding-bottom: clamp(28px, 6vh, 64px);
}
.hero__intro {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(18px, 2.6vh, 26px);
}
.hero__copy { max-width: 640px; }
.hero__tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(28px, 2.7vw, 42px);
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__tagline span { white-space: nowrap; }
.hero__tagline span:last-child { color: var(--red-bright); }
.hero__text {
  margin-top: 14px;
  max-width: 440px;
  font: 400 15px/1.6 var(--font-body);
  color: var(--ink-2);
}
.hero__ctas { display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap; flex-shrink: 0; }
.hero__ctas .btn--ghost { padding: 15px 34px; font-size: 13px; }

/* Buttons used as buttons (pending destinations): same look as the link buttons. */
button.btn { appearance: none; border: 0; background: none; font-family: var(--font-body); cursor: pointer; }

/* Pending destinations: a small note on hover / focus / tap ("Booking opens soon"). */
[data-pending] { position: relative; }
[data-pending]::after {
  content: attr(data-note);
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translate(-50%, 4px);
  padding: 7px 11px;
  white-space: nowrap;
  font: 500 10px/1 var(--font-technical);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 5;
}
.nav [data-pending]::after { top: calc(100% + 12px); bottom: auto; transform: translate(-50%, -4px); }
[data-pending]:hover::after, [data-pending]:focus-visible::after, [data-pending].is-noted::after {
  opacity: 1; transform: translate(-50%, 0);
}

/* Nav: pending items look like the links, with a small "soon" mark. */
.nav__pending {
  appearance: none; border: 0; background: none; padding: 0;
  font: 400 15px var(--font-body);
  color: var(--ink-2);
  cursor: default;
  display: inline-flex; align-items: flex-start; gap: 4px;
}
.nav__soon {
  font: 600 7.5px/1 var(--font-technical);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-top: -2px;
}
.nav__links { align-items: center; }

/* Seven destinations: tighter spacing so the links stay clear of the red panel... */
@media (min-width: 1401px) {
  .nav__right { gap: clamp(24px, 2.4vw, 40px); }
  .nav__links { gap: clamp(22px, 2.1vw, 36px); }
  .nav__links a, .nav__pending { font-size: 14.5px; }
}
/* ...and below 1400px the existing collapsible menu takes over (same behaviour and styling as
   the phone menu), so no link ever lands on the panel. */
@media (max-width: 1400px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: calc(100% + 12px); left: auto; right: var(--gutter);
    width: min(320px, calc(100% - 2 * var(--gutter)));
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 20px;
    background: rgba(239, 233, 220, .97);
    border: 1px solid rgba(23, 20, 15, .16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  /* Opening: visible at once (still fading in), so the links can take keyboard focus straight away;
     closing keeps the delayed hide from the rule above. */
  .nav.is-open .nav__links { transition-property: opacity, transform; }
  .nav__links a, .nav__pending { font-size: 16px; padding: 14px 0; border-bottom: 1px solid rgba(23, 20, 15, .1); text-align: left; }
  .nav__links > :last-child { border-bottom: 0; }
  .nav__links a::after { bottom: 10px; width: 32px; }
  .nav__links [data-pending]::after { display: none; }   /* the "soon" mark says it in the menu */
  .nav__right { gap: 16px; }
}
@media (max-width: 768px) {
  .nav__links { left: var(--gutter); right: var(--gutter); width: auto; }
}

@media (max-width: 900px) {
  .hero__tagline { font-size: clamp(24px, 3.6vw, 32px); }
  .hero__text { font-size: 14px; margin-top: 10px; }
}
/* Phones: the copy keeps clear of the red panel (36% wide), stacked and compact. */
@media (max-width: 600px) {
  .hero__footer { padding-left: calc(var(--split) + 14px); padding-right: 16px; padding-bottom: max(4vh, 20px); }
  .hero__tagline { font-size: min(22px, 5vw); line-height: 1.05; }   /* each line fits the column beside the red panel */
  .hero__tagline span { display: block; }
  .hero__text { font-size: 12.5px; line-height: 1.5; margin-top: 8px; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .hero__ctas .btn { text-align: center; padding: 12px 18px; font-size: 11.5px; }
  .nav__cta { padding: 9px 14px; font-size: 11px; letter-spacing: .06em; }
}

/* =====================================================================================
   WHY NAND? (the Highlights section, #highlights)
   Same composition: the top-down car between two columns of cards. A heading row sits above
   the grid (mostly in the section's former top padding, so the car gives up little height);
   the grid fills the rest and main.js fits the car to its slot as before.
   ===================================================================================== */
.features { display: flex; flex-direction: column; padding-top: clamp(28px, 4.5vh, 48px); }
.features__head {
  flex: none;
  text-align: center;
  opacity: clamp(0, calc(var(--reveal) * 1.4), 1);
  transform: translateY(calc((1 - clamp(0, calc(var(--reveal) * 1.4), 1)) * 24px));
  will-change: transform, opacity;
}
.features__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: min(64px, 5.4vw);
  line-height: 1;
  letter-spacing: .01em;
  background: linear-gradient(100deg, #3a0000 0%, var(--red) 38%, #c40a0a 70%, #ff2a2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.features__lead {
  margin-top: 10px;
  font: 400 16px/1.5 var(--font-body);
  color: var(--ink-2);
}
.features__grid { flex: 1 1 auto; min-height: 0; height: auto; }
.features__col { padding-top: 3vh; }
/* The new headings are all caps: a touch smaller than the old mixed-case titles so the longest
   ("RESPONSIVE EXPERIENCES") holds two lines at most. */
.feature__title { font-size: 28px; letter-spacing: .015em; }

@media (max-width: 900px) {
  .features__heading { font-size: min(52px, 7vw); }
  .features__lead { font-size: 14px; }
  .feature__title { font-size: 22px; }
}
@media (max-width: 600px) {
  /* Bottom padding +66px: the new card texts are shorter, so without it the lower cards would sit
     closer to the next section and the car would start its move to Top Speed over them sooner. */
  .features { padding-top: 56px; padding-bottom: 122px; }
  .features__head { margin-bottom: 22px; }
  .features__heading { font-size: 44px; }
  .features__lead { font-size: 13.5px; margin-top: 8px; }
  .features__col { padding-top: 0; }
  .feature__title { font-size: 17px; }
}
@media (max-width: 380px) {
  .feature__title { font-size: 15.5px; }
}

/* ---------- WHY NAND? plates: two-sided cards (why-cards.js adds tap-to-flip on touch) ----------
   Each feature is a small drawing sheet laid on the page: a lighter paper with the same frame as
   the page (ink hairline, red rule just inside, corner ticks). Front = the drawing, back = the copy.
   The card turns over on its horizontal axis (rotateX) on hover, keyboard focus or a tap; the hover
   target is the card box itself, which never moves, so the turn cannot flicker. */
.feature.why-card {
  width: min(100%, 360px);
  max-width: none;
  aspect-ratio: 16 / 10;
  max-height: 100%;                /* never taller than its row: the composition keeps its height */
  padding: 0;
  perspective: 1100px;
  outline: none;
}
.feature.why-card::before { display: none; }
.why-card__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3, .7, .2, 1);
}
@media (hover: hover) {
  .why-card:hover .why-card__inner { transform: rotateX(180deg); }
}
.why-card:focus-visible .why-card__inner,
.why-card.is-flipped .why-card__inner { transform: rotateX(180deg); }

.why-card__face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background:
    url("assets/paper-fibre.webp") 0 0 / 512px 512px,
    linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%),
    #f6f2e8;
  border: 1px solid rgba(23, 20, 15, .34);
  outline: 1px solid rgba(143, 0, 0, .22);
  outline-offset: -5px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 1px 2px rgba(40, 25, 10, .12),
    0 14px 26px -12px rgba(40, 25, 10, .35);
}
.why-card__face::after {           /* corner ticks */
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 12px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 1.5px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 12px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 1.5px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 12px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 1.5px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 12px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 1.5px 12px no-repeat;
}
.why-card:focus-visible .why-card__face--back {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--red-bright), 0 14px 26px -12px rgba(40, 25, 10, .35);
}

/* Front: the drawing, the plate number and a quiet hint (mirrored on the left so both face the car). */
.why-card__img {
  position: absolute; left: 5%; top: 13%;
  width: 90%; height: 75%;
  overflow: visible;
}
/* The drawing drafts itself on a loop, in plotter order: construction lines, outlines, details,
   hatching, red dimensions, red points; it holds, fades and starts again. Drawn layers use
   pathLength="1" (index.html), so every line takes the same time whatever its length. The four plates
   run out of step (--pd). Paused while the section is off-screen (why-cards.js) or the plate is
   turned over; reduced motion shows the finished drawing. */
.why-plate { --pd: 0s; }
.why-plate--2 { --pd: -2.6s; }
.why-plate--3 { --pd: -5.2s; }
.why-plate--4 { --pd: -7.8s; }
.wd > * {
  animation: 10.4s linear infinite both;
  animation-delay: var(--pd);
}
.wd-o > *, .wd-d > *, .wd-r > * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.wd-c > * { animation-name: wd-c; }
.wd-b > * { animation-name: wd-b; }
.wd-o > * { animation-name: wd-o; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
.wd-d > * { animation-name: wd-d; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
.wd-f > * { animation-name: wd-f; }
.wd-r > * { animation-name: wd-r; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
.wd-p > * { animation-name: wd-p; }
/* a little stagger inside a layer, so the pen seems to move from part to part */
.wd-o > :nth-child(2n), .wd-d > :nth-child(3n + 2), .wd-r > :nth-child(2n) { animation-delay: calc(var(--pd) + .3s); }
.wd-d > :nth-child(3n) { animation-delay: calc(var(--pd) + .6s); }
@keyframes wd-c { 0% { opacity: 0; } 6%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes wd-b { 0%, 8% { opacity: 0; } 16%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes wd-o { 0%, 5% { stroke-dashoffset: 1; opacity: 1; } 28% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes wd-d { 0%, 24% { stroke-dashoffset: 1; opacity: 1; } 46% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes wd-f { 0%, 44% { opacity: 0; } 54%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes wd-r { 0%, 50% { stroke-dashoffset: 1; opacity: 1; } 64% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes wd-p { 0%, 63% { opacity: 0; } 68%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
.features.is-offscreen .wd > *,
.why-card:hover .wd > *,
.why-card:focus-visible .wd > *,
.why-card.is-flipped .wd > * { animation-play-state: paused; }
.why-card__tag,
.why-card__cue {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  font: 500 10px var(--font-technical);
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-3);
}
.why-card__tag { top: 10px; left: 14px; gap: 6px; }
.why-card__tag b { font-weight: 600; font-size: 12px; letter-spacing: .2em; color: var(--red-bright); }
.why-card__cue { bottom: 9px; right: 14px; gap: 8px; font-size: 9.5px; letter-spacing: .22em; }
.why-card__cue::before { content: ""; width: 14px; height: 1px; background: var(--red-bright); }
.features__col--left .why-card__tag { left: auto; right: 14px; }
.features__col--left .why-card__cue { right: auto; left: 14px; flex-direction: row-reverse; }
.why-card__cue-tap { display: none; }
@media (hover: none) {
  .why-card__cue-hover { display: none; }
  .why-card__cue-tap { display: inline; }
}

/* Back: the copy, sized to the plate (container units), so it fits at every width. */
.why-card__face--back {
  transform: rotateX(180deg);
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(10px, 4.5%, 20px) clamp(12px, 7%, 26px);
}
.why-card__face--back .feature__num { font-size: clamp(10px, 3.6cqi, 13px); }
.why-card__face--back .feature__num::after {   /* small red accent line */
  content: ""; display: block;
  width: 28px; height: 2px; margin-top: clamp(5px, 2cqi, 9px);
  background: var(--red-bright);
}
.features__col--left .why-card__face--back .feature__num::after { margin-left: auto; }
.why-card__face--back .feature__title {
  margin: clamp(5px, 2.4cqi, 10px) 0 clamp(4px, 2cqi, 8px);
  font-size: clamp(15px, 7.8cqi, 28px);
}
.why-card__face--back .feature__text { font-size: clamp(11.5px, 4.3cqi, 15px); line-height: 1.55; }

@media (max-width: 900px) {
  .feature.why-card { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .feature.why-card { width: 100%; aspect-ratio: 3 / 4; }
  .why-card__img { left: 5%; top: 15%; width: 90%; height: 68%; }
  .why-card__face--back { padding: 10px; }
  .why-card__tag, .why-card__cue { font-size: 8.5px; letter-spacing: .16em; gap: 6px; }
  .why-card__tag { top: 8px; left: 10px; }
  .why-card__tag b { font-size: 10px; }
  .why-card__cue { bottom: 8px; right: 10px; }
  .features__col--left .why-card__tag { right: 10px; }
  .features__col--left .why-card__cue { left: 10px; }
}
@media (max-width: 380px) {
  .feature.why-card { aspect-ratio: 5 / 8; }
  .why-card__face--back .feature__text { font-size: 11px; line-height: 1.5; }
}
@media (max-width: 340px) {
  .feature.why-card { aspect-ratio: 9 / 16; }
  .why-card__face--back { padding: 8px; }
  .why-card__face--back .feature__title { font-size: 13.5px; }
  .why-card__face--back .feature__text { font-size: 10.5px; }
}
/* Reduced motion: no turning; the faces cross-fade instead. */
@media (prefers-reduced-motion: reduce) {
  .wd > * { animation: none !important; }
  .why-card__inner { transition: none; transform: none !important; }
  .why-card__face { -webkit-backface-visibility: visible; backface-visibility: visible; transition: opacity .2s ease; }
  .why-card__face--back { transform: none; opacity: 0; }
  .why-card:focus-visible .why-card__face--back,
  .why-card.is-flipped .why-card__face--back { opacity: 1; }
  .why-card:focus-visible .why-card__face--front,
  .why-card.is-flipped .why-card__face--front { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .why-card:hover .why-card__face--back { opacity: 1; }
  .why-card:hover .why-card__face--front { opacity: 0; }
}

/* =====================================================================================
   BUILT TO PERFORM. (the Performance section, #performance)
   Same composition as before (car bleeding off the left, copy on the right). The old spec row
   becomes a compact spec-sheet list of the three capabilities: index + heading | description.
   Scoped to #performance: the .drive* classes are shared with the Plans section.
   ===================================================================================== */
#performance .perf-caps { margin: 0; counter-reset: cap; }   /* nothing follows it now (the button was removed) */
#performance .perf-cap {
  display: grid;
  /* minmax(0, …): the list never widens the copy column (that would narrow the car's slot) */
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: 4px 20px;
  padding: 12px 0;
  border-top: 1px solid rgba(23, 20, 15, .12);
  counter-increment: cap;
}
#performance .perf-cap:last-child { border-bottom: 1px solid rgba(23, 20, 15, .12); }
#performance .perf-cap dt {
  font: 600 12px/1.6 var(--font-technical);
  letter-spacing: .16em;
  color: var(--ink);
}
#performance .perf-cap dt::before {
  content: counter(cap, decimal-leading-zero);
  margin-right: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--red-bright);
}
#performance .perf-cap dd {
  font: 400 14px/1.55 var(--font-body);
  color: var(--ink-2);
}
/* Tablet: a little less air so the taller copy block stays inside the screen. */
@media (max-width: 1100px) {
  #performance .drive__title { margin: 12px 0 16px; font-size: min(110px, 8vw); }
  #performance .drive__rule { margin: 20px 0 6px; }
  #performance .perf-cap { padding: 9px 0; }
  #performance .perf-caps { margin-bottom: 24px; }
  #performance .perf-cap dd { font-size: 13px; }
  /* narrow column: index above the heading, slightly tighter tracking, so headings never run
     into the description */
  #performance .perf-cap dt { font-size: 11px; letter-spacing: .1em; }
  #performance .perf-cap dt::before { display: block; margin: 0 0 1px; }
}
/* The taller copy reaches this section's bottom-right pencil mark: the button gets the corner. */
#performance .sketch--br { display: none; }
@media (max-width: 600px) {
  #performance .drive__title { font-size: min(72px, 18.5vw); }   /* the phone size, as before */
  #performance .perf-cap { grid-template-columns: minmax(0, 128px) minmax(0, 1fr); gap: 2px 14px; }
  #performance .perf-cap dt { font-size: 11px; letter-spacing: .12em; }
  #performance .perf-cap dt::before { margin-right: 7px; }
}
@media (max-width: 380px) {
  #performance .perf-cap { grid-template-columns: 1fr; }
}

/* =====================================================================================
   THE DIGITAL ADVANTAGE (#plans; formerly the pricing list)
   Two columns: the copy on the left, the car's lane on the right. The slot (#plans-slot) is the
   right column, shifted right by 19% + 32px (into the sheet's margin) for air beside the copy, and
   one screen tall at the top of the section. main.js shows the car there in top view and, as the
   copy scrolls, drives it down the lane (weaving gently, wheels rolling); it then turns and leaves
   off the right edge as the six machines arrive.
   Copy: heading and lead, four numbered benefit rows, "Why NAND" (four reasons in a 2 x 2 grid on
   wide screens) and a closing panel into /book-project/.
   Scoped to #plans (.drive* is shared with BUILT TO PERFORM).
   ===================================================================================== */
#plans {
  --gap: clamp(24px, 4vw, 64px);          /* = the shared .drive__grid column gap */
  --pad-y: clamp(48px, 8vh, 88px);
  --hair: rgba(23, 20, 15, .14);
  display: flex; flex-direction: column;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--pad-y) 0;
}
#plans .drive__grid { flex: 1 1 auto; height: auto; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
#plans .drive__content { max-width: 620px; }
#plans .drive__car {
  align-self: start;
  height: calc(100svh - 2 * var(--pad-y));
  margin-left: calc(19% + 32px - var(--gap));
  margin-right: calc(-19% - 32px + var(--gap));
}
#plans .drive__text { max-width: 520px; }
/* The copy reaches the section's bottom-left pencil mark: the content gets the corner. */
#plans .sketch--bl { display: none; }

/* The car's track (main.js draws it): red dots along the route, an arrowhead at the sheet's edge. */
.plans-track { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.plans-track[hidden] { display: none; }
.plans-track__line {
  fill: none;
  stroke: var(--red-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 11;            /* round caps on zero-length dashes: dots */
  opacity: .62;
}
.plans-track__head { fill: none; stroke: var(--red-bright); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }

/* Heading: ink, with the last word in NAND red (no gradient). */
#plans .adv-title {
  margin: 14px 0 20px;
  font-size: min(76px, 5.4vw);
  line-height: .92;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--ink);
}
#plans .adv-title span, #plans .adv-title em { display: block; }
#plans .adv-title em { font-style: normal; color: var(--red-bright); }

/* Why you need a website: numbered editorial rows between hairlines. */
.adv-label {
  margin: 4px 0 6px;
  font: 600 11.5px var(--font-technical);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.adv-list { list-style: none; margin: 0; border-bottom: 1px solid var(--hair); }
.adv-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--hair);
}
.adv-item__num, .adv-reason__num {
  padding-top: 3px;
  font: 500 11px var(--font-technical);
  letter-spacing: .22em;
  color: var(--red-bright);
}
.adv-item__title, .adv-reason__title {
  font: 600 13px/1.5 var(--font-technical);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.adv-item__text, .adv-reason__text {
  margin-top: 5px;
  max-width: 480px;
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--ink-2);
}

/* Why NAND: a second part under a drawing-sheet rule (red lead-in), reasons in a 2 x 2 grid. */
.adv-why {
  position: relative;
  margin-top: clamp(64px, 11vh, 120px);
  padding-top: 30px;
  border-top: 1px solid rgba(23, 20, 15, .3);
}
.adv-why::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 1px; background: var(--red-bright); }
.adv-why__title {
  margin: 12px 0 16px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: min(54px, 4vw);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--ink);
}
.adv-why__title em { font-style: normal; color: var(--red-bright); }
.adv-why__text { max-width: 500px; font: 400 16px/1.65 var(--font-body); color: var(--ink-2); }
.adv-reasons { list-style: none; margin: 28px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
.adv-reason { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 18px 0 20px; border-top: 1px solid var(--hair); }
.adv-reason__num { grid-row: 1 / span 2; }
.adv-reason__text { margin-top: 5px; }

/* Closing panel: a framed sheet note with the way into the booking flow. */
.adv-cta {
  position: relative;
  margin-top: clamp(48px, 8vh, 84px);
  padding: 26px 28px 28px;
  border: 1px solid rgba(23, 20, 15, .26);
  background: rgba(255, 252, 244, .45);
}
.adv-cta::before { content: ""; position: absolute; left: -1px; top: -1px; width: 48px; height: 2px; background: var(--red-bright); }
.adv-cta__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: min(38px, 2.8vw);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink);
}
.adv-cta__text { margin-top: 12px; max-width: 480px; font: 400 15px/1.65 var(--font-body); color: var(--ink-2); }
#plans .adv-cta__btn { margin-top: 22px; padding: 15px 34px; font-size: 13px; }
#plans .btn:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 6px; }

/* Wide screens: the reasons sit two by two. */
@media (min-width: 1200px) {
  .adv-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* in the grid each reason stacks (number over title) so its text gets the cell's full width */
  .adv-reason { display: block; }
  .adv-reason__num { display: block; padding-top: 0; margin-bottom: 8px; }
}
/* Tablet: the copy column keeps the larger share. */
@media (max-width: 1100px) {
  #plans .drive__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  #plans .adv-title { font-size: min(64px, 6.2vw); }
  .adv-why__title { font-size: min(46px, 4.8vw); }
  .adv-cta__title { font-size: min(34px, 3.6vw); }
}
/* Phones: the shared stacked layout (car above, copy below); no side-by-side shift. */
@media (max-width: 600px) {
  #plans { min-height: 0; padding: 0 0 56px; }
  #plans .drive__grid { grid-template-columns: 1fr; }
  #plans .drive__car { margin: 0; height: 42svh; }
  #plans .adv-title { font-size: min(52px, 12.5vw); }
  .adv-item, .adv-reason { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; }
  .adv-item__text, .adv-reason__text { font-size: 14px; }
  .adv-why { margin-top: 56px; }
  .adv-why__title { font-size: min(40px, 10vw); }
  .adv-why__text { font-size: 15px; }
  .adv-cta { padding: 22px 18px 22px; }
  .adv-cta__title { font-size: min(32px, 8.4vw); }
  #plans .adv-cta__btn { display: block; text-align: center; }
}

/* A restrained entrance as each row scrolls into view (scroll-driven, no script). Browsers without
   scroll-driven animations, and visitors who prefer reduced motion, see the content as is. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .adv-item, .adv-reason, .adv-why__title, .adv-why__text, .adv-cta {
      animation: adv-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}
@keyframes adv-in { from { opacity: 0; transform: translateY(18px); } }

/* =====================================================================================
   THE NAND PROCESS (title of the Engineering composition, #engineering)
   Centred at the top of the pinned overlay; engineering.js fades it in (--in) as the intro steps
   aside and starts the exploded car and the callouts just below it.
   ===================================================================================== */
.eng__head {
  --in: 0;
  position: absolute; left: 50%; top: clamp(28px, 5.5vh, 56px);
  width: min(calc(100% - 2 * var(--gutter)), 860px);
  text-align: center;
  opacity: var(--in);
  transform: translate(-50%, calc((1 - var(--in)) * 14px));
  will-change: transform, opacity;
}
.eng__head-label {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 12.5px var(--font-technical);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.eng__head-label::before,
.eng__head-label::after {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, rgba(196, 10, 10, 0), rgba(196, 10, 10, .8));
}
.eng__head-label::after { transform: scaleX(-1); }
.eng__head-title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: min(52px, 3.8vw);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.eng__head-title em { font-style: normal; color: var(--red-bright); }
/* The title reaches into this section's top-right pencil mark (its dimension line runs under
   "LAUNCH."): the title gets the space; the bottom-left mark stays. */
#engineering .sketch--tr { display: none; }
/* Tablet and phones (callouts in sequence): the title wraps cleanly over two lines. */
@media (max-width: 1023px) {
  .eng__head-title { font-size: min(44px, 8.4vw); margin-top: 8px; }
  .eng__head-label { font-size: 11px; gap: 8px; }
  .eng__head-label::before, .eng__head-label::after { width: 14px; }
}

/* =====================================================================================
   SIX MACHINES: service selection (#solutions)
   Each service title is a real link to the project enquiry (keyboard + screen readers), and a
   click or tap anywhere on its car follows it; hovering / focusing a service gives it a brighter
   number, full-contrast title and its description, and the others step back gently.
   ===================================================================================== */
.sol-car__link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sol-car__link:focus { outline: none; }
.sol-car__link:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 5px; }
/* Default: titles a touch softer, so the selected one can step up without any size change. */
.sol-car__title { color: rgba(23, 20, 15, .82); }
.sol-car__num { transition: color .4s ease; }
.sol-car.is-focus .sol-car__num { color: #e3121b; }
.sol-car.is-focus .sol-car__title { color: var(--ink); }
/* Short desktop windows (wider two-line labels): keep a clear margin to the central headline. */
@media (min-width: 1024px) and (max-height: 760px) {
  .sol-car__label { width: min(296px, 22vw); }
}
/* The car's model name shows with every selected service; only when solutions.js measures that the
   rows are too close for that extra line (very short windows) does the compact style drop it. */
@media (min-width: 1024px) and (max-height: 760px) {
  .sol-car__model { display: block; margin-top: 6px; }
}
.sol[data-compact="1"] .sol-car__model { display: none; }
/* Stacked layout (tablets): the shared detail line uses the bottom of the stage, where this
   section's two pencil marks sit; the selected service's text gets the room. */
@media (max-width: 1023px) {
  #solutions .sketch { display: none; }
}
/* The section's pencil marks sit where the bottom row's descriptions open: they fade out while a
   service is selected and come back with the default state. */
.sol .sketch { transition: opacity .4s ease; }
.sol.has-focus .sketch { opacity: 0; }
/* The other five step back, but stay readable. */
.sol.has-focus .sol-car:not(.is-focus) .sol-car__label { opacity: calc(var(--t) * .55); }
@media (prefers-reduced-motion: reduce) {
  .sol-car__label, .sol-car__label::before, .sol-car__text, .sol-car__model, .sol-car__num, .sol-car__title,
  .sol__detail-hint, .sol__detail-body { transition: none !important; }
}

/* =====================================================================================
   FINALE DEPARTURE (#configure) — paper theme
   The finale pins (sticky stage, like the engineering and six-machine scenes) for the car's
   departure; main.js follows the scroll. The page stays paper: fine pencil speed lines open
   around the vanishing point while the car accelerates away, and the pencil marks fade (main.js
   writes those two opacities directly). One screen-sized layer, opacity only. Scrolling up
   reverses all of it.
   ===================================================================================== */
.finale {
  display: block;
  height: 260vh;              /* 100vh pinned stage + 160vh of scroll for the departure */
  min-height: 0;
  padding: 0;
  overflow: visible;
  overflow-x: clip;           /* clip, not hidden: hidden would break the sticky stage */
}
.finale__stage {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  padding: 80px 0 48px;
  overflow: hidden;
}
.finale__inner { position: relative; width: 100%; }
.finale__streaks {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  fill: none;
  stroke: rgba(23, 20, 15, .2);
  stroke-width: 1;
  /* a soft warm glow where the car disappears */
  background: radial-gradient(ellipse 26% 20% at 50% var(--vy, 50%), rgba(196, 10, 10, .09) 0%, rgba(196, 10, 10, 0) 72%);
  opacity: 0;                 /* set by main.js from the departure progress */
  will-change: opacity;
}
.finale__streaks line { vector-effect: non-scaling-stroke; }
.finale__streaks .r { stroke: rgba(196, 10, 10, .42); }
@media (max-width: 900px) { .finale__stage { padding: 64px 0 40px; } }
@media (max-width: 600px) { .finale__stage { padding: 56px 0 32px; } }
@media (prefers-reduced-motion: reduce) { .finale__streaks { display: none; } }

/* The sheet's sticky crease layer must not hang past the bottom of the sheet. clip, not hidden:
   no scroll container, so the pinned scenes stay sticky, and no stacking context. */
.paper { overflow: clip; }

/* =====================================================================================
   CONTACT (#contact) — paper theme: invitation on the left, contact methods on the right
   (rendered from contact.js), in the same ink-and-red spec-sheet language as the pricing list.
   ===================================================================================== */
.contact {
  --reveal: 1;
  --line: rgba(23, 20, 15, .14);
  position: relative;
  padding: clamp(72px, 12vh, 140px) 0 clamp(64px, 10vh, 110px);
  color: var(--ink);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
  will-change: transform, opacity;   /* opacity + transform set by main.js as it scrolls in */
}
.contact__eyebrow, .contact__reach-label {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 12.5px var(--font-technical);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.contact__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--red-bright); }
/* The invitation: three short lines (the last in red), a drawing-sheet rule (red lead-in on an ink
   hairline, as on the inner pages' headers), measured copy and two keys of equal height. */
.contact__title {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(56px, 5.4vw, 92px);
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ink);
}
.contact__title span, .contact__title em { display: block; }
.contact__title em { font-style: normal; color: var(--red-bright); }
.contact__rule {
  display: block;
  width: min(100%, 440px); height: 1px;
  margin: 30px 0 24px;
  background: linear-gradient(90deg, var(--red-bright) 0, var(--red-bright) 48px, rgba(23, 20, 15, .22) 48px);
}
.contact__text {
  max-width: 440px;
  font: 400 17px/1.7 var(--font-body);
  color: var(--ink-2);
}
.contact__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 34px; }
/* Primary key: fixed height, padding and label size, softer shadow than the default keys. */
.contact .contact__ctas .btn.btn--solid.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  font-size: 12.5px; letter-spacing: .14em;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, filter .2s ease;
}
/* Primary: the NAND red key, a lighter drop shadow, lifts 1px on hover. */
.contact .contact__ctas .btn.btn--solid.btn {
  box-shadow: rgba(0, 0, 0, .22) 4px 6px 12px, #fb702c 2px 2px 10px 0 inset, #d42a02 -4px -4px 1px 0 inset;
}
@media (hover: hover) {
  .contact .contact__ctas .btn.btn--solid.btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: rgba(0, 0, 0, .26) 5px 9px 16px, #fb702c 2px 2px 10px 0 inset, #d42a02 -4px -4px 1px 0 inset;
  }
}
.contact .contact__ctas .btn.btn--solid.btn:active {
  filter: none; transform: none;
  box-shadow: rgba(0, 0, 0, 0) 0 0 0, inset .5px .5px 4px #000000, #d42a02 -3.2px -3.2px 8px 0 inset;
}
/* Secondary: the standard dark key exactly as in the hero (colour, shadows, 0.1s press), at the hero's
   size, centred to sit level with the primary. */
.contact .contact__ctas .btn.btn--ghost.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 15px 34px; font-size: 13px;
}
.contact .btn:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .contact .contact__ctas .btn.btn--solid.btn { transition: none; }
  .contact .contact__ctas .btn.btn--solid.btn:hover { transform: none; }
}
.contact__reach { padding-top: 10px; }
.contact__list { list-style: none; margin-top: 18px; border-bottom: 1px solid var(--line); }
.contact-method {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.contact-method__icon { width: 20px; height: 20px; color: var(--red-bright); }
.contact-method__label { font: 600 13px/1.4 var(--font-technical); letter-spacing: .16em; text-transform: uppercase; }
.contact-method__value { font: 400 14px/1.4 var(--font-body); color: var(--ink-2); text-align: right; overflow-wrap: anywhere; }
a.contact-method { transition: color .25s ease; }
a.contact-method:hover .contact-method__value, a.contact-method:focus-visible .contact-method__value { color: var(--ink); }
a.contact-method:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 4px; }
.contact-method.is-pending .contact-method__icon { color: rgba(23, 20, 15, .35); }
.contact-method.is-pending .contact-method__label { color: var(--ink-2); }
.contact-method.is-pending .contact-method__value {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- Contact icons: the supplied Uiverse social buttons (david-mohseni) ----------
   Value for value (except the colour: paper instead of white): 50px circle, 10px margin (top and bottom here, so the rows stay aligned),
   soft shadow, 0.2s back-easing; the tooltip (14px in the body face, 5px 8px, radius 5px, its 8px arrow)
   waits hidden behind the icon and springs out on hover with the design's 0.3s
   cubic-bezier(0.68, -0.55, 0.265, 1.55) overshoot, the button, tooltip and arrow all taking the
   hover colour (NAND red for all four). Turned sideways: it slides out to the LEFT of the icon,
   the same 16px clear of it as the design's gap above; where the list stacks under the headline
   (no room on the left) it slides out to the right. Tap shows it on touch screens (contact.js). */
.contact__list .contact-method { grid-template-columns: 50px minmax(0, 1fr) auto; padding: 0; }
.contact-method__btn {
  position: relative;
  /* the sheet's own paper (colour, fibres, creases) with a faint ink rim, instead of plain white */
  background:
    url("assets/paper-fibre.webp") 0 0 / 512px 512px repeat,
    url("assets/paper-crease.webp") 0 0 / 1024px 1024px repeat,
    var(--paper);
  border-radius: 50%;
  margin: 10px 0;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(23, 20, 15, .16);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  color: var(--ink);
}
.is-pending .contact-method__btn { color: var(--ink-2); }          /* same weight as :hover below, so hover wins */
.contact-method .contact-method__btn .contact-method__icon { width: 20px; height: 20px; color: inherit; }
.contact-method__tip {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: normal;
  white-space: nowrap;
  background: var(--paper);
  color: var(--paper);
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.contact-method__tip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: var(--paper);
  right: -3px;
  top: 50%;
  transform: translate(0, -50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.contact-method__btn:hover .contact-method__tip,
.contact-method__btn.is-touched .contact-method__tip,
a.contact-method:focus-visible .contact-method__tip {
  right: calc(100% + 16px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.contact-method__btn:hover .contact-method__tip,
.contact-method__btn.is-touched .contact-method__tip,
a.contact-method:focus-visible .contact-method__tip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.contact-method__btn:hover,
.contact-method__btn:hover .contact-method__tip,
.contact-method__btn:hover .contact-method__tip::before,
.contact-method__btn.is-touched,
.contact-method__btn.is-touched .contact-method__tip,
.contact-method__btn.is-touched .contact-method__tip::before,
a.contact-method:focus-visible .contact-method__btn,
a.contact-method:focus-visible .contact-method__tip,
a.contact-method:focus-visible .contact-method__tip::before {
  background: #c40a0a;
  color: #fff;
}
/* Stacked under the headline: no room on the left, so the tooltip comes out on the right. */
@media (max-width: 1023px) {
  .contact-method__tip { right: auto; left: 0; }
  .contact-method__tip::before { right: auto; left: -3px; }
  .contact-method__btn:hover .contact-method__tip,
  .contact-method__btn.is-touched .contact-method__tip,
  a.contact-method:focus-visible .contact-method__tip { right: auto; left: calc(100% + 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-method__btn, .contact-method__tip, .contact-method__tip::before { transition: none; }
}

/* =====================================================================================
   FOOTER — paper theme: brand, navigation, contact, legal, copyright, under a hairline.
   ===================================================================================== */
.site-footer {
  position: relative;
  color: var(--ink);
  padding: clamp(56px, 8vh, 88px) 0 0;
}
.site-footer::before {
  content: ""; position: absolute; top: 0;
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  height: 1px;
  background: linear-gradient(90deg, var(--red-bright) 0, var(--red-bright) 48px, rgba(23, 20, 15, .16) 48px);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px clamp(28px, 4vw, 64px);
}
.site-footer__logo {
  font: italic 900 30px "Inter", sans-serif;
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: none;
}
.site-footer__tagline { margin-top: 14px; max-width: 280px; font: 400 14px/1.6 var(--font-body); color: var(--ink-2); }
.site-footer__head {
  font: 500 11px var(--font-technical);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-bottom: 16px;
}
.site-footer__col ul { list-style: none; display: grid; gap: 10px; }
.site-footer__col a, .site-footer__pending {
  font: 400 14px/1.5 var(--font-body);
  color: var(--ink-2);
  text-decoration: none;
  transition: color .25s ease;
}
.site-footer__col a:hover, .site-footer__col a:focus-visible { color: var(--ink); }
.site-footer a:focus-visible, .site-footer__pending:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }
.site-footer__pending { appearance: none; border: 0; background: none; padding: 0; text-align: left; cursor: default; }
.site-footer__pending[data-pending]::after { bottom: auto; top: calc(100% + 8px); left: 0; transform: translate(0, -4px); }
.site-footer__pending[data-pending]:hover::after,
.site-footer__pending[data-pending]:focus-visible::after,
.site-footer__pending[data-pending].is-noted::after { transform: none; }
/* Footer contact list: same data as the contact section, compact (label + value). */
.site-footer__contact .contact-method { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-height: 0; padding: 0; border: 0; }
.site-footer__contact .contact-method__value { white-space: nowrap; overflow-wrap: normal; }
.site-footer__contact .contact-method__label { font: 400 14px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.site-footer__contact .contact-method__value { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); text-align: left; }
.site-footer__contact a .contact-method__value { color: var(--ink-2); }
.site-footer__base {
  margin-top: clamp(48px, 7vh, 72px);
  padding-top: 22px; padding-bottom: 36px;
  border-top: 1px solid rgba(23, 20, 15, .14);
  font: 400 12.5px var(--font-body);
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* Tablet: contact stacks; footer brand on its own row above the three columns. */
@media (max-width: 1023px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__title { font-size: min(84px, 10vw); }
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
/* Phones: one column for the footer lists, larger tap targets. */
@media (max-width: 600px) {
  .contact { padding: 64px 0 56px; }
  .contact__title { font-size: min(60px, 14vw); margin: 14px 0 0; }
  .contact__rule { margin: 24px 0 18px; }
  .contact__text { font-size: 15.5px; line-height: 1.65; }
  .contact__ctas { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 28px; }
  .contact__ctas .btn { text-align: center; }
  .contact-method { min-height: 60px; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 24px; }
  .site-footer__col:last-child { grid-column: 1 / -1; }
  .site-footer__col ul { gap: 4px; }
  .site-footer__col a, .site-footer__pending { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .site-footer__contact .contact-method { min-height: 44px; align-content: center; }
  /* Phones: the narrow column stacks each method's name over its value; long values may wrap. */
  .site-footer__contact .contact-method.contact-method { display: flex; width: 100%; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; align-content: flex-start; justify-content: center; gap: 2px; padding: 4px 0; text-align: left; }
  .site-footer__contact .contact-method__value { white-space: normal; overflow-wrap: anywhere; letter-spacing: .1em; }
  .site-footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
}

/* =====================================================================================
   COOKIE CONSENT (consent.js) — every page
   First-visit banner (bottom-left card, never covers the whole page) and the Cookie Settings
   dialog. Paper, ink and red like the rest of the site; Accept all and Reject optional share
   the same button style, so neither is pushed. Solid backgrounds only (no blur over the 3D layer).
   ===================================================================================== */
.ck-banner {
  position: fixed; left: 24px; bottom: 24px; z-index: 400;   /* above the nav (200) and the car (100) */
  width: min(500px, calc(100vw - 48px));
  padding: 22px 24px 20px;
  color: var(--ink);
  background: url("assets/paper-fibre.webp") 0 0 / 512px 512px repeat, var(--paper);
  border: 1px solid rgba(23, 20, 15, .42);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .18), 0 22px 60px rgba(0, 0, 0, .32);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.ck-banner[hidden] { display: none; }
.ck-banner.is-in { opacity: 1; transform: none; }
.ck-banner::before, .ck-dialog__form::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 48px; height: 3px;
  background: var(--red-bright);
}
.ck-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 11px var(--font-technical);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.ck-banner__title, .ck-dialog__title {
  margin: 8px 0 8px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 26px; line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}
.ck-banner__text, .ck-dialog__lead, .ck-dialog__more { font: 400 14px/1.6 var(--font-body); color: var(--ink-2); }
.ck-banner a, .ck-dialog a { color: var(--ink); text-underline-offset: 3px; }
.ck-banner__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  margin-top: 18px;
}
.ck-btn { padding: 12px 24px; font-size: 12px; text-align: center; text-transform: uppercase; }
.ck-link {
  appearance: none; border: 0; background: none;
  min-height: 44px; padding: 0;
  font: 600 11.5px var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer;
}
.ck-link:hover { color: var(--red-bright); }
.ck-banner :focus-visible, .ck-dialog :focus-visible { outline: 2px solid var(--red-bright); outline-offset: 4px; }
.ck-banner .btn:focus-visible, .ck-dialog .btn:focus-visible { outline-offset: 6px; }

/* ---------- Cookie Settings dialog ---------- */
.ck-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background: url("assets/paper-fibre.webp") 0 0 / 512px 512px repeat, var(--paper);
  border: 1px solid rgba(23, 20, 15, .5);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.ck-dialog::backdrop { background: rgba(12, 11, 9, .55); }
.ck-dialog[open] { animation: ck-in .3s cubic-bezier(.2, .7, .2, 1); }
@keyframes ck-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.ck-dialog__form { position: relative; padding: 28px 30px 26px; }
.ck-dialog__close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  appearance: none; border: 0; background: none;
  font: 400 28px/1 var(--font-body);
  color: var(--ink-2);
  cursor: pointer;
}
.ck-dialog__close:hover { color: var(--ink); }
.ck-dialog__title { padding-right: 40px; font-size: 32px; }
.ck-dialog__title:focus { outline: none; }
.ck-cats { list-style: none; margin: 22px 0 16px; border-bottom: 1px solid rgba(23, 20, 15, .16); }
.ck-cat { padding: 14px 0 16px; border-top: 1px solid rgba(23, 20, 15, .16); }
.ck-cat__row { display: flex; align-items: center; gap: 14px; }
.ck-cat__name {
  margin-right: auto;
  font: 600 12.5px var(--font-technical);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.ck-cat__state { font: 500 10.5px var(--font-technical); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.ck-cat__desc { margin-top: 6px; max-width: 520px; font: 400 13.5px/1.55 var(--font-body); color: var(--ink-2); }
.ck-cat__status { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
/* Square switch (drawing-board style); the real checkbox covers it, with a 44px-tall tap area. */
.ck-switch { position: relative; display: inline-flex; flex: none; padding: 9px 0; }
.ck-switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ck-switch__input:disabled { cursor: not-allowed; }
.ck-switch__ui {
  position: relative;
  width: 46px; height: 26px;
  border: 1px solid rgba(23, 20, 15, .5);
  background: rgba(255, 252, 244, .7);
  transition: background-color .2s ease, border-color .2s ease;
}
.ck-switch__ui::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: var(--ink-3);
  transition: transform .2s ease, background-color .2s ease;
}
.ck-switch__input:checked + .ck-switch__ui { background: var(--red-bright); border-color: var(--red-bright); }
.ck-switch__input:checked + .ck-switch__ui::after { transform: translateX(20px); background: #fff; }
.ck-switch__input:disabled:checked + .ck-switch__ui { background: var(--ink-3); border-color: var(--ink-3); }
.ck-switch__input:focus-visible + .ck-switch__ui { outline: 2px solid var(--red-bright); outline-offset: 3px; }
.ck-dialog__more { font-size: 13px; }
.ck-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 22px; }
.ck-dialog .btn--solid { padding: 14px 30px; font-size: 12.5px; }

/* ---------- 3D asset credits (credits.js): the Cookie Settings dialog, with a list of credits ---------- */
.cr-list { list-style: none; margin: 20px 0 14px; border-bottom: 1px solid rgba(23, 20, 15, .16); }
.cr-item { padding: 16px 0 18px; border-top: 1px solid rgba(23, 20, 15, .16); }
.cr-item__role { font: 600 11.5px var(--font-technical); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.cr-item__role span { color: var(--red-bright); }
.cr-item__facts { display: grid; gap: 4px; margin-top: 10px; }
.cr-item__facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.cr-item__facts dt { padding-top: 2px; font: 500 10.5px var(--font-technical); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.cr-item__facts dd { font: 400 13.5px/1.5 var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
.cr-item__muted { color: var(--ink-2); }
.cr-item__attr { margin-top: 10px; font: 400 12.5px/1.55 var(--font-body); color: var(--ink-2); }
.cr-item__link { margin-top: 8px; }
.cr-item__link a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  font: 600 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  text-decoration-color: var(--red-bright);
}
.cr-dialog a:hover { color: var(--red-bright); }
.cr-note { font: 400 12.5px/1.55 var(--font-body); color: var(--ink-3); }
@media (max-width: 600px) {
  .cr-dialog .ck-dialog__form { padding: 24px 20px 22px; }
  .cr-item__facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* Footer: "Cookie Settings" is a real control now (the legal pages are links). */
.site-footer__btn {
  appearance: none; border: 0; background: none; padding: 0;
  text-align: left;
  font: 400 14px/1.5 var(--font-body);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .25s ease;
}
.site-footer__btn:hover { color: var(--ink); }
.site-footer__btn:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }

@media (max-width: 600px) {
  .ck-banner { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 18px 14px; }
  .ck-banner__title { font-size: 22px; }
  .ck-banner__text { font-size: 13.5px; }
  .ck-banner__actions { gap: 10px 12px; margin-top: 14px; }
  .ck-banner .ck-btn { flex: 1 1 130px; padding: 12px 14px; font-size: 11.5px; }
  .ck-dialog__form { padding: 22px 18px 20px; }
  .ck-dialog__title { font-size: 26px; }
  .ck-dialog__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .ck-dialog__actions .btn { padding: 13px 18px; font-size: 12px; }
  .site-footer__btn { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-banner, .ck-switch__ui, .ck-switch__ui::after { transition: none; }
  .ck-dialog[open] { animation: none; }
}

/* =====================================================================================
   NAND CHECKBOX (.nand-checkbox) — shared component
   The supplied Uiverse design (byllzz), value for value: cream box with a 4px ink border, a hand-cut
   corner shape and a 5px offset shadow; checked turns orange (#ff5722) with the opposite cut, grows
   and tilts, and the tick "splashes" in. A real <input type="checkbox"> (visually hidden, still
   focusable, labelled and announced) drives it.
     <label class="nand-checkbox">
       <input type="checkbox" …>
       <span class="nand-checkbox__mark" aria-hidden="true"></span>
       <span class="nand-checkbox__label">Text</span>
     </label>
   The mark may also sit deeper in the label, after the input (the booking feature chips).
   Size: 1.5em of --nc-scale (25px as in the design); a context can set a smaller scale.
   Added to the design for accessibility: keyboard focus ring, disabled, required and reduced motion.
   Selectors only ever match input[type="checkbox"]: radios and switches are never styled.
   ===================================================================================== */
.nand-checkbox {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nand-checkbox > input[type="checkbox"] {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.nand-checkbox__mark {
  position: relative; flex: none;
  box-sizing: content-box;                     /* as in the design: 1.5em inside a 4px border */
  font-size: var(--nc-scale, 25px);
  width: 1.5em; height: 1.5em;
  background-color: #fdfcf0;
  border: 4px solid #1a1a1a;
  border-radius: 8% 92% 12% 88% / 87% 11% 89% 13%;
  box-shadow: 5px 5px 0 #1a1a1a;
  transition:
    transform .2s cubic-bezier(.175, .885, .32, 1.275),
    box-shadow .2s;
}
/* The tick */
.nand-checkbox__mark::after {
  content: "";
  position: absolute;
  display: none;
  left: .36em; top: .09em;
  width: .3em; height: .7em;
  transform: translate(-50%, -50%) rotate(40deg);
  border: solid #1a1a1a;
  border-width: 0 .25em .25em 0;
  border-radius: 2px;
}
.nand-checkbox__label { color: inherit; }

/* Hover: a small lift and tilt (unchecked boxes; a checked box keeps its own tilt, as designed). */
@media (hover: hover) {
  .nand-checkbox:hover > input[type="checkbox"]:not(:disabled):not(:checked) ~ .nand-checkbox__mark,
  .nand-checkbox:hover > input[type="checkbox"]:not(:disabled):not(:checked) ~ * .nand-checkbox__mark {
    transform: scale(1.05) rotate(2deg);
  }
}

/* Checked: orange, the opposite cut, grown and tilted; the tick splashes in. */
.nand-checkbox > input[type="checkbox"]:checked ~ .nand-checkbox__mark,
.nand-checkbox > input[type="checkbox"]:checked ~ * .nand-checkbox__mark {
  background-color: #ff5722;
  border-radius: 92% 8% 88% 12% / 11% 87% 13% 89%;
  transform: scale(1.1) rotate(-2deg);
}
.nand-checkbox > input[type="checkbox"]:checked ~ .nand-checkbox__mark::after,
.nand-checkbox > input[type="checkbox"]:checked ~ * .nand-checkbox__mark::after {
  display: block;
  animation: nand-splash .3s forwards;
}
@keyframes nand-splash {
  0% { transform: scale(0) rotate(40deg); opacity: 0; }
  70% { transform: scale(1.2) rotate(40deg); }
  100% { transform: scale(1) rotate(40deg); opacity: 1; }
}

/* Pressed: the box sinks and its shadow disappears. */
.nand-checkbox:active > input[type="checkbox"]:not(:disabled):not(:checked) ~ .nand-checkbox__mark,
.nand-checkbox:active > input[type="checkbox"]:not(:disabled):not(:checked) ~ * .nand-checkbox__mark {
  transform: scale(.9) translateY(4px);
}
.nand-checkbox:active > input[type="checkbox"]:not(:disabled) ~ .nand-checkbox__mark,
.nand-checkbox:active > input[type="checkbox"]:not(:disabled) ~ * .nand-checkbox__mark {
  box-shadow: 0 0 0 #1a1a1a;
}

/* Keyboard focus: the site's red focus ring around the box. */
.nand-checkbox > input[type="checkbox"]:focus-visible ~ .nand-checkbox__mark,
.nand-checkbox > input[type="checkbox"]:focus-visible ~ * .nand-checkbox__mark {
  outline: 2px solid var(--red-bright, #c40a0a);
  outline-offset: 5px;
}

/* Required and left empty after an attempt: a red shadow (the label explains in words). */
.nand-checkbox > input[type="checkbox"]:user-invalid ~ .nand-checkbox__mark,
.nand-checkbox > input[type="checkbox"]:user-invalid ~ * .nand-checkbox__mark {
  box-shadow: 5px 5px 0 var(--red-bright, #c40a0a);
}

/* Disabled: faded, flatter, no response. */
.nand-checkbox:has(> input[type="checkbox"]:disabled),
.nand-checkbox > input[type="checkbox"]:disabled { cursor: not-allowed; }
.nand-checkbox > input[type="checkbox"]:disabled ~ .nand-checkbox__mark,
.nand-checkbox > input[type="checkbox"]:disabled ~ * .nand-checkbox__mark {
  opacity: .45;
  box-shadow: 3px 3px 0 #1a1a1a;
}
.nand-checkbox > input[type="checkbox"]:disabled ~ .nand-checkbox__label,
.nand-checkbox > input[type="checkbox"]:disabled ~ * .nand-checkbox__label { opacity: .6; }

/* Reduced motion: no transitions, no splash, no hover or press movement; the tick is simply there. */
@media (prefers-reduced-motion: reduce) {
  .nand-checkbox__mark { transition: none; }
  .nand-checkbox:hover .nand-checkbox__mark, .nand-checkbox:active .nand-checkbox__mark { transform: none; }
  .nand-checkbox > input[type="checkbox"]:checked ~ .nand-checkbox__mark::after,
  .nand-checkbox > input[type="checkbox"]:checked ~ * .nand-checkbox__mark::after {
    animation: none;
    transform: scale(1) rotate(40deg);          /* the splash's end state */
  }
}

/* =====================================================================================
   NAND KEYS — every button on the NAND pages
   The supplied Uiverse design (Praashoo7, "Teenage Engineering EP-133 K.O. II buttons"), with its
   exact colours, 10px radius, layered shadows, labels in the body face (the design used Montserrat) and 0.1s press: the outer shadow
   collapses into an inset one and the label sinks 0.5px (icons shrink to 0.95).
   Sized to their labels (each context keeps its own padding and font size); main actions use the
   red key, all other buttons the dark key. The design's grey key isn't used.
   Excluded on purpose: text-link buttons (footer "Cookie Settings", Edit, Clear, the booking step
   list, the Privacy Policy link) and the six-machine service titles.
   ===================================================================================== */
/* Shape, type and motion shared by every key (doubled class names outrank the older button rules) */
.btn.btn.btn,
.nav__toggle.nav__toggle.nav__toggle,
.ck-dialog__close.ck-dialog__close.ck-dialog__close,
.tg-chip.tg-chip.tg-chip {
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: .075em;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: .1s ease-in-out;
}
.btn.btn::before { content: none; }           /* the old skewed backgrounds */
.btn.btn.btn > *, .tg-chip.tg-chip > * { transition: .1s ease-in-out; }

/* Dark key (#545251) */
.btn.btn--ghost.btn,
.nav__toggle.nav__toggle.nav__toggle,
.ck-dialog__close.ck-dialog__close.ck-dialog__close,
.tg-chip.tg-chip.tg-chip {
  background-color: #545251;
  box-shadow: rgba(0, 0, 0, .377) 10px 10px 8px,
    #a8a6a4 1.5px 1.5px 1px 0px inset, #545251 -3.2px -3.2px 8px 0px inset;
}
.btn.btn--ghost.btn:active,
.nav__toggle.nav__toggle.nav__toggle:active,
.ck-dialog__close.ck-dialog__close.ck-dialog__close:active,
.tg-chip.tg-chip.tg-chip:active {
  box-shadow: rgba(0, 0, 0, .377) 0px 0px 0px, inset .5px .5px 4px #000000,
    #545251 -3.2px -3.2px 8px 0px inset;
}

/* Red key (#d42a02): main actions */
.btn.btn--solid.btn,
.nav__cta.btn.btn,
.ck-banner .ck-btn.btn.btn,
.tg-chip.tg-chip.tg-chip[aria-pressed="true"] {
  background-color: #d42a02;
  box-shadow: rgba(0, 0, 0, .377) 10px 10px 8px, #fb702c 2px 2px 10px 0px inset,
    #d42a02 -4px -4px 1px 0px inset;
}
.btn.btn--solid.btn:active,
.nav__cta.btn.btn:active,
.ck-banner .ck-btn.btn.btn:active,
.tg-chip.tg-chip.tg-chip[aria-pressed="true"]:active {
  box-shadow: rgba(0, 0, 0, .377) 0px 0px 0px, inset .5px .5px 4px #000000,
    #d42a02 -3.2px -3.2px 8px 0px inset;
}

/* Press: the label sinks 0.5px; icons (menu lines, close ×) shrink to 0.95. */
.btn.btn.btn:active > *, .tg-chip.tg-chip:active > * { transform: translateY(.5px); }
.nav__toggle:active span, .ck-dialog__close:active span { scale: .95; }

/* Icon keys: white marks on the dark key */
.nav__toggle.nav__toggle.nav__toggle span { background: #fff; }
.ck-dialog__close.ck-dialog__close.ck-dialog__close { color: #fff; font-weight: 400; }
/* Gallery filter counts on the keys */
.tg-chip.tg-chip .tg-chip__n { color: #ffb08f; }
.tg-chip.tg-chip[aria-pressed="true"] .tg-chip__n { color: #ffe1d4; }
.btn.btn.btn:hover { color: #fff; }
.btn.btn.btn:disabled { cursor: progress; }
/* Phones: narrow columns. Long labels wrap inside their key instead of running past it. */
@media (max-width: 600px) {
  .hero__ctas .btn.btn.btn { white-space: normal; padding-left: 12px; padding-right: 12px; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.btn.btn, .btn.btn.btn > *, .nav__toggle, .ck-dialog__close, .tg-chip.tg-chip.tg-chip, .tg-chip.tg-chip > * { transition: none; }
}

/* =====================================================================================
   LOADING SCREEN (homepage only, loader.js)
   The same drafting table and paper sheet as the page (same textures, frame and shadow, the
   sheet's light drifting slowly), with the supplied Uiverse loader (Subaashbala) value for value:
   weight 900, black, the middle word collapsing to -1em letter-spacing at half opacity and
   opening again, 1500 ms, cubic-bezier(.645, .045, .355, 1), infinite alternate.
   Under it, the real loading progress 001 → 100 and a thin red line. It fades away at 100,
   revealing the identical sheet underneath. Shown only while html.is-loading (set by a script).
   ===================================================================================== */
.ld { display: none; }
html.is-loading { overflow: hidden; scrollbar-gutter: stable; }   /* no scrolling, no width jump after */
html.is-loading .ld, .ld.is-out { display: block; }
.ld {
  position: fixed; inset: 0;
  z-index: 1000;                  /* above the nav (200), the 3D layer and the cookie notice (400) */
  touch-action: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 255, 255, .025) 0%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(rgba(150, 170, 200, .055) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(150, 170, 200, .055) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgba(150, 170, 200, .022) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(150, 170, 200, .022) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(ellipse 120% 90% at 50% 40%, #1a1d22 0%, #131518 60%, #0c0d0f 100%);
  transition: opacity .55s cubic-bezier(.4, 0, .2, 1);
}
.ld.is-out { opacity: 0; pointer-events: none; }

/* The sheet: where the page's sheet sits, continuing past the bottom of the screen. */
.ld__sheet {
  position: absolute;
  left: var(--paper-gap); right: var(--paper-gap);
  top: var(--paper-y); bottom: -60px;
  overflow: hidden;
  background:
    url("assets/paper-fibre.webp") 0 0 / 512px 512px repeat,
    url("assets/paper-crease.webp") 0 0 / 1024px 1024px repeat,
    var(--paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 2px 3px rgba(0, 0, 0, .35),
    0 18px 40px rgba(0, 0, 0, .45),
    0 50px 120px rgba(0, 0, 0, .55);
}
/* The light: the right-lit creases fading in and out over the left-lit ones (opacity only). */
.ld__lit {
  position: absolute; inset: 0;
  background:
    url("assets/paper-fibre.webp") 0 0 / 512px 512px repeat,
    url("assets/paper-crease-r.webp") 0 0 / 1024px 1024px repeat,
    var(--paper);
  opacity: .5;
  animation: ld-light 6s ease-in-out infinite alternate;
  will-change: opacity;
}
@keyframes ld-light { from { opacity: .18; } to { opacity: .82; } }
/* Drawing-sheet frame, as on the page */
.ld__sheet::after {
  content: "";
  position: absolute;
  inset: clamp(6px, 1.1vw, 16px);
  border: 1px solid rgba(23, 20, 15, .38);
  outline: 1px solid rgba(143, 0, 0, .32);
  outline-offset: -5px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 22px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 2px 22px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 22px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 2px 22px no-repeat;
}

.ld__center {
  position: absolute;
  left: var(--paper-gap); right: var(--paper-gap); top: var(--paper-y); bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 16px;
  text-align: center;
  transition: opacity .32s ease, transform .32s ease;
}
.ld.is-done .ld__center { opacity: 0; transform: translate3d(0, -8px, 0); }

/* The supplied loader (.loader → .ld__text); only the size is capped so it fits a phone. */
.ld__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: min(2em, 6.4vw);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;                     /* until its typeface is ready (no swap mid-animation) */
  transition: opacity .3s ease;
}
html.ld-font .ld__text { opacity: 1; }
.ld__text > * { color: black; }
.ld__text span { display: inline-flex; }
.ld__text span:nth-child(2) {
  letter-spacing: -1em;
  overflow: hidden;
  animation: ld-reveal 1500ms cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
}
@keyframes ld-reveal {
  0%, 100% { opacity: 0.5; letter-spacing: -1em; }
  50% { opacity: 1; letter-spacing: 0em; }
}

/* Drawn by a worker (loader-text.js) once it's ready: the same animation, off the main thread, so
   it never stutters while the page prepares its models. The CSS text above stays as the fallback. */
.ld__text { position: relative; }
.ld__canvas { position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; opacity: 0; }
.ld.ld--canvas .ld__canvas { opacity: 1; }
.ld.ld--canvas .ld__text > span { visibility: hidden; }
.ld.ld--canvas .ld__text span:nth-child(2) { animation: none; letter-spacing: 0; }   /* no layout work */

/* 001 → 100 and the progress line */
.ld__meter { display: grid; justify-items: center; gap: 12px; margin-top: 26px; }
.ld__num {
  padding-left: .32em;            /* balances the letter-spacing after the last digit */
  font: 600 13px/1 var(--font-technical);
  letter-spacing: .32em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.ld__bar { position: relative; display: block; width: min(240px, 52vw); height: 2px; overflow: hidden; background: rgba(23, 20, 15, .16); }
.ld__bar i { position: absolute; inset: 0; background: var(--red-bright); transform: scaleX(0); transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
  .ld__text span:nth-child(2) { animation: none; letter-spacing: 0; opacity: 1; }
  .ld__lit { animation: none; }
  .ld, .ld__center, .ld__text { transition: none; }
}

/* =====================================================================================
   NAND TEXT BOX (.nand-input inside .nand-input-wrap) — shared component
   The supplied Uiverse design (0xnihilism): white box, 4px black border, 8px hard shadow, Courier
   New 18px; hover lifts it (-4px) onto a 12px shadow; focus turns it black with a light border; an
   empty valid box "types" itself in (width 0 -> 100%, 30 steps); filled text is bold.
   Removed at the user's request: the focus shake, the glitch while typing and the blinking "|".
     <div class="nand-input-wrap"><input class="nand-input" placeholder="Type your name" /></div>
   Added for the site: error and read-only states; reduced motion (no movement).
   ===================================================================================== */
.nand-input-wrap {
  position: relative;
  width: 100%;
  max-width: 270px;
}
.nand-input {
  width: 100%;
  max-width: 270px;
  height: 60px;
  padding: 12px;
  font-size: 18px;
  font-family: var(--font-body);
  color: #000;
  background-color: #fff;
  border: 4px solid #000;
  border-radius: 0;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 8px 8px 0 #000;
}
.nand-input::placeholder { color: #888; }
.nand-input:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 #000;
}
.nand-input:focus {
  background-color: #010101;
  color: #fff;
  border-color: #d6d9dd;
}
.nand-input:focus::placeholder { color: #fff; }

@keyframes nand-typing {
  from { width: 0; }
  to { width: 100%; }
}
.nand-input:valid { animation: nand-typing 2s steps(30, end); }

/* Focused or filled boxes don't replay the type-in (the design's shake / glitch held these). */
.nand-input:focus { animation: none; }

.nand-input:not(:placeholder-shown) { animation: none; }

.nand-input:not(:placeholder-shown) {
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0px 0px 0 #000;
}

/* Added: a field with an error (its message explains in words) and a locked, read-only field. */
.nand-input[aria-invalid="true"]:not(:focus) { border-color: #c40a0a; box-shadow: 8px 8px 0 #c40a0a; }
.nand-input[aria-invalid="true"]:not(:focus):hover { box-shadow: 12px 12px 0 #c40a0a; }
.nand-input[readonly]:not(:focus) { background-color: #ecebe6; color: #444; }

@media (prefers-reduced-motion: reduce) {
  .nand-input, .nand-input:valid { animation: none; transition: none; }
  .nand-input:hover { transform: none; }
}

/* =====================================================================================
   FOUNDERS — portrait placeholder + founder card (homepage footer, /founders/)
   The real photographs aren't available yet: each portrait is a clearly marked placeholder
   (hatched like the site's other unbuilt parts, drafting corner marks, a dashed generic outline
   and "Photograph to be added"), never a picture of anyone. Names and the role "Founder" only.
   ===================================================================================== */
.fd-portrait {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(23, 20, 15, .38);
  background: rgba(255, 252, 244, .55);
  transition: border-color .35s ease;
}
/* The hatching and outline sit on their own layer, so a linked card can zoom them inside the frame. */
.fd-portrait__zoom {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, rgba(23, 20, 15, .045) 0 8px, rgba(23, 20, 15, 0) 8px 16px);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
/* corner marks, as on the drawing sheet (top; the note band closes the frame below) */
.fd-portrait::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 16px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 1.5px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 16px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 1.5px 16px no-repeat;
}
.fd-portrait__figure { width: 48%; margin-bottom: 14%; color: rgba(23, 20, 15, .34); }
.fd-portrait__note {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 8px;
  border-top: 1px dashed rgba(23, 20, 15, .3);
  background: rgba(255, 252, 244, .75);
  font: 600 9.5px/1.3 var(--font-technical);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-3);
}
.fd-card { display: grid; align-content: start; gap: 12px; min-width: 0; }
.fd-card__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 20, 15, .42);
  transition: border-color .35s ease;
}
/* Linked cards (to /founders/<name>/): the same card, with a restrained hover / focus state —
   the portrait's contents zoom slightly, the frame and rule turn red and a small VIEW PROFILE tag
   rises in above the photograph note. */
.fd-card__link { display: grid; align-content: start; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
a.fd-card__link:hover, a.fd-card__link:focus-visible { color: inherit; }
.fd-card__link:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 6px; }
.fd-card__cue {
  position: absolute; left: 50%; bottom: 46px;
  padding: 6px 10px;
  background: var(--red-bright);
  font: 600 9.5px/1 var(--font-technical);
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.fd-card__link:hover .fd-portrait, .fd-card__link:focus-visible .fd-portrait,
.fd-card__link:hover .fd-card__meta, .fd-card__link:focus-visible .fd-card__meta { border-color: var(--red-bright); }
.fd-card__link:hover .fd-portrait__zoom, .fd-card__link:focus-visible .fd-portrait__zoom { transform: scale(1.05); }
.fd-card__link:hover .fd-card__cue, .fd-card__link:focus-visible .fd-card__cue { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .fd-portrait, .fd-portrait__zoom, .fd-card__meta, .fd-card__cue { transition: none; }
  .fd-card__link:hover .fd-portrait__zoom, .fd-card__link:focus-visible .fd-portrait__zoom { transform: none; }
  .fd-card__link:hover .fd-card__cue, .fd-card__link:focus-visible .fd-card__cue { transform: translate(-50%, 0); }
}
.fd-card__num { font: 500 11px var(--font-technical); letter-spacing: .24em; color: var(--red-bright); }
.fd-card__role { font: 600 10.5px var(--font-technical); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.fd-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Homepage footer: the founders' introduction, above the footer columns. */
.site-footer__people {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px clamp(28px, 4vw, 64px);
  align-items: end;
  padding-bottom: clamp(44px, 6vh, 64px);
  margin-bottom: clamp(44px, 6vh, 64px);
  border-bottom: 1px solid rgba(23, 20, 15, .14);
}
.site-footer__people-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.site-footer__people-title em { display: block; font-style: normal; color: var(--red-bright); }
.site-footer__people-line { margin-top: 16px; font: 400 17px/1.6 var(--font-body); color: var(--ink-2); }
/* MEET THE FOUNDERS: the site's red key (.btn--solid + NAND KEYS), exactly as START YOUR PROJECT. */
.site-footer__people-cta { margin-top: 26px; }
/* The founders as an editorial index (text only, not links; the portraits are on /founders/):
   number | FOUNDER over the name, between hairline rules. Hover: the name eases 5px to the right
   and a red rule draws along the row's foot (nothing suggests navigation). Centred against the
   introduction. */
.site-footer__people-list { align-self: center; list-style: none; border-bottom: 1px solid rgba(23, 20, 15, .42); }
.site-footer__people-list li + li { border-top: 1px solid rgba(23, 20, 15, .16); }
.site-footer__people-list li:first-child { border-top: 1px solid rgba(23, 20, 15, .42); }
.fr-row {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  padding: 18px 0;
  color: var(--ink);
  cursor: default;
}
.fr-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--red-bright);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.fr-row__num { align-self: start; padding-top: 3px; font: 500 11px var(--font-technical); letter-spacing: .24em; color: var(--red-bright); }
.fr-row__text { display: grid; gap: 6px; min-width: 0; }
.fr-row__role { font: 600 10.5px var(--font-technical); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.fr-row__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  .fr-row:hover .fr-row__name { transform: translateX(5px); }
  .fr-row:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fr-row::after, .fr-row__name { transition: none; }
  .fr-row:hover .fr-row__name { transform: none; }
}

@media (max-width: 1023px) {
  .site-footer__people { column-gap: 28px; }
}
@media (max-width: 680px) {
  .site-footer__people { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fr-row { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; }
  .fr-row__name { font-size: min(30px, 8.4vw); }
  .site-footer__people-line { font-size: 15px; }
  .site-footer__people-cta { display: block; text-align: center; }   /* full width, as the contact keys */
  .fd-portrait__note { font-size: 8.5px; letter-spacing: .16em; }
  .fd-card__cue { bottom: 58px; font-size: 8.5px; letter-spacing: .18em; padding: 5px 8px; }
}