/* ============================================================
   CINEMATIC — Way.com repair & maintenance theme
   Shared shell + homepage
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --ink:        #07080a;
  --ink-2:      #0c0e11;
  --ink-3:      #121519;
  --ink-4:      #191d22;

  --paper:      #f4f1ec;
  --paper-70:   rgba(244, 241, 236, 0.70);
  --paper-52:   rgba(244, 241, 236, 0.52);
  --paper-34:   rgba(244, 241, 236, 0.34);

  --line:       rgba(244, 241, 236, 0.09);
  --line-2:     rgba(244, 241, 236, 0.17);

  --amber:      #d8a24a;
  --amber-2:    #b8813180;
  --steel:      #78838f;

  /* One variable family carries both body and display, separated by its
     width axis rather than by a second typeface: 100% for reading, 116% for
     headlines. A high-contrast display serif was the wrong register here —
     its hairlines go fragile at headline size on a dark plate, and it reads
     editorial-fashion rather than engineered. */
  --sans:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weight and width are the whole difference between the display voice and
     the reading voice, so they live here as one tunable pair. */
  --display-w:  600;
  --display-wd: 114%;
  --display-ls: -0.028em;

  --gutter:  clamp(20px, 4.4vw, 68px);
  --maxw:    1440px;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--amber); color: var(--ink); }

/* ---------- 3. Film grain + vignette ---------- */
.grain {
  position: fixed;
  inset: -120px;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  animation: grain-shift 6s steps(6) infinite;
  mix-blend-mode: overlay;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-14px, 8px); }
  40%  { transform: translate(10px, -12px); }
  60%  { transform: translate(-8px, -6px); }
  80%  { transform: translate(12px, 10px); }
  100% { transform: translate(0, 0); }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 8999;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

/* ---------- 4. Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: clamp(88px, 12vw, 176px); }
.section--tight { padding-block: clamp(64px, 8vw, 112px); }
.section--hairline { border-top: 1px solid var(--line); }

/* Where one section ends on a closed element and the next opens with a rule,
   the two default paddings stack into a dead gap — around 345px at desktop
   under the stats band. These trim one side without touching the other. */
.section--pb-tight { padding-bottom: clamp(40px, 4.6vw, 66px); }
.section--pt-tight { padding-top: clamp(56px, 6.6vw, 96px); }

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

/* ---------- 4b. Section atmosphere ----------
   An unbroken #07080a down the whole page reads as a dead screen rather than a
   lit room, which is the single biggest reason the lower half of the homepage
   felt flat. Two layers fix it: a warm wash placed roughly where the workshop
   lamps would fall, and an optional photographic backdrop sunk behind a scrim.
   Both are decorative and sit below the content. */
.section--lit::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(56% 44% at 6% -8%, rgba(216, 162, 74, 0.11), transparent 70%),
    radial-gradient(46% 40% at 97% 106%, rgba(120, 131, 143, 0.10), transparent 72%);
}

.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Oversized on purpose: main.js drifts this on the y axis, and a 100%-tall
   image would show the section behind it at the travel limits. */
.backdrop img {
  position: absolute;
  left: 0;
  top: -9%;
  width: 100%;
  height: 118%;
  object-fit: cover;
  opacity: 0.2;
  filter: grayscale(0.35) contrast(1.06);
}

/* For sections dense with small text — a form, a table — where even a sunk
   photograph starts competing with what sits on top of it. */
.backdrop--faint img { opacity: 0.1; }

/* Held down hard at the edges so the photograph reads as depth behind the
   section rather than as wallpaper competing with the copy. */
.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--ink) 0%,
    rgba(7, 8, 10, 0.58) 26%,
    rgba(7, 8, 10, 0.66) 72%,
    var(--ink) 100%);
}

/* Anything sharing a section with the layers above has to be lifted over them,
   because an absolutely positioned backdrop otherwise paints on top of static
   content regardless of source order. */
.section--lit > .shell,
.section--art > .shell { position: relative; z-index: 1; }

/* ---------- 4c. Framed image ----------
   A plate sitting in a tray: hairline outer shell, inset core with a
   concentric radius. Keeps photographs from floating loose on the background. */
.frame {
  position: relative;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--line-2);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(244, 241, 236, 0.05), rgba(244, 241, 236, 0.014));
}

.frame__inner {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  background: var(--ink-3);
  aspect-ratio: 3 / 2;
}

