/* ARCTIC TUNING
   Art direction: cold precision. Monochrome photography, near-black and snow white, one signal colour
   (UK plate yellow). One typeface — Archivo — used at its extremes: ultra-condensed capitals for
   headlines, expanded small capitals for spec labels.
   Chart colours are validated for colour-blind separation: --std / --s1 on dark, --std-l / --s1-l on light. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* Archivo, self-hosted (Google Fonts, OFL), trimmed to the 300-800 weights the site uses.
   The latin-ext file only downloads on pages that use those letters (Škoda, for one). */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-v25-w300-800-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-v25-w300-800-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0b0c0e;
  --graphite: #16181c;
  --steel: #2a2e35;
  --line-dark: rgb(255 255 255 / 0.12);
  --fog: #8d939c;
  --snow: #eef0f1;
  --white: #ffffff;
  --line-light: rgb(11 12 14 / 0.14);
  /* Every photograph is Arctic Tuning's own, in colour, held back a touch so type sits on it well. */
  --grade: saturate(0.9);
  --slate: #5b616b;
  --signal: #f5c400;
  --ice: #9fd8f6;
  --plate-band: #1546a0;

  --std: #c27a52;
  --s1: #2399dd;
  --std-l: #b0643a;
  --s1-l: #1a84c7;

  --font: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --pad: clamp(20px, 4vw, 64px);
  --max: 1440px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-stretch: 100%;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

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

[tabindex='-1']:focus {
  outline: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--signal);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  &:focus {
    top: 12px;
  }
}

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

/* ── Type system ───────────────────────────────────── */

.display {
  margin: 0;
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.label--rule::before {
  content: '';
  width: 36px;
  height: 1px;
  background: currentColor;
}

.lead {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  max-width: 34em;
  text-wrap: pretty;
}

/* ── Buttons ───────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  svg {
    width: 18px;
    height: 18px;
    flex: none;
    transition: translate 0.35s var(--ease-out);
  }
  &:hover svg {
    translate: 4px 0;
  }
}

.btn--signal {
  background: var(--signal);
  color: var(--ink);
  &:hover {
    background: #ffd84a;
  }
}

.btn--ink {
  background: var(--ink);
  color: var(--white);
  &:hover {
    background: var(--steel);
  }
}

.btn--outline {
  border-color: currentColor;
  color: inherit;
  background: transparent;
  &:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--ink);
  }
}

.btn--small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.7rem;
}

.text-link {
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease-out);
  &:hover {
    background-size: 100% 1px;
  }
}

/* ── Header ────────────────────────────────────────── */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
  &.is-solid,
  .page-solid & {
    background: rgb(11 12 14 / 0.86);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--line-dark);
  }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}

/* A <picture> only picks the file; its <img> is laid out as if it were the parent's own child. */
picture {
  display: contents;
}

picture > source {
  display: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  text-decoration: none;
}

/* Arctic Tuning's badge. */
.brand__mark {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: contain;
}

.brand__name {
  font-size: 0.86rem;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.btn {
  white-space: nowrap;
  /* On the narrowest phones a long label wraps rather than pushing its column off the screen. */
  @media (max-width: 400px) {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
}

.nav__links {
  display: flex;
  gap: clamp(18px, 2.4vw, 36px);
  white-space: nowrap;
  @media (max-width: 1180px) {
    display: none;
  }
}

.nav .btn {
  @media (max-width: 420px) {
    padding: 0 14px;
  }
}

/* ── Plate (UK registration) ───────────────────────── */

.plate {
  --h: 76px;
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: var(--h);
  border-radius: 6px;
  background: linear-gradient(180deg, #ffd52b 0%, var(--signal) 55%, #e8b600 100%);
  box-shadow:
    inset 0 0 0 1.5px rgb(0 0 0 / 0.6),
    inset 0 2px 0 rgb(255 255 255 / 0.4),
    0 30px 60px -30px rgb(0 0 0 / 0.9);
  overflow: hidden;
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgb(255 255 255 / 0.3) 0%, rgb(255 255 255 / 0) 32%);
    pointer-events: none;
  }
}

.plate--front {
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f2 60%, #e7e7e4 100%);
}

.plate:has(input:focus-visible) {
  outline: 3px solid var(--white);
  outline-offset: 4px;
}

.plate--front:has(input:focus-visible) {
  outline-color: var(--ink);
}

.plate__band {
  flex: none;
  display: grid;
  place-items: end center;
  width: calc(var(--h) * 0.38);
  padding-bottom: calc(var(--h) * 0.1);
  background: var(--plate-band);
  color: #fff;
  font-size: calc(var(--h) * 0.19);
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1;
}

.plate__text,
.plate__input {
  flex: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0 4%;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font);
  font-size: calc(var(--h) * 0.6);
  font-weight: 600;
  font-stretch: 72%;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #111;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.plate__input::placeholder {
  color: rgb(17 17 17 / 0.28);
}

.plate--lg {
  --h: clamp(76px, 13vw, 112px);
  max-width: 600px;
}

.plate--sm {
  --h: 46px;
  width: auto;
  min-width: 190px;
  .plate__text {
    padding: 0 16px;
  }
}

.vt-plate {
  view-transition-name: reg-plate;
}

::view-transition-group(reg-plate) {
  animation-duration: 0.55s;
  animation-timing-function: var(--ease-out);
}

.plate-form {
  display: grid;
  gap: 12px;
}

.plate-form__error {
  margin: 0;
  font-size: 0.92rem;
  color: #ffb3a7;
}

.plate-form--inline {
  grid-template-columns: 1fr auto;
  align-items: stretch;
  .plate-form__error {
    grid-column: 1 / -1;
  }
  @media (max-width: 560px) {
    grid-template-columns: 1fr;
    .btn {
      min-height: 56px;
    }
  }
}

/* ── First-visit intro ─────────────────────────────── */

.intro {
  display: none;
}

.has-intro .intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--ink);
  pointer-events: none;
  animation: intro-out 0.85s 1s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.intro__mark {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--white);
  animation: fade-up 0.7s 0.1s var(--ease-out) both;
  img {
    width: clamp(132px, 16vw, 188px);
    height: auto;
    filter: drop-shadow(0 18px 40px rgb(35 153 221 / 0.25));
  }
}

.intro__bar {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(90px, 10vw, 118px));
  width: 200px;
  height: 1px;
  translate: -50% 0;
  background: var(--line-dark);
  overflow: hidden;
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--signal);
    transform-origin: left;
    animation: bar-fill 0.9s 0.15s var(--ease-out) both;
  }
}

@keyframes intro-out {
  to {
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
  }
}

@keyframes bar-fill {
  from {
    scale: 0 1;
  }
}

/* The hero choreography waits for the intro to lift. */
.has-intro .hero {
  --t: 1.3s;
}

/* ── Hero ──────────────────────────────────────────── */

/* Home hero, art-directed like a launch film: the headline, the typical Stage 1 figures and the price
   on the left; on the right, one of Arctic Tuning's own jobs, bonnet up with the remap tool on the
   engine, standing the full height of the hero and fading into the page. As the page arrives the
   laptop screen comes on first, then the scene rises round it.
   --t delays the whole sequence while the first-visit intro plays. */
.hero {
  --t: 0s;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: max(100svh, 700px);
  overflow: hidden;
  background: var(--ink);
  /* Everything shares the one column, overlapping the stage row by row. */
  > * {
    grid-column: 1;
  }
}

/* Spans the whole hero (so the photo can sit behind the headline and the dock) and shares its rows,
   so .hero__car lines up with the middle one on narrower screens. */
.hero__stage {
  z-index: -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
}

/* On wide screens the photo is placed against the whole hero, not the middle row, so nothing that
   changes the dock's height after load (demo plates, the welcome-back note) can move it. */
.hero__car {
  position: relative;
  grid-row: 1 / -1;
}

/* Pinned to the right at the hero's full height (a little more, for the scroll drift) and at the
   photo's own 3:4 shape, so the glow below stays on the laptop screen in it (48.5% across, 42% down). */
.hero__photo {
  position: absolute;
  top: -6svh;
  right: 0;
  height: calc(100% + 6svh);
  aspect-ratio: 3 / 4;
  transform-origin: 48.5% 42%;
  isolation: isolate;
  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: var(--grade) contrast(1.05) brightness(0.96);
  }
  /* Its left side dissolves into the page under the headline; the top darkens under the menu and the
     foot into the dock. */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg, var(--ink) 0%, rgb(11 12 14 / 0.8) 12%, rgb(11 12 14 / 0.34) 30%, transparent 48%),
      linear-gradient(180deg, rgb(11 12 14 / 0.82) 0%, rgb(11 12 14 / 0.3) 16%, transparent 30%),
      linear-gradient(0deg, var(--ink) 0%, rgb(11 12 14 / 0.55) 14%, transparent 32%),
      radial-gradient(75% 55% at 48.5% 42%, transparent 50%, rgb(11 12 14 / 0.45) 100%);
  }
  /* The dark the scene comes up out of, once the headlights are on. */
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--ink);
    opacity: 0;
  }
}

/* The laptop screen's light, spilling over the engine bay. */
.hero__beam {
  position: absolute;
  left: 48.5%;
  top: 42%;
  z-index: 3;
  width: 52%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 190 110 / 0.5), rgb(255 160 70 / 0.2) 38%, rgb(255 140 50 / 0.06) 68%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* The screen first, with the flicker of a backlight waking; then the scene comes up around it. */
  .hero__beam {
    animation: beam-on 1s calc(var(--t) + 0.25s) linear both;
  }
  .hero__photo {
    animation: scene-settle 3.2s calc(var(--t) + 0.4s) var(--ease-out) both;
  }
  .hero__photo::after {
    animation: scene-up 2.2s calc(var(--t) + 0.65s) cubic-bezier(0.33, 0, 0.2, 1) both;
  }
}

@keyframes beam-on {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  20% {
    opacity: 0.15;
  }
  34%,
  100% {
    opacity: 1;
  }
}

@keyframes scene-up {
  from {
    opacity: 1;
  }
}

@keyframes scene-settle {
  from {
    scale: 1.07;
  }
}

/* Scrolling away, the photo drifts slower than the page. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__photo {
      animation: scene-settle 3.2s calc(var(--t) + 0.4s) var(--ease-out) both, photo-drift linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
  }
}

@keyframes photo-drift {
  to {
    transform: translateY(6vh);
  }
}

@keyframes settle {
  from {
    scale: 1.08;
    opacity: 0.4;
  }
}

@keyframes drift {
  to {
    translate: 0 14vh;
  }
}

/* Film grain over photography */
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.hero__body {
  position: relative;
  z-index: 2;
  grid-row: 1;
  padding-top: clamp(96px, 13svh, 132px);
}

/* Two weights of the same face: the claim in heavy, the verdict in light. A soft shadow keeps the
   light line clear of the bright horizon behind it. */
.hero__title {
  font-size: clamp(2.9rem, min(12.2vw, 7vw + 0.4rem, 12svh), 7.6rem);
  text-shadow: 0 2px 28px rgb(11 12 14 / 0.55);
  .line:nth-child(2) {
    font-weight: 300;
    color: rgb(240 246 251 / 0.92);
  }
}

.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.02em;
}

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

@keyframes rise-in {
  from {
    translate: 0 105%;
  }
}

/* The figures sit low in the text column on wide screens, just above the plate check; after it on
   narrower ones. */
.hero__flank {
  position: relative;
  z-index: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 36rem);
  align-content: end;
  padding-bottom: clamp(24px, 4.4svh, 48px);
}


.hero__lead {
  max-width: 27em;
  margin: clamp(24px, 4.2svh, 44px) 0 0;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.18rem);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.74);
  text-wrap: pretty;
}

.hero__spec {
  display: grid;
  gap: 22px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.16);
}

.hero__spec-title {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  span {
    display: block;
    margin-top: 5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--fog);
  }
}

.hero__figures {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  margin: 0;
  > div {
    display: grid;
    gap: 8px;
    align-content: start;
    padding-inline: clamp(20px, 2.4vw, 36px);
    border-left: 1px solid rgb(255 255 255 / 0.14);
    &:first-child {
      padding-left: 0;
      border-left: 0;
    }
  }
  /* On a phone the price takes its own row under power and torque. */
  @media (max-width: 600px) {
    grid-template-columns: auto auto;
    row-gap: 20px;
    > .hero__figures-price {
      grid-column: 1 / -1;
      padding: 18px 0 0;
      border-left: 0;
      border-top: 1px solid rgb(255 255 255 / 0.14);
    }
  }
  dt {
    font-size: 0.64rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fog);
  }
  dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgb(255 255 255 / 0.7);
    white-space: nowrap;
  }
  small {
    margin-left: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--signal);
  }
}

.hero__figures-price dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  a {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--signal);
    text-underline-offset: 3px;
  }
}

.hero__num {
  font-size: clamp(2.6rem, 3.4vw, 3.6rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__title .line > span {
    animation: rise-in 1.2s calc(var(--t) + 0.8s) var(--ease-out) both;
  }
  .hero__title .line:nth-child(2) > span {
    animation-delay: calc(var(--t) + 0.9s);
  }
  .hero__lead {
    animation: fade-up 1s calc(var(--t) + 1.1s) var(--ease-out) both;
  }
  .hero__flank > * {
    animation: fade-up 1s calc(var(--t) + 1.3s) var(--ease-out) both;
  }
}

/* Narrower or portrait screens: the photo gets its own row under the headline, centred on the
   laptop, a little wider than the screen; --w is its width. */
@media (max-width: 999px), (max-aspect-ratio: 1/1) {
  .hero {
    --w: 118cqw;
    grid-template-rows: auto auto auto auto;
    min-height: 0;
  }
  .hero__stage {
    mask-image: linear-gradient(90deg, transparent, #000 4cqw, #000 96cqw, transparent);
  }
  .hero__car {
    grid-row: 2;
    height: min(var(--w) * 0.62, 46svh);
  }
  .hero__photo {
    top: 50%;
    right: auto;
    left: 50%;
    width: var(--w);
    height: auto;
    translate: -48.5% -42%;
    &::before {
      background:
        linear-gradient(180deg, rgb(11 12 14 / 0.9) 0%, rgb(11 12 14 / 0.4) 18%, transparent 32%),
        linear-gradient(0deg, var(--ink) 0%, rgb(11 12 14 / 0.5) 16%, transparent 34%),
        radial-gradient(70% 50% at 48.5% 42%, transparent 50%, rgb(11 12 14 / 0.5) 100%);
    }
  }
  /* The plate check comes straight after the car, so it's on the first screen of a phone. */
  .hero > .hero__dock {
    grid-row: 3;
  }
  .hero__flank {
    grid-row: 4;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px 40px;
    align-items: start;
    padding-block: 32px 40px;
    > :first-child {
      grid-column: 1;
    }
  }
}

@media (max-width: 600px) {
  .hero__flank {
    grid-template-columns: minmax(0, 1fr);
    > * {
      grid-column: 1;
    }
  }
}

/* The plate check, docked along the bottom of the hero */
.hero__dock {
  position: relative;
  z-index: 2;
  grid-row: -2;
  border-top: 1px solid var(--line-dark);
  background: rgb(11 12 14 / 0.72);
  @media (prefers-reduced-motion: no-preference) {
    animation: dock-in 1s calc(var(--t) + 1s) var(--ease-out) both;
  }
}

@keyframes dock-in {
  from {
    translate: 0 100%;
  }
}

.hero__dock-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 16px 56px;
  align-items: center;
  padding-block: 26px;
  @media (max-width: 900px) {
    grid-template-columns: 1fr;
    padding-block: 20px 24px;
  }
}

.hero__dock-copy {
  display: grid;
  gap: 6px;
}

.hero__dock-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero__dock-note {
  margin: 0;
  font-size: 0.88rem;
  color: var(--fog);
}

.plate-form--dock {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  .plate {
    --h: 68px;
  }
  .plate-form__error {
    grid-column: 1 / -1;
  }
  @media (max-width: 560px) {
    grid-template-columns: 1fr;
    .btn {
      min-height: 56px;
    }
  }
}

/* ── Home hero, desktop ───────────────────────────────
   Wide screens get an editorial split. On the left, one column centred in the height: the headline sized
   to fill the column exactly, the promise, then the reg check itself. On the right the photo stands as a
   crisp full-height panel out to the edge of the screen, wiping in as the page arrives (the laptop screen
   still lights up first), with the typical Stage 1 figures on an ink block resting on its bottom-left
   corner. --col is the text column's width, from the hero's own width. */
@media (min-width: 1000px) and (min-aspect-ratio: 1/1) {
  .hero {
    --photo-w: clamp(440px, 46cqw, 920px);
    --edge: max(var(--pad), (100cqw - var(--max)) / 2 + var(--pad));
    --gutter: clamp(40px, 4.4cqw, 80px);
    --col: calc(100cqw - var(--photo-w) - var(--edge) - var(--gutter));
    grid-template-rows: minmax(76px, 1fr) auto auto minmax(88px, 1fr);
    min-height: max(100svh, 720px);
  }

  /* The photo panel: the photo is kept at its own 3:4 shape (so the glow stays on the laptop screen) and
     sized to cover the panel with room to drift, centred on the laptop. */
  .hero__stage {
    position: absolute;
    inset: 0;
    display: block;
  }
  .hero__car {
    position: absolute;
    inset: 0 0 0 auto;
    width: var(--photo-w);
    overflow: hidden;
    container-type: size;
    background: var(--graphite);
    /* Darker under the menu and at the foot, and a touch along the edge it meets the page. */
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgb(11 12 14 / 0.72) 0%, rgb(11 12 14 / 0.22) 14%, transparent 26%),
        linear-gradient(0deg, rgb(11 12 14 / 0.6) 0%, transparent 24%),
        linear-gradient(90deg, rgb(11 12 14 / 0.4) 0%, transparent 10%);
    }
  }
  .hero__photo {
    top: 44%;
    right: auto;
    left: 50%;
    width: max(106cqw, 92cqh);
    height: auto;
    translate: -48.5% -42%;
    &::before {
      background: radial-gradient(75% 55% at 48.5% 42%, transparent 50%, rgb(11 12 14 / 0.42) 100%);
    }
  }

  /* The text column. */
  .hero__body {
    grid-row: 2;
    padding-top: 0;
  }
  .hero__title {
    font-size: min(calc(var(--col) / 6.7), 11.4svh, 6.8rem);
  }
  .hero__lead {
    max-width: min(28em, var(--col));
    margin-top: clamp(22px, 3.4svh, 36px);
    font-size: clamp(1.05rem, 0.85rem + 0.35vw, 1.22rem);
  }

  /* The reg check, in the column: a small label, the plate, then the note and any demo plates. */
  .hero > .hero__dock {
    grid-row: 3;
    border: 0;
    background: none;
  }
  .hero__dock-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 0;
    padding-block: clamp(32px, 5svh, 52px) 0;
  }
  .hero__dock-copy {
    display: contents;
  }
  :is(.hero__dock-title, .hero__dock-note, .demo-hint, .plate-form--dock) {
    width: min(36rem, var(--col));
  }
  .hero__dock-title {
    order: 0;
    margin-bottom: 14px;
    font-size: 0.7rem;
    font-weight: 700;
    font-stretch: 125%;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fog);
  }
  .plate-form--dock {
    order: 1;
    .btn {
      background: var(--white);
      color: var(--ink);
      &:hover {
        background: var(--signal);
      }
    }
  }
  .hero__dock-note {
    order: 2;
    margin-top: 16px;
  }
  .demo-hint {
    order: 3;
    margin-top: 10px;
  }

  /* The figures, on an ink block on the photo's bottom-left corner. */
  .hero__flank {
    position: absolute;
    z-index: 3;
    left: calc(100cqw - var(--photo-w));
    bottom: 0;
    display: block;
    width: max-content;
    max-width: var(--photo-w);
    margin: 0;
    padding: 24px clamp(20px, 2cqw, 30px) 26px;
    background: var(--ink);
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 56px;
      height: 2px;
      background: var(--signal);
    }
    .hero__spec {
      gap: 18px;
      padding-top: 0;
      border-top: 0;
    }
    .hero__figures > div {
      padding-inline: 22px;
      &:first-child {
        padding-left: 0;
      }
      &:last-child {
        padding-right: 0;
      }
    }
    .hero__num {
      font-size: clamp(2.2rem, 2.5vw, 2.8rem);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero__car {
      animation: panel-wipe 1.5s calc(var(--t) + 0.15s) cubic-bezier(0.7, 0, 0.2, 1) both;
    }
    .hero__dock {
      animation: fade-up 1s calc(var(--t) + 1.25s) var(--ease-out) both;
    }
  }
}

