/* 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;
  }
}

html {
  scrollbar-color: var(--steel) var(--ink);
}

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

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;
  /* On phones the header holds Book in and Menu; the badge carries the name. */
  @media (max-width: 480px) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

.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. Here it sits
     mid-page, so it's simply there from the start rather than sliding up as it does along the bottom of
     the desktop hero. */
  .hero > .hero__dock {
    grid-row: 3;
    animation: none;
  }
  .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;
    }
  }
  /* A little shorter on a phone, so the plate check under it is on the first screen too. */
  .hero__car {
    height: min(var(--w) * 0.5, 34svh);
  }
}

/* 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;
  }
  /* White beside the yellow plate, so the two read apart. */
  .btn {
    background: var(--white);
    color: var(--ink);
    &:hover {
      background: var(--signal);
    }
  }
  /* On a phone the button is a square arrow beside the plate rather than a row of its own (its words are
     still its name for screen readers), which keeps the whole check on the first screen. */
  @media (max-width: 560px) {
    .btn {
      width: 68px;
      max-width: none;
      padding: 0;
      gap: 0;
      justify-content: center;
      font-size: 0;
      svg {
        width: 24px;
        height: 24px;
      }
    }
  }
}

/* Phones and small tablets: the plate first under its label, then the welcome-back note and demo plates. */
@media (max-width: 900px) {
  .hero__dock-copy {
    display: contents;
  }
  .hero__dock-title {
    order: 0;
  }
  .plate-form--dock {
    order: 1;
  }
  .hero__dock-note {
    order: 2;
  }
  .demo-hint {
    order: 3;
  }
  .hero__dock-inner {
    gap: 12px;
    padding-block: 18px 22px;
  }
}

/* ── 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;
  }
  .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. */

@media (hover: hover) and (pointer: fine) {
  .prices__table tbody tr {
    transition: background-color 0.25s ease;
    &:hover {
      background: rgb(255 255 255 / 0.035);
    }
  }
}

.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;
  }
}

/* Under the photos: where to follow the work, on one ruled line. */
.gallery__follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(28px, 4vw, 56px);
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line-light);
}

.gallery__follow-label {
  margin: 0 auto 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  @media (max-width: 640px) {
    flex-basis: 100%;
  }
}

.gallery__social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  .social__icon {
    width: 26px;
    height: 26px;
    flex: none;
  }
  .gallery__social-name {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    font-stretch: 62%;
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
    transition: background-size 0.35s var(--ease-out);
  }
  .gallery__social-handle {
    font-size: 0.9rem;
    color: var(--slate);
  }
  &:hover .gallery__social-name,
  &:focus-visible .gallery__social-name {
    background-size: 100% 2px;
  }
}

@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: 0 clamp(20px, 2.6vw, 34px);
  margin: 0 0 28px;
  button {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: linear-gradient(var(--ink), var(--ink)) 0 calc(100% - 8px) / 0 2px no-repeat;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    font-stretch: 125%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--slate);
    cursor: pointer;
    transition: color 0.2s ease, background-size 0.35s var(--ease-out);
    &:hover {
      color: var(--ink);
    }
    &[aria-pressed='true'] {
      color: var(--ink);
      background-size: 100% 2px;
    }
    &:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
  }
}

.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: 18px 0 0;
  border-top: 1px solid var(--rule);
  /* A short yellow rule leads the note, the same mark the booking panel's price line uses. */
  &::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    margin-bottom: 12px;
    background: var(--signal);
  }
  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;
  }
}

/* Contact links with a small mark each: WhatsApp, phone, Instagram, Facebook. */
.footer__contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  .social__icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--fog);
    transition: color 0.25s ease;
  }
  &:hover .social__icon,
  &:focus-visible .social__icon {
    color: var(--signal);
  }
}

.footer__address {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  font-style: normal;
  line-height: 1.55;
  color: var(--fog);
}

.footer__address-label {
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer__directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 8px;
  padding-bottom: 3px;
  color: var(--white);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color 0.3s ease;
  svg {
    width: 14px;
    height: 14px;
    transition: translate 0.35s var(--ease-out);
  }
  &:hover,
  &:focus-visible {
    color: var(--signal);
    svg {
      translate: 2px -2px;
    }
  }
}