.frame__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.2s var(--ease);
}

.frame:hover .frame__inner img { transform: scale(1); }

.frame__cap {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding-inline: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--paper-34);
}

.frame__cap::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

/* ---------- 5. Typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-52);
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--amber);
}

/* Everything spoken in the display voice. Body and display are the same
   family, so the width axis is what tells them apart. */
.display,
.nav__brand,
.drawer__links a,
.stat__num,
.svc-row__name,
.process__dial-num,
.step__title,
.quote__text,
.footer__wordmark {
  font-family: var(--display);
  font-weight: var(--display-w);
  font-stretch: var(--display-wd);
  letter-spacing: var(--display-ls);
}

.display {
  line-height: 1;
  text-wrap: balance;
}

/* A 600-weight grotesque carries far more visual mass than the hairline
   serif these replaced, so every step comes down substantially. */
.display--xl { font-size: clamp(36px, 5.9vw, 90px); }
.display--l  { font-size: clamp(31px, 4.1vw, 60px); }
.display--m  { font-size: clamp(25px, 2.8vw, 41px); }

.display em {
  font-style: italic;
  font-weight: 500;
  color: var(--amber);
}

.lede {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--paper-70);
  max-width: 54ch;
}

.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-34);
}

/* ---------- 6. Buttons ---------- */
.btn {
  --btn-fg: var(--ink);
  --btn-bg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 30px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease);
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--amber);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}

.btn:hover::after { transform: translateY(0); }

.btn__arrow {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform 0.45s var(--ease);
}

.btn:hover .btn__arrow { transform: translate(4px, -4px); }

.btn--ghost {
  --btn-fg: var(--paper);
  background: transparent;
  border: 1px solid var(--line-2);
}

.btn--ghost:hover { --btn-fg: var(--ink); }

/* Emergency call-out. Reads as urgent without shouting — amber hairline,
   a live pulse, and the 24/7 promise carried in the button itself. */
.btn--sos {
  --btn-fg: var(--amber);
  padding-left: 24px;
  background: rgba(216, 162, 74, 0.07);
  border: 1px solid rgba(216, 162, 74, 0.40);
}

.btn--sos:hover { --btn-fg: var(--ink); }

.btn__pulse {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.btn__pulse::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid currentColor;
  animation: sosPulse 2.4s var(--ease) infinite;
}

@keyframes sosPulse {
  0%        { transform: scale(0.5); opacity: 0.85; }
  70%, 100% { transform: scale(1.3);  opacity: 0; }
}

.btn__tag {
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.14em;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--amber);
  color: var(--ink);
  transition: background 0.55s var(--ease), color 0.55s var(--ease);
}

/* The hover fill turns the button amber, so the chip inverts to stay legible. */
.btn--sos:hover .btn__tag { background: var(--ink); color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .btn__pulse::after { animation: none; opacity: 0.4; transform: scale(1); }
}

/* Text link with wiping underline */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 4px;
}

.link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--paper);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.4s var(--ease);
}

.link:hover::after {
  transform-origin: left;
  animation: link-wipe 0.6s var(--ease);
}

@keyframes link-wipe {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* ---------- 7. Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 8000;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  background: rgba(7, 8, 10, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 82px;
}

.nav__brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 21px;
  font-weight: 700;
}

.nav__brand span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper-34);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 38px;
}

.nav__link {
  position: relative;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--paper-70);
  padding-block: 6px;
  transition: color 0.35s var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}

.nav__link:hover,
.nav__link.is-active { color: var(--paper); }

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__right { display: flex; align-items: center; gap: 20px; }

.nav__phone {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--paper-70);
}

.nav__cta { padding: 13px 24px; font-size: 13px; }

/* Burger */
.burger {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
}

.burger__box { width: 16px; display: grid; gap: 4px; }

.burger__box i {
  display: block;
  height: 1px;
  background: var(--paper);
  transition: transform 0.4s var(--ease), opacity 0.3s;
}

.burger.is-open .burger__box i:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
.burger.is-open .burger__box i:nth-child(2) { opacity: 0; }
.burger.is-open .burger__box i:nth-child(3) { transform: translateY(-2.5px) rotate(-45deg); }

/* Drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 7900;
  background: var(--ink-2);
  padding: 118px var(--gutter) 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s var(--ease);
  visibility: hidden;
}

.drawer.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

.drawer__links li {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.drawer__links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 20px;
  font-size: clamp(27px, 6.4vw, 41px);
  line-height: 1;
  transform: translateY(102%);
  transition: transform 0.7s var(--ease);
}

.drawer.is-open .drawer__links a { transform: translateY(0); }
.drawer.is-open .drawer__links li:nth-child(2) a { transition-delay: 0.06s; }
.drawer.is-open .drawer__links li:nth-child(3) a { transition-delay: 0.12s; }
.drawer.is-open .drawer__links li:nth-child(4) a { transition-delay: 0.18s; }
.drawer.is-open .drawer__links li:nth-child(5) a { transition-delay: 0.24s; }

.drawer__links em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--paper-34);
}

.drawer__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-52);
}

/* ---------- 8. Reveal primitives ---------- */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; will-change: transform; }

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
}

[data-clip] { clip-path: inset(0 0 100% 0); }

/* ============================================================
   11. HERO — the pinned service film

   Four photographic plates cross-dissolve as you scroll while a
   technical HUD is drawn over the top. The plates carry the light;
   the HUD carries the story.
   ============================================================ */
.hero { position: relative; }

.hero__pin {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}

.film { position: absolute; inset: 0; }

/* The stage is one drawn SVG scene; slice keeps the car centred whatever the
   viewport, the same crop the photographic plates used to get from
   object-fit: cover. */
.film__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.film__plate {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity, transform;
}

.film__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
}

/* Grade: ties the plates into the page's own black and keeps the header
   and the running caption legible. Always on. */
.film__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,8,10,0.74) 0%, rgba(7,8,10,0) 24%, rgba(7,8,10,0) 58%, rgba(7,8,10,0.9) 100%);
}

/* Crushes the left third so the opening headline has something solid to
   sit on. film.js lifts it once the headline is gone, which is what opens
   the photograph up for the rest of the film. */
.film__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,8,10,0.95) 0%, rgba(7,8,10,0.78) 30%, rgba(7,8,10,0.10) 60%, rgba(7,8,10,0.42) 100%);
}

/* Shutter dip that hides the cut back to the finished car. */
.film__dip {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: var(--ink);
}

/* Light that travels with the bonnet wipe. It is centred on `left`, so
   film.js can park it exactly on the clip edge — kept vertical and
   unskewed for that reason. */
.film__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  margin-left: -15%;
  pointer-events: none;
  opacity: 0;
  filter: blur(6px);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(216, 162, 74, 0.05) 32%,
    rgba(216, 162, 74, 0.17) 45%,
    rgba(244, 241, 236, 0.30) 50%,
    rgba(216, 162, 74, 0.15) 55%,
    rgba(216, 162, 74, 0.04) 68%,
    transparent 100%);
}

/* ---- Technical HUD over the plates ---- */
.hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hud__reticle {
  position: absolute;
  width: 108px;
  height: 108px;
  margin: -54px 0 0 -54px;
  opacity: 0;
}

.hud__reticle::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--amber);
  border-radius: 50%;
}

.hud__reticle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--amber);
}

.hud__reticle i { position: absolute; background: var(--amber); }
.hud__reticle i:nth-child(1) { left: 50%; top: -15px; width: 1px; height: 12px; }
.hud__reticle i:nth-child(2) { left: 50%; bottom: -15px; width: 1px; height: 12px; }
.hud__reticle i:nth-child(3) { top: 50%; left: -15px; height: 1px; width: 12px; }
.hud__reticle i:nth-child(4) { top: 50%; right: -15px; height: 1px; width: 12px; }

/* The readout sits on its own plate — the plates underneath range from
   black bumper to a lit engine bay, and amber-on-amber is unreadable. */
.hud__reticle b {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  white-space: nowrap;
  border: 1px solid rgba(216, 162, 74, 0.3);
  background: rgba(7, 8, 10, 0.66);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}

.hud__reticle--flip b { left: auto; right: calc(100% + 16px); }

/* Wave 1 — engine bay */
.hud__reticle--oil     { left: 31%; top: 50%; }
.hud__reticle--coolant { left: 46%; top: 40%; }
/* Wave 2 — filter and running gear */
.hud__reticle--filter  { left: 34%; top: 44%; }
.hud__reticle--brake   { left: 55%; top: 65%; }
.hud__reticle--tyre    { left: 78%; top: 64%; }
/* Wave 3 — electrical and emissions */
.hud__reticle--battery { left: 29%; top: 54%; }
.hud__reticle--belts   { left: 38%; top: 43%; }
.hud__reticle--smoke   { left: 57%; top: 57%; }