@keyframes panel-wipe {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}

.demo-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--fog);
}

.demo-chip {
  padding: 2px 8px;
  border: 1px solid var(--line-dark);
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 600;
  font-stretch: 85%;
  text-decoration: none;
  &:hover {
    border-color: var(--signal);
  }
}

/* ── Light sections ────────────────────────────────── */

.light {
  background: var(--snow);
  color: var(--ink);
  color-scheme: light;
  ::selection {
    background: var(--ink);
    color: var(--snow);
  }
}

.section {
  padding-block: clamp(88px, 12vw, 180px);
}

.section--why {
  padding-bottom: clamp(64px, 8vw, 120px);
}

.section--tuning {
  padding-top: clamp(40px, 5vw, 72px);
}

/* Section heading: one big line, with a short note set against it. */
.section-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px 24px;
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 96px);
  .display {
    grid-column: 1 / span 8;
    font-size: clamp(3rem, 7.4vw, 7.6rem);
  }
  @media (max-width: 960px) {
    grid-template-columns: 1fr;
    .display,
    .section-head__aside {
      grid-column: 1;
    }
  }
}

.section-head__aside {
  grid-column: 9 / -1;
  margin: 0;
  padding-bottom: 0.5em;
  max-width: 26em;
  font-size: 1.05rem;
  color: var(--slate);
}

.section-head--dark .section-head__aside {
  color: var(--fog);
}

/* ── Home: why remap, under the signature range ──── */

.reasons {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px 24px;
  margin-top: clamp(72px, 9vw, 128px);
  @media (max-width: 960px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.reasons__title {
  grid-column: 1 / span 4;
  margin: 0;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
  @media (max-width: 960px) {
    grid-column: 1;
  }
}

.reasons__list {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-light);
  li {
    padding: 22px 0 24px;
    border-bottom: 1px solid var(--line-light);
  }
  h4 {
    margin: 0 0 6px;
    font-size: 1.12rem;
    font-weight: 700;
  }
  p {
    margin: 0;
    color: var(--slate);
    text-wrap: pretty;
  }
  @media (max-width: 960px) {
    grid-column: 1;
  }
  @media (max-width: 640px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Home: prices ─────────────────────────────────── */
/* Set like a price list: each map's own price large, the combinations beside it. */

.prices__table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid rgb(255 255 255 / 0.5);
  thead :is(th, td) {
    padding: 18px 0 14px;
    font-size: 0.68rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-align: right;
    text-transform: uppercase;
    vertical-align: bottom;
    color: var(--fog);
  }
  tbody :is(th, td) {
    padding: clamp(18px, 2.4vw, 28px) 0;
    border-bottom: 1px solid var(--line-dark);
    vertical-align: baseline;
  }
  tbody th {
    width: 34%;
    text-align: left;
    a {
      font-size: clamp(2rem, 4.6vw, 3.8rem);
      font-weight: 800;
      font-stretch: 62%;
      line-height: 0.9;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--white);
      transition: color 0.2s ease;
      &:hover {
        color: var(--signal);
      }
    }
  }
  tbody td {
    text-align: right;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgb(255 255 255 / 0.72);
    b {
      font-size: clamp(2rem, 4.6vw, 3.8rem);
      font-weight: 800;
      font-stretch: 62%;
      line-height: 0.9;
      color: var(--signal);
    }
  }
  /* Phones: each map is a block, its own price beside the name and the combinations listed under. */
  @media (max-width: 760px) {
    display: block;
    thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }
    tbody {
      display: block;
    }
    tbody tr {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px 16px;
      padding: 22px 0;
      border-bottom: 1px solid var(--line-dark);
    }
    tbody :is(th, td) {
      padding: 0;
      border: 0;
    }
    tbody th {
      width: auto;
    }
    tbody td:first-of-type {
      grid-column: 2;
      grid-row: 1;
    }
    tbody td:not(:first-of-type) {
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      font-size: 1.02rem;
      &::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--fog);
      }
    }
  }
}

.prices__alone {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-dark);
    color: rgb(255 255 255 / 0.8);
  }
  b {
    font-size: 1.3rem;
    font-weight: 800;
    font-stretch: 88%;
    white-space: nowrap;
    color: var(--white);
  }
  @media (max-width: 860px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.prices__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 40px;
  margin-top: clamp(36px, 5vw, 56px);
  p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--fog);
    text-wrap: pretty;
  }
  strong {
    font-weight: 700;
    color: var(--white);
  }
  a {
    color: var(--white);
  }
  @media (max-width: 860px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.prices__go {
  margin-top: clamp(32px, 4vw, 48px);
}

/* ── Home: real cars, real jobs ───────────────────── */
/* Three columns on wide screens (wide shots across two), two on tablets, a swipeable strip on phones. */

.gallery {
  padding-block: clamp(72px, 9vw, 140px) clamp(88px, 12vw, 160px);
  border-top: 1px solid var(--line-light);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  figure {
    display: grid;
    gap: 12px;
    margin: 0;
  }
  img {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    background: var(--line-light);
  }
  figcaption {
    font-size: 0.86rem;
    color: var(--slate);
  }
}

.gallery__item--wide {
  grid-column: span 2;
  img {
    aspect-ratio: 10 / 7;
  }
}

.gallery__more {
  margin: clamp(28px, 4vw, 44px) 0 0;
  color: var(--slate);
  a {
    color: var(--ink);
    font-weight: 600;
  }
}

@media (max-width: 1080px) {
  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Two up, the last photo would sit on its own. */
  .gallery__item:last-child {
    display: none;
  }
}

@media (max-width: 640px) {
  .gallery__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .gallery__item,
  .gallery__item--wide {
    grid-column: auto;
    scroll-snap-align: start;
  }
  .gallery__item--wide img {
    aspect-ratio: 5 / 7;
  }
  .gallery__item:last-child {
    display: block;
  }
}

/* Prices and the map are both dark; a rule marks where one ends. */
.prices + .section {
  border-top: 1px solid var(--line-dark);
}

/* Manifesto + the ridge that becomes a torque curve */

.manifesto {
  margin: 0;
  max-width: 21em;
  font-size: clamp(1.8rem, 3.9vw, 3.9rem);
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: rgb(11 12 14 / 0.4);
  text-wrap: pretty;
  strong {
    font-weight: 600;
    color: var(--ink);
  }
}

.ridge {
  margin: clamp(64px, 9vw, 120px) 0 0;
}

.ridge__art {
  position: relative;
}

.ridge__svg {
  display: block;
  width: 100%;
  height: clamp(240px, 28vw, 400px);
  overflow: visible;
}

/* Standard: the snow-capped range from the logo. Stage 1: the same range, taller, traced in ice blue. */
.ridge__std {
  fill: var(--ink);
}

.ridge__strata {
  fill: none;
  stroke: rgb(255 255 255 / 0.07);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ridge__snow {
  fill: #f4f6f7;
}

.ridge__s1 {
  fill: none;
  stroke: var(--s1-l);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ridge__grid {
  stroke: var(--line-light);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Direct labels: a dot on each summit, the name set just above it */
.ridge__tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% calc(-100% - 14px);
  font-size: 0.66rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 6px var(--snow), 0 0 12px var(--snow);
  pointer-events: none;
  b {
    margin-left: 6px;
    font-weight: 800;
  }
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    translate: -50% -50%;
    box-shadow: 0 0 0 3px var(--snow);
  }
}

.ridge__tag--s1::before {
  background: var(--s1-l);
}

.ridge__tag--s1 b {
  color: var(--s1-l);
}

.ridge__tag--std::before {
  background: var(--ink);
}

/* Ticks sit at their rpm along the axis. */
.ridge__axis {
  position: relative;
  height: 1.4em;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  li {
    position: absolute;
    left: var(--x);
    translate: -50% 0;
    white-space: nowrap;
  }
  li:first-child {
    translate: 0;
  }
  li:last-child {
    translate: -1.6em 0;
  }
  font-size: 0.66rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.1em;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.ridge__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
  font-size: 0.95rem;
  color: var(--slate);
}

.ridge__note {
  font-size: 0.66rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dyno__charts {
  margin-top: 28px;
}

.key-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
}

.key {
  width: 18px;
  height: 2px;
  flex: none;
  border-radius: 2px;
}

.key--std {
  background: var(--std);
}

.key--gain {
  width: 14px;
  height: 10px;
  border-radius: 1px;
  background: rgb(35 153 221 / 0.3);
}

.key--s1 {
  background: var(--s1);
}

.light .key--std {
  background: var(--std-l);
}

.light .key--s1 {
  background: var(--s1-l);
}

/* ── Scroll choreography (progressive enhancement: static without support) ── */

@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    /* Stage 1 ridge sweeps in left to right as the figure scrolls into view. */
    .ridge {
      view-timeline: --ridge block;
    }
    .ridge__tuned {
      animation: sweep linear both;
      animation-timeline: --ridge;
      animation-range: entry 20% cover 55%;
    }
    .ridge__tag--s1 {
      animation: tag-in linear both;
      animation-timeline: --ridge;
      animation-range: entry 70% cover 55%;
    }
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    /* Big headings rise out of a mask. */
    .section-head .display,
    .split__body .display,
    .dyno__intro .display,
    .faq__intro .display,
    .cta .display {
      animation: heading-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
    /* Photography opens up as it arrives. */
    .split__media img {
      animation: image-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    /* The process line fills as you read down it. */
    .steps {
      view-timeline: --steps block;
    }
    .steps::before {
      animation: fill-down linear both;
      animation-timeline: --steps;
      animation-range: entry 60% exit 40%;
    }
  }
}

@keyframes sweep {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    translate: 0 48px;
  }
}

@keyframes tag-in {
  from {
    opacity: 0;
  }
}

@keyframes heading-in {
  from {
    clip-path: inset(0 0 100% 0);
    translate: 0 0.3em;
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes image-in {
  from {
    clip-path: inset(14% 8% 14% 8%);
    scale: 1.12;
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fill-line {
  from {
    scale: 0 1;
  }
}

@keyframes fill-down {
  from {
    scale: 1 0;
  }
}

/* Services: editorial rows */

.services {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.service {
  position: relative;
  display: grid;
  grid-template-columns: 4fr 5fr 3fr;
  gap: 24px;
  align-items: center;
  isolation: isolate;
  --shift: 24px;
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--line-light);
  transition: color 0.3s ease, border-color 0.3s ease;
  &::before {
    content: '';
    position: absolute;
    inset: 0 -16px;
    z-index: -1;
    background: var(--ink);
    scale: 1 0;
    transform-origin: 50% 100%;
    transition: scale 0.45s var(--ease-out);
  }
  .service__name,
  .service__body {
    transition: translate 0.45s var(--ease-out), color 0.3s ease;
  }
  @media (max-width: 860px) {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.service__thumb {
  display: none;
}

/* Touch screens can't hover for the preview, so each row carries its photo. */
@media (hover: none), (max-width: 860px) {
  .service__thumb {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    margin-bottom: 6px;
    object-fit: cover;
    filter: var(--grade) contrast(1.05);
  }
  /* The map diagrams are drawn for this, in colour and to this shape. */
  .service__thumb--art {
    aspect-ratio: 960 / 420;
    filter: none;
    background: var(--ink);
  }
}

/* Tablets: the photo sits beside the words rather than stacked above them. */
@media (min-width: 600px) and (max-width: 860px) {
  .service {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 28px;
    align-items: start;
    > :not(.service__thumb) {
      grid-column: 2;
    }
  }
  .service__thumb {
    grid-column: 1;
    grid-row: 1 / span 4;
    aspect-ratio: 4 / 3;
    margin-bottom: 0;
  }
}

.service__name {
  margin: 0;
  font-size: clamp(2.6rem, 5.6vw, 5.4rem);
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  line-height: 0.9;
}

.service__body {
  margin: 0;
  color: var(--slate);
  max-width: 34em;
}

.service__meta {
  justify-self: end;
  margin: 0;
  max-width: 15em;
  .service__price {
    display: block;
    margin-bottom: 6px;
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    font-weight: 800;
    font-stretch: 62%;
    line-height: 1;
  }
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
  @media (max-width: 860px) {
    justify-self: start;
    text-align: left;
  }
}

@media (hover: hover) and (pointer: fine) {
  .service:hover {
    color: var(--white);
    border-bottom-color: var(--ink);
    &::before {
      scale: 1 1;
    }
    .service__name {
      translate: var(--shift) 0;
    }
    .service__body {
      color: rgb(255 255 255 / 0.7);
      translate: calc(var(--shift) * 0.3) 0;
    }
  }
}

.service-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: 320px;
  aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0;
  scale: 0.9;
  transition: opacity 0.3s ease, scale 0.45s var(--ease-out);
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--grade) contrast(1.05);
  }
  &.is-visible {
    opacity: 1;
    scale: 1;
  }
}

/* On Tuning the preview is the map's diagram: wider, in colour, on its own dark ground. */
.service-preview--art {
  width: 440px;
  aspect-ratio: 960 / 420;
  background: var(--ink);
  box-shadow: 0 24px 60px -20px rgb(11 12 14 / 0.6);
  img {
    object-fit: contain;
    filter: none;
  }
}

/* Extras and makes: typeset indexes under the services */
.extras,
.makes {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px 24px;
  margin-top: clamp(40px, 5vw, 72px);
  @media (max-width: 860px) {
    grid-template-columns: 1fr;
  }
}

.makes {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--line-light);
}

.extras__title {
  grid-column: 1 / span 3;
  margin: 0;
  padding-top: 0.7em;
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  @media (max-width: 860px) {
    grid-column: 1;
    padding-top: 0;
  }
}

.extras__list {
  grid-column: 4 / -1;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 600;
  font-stretch: 90%;
  li:not(:last-child)::after {
    content: '/';
    margin: 0 0.5em;
    color: var(--slate);
    font-weight: 300;
  }
  @media (max-width: 860px) {
    grid-column: 1;
  }
}

.makes__list {
  grid-column: 4 / -1;
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  line-height: 1.05;
  li:not(:last-child)::after {
    content: '/';
    margin: 0 0.28em;
    color: rgb(11 12 14 / 0.28);
    font-weight: 300;
  }
  @media (max-width: 860px) {
    grid-column: 1;
  }
}

.extras__note {
  grid-column: 4 / -1;
  margin: 0;
  font-size: 0.9rem;
  color: var(--slate);
  a {
    color: var(--ink);
    font-weight: 600;
  }
  @media (max-width: 860px) {
    grid-column: 1;
  }
}

/* Header scroll progress */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .header::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: var(--signal);
      transform-origin: left;
      animation: fill-line linear both;
      animation-timeline: scroll(root);
    }
  }
}