/* Authorised dealer: one ruled line between the links and the small print. */
.footer__partner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px 40px;
  padding-block: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--line-dark);
  @media (max-width: 640px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

.footer__partner-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  text-decoration: none;
  &:hover,
  &:focus-visible {
    .footer__partner-name {
      color: var(--signal);
    }
    .footer__partner-url {
      color: var(--white);
      svg {
        translate: 2px -2px;
      }
    }
  }
}

.footer__partner-name {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.footer__partner-url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  font-size: 0.9rem;
  color: var(--fog);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color 0.3s ease;
  svg {
    width: 14px;
    height: 14px;
    transition: translate 0.35s var(--ease-out);
  }
}

/* ══ 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,
.share-card__copy p {
  max-width: 58ch;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.72);
}

/* The story-sized picture of the estimate (share-card.js draws it), under the PDF report. */
.share-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px clamp(24px, 4vw, 48px);
  padding-block: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--line-dark);
  @media (max-width: 720px) {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    .share-card__actions {
      grid-column: 1 / -1;
    }
  }
}

.share-card__preview {
  width: 112px;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  background: var(--graphite);
  box-shadow: 0 0 0 1px var(--line-dark), 0 18px 36px -12px rgb(0 0 0 / 0.7);
  overflow: hidden;
  rotate: -3deg;
  transition: rotate 0.5s var(--ease-out), translate 0.5s var(--ease-out);
  @media (max-width: 560px) {
    width: 84px;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .is-ready & img {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .share-card:hover .share-card__preview {
    rotate: -6deg;
    translate: 0 -4px;
  }
}

.share-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.86rem;
  color: rgb(255 255 255 / 0.72);
  cursor: pointer;
  input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--signal);
  }
}

.share-card__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  @media (max-width: 720px) {
    flex-flow: row wrap;
  }
}

.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;
  }
}

/* Book in: beside Check my car, and the one yellow button in the header on phones. */
.nav__book {
  @media (max-width: 480px) {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--ink);
    &:hover {
      background: #ffd84a;
      border-color: #ffd84a;
    }
  }
}

.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;
  }
}

/* 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) ────────────
   Opens and closes at once, with nothing animated: ink over the page (behind the dialog too, so nothing
   can flash through), the links, the plate search and the logo's ridge along the foot. */

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:
    radial-gradient(120% 60% at 50% 110%, rgb(35 153 221 / 0.16), transparent 60%),
    var(--ink);
  color: var(--white);
  &::backdrop {
    background: var(--ink);
  }
  .menu-button {
    display: inline-flex;
  }
}

.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;
  }
}

/* ── 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;
  }
}

.process__note--small {
  font-size: 0.92rem;
  line-height: 1.6;
  strong {
    font-weight: 700;
    color: var(--white);
  }
}

/* ── Diagnostic plans (health check page): three ruled columns, no boxes ── */

.plans__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  @media (max-width: 900px) {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
  }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 30px clamp(20px, 2.6vw, 40px) 4px;
  border-left: 1px solid var(--line-light);
  &:first-child {
    padding-left: 0;
    border-left: 0;
  }
  &:last-child {
    padding-right: 0;
  }
  @media (max-width: 900px) {
    padding: 28px 0 44px;
    border-left: 0;
    border-top: 2px solid var(--ink);
  }
}

.plan__name {
  margin: 0;
  font-size: clamp(2.8rem, 4.6vw, 4.2rem);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.86;
  text-transform: uppercase;
}

.plan__for {
  margin: 10px 0 0;
  font-size: 0.95rem;
  color: var(--slate);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 30px 0 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-light);
  b {
    font-size: clamp(3.6rem, 6vw, 5.4rem);
    font-weight: 800;
    font-stretch: 62%;
    line-height: 0.85;
  }
  span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slate);
  }
}

.plan__list {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    padding: 13px 0;
    border-bottom: 1px solid var(--line-light);
    font-size: 0.95rem;
    line-height: 1.45;
    text-wrap: pretty;
  }
  .plan__more {
    font-weight: 700;
  }
}

.plan__join {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding-bottom: 4px;
  font-size: 0.76rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.35s var(--ease-out);
  svg {
    width: 16px;
    height: 16px;
    transition: translate 0.35s var(--ease-out);
  }
  &:hover {
    background-size: 100% 2px;
    svg {
      translate: 4px 0;
    }
  }
}

.plans__alone {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: clamp(40px, 5vw, 64px) 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-light);
  }
  b {
    font-size: 1.3rem;
    font-weight: 800;
    font-stretch: 88%;
    white-space: nowrap;
  }
  @media (max-width: 720px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.plans__small {
  max-width: 44em;
  margin: 20px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--slate);
}