/* Scan line: kept inside the engine-bay band so it never draws a bar
   across empty floor, and soft enough to read as light rather than ink. */
.hud__scan {
  position: absolute;
  top: 26%;
  bottom: 30%;
  left: 0;
  width: 1px;
  opacity: 0;
  background: linear-gradient(180deg,
    transparent 0%, rgba(216,162,74,0.28) 20%, rgba(216,162,74,0.6) 50%,
    rgba(216,162,74,0.28) 80%, transparent 100%);
}

.hud__scan::before {
  content: '';
  position: absolute;
  top: -14%;
  bottom: -14%;
  left: -26px;
  width: 53px;
  background: linear-gradient(90deg, transparent, rgba(216, 162, 74, 0.1), transparent);
  filter: blur(11px);
}

.hud__panel {
  position: absolute;
  right: var(--gutter);
  top: 128px;
  width: 254px;
  padding: 17px 19px 19px;
  opacity: 0;
  border: 1px solid var(--line-2);
  background: rgba(7, 8, 10, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hud__panel h5 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 13px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-34);
}

.hud__panel h5 em { font-style: normal; color: var(--amber); }

.hud__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-block: 7px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
}

.hud__row span { color: var(--paper-52); letter-spacing: 0.08em; }
.hud__row b { font-weight: 400; color: var(--paper); }

.hud__gauge { margin-top: 15px; }

.hud__gauge-track { position: relative; height: 2px; background: var(--line-2); }

.hud__gauge-fill {
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
}

.hud__gauge-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-34);
}

/* Sits opposite the headline, which comes back on the left when the film
   signs off, so the two balance instead of overlapping. */
.hud__seal {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  width: 172px;
  height: 172px;
  margin-top: -86px;
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
  border: 1px solid var(--amber);
  border-radius: 50%;
  background: rgba(7, 8, 10, 0.62);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.hud__seal svg { width: 30px; height: 30px; margin: 0 auto 12px; }

.hud__seal span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
}

.hud__seal em {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--paper-34);
}

/* Centred by the box model, not by a transform. film.js animates this block on
   the y axis, and any `translateY(-50%)` here would be the first thing GSAP
   overwrote — which dropped the copy half a viewport and pushed the buttons
   off screen once the film reached its resting frame. */
.hero__copy {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: var(--maxw);
  margin-inline: auto;
  pointer-events: none;
  z-index: 3;
}

.hero__title { max-width: 15ch; }

.hero__title .line-mask > span { display: block; }

.hero__sub {
  margin-top: 30px;
  max-width: 40ch;
  color: var(--paper-70);
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.62;
}

.hero__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  pointer-events: auto;
}

/* Chapter caption that changes as the film plays */
.hero__chapter {
  position: absolute;
  left: var(--gutter);
  bottom: 46px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero__chapter-index {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--amber);
}

.hero__chapter-name {
  position: relative;
  height: 18px;
  overflow: hidden;
  min-width: 210px;
}

.hero__chapter-name b {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-70);
  line-height: 18px;
  transition: transform 0.5s var(--ease), opacity 0.4s;
}

/* Film progress rail */
.hero__rail {
  position: absolute;
  right: var(--gutter);
  bottom: 46px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__rail-track {
  position: relative;
  width: clamp(90px, 16vw, 210px);
  height: 1px;
  background: var(--line-2);
}

.hero__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__rail-pct {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--paper-52);
  min-width: 42px;
}

/* ---------- 9. Marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 22px;
}

.marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  will-change: transform;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-52);
  white-space: nowrap;
}

.marquee__item i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

/* ---------- 10. Intro / two-column statement ---------- */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

/* Not sticky any more: the column now carries a photograph as well as the
   heading, and a sticky block that tall outruns the prose beside it. */
.statement__aside { position: relative; }

.statement__shot { margin-top: clamp(30px, 3.6vw, 48px); }

.statement__body p + p { margin-top: 22px; }

.statement__body p {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.58;
  color: var(--paper-70);
}

.statement__body p:first-child { color: var(--paper); }