/* Buttons that lean towards the cursor (see site.js) */
.magnetic {
  transition:
    translate 0.45s var(--ease-out),
    background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out);
}

/* ── Dyno demo (dark) ──────────────────────────────── */

.dyno {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.dyno__media {
  position: absolute;
  inset: 0 0 auto;
  height: min(70vh, 720px);
  z-index: -1;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    opacity: 0.55;
  }
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(11 12 14 / 0.35), var(--ink) 92%);
  }
}

.dyno__layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  @media (max-width: 960px) {
    grid-template-columns: 1fr;
  }
}

.dyno__intro {
  grid-column: 1 / span 4;
  display: grid;
  align-content: start;
  gap: 24px;
  .display {
    font-size: clamp(3rem, 6vw, 6rem);
  }
  .lead {
    color: rgb(255 255 255 / 0.72);
  }
  @media (max-width: 960px) {
    grid-column: 1;
  }
}

/* The sheet sits straight on the page, no card. A soft glow behind the figures instead. */
.dyno__panel {
  grid-column: 6 / -1;
  position: relative;
  display: grid;
  gap: 28px;
  &::before {
    content: '';
    position: absolute;
    inset: -12% -8%;
    z-index: -1;
    background: radial-gradient(closest-side, rgb(35 153 221 / 0.09), transparent);
    pointer-events: none;
  }
  @media (max-width: 960px) {
    grid-column: 1;
  }
}

.dyno__sheet-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  margin: -14px 0 -10px;
  .label {
    display: none;
  }
}

.dyno__engine {
  font-size: 0.92rem;
  color: var(--fog);
}

/* The cars, set as big condensed names like the page index. They wrap rather than hide off the edge. */
.tabs {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  border-bottom: 1px solid var(--line-dark);
}

.tab {
  flex: none;
  padding: 0 0 12px;
  margin-right: clamp(16px, 2.4vw, 32px);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: rgb(255 255 255 / 0.34);
  font-family: var(--font);
  font-size: clamp(1.35rem, 2.5vw, 2.3rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
  &:hover {
    color: rgb(255 255 255 / 0.75);
  }
  &[aria-selected='true'] {
    color: var(--white);
    border-bottom-color: var(--signal);
  }
}

/* The Standard / Stage 1 / Gain readout, shared by the demo and the results page */

.readout {
  width: 100%;
  border-collapse: collapse;
  th,
  td {
    padding: 16px 20px 16px 0;
    border-bottom: 1px solid var(--line-dark);
    text-align: left;
    vertical-align: bottom;
  }
  td:last-child {
    padding-right: 0;
  }
  thead th {
    padding-top: 0;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fog);
    span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
  }
  tbody th {
    width: 22%;
    font-size: 0.72rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fog);
  }
}

.readout__pct {
  display: block;
  margin-top: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--signal);
}

.chart-key {
  font-size: 0.86rem;
  color: var(--fog);
}

.readout__num {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.85;
  white-space: nowrap;
  small {
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.1em;
    color: var(--fog);
  }
}

.readout__num--std {
  color: rgb(255 255 255 / 0.5);
}

.readout__num--gain {
  color: var(--signal);
}

.readout__bars {
  display: grid;
  gap: 3px;
  margin-top: 14px;
}

.bar {
  height: 6px;
  transform-origin: left center;
  scale: var(--w, 0) 1;
  @media (prefers-reduced-motion: no-preference) {
    transition: scale 1s var(--ease-out);
  }
}

.bar--std {
  background: var(--std);
}

.bar--s1 {
  background: var(--s1);
}

/* Charts */

.charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  @media (max-width: 720px) {
    grid-template-columns: 1fr;
  }
}

.chart {
  position: relative;
  margin: 0;
  min-width: 0;
}

.chart__caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}

.chart__plot {
  position: relative;
  touch-action: pan-y;
  svg {
    overflow: visible;
  }
  &:focus-visible {
    outline-offset: 6px;
  }
}

.chart__grid {
  stroke: var(--line-dark);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart__tick {
  fill: var(--fog);
  font-family: var(--font);
  font-size: 10px;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
}

.chart__end {
  fill: rgb(255 255 255 / 0.75);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
}

.chart__wash {
  fill: var(--s1);
  fill-opacity: 0.22;
}

.chart__line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart__line--std {
  stroke: var(--std);
}

.chart__line--s1 {
  stroke: var(--s1);
}

.chart__cross {
  stroke: rgb(255 255 255 / 0.4);
  stroke-width: 1;
}

.chart__dot {
  stroke: var(--graphite);
  stroke-width: 2;
}

.chart__dot--std {
  fill: var(--std);
}

.chart__dot--s1 {
  fill: var(--s1);
}

.chart__peak {
  fill: var(--s1);
  stroke: var(--ink);
  stroke-width: 2;
}

.chart__peak--std {
  fill: var(--ink);
  stroke: var(--std);
  stroke-width: 1.5;
}

.chart__peak-label {
  fill: var(--white);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--ink);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.chart__tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  min-width: 140px;
  padding: 10px 12px;
  border: 1px solid var(--line-dark);
  background: rgb(11 12 14 / 0.95);
  font-size: 0.8rem;
  pointer-events: none;
}

.chart__tooltip-rpm {
  margin-bottom: 6px;
  font-size: 0.66rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.1em;
  color: var(--fog);
}

.chart__tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fog);
  strong {
    color: var(--white);
    font-variant-numeric: tabular-nums;
  }
}

.dyno__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  font-size: 0.86rem;
  color: var(--fog);
}

/* ── Mobile service (split) ────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
  @media (max-width: 960px) {
    grid-template-columns: 1fr;
  }
}

.split__media {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--grade) contrast(1.06);
  }
}

.split__body {
  display: grid;
  align-content: center;
  gap: 40px;
  padding: clamp(56px, 8vw, 120px) var(--pad);
  .display {
    font-size: clamp(3rem, 6.2vw, 6.4rem);
  }
}

.split__points {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-light);
  li {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-light);
    @media (max-width: 520px) {
      grid-template-columns: 1fr;
      gap: 6px;
    }
  }
  h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
  }
  p {
    margin: 0;
    color: var(--slate);
  }
}

/* ── Process ───────────────────────────────────────── */

/* Heading holds its place while the steps scroll past beside it. */
.process__layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 48px 24px;
  align-items: start;
  @media (max-width: 960px) {
    grid-template-columns: 1fr;
  }
}

.process__head {
  grid-column: 1 / span 5;
  position: sticky;
  top: 120px;
  display: grid;
  gap: 24px;
  .display {
    font-size: clamp(3rem, 6.4vw, 6.6rem);
  }
  @media (max-width: 960px) {
    grid-column: 1;
    position: static;
  }
}

.process__note {
  margin: 0;
  max-width: 24em;
  font-size: 1.05rem;
  color: var(--fog);
}

.steps {
  grid-column: 7 / -1;
  position: relative;
  margin: 0;
  padding: 0 0 0 40px;
  list-style: none;
  /* The track down the left: a hairline, with a yellow line that fills as you read. */
  &::after,
  &::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--line-dark);
  }
  &::before {
    z-index: 1;
    width: 2px;
    left: 7.5px;
    background: var(--signal);
    transform-origin: top;
  }
  @media (max-width: 960px) {
    grid-column: 1;
  }
}

.step {
  position: relative;
  display: grid;
  gap: 10px;
  padding-block: 0 clamp(36px, 5vw, 64px);
  h3 {
    margin: 0;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    font-weight: 800;
    font-stretch: 62%;
    text-transform: uppercase;
    line-height: 0.95;
  }
  p {
    margin: 0;
    max-width: 30em;
    color: var(--fog);
  }
  &:last-child {
    padding-bottom: 0;
  }
}

.step__num {
  position: absolute;
  left: -40px;
  top: 0.2em;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--signal);
  color: var(--signal);
  font-size: 0.6rem;
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1;
}

/* ── FAQ ───────────────────────────────────────────── */

.faq {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  @media (max-width: 960px) {
    grid-template-columns: 1fr;
  }
}

.faq__intro {
  grid-column: 1 / span 4;
  display: grid;
  align-content: start;
  gap: 28px;
  .display {
    font-size: clamp(3rem, 6vw, 6rem);
  }
  p {
    margin: 0;
    color: var(--slate);
  }
  @media (max-width: 960px) {
    grid-column: 1;
  }
}

.faq__list {
  grid-column: 6 / -1;
  border-top: 1px solid var(--ink);
  @media (max-width: 960px) {
    grid-column: 1;
  }
}

.qa {
  border-bottom: 1px solid var(--line-light);
  summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 26px 0;
    list-style: none;
    cursor: pointer;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 600;
    line-height: 1.3;
    &::-webkit-details-marker {
      display: none;
    }
    &::after {
      content: '';
      flex: none;
      width: 14px;
      height: 14px;
      background:
        linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
      transition: rotate 0.3s var(--ease-out);
    }
  }
  &[open] summary::after {
    rotate: 45deg;
  }
  p {
    margin: 0;
    padding: 0 0 28px;
    max-width: 40em;
    color: var(--slate);
  }
}

/* ── Final call to action (signal yellow) ──────────── */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--signal);
  color: var(--ink);
  color-scheme: light;
}

.cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(36px, 5vw, 56px);
  padding-block: clamp(80px, 11vw, 160px);
}

/* The logo's ridge again, rising out of the footer into the yellow. */
.cta__ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(96px, 12vw, 180px);
  fill: var(--ink);
}

.cta:has(.cta__ridge) .cta__inner {
  padding-bottom: clamp(150px, 18vw, 260px);
}

.cta .display {
  font-size: clamp(3.6rem, 11vw, 11rem);
}

.cta__form {
  max-width: 820px;
}

.cta .plate-form__error {
  color: #7a1200;
}

/* ── Stage 1 in plain English (Tuning and Dyno) ───── */
/* The gain figures on the left, the analysis on the right. Light on Tuning, dark on the Dyno page. */

.analysis-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  button {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line-light);
    border-radius: 2px;
    background: transparent;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    font-stretch: 125%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    &:hover {
      border-color: var(--ink);
    }
    &[aria-pressed='true'] {
      border-color: var(--ink);
      background: var(--ink);
      color: var(--white);
    }
  }
}

.analysis {
  --muted: var(--slate);
  --rule: var(--line-light);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px clamp(32px, 5vw, 88px);
  padding-top: 28px;
  border-top: 1px solid var(--ink);
  @media (prefers-reduced-motion: no-preference) {
    animation: fade-in 0.45s ease both;
  }
  @media (max-width: 860px) {
    grid-template-columns: minmax(0, 1fr);
  }
  h4 {
    margin: 0 0 6px;
    font-size: 1.02rem;
    font-weight: 700;
  }
  p {
    margin: 0;
    text-wrap: pretty;
  }
}

.analysis__figs {
  display: grid;
  align-content: start;
}

.analysis__car {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  span {
    display: block;
    margin-top: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.analysis__fig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
  b {
    font-size: clamp(2.8rem, 4.6vw, 4.2rem);
    font-weight: 800;
    font-stretch: 62%;
    line-height: 0.9;
  }
  small {
    flex-basis: 100%;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--muted);
  }
}

/* How big the step is, in words, so a small gain reads as one. */
.analysis__tier {
  justify-self: start;
  margin-top: 16px !important;
  padding: 5px 10px 4px;
  border: 1px solid currentColor;
  font-size: 0.68rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  [data-tier='big'] & {
    border-color: var(--signal);
    background: var(--signal);
    color: var(--ink);
  }
}

.analysis__text {
  display: grid;
  gap: 18px;
  max-width: 46em;
}

.analysis__lead {
  font-size: clamp(1.08rem, 1.4vw, 1.25rem);
  line-height: 1.5;
}

.analysis__feel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  margin: 4px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  li {
    padding: 16px 0;
  }
  p {
    font-size: 0.95rem;
    color: var(--muted);
  }
  @media (max-width: 760px) {
    grid-template-columns: minmax(0, 1fr);
    li + li {
      border-top: 1px solid var(--rule);
    }
  }
}

.analysis__check {
  padding: 16px 20px;
  border-left: 3px solid var(--signal);
  background: rgb(11 12 14 / 0.04);
  h4 {
    font-size: 0.72rem;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  p {
    font-size: 0.95rem;
  }
  a {
    font-weight: 700;
  }
}

.analysis__note {
  font-size: 0.86rem;
  color: var(--muted);
}

/* On the Dyno page, under the run log, and on the reg check, under the curves. */
.cell__analysis {
  margin-top: clamp(48px, 6vw, 88px);
  .analysis {
    --muted: var(--fog);
    --rule: var(--line-dark);
    border-top-color: rgb(255 255 255 / 0.5);
  }
  .analysis__check {
    background: rgb(255 255 255 / 0.04);
  }
}

.cell__analysis-title {
  margin: 0 0 20px;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.9;
  text-transform: uppercase;
}

/* Prices beside the dyno's booking button and in the Tuning comparison. */
.cell__price {
  margin: 0;
  color: rgb(255 255 255 / 0.75);
  b {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--white);
  }
  a {
    color: var(--signal);
  }
}

.compare__row--price b {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
}

/* The price on the reg check's booking band. */
.cta__price {
  margin: 0;
  max-width: 40em;
  font-size: 1rem;
  font-weight: 500;
  b {
    font-size: 1.5rem;
    font-weight: 800;
  }
  a {
    font-weight: 700;
    color: var(--ink);
  }
}

.cta__alt {
  margin: 0;
  font-size: 0.95rem;
  a {
    font-weight: 700;
  }
}

/* ── Footer ────────────────────────────────────────── */

.footer {
  padding-top: clamp(56px, 7vw, 96px);
}

.footer__main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 48px 24px;
  padding-bottom: clamp(48px, 6vw, 80px);
  @media (max-width: 1080px) {
    grid-template-columns: 1fr;
  }
}

/* The number is the point of the footer, so it gets the space. */
.footer__call {
  grid-column: 1 / span 7;
  display: grid;
  align-content: start;
  gap: 10px;
  @media (max-width: 1080px) {
    grid-column: 1;
  }
}

.footer__kicker {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fog);
}

.footer__phone {
  width: fit-content;
  font-size: clamp(3.4rem, 9vw, 8.4rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(var(--signal), var(--signal)) 0 100% / 0 4px no-repeat;
  transition: background-size 0.5s var(--ease-out), color 0.3s ease;
  &:hover {
    color: var(--signal);
    background-size: 100% 4px;
  }
}

.footer__sub {
  margin: 6px 0 0;
  max-width: 30em;
  color: var(--fog);
}

/* The badge and what we do across the top, the pages and contact links in two columns under it. */
.footer__nav {
  grid-column: 8 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
  @media (max-width: 1080px) {
    grid-column: 1;
  }
}

.footer__col--brand {
  grid-column: 1 / -1;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 6px 22px;
  .footer__badge {
    grid-row: 1 / span 2;
    margin: 0;
  }
  > :not(.footer__badge) {
    grid-column: 2;
  }
  p {
    max-width: 30em;
  }
  @media (max-width: 420px) {
    grid-template-columns: 72px minmax(0, 1fr);
    .footer__badge {
      width: 72px;
      height: 72px;
    }
  }
}

.footer__col {
  display: grid;
  align-content: start;
  gap: 10px;
  a {
    width: fit-content;
    text-decoration: none;
    white-space: nowrap;
    &:hover {
      color: var(--signal);
    }
  }
  p {
    margin: 0;
    color: var(--fog);
  }
}

.footer__badge {
  width: 96px;
  height: 96px;
  margin-bottom: 12px;
}

.footer__heading {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 20px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.8rem;
  color: var(--fog);
  p {
    margin: 0;
  }
  a {
    color: inherit;
  }
}

/* ══ Results page ═════════════════════════════════════ */

.page-solid main {
  padding-top: 76px;
}

.state[data-state='loading'] {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100svh - 76px);
  padding: 48px var(--pad) clamp(110px, 16vh, 180px);
  overflow: hidden;
}

.loading__ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(80px, 13vh, 150px);
  pointer-events: none;
  path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
  }
}

.loading__ridge-std {
  stroke: rgb(255 255 255 / 0.2);
  stroke-width: 1.5;
}

.loading__ridge-s1 {
  stroke: var(--s1);
  stroke-width: 2;
  stroke-dasharray: 1;
  @media (prefers-reduced-motion: no-preference) {
    animation: ridge-trace 2.2s var(--ease-out) infinite;
  }
}

@keyframes ridge-trace {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  70% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* ── The live scan (reg check loading) ─────────────────
   The plate is read inside reader corners, then the record's fields decode one by one, then the engine is
   matched and Stage 1 counts up over a small trace. A glow in the car's paint colour comes up behind it. */

@property --scan-tint {
  syntax: '<color>';
  inherits: true;
  initial-value: #2399dd;
}

.scan {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3vh, 32px);
  width: min(100%, 1080px);
  text-align: center;
  transition: --scan-tint 1.2s ease;
  &::before {
    content: '';
    position: absolute;
    inset: -12% -30%;
    z-index: -1;
    background: radial-gradient(45% 40% at 50% 30%, color-mix(in srgb, var(--scan-tint) 20%, transparent), transparent 75%);
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
  }
  &.is-locked::before {
    opacity: 1;
  }
}

.scan__plate {
  position: relative;
  width: min(100%, 640px);
  padding: 18px 22px;
  .plate {
    margin-inline: auto;
  }
  /* A ring that springs off the plate when it's read. */
  &::after {
    content: '';
    position: absolute;
    inset: 18px 22px;
    border: 2px solid var(--signal);
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
  }
}