.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;
  }
}

/* The logo's ridge sweeping up over the old page. */
@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%);
  }
}

/* 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: 100%;
  transform-origin: right center;
  scale: 0.62 1;
  transition: scale 0.3s var(--ease-out);
}

.menu-button:not(.menu-button--close):hover span::after {
  scale: 1 1;
}

/* ══ 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, under a rule in its tone: 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);
  }
  &[data-tone]:not([data-tone='error']) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px 22px;
    align-items: start;
    margin-top: 6px;
    padding: 20px 0 4px;
    border-top: 2px solid var(--tone);
  }
  @media (prefers-reduced-motion: no-preference) {
    &[data-tone]:not([data-tone='error']) {
      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);
  container-type: inline-size;
  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%;
  }
  /* Where the home page's photo stands on the right, the panel is exactly its width, so it opens over the
     photo and its dark top runs straight into the page. */
  @media (min-width: 1000px) and (min-aspect-ratio: 1/1) {
    width: min(clamp(560px, 46vw, 920px), 100%);
  }
  /* A wide, soft feather of the page's black off the panel's edge, so the dimmed page runs into the
     panel's black with no line where they meet. */
  @media (min-width: 641px) {
    box-shadow: -140px 0 140px -40px rgb(11 12 14 / 0.92);
  }
}

.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 {
  --bp: clamp(24px, 4vw, 40px);
  /* Side padding: the content stays a readable width however wide the panel is. */
  --bpx: max(var(--bp), (100cqw - 640px) / 2);
  display: grid;
  gap: 26px;
  min-height: 100%;
  align-content: start;
  padding: var(--bp) var(--bpx);
}

/* The dark band at the top, with the logo's ridge where it meets the form. */
.book__head {
  position: relative;
  display: grid;
  gap: 18px;
  margin: calc(var(--bp) * -1) calc(var(--bpx) * -1) 0;
  padding: var(--bp) var(--bpx) 0;
  background: var(--ink);
  background-image: radial-gradient(120% 90% at 100% 0%, rgb(35 153 221 / 0.18), transparent 60%);
  color: var(--white);
  .book__kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    img {
      width: 34px;
      height: 34px;
    }
  }
  .book__close {
    border-color: rgb(255 255 255 / 0.28);
    span::before,
    span::after {
      background: var(--white);
    }
    &:hover {
      background: var(--white);
      border-color: var(--white);
      span::before,
      span::after {
        background: var(--ink);
      }
    }
  }
  .book__title {
    margin: 4px 0 0;
  }
}

.book__lede {
  margin: 0;
  max-width: 32em;
  font-size: 0.95rem;
  color: var(--fog);
}

.book__ridge {
  display: block;
  width: calc(100% + var(--bpx) * 2);
  height: 56px;
  margin: 6px calc(var(--bpx) * -1) -1px;
  fill: var(--snow);
}

/* The choices as a ruled price list: name and what it is on the left, the price on the right. */
.book__menu {
  display: grid;
  & + & {
    margin-top: 14px;
  }
}

.book__menu-title {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  font-size: 0.66rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.book__option {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 12px 14px 14px;
  border-bottom: 1px solid var(--line-light);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.25s var(--ease-out);
  input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  &:hover {
    background: rgb(11 12 14 / 0.035);
  }
  &:has(input:checked) {
    background: var(--white);
  }
  &:has(input:focus-visible) {
    outline: 2px solid var(--s1-l);
    outline-offset: -2px;
  }
}

.book__option-dot {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgb(11 12 14 / 0.35);
  border-radius: 50%;
  transition: border-color 0.2s ease;
  &::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink);
    scale: 0;
    transition: scale 0.25s var(--ease-out);
  }
  .book__option:has(input:checked) & {
    border-color: var(--ink);
    &::after {
      scale: 1;
    }
  }
}

.book__option-name {
  display: grid;
  gap: 2px;
  font-size: 1rem;
  font-weight: 700;
  small {
    font-size: 0.84rem;
    font-weight: 400;
    color: var(--slate);
  }
}

.book__option-price {
  display: grid;
  justify-items: end;
  font-size: 1.45rem;
  font-weight: 800;
  font-stretch: 72%;
  line-height: 1;
  white-space: nowrap;
  small {
    margin-top: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    font-stretch: 100%;
    color: var(--slate);
  }
  small:first-child {
    margin: 0 0 3px;
  }
}