.statement__sign {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.statement__sign strong { font-weight: 500; font-size: 14px; }
.statement__sign span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--paper-34); text-transform: uppercase; }

/* ---------- 11. Stats ----------
   Closed top and bottom so the four figures read as one deliberate band
   rather than as numbers adrift in the section's padding. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}

/* Only when the band follows copy in the same section. Baked into .stats it
   stacked with the section padding on pages where the band stands alone. */
.stats--spaced { margin-top: clamp(52px, 6.4vw, 96px); }

.stat {
  position: relative;
  padding: clamp(26px, 2.9vw, 38px) clamp(18px, 2.1vw, 30px) clamp(26px, 2.9vw, 38px) 0;
  border-right: 1px solid var(--line);
}

.stat:last-child { border-right: 0; }

/* Warm lift under the cursor, so the band answers back instead of sitting inert. */
.stat::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(216, 162, 74, 0.08), transparent 74%);
  transition: opacity 0.55s var(--ease);
}

.stat:hover::before { opacity: 1; }

.stat__icon {
  display: block;
  width: 21px;
  height: 21px;
  margin-bottom: clamp(18px, 2.2vw, 28px);
  color: var(--amber);
  opacity: 0.78;
}

.stat__icon svg { width: 100%; height: 100%; }

.stat__num {
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1;
}

.stat__num sup {
  font-family: var(--mono);
  font-size: 13px;
  vertical-align: super;
  color: var(--amber);
  letter-spacing: 0;
}

/* Was --paper-34, which left the labels barely legible next to the figures —
   the numbers were doing all the work on their own. */
.stat__label {
  margin-top: 13px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-70);
}

/* The figure alone invites "so what?". This answers it. */
.stat__note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-34);
}

/* ---------- 12. Service index (hover-reveal list) ---------- */
.svc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.svc-list { position: relative; border-top: 1px solid var(--line); }

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 46px 104px minmax(0, 1fr) minmax(0, 0.78fr) auto;
  align-items: center;
  gap: 24px;
  padding-block: clamp(24px, 2.6vw, 38px);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  transition: padding-inline 0.55s var(--ease);
}

.svc-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink-3);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease);
}

.svc-row:hover::before { transform: scaleY(1); transform-origin: top; }
.svc-row:hover { padding-inline: 26px; }

.svc-row__idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--paper-34);
  transition: color 0.4s var(--ease);
}

.svc-row:hover .svc-row__idx { color: var(--amber); }

/* The list used to be seven lines of text on black, which is what made this
   whole section read as dull. Every row now shows the work it describes. */
.svc-row__shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 7px;
  aspect-ratio: 3 / 2;
  background: var(--ink-3);
  border: 1px solid var(--line);
}

.svc-row__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.68;
  transform: scale(1.06);
  transition: opacity 0.55s var(--ease), transform 0.8s var(--ease);
}

.svc-row:hover .svc-row__shot img { opacity: 1; transform: scale(1); }

.svc-row__name {
  font-size: clamp(20px, 2.1vw, 31px);
  line-height: 1.08;
  transition: transform 0.55s var(--ease);
}

.svc-row:hover .svc-row__name { transform: translateX(10px); }

.svc-row__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-52);
  max-width: 40ch;
}

.svc-row__meta {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-34);
}

/* Marks the one service that is not measured in bay time. */
.svc-row__tag {
  padding: 4px 9px;
  border: 1px solid rgba(216, 162, 74, 0.42);
  border-radius: 5px;
  color: var(--amber);
}

.svc-row__go {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  flex: none;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease);
}

.svc-row:hover .svc-row__go {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}

/* ---------- 13. Roadside assistance ---------- */
.sos__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(40px, 5.4vw, 90px);
  align-items: center;
}

.sos__shot .frame__inner { aspect-ratio: 16 / 10; }

/* Live dispatch strip laid over the photograph, so the round-the-clock
   promise is shown happening rather than only claimed in the copy. Anchored
   to the image box, not the frame, which also holds the caption. */
.sos__ticker {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border: 1px solid rgba(244, 241, 236, 0.14);
  border-radius: 10px;
  background: rgba(9, 10, 11, 0.72);
  backdrop-filter: blur(9px);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sos__ticker b { color: var(--paper-70); font-weight: 500; }
.sos__ticker em { margin-left: auto; font-style: normal; color: var(--paper-34); }

.sos__ticker-dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

.sos__ticker-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--amber);
  animation: sosPulse 2.4s var(--ease) infinite;
}