.scan__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid rgb(255 255 255 / 0.5);
  transition: translate 0.5s var(--ease-out), border-color 0.3s ease;
  @media (prefers-reduced-motion: no-preference) {
    animation: corner-hunt 1.2s ease-in-out infinite alternate;
  }
}

.scan__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.scan__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.scan__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.scan__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

@keyframes corner-hunt {
  to {
    opacity: 0.45;
  }
}

.scan.is-locked {
  .scan__corner {
    animation: none;
    border-color: var(--signal);
  }
  .scan__corner--tl { translate: 10px 10px; }
  .scan__corner--tr { translate: -10px 10px; }
  .scan__corner--bl { translate: 10px -10px; }
  .scan__corner--br { translate: -10px -10px; }
  .plate__scan {
    animation: none;
    opacity: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .scan__plate::after {
      animation: plate-lock 0.7s var(--ease-out);
    }
  }
}

@keyframes plate-lock {
  from {
    opacity: 0.9;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 1.08 1.25;
  }
}

.scan__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 0;
  font-size: 0.76rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.8);
  font-variant-numeric: tabular-nums;
}

.scan__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  @media (prefers-reduced-motion: no-preference) {
    animation: blink 0.9s ease-in-out infinite alternate;
  }
  .is-locked & {
    background: #4cc38a;
  }
  .is-complete & {
    animation: none;
  }
}

@keyframes blink {
  to {
    opacity: 0.25;
  }
}

.scan__body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 24px clamp(28px, 4vw, 56px);
  width: 100%;
  text-align: left;
  @media (max-width: 860px) {
    grid-template-columns: 1fr;
  }
}

.scan__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(255 255 255 / 0.28);
  font-size: 0.76rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scan__source {
  color: var(--fog);
}

.scan__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  margin: 0;
  @media (max-width: 420px) {
    column-gap: 18px;
  }
}

.scan__row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-dark);
  dt {
    flex: none;
    font-size: 0.68rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fog);
  }
  dd {
    min-width: 0;
    min-height: 1.3em;
    margin: 0;
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: color 0.5s ease;
  }
  /* Still waiting: a shimmer where the value will be. */
  &:not(.is-reading, .is-read) dd::before {
    content: '';
    display: block;
    width: 64px;
    height: 9px;
    margin: 4px 0 0 auto;
    border-radius: 2px;
    background: linear-gradient(90deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05)) 0 0 / 200% 100%;
    @media (prefers-reduced-motion: no-preference) {
      animation: shimmer 1.1s linear infinite;
    }
  }
  /* Reading: the value comes up yellow and a line runs along the row. */
  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--signal);
    scale: 0 1;
    transform-origin: 0 50%;
  }
  &.is-reading {
    dd {
      color: var(--signal);
    }
    &::after {
      scale: 1 1;
      transition: scale 0.4s var(--ease-out);
    }
  }
  &.is-read::after {
    scale: 1 1;
    opacity: 0;
    transition: opacity 0.8s 0.1s ease;
  }
  &.is-empty dd {
    color: var(--fog);
  }
  /* Phones: the label sits over its value, so dates and engine sizes aren't cut short. */
  @media (max-width: 560px) {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 8px 0;
    dd {
      font-size: 0.88rem;
      text-align: left;
    }
    &:not(.is-reading, .is-read) dd::before {
      margin: 3px 0 0;
    }
  }
  &.has-swatch dd::before {
    content: '';
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    margin-right: 0.45em;
    border-radius: 50%;
    background: var(--car);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.2);
    vertical-align: -0.04em;
  }
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.scan__tune {
  display: grid;
  align-content: start;
  gap: 12px;
  opacity: 0.4;
  transition: opacity 0.5s ease;
  &.is-matched,
  &.is-none {
    opacity: 1;
  }
}

.scan__engine {
  min-height: 1.15em;
  margin: 4px 0 0;
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  font-weight: 800;
  font-stretch: 72%;
  line-height: 1.1;
  text-transform: uppercase;
}

.scan__figures {
  display: grid;
  gap: 4px;
}

.scan__fig {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  span {
    flex: none;
    width: 7.6em;
    font-size: 0.68rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fog);
  }
  b {
    min-width: 2.6ch;
    font-size: 1.7rem;
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  small {
    margin-right: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fog);
  }
}

.scan__fig--std b {
  color: rgb(255 255 255 / 0.55);
}

.scan__fig--s1 span {
  color: var(--signal);
}

.scan__trace {
  width: 100%;
  height: auto;
  max-height: 96px;
  overflow: visible;
  path {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .scan__trace-std {
    stroke: var(--std);
    stroke-width: 1.5;
  }
  .scan__trace-s1 {
    stroke: var(--s1);
    stroke-width: 2;
  }
  .scan__trace-gain {
    fill: var(--s1);
    fill-opacity: 0.2;
    stroke: none;
    opacity: 0;
  }
  .is-tracing & {
    .scan__trace-std,
    .scan__trace-s1 {
      animation: trace-draw 1s var(--ease-out) forwards;
    }
    .scan__trace-s1 {
      animation-delay: 0.25s;
    }
    .scan__trace-gain {
      animation: gain-in 0.6s 0.7s ease forwards;
    }
  }
  .is-none & {
    display: none;
  }
}

.scan__tune.is-none .scan__figures {
  display: none;
}

@keyframes trace-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes gain-in {
  to {
    opacity: 1;
  }
}

.scan .progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
  .progress__item {
    font-size: 0.7rem;
  }
  @media (max-width: 620px) {
    display: grid;
    width: 100%;
    .progress__item {
      font-size: 0.75rem;
    }
    .progress__time {
      margin-left: auto;
      white-space: nowrap;
    }
  }
}

.progress__time {
  margin-left: -4px;
  color: var(--fog);
  font-variant-numeric: tabular-nums;
}

.scan__skip {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fog);
  @media (prefers-reduced-motion: no-preference) {
    animation: fade-in 0.4s 1.5s both;
  }
  .is-complete & {
    visibility: hidden;
  }
}

/* No pacing and no motion for anyone who asks their device for less, or skips. */
@media (prefers-reduced-motion: reduce) {
  .scan__trace path {
    stroke-dashoffset: 0;
  }
  .scan__trace .scan__trace-gain {
    opacity: 1;
  }
}

.scan.is-fast {
  .scan__trace path {
    animation: none !important;
    stroke-dashoffset: 0;
  }
  .scan__trace .scan__trace-gain {
    animation: none !important;
    opacity: 1;
  }
}

.plate__scan {
  position: absolute;
  inset: 0 auto 0 0;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.65), transparent);
  mix-blend-mode: soft-light;
  translate: -100% 0;
  @media (prefers-reduced-motion: no-preference) {
    animation: scan 1.3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
}

@keyframes scan {
  to {
    translate: 440% 0;
  }
}

.progress {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.progress__item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.32);
  transition: color 0.3s ease;
  &[data-status='active'],
  &[data-status='done'] {
    color: var(--white);
  }
}

.progress__mark {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid rgb(255 255 255 / 0.3);
  [data-status='active'] > & {
    border-color: var(--signal);
    border-right-color: transparent;
    border-radius: 50%;
    @media (prefers-reduced-motion: no-preference) {
      animation: spin 0.8s linear infinite;
    }
  }
  [data-status='done'] > & {
    border-color: var(--signal);
    background: var(--signal);
  }
  [data-status='done'] > &::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--ink);
    border-width: 0 2px 2px 0;
    rotate: 45deg;
  }
}

@keyframes spin {
  to {
    rotate: 1turn;
  }
}

/* Message states */

/* Message blocks sit on the page grid's left edge; only their contents are width-limited. */
.message {
  display: grid;
  gap: 28px;
  padding-block: clamp(64px, 10vw, 140px);
  > * {
    max-width: 880px;
  }
  .display {
    font-size: clamp(3rem, 8vw, 7rem);
  }
  .lead {
    color: rgb(255 255 255 / 0.75);
  }
}

.message__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.message__retry {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
  max-width: 640px;
}

/* Vehicle header */

.vehicle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px);
}

.vehicle > .container {
  position: relative;
  z-index: 2;
}

/* The hero's mountains, held back behind the car's name */
.vehicle__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    filter: var(--grade) contrast(1.1);
    opacity: 0.32;
  }
  /* A low glow in the car's own paint colour (set from the DVLA record), rising behind the name. */
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(60% 85% at 18% 112%, color-mix(in srgb, var(--car, transparent) 40%, transparent), transparent 72%),
      linear-gradient(180deg, rgb(11 12 14 / 0.4), var(--ink) 96%);
  }
}

.swatch {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--car);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.28);
  vertical-align: -0.06em;
}

.vehicle__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.vehicle__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  color: var(--fog);
}

.vehicle__title {
  font-size: clamp(3.4rem, 10vw, 10rem);
  overflow-wrap: anywhere;
}

.demo-banner {
  margin: 0 0 32px;
  padding: 12px 16px;
  border: 1px dashed var(--line-dark);
  font-size: 0.86rem;
  color: var(--fog);
  strong {
    color: var(--white);
  }
}

/* Spec sheet */

.specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  border-top: 1px solid var(--ink);
  @media (max-width: 960px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.specs__item {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px 20px 22px 0;
  border-bottom: 1px solid var(--line-light);
  dt {
    font-size: 0.66rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
  }
  dd {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
  }
}

.specs-section {
  padding-block: clamp(48px, 6vw, 80px);
}

.specs-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 24px;
  .label {
    color: var(--slate);
  }
}

/* Estimate */

.estimate {
  padding-block: clamp(64px, 9vw, 120px);
}

.estimate__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 40px;
  .display {
    grid-column: 1 / span 7;
    font-size: clamp(3rem, 7vw, 7rem);
  }
  @media (max-width: 860px) {
    grid-template-columns: 1fr;
    .display {
      grid-column: 1;
    }
  }
}

.estimate__info {
  grid-column: 8 / -1;
  display: grid;
  gap: 8px;
  justify-items: end;
  text-align: right;
  font-size: 0.92rem;
  color: var(--fog);
  @media (max-width: 860px) {
    grid-column: 1;
    justify-items: start;
    text-align: left;
  }
  a {
    color: var(--white);
  }
}

.estimate__engine {
  justify-content: flex-end;
  color: var(--white);
  @media (max-width: 860px) {
    justify-content: flex-start;
  }
}

#source-line {
  margin: 0;
  line-height: 1.5;
}

.variants {
  min-width: 0;
  margin: 0 0 40px;
  padding: 0;
  border: 0;
}

.variants__legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 1.1rem;
  font-weight: 700;
}

.variants__help {
  margin: 0 0 18px;
  font-size: 0.92rem;
  color: var(--fog);
}

.variants__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.variant {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  cursor: pointer;
  transition: background-color 0.2s ease;
  &:hover {
    background: var(--graphite);
  }
  &:has(input:checked) {
    background: var(--white);
    color: var(--ink);
    .variant__fits,
    .variant__power small {
      color: var(--slate);
    }
  }
  &:has(input:focus-visible) {
    outline: 2px solid var(--signal);
    outline-offset: -2px;
  }
  input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
}

.variant__power {
  font-size: 1.6rem;
  font-weight: 800;
  font-stretch: 62%;
  line-height: 1;
  text-transform: uppercase;
  small {
    margin-left: 8px;
    font-size: 0.66rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.1em;
    color: var(--fog);
  }
}

.variant__fits {
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--fog);
}

.estimate__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 48px 24px;
  .readout-wrap {
    grid-column: 1 / span 6;
  }
  .charts-wrap {
    grid-column: 7 / -1;
    display: grid;
    gap: 28px;
    align-content: start;
  }
  @media (max-width: 1080px) {
    grid-template-columns: 1fr;
    .readout-wrap,
    .charts-wrap {
      grid-column: 1;
    }
  }
}

.estimate__grid .charts {
  grid-template-columns: 1fr;
}

/* Wide screens: the figures stay beside the charts as you scroll down them. */
@media (min-width: 1081px) {
  .estimate__grid .readout-wrap {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

.quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 28px 0 0;
  @media (max-width: 560px) {
    grid-template-columns: 1fr;
  }
  div {
    display: grid;
    gap: 4px;
    padding: 16px 16px 16px 0;
    border-bottom: 1px solid var(--line-dark);
  }
  dt {
    font-size: 0.66rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fog);
  }
  dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
  }
}

.notes {
  display: grid;
  gap: 10px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  li {
    padding: 14px 18px;
    border-left: 2px solid var(--signal);
    background: var(--graphite);
    font-size: 0.92rem;
    color: rgb(255 255 255 / 0.8);
  }
}

/* The dyno run: a replay button and a live readout over the charts, with a thin rpm sweep under it. */
.dyno-run {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--line-dark);
}

.dyno-run__go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  svg {
    width: 34px;
    height: 34px;
    padding: 9px 8px 9px 10px;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 50%;
    fill: var(--signal);
    transition: background-color 0.25s ease, border-color 0.25s ease, fill 0.25s ease;
  }
  &:hover svg,
  &:focus-visible svg {
    background: var(--signal);
    border-color: var(--signal);
    fill: var(--ink);
  }
  &:focus-visible {
    outline: none;
  }
}

.dyno-run__read {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 0;
  font-size: 0.66rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
  b {
    display: inline-block;
    min-width: 3.4ch;
    margin-right: 2px;
    font-size: 1.3rem;
    font-weight: 800;
    font-stretch: 88%;
    letter-spacing: 0;
    text-align: right;
    color: var(--white);
    font-variant-numeric: tabular-nums;
  }
  [data-run='rpm'] {
    min-width: 4.4ch;
  }
  > span {
    white-space: nowrap;
  }
  @media (max-width: 480px) {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    b {
      font-size: 1.1rem;
    }
  }
  /* The narrowest phones: the run's state gets its own line above the figures. */
  @media (max-width: 360px) {
    flex-wrap: wrap;
    row-gap: 6px;
    .dyno-run__state {
      flex-basis: 100%;
    }
  }
}

.dyno-run__state {
  align-self: center;
  padding: 4px 8px 3px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-size: 0.6rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  .is-running & {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--ink);
  }
}

.dyno-run__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--s1);
  transform-origin: 0 50%;
  scale: var(--t, 0) 1;
  .is-done & {
    background: rgb(255 255 255 / 0.25);
  }
}

@media print {
  .dyno-run {
    display: none;
  }
  .chart__plot svg g[clip-path] {
    clip-path: none !important;
  }
}

/* Read off the curves: four figures in a hairline grid under the charts. */
.dyno-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line-dark);
  div {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-dark);
    &:nth-child(odd) {
      padding-right: 18px;
      border-right: 1px solid var(--line-dark);
    }
    &:nth-child(even) {
      padding-left: 18px;
    }
  }
  dt {
    font-size: 0.66rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fog);
  }
  dd {
    display: grid;
    gap: 4px;
    margin: 0;
  }
  strong {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  div:nth-child(3) strong {
    color: var(--s1);
  }
  span {
    font-size: 0.82rem;
    color: var(--fog);
    font-variant-numeric: tabular-nums;
  }
}

/* The PDF report: two page thumbnails fanned out, the copy and the button, between hairlines. */
.report-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px clamp(24px, 4vw, 48px);
  margin-top: clamp(56px, 7vw, 96px);
  padding-block: clamp(24px, 3vw, 36px);
  border-block: 1px solid var(--line-dark);
  @media (max-width: 720px) {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    .report-card__button {
      grid-column: 1 / -1;
      justify-self: start;
    }
  }
}

.report-card__pages {
  position: relative;
  width: 112px;
  height: 100px;
  @media (max-width: 560px) {
    width: 84px;
    height: 76px;
  }
  svg {
    position: absolute;
    top: 6px;
    width: 58%;
    height: auto;
    filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.45));
    transition: rotate 0.5s var(--ease-out), translate 0.5s var(--ease-out);
    &:first-child {
      left: 0;
      z-index: 1;
      rotate: -7deg;
    }
    &:last-child {
      right: 0;
      rotate: 6deg;
    }
  }
  rect:first-child {
    fill: #f4f5f6;
  }
  .report-card__band {
    fill: var(--ink);
  }
  path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
  }
  .report-card__p {
    stroke: var(--s1);
  }
  .report-card__t {
    stroke: var(--std);
  }
  .report-card__lines {
    stroke: #c9cdd2;
    stroke-width: 2.5;
  }
}

@media (hover: hover) and (pointer: fine) {
  .report-card:hover .report-card__pages svg {
    &:first-child {
      rotate: -11deg;
      translate: -6px -4px;
    }
    &:last-child {
      rotate: 10deg;
      translate: 6px -2px;
    }
  }
}

.report-card__title {
  margin: 0 0 8px;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 800;
  font-stretch: 88%;
  line-height: 1.1;
}

.report-card__copy p {
  max-width: 58ch;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.72);
}

.table-view summary {
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--fog);
  &:hover {
    color: var(--white);
  }
}

.table-scroll {
  margin-top: 12px;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  th,
  td {
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--line-dark);
    text-align: right;
    white-space: nowrap;
  }
  th {
    font-weight: 600;
    color: var(--fog);
  }
  th:first-child,
  td:first-child {
    text-align: left;
  }
}

.not-tunable {
  display: grid;
  gap: 20px;
  padding-block: clamp(56px, 8vw, 104px);
  > * {
    max-width: 760px;
  }
  .display {
    font-size: clamp(2.6rem, 6vw, 5.4rem);
  }
  .lead {
    color: rgb(255 255 255 / 0.75);
  }
}

.disclaimer {
  max-width: 820px;
  margin: 0;
  padding-block: 32px 56px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--fog);
}