.book__summary {
  margin: 16px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  &::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    margin-bottom: 10px;
    background: var(--signal);
  }
  &:empty {
    display: none;
  }
}

/* What happens after they press the button. */
.book__next {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: next;
  border-top: 1px solid var(--line-light);
  li {
    counter-increment: next;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-light);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--slate);
    &::before {
      content: counter(next, decimal-leading-zero);
      font-size: 1rem;
      font-weight: 800;
      font-stretch: 72%;
      color: var(--ink);
    }
  }
  b {
    font-weight: 700;
    color: var(--ink);
  }
}

.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;
}

.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;
}

/* ══ What a remap changes (home): a GT coupe drawn in lines, its parts numbered ══ */
/* js/anatomy.js adds .is-scrolling: the section becomes a long track with the stage pinned while the
   drawing builds and each part lights up. Without it, everything shows at once. */

.anatomy {
  position: relative;
  background: var(--ink);
  background-image: radial-gradient(70% 55% at 62% 58%, rgb(35 153 221 / 0.1), transparent 70%);
  color: var(--white);
}

.anatomy.is-scrolling .anatomy__track {
  height: 460vh;
  @media (max-width: 900px) {
    height: 520vh;
  }
}

.anatomy__stage {
  --chrome: 540px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(14px, 2.4vh, 32px);
  padding-block: clamp(96px, 12vh, 132px) clamp(28px, 5vh, 56px);
  @media (max-width: 900px) {
    --chrome: 470px;
  }
}

.anatomy.is-scrolling .anatomy__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.anatomy__head {
  display: grid;
  gap: 14px;
}