.sos__list {
  margin-top: clamp(30px, 3.4vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.4vw, 36px);
  list-style: none;
}

.sos__list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--paper-70);
}

.sos__list li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border: 1px solid var(--amber);
  transform: rotate(45deg);
}

.sos__cta {
  margin-top: clamp(32px, 3.6vw, 46px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 34px);
  flex-wrap: wrap;
}

.btn--sos-solid {
  background: rgba(216, 162, 74, 0.13);
  border-color: rgba(216, 162, 74, 0.55);
}

.sos__eta b {
  display: block;
  font-family: var(--display);
  font-size: 30px;
  font-weight: var(--display-w);
  font-stretch: var(--display-wd);
  letter-spacing: var(--display-ls);
  color: var(--paper);
}

/* Direct child only — the counter lives in a span inside the figure. */
.sos__eta > span {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-34);
}

/* ---------- 14. Process ---------- */
.process { position: relative; }

.process__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: clamp(38px, 4.6vw, 68px);
}

/* Steps on the left, the work itself on the right. */
.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

.process__stage { position: sticky; top: 116px; }

.process__dial {
  width: 128px;
  height: 128px;
  position: relative;
  flex: none;
}

.process__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.process__dial-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 31px;
}

/* ---------- 13b. Process stage (the action, on the right) ---------- */
.stage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 4 / 5;
  background: var(--ink-3);
  border: 1px solid var(--line-2);
}

.stage__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 0.85s var(--ease), transform 1.7s var(--ease);
}

.stage__shot img { width: 100%; height: 100%; object-fit: cover; }

.stage__shot.is-live { opacity: 1; transform: scale(1); }

/* A line travelling down the plate, so the panel reads as work in progress
   rather than a photograph parked next to the text. The bar is a fixed
   fraction of the frame and moves by a multiple of its own height, which
   keeps the travel exact without animating layout. */
.stage__scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stage__scan::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(216, 162, 74, 0.07) 68%, rgba(216, 162, 74, 0.18));
  border-bottom: 1px solid rgba(216, 162, 74, 0.7);
  animation: stage-scan 4.8s var(--ease-io) infinite;
}

@keyframes stage-scan {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateY(454%); opacity: 0; }
}

.stage__bracket {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid var(--amber);
  opacity: 0.5;
  pointer-events: none;
}

.stage__bracket--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.stage__bracket--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.stage__hud {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: rgba(7, 8, 10, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.stage__hud-idx {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--amber);
  flex: none;
}

.stage__hud-name {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper-70);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage__hud-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
  animation: stage-pulse 1.9s ease-in-out infinite;
}

@keyframes stage-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .stage__scan::before,
  .stage__hud-live { animation: none; }
  .stage__scan { display: none; }
}

.step {
  position: relative;
  padding: clamp(28px, 3.4vw, 44px) 0 clamp(28px, 3.4vw, 44px) clamp(30px, 4vw, 64px);
  border-top: 1px solid var(--line);
}

.step:last-child { border-bottom: 1px solid var(--line); }

.step::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 1px;
  background: var(--amber);
  transition: width 0.9s var(--ease);
}

.step.is-live::before { width: 100%; }

.step__idx {
  position: absolute;
  left: 0;
  top: clamp(30px, 3.6vw, 48px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--paper-34);
  transition: color 0.5s var(--ease);
}

.step.is-live .step__idx { color: var(--amber); }

.step__title {
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.12;
  margin-bottom: 12px;
  transition: opacity 0.5s var(--ease);
}

.step__body {
  font-size: 15px;
  line-height: 1.62;
  color: var(--paper-52);
  max-width: 52ch;
}

.step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-52);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 13px;
}

/* ---------- 15. Testimonials ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.quote {
  background: var(--ink);
  padding: clamp(30px, 3.4vw, 46px);
  display: flex;
  flex-direction: column;
  gap: 26px;
  transition: background 0.5s var(--ease);
}

.quote:hover { background: var(--ink-3); }

.quote__stars { display: flex; gap: 5px; color: var(--amber); }
.quote__stars svg { width: 13px; height: 13px; }

/* Quotes are read, not proclaimed, so they step back from the full display
   weight and width the other headings use. */
.quote__text {
  font-weight: 500;
  font-stretch: 100%;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.42;
  flex: 1;
}