/* Reveal sequence for results */
@media (prefers-reduced-motion: no-preference) {
  .is-revealing > * {
    animation: fade-up 0.8s var(--ease-out) backwards;
  }
  .is-revealing > :nth-child(2) {
    animation-delay: 0.1s;
  }
  .is-revealing > :nth-child(3) {
    animation-delay: 0.2s;
  }
  .is-revealing > :nth-child(n + 4) {
    animation-delay: 0.3s;
  }
}

/* Small screens */
@media (max-width: 560px) {
  .header__inner {
    height: 64px;
  }
  .page-solid main {
    padding-top: 64px;
  }
  .brand__name {
    font-size: 0.74rem;
  }
  .hero__body {
    padding-top: 92px;
  }
  .hero__dock-title {
    font-size: 1.15rem;
  }
  .readout tbody th {
    width: 18%;
    font-size: 0.62rem;
  }
  .readout thead th {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    .key {
      display: none;
    }
  }
  .readout__num {
    font-size: 2.3rem;
    small {
      display: block;
      margin: 4px 0 0;
      font-size: 0.6rem;
    }
  }
  /* 320px phones: tighter columns so the table fits without cutting off the gain. */
  @media (max-width: 360px) {
    .readout th,
    .readout td {
      padding-right: 10px;
    }
    .readout__num {
      font-size: 2.05rem;
    }
  }
  .nav .btn {
    padding: 0 14px;
  }
}

@media (max-width: 330px) {
  .brand__name {
    display: none;
  }
}

/* ── Results page: headings, actions, compact footer ── */

.specs-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.specs-source {
  margin: 0;
  font-size: 0.9rem;
  color: var(--slate);
}

.estimate__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 20px;
  margin: 6px 0 0;
  @media (max-width: 860px) {
    justify-content: flex-start;
  }
}

.link-button {
  padding: 0;
  border: 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  color: var(--white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background-size 0.3s var(--ease-out);
  &:hover {
    color: var(--signal);
  }
}

.footer--compact {
  padding-top: 0;
}

/* ── Print: the results page as a clean one-page sheet ── */

@media print {
  @page {
    margin: 14mm;
  }
  body {
    background: #fff;
    color: #000;
  }
  .header,
  .footer,
  .cta,
  .skip-link,
  .estimate__actions,
  .demo-banner,
  .vehicle__media,
  .vehicle__top .btn,
  .table-view,
  .report-card,
  .variants__help,
  .grain::before {
    display: none !important;
  }
  .page-solid main {
    padding-top: 0;
  }
  .vehicle,
  .estimate,
  .light,
  .specs-section,
  .state {
    background: #fff !important;
    color: #000 !important;
    padding-block: 6mm !important;
    min-height: 0 !important;
  }
  .vehicle__title {
    font-size: 36pt;
  }
  .readout th,
  .readout td,
  .readout__num,
  .readout__num--std,
  .readout__num--gain,
  .readout__pct,
  .estimate__info,
  .estimate__engine,
  #source-line a,
  .quick dt,
  .quick dd,
  .notes li,
  .variant,
  .variant__fits,
  .chart__caption,
  .disclaimer,
  .label {
    color: #000 !important;
  }
  .readout__num {
    font-size: 28pt;
  }
  .notes li {
    background: none;
    border-left-color: #000;
  }
  .variant:not(:has(input:checked)) {
    display: none;
  }
  .variant {
    background: none !important;
    border: 1px solid #000;
  }
  .chart__tick,
  .chart__end {
    fill: #333;
  }
  .chart__grid {
    stroke: #ccc;
  }
  .chart__wash {
    display: none;
  }
  .is-revealing > * {
    animation: none !important;
  }
  .menu,
  .menu-button {
    display: none !important;
  }
}

/* ══ Site pages ═══════════════════════════════════════ */

:root {
  /* Lets FAQ answers open to their natural height smoothly. */
  interpolate-size: allow-keywords;
}

/* Big condensed capitals sit a hair inside the text edge; pull them back into line. */
.display {
  margin-inline-start: -0.03em;
}

/* ── Navigation: current page and menu button ─────── */

.nav__links .text-link {
  color: rgb(255 255 255 / 0.74);
  transition: color 0.2s ease, background-size 0.35s var(--ease-out);
  &:hover,
  &[aria-current='page'] {
    color: var(--white);
  }
  &[aria-current='page'] {
    background-size: 100% 1px;
  }
}

.nav__cta {
  @media (max-width: 480px) {
    display: none;
  }
}

.menu-button {
  display: none;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 2px;
  background: transparent;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease;
  &:hover {
    border-color: var(--white);
  }
  span {
    display: grid;
    gap: 5px;
    width: 18px;
    &::before,
    &::after {
      content: '';
      height: 1.5px;
      background: currentColor;
    }
  }
  @media (max-width: 1180px) {
    display: inline-flex;
  }
}

.menu-button--close span {
  grid-template-areas: 'x';
  &::before,
  &::after {
    grid-area: x;
  }
  &::before {
    rotate: 45deg;
  }
  &::after {
    rotate: -45deg;
  }
}

/* ── Desktop navigation: hover panels ─────────────────
   Tuning, Results and How it works open a full-width panel under the header on hover or keyboard focus:
   numbered groups of links, each with its own photo, and a large photo that follows the link under the
   pointer (site.js). Panels open after a short pause, so sweeping across the header doesn't flash them,
   and the page behind dims. Escape closes one (site.js). */

.nav {
  align-self: stretch;
}

.nav__links {
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

.nav__item {
  display: flex;
  align-items: center;
}

.nav__top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  &.is-current {
    color: var(--white);
    background-size: 100% 1px;
  }
}

.nav__caret {
  flex: none;
  width: 9px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: rotate 0.3s var(--ease-out);
}

.nav__tag,
.mega__tag {
  flex: none;
  padding: 3px 5px 2px;
  border-radius: 2px;
  background: var(--signal);
  color: var(--ink);
  font-size: 0.56rem;
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.mega {
  position: absolute;
  inset: 100% 0 auto;
  display: none;
  white-space: normal;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: var(--ink);
  box-shadow: 0 48px 96px rgb(0 0 0 / 0.5);
  opacity: 0;
  translate: 0 -8px;
  transition:
    opacity 0.22s ease,
    translate 0.45s var(--ease-out),
    display 0.22s allow-discrete;
  transition-delay: 120ms;
}

/* Moving straight to another item closes this one at once. */
.nav__links:has(.nav__item--mega:hover) .nav__item--mega:not(:hover) > .mega {
  transition-delay: 0s;
}

.nav__item--mega:is(:hover, :focus-within):not(.is-closed) {
  > .mega {
    display: block;
    opacity: 1;
    translate: 0 0;
    transition-delay: 90ms;
    @starting-style {
      opacity: 0;
      translate: 0 -8px;
    }
  }
  > .nav__top {
    color: var(--white);
    background-size: 100% 1px;
  }
  .nav__caret {
    rotate: 180deg;
  }
  .mega__list li {
    opacity: 1;
    translate: 0 0;
    transition-delay: calc(110ms + var(--i) * 28ms);
    @starting-style {
      opacity: 0;
      translate: 0 8px;
    }
  }
}

/* The header goes solid under an open panel, and the page behind it dims. */
.header:has(.nav__item--mega:is(:hover, :focus-within):not(.is-closed)) {
  background: var(--ink);
  border-bottom-color: var(--line-dark);
}

.header::after {
  content: '';
  position: absolute;
  inset: 100% 0 auto;
  z-index: -1;
  height: 100vh;
  background: rgb(5 6 8 / 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.header:has(.nav__item--mega:is(:hover, :focus-within):not(.is-closed))::after {
  opacity: 1;
  transition-delay: 90ms;
}

.mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.6fr);
  gap: clamp(32px, 4vw, 72px);
  padding-block: 36px 44px;
}

.mega__groups {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-content: start;
}

.mega__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--fog);
  font-size: 0.66rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  span {
    color: var(--signal);
  }
}

.mega__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    opacity: 0;
    translate: 0 8px;
    transition:
      opacity 0.3s ease,
      translate 0.5s var(--ease-out);
  }
}

.mega__link {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-inline: -10px;
  padding: 8px 10px;
  border-radius: 3px;
  color: var(--white);
  text-decoration: none;
  transition: background-color 0.2s ease;
  &:hover,
  &:focus-visible,
  &.is-active {
    background: rgb(255 255 255 / 0.06);
  }
  &:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 0;
  }
}

.mega__thumb {
  width: 80px;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 2px;
  background: var(--graphite);
  object-fit: cover;
  filter: var(--grade) brightness(0.8);
  transition: filter 0.3s ease;
  .mega__link:is(:hover, :focus-visible, .is-active) & {
    filter: var(--grade);
  }
}

.mega__text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mega__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 110%;
  line-height: 1.2;
}

.mega__note {
  color: var(--fog);
  font-size: 0.82rem;
  line-height: 1.35;
}

.mega__feature {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-radius: 3px;
  color: var(--white);
  text-decoration: none;
}

.mega__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  &.is-active {
    opacity: 1;
  }
}

.mega__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The graphics keep their content up top, clear of the caption. */
  object-position: 50% 0%;
  /* A graphic is shown whole, straight on the panel (a photo fills the frame), however the panel is shaped. */
  &.is-art {
    object-fit: contain;
  }
  filter: var(--grade);
  scale: 1.06;
  transition: scale 1.4s var(--ease-out);
  .mega__frame.is-active & {
    scale: 1;
  }
}

.mega__caption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px 16px;
  padding: 64px 24px 22px;
  background: linear-gradient(to top, rgb(11 12 14 / 0.88), rgb(11 12 14 / 0));
  svg {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 22px;
    height: 22px;
    color: var(--signal);
  }
}

.mega__caption-name {
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.92;
  text-transform: uppercase;
}

.mega__caption-note {
  color: rgb(255 255 255 / 0.78);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .mega,
  .mega__list li,
  .mega__photo {
    translate: none;
    scale: none;
    transition-property: opacity, display;
  }
}

/* ── Locked pages ─────────────────────────────────────
   Pages not yet submitted to the build (LOCKED in site.js). Where they're linked: a quiet padlock that
   lights up on hover, the link dimmed, and the reason on hover in the header or across the top of its
   panel. On the page itself: the content blurred from the first frame (the head script), and a notice
   with a status badge, a padlock that clicks shut, and the ways to the pages that are open. */

.lock-icon {
  display: inline-block;
  flex: none;
  width: 0.78em;
  height: 0.9em;
  vertical-align: -0.08em;
  opacity: 0.75;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* In the header it stays quiet until the item is hovered or focused. */
.nav__top .lock-icon {
  width: 9px;
  height: 11px;
  opacity: 0.5;
}

.nav__item:is(:hover, :focus-within) > .nav__top .lock-icon {
  color: var(--signal);
  opacity: 1;
}

.menu__word .lock-icon {
  width: 0.42em;
  height: 0.5em;
  margin-left: 0.3em;
  vertical-align: 0.14em;
  color: var(--signal);
  opacity: 1;
}

.footer__nav a .lock-icon,
.index-row__name .lock-icon {
  width: 0.7em;
  height: 0.8em;
  margin-left: 0.4em;
}

.mega__name .lock-icon {
  width: 10px;
  height: 12px;
}

.mega__caption .mega__caption-name .lock-icon {
  width: 0.42em;
  height: 0.5em;
  margin-left: 0.35em;
  vertical-align: 0.1em;
  color: var(--white);
  opacity: 0.7;
}

/* Locked links read as not open yet, and come up a little when pointed at. */
.mega__link[data-locked] {
  .mega__thumb {
    opacity: 0.45;
    filter: grayscale(1) brightness(0.8);
  }
  .mega__name {
    color: rgb(255 255 255 / 0.62);
  }
  &:is(:hover, :focus-visible) {
    .mega__name {
      color: var(--white);
    }
    .lock-icon {
      color: var(--signal);
      opacity: 1;
    }
  }
}

.index-row[data-locked] {
  .index-row__name {
    opacity: 0.72;
  }
}

/* In the phone menu a locked page's note runs on one line under its name, in amber. */
.menu__links a[data-locked] {
  flex-wrap: wrap;
  row-gap: 4px;
  .menu__word {
    opacity: 0.72;
  }
  .menu__desc {
    flex-basis: 100%;
    max-width: none;
    text-align: left;
    color: rgb(245 196 0 / 0.85);
  }
}

/* A plain locked item in the header says why, in a small label with a pointer. */
.nav__item[data-lock-note] {
  position: relative;
  &::before,
  &::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, translate 0.3s var(--ease-out);
  }
  &::before {
    content: '';
    top: calc(100% - 15px);
    z-index: 2;
    width: 10px;
    height: 10px;
    background: var(--white);
    rotate: 45deg;
    translate: -50% 4px;
  }
  &::after {
    content: attr(data-lock-note);
    top: calc(100% - 10px);
    z-index: 3;
    padding: 9px 14px;
    border-radius: 4px;
    background: var(--white);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 14px 34px rgb(0 0 0 / 0.4);
    translate: -50% 4px;
  }
  &:is(:hover, :focus-within)::before,
  &:is(:hover, :focus-within)::after {
    opacity: 1;
    translate: -50% 0;
  }
}

/* A locked item's panel opens with the reason across its top. */
.mega__locked {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  border-left: 2px solid var(--signal);
  background: linear-gradient(90deg, rgb(245 196 0 / 0.09), rgb(245 196 0 / 0) 70%);
  color: rgb(255 255 255 / 0.75);
  font-size: 0.84rem;
  b {
    margin-right: 4px;
    color: var(--white);
    font-weight: 700;
  }
  .lock-icon {
    width: 11px;
    height: 13px;
    color: var(--signal);
    opacity: 1;
  }
}

/* On a locked page. */
html.is-locked {
  overflow: hidden;
  main,
  .footer {
    filter: blur(20px) brightness(0.42) saturate(0.6);
    pointer-events: none;
    user-select: none;
  }
}

.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 96px 0 clamp(80px, 12vw, 150px);
  background: linear-gradient(90deg, rgb(11 12 14 / 0.94) 0%, rgb(11 12 14 / 0.8) 42%, rgb(11 12 14 / 0.45) 100%);
}

.lock-screen__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
}

.lock-screen__flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(16px, 3svh, 28px);
  color: var(--signal);
  font-size: 0.7rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  .lock-icon {
    width: 12px;
    height: 14px;
    color: var(--signal);
    opacity: 1;
  }
}

/* The site's hero pairing: the name heavy, the verdict light. */
.lock-screen__title {
  margin: 0;
  font-size: clamp(3rem, min(10vw, 13svh), 8rem);
  .line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.02em;
  }
  .line > span {
    display: block;
  }
  .line:nth-child(2) {
    font-weight: 300;
    color: rgb(240 246 251 / 0.9);
  }
}

/* The status as a spec sheet, ruled like the figures elsewhere on the site. */
.lock-screen__spec {
  display: grid;
  width: min(100%, 34rem);
  margin: clamp(26px, 4.4svh, 44px) 0 0;
  border-top: 1px solid rgb(255 255 255 / 0.16);
  > div {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
  }
  dt {
    padding-top: 3px;
    color: var(--fog);
    font-size: 0.66rem;
    font-weight: 700;
    font-stretch: 125%;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  dd {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0;
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 600;
  }
  a {
    color: var(--white);
    text-decoration-color: rgb(245 196 0 / 0.8);
    text-underline-offset: 4px;
    &:hover {
      color: var(--signal);
    }
  }
}

.lock-screen__go {
  margin-top: clamp(24px, 4svh, 36px);
}

/* The logo's ridge along the foot, as at the end of every page. */
.lock-screen__ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(56px, 11vw, 150px);
  fill: var(--ink);
  pointer-events: none;
}

.lock-screen__ridge-line {
  fill: none;
  stroke: rgb(159 216 246 / 0.45);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: no-preference) {
  .lock-screen__flag,
  .lock-screen__spec,
  .lock-screen__go {
    animation: fade-up 1s var(--ease-out) both;
  }
  .lock-screen__flag {
    animation-delay: 0.1s;
  }
  .lock-screen__title .line > span {
    animation: rise-in 1.1s 0.2s var(--ease-out) both;
  }
  .lock-screen__title .line:nth-child(2) > span {
    animation-delay: 0.3s;
  }
  .lock-screen__spec {
    animation-delay: 0.5s;
  }
  .lock-screen__go {
    animation-delay: 0.62s;
  }
  .lock-screen__ridge {
    animation: lock-ridge 1.4s 0.15s var(--ease-out) both;
  }
}

@keyframes lock-ridge {
  from {
    translate: 0 100%;
  }
}

/* The header tucks away while reading down and comes back on any scroll up (site.js). */
.header {
  transition:
    translate 0.45s var(--ease-out),
    background-color 0.3s ease,
    border-color 0.3s ease;
  &.is-hidden {
    translate: 0 -100%;
  }
}

/* ── Full-screen menu (phones and tablets) ────────────
   The logo's ridge rises from the bottom of the screen: a snow edge first, the ink close behind it,
   then the links rise out of their own masks. Closing sinks the ridge back down. */

html:has(.menu[open]) {
  overflow: hidden;
}

.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--snow);
  color: var(--white);
  clip-path: polygon(0% 100%, 100% 100%, 100% 113.66%, 95% 112.53%, 88.33% 110.62%, 80% 108.19%, 71.67% 105.94%, 64.17% 102.9%, 56.67% 103.06%, 49.17% 101.12%, 42.5% 102.25%, 37.5% 100%, 32.5% 103.85%, 27.5% 101.44%, 20.83% 108.19%, 17.5% 106.75%, 11.67% 111.9%, 5% 116.24%, 0% 118%);
  transition-property: clip-path, display, overlay;
  transition-duration: 0.75s;
  transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  transition-behavior: allow-discrete;
  &::backdrop {
    background: transparent;
  }
  /* The ink, a beat behind the snow edge. Full by default so closing never flashes white. */
  &::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(120% 60% at 50% 110%, rgb(35 153 221 / 0.16), transparent 60%),
      var(--ink);
  }
  .menu-button {
    display: inline-flex;
  }
}