/* Wide screens: the title beside the car, so the car gets the height. */
@media (min-width: 1100px) {
  .anatomy__stage {
    grid-template-columns: minmax(300px, 0.3fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  .anatomy__head {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: auto;
    margin: 0;
    padding-right: 0;
  }
  .anatomy__title {
    font-size: clamp(2.6rem, 4.4vw, 4.8rem);
  }
  .anatomy__figure {
    grid-column: 2;
    grid-row: 1;
  }
  .anatomy__list,
  .anatomy__foot {
    grid-column: 1 / -1;
    width: 100%;
  }
}

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

.anatomy__title {
  font-size: clamp(2.7rem, min(7vw, 9svh), 6.4rem);
  span {
    display: block;
  }
  span:last-child {
    font-weight: 300;
    color: rgb(240 246 251 / 0.92);
  }
}

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

.anatomy__figure {
  display: grid;
  place-items: center;
  min-height: 0;
  padding-inline: var(--pad);
}

.anatomy__art {
  position: relative;
  width: min(100%, 1320px, calc((100svh - var(--chrome)) * 2.5));
  aspect-ratio: 950 / 380;
  /* A soft pool of light under the car. */
  &::before {
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -2%;
    height: 22%;
    background: radial-gradient(50% 50% at 50% 50%, rgb(159 216 246 / 0.16), transparent 70%);
    opacity: var(--detail, 1);
  }
}

.anatomy:not(.is-scrolling) .anatomy__art {
  width: min(100%, 1320px);
}

/* Pinned, the drawing takes whatever height the stage leaves it. */
.anatomy.is-scrolling .anatomy__figure {
  container-type: size;
  .anatomy__art {
    width: min(100cqw, 1320px, calc(100cqh * 2.5));
  }
}

.anatomy__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.anatomy__ground {
  stroke: rgb(255 255 255 / 0.14);
  stroke-width: calc(var(--u, 1.4) * 1);
}

.anatomy__line {
  fill: none;
  stroke: var(--white);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.anatomy__line--body {
  stroke-width: calc(var(--u, 1.4) * 1.9);
}

.anatomy__line--detail,
.anatomy__line--wheel {
  stroke: rgb(255 255 255 / 0.72);
  stroke-width: calc(var(--u, 1.4) * 1.1);
}

/* The glass in a cool tint, the spokes finer than the tyres. */
.anatomy__line--glass {
  stroke: rgb(214 238 252 / 0.78);
  stroke-width: calc(var(--u, 1.4) * 1);
}

.anatomy__line--spoke {
  stroke: rgb(255 255 255 / 0.6);
  stroke-width: calc(var(--u, 1.4) * 0.75);
}

/* The grille and intake mesh, faint, coming up with the details. */
.anatomy__mesh {
  opacity: var(--detail, 1);
}

.anatomy__line.is-faint {
  stroke: rgb(255 255 255 / 0.35);
}

/* A wide, faint copy of the body line behind it reads as a glow. */
.anatomy__glow .anatomy__line {
  stroke: rgb(214 238 252 / 0.14);
  stroke-width: calc(var(--u, 1.4) * 9);
}

.anatomy.is-scrolling {
  .anatomy__line--body {
    stroke-dashoffset: calc(1 - var(--body, 1));
  }
  .anatomy__line--detail,
  .anatomy__line--wheel,
  .anatomy__line--glass,
  .anatomy__line--spoke {
    stroke-dashoffset: calc(1 - var(--detail, 1));
  }
  .anatomy__parts {
    opacity: var(--inner, 1);
  }
}

.anatomy__inner {
  fill: none;
  stroke: var(--ice);
  stroke-width: calc(var(--u, 1.4) * 1);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  transition: stroke 0.4s ease, opacity 0.4s ease, stroke-width 0.4s ease;
}

.anatomy__part.is-lit .anatomy__inner {
  stroke: var(--white);
  stroke-width: calc(var(--u, 1.4) * 1.7);
  opacity: 1;
  filter: drop-shadow(0 0 calc(var(--u, 1.4) * 5px) rgb(159 216 246 / 0.95));
}

/* The numbers on the car. */
.anatomy__mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  background: rgb(11 12 14 / 0.78);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  color: var(--white);
  translate: -50% -50%;
  transition: opacity 0.35s ease, scale 0.45s var(--ease-out), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  &::after {
    content: '';
    position: absolute;
    inset: -7px;
    border: 1px solid var(--signal);
    border-radius: 50%;
    opacity: 0;
  }
  @media (max-width: 700px) {
    width: 18px;
    height: 18px;
    font-size: 0.56rem;
    border-width: 1px;
  }
}

.anatomy.is-scrolling .anatomy__mark {
  opacity: 0;
  scale: 0.4;
  &.is-seen {
    opacity: 1;
    scale: 1;
  }
}

@media (max-width: 700px) {
  .anatomy.is-scrolling .anatomy__mark:not(.is-active) {
    width: 8px;
    height: 8px;
    font-size: 0;
    border-width: 1px;
    &::after {
      display: none;
    }
  }
  .anatomy.is-scrolling .anatomy__mark.is-active {
    width: 22px;
    height: 22px;
    font-size: 0.62rem;
  }
}

.anatomy__mark.is-active {
  z-index: 1;
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink);
  scale: 1.18 !important;
  &::after {
    animation: mark-pulse 1.6s var(--ease-out) infinite;
  }
}

@keyframes mark-pulse {
  from {
    opacity: 0.9;
    scale: 0.8;
  }
  to {
    opacity: 0;
    scale: 1.7;
  }
}

/* The notes: a ruled row of seven on wide screens. */
.anatomy__list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0 clamp(14px, 1.6vw, 24px);
  margin: 0;
  padding-block: 0;
  list-style: none;
}

.anatomy__item {
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
  transition: opacity 0.4s ease, border-color 0.4s ease, translate 0.45s var(--ease-out);
}

.anatomy__num {
  font-size: 0.72rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  color: var(--fog);
  transition: color 0.3s ease;
}

.anatomy__name {
  margin: 8px 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
}

.anatomy__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--fog);
  text-wrap: pretty;
}

.anatomy.is-scrolling .anatomy__item {
  opacity: 0.26;
  &.is-seen {
    opacity: 0.6;
  }
  &.is-active {
    opacity: 1;
    border-top-color: var(--signal);
    .anatomy__num {
      color: var(--signal);
    }
    .anatomy__text {
      color: rgb(255 255 255 / 0.82);
    }
  }
}

.anatomy.is-done .anatomy__item {
  opacity: 1;
}

.anatomy__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px 32px;
}

.anatomy__more {
  font-size: 0.9rem;
  color: var(--fog);
  transition: color 0.25s ease, opacity 0.4s ease;
  &:hover {
    color: var(--white);
  }
}

.anatomy.is-scrolling:not(.is-done) .anatomy__more {
  opacity: 0;
  pointer-events: none;
}