.quote__who { display: flex; align-items: center; gap: 13px; }

.quote__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink-4);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper-70);
  flex: none;
}

.quote__who strong { display: block; font-size: 13.5px; font-weight: 500; }
.quote__who span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-34); }

/* ---------- 16. Booking ---------- */
.book {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: start;
}

.book__facts { margin-top: 44px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }

.book__fact { background: var(--ink); padding: 20px 24px; }
.book__fact dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-34); }
.book__fact dd { margin: 7px 0 0; font-size: 15px; }

.form { display: grid; gap: 26px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.field { position: relative; }

.field label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-34);
  margin-bottom: 11px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 15.5px;
  outline: none;
  border-radius: 0;
  transition: border-color 0.4s var(--ease);
}

.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--ink-3); color: var(--paper); }

.field textarea { resize: vertical; min-height: 92px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--paper-34); }

.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--amber); }

.field__caret {
  position: absolute;
  right: 2px;
  bottom: 18px;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--paper-52);
  border-bottom: 1px solid var(--paper-52);
  transform: rotate(45deg);
  pointer-events: none;
}

.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.4;
  cursor: pointer;
}

.form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.form__note { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--paper-34); }

.form__ok {
  display: none;
  align-items: center;
  gap: 11px;
  padding: 16px 20px;
  border: 1px solid var(--amber-2);
  background: rgba(216, 162, 74, 0.07);
  font-size: 14px;
}

.form__ok.is-on { display: flex; }

/* ---------- 17. CTA band ---------- */
.band {
  position: relative;
  padding-block: clamp(96px, 13vw, 190px);
  border-top: 1px solid var(--line);
  overflow: hidden;
  text-align: center;
}

.band__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  background: radial-gradient(circle, rgba(216, 162, 74, 0.13), transparent 62%);
  pointer-events: none;
}

.band__title { position: relative; }

.band__actions { position: relative; margin-top: 46px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- 18. Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-top: clamp(56px, 6vw, 88px); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.6fr));
  gap: 40px;
  padding-bottom: clamp(48px, 6vw, 80px);
}

.footer__blurb { max-width: 34ch; color: var(--paper-52); font-size: 14.5px; line-height: 1.62; margin-top: 20px; }

.footer__col h4 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-34);
  margin-bottom: 20px;
}

.footer__col li + li { margin-top: 12px; }
.footer__col a { font-size: 14px; color: var(--paper-70); transition: color 0.35s var(--ease); }
.footer__col a:hover { color: var(--amber); }

.footer__wordmark {
  font-weight: 700;
  font-stretch: 122%;
  font-size: clamp(48px, 12.8vw, 202px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  user-select: none;
  padding-bottom: 8px;
}

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 26px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-34);
}

.footer__bar a:hover { color: var(--amber); }