.menu:is([open]):where(:not([data-closing])) {
  clip-path: polygon(0% 100%, 100% 100%, 100% -4.34%, 95% -5.47%, 88.33% -7.38%, 80% -9.81%, 71.67% -12.06%, 64.17% -15.1%, 56.67% -14.94%, 49.17% -16.88%, 42.5% -15.75%, 37.5% -18%, 32.5% -14.15%, 27.5% -16.56%, 20.83% -9.81%, 17.5% -11.25%, 11.67% -6.1%, 5% -1.76%, 0% 0%);
  @starting-style {
    clip-path: polygon(0% 100%, 100% 100%, 100% 113.66%, 95% 112.53%, 88.33% 110.62%, 80% 108.19%, 71.67% 105.94%, 64.17% 102.9%, 56.67% 103.06%, 49.17% 101.12%, 42.5% 102.25%, 37.5% 100%, 32.5% 103.85%, 27.5% 101.44%, 20.83% 108.19%, 17.5% 106.75%, 11.67% 111.9%, 5% 116.24%, 0% 118%);
  }
}

@keyframes ridge-rise {
  from {
    clip-path: polygon(0% 100%, 100% 100%, 100% 113.66%, 95% 112.53%, 88.33% 110.62%, 80% 108.19%, 71.67% 105.94%, 64.17% 102.9%, 56.67% 103.06%, 49.17% 101.12%, 42.5% 102.25%, 37.5% 100%, 32.5% 103.85%, 27.5% 101.44%, 20.83% 108.19%, 17.5% 106.75%, 11.67% 111.9%, 5% 116.24%, 0% 118%);
  }
  to {
    clip-path: polygon(0% 100%, 100% 100%, 100% -4.34%, 95% -5.47%, 88.33% -7.38%, 80% -9.81%, 71.67% -12.06%, 64.17% -15.1%, 56.67% -14.94%, 49.17% -16.88%, 42.5% -15.75%, 37.5% -18%, 32.5% -14.15%, 27.5% -16.56%, 20.83% -9.81%, 17.5% -11.25%, 11.67% -6.1%, 5% -1.76%, 0% 0%);
  }
}

@keyframes mask-rise {
  from {
    translate: 0 105%;
  }
}

@keyframes line-draw {
  from {
    scale: 0 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .menu[open]:not([data-closing]) {
    &::before {
      animation: ridge-rise 0.8s 0.09s cubic-bezier(0.76, 0, 0.24, 1) both;
    }
    .menu__word {
      animation: mask-rise 0.8s 0.42s var(--ease-out) both;
    }
    .menu__desc {
      animation: fade-up 0.7s 0.6s var(--ease-out) both;
    }
    .menu__links li::after {
      animation: line-draw 0.9s 0.38s var(--ease-out) both;
    }
    .menu__links li:nth-child(2) :is(.menu__word, .menu__desc),
    .menu__links li:nth-child(2)::after { animation-delay: 0.47s; }
    .menu__links li:nth-child(3) :is(.menu__word, .menu__desc),
    .menu__links li:nth-child(3)::after { animation-delay: 0.52s; }
    .menu__links li:nth-child(4) :is(.menu__word, .menu__desc),
    .menu__links li:nth-child(4)::after { animation-delay: 0.57s; }
    .menu__links li:nth-child(5) :is(.menu__word, .menu__desc),
    .menu__links li:nth-child(5)::after { animation-delay: 0.62s; }
    .menu__top,
    .menu__check,
    .menu__foot {
      animation: fade-up 0.7s 0.6s var(--ease-out) both;
    }
    .menu__top {
      animation-delay: 0.3s;
    }
    .menu__foot {
      animation-delay: 0.7s;
    }
    .menu__ridge {
      animation: ridge-grow 1.2s 0.35s var(--ease-out) both;
    }
    /* The two lines of the menu icon swing into a cross. */
    .menu-button--close span::before {
      animation: cross-a 0.5s 0.4s var(--ease-out) both;
    }
    .menu-button--close span::after {
      animation: cross-b 0.5s 0.4s var(--ease-out) both;
    }
  }
}

@keyframes ridge-grow {
  from {
    scale: 1 0.2;
    opacity: 0;
  }
}

@keyframes cross-a {
  from {
    rotate: 0deg;
    translate: 0 -3px;
  }
}

@keyframes cross-b {
  from {
    rotate: 0deg;
    translate: 0 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu {
    clip-path: none;
    opacity: 0;
    transition-property: opacity, display, overlay;
    transition-duration: 0.15s;
  }
  .menu:is([open]):where(:not([data-closing])) {
    clip-path: none;
    opacity: 1;
    @starting-style {
      clip-path: none;
      opacity: 0;
    }
  }
}

.menu__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  gap: 22px;
  min-height: 100%;
  padding-bottom: 24px;
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
  @media (max-width: 560px) {
    height: 64px;
  }
}

.menu__nav {
  display: grid;
  align-content: center;
}

.menu__links {
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    position: relative;
    overflow: hidden;
    /* Hairline under each row, drawn left to right as the menu opens. */
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: var(--line-dark);
      transform-origin: left;
    }
  }
  a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0 5px;
    text-decoration: none;
    color: rgb(255 255 255 / 0.5);
    transition: color 0.2s ease;
    &:hover,
    &:active,
    &[aria-current='page'] {
      color: var(--white);
    }
  }
}

.menu__word {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  font-size: min(11vw, 6dvh, 6rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.92;
  text-transform: uppercase;
  white-space: nowrap;
  [aria-current='page'] &::after {
    content: '';
    width: 0.15em;
    height: 0.15em;
    background: var(--signal);
  }
}

.menu__desc {
  max-width: 11em;
  text-align: right;
  line-height: 1.35;
  font-size: 0.64rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}

/* A plate search inside the menu, so a reg can be checked from anywhere. */
.menu__check {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  .label {
    grid-column: 1 / -1;
    color: var(--fog);
  }
  .plate {
    min-height: 58px;
  }
  .plate__input {
    font-size: 1.7rem;
  }
  .btn {
    min-height: 0;
    width: 58px;
    padding: 0;
  }
  .plate-form__error {
    grid-column: 1 / -1;
  }
}

.menu__foot {
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
}

.menu__area {
  margin: 0;
  font-size: 0.95rem;
  color: rgb(255 255 255 / 0.82);
}

.menu__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  a {
    color: var(--fog);
    text-decoration: none;
    &:hover {
      color: var(--white);
    }
  }
}

/* The logo's range along the foot of the menu, snowcaps and all, with the Stage 1 line over it. */
.menu__ridge {
  display: block;
  width: calc(100% + var(--pad) * 2);
  height: clamp(64px, 11dvh, 130px);
  margin: 0 calc(var(--pad) * -1) -24px;
  pointer-events: none;
  transform-origin: 50% 100%;
  .menu__ridge-rock {
    fill: #191c21;
  }
  .menu__ridge-snow {
    fill: rgb(238 240 241 / 0.22);
  }
  .menu__ridge-line {
    fill: none;
    stroke: var(--s1);
    stroke-width: 2;
    stroke-opacity: 0.75;
    stroke-dasharray: 1;
    vector-effect: non-scaling-stroke;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .menu[open]:not([data-closing]) .menu__ridge-line {
    animation: road-draw 1.8s 0.6s var(--ease-out) both;
  }
}

/* ── Inner page hero ──────────────────────────────── */

.page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(540px, 78svh, 820px);
  padding: 150px 0 clamp(52px, 6vw, 88px);
  overflow: hidden;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--grade) contrast(1.08) brightness(0.86);
    @media (prefers-reduced-motion: no-preference) {
      animation: settle 2.4s var(--ease-out) both;
    }
  }
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgb(11 12 14 / 0.6) 0%, rgb(11 12 14 / 0.05) 38%, rgb(11 12 14 / 0.92) 88%, var(--ink) 100%),
      linear-gradient(90deg, rgb(11 12 14 / 0.6) 0%, rgb(11 12 14 / 0) 62%);
  }
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px 24px;
  align-items: end;
  @media (max-width: 960px) {
    grid-template-columns: 1fr;
  }
}

/* A hairline leads into the breadcrumb, like the eyebrow on the home hero. */
.page-hero__crumbs {
  grid-column: 1 / -1;
  .crumbs::before {
    content: '';
    align-self: center;
    width: clamp(24px, 4vw, 48px);
    height: 1px;
    margin-right: 6px;
    background: rgb(255 255 255 / 0.32);
  }
  @media (prefers-reduced-motion: no-preference) {
    animation: fade-up 0.9s var(--ease-out) both;
  }
}

.section--follow {
  padding-top: 0;
}

.page-hero__title {
  grid-column: 1 / span 8;
  font-size: clamp(3.4rem, min(12vw, 4.4rem + 4.6vw), 9rem);
  @media (max-width: 960px) {
    grid-column: 1;
  }
}

/* As on the home hero: the first line heavy, the second light. */
.page-hero__title {
  text-shadow: 0 2px 28px rgb(11 12 14 / 0.5);
  .line:nth-child(2) {
    font-weight: 300;
    color: rgb(240 246 251 / 0.92);
  }
}

.page-hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.02em;
  > span {
    display: block;
    @media (prefers-reduced-motion: no-preference) {
      animation: rise-in 1.1s var(--ease-out) both;
    }
  }
  &:nth-child(2) > span {
    animation-delay: 0.08s;
  }
}

.page-hero__side {
  grid-column: 9 / -1;
  display: grid;
  gap: 22px;
  padding-bottom: 0.4em;
  @media (max-width: 960px) {
    grid-column: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    animation: fade-up 1s 0.25s var(--ease-out) both;
  }
}

.page-hero__lead {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  max-width: 28em;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  color: rgb(255 255 255 / 0.8);
  text-wrap: pretty;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  li + li::before {
    content: '/';
    margin-right: 10px;
    color: var(--fog);
  }
  a {
    color: var(--fog);
    text-decoration: none;
    &:hover {
      color: var(--white);
    }
  }
}

/* ── Home: the index of the other pages (dark) ────── */

.index-section .section-head .display {
  grid-column: 1 / span 7;
}

.index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(255 255 255 / 0.5);
}

.index-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
  gap: 14px 32px;
  align-items: center;
  position: relative;
  isolation: isolate;
  --shift: clamp(20px, 2.4vw, 36px);
  padding: clamp(26px, 3.2vw, 44px) 0;
  border-bottom: 1px solid var(--line-dark);
  color: inherit;
  text-decoration: none;
  transition: color 0.35s ease;
  /* Hover is all transform and colour, so the row never has to be laid out again mid-animation. */
  &::before {
    content: '';
    position: absolute;
    inset: 0 -16px;
    z-index: -1;
    background: var(--snow);
    scale: 1 0;
    transform-origin: 50% 100%;
    transition: scale 0.5s var(--ease-out);
  }
  .index-row__name,
  .index-row__desc {
    transition: translate 0.5s var(--ease-out), color 0.35s ease;
  }
  @media (max-width: 860px) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.index-row__name {
  font-size: clamp(2.6rem, 5.8vw, 5.8rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.9;
  text-transform: uppercase;
}

.index-row__desc {
  max-width: 30em;
  color: var(--fog);
  transition: color 0.35s ease;
  @media (max-width: 860px) {
    grid-column: 1;
    grid-row: 2;
  }
}

.index-row__go {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 50%;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    translate 0.4s var(--ease-out);
  svg {
    width: 18px;
    height: 18px;
  }
  @media (max-width: 860px) {
    grid-row: 1 / span 2;
    grid-column: 2;
    width: 48px;
    height: 48px;
  }
}

.index-row:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  .index-row:hover {
    color: var(--ink);
    &::before {
      scale: 1 1;
    }
    .index-row__name {
      translate: var(--shift) 0;
    }
    .index-row__desc {
      color: var(--slate);
      translate: calc(var(--shift) * 0.4) 0;
    }
    .index-row__go {
      background: var(--signal);
      border-color: var(--signal);
      color: var(--ink);
      translate: calc(var(--shift) * -0.3 + 6px) 0;
    }
  }
}

/* ── Typeset point lists on light sections ────────── */

.points-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px 24px;
  align-items: start;
  @media (max-width: 960px) {
    grid-template-columns: 1fr;
  }
}

.points-section__head {
  grid-column: 1 / span 5;
  display: grid;
  gap: 24px;
  .display {
    font-size: clamp(3rem, 6vw, 6rem);
  }
  @media (min-width: 961px) {
    position: sticky;
    top: 120px;
  }
  @media (max-width: 960px) {
    grid-column: 1;
  }
}

.points-section__note {
  margin: 0;
  max-width: 24em;
  font-size: 1.05rem;
  color: var(--slate);
}

/* Health check: the price, set big. */
.points-section__free {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-light);
  b {
    font-size: clamp(4rem, 8vw, 6.5rem);
    font-weight: 800;
    font-stretch: 62%;
    line-height: 0.85;
  }
  span {
    max-width: 12em;
    font-size: 1rem;
    font-weight: 600;
  }
}

.points-section .split__points {
  grid-column: 7 / -1;
  @media (max-width: 960px) {
    grid-column: 1;
  }
}

/* ── Tuning: which map (dark) ─────────────────────── */

.compare {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgb(255 255 255 / 0.5);
  @media (max-width: 1100px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}

.compare__col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  gap: 0;
  padding: 28px 28px 8px 0;
  border-bottom: 1px solid var(--line-dark);
  & + & {
    padding-left: 28px;
    border-left: 1px solid var(--line-dark);
  }
  @media (max-width: 1100px) {
    &:nth-child(3) {
      padding-left: 0;
      border-left: 0;
    }
  }
  @media (max-width: 640px) {
    & + & {
      padding-left: 0;
      border-left: 0;
    }
  }
}

.compare__name {
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.9;
  text-transform: uppercase;
}

.compare__row {
  margin: 0;
  padding: 16px 0 18px;
  border-top: 1px solid var(--line-dark);
  dt {
    margin-bottom: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fog);
  }
  dd {
    margin: 0;
    color: rgb(255 255 255 / 0.86);
  }
}

.compare-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: clamp(36px, 5vw, 56px);
  p {
    margin: 0;
    max-width: 34em;
    color: var(--fog);
  }
}

/* ── Results: typical gains by engine type (light) ── */

.gains {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
  th,
  td {
    padding: clamp(18px, 2.4vw, 30px) 24px clamp(18px, 2.4vw, 30px) 0;
    border-bottom: 1px solid var(--line-light);
    text-align: left;
    vertical-align: baseline;
  }
  thead th {
    padding-block: 16px;
    font-size: 0.68rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
    white-space: nowrap;
  }
  tbody th {
    width: 26%;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 700;
  }
  td:last-child {
    padding-right: 0;
    color: var(--slate);
  }
  @media (max-width: 760px) {
    thead {
      display: none;
    }
    tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 20px;
      padding: 24px 0;
      border-bottom: 1px solid var(--line-light);
    }
    th,
    td {
      padding: 0;
      border: 0;
    }
    tbody th,
    td:last-child {
      grid-column: 1 / -1;
      width: auto;
    }
    tbody th {
      margin-bottom: 10px;
    }
    td:last-child {
      margin-top: 10px;
    }
    .gains__num::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 6px;
      font-size: 0.66rem;
      font-weight: 600;
      font-stretch: 125%;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--slate);
    }
  }
}

.gains__num {
  font-size: clamp(2.4rem, 4.8vw, 4.6rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.9;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gains-note {
  margin: 20px 0 0;
  font-size: 0.9rem;
  color: var(--slate);
}

/* ── Questions page: grouped answers ──────────────── */

.faq__list:has(.faq__group) {
  border-top: 0;
}

.faq__group + .faq__group {
  margin-top: clamp(48px, 6vw, 72px);
}

.faq__group-title {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.faq__intro--sticky {
  @media (min-width: 961px) {
    position: sticky;
    top: 120px;
  }
}

.faq__contact {
  display: grid;
  gap: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--line-light);
  a:not(.btn) {
    width: fit-content;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    font-stretch: 62%;
    line-height: 1;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }
  }
}

/* FAQ answers open and close smoothly where the browser can animate to auto height. */
.qa::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.5s var(--ease-out),
    content-visibility 0.5s allow-discrete;
}

.qa[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  .qa::details-content {
    transition: none;
  }
}

/* ── Dyno tabs: the marker slides between cars ────── */

@supports (position-anchor: --a) {
  .tabs {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      position-anchor: --active-tab;
      inset-inline-start: anchor(left);
      inset-inline-end: anchor(right);
      inset-block-start: calc(anchor(bottom) - 2px);
      block-size: 2px;
      background: var(--signal);
      @media (prefers-reduced-motion: no-preference) {
        transition: inset 0.4s var(--ease-out);
      }
    }
  }
  .tab[aria-selected='true'] {
    anchor-name: --active-tab;
    border-bottom-color: transparent;
  }
}

/* Headings on the new sections rise like the others. */
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    .points-section__head .display,
    .process__head .display {
      animation: heading-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
  }
}

/* ══ Coverage and motion ═══════════════════════════════ */

/* ── Home: where we cover (dark) ──────────────────── */

/* The heading on the left, the towns and the postcode check on the right, and the map across the
   whole width under both. */