.anatomy__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  font-size: 0.76rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--signal);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: opacity 0.4s ease, translate 0.45s var(--ease-out);
  svg {
    width: 16px;
    height: 16px;
    transition: translate 0.35s var(--ease-out);
  }
  &:hover svg {
    translate: 4px 0;
  }
}

.anatomy.is-scrolling:not(.is-done) .anatomy__go {
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
}

/* Narrower screens: one note at a time under the car, then all seven names once the last has shown. */
@media (max-width: 900px) {
  .anatomy__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
  }
  .anatomy.is-scrolling .anatomy__list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'note';
    min-height: 9.5em;
  }
  .anatomy.is-scrolling .anatomy__item {
    grid-area: note;
    opacity: 0;
    translate: 0 10px;
    transition: none;
    &.is-seen {
      opacity: 0;
    }
    &.is-active {
      opacity: 1;
      translate: 0 0;
      transition: opacity 0.4s ease, translate 0.45s var(--ease-out);
    }
  }
  .anatomy.is-scrolling.is-done .anatomy__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: none;
    gap: 0 20px;
    min-height: 0;
  }
  .anatomy.is-scrolling.is-done .anatomy__item {
    grid-area: auto;
    opacity: 1;
    translate: 0 0;
    padding-block: 10px 6px;
    .anatomy__name {
      margin: 2px 0 0;
      font-size: 0.95rem;
    }
    .anatomy__text {
      display: none;
    }
  }
  .anatomy__foot {
    justify-content: flex-start;
  }
}

/* ══ The map we rewrite (Tuning): a 3D torque map, Standard to Stage 1 ══ */

.map3d {
  background: var(--ink);
  background-image: radial-gradient(60% 70% at 72% 55%, rgb(35 153 221 / 0.13), transparent 70%);
  color: var(--white);
  overflow: hidden;
}

.map3d__layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.36fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px clamp(32px, 4vw, 64px);
  @media (max-width: 960px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.map3d__head {
  display: grid;
  gap: 18px;
}

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

.map3d__title {
  font-size: clamp(2.8rem, 5.4vw, 5.6rem);
  span {
    display: block;
  }
  span:last-child {
    font-weight: 300;
    color: rgb(240 246 251 / 0.92);
  }
}

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

/* Standard / Stage 1: two words, the one showing underlined in yellow. */
.map3d__switch {
  display: flex;
  gap: 28px;
  button {
    padding: 6px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fog);
    cursor: pointer;
    background-image: linear-gradient(var(--signal), var(--signal));
    background-position: 0 100%;
    background-size: 0 2px;
    background-repeat: no-repeat;
    transition: color 0.25s ease, background-size 0.35s var(--ease-out);
    &:hover {
      color: var(--white);
    }
    &[aria-pressed='true'] {
      color: var(--white);
      background-size: 100% 2px;
    }
    &:focus-visible {
      outline: 2px solid var(--signal);
      outline-offset: 4px;
    }
  }
}

.map3d__facts {
  display: grid;
  gap: 0;
  margin: 4px 0 0;
  border-top: 1px solid var(--line-dark);
  div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-dark);
  }
  dt {
    font-size: 0.9rem;
    color: var(--fog);
  }
  dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    font-stretch: 88%;
    white-space: nowrap;
    color: var(--fog);
    span {
      margin: 0 4px;
    }
    b {
      color: var(--white);
      transition: color 0.4s ease;
    }
  }
  .is-stage1 & b {
    color: var(--signal);
  }
}

.map3d__note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--fog);
}

.map3d__figure {
  margin: 0;
  display: grid;
  gap: 10px;
}

.map3d__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  .is-turning & {
    cursor: grabbing;
  }
}

.map3d__cell {
  stroke: rgb(255 255 255 / 0.22);
  stroke-width: 0.7;
  stroke-linejoin: round;
  fill-opacity: 0.92;
  &.is-on {
    stroke: var(--white);
    stroke-width: 2;
    fill-opacity: 1;
  }
}

.map3d__floor line {
  stroke: rgb(255 255 255 / 0.09);
  stroke-width: 1;
}

.map3d__tick {
  font-size: 13px;
  font-weight: 600;
  fill: var(--fog);
  text-anchor: middle;
}

.map3d__axis {
  font-size: 12px;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: rgb(255 255 255 / 0.55);
  text-anchor: middle;
}

.map3d__readout {
  min-height: 1.5em;
  font-size: 0.9rem;
  color: var(--fog);
  text-align: center;
}