/* ---------- 19. Responsive ---------- */
@media (max-width: 1100px) {
  .statement,
  .process__grid,
  .sos__grid,
  .book { grid-template-columns: 1fr; }

  /* Single column, so the stage leads instead of trailing four screens of
     text, and it lies down into a landscape crop. */
  .process__stage { position: static; order: -1; margin-bottom: 34px; }
  .stage { aspect-ratio: 16 / 10; }

  .quotes { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer__top { grid-template-columns: 1fr 1fr; }

  .svc-row { grid-template-columns: 44px 92px minmax(0, 1fr) auto; }
  .svc-row__desc { display: none; }
}

/* The desktop nav runs out of room well before the burger used to take over
   at 860px: from about 1000px down, the links, phone number and CTA wrapped
   onto two lines and doubled the header height. Hand over while there is
   still room to do it cleanly. */
@media (max-width: 1000px) {
  .nav__links, .nav__phone, .nav__cta { display: none; }
  .burger { display: grid; }
}

@media (max-width: 860px) {
  .nav { height: 70px; }

  .hero__pin { height: 92vh; min-height: 560px; }

  /* On a phone the plate is taller than it is wide, so bias the crop
     towards the car and drop the readout panel and scan line. */
  .film__plate img { object-position: 46% 46%; }

  .film__grade {
    background:
      linear-gradient(180deg, rgba(7,8,10,0.72) 0%, rgba(7,8,10,0.12) 26%, rgba(7,8,10,0.62) 62%, rgba(7,8,10,0.97) 100%);
  }

  /* The headline sits at the bottom on a phone, so the vertical grade
     already carries it and the side scrim would only dull the car. */
  .film__scrim { display: none; }

  .hud__panel, .hud__scan { display: none; }
  .hud__reticle { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
  /* Clears the 15px tick mark the label would otherwise sit on top of. */
  .hud__reticle b { font-size: 8.5px; padding: 5px 8px; left: calc(100% + 18px); }
  .hud__reticle--flip b { right: calc(100% + 18px); }

  /* Eight reticles cannot be spaced apart in a portrait frame without the
     rings and their labels colliding, so only one per wave survives and the
     three that remain are spread down the crop. The oil label also unflips,
     because at 34% there is not room for it to the left. */
  .hud__reticle--coolant,
  .hud__reticle--filter,
  .hud__reticle--tyre,
  .hud__reticle--battery,
  .hud__reticle--belts { display: none; }

  .hud__reticle--oil   { left: 34%; top: 40%; }
  .hud__reticle--brake { left: 58%; top: 60%; }
  .hud__reticle--smoke { left: 38%; top: 73%; }

  .hud__reticle--oil b { left: calc(100% + 18px); right: auto; }
  .hud__reticle--brake b { left: auto; right: calc(100% + 18px); }

  /* The copy sits at the bottom of a portrait hero, so the seal cannot stay
     beside it — it goes into the empty upper third instead, clear of both
     the header and the headline it appears alongside. */
  .hud__seal {
    right: auto;
    left: 50%;
    top: clamp(84px, 9.5%, 100px);
    width: 112px;
    height: 112px;
    margin: 0 0 0 -56px;
  }

  .hud__seal svg { width: 24px; height: 24px; margin-bottom: 8px; }

  /* Tightened so "Signed off · 41 min" clears the circle on one line
     instead of breaking after the number. */
  .hud__seal em { font-size: 8px; letter-spacing: 0.06em; }

  /* Three actions wrap to two rows on a phone, and the stack grows upward off
     the anchored bottom edge — so the copy is dropped and the buttons trimmed
     to keep the eyebrow clear of the sign-off seal on short screens too. */
  .hero__copy { top: auto; bottom: 104px; }
  .hero__title { max-width: 12ch; }
  .hero__sub { margin-top: 18px; font-size: 14.5px; max-width: 34ch; }
  .hero__actions { margin-top: 24px; gap: 10px; }
  .hero__actions .btn { padding: 14px 22px; font-size: 13.5px; }
  .hero__actions .btn--sos { padding-left: 18px; gap: 11px; }
  .hero__rail { display: none; }
  .hero__chapter { bottom: 30px; }

  .form__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 34px; }
  .band__actions { flex-direction: column; align-items: stretch; }
  .band__actions .btn { justify-content: center; }
}

/* Short phones cannot hold the sign-off seal, a three-line headline, the
   subhead and two rows of buttons in one frame. The seal is the decorative
   part, so it goes; the type tightens so the copy always clears the header. */
@media (max-width: 860px) and (max-height: 760px) {
  .hud__seal { display: none; }
  .hero__copy { bottom: 84px; }
  .hero__title { font-size: 32px; }
  .hero__sub { margin-top: 14px; font-size: 13.5px; max-width: 30ch; }
  .hero__actions { margin-top: 18px; }
  .hero__chapter { bottom: 24px; }
}

/* At 320px the subhead needs five lines and pushes the headline under the
   header. The headline and the three actions carry the fold on their own. */
@media (max-width: 340px) and (max-height: 700px) {
  .hero__sub { display: none; }
}

@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  /* The band already closes itself, so the last divider would double up. */
  .stat:last-child { border-bottom: 0; }
  .sos__list { grid-template-columns: 1fr; }
  /* The strip is only wide enough for the status once the frame narrows. */
  .sos__ticker { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; }
  .sos__ticker em { display: none; }
  .svc-row { grid-template-columns: 34px 62px minmax(0, 1fr) auto; gap: 12px; }
  /* Drop the duration, but not the arrow that shares the cell. */
  .svc-row__meta > span:not(.svc-row__go) { display: none; }
  .process__head { gap: 22px; }
  .process__dial { width: 96px; height: 96px; }
  .process__dial-num { font-size: 24px; }
}

/* ---------- 20. Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-clip] { clip-path: none; }
  .grain { display: none; }
}