.coverage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 24px;
  align-items: end;
  @media (max-width: 960px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.coverage__side {
  grid-column: 8 / -1;
  display: grid;
  gap: 24px;
  @media (max-width: 960px) {
    grid-column: 1;
  }
}

.coverage__copy {
  grid-column: 1 / span 6;
  display: grid;
  gap: 28px;
  .display {
    font-size: clamp(3rem, 6.4vw, 6.6rem);
  }
  .lead {
    color: rgb(255 255 255 / 0.75);
  }
  @media (max-width: 960px) {
    grid-column: 1;
  }
}

.coverage__towns {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 1.15;
  text-transform: uppercase;
  li:not(:last-child)::after {
    content: '/';
    margin: 0 0.32em;
    font-weight: 400;
    color: var(--fog);
  }
}

.coverage__note {
  margin: 0;
  color: var(--fog);
}

/* The map sits straight on the page: no panel, no border. Its edges fade into the ink. */
#coverage {
  overflow-x: clip;
}

.map {
  grid-column: 1 / -1;
  position: relative;
  margin: clamp(8px, 2vw, 32px) 0 0;
  &::before {
    content: '';
    position: absolute;
    inset: -12%;
    background: radial-gradient(closest-side, rgb(35 153 221 / 0.1), transparent);
    pointer-events: none;
  }
  @media (max-width: 960px) {
    grid-column: 1;
    margin-inline: calc(var(--pad) * -1);
  }
}

.map__frame {
  position: relative;
  aspect-ratio: 1200 / 700;
  /* Phones: wider than the screen, so the ring stays a good size; the section clips the sides. */
  @media (max-width: 760px) {
    width: 150%;
    margin-left: -25%;
  }
}

.map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  -webkit-mask-image: radial-gradient(closest-side, #000 90%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 90%, transparent 100%);
}

.map__area {
  fill: url(#map-glow);
}

.map__ring {
  fill: none;
  stroke: rgb(255 255 255 / 0.18);
  stroke-dasharray: 2 6;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

/* The edge of the area: a solid line, so where we come to reads at a glance. */
.map__ring--edge {
  stroke: rgb(159 216 246 / 0.6);
  stroke-width: 1.5;
  stroke-dasharray: none;
}

.map__road {
  fill: none;
  stroke: rgb(255 255 255 / 0.34);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  vector-effect: non-scaling-stroke;
}

.map__road--minor {
  stroke: rgb(255 255 255 / 0.16);
  stroke-width: 1.5;
}

/* Radar sweep: a conic wedge on its own layer, centred on Oswestry and as wide as the 25-mile edge,
   so the rotation runs on the compositor. The bright edge leads. */
.map__sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 51.67%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 50deg, rgb(159 216 246 / 0.26) 90deg, transparent 90deg);
  pointer-events: none;
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 1.5px;
    margin-top: -0.75px;
    background: rgb(159 216 246 / 0.45);
  }
}

.map__pin {
  fill: var(--white);
  transform-box: fill-box;
  transform-origin: center;
}

.map__pin--far {
  fill: rgb(255 255 255 / 0.35);
}

.map__pin--base {
  fill: var(--signal);
}

.map__pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  translate: -50% -50%;
  border: 1.5px solid var(--signal);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.map__van {
  fill: var(--ice);
}

.map__van-glow {
  fill: var(--ice);
  opacity: 0.25;
}

.map__town,
.map__note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: 12px -50%;
  font-size: clamp(0.6rem, 0.5rem + 0.25vw, 0.74rem);
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.86);
  pointer-events: none;
}

.map__town--left {
  translate: calc(-100% - 12px) -50%;
}

.map__town--below {
  translate: -50% 10px;
}

.map__town--base {
  color: var(--signal);
  font-size: 0.72rem;
}

.map__town--far {
  color: rgb(255 255 255 / 0.4);
  @media (max-width: 760px) {
    display: none;
  }
}

.map__town--wide {
  @media (max-width: 760px) {
    display: none;
  }
}

.map__town--minor {
  color: rgb(255 255 255 / 0.64);
  @media (max-width: 760px) {
    display: none;
  }
}

.map__note {
  left: 50%;
  translate: -50% -50%;
  padding: 0 6px;
  background: var(--ink);
  font-size: 0.58rem;
  color: var(--fog);
}

.map__note--edge {
  color: var(--ice);
}

/* Route numbers set like UK primary-route signs: yellow on green, white edge. */
.map__road-tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  padding: 1px 5px 0;
  border: 1px solid rgb(255 255 255 / 0.9);
  border-radius: 2px;
  background: #00703c;
  color: #ffd200;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.35;
  pointer-events: none;
}

/* North marker sitting on the outer ring. */
.map__north {
  position: absolute;
  left: 50%;
  top: var(--y);
  translate: -50% calc(-100% - 2px);
  display: grid;
  justify-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  font-stretch: 125%;
  color: var(--fog);
  pointer-events: none;
  &::after {
    content: '';
    width: 1px;
    height: 12px;
    background: currentColor;
  }
}

.map__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-top: 6px;
  padding-inline: var(--pad);
  font-size: 0.8rem;
  color: var(--fog);
  span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ice);
  }
  span:first-child i {
    background: var(--signal);
  }
  span:nth-child(3) i {
    background: rgb(255 255 255 / 0.35);
  }
}

/* Entrance: rings open out, roads draw, towns drop in. Armed by site.js so the map is
   simply visible without JavaScript. */
.map.is-armed .map__frame {
  opacity: 0;
}

.map.is-in .map__frame {
  opacity: 1;
  .map__area {
    animation: fade-in 1.2s var(--ease-out) both;
  }
  .map__ring {
    animation: ring-open 1.4s var(--ease-out) both;
    &:nth-of-type(2) { animation-delay: 0.12s; }
    &:nth-of-type(3) { animation-delay: 0.24s; }
  }
  .map__road {
    animation: road-draw 1.8s 0.3s var(--ease-out) both;
  }
  .map__pin,
  .map__town,
  .map__road-tag,
  .map__note,
  .map__north {
    animation: pin-drop 0.7s calc(0.6s + var(--d, 0) * 0.12s) var(--ease-out) both;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .map.is-in:not(.is-paused) {
    .map__sweep {
      animation: sweep-turn 7s linear infinite;
    }
    .map__pulse {
      animation: pulse-out 2.6s 1.2s var(--ease-out) infinite;
    }
  }
  .map.is-paused * {
    animation-play-state: paused !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map__sweep,
  .map__van,
  .map__van-glow {
    display: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes ring-open {
  from {
    scale: 0.2;
    opacity: 0;
  }
}

@keyframes road-draw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes pin-drop {
  from {
    opacity: 0;
    translate: 0 -10px;
  }
}

@keyframes sweep-turn {
  to {
    rotate: 360deg;
  }
}

@keyframes pulse-out {
  from {
    scale: 1;
    opacity: 0.9;
  }
  to {
    scale: 5;
    opacity: 0;
  }
}

/* Town labels keep their offset while dropping in. */
.map__town,
.map__note,
.map__road-tag,
.map__north {
  animation-composition: add;
}

/* ── Page transitions: the next page rises in behind the logo's ridge ── */

@media (prefers-reduced-motion: no-preference) {
  .header {
    view-transition-name: site-header;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
  }
  ::view-transition-old(root) {
    animation: page-sink 0.85s cubic-bezier(0.76, 0, 0.24, 1) both;
  }
  ::view-transition-new(root) {
    animation: ridge-rise 0.85s cubic-bezier(0.76, 0, 0.24, 1) both;
  }
  ::view-transition-group(site-header) {
    animation-duration: 0.5s;
  }
}

/* Opacity over the ink page colour reads as darkening, without filtering a full-screen snapshot. */
@keyframes page-sink {
  to {
    scale: 0.94;
    translate: 0 -4%;
    opacity: 0.3;
  }
}

/* ── Scroll motion ────────────────────────────────── */

@supports ((animation-timeline: view()) and (animation-range: 0% 100%)) {
  @media (prefers-reduced-motion: no-preference) {
    /* The manifesto fills in word by word as it rises up the screen (words split in site.js). */
    .manifesto.is-split {
      view-timeline: --manifesto block;
    }
    .manifesto.is-split .w {
      animation: word-in linear both;
      animation-timeline: --manifesto;
      animation-range: cover calc(14% + var(--p) * 32%) cover calc(20% + var(--p) * 32%);
    }

    /* Hero copy lifts away as you scroll off it; photos drift slower than the page. */
    .hero__body,
    .page-hero__inner {
      animation: lift-away linear both;
      animation-timeline: scroll(root);
      animation-range: 0 75vh;
    }
    .page-hero__media img {
      animation: settle 2.4s var(--ease-out) both, drift linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }

    /* Each step's title brightens as you reach it, and its marker lights up. The body text stays
       full strength so it's always readable ahead of the line. */
    .step h3 {
      animation: step-in linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 42%;
    }
    .step__num {
      animation: num-on linear both;
      animation-timeline: view();
      animation-range: cover 40% cover 48%;
    }

    /* Index rows and comparison columns arrive one after another. */
    .index li,
    .compare__col,
    .gains tbody tr,
    .points-section .split__points li,
    .faq__group .qa {
      animation: rise-row linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

    /* The ridge under the yellow band grows as it comes into view. */
    .cta__ridge {
      transform-origin: 50% 100%;
      animation: ridge-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }

    .coverage__copy .display {
      animation: heading-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
  }
}

@keyframes word-in {
  from {
    opacity: 0.14;
  }
}

@keyframes lift-away {
  to {
    opacity: 0;
    translate: 0 -10vh;
  }
}

@keyframes step-in {
  from {
    /* Still over 3:1 against the ink, the minimum for large text. */
    opacity: 0.5;
  }
}

@keyframes num-on {
  to {
    background: var(--signal);
    color: var(--ink);
    scale: 1.3;
  }
}

@keyframes rise-row {
  from {
    opacity: 0;
    translate: 0 32px;
  }
}

@keyframes ridge-up {
  from {
    scale: 1 0.12;
  }
}

/* ── Film grain moves like film ───────────────────── */

/* The grain layer is oversized and shifted with translate, so it runs on the compositor
   instead of repainting the photo every step. Its parent clips the overflow. */
@media (prefers-reduced-motion: no-preference) {
  .grain::before {
    inset: -160px;
    animation: grain 0.9s steps(5) infinite;
  }
}

@keyframes grain {
  0% { translate: 0 0; }
  20% { translate: -37px 41px; }
  40% { translate: 53px -19px; }
  60% { translate: -61px -63px; }
  80% { translate: 71px 47px; }
  100% { translate: 0 0; }
}

/* ── Touch and press feedback ─────────────────────── */

.btn {
  transition:
    translate 0.45s var(--ease-out),
    background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out),
    scale 0.2s var(--ease-out);
  &:active {
    scale: 0.97;
  }
}

@media (hover: none) {
  .index-row:active {
    background: rgb(255 255 255 / 0.05);
  }
  .index-row:active .index-row__go {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--ink);
  }
}

/* The menu icon: the short line stretches to meet you on hover. */
.menu-button:not(.menu-button--close) span::after {
  width: 62%;
  justify-self: end;
  transition: width 0.3s var(--ease-out);
}

.menu-button:not(.menu-button--close):hover span::after {
  width: 100%;
}

/* ══ Privacy page ══════════════════════════════════════ */

.legal-hero {
  padding: 150px 0 clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line-dark);
}

.legal-hero__inner {
  display: grid;
  gap: 22px;
  .display {
    font-size: clamp(3.4rem, 8.6vw, 8rem);
  }
  .lead {
    color: rgb(255 255 255 / 0.78);
  }
}

.prose {
  max-width: 46em;
  h2 {
    margin: 2.2em 0 0.55em;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    font-stretch: 62%;
    line-height: 1;
    text-transform: uppercase;
    &:first-child {
      margin-top: 0;
    }
  }
  p,
  li {
    color: var(--slate);
    text-wrap: pretty;
  }
  ul {
    margin: 0;
    padding-left: 1.2em;
    display: grid;
    gap: 10px;
  }
  li::marker {
    color: var(--ink);
  }
  a {
    color: var(--ink);
    font-weight: 600;
    text-underline-offset: 3px;
  }
}

.prose__updated {
  margin-top: 3em;
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
  font-size: 0.9rem;
}

.footer__legal a[href='/privacy'] {
  margin-left: 0.6em;
}

/* ══ Keyboard users get the same moments as the mouse ═ */

.index-row:focus-visible {
  color: var(--ink);
  &::before {
    scale: 1 1;
  }
  .index-row__name {
    translate: var(--shift) 0;
  }
  .index-row__desc {
    color: var(--slate);
    translate: calc(var(--shift) * 0.4) 0;
  }
  .index-row__go {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--ink);
    translate: calc(var(--shift) * -0.3 + 6px) 0;
  }
}

.nav__links .text-link:focus-visible {
  color: var(--white);
  background-size: 100% 1px;
}

.menu__links a:focus-visible,
.tab:focus-visible {
  color: var(--white);
}

.footer__col a:focus-visible {
  color: var(--signal);
}

.footer__phone:focus-visible {
  color: var(--signal);
  background-size: 100% 4px;
}

/* ══ Postcode check ═══════════════════════════════════ */

/* An underline field, like the town list above it: no box. */
.reach {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}

.reach__label {
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}

.reach__field {
  display: flex;
  align-items: stretch;
  border-bottom: 2px solid rgb(255 255 255 / 0.3);
  transition: border-color 0.3s ease;
  &:focus-within {
    border-color: var(--signal);
  }
}

.reach__input {
  flex: 1;
  width: 0; /* so the field's own size never widens the column */
  min-width: 0;
  padding: 10px 0 12px;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  font-stretch: 72%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  &::placeholder {
    color: rgb(255 255 255 / 0.22);
    text-transform: none;
    letter-spacing: 0;
  }
}

.reach__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 0 16px;
  border: 0;
  background: none;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  cursor: pointer;
  svg {
    width: 18px;
    height: 18px;
    transition: translate 0.35s var(--ease-out);
  }
  &:hover svg {
    translate: 4px 0;
  }
  &:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 4px;
  }
}

/* The answer: a ruled panel with the distance, where that puts them (ice blue inside the area, yellow
   where a call-out fee applies), what it means, and a WhatsApp link with their postcode in. */
.reach__result {
  --tone: var(--ice);
  margin: 0;
  max-width: 36em;
  &:empty {
    display: none;
  }
  &[data-tone='error'] {
    color: var(--fog);
    font-size: 0.95rem;
  }
  &[data-tone='maybe'],
  &[data-tone='far'] {
    --tone: var(--signal);
  }
  &:not([data-tone='error']) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px 22px;
    align-items: start;
    margin-top: 6px;
    padding: 20px 22px 22px;
    border: 1px solid var(--line-dark);
    border-left: 3px solid var(--tone);
    background: rgb(255 255 255 / 0.03);
  }
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-tone='error']):not(:empty) {
      animation: fade-up 0.6s var(--ease-out) both;
    }
  }
}

.reach__miles {
  display: grid;
  justify-items: center;
  min-width: 4.2rem;
  padding-right: 22px;
  border-right: 1px solid var(--line-dark);
  color: var(--fog);
  font-size: 0.62rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  b {
    color: var(--white);
    font-size: 2.8rem;
    font-weight: 800;
    font-stretch: 62%;
    letter-spacing: 0;
    line-height: 0.95;
  }
}

.reach__body {
  display: grid;
  justify-items: start;
  gap: 8px;
  &:only-child {
    grid-column: 1 / -1;
  }
}

.reach__status {
  color: var(--tone);
  font-size: 0.66rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.reach__text {
  color: rgb(255 255 255 / 0.84);
  font-size: 0.95rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.reach__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--tone);
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  svg {
    width: 16px;
    height: 16px;
    transition: translate 0.3s var(--ease-out);
  }
  &:hover svg {
    translate: 4px 0;
  }
}

/* The checked postcode: a line out from Oswestry and an ice-blue pin. */
.map__you-line {
  stroke: var(--ice);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 0.3s ease;
  &.is-shown {
    opacity: 0.85;
  }
}

.map__you {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: 14px;
  height: 14px;
  translate: -50% -50%;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 0 5px rgb(159 216 246 / 0.22);
  pointer-events: none;
  &[hidden] {
    display: none;
  }
}

.map__you-tag {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  translate: 0 -50%;
  padding: 3px 7px 2px;
  background: var(--ice);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.map__you--left .map__you-tag {
  left: auto;
  right: calc(100% + 10px);
}

/* ══ Booking planner ══════════════════════════════════ */

.cta__plan {
  font-weight: 800;
}

.menu__contact a[data-book] {
  color: var(--signal);
}

/* The name and description span both rows, so the note and the link stack in the last column. */
@media (min-width: 861px) {
  .service {
    row-gap: 14px;
  }
  .service__name,
  .service__body {
    grid-row: span 2;
  }
  .service__meta {
    align-self: end;
  }
}

.service__book {
  grid-column: 3;
  align-self: start;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  svg {
    width: 16px;
    height: 16px;
    transition: translate 0.35s var(--ease-out);
  }
  &:hover svg {
    translate: 4px 0;
  }
  @media (max-width: 860px) {
    grid-column: 1;
    justify-self: start;
    margin-top: 4px;
  }
}

/* The page behind an open menu or planner stays put. */
html:has(:is(.menu, .book)[open]) {
  overflow: hidden;
}

/* A panel from the right on wider screens; a full-height sheet from below on phones. */
.book {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(560px, 100%);
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--snow);
  color: var(--ink);
  translate: 100% 0;
  transition-property: translate, display, overlay;
  transition-duration: 0.55s;
  transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  transition-behavior: allow-discrete;
  &::backdrop {
    background: rgb(11 12 14 / 0.62);
    opacity: 0;
    transition-property: opacity, display, overlay;
    transition-duration: 0.45s;
    transition-behavior: allow-discrete;
  }
  @media (max-width: 640px) {
    inset: 0;
    width: 100%;
    translate: 0 100%;
  }
}

.book:is([open]):where(:not([data-closing])) {
  translate: 0 0;
  @starting-style {
    translate: 100% 0;
  }
  &::backdrop {
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }
  @media (max-width: 640px) {
    @starting-style {
      translate: 0 100%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .book {
    translate: 0 0;
    opacity: 0;
    transition-property: opacity, display, overlay;
    transition-duration: 0.2s;
  }
  .book:is([open]):where(:not([data-closing])) {
    opacity: 1;
    @starting-style {
      opacity: 0;
      translate: 0 0;
    }
  }
}

.book__form {
  display: grid;
  gap: 26px;
  min-height: 100%;
  align-content: start;
  padding: clamp(24px, 4vw, 40px);
}

.book__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.book__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

.book__close {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  span::before,
  span::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1.5px;
    background: var(--ink);
    translate: -50% -50%;
    rotate: 45deg;
  }
  span::after {
    rotate: -45deg;
  }
  &:hover {
    background: var(--ink);
    border-color: var(--ink);
    span::before,
    span::after {
      background: var(--white);
    }
  }
}

.book__title {
  margin: -6px 0 0;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  font-stretch: 72%;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}

.book__group {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  legend {
    padding: 0;
    margin-bottom: 12px;
  }
}

.book__group legend,
.book__field label {
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  span {
    margin-left: 8px;
    letter-spacing: 0.06em;
    text-transform: none;
    font-stretch: 100%;
    font-weight: 400;
    color: var(--slate);
  }
}

.book__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
  input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line-light);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  &:hover span {
    border-color: var(--ink);
  }
  input:checked + span {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
  }
  input:focus-visible + span {
    outline: 2px solid var(--s1-l);
    outline-offset: 3px;
  }
}

.book__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  @media (max-width: 420px) {
    grid-template-columns: 1fr;
  }
}

.book__field {
  display: grid;
  gap: 10px;
  align-content: start;
}

.plate--book {
  --h: 52px;
  box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.6), inset 0 2px 0 rgb(255 255 255 / 0.4);
  &:has(input:focus-visible) {
    outline-color: var(--ink);
  }
}

.book__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line-light);
  border-radius: 2px;
  background: var(--white);
  font-family: var(--font);
  font-size: 1rem;
  color: var(--ink);
  resize: vertical;
  &:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 0;
  }
  &::placeholder {
    color: rgb(11 12 14 / 0.38);
  }
}

#book-postcode {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  &::placeholder {
    font-weight: 400;
  }
}

/* The message as it will look in the chat. */
.book__preview {
  display: grid;
  gap: 10px;
  padding: 18px;
  background: #e4ddd3;
  background-image: radial-gradient(rgb(11 12 14 / 0.05) 1px, transparent 1px);
  background-size: 14px 14px;
}

.book__preview-label {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

.book__bubble {
  position: relative;
  justify-self: end;
  max-width: 92%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px 0 8px 8px;
  background: #d9fdd3;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: -8px;
    border-top: 10px solid #d9fdd3;
    border-right: 8px solid transparent;
  }
}

.book__foot {
  display: grid;
  gap: 12px;
  padding-top: 4px;
  .btn {
    width: 100%;
  }
}

.book__note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--slate);
}

@media (prefers-reduced-motion: no-preference) {
  .book:is([open]):where(:not([data-closing])) .book__form > * {
    animation: fade-up 0.6s var(--ease-out) both;
  }
  .book:is([open]):where(:not([data-closing])) .book__form > :nth-child(2) { animation-delay: 0.12s; }
  .book:is([open]):where(:not([data-closing])) .book__form > :nth-child(3) { animation-delay: 0.16s; }
  .book:is([open]):where(:not([data-closing])) .book__form > :nth-child(4) { animation-delay: 0.2s; }
  .book:is([open]):where(:not([data-closing])) .book__form > :nth-child(5) { animation-delay: 0.24s; }
  .book:is([open]):where(:not([data-closing])) .book__form > :nth-child(n + 6) { animation-delay: 0.28s; }
}

/* ══ Find your engine (Results) ═══════════════════════ */

.finder {
  display: grid;
  gap: 16px;
  margin: 28px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
}

.finder__title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}

.finder__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.6fr);
  gap: 12px 24px;
  @media (max-width: 860px) {
    grid-template-columns: 1fr;
  }
}

.finder__field {
  display: grid;
  gap: 6px;
  min-width: 0;
  span {
    font-size: 0.66rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.5);
  }
  select {
    width: 100%;
    min-height: 48px;
    padding: 8px 32px 8px 0;
    border: 0;
    border-bottom: 2px solid rgb(255 255 255 / 0.3);
    border-radius: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c400' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 18px;
    appearance: none;
    font-family: var(--font);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color 0.3s ease;
    &:hover:not(:disabled),
    &:focus-visible {
      border-color: var(--signal);
      outline: none;
    }
    &:disabled {
      color: rgb(255 255 255 / 0.35);
      cursor: default;
      background-image: none;
    }
    option,
    optgroup {
      background: var(--graphite);
      color: var(--white);
    }
  }
}

.finder__fits {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.72);
  a {
    font-weight: 700;
    color: var(--white);
  }
}

/* ══ Welcome back (home) ══════════════════════════════ */

.hero__dock-note a {
  color: var(--white);
  font-weight: 600;
}

.dock-forget {
  margin-left: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fog);
}

/* ══ The dyno page ════════════════════════════════════
   A car on a virtual rolling road: the graph on the left traces each run live, the console on the right
   has the tachometer, the readouts and the run buttons. Colour is the map (copper standard, blue Stage 1);
   line style is the quantity (solid power, dashed torque). */

.cell {
  padding: clamp(32px, 5vw, 64px) 0 clamp(64px, 8vw, 110px);
  background:
    radial-gradient(60% 45% at 75% 0%, rgb(35 153 221 / 0.09), transparent 70%),
    var(--ink);
}

.cell__top {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px 40px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-dark);
}

.cell__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  span {
    color: var(--fog);
  }
}

.cell__title {
  margin: 0;
  font-size: clamp(2.6rem, 6.2vw, 5.8rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
}

.cell__title.is-long {
  font-size: clamp(2.2rem, 4.4vw, 4.4rem);
}

.cell__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 16px;
  .plate--sm {
    min-width: 150px;
    --h: 40px;
  }
}

.cell__engine {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
}

.cell__pick {
  display: grid;
  gap: 10px;
  width: min(100%, 320px);
}

.cell__own {
  margin: 0;
  font-size: 0.86rem;
  color: var(--fog);
  a {
    font-weight: 700;
    color: var(--white);
  }
}

.cell__deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 25vw, 310px);
  gap: 28px clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: 28px;
  @media (max-width: 960px) {
    grid-template-columns: 1fr;
  }
}

.cell__screen-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 12px;
}

.cell__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  &::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fog);
  }
  &[data-map='standard']::before,
  &[data-map='stage1']::before {
    @media (prefers-reduced-motion: no-preference) {
      animation: blink 0.6s ease-in-out infinite alternate;
    }
  }
  &[data-map='standard']::before {
    background: var(--std);
  }
  &[data-map='stage1']::before {
    background: var(--s1);
  }
  &[data-map='gain'] {
    color: var(--signal);
    &::before {
      background: var(--signal);
    }
  }
}

.cell__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.66rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
  li {
    display: flex;
    align-items: center;
    gap: 7px;
  }
}

/* Colour is the map: copper standard, blue Stage 1, yellow Stage 2. */
.cell {
  --map-standard: var(--std);
  --map-stage1: var(--s1);
  --map-stage2: var(--signal);
}

.cell__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--map-standard);
  &[data-map='stage1'] {
    background: var(--map-stage1);
  }
  &[data-map='stage2'] {
    background: var(--map-stage2);
  }
}

.cell__line {
  width: 18px;
  border-top: 2.5px solid var(--fog);
}

.cell__line--dash {
  border-top-style: dashed;
  border-top-width: 2px;
}

.cell__graph svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cell__grid {
  line {
    stroke: rgb(255 255 255 / 0.05);
    shape-rendering: crispEdges;
    &.major {
      stroke: rgb(255 255 255 / 0.12);
    }
  }
  .tick {
    fill: var(--fog);
    font-family: var(--font);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .axis {
    fill: var(--white);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
  }
}

.trace {
  path {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .trace__power {
    stroke-width: 3;
  }
  .trace__torque {
    stroke-width: 2;
    stroke-dasharray: 7 5;
  }
}

.trace--standard path {
  stroke: var(--map-standard);
}

.trace--stage1 path {
  stroke: var(--map-stage1);
}

.trace--stage2 path {
  stroke: var(--map-stage2);
}

.hide-power :is(.trace__power, .peak--p),
.hide-torque :is(.trace__torque, .peak--t) {
  display: none;
}

.trace--stage1 .trace__power {
  filter: drop-shadow(0 0 6px rgb(35 153 221 / 0.55));
}

.trace__peaks {
  @media (prefers-reduced-motion: no-preference) {
    animation: fade-in 0.5s ease both;
  }
  .peak {
    stroke-width: 2.5;
    fill: var(--ink);
  }
  .peak-label {
    fill: var(--white);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--ink);
    stroke-width: 4px;
    stroke-linejoin: round;
  }
  .peak-label.peak--t {
    fill: rgb(255 255 255 / 0.75);
  }
}

.trace--standard .peak {
  stroke: var(--std);
}

.trace--stage1 .peak {
  stroke: var(--map-stage1);
  fill: var(--map-stage1);
}

.trace--stage2 .peak {
  stroke: var(--map-stage2);
  fill: var(--map-stage2);
}

.dot {
  stroke: var(--ink);
  stroke-width: 2;
  fill: var(--map-standard);
}

.dot--stage1 {
  fill: var(--map-stage1);
}

.dot--stage2 {
  fill: var(--map-stage2);
}

.dot--t {
  fill: var(--ink);
  stroke-width: 2;
  stroke: var(--map-standard);
  &.dot--stage1 {
    stroke: var(--map-stage1);
  }
  &.dot--stage2 {
    stroke: var(--map-stage2);
  }
}

.cell__cursor line {
  stroke: rgb(255 255 255 / 0.45);
  stroke-width: 1;
}

/* Reading the graph: the cursor's figures for every finished map. */
.cell__graph {
  cursor: crosshair;
  touch-action: pan-y;
  &:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 6px;
  }
}

.cell__scope {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  gap: 6px;
  min-width: 190px;
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(11 12 14 / 0.94);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  &[hidden] {
    display: none;
  }
  /* Phones: under the graph rather than over it. */
  @media (max-width: 560px) {
    position: static;
    translate: none !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    margin-top: 10px;
    .cell__scope-rpm {
      grid-column: 1 / -1;
    }
  }
}

.cell__scope-rpm {
  margin: 0 0 2px;
  font-size: 0.66rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
}

.cell__scope-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 0;
  font-size: 0.78rem;
  color: var(--fog);
  span {
    width: 100%;
    font-size: 0.62rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--map-standard);
  }
  &[data-map='stage1'] span {
    color: var(--map-stage1);
  }
  &[data-map='stage2'] span {
    color: var(--map-stage2);
  }
  b {
    font-size: 1rem;
    font-weight: 800;
    color: var(--white);
  }
  small {
    margin-left: 4px;
    color: var(--signal);
    font-weight: 600;
  }
}

.cell__under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 10px;
}

.cell__tip {
  margin: 0;
  font-size: 0.78rem;
  color: var(--fog);
  @media (hover: none) {
    &::before {
      content: 'Touch and ';
    }
  }
}

/* Segmented switches: units and what's drawn. */
.cell__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seg {
  display: inline-flex;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 2px;
  button {
    min-width: 40px;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    background: none;
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.08em;
    color: var(--fog);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    & + button {
      border-left: 1px solid rgb(255 255 255 / 0.18);
    }
    &:hover {
      color: var(--white);
    }
    &[aria-pressed='true'] {
      background: var(--white);
      color: var(--ink);
    }
    &:focus-visible {
      outline: 2px solid var(--signal);
      outline-offset: 2px;
    }
  }
}

/* The console */

.cell__console {
  display: grid;
  gap: 22px;
  @media (max-width: 960px) {
    order: -1;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 18px 22px;
    .cell__controls {
      grid-column: 1 / -1;
    }
    .cell__read {
      grid-template-columns: 1fr;
      div:first-child {
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line-dark);
      }
      div:last-child {
        padding-left: 0;
      }
    }
  }
}

.tacho {
  position: relative;
  width: min(100%, 280px);
  margin-inline: auto;
  aspect-ratio: 1;
  svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.tacho__read {
  position: absolute;
  left: 0;
  right: 0;
  top: 57%;
  margin: 0;
  text-align: center;
  pointer-events: none;
  b {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 800;
    font-stretch: 88%;
    font-variant-numeric: tabular-nums;
  }
}

.tacho__track,
.tacho__red,
.tacho__sweep {
  fill: none;
  stroke-width: 9;
}

.tacho__track {
  stroke: rgb(255 255 255 / 0.1);
}

.tacho__red {
  stroke: #d8432f;
  opacity: 0.9;
}

.tacho__sweep {
  stroke: var(--signal);
  [data-running='standard'] & {
    stroke: var(--map-standard);
  }
  [data-running='stage1'] & {
    stroke: var(--map-stage1);
  }
  [data-running='stage2'] & {
    stroke: var(--map-stage2);
  }
}

.tacho__tick {
  stroke: rgb(255 255 255 / 0.35);
  stroke-width: 1.5;
  &.is-major {
    stroke: var(--white);
    stroke-width: 2.5;
  }
  &.is-red {
    stroke: #d8432f;
  }
}

.tacho__num {
  fill: var(--white);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  font-stretch: 88%;
}

.tacho__unit {
  fill: var(--fog);
  font-family: var(--font);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.tacho__needle path {
  fill: var(--signal);
}

.tacho__hub {
  fill: var(--ink);
  stroke: var(--signal);
  stroke-width: 3;
}

.cell__read {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  div {
    padding: 14px 0;
    &:first-child {
      padding-right: 14px;
      border-right: 1px solid var(--line-dark);
    }
    &:last-child {
      padding-left: 18px;
    }
  }
  dt {
    font-size: 0.66rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fog);
  }
  dd {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 6px 0 0;
  }
  b {
    font-size: clamp(2rem, 3.2vw, 2.7rem);
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
    [data-running='standard'] & {
      color: var(--map-standard);
    }
    [data-running='stage1'] & {
      color: var(--map-stage1);
    }
    [data-running='stage2'] & {
      color: var(--map-stage2);
    }
  }
  small {
    font-size: 0.7rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fog);
  }
}

.cell__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  .btn:disabled {
    opacity: 0.45;
    cursor: default;
  }
}

.cell__go {
  width: 100%;
  svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }
}

.cell__maps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  &[data-count='3'] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .btn {
    padding: 0 8px;
    color: var(--white);
    font-size: 0.68rem;
  }
}

.cell__util {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  font-size: 0.82rem;
  .link-button {
    font-weight: 500;
    color: var(--fog);
    &:hover {
      color: var(--white);
    }
  }
}

/* Full screen: the cell fills the display, on its own background. */
.cell:fullscreen {
  overflow-y: auto;
  padding-top: 32px;
}

.cell__go,
.cell__maps .btn {
  text-align: center;
  @media (max-width: 420px) {
    letter-spacing: 0.08em;
  }
}

/* Before the first run: a prompt in the middle of the empty graph. */
.cell__graph {
  position: relative;
}

.cell__hint {
  position: absolute;
  inset: 0 0 40px;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.45);
  pointer-events: none;
  transition: opacity 0.4s ease;
  .has-runs & {
    opacity: 0;
  }
}

/* The run log and the small print */

.cell__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 25vw, 310px);
  gap: 32px clamp(28px, 4vw, 56px);
  margin-top: 36px;
  @media (max-width: 960px) {
    grid-template-columns: 1fr;
  }
}

.cell__table {
  width: 100%;
  border-collapse: collapse;
  th,
  td {
    padding: 14px 12px 14px 0;
    border-bottom: 1px solid var(--line-dark);
    text-align: left;
    vertical-align: baseline;
  }
  thead th {
    font-size: 0.66rem;
    font-weight: 600;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fog);
  }
  tbody th {
    font-weight: 700;
    white-space: nowrap;
  }
  b {
    font-size: 1.35rem;
    font-weight: 800;
    font-stretch: 88%;
    font-variant-numeric: tabular-nums;
  }
  small {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.8rem;
    color: var(--fog);
  }
}

.cell__key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--map-standard);
  [data-map='stage1'] & {
    background: var(--map-stage1);
  }
  [data-map='stage2'] & {
    background: var(--map-stage2);
  }
}

.cell__gain {
  th,
  b {
    color: var(--signal);
  }
}

.cell__empty td {
  font-size: 0.92rem;
  color: var(--fog);
}

.cell__aside {
  display: grid;
  align-content: start;
  gap: 16px;
  p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgb(255 255 255 / 0.65);
  }
  .btn {
    justify-self: start;
  }
}

.dyno__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ══ Entrance timing ══════════════════════════════════ */

/* Animations hold at their first frame until the page is actually on screen (the script in each
   page's head removes this class), so nothing plays out unseen in a prerender or under the transition. */
.is-holding *,
.is-holding *::before,
.is-holding *::after {
  animation-play-state: paused !important;
}