/* No Trase
   Photos live on black. Information lives on white.
   One typeface, Archivo: wide for display, normal width for reading. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  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';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --black: #000000;
  --white: #FFFFFF;
  --concrete: #F0F0F0;
  --rule: #D9D9D9;
  --graphite: #5E5E5E;
  --silver: #B3B3B3;
  --steel: #8C8C8C;
  --rule-dark: #2E2E2E;
  /* Text greys. Secondary text on black and white, and small print on black.
     Each is the lightest (or darkest) grey that still reads comfortably at the
     sizes it is used at, measured with WCAG 2 and APCA. */
  --text-2-on-black: #D4D4D4;
  --text-3-on-black: #A6A6A6;
  --text-2-on-white: #4D4D4D;
  --text-2-on-concrete: #404040;
  --gutter: clamp(20px, 4.5vw, 64px);
  --max: 1440px;
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  /* Motion: one curve for everything that answers a click, tap or hover. Quick to start, soft to land. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --fast: 160ms;
  --medium: 240ms;
  /* Focus ring colour follows the surface it sits on, not the element, so it shows on both black and white. */
  --ring: #FFFFFF;
}

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

html {
  /* The site sets every colour itself. Declaring dark for the whole page, white sections included,
     keeps Android's forced dark mode from greying out the white sections. */
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-stretch: 100%;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

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

/* Links: the underline sits at half strength and comes up to full on hover.
   The text itself never dims, so a link never looks disabled. */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  transition: text-decoration-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.on-white a { text-decoration-color: rgba(0, 0, 0, 0.45); }
.on-white .quote a { text-decoration-color: rgba(255, 255, 255, 0.5); }
a[href^="tel:"] { white-space: nowrap; }

a,
button,
label,
summary,
select,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* a quick second tap never zooms the page; pinch zoom still works */
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}
.on-white,
.drawing { --ring: #000000; }
.on-white .quote { --ring: #FFFFFF; }

::selection { background: var(--white); color: var(--black); }
.on-white ::selection { background: var(--black); color: var(--white); }
.on-white .quote ::selection { background: var(--white); color: var(--black); }

[id] { scroll-margin-top: 24px; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--white);
  color: var(--black);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

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

/* Layout */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  /* with the page drawn edge to edge (viewport-fit=cover), keep text clear of an iPhone's notch */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.on-black { background: var(--black); color: var(--white); }
.on-white { background: var(--white); color: var(--black); }

.section { padding-block: 128px 128px; }

.stack { display: flex; flex-direction: column; gap: 48px; }
.stack--loose { gap: 96px; }
.stack-sm { display: flex; flex-direction: column; gap: 16px; }

.split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 64px 48px;
}
.split__main { flex: 999 1 620px; min-width: 0; }
.split__aside { flex: 1 1 380px; max-width: 440px; }

@media (max-width: 1080px) {
  .split__aside { max-width: none; }
}

/* Type */

.display {
  margin: 0;
  font-stretch: 125%;
  font-weight: 300;
  font-size: clamp(32px, 5.4vw, 80px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  word-spacing: 0.08em;
}
.display > span { white-space: nowrap; }

.page-title {
  margin: 0;
  font-stretch: 125%;
  font-weight: 300;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.h2 {
  margin: 0;
  font-stretch: 125%;
  font-weight: 300;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.h2--small { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; }

.h3 {
  margin: 0;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
}

.lede { margin: 0; font-size: 18px; max-width: 34em; }
.on-black .lede,
.on-black .muted { color: var(--text-2-on-black); }
.on-white .lede,
.on-white .muted { color: var(--text-2-on-white); }

.prose { margin: 0; max-width: 36em; }
.prose + .prose { margin-top: 16px; }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
/* A press shrinks the button slightly, so a tap always gets an answer, even on a touch screen. */
.btn:active { transform: scale(0.97); }
.btn--white { background: var(--white); border-color: var(--white); color: var(--black); }
.btn--black { background: var(--black); border-color: var(--black); color: var(--white); }
.btn--outline { min-height: 44px; padding: 0 20px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.actions--links { margin: 0; }

/* Header */

.site-header { position: relative; z-index: 10; background: var(--black); color: var(--white); }
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; background: transparent; }

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  padding-block: 28px;
}

.wordmark {
  font-stretch: 125%;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  font-size: 15px;
}
/* Menu and footer links carry an invisible underline that fades in on hover;
   the current page keeps a solid one. */
.nav a:not(.btn),
.footer-col a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 8px;
}
.nav a[aria-current] { text-decoration-color: currentColor; } /* the page itself, or the section a category page belongs to */

.nav-toggle {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--white);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.nav-toggle:active { transform: scale(0.97); }

@media (max-width: 900px) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 12px;
  }
  .js .nav.is-open { display: flex; }
  .js .nav a { padding: 16px 0; border-bottom: 1px solid var(--rule-dark); text-underline-offset: 6px; }
  .js .nav .btn { margin-top: 16px; padding: 0 24px; align-self: flex-start; border-bottom: 1px solid var(--white); }
  .js .nav a:not(.btn):focus-visible { outline-offset: -2px; }
  .site-header--overlay.is-open { background: var(--black); }
}

/* Home hero: one pass of light reveals the car and lights each word.
   Without animation support, or with reduced motion, it shows the finished state. */

@property --reveal {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 118%;
}

.hero {
  position: relative;
  min-height: clamp(640px, 100svh, 920px);
  overflow: hidden;
  background: var(--black);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  -webkit-mask-image: linear-gradient(90deg, #000000 calc(var(--reveal) - 18%), transparent var(--reveal));
          mask-image: linear-gradient(90deg, #000000 calc(var(--reveal) - 18%), transparent var(--reveal));
  animation: hero-reveal 2.4s cubic-bezier(0.55, 0.05, 0.3, 1) 0.2s both;
}
.hero__sweep {
  --sweep-to: 560%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24%;
  width: 24%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.05) 62%, transparent);
  animation: hero-sweep 2.4s cubic-bezier(0.55, 0.05, 0.3, 1) 0.2s both;
}
.hero__inner {
  position: relative;
  min-height: clamp(640px, 100svh, 920px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding-top: 160px;
  padding-bottom: 56px;
  text-align: center;
}
.hero__title {
  margin: 0;
  font-stretch: 125%;
  font-weight: 300;
  font-size: clamp(32px, 5.4vw, 80px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  word-spacing: 0.08em;
}
.hero__title > span { white-space: nowrap; }
.hero__title .w { animation: hero-word 0.9s ease-out both; }
.hero__title .w1 { animation-delay: 0.7s; }
.hero__title .p1 { animation-delay: 0.95s; }
.hero__title .w2 { animation-delay: 1.15s; }
.hero__title .p2 { animation-delay: 1.4s; }
.hero__title .w3 { animation-delay: 1.6s; }
.hero__foot { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero__foot .lede { max-width: 36em; }
.hero__foot .actions { justify-content: center; }
/* The slogan above is the display line; the page's main heading is the sentence here, which names the
   services and the suburb, set as ordinary copy */
.hero__lead { display: inline; margin: 0; font: inherit; }

@keyframes hero-reveal {
  from { --reveal: 0%; }
  to { --reveal: 118%; }
}
@keyframes hero-sweep {
  from { transform: translateX(0); opacity: 1; }
  85% { opacity: 1; }
  to { transform: translateX(var(--sweep-to)); opacity: 0; }
}
@keyframes hero-word {
  from { color: #262626; text-shadow: none; }
  45% { color: #FFFFFF; text-shadow: 0 0 26px rgba(255, 255, 255, 0.65); }
  to { color: #FFFFFF; text-shadow: none; }
}

/* Upright screens (phones, tablets): instead of cropping the car's nose and tail, the photo is scaled
   so the whole car spans the width. The light band is retuned to keep pace with the wider photo. */
@media (max-aspect-ratio: 5/4) {
  .hero__img { left: -32.4%; width: 160%; max-width: none; object-fit: contain; object-position: 50% 58%; }
  .hero__sweep { left: -44.4%; --sweep-to: 787%; }
}

/* Phones, upright: everything fits on the first screen with the browser's bars showing (svh), the three
   words stack instead of breaking around a dangling bar, and both actions are full-size buttons. */
@media (max-width: 700px) {
  .site-header__bar { padding-block: 20px; }
  .hero,
  .hero__inner { min-height: 520px; min-height: 100svh; }
  .hero__inner { padding-top: 104px; padding-bottom: 24px; gap: 24px; }
  .hero__title { font-size: clamp(34px, 11vw, 48px); line-height: 1.04; }
  .hero__title .w { display: block; }
  .hero__title .p1,
  .hero__title .p2 { display: none; }
  .hero__foot { width: 100%; gap: 20px; }
  .hero__foot .lede { font-size: 15px; line-height: 1.55; color: var(--white); } /* full white at this size keeps it as readable as the larger desktop text */
  .hero__foot .actions { width: 100%; gap: 12px; }
  .hero__foot .actions > a { flex: 1 1 148px; min-height: 52px; padding: 0 12px; }
}
@media (max-width: 700px), (pointer: coarse) {
  .hero__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border: 1px solid var(--white);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--fast) var(--ease-out);
  }
  .hero__call:active { transform: scale(0.97); }
}

/* Short phones (iPhone SE and smaller): a little tighter, and the car sits a touch higher */
@media (max-width: 700px) and (max-height: 600px) {
  .hero__inner { padding-top: 96px; padding-bottom: 20px; gap: 16px; }
  .hero__title { font-size: clamp(30px, 9.5vw, 40px); }
  .hero__foot { gap: 16px; }
  .hero__foot .lede { line-height: 1.45; }
  .hero__img { object-position: 50% 46%; }
}
/* The narrowest phones: both buttons still fit side by side; the number is in the footer and the bottom bar */
@media (max-width: 359px) {
  .hero__call-num { display: none; }
  .hero__foot .actions > a { flex-basis: 120px; }
}

/* Phones on their side: one line of words, the copy and the buttons side by side, all on one screen */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header__bar { padding-block: 16px; }
  .hero,
  .hero__inner { min-height: 100svh; }
  .hero__inner { padding-top: 84px; padding-bottom: 20px; gap: 16px; }
  .hero__title { font-size: clamp(28px, 4.4vw, 44px); }
  .hero__foot { flex-direction: row; align-items: flex-end; justify-content: space-between; width: 100%; gap: 24px; text-align: left; }
  .hero__foot .lede { flex: 1 1 auto; max-width: 30em; font-size: 15px; line-height: 1.5; color: var(--white); }
  .hero__foot .actions { flex: none; flex-wrap: nowrap; justify-content: flex-end; gap: 12px; width: auto; }
  .hero__foot .actions > a { flex: none; white-space: nowrap; padding-inline: 20px; }
  /* Small phones on their side are also under 700px wide, so the upright rules above apply too:
     undo the stacked words and the full-width buttons, which would squeeze the copy into a sliver */
  .hero__title .w,
  .hero__title .p1,
  .hero__title .p2 { display: inline; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
  .hero__call-num { display: none; } /* the number is in the bottom bar and the footer */
}

/* Three words: one panel per word of the slogan; the rules between them are its dividers */

.words { background: var(--black); color: var(--white); }
.words__panels {
  display: flex;
  height: clamp(500px, 72vh, 720px);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
}
.words__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  transition: flex-grow 450ms var(--ease-out);
}
.words__panel + .words__panel { border-left: 1px solid var(--white); }
/* Focus ring drawn inside the panel as black, white, black, so it shows over dark and bright photos alike */
.words__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 2px var(--black), inset 0 0 0 4px var(--white), inset 0 0 0 6px var(--black);
}
.words__panel:focus-visible { outline: none; }
.words__panel:focus-visible::after { opacity: 1; }
/* The photo fills the whole panel and the words sit over its lower part: no band or shadow behind them.
   The photos are dark at the bottom, which is what keeps the words readable. A panel can point the crop
   at its subject with --focus on the photo (across, then down); it matters most on phones, where the
   frame is squarer than the photo. */
.words__media { position: absolute; inset: 0; overflow: hidden; }
.words__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  filter: brightness(0.8);
  transition: filter 450ms var(--ease-out), opacity 450ms var(--ease-out);
}
.words__after { opacity: 0; }
.words__label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding: 24px 28px 32px;
}
.words__word {
  font-stretch: 125%;
  font-weight: 300;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.words__service {
  display: flex;
  flex-direction: column;
  min-height: 72px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-2-on-black);
}
.words__panel:focus-visible { flex-grow: 1.7; }
.words__panel:focus-visible img { filter: brightness(1); }
.words__panel:focus-visible .words__after { opacity: 1; }

@media (max-width: 760px) {
  .words__panels { flex-direction: column; height: auto; }
  /* the panels stack as square tiles (a little taller than wide on narrow phones), each one filled
     by its photo with the words over the lower part, the same as on a computer */
  .words__panel { flex: none; min-height: clamp(400px, 100vw, 520px); }
  .words__service { min-height: 0; }
  .words__panel + .words__panel { border-left: 0; border-top: 1px solid var(--white); }
  .words__panel:focus-visible { flex-grow: 0; }
}

/* Before and after sliders: Home, and the coating and paint correction sections on Services.
   The after photo sits in a window that slides with the line. Everything that moves while you drag
   moves by transform, so dragging never repaints the photos. */

.compare {
  --pos: 50%;
  --handle-y: 76%; /* low, so the handle never sits on the subject in the middle of the photo */
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--black);
  color: var(--white);
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}
.js .compare {
  cursor: ew-resize;
  touch-action: pan-y pinch-zoom; /* a sideways drag moves the line; up and down still scrolls, and pinch still zooms */
}
/* Home: the full-width slider, as tall as the screen allows without pushing its caption out of sight */
.compare--full { --handle-y: 70%; aspect-ratio: auto; height: clamp(360px, min(76svh, 60vw), 860px); }
/* only the slider itself takes the pointer, so a finger's implicit capture is never handed between elements */
.compare__set,
.compare__after { pointer-events: none; }
.compare__set { position: absolute; inset: 0; }
.js .compare__set:not(.is-current) {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s linear var(--medium), visibility 0s linear var(--medium);
}
.js .compare__set.is-current { z-index: 1; transition: opacity var(--medium) var(--ease-out); }
.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%); /* a pair can set --focus to keep its subject in frame when cropped */
  pointer-events: none;
}
.compare__after {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateX(var(--pos));
  will-change: transform;
}
.compare__after > .compare__img {
  transform: translateX(calc(var(--pos) * -1));
  will-change: transform;
}
/* GSAP's Draggable moves this invisible point; the line follows it */
.compare__proxy { position: absolute; top: 0; left: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; }
.compare__divider {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform: translateX(var(--pos));
  will-change: transform;
  pointer-events: none;
}
.compare__divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.5px;
  width: 1px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
}
.compare__handle {
  position: absolute;
  top: var(--handle-y);
  left: 0;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: var(--white);
  transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.compare__tag {
  position: absolute;
  top: var(--handle-y);
  margin-top: -14px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.82);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  transition: opacity var(--fast) var(--ease-out);
}
.compare__tag--before { right: calc(100% + 40px); }
.compare__tag--after { left: 40px; }
/* a label that would run off the edge steps out of the way */
.compare.hide-before .compare__tag--before,
.compare.hide-after .compare__tag--after { opacity: 0; }
.compare.is-dragging .compare__handle { background: var(--white); color: var(--black); transform: scale(1.06); }

/* The arrow keys move the line through this hidden slider. Its focus ring is drawn on the handle,
   and it sits at the handle's height so tabbing to it scrolls the handle into view. */
.compare__range { display: none; }
.js .compare__range {
  display: block;
  position: absolute;
  top: var(--handle-y);
  left: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.compare__range:focus-visible ~ .compare__divider .compare__handle {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--black), 0 0 0 7px rgba(0, 0, 0, 0.6);
}

.compare-figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }

/* The caption under each before and after: the car, then what was done and how long it took */
.job { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.job__car { font-size: 18px; font-weight: 500; line-height: 1.35; }
.job__detail { font-size: 16px; line-height: 1.45; color: var(--text-2-on-white); }
.showcase .job__detail { color: var(--text-2-on-black); }

/* Home: before and after, the site's signature section. The heading sits above the photo and the
   caption under it, so nothing covers the work itself. */
.showcase { background: var(--black); color: var(--white); }
.showcase__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 40px;
  padding-block: 112px 40px;
}
.showcase__head .lede { color: var(--text-2-on-black); max-width: 24em; }
.showcase__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px 40px;
  padding-block: 24px 112px;
}
.showcase__jobs { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.showcase__switch {
  display: inline-grid;
  grid-auto-flow: column; /* one option per job, side by side */
  gap: 1px;
  border: 1px solid var(--steel);
  background: var(--steel);
}
.showcase__switch .segment span { min-height: 44px; padding: 0 16px; }

@media (max-width: 700px) {
  .compare:not(.compare--full) { aspect-ratio: 4 / 3; }
  .compare:not(.compare--full) .compare__handle { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  /* on a phone the photo stands taller than it is wide, so it fills the screen as you drag */
  .compare--full { --handle-y: 76%; height: auto; aspect-ratio: 4 / 5; max-height: 78svh; }
  .showcase__head { padding-block: 72px 28px; }
  .showcase__foot { grid-template-columns: minmax(0, 1fr); padding-block: 18px 72px; }
  .showcase__switch { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* two to a row */
}

/* Back on Home in the same visit: the finished frame, straight away */
.hero-seen .hero__img,
.hero-seen .hero__title .w { animation: none; }
.hero-seen .hero__sweep { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__img,
  .hero__title .w { animation: none; }
  .hero__sweep { display: none; }
  .words__panel,
  .words__panel img { transition: none; }
}

/* Page hero (inner pages) */

.page-hero { padding-block: 64px 96px; }
.page-hero__inner { display: flex; flex-direction: column; gap: 24px; }

.page-hero--media .page-hero__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  align-items: end;
  gap: 48px 8%;
}
.page-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 38%;
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.jump a { text-underline-offset: 6px; }

/* Coating drawing and range */

.drawing {
  margin: 0;
  padding: 48px 5% 24px;
  background: var(--concrete);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.drawing img { width: 100%; height: auto; }
.drawing figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 15px;
  color: var(--text-2-on-concrete);
}

.table-scroll { overflow-x: auto; }

.range {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.range thead th:first-child {
  width: 20%;
  padding: 0 0 16px;
  text-align: left;
  vertical-align: bottom;
  font-weight: 400;
  font-size: 15px;
  color: var(--text-2-on-white);
}
.range thead th[data-col] { padding: 0; border-bottom: 1px solid var(--black); }
.range__pick {
  display: block;
  width: 100%;
  padding: 22px 20px 18px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
  font-stretch: 125%;
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  cursor: pointer;
}
.range__pick { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: transparent; transition: text-decoration-color var(--fast) var(--ease-out); }
.range tbody th {
  padding: 16px 0;
  text-align: left;
  font-weight: 400;
  font-size: 15px;
  color: var(--text-2-on-white);
  border-bottom: 1px solid var(--rule);
}
.range td {
  padding: 16px 20px;
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
.range .is-selected { background: var(--black); color: var(--white); }

@media (max-width: 640px) {
  .range { min-width: 0; }
  .range thead th:first-child,
  .range tbody th { display: none; }
  .range__pick { padding: 16px 10px 14px; font-size: 30px; }
  .range__unit { display: block; margin-top: 4px; font-stretch: 100%; font-weight: 500; font-size: 14px; letter-spacing: 0; }
  .range__pkg { margin-top: -6px; padding: 0 10px 10px; font-size: 14px; }
  .range__tag { padding: 0 10px 12px; font-size: 14px; }
  .range td { padding: 16px 10px; font-size: 15px; white-space: nowrap; }
}
@media (max-width: 400px) {
  .range__pick { padding-inline: 6px; font-size: 26px; }
  .range__pkg, .range__tag { padding-inline: 6px; }
  .range td { padding-inline: 6px; }
}

/* Feynlab or Kraken: the four coatings side by side. Each brand sits over its two columns, with a gap
   between the pairs. The years line up along the top; the package names, then "Most popular" and "Lowest yearly cost", sit under them. */
.range--compare { table-layout: fixed; }
.range__col-names { width: 20%; } /* the four coatings share the rest equally */
.range--compare thead th[data-col] { vertical-align: top; text-align: left; }
.range__brands td { padding: 0; border: 0; }
.range__brands th {
  position: relative;
  padding: 0 20px 10px;
  text-align: left;
  font-weight: 500;
  font-size: 15px;
}
.range__brands th::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--black);
}
/* the package name under the years (Essential, Signature, Elite, Ultimate), then "Most popular" or "Lowest yearly cost" */
.range__pkg { display: block; margin-top: -8px; padding: 0 20px 12px; font-weight: 400; font-size: 15px; color: #262626; }
.range__tag { display: block; padding: 0 20px 14px; font-weight: 500; font-size: 15px; color: #262626; }
.range .is-selected .range__pkg,
.range .is-selected .range__tag { color: #F0F0F0; }
.range--compare tbody tr + tr td { font-weight: 400; font-size: 15px; }
.range__suits td { vertical-align: top; font-size: 15px; line-height: 1.45; color: #262626; }
.range__suits th { vertical-align: top; }
.range__suits td.is-selected { color: #F0F0F0; }
/* the small print under the table: sentences at 15px, so a shade off black (APCA) */
.range__note { margin: -12px 0 0; max-width: 46em; font-size: 15px; line-height: 1.5; color: #2B2B2B; }
.small-print { margin: 0; max-width: 46em; font-size: 15px; line-height: 1.5; color: #2B2B2B; }
.range__note + .small-print { margin-top: -20px; }

/* Beside the quote form on a laptop, or on a tablet, four equal columns are narrower: the number of
   years stays large and "years" goes under it, as on a phone */
.table-scroll { container-type: inline-size; }
@media (min-width: 641px) {
  @container (max-width: 900px) {
    .range--compare .range__pick { padding: 18px 14px 14px; }
    .range--compare .range__unit { display: block; margin-top: 4px; font-stretch: 100%; font-weight: 500; font-size: 14px; letter-spacing: 0; }
    .range--compare td,
    .range--compare .range__brands th,
    .range--compare .range__pkg,
    .range--compare .range__tag { padding-left: 14px; padding-right: 14px; }
    .range--compare .range__brands th::after { left: 14px; }
  }
}

@media (max-width: 640px) {
  .range__brands td:first-child { display: none; } /* its column, the row names, is hidden on a phone */
  .range--compare { table-layout: auto; }
  .range__col-names { width: auto; }
  .range__brands th { padding: 0 10px 8px; }
  .range__brands th::after { left: 10px; }
  .range__pkg { padding: 0 10px 10px; }
  .range__tag { padding: 0 10px 12px; }
  /* the longer rows wrap within their column; the prices stay on one line */
  .range--compare tbody tr + tr td { white-space: normal; font-size: 15px; line-height: 1.4; vertical-align: top; }
}
@media (max-width: 400px) {
  .range--compare tbody tr + tr td { -webkit-hyphens: auto; hyphens: auto; } /* the narrowest phones: a long word can break */
  .range__brands th { padding-inline: 6px; }
  .range__brands th::after { left: 6px; }
  .range__pkg, .range__tag { padding-inline: 6px; }
}

/* What happens to your car: the coating job in one day, as two columns where there's room.
   The steps are numbered straight through, so the second column carries on from the first. */
.timeline { container-type: inline-size; display: flex; flex-direction: column; gap: 32px; }
.timeline__head { display: flex; flex-direction: column; gap: 12px; }
.timeline__days { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.timeline__day { display: flex; flex-direction: column; gap: 16px; }
.timeline__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.timeline__steps--day2 { counter-reset: step 5; }
.timeline__steps { border-top: 1px solid var(--black); }
.timeline__steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0 14px 44px;
  border-bottom: 1px solid var(--rule);
}
.timeline__steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 14px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--black);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.timeline__step { font-weight: 500; }
.timeline__detail { font-size: 16px; line-height: 1.5; color: #262626; }
.timeline__note { margin: 0; font-size: 16px; line-height: 1.5; }
@container (min-width: 700px) {
  .timeline__days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
}

/* Which coating suits you? Six questions as rows of options on the white page (the quote form's
   segments, with the colours turned round), then the pick in a bordered box. */
.helper { container-type: inline-size; display: flex; flex-direction: column; gap: 32px; }
.helper__form { display: flex; flex-direction: column; gap: 24px; }
.helper__q { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.helper__legend { padding: 0; font-weight: 500; }
.helper__legend .field__label-note { font-weight: 400; color: var(--text-2-on-white); }
.helper__segments { border-color: var(--black); background: var(--black); }
.helper__segments .segment span { background: var(--white); color: var(--black); }
.helper__segments .segment input:checked + span { background: var(--black); color: var(--white); }
.helper__segments .segment input:focus-visible + span { outline-color: var(--black); }
.helper__segments .segment input:checked:focus-visible + span { outline-color: var(--white); }
/* Narrow (phones, or beside the form): four options go two by two; three options stack on a phone */
@container (max-width: 560px) {
  .helper .helper__segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .helper .helper__segments[style="--cols: 3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 420px) {
  .helper .helper__segments[style="--cols: 3"] { grid-template-columns: minmax(0, 1fr); }
}
.helper__result { border: 1px solid var(--black); padding: 24px; }
.helper__waiting { margin: 0; color: var(--text-2-on-white); }
.helper__pick { display: flex; flex-direction: column; gap: 10px; }
.helper__for { margin: 0; font-size: 15px; font-weight: 500; color: var(--text-2-on-white); }
.helper__name {
  margin: 0;
  font-stretch: 125%;
  font-weight: 300;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.helper__price { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.helper__why { margin: 0; max-width: 40em; line-height: 1.55; }
.helper__notes { margin: 0; padding: 0; list-style: none; max-width: 40em; display: flex; flex-direction: column; gap: 8px; }
.helper__notes:empty { display: none; }
.helper__notes li { padding-left: 18px; position: relative; font-size: 16px; line-height: 1.5; color: #262626; }
.helper__notes li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--black); }
.helper__pick .actions { margin-top: 8px; }
.helper__alt { min-height: 52px; padding: 0 24px; }
@media (prefers-reduced-motion: no-preference) {
  .helper__pick.is-new { animation: fade var(--medium) var(--ease-out) backwards; }
}

/* Window tinting: the shade guide. Car detailing: what's in each package (ticks). Plain ruled tables. */
.shades,
.ticks { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.shades th,
.shades td,
.ticks th,
.ticks td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; line-height: 1.45; }
.shades thead th,
.ticks thead th { padding-top: 0; border-bottom: 1px solid var(--black); font-weight: 500; font-size: 15px; }
.shades tbody th,
.ticks tbody th { font-weight: 500; }
.shades td:nth-child(2) { white-space: nowrap; }
.shades td:nth-child(3) { color: #262626; }
.ticks { min-width: 420px; }
.ticks thead th:not(:first-child),
.ticks td { width: 18%; text-align: center; padding-right: 0; }
.ticks thead th:first-child,
.ticks tbody th { width: auto; }
.ticks__no { color: var(--text-2-on-white); }
.ticks__from th,
.ticks__from td { border-bottom: 0; font-weight: 500; }
@media (max-width: 640px) {
  .shades th, .shades td, .ticks th, .ticks td { padding: 12px 10px 12px 0; font-size: 15px; }
  .ticks { min-width: 0; }
}

/* Every coating includes: two columns of short lines where there's room */
.includes { display: flex; flex-direction: column; gap: 16px; }
.includes__list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2 260px;
  column-gap: 40px;
  border-top: 1px solid var(--black);
}
.includes__list li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.45; }

/* Coating scale (Home): each line's length is the years of protection */

.scale { display: flex; flex-direction: column; gap: 4px; }

.scale__row {
  display: grid;
  grid-template-columns: minmax(130px, 1.1fr) minmax(90px, 0.7fr) minmax(0, 3.2fr) minmax(110px, 1fr);
  grid-template-areas: "years brand track price";
  align-items: center;
  column-gap: 28px;
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 20px 16px;
  border: 0;
  border-radius: 0;
  background: var(--black);
  color: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.scale__years {
  grid-area: years;
  font-stretch: 125%;
  font-weight: 300;
  font-size: 34px;
  line-height: 1;
  white-space: nowrap;
}
.scale__brand { grid-area: brand; font-size: 16px; color: var(--text-2-on-black); }
.scale__pkg { display: block; white-space: nowrap; } /* the package name on its own line under the brand */
.scale__track { grid-area: track; display: block; height: 2px; background: #262626; }
.scale__fill {
  display: block;
  height: 2px;
  background: var(--white);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}
.scale__price {
  grid-area: price;
  text-align: right;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.scale__row { transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out); }
.scale__row .scale__years { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: transparent; transition: text-decoration-color var(--fast) var(--ease-out); }
.scale__row .scale__brand,
.scale__row .scale__track,
.scale__row .scale__fill { transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out); }
.scale__row:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.scale__row[aria-pressed="true"] { background: var(--white); color: var(--black); }
.scale__row[aria-pressed="true"] .scale__brand { color: var(--text-2-on-white); }
.scale__row[aria-pressed="true"] .scale__track { background: var(--rule); }
.scale__row[aria-pressed="true"] .scale__fill { background: var(--black); box-shadow: none; }

/* Desktop: the years and price columns never get narrower than their text */
.scale__row { grid-template-columns: minmax(max-content, 1.1fr) minmax(90px, 0.7fr) minmax(0, 3.2fr) minmax(max-content, 1fr); }

/* Computers: the four lines share one set of columns, so every bar starts and ends in line,
   however wide "10 years" is. The fill of a chosen line still reaches 16px past the text. */
@media (min-width: 761px) {
  @supports (grid-template-columns: subgrid) {
    .scale {
      display: grid;
      grid-template-columns: minmax(max-content, 1.1fr) minmax(90px, 0.7fr) minmax(0, 3.2fr) minmax(max-content, 1fr);
      column-gap: 28px;
      row-gap: 4px;
      margin: 0 -16px;
    }
    .scale__row {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      grid-template-areas: none;
      width: auto;
      margin: 0;
    }
    .scale__years { grid-area: 1 / 1; }
    .scale__brand { grid-area: 1 / 2; }
    .scale__track { grid-area: 1 / 3; }
    .scale__price { grid-area: 1 / 4; }
  }
}

/* Phones: years and price share a line when they fit; with big text or a narrow screen the price
   drops under the years instead of running off the edge */
@media (max-width: 760px) {
  .scale__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 16px;
    row-gap: 12px;
  }
  .scale__years { order: 1; flex: 1 0 auto; font-size: clamp(24px, 8vw, 30px); }
  .scale__price { order: 2; margin-left: auto; }
  .scale__brand { order: 3; flex: 0 0 100%; }
  .scale__pkg { display: inline; } /* room for "Feynlab · Essential" on one line */
  .scale__pkg::before { content: '\00b7\00a0'; }
  .scale__track { order: 4; flex: 0 0 100%; }
}

/* Facts list */

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  column-gap: 48px;
  border-top: 1px solid var(--black);
}
.facts > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt { font-size: 15px; color: var(--text-2-on-white); }
.facts dd { margin: 0; font-weight: 500; }
.on-black .facts { border-top-color: var(--white); }
.on-black .facts > div { border-bottom-color: var(--rule-dark); }
.on-black .facts dt { font-weight: 500; color: var(--text-2-on-black); }

/* Price lists */

.prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 40px 32px;
  font-variant-numeric: tabular-nums;
}
.price-list { display: flex; flex-direction: column; }
.price-list .h3 { padding-bottom: 16px; border-bottom: 1px solid var(--black); }
.price-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.price-row--wide { padding: 16px 0; }
/* The name wraps by words; the price never splits, and drops under the name when the two don't fit */
.price-row { flex-wrap: wrap; row-gap: 4px; }
.price-row > :first-child { min-width: 0; overflow-wrap: break-word; }
.price-row > :last-child { margin-left: auto; white-space: nowrap; text-align: right; }
.price-list--plain { border-top: 1px solid var(--black); }

/* Prices that start a quote: the whole row is the button. Its fill reaches 12px past the text on
   each side (a shadow, so nothing moves), and a price in the quote stays filled. */
.price-row--pick {
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.price-row__note { font-size: 15px; line-height: 1.45; color: var(--text-2-on-white); }
/* a coating's package name after its years and brand, a step quieter */
.price-row__sub { font-weight: 400; color: var(--text-2-on-white); }
.price-row--pick[aria-pressed="true"] .price-row__sub { color: #DDDDDD; }
/* A row with a note: name and price on the first line, the note underneath across the row */
.price-row--noted { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; }
.price-row--noted > :nth-child(2) { white-space: nowrap; text-align: right; }
.price-row--noted > .price-row__note { grid-column: 1 / -1; margin-left: 0; white-space: normal; text-align: left; }
.price-row--pick[aria-pressed="true"] {
  background: var(--black);
  color: var(--white);
  box-shadow: -12px 0 0 var(--black), 12px 0 0 var(--black);
}
/* notes are 15px, so on black and on the grey hover they sit a step closer to the text colour to stay easy to read */
.price-row--pick[aria-pressed="true"] .price-row__note { color: #DDDDDD; }
.price-row--pick:active:not([aria-pressed="true"]) .price-row__note { color: #404040; }
.price-row--pick:active { background: var(--concrete); box-shadow: -12px 0 0 var(--concrete), 12px 0 0 var(--concrete); }
.price-row--pick[aria-pressed="true"]:active { background: #262626; box-shadow: -12px 0 0 #262626, 12px 0 0 #262626; }

/* Care plans and gift vouchers: the row, then its own button to join or buy */
.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 20px;
  border-bottom: 1px solid var(--rule);
}
.plan > .price-row--pick { border-bottom: 0; }
.plan__name { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; font-variant-numeric: tabular-nums; }
.plan__action { min-height: 44px; padding: 0 22px; }
/* On a phone a care plan puts its Join button under the plan; a voucher keeps Buy beside it */
@media (max-width: 420px) {
  .plan:not(.plan--voucher) { grid-template-columns: minmax(0, 1fr); padding-bottom: 16px; }
  .plan:not(.plan--voucher) > .price-row--pick { padding-bottom: 8px; }
  .plan:not(.plan--voucher) > .plan__action { justify-self: start; }
}
/* A plan in the quote fills its whole row, Join button included, and the button turns white.
   Browsers without :has() fill just the plan's name and price, like the other prices. */
@supports selector(:has(a)) {
  .plan { transition: background-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), color var(--fast) var(--ease-out); }
  .plan > .price-row--pick,
  .plan > .price-row--pick:active,
  .plan > .price-row--pick[aria-pressed="true"],
  .plan > .price-row--pick[aria-pressed="true"]:active { background: none; box-shadow: none; }
  .plan:has(> .price-row--pick:active) { background: var(--concrete); box-shadow: -12px 0 0 var(--concrete), 12px 0 0 var(--concrete); }
  .plan:has(> .price-row--pick[aria-pressed="true"]) { background: var(--black); color: var(--white); box-shadow: -12px 0 0 var(--black), 12px 0 0 var(--black); }
  .plan:has(> .price-row--pick[aria-pressed="true"]:active) { background: #262626; box-shadow: -12px 0 0 #262626, 12px 0 0 #262626; }
  .plan:has(> .price-row--pick[aria-pressed="true"]) > .plan__action { background: var(--white); border-color: var(--white); color: var(--black); }
}

.newcar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--black);
}
.newcar__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; width: 100%; }
.newcar__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.newcar__text { margin: 0; max-width: 36em; }
.newcar__btn { min-height: 48px; padding: 0 24px; }
.newcar__btn[aria-pressed="true"] { background: var(--white); color: var(--black); }
/* In the quote, the whole package turns black like a chosen price, and its button turns white */
.newcar { transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out); }
.newcar:has(> .newcar__btn[aria-pressed="true"]) { background: var(--black); color: var(--white); }
.newcar:has(> .newcar__btn[aria-pressed="true"]) > .newcar__btn { border-color: var(--white); }

/* What affects your price: a short note under each service's prices. Side by side where there's
   room, one under another on a phone. */
.factors {
  container-type: inline-size;
  padding: 20px 24px 24px;
  background: var(--concrete);
}
.factors__title { margin: 0 0 14px; font-size: 16px; font-weight: 500; line-height: 1.4; }
.factors__list {
  display: grid;
  gap: 14px;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}
.factors__list dt { font-size: 15px; font-weight: 500; }
/* sentences on the grey read best a shade off black at 16px (APCA); the paler grey suits only short labels */
.factors__list dd { margin: 2px 0 0; color: #262626; text-wrap: pretty; }
.factors__list a { text-decoration-color: rgba(0, 0, 0, 0.45); }
@container (min-width: 560px) {
  .factors__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; }
}

/* Photos */


.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px 20px;
}
.tile { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tile figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
}
.tile figcaption span:first-child { font-weight: 500; }
/* Gallery: three across where there's room, captions in the white page's colours */
.tiles--gallery { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 28px 20px; }
.tiles--gallery .tile figcaption { flex-direction: column; gap: 2px; font-size: 15px; }
.on-white .tile figcaption .muted { color: var(--text-2-on-white); }
.section-head--tight { margin-bottom: 0; }
.stack-sm > .section-head { margin-bottom: 0; }
.gallery-group { display: flex; flex-direction: column; gap: 24px; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 40px;
}

/* Services page */

.service { display: flex; flex-direction: column; gap: 32px; }
.service + .service { margin-top: 128px; }

/* Reviews (Home): three Google reviews side by side on a computer, one under the other on a phone */
.reviews .section-head { align-items: baseline; }
.reviews__summary { margin: 0; font-size: 16px; color: var(--text-2-on-black); }
.reviews__stars { letter-spacing: 0.12em; color: var(--white); }
.reviews__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.review { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; border-top: 1px solid var(--rule-dark); }
.review__quote { margin: 0; }
.review__quote p { margin: 0; font-weight: 300; font-size: 18px; line-height: 1.55; }
.review__who { display: flex; flex-direction: column; gap: 2px; margin: 0; margin-top: auto; font-size: 15px; }
.review__name { font-weight: 500; }
.review__job { font-weight: 500; color: var(--text-2-on-black); }
@media (max-width: 760px) {
  .reviews__list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Products we use: the brands' logos in a row, white on black (the files are white on a see-through
   background) and black on white. A brand without a logo file shows its name in the same row. */
.brands { container-type: inline-size; display: flex; flex-direction: column; gap: 20px; }
.brands__label { margin: 0; font-size: 15px; font-weight: 500; color: var(--text-2-on-black); }
.brands__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brands__item { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.brands__item img {
  height: clamp(18px, 1.7cqw, 26px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity var(--fast) var(--ease-out), filter var(--medium) var(--ease-out);
}
.brands__name {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.28em;
  margin-right: -0.28em;
  text-transform: uppercase;
  color: var(--text-2-on-black);
  transition: color var(--fast) var(--ease-out), text-shadow var(--medium) var(--ease-out);
}
/* Under a pointer a logo comes up to full strength with a soft glow: white on black, a faint dark halo on white */
@media (hover: hover) {
  .brands__item:hover img { opacity: 1; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.35)); }
  .brands__item:hover .brands__name { color: var(--white); text-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 18px rgba(255, 255, 255, 0.35); }
  .brands--on-white .brands__item:hover img { opacity: 1; filter: brightness(0) drop-shadow(0 0 5px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.15)); }
  .brands--on-white .brands__item:hover .brands__name { color: var(--black); text-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 18px rgba(0, 0, 0, 0.15); }
}
/* Home: the row sits straight under the opening photo; the white rule at the top of the three photos below closes it */
.brands-band .brands { padding: 24px 0 28px; border-top: 1px solid var(--rule-dark); }
.brands--on-white .brands__item img { filter: brightness(0); opacity: 0.8; }
.brands--on-white .brands__name { color: #262626; }
.brands__item--clone { display: none; } /* copies of the logos, used only by the phone's moving row */
@container (max-width: 760px) {
  .brands__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
  .brands__item img { height: 20px; }
}
/* Phones: one row that glides from right to left and loops. The logos are doubled (by js/main.js), so
   moving the row along by half its width brings the same logo back where it started, with no gap.
   Without JavaScript, or with reduced motion, it's one row you can swipe along. */
@container (max-width: 600px) {
  .brands__scroll {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .brands__row { display: flex; width: max-content; gap: 0; }
  .brands__item { flex: none; min-height: 40px; padding: 0 22px; }
  .brands__item img { height: 20px; }
  .brands__item--clone { display: flex; }
  .brands__row.is-marquee { animation: brands-scroll calc(var(--n, 6) * 3.6s) linear infinite; }
  .brands__scroll:hover .brands__row.is-marquee,
  .brands__scroll:focus-within .brands__row.is-marquee { animation-play-state: paused; }
  .brands__scroll:has(.brands__row:not(.is-marquee)) { overflow-x: auto; scrollbar-width: none; mask-image: none; -webkit-mask-image: none; }
  .brands__scroll:has(.brands__row:not(.is-marquee)) .brands__item--clone { display: none; }
}
@keyframes brands-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .brands__row.is-marquee { animation: none; }
  .brands__row.is-marquee .brands__item--clone { display: none; }
  .brands__scroll { overflow-x: auto; scrollbar-width: none; mask-image: none; -webkit-mask-image: none; }
  .brands__scroll::-webkit-scrollbar { display: none; }
}

/* Quote panel */

.quote {
  padding: 32px;
  background: var(--black);
  color: var(--white);
  color-scheme: dark;
  container-type: inline-size;
}
@media (max-width: 374px) {
  .quote { padding: 20px; }
}
.on-black .quote { border: 1px solid #3A3A3A; }
.quote form,
.quote__sent { display: flex; flex-direction: column; gap: 24px; }
.quote__title {
  margin: 0;
  font-stretch: 125%;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field > label,
.field > .label { font-size: 15px; font-weight: 500; color: var(--text-2-on-black); }

/* Mobile and email sit side by side only when there's room for their messages too */
.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 24px 16px;
}

.input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--steel);
  border-radius: 0;
  background: var(--black);
  color: var(--white);
  font: inherit;
  font-size: 16px;
}
textarea.input { min-height: 104px; padding: 12px 16px; resize: vertical; }
.input::placeholder { color: var(--text-3-on-black); }
.input { transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out); }
.input:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-color: var(--white); }
.input[aria-invalid="true"] { border-color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0 1000px var(--black) inset;
  caret-color: var(--white);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--white);
}
.field__error svg { flex: none; margin-top: 1px; }

.select-wrap { position: relative; }
.select-wrap select.input {
  padding-right: 48px;
  appearance: none;
  -webkit-appearance: none;
}
.select-wrap svg {
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -7px;
  pointer-events: none;
}
select.input option,
select.input optgroup { background: var(--white); color: var(--black); }

.segments {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--steel);
  background: var(--steel);
}
.segment { position: relative; display: flex; margin: 0; cursor: pointer; }
.segment input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.segment span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 6px 8px;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
          hyphens: auto;
  background: var(--black);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.segment input:checked + span { background: var(--white); color: var(--black); }
/* When the panel gets narrow (small phones, big text), four options go two by two, then one per line */
@container (max-width: 259px) {
  .segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 219px) {
  .segments { grid-template-columns: minmax(0, 1fr); }
}
.segment input:focus-visible + span { outline: 2px solid var(--white); outline-offset: -6px; }
.segment input:checked:focus-visible + span { outline-color: var(--black); }

.summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  min-height: 92px;
  padding: 16px 0;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
}
.summary__detail { display: flex; flex-direction: column; gap: 2px; }
.summary__name { font-size: 15px; font-weight: 500; }
.summary__group { font-size: 15px; font-weight: 500; color: var(--text-2-on-black); }
.summary__price-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.summary__from { font-size: 15px; font-weight: 500; color: var(--text-2-on-black); }
.summary__price {
  font-stretch: 125%;
  font-weight: 300;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.summary__price--text { font-size: 22px; }
.summary__empty { margin: 0; align-self: center; font-size: 16px; color: var(--text-2-on-black); }

.honey {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.quote__submit {
  min-height: 54px;
  border: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.quote__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background-color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.quote__submit:active { transform: scale(0.985); }
.quote__submit[disabled],
.quote__submit[aria-disabled="true"] { cursor: progress; transform: none; }
.quote__submit[aria-busy="true"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.quote__note { margin: 0; font-size: 16px; font-weight: 500; color: var(--text-2-on-black); } /* a sentence or two, so 16px like body text */
.quote__note a { color: var(--white); }
.quote__status { margin: -8px 0 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
.quote__status.is-error { display: flex; align-items: flex-start; gap: 8px; padding: 16px; border: 1px solid var(--white); }
.quote__status.is-error svg { flex: none; margin-top: 1px; }
/* Kept in the page, but off screen, while empty or when it only speaks to screen readers ("Sending") */
.quote__status:empty,
.quote__status.is-quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.quote__sent:focus { outline: none; }
.quote__sent-text { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.recap {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
}
.recap div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
.recap dt { font-size: 15px; font-weight: 500; color: var(--text-2-on-black); }
.recap dd { margin: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; white-space: pre-line; }

/* The quote starts with the work: one service, or a few, each with its options */
.quote__services { display: flex; flex-direction: column; gap: 24px; }
.quote__service { display: flex; flex-direction: column; gap: 24px; }
.quote__service--more { padding-top: 24px; border-top: 1px solid #333333; }
.quote__service-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.quote__service-head label { font-size: 15px; font-weight: 500; color: var(--text-2-on-black); }
.quote__add,
.quote__remove {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  transition: text-decoration-color var(--fast) var(--ease-out);
}
.quote__add { align-self: flex-start; margin: -12px 0; }
.quote__add::before { content: "+"; display: inline-block; margin-right: 8px; text-decoration: none; }
.quote__remove { color: var(--text-2-on-black); }

/* Two or more services: a line each, then the total */
.summary--multi { flex-direction: column; align-items: stretch; }
.summary__lines { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.summary__lines li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; font-size: 15px; font-weight: 500; }
.summary__lines li > :first-child { min-width: 0; overflow-wrap: anywhere; }
.summary__line-price { margin-left: auto; white-space: nowrap; color: var(--text-2-on-black); }
.summary__total { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; padding-top: 16px; border-top: 1px solid #333333; }
.summary__unit { max-width: 16em; font-size: 15px; font-weight: 500; line-height: 1.4; text-align: right; color: var(--text-2-on-black); }

/* If a request doesn't send: the customer's email app can send it instead */
.quote__backup { display: flex; flex-wrap: wrap; gap: 12px; margin-top: -8px; }
.quote__backup .btn { flex: 1 1 150px; min-height: 48px; padding: 0 16px; }

/* After sending: what happens next */
.quote__steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 1.3em; font-size: 16px; line-height: 1.5; }
.quote__steps li { padding-left: 4px; }
.quote__steps li::marker { color: var(--text-2-on-black); font-variant-numeric: tabular-nums; }
.quote__photos { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--text-2-on-black); }
.quote__photos a { color: var(--white); }

/* FAQ */

.faq-group + .faq-group { margin-top: 80px; }
.faq-group .h2 { margin-bottom: 24px; }

.faq { border-bottom: 1px solid var(--rule); }
.faq-group .faq:first-of-type { border-top: 1px solid var(--black); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
}
.faq summary::after { transition: background-size var(--medium) var(--ease-out); }
.faq[open] summary::after { background-size: 14px 1.5px, 1.5px 0; }
/* Guides (aftercare and terms): a heading, sometimes with when it applies, then a ruled list */
.guide { display: flex; flex-direction: column; gap: 20px; }
.guide__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; max-width: 40em; }
.guide__when { font-size: 15px; font-weight: 500; color: var(--text-2-on-white); }
.guide__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--black); max-width: 40em; }
.guide__list li { padding: 14px 0; border-bottom: 1px solid var(--rule); line-height: 1.55; }
.guide__list li a { text-decoration-color: rgba(0, 0, 0, 0.45); }
/* a numbered guide (how the gift vouchers work): 01, 02, 03 down the left */
.guide__list--steps { counter-reset: step; }
.guide__list--steps li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); counter-increment: step; }
.guide__list--steps li::before { content: counter(step, decimal-leading-zero); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-2-on-white); }

.faq summary { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: transparent; transition: text-decoration-color var(--fast) var(--ease-out); }

/* Where the browser can animate to an auto height, answers slide open */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq::details-content {
    height: 0;
    overflow: clip;
    transition: height var(--medium) var(--ease-out), content-visibility var(--medium) allow-discrete;
  }
  .faq[open]::details-content { height: auto; }
}
.faq__a { padding: 0 0 24px; max-width: 40em; }
.faq__a p { margin: 0; }
.faq__a p + p { margin-top: 12px; }

/* Simple pages (thanks, 404) */

.plain {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding-block: 96px 128px;
}
.plain .stack-sm { max-width: 640px; }

/* Footer */

.site-footer { background: var(--black); color: var(--white); border-top: 1px solid var(--rule-dark); }
.site-footer__inner { display: flex; flex-direction: column; gap: 64px; padding-block: 72px 48px; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.footer-col .muted { color: var(--text-2-on-black); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--text-3-on-black);
}
.footer-base__links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.footer-base__links a { color: var(--text-2-on-black); text-decoration-color: transparent; text-underline-offset: 6px; }
.footer-base__links a:hover { text-decoration-color: currentColor; }

/* Phones and tablets: the two main actions stay within thumb reach (markup at the end of each page).
   Slides up once you're past the top of the page; steps aside for the quote form and the footer. */
.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px max(var(--gutter), env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: var(--black);
  border-top: 1px solid var(--rule-dark);
  color: var(--white);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--fast) var(--ease-out), visibility 0s linear var(--fast);
}
.actionbar.is-shown {
  transform: none;
  visibility: visible;
  transition: transform var(--medium) var(--ease-out);
}
.actionbar .btn { min-height: 48px; padding: 0 12px; white-space: nowrap; }
@media (max-width: 359px) {
  .actionbar__num { display: none; }
}
@media (min-width: 1081px) {
  .actionbar { display: none; }
}

/* Fingers need about 44px. Links that stand on their own get a taller hit area without moving
   anything; links inside a sentence are left alone so neighbouring lines don't steal taps. */
@media (pointer: coarse) {
  .wordmark { padding-block: 6px; margin-block: -6px; }
  a:not(.btn, .wordmark, .words__panel, .skip-link, .hero__call, .nav a, .footer-col a, p a, .faq__a a, .prose a, .guide__list a, .timeline__note a) {
    padding-block: 9px;
    margin-block: -9px;
  }
  .footer-col { gap: 0; }
  .footer-col > * { min-height: 44px; display: flex; align-items: center; }
}

/* Windows high contrast mode replaces the site's colours with the system's. Selected options and the
   coating bars are drawn with background colour, which that mode removes, so they get system colours. */
@media (forced-colors: active) {
  .segment input:checked + span,
  .range .is-selected { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .scale__row[aria-pressed="true"],
  .price-row--pick[aria-pressed="true"],
  .newcar__btn[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -3px; box-shadow: none; }
  .scale__track { forced-color-adjust: none; background: GrayText; }
  .scale__fill { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .quote__submit { border: 1px solid ButtonText; }
  .compare__divider::before { forced-color-adjust: none; background: CanvasText; }
}

/* Hover, only on devices with a mouse or trackpad */

@media (hover: hover) and (pointer: fine) {
  a:hover,
  .nav a:not(.btn):hover,
  .on-white .quote a:hover { text-decoration-color: currentColor; }
  .btn--white:hover { background: var(--rule); border-color: var(--rule); }
  .btn--black:hover { background: #333333; border-color: #333333; }
  .btn--outline:hover { background: var(--white); border-color: var(--white); color: var(--black); }
  .nav-toggle:hover { background: var(--white); color: var(--black); }
  .quote__submit:hover { background: var(--rule); }
  .quote__submit[disabled]:hover,
  .quote__submit[aria-disabled="true"]:hover { background: var(--white); }
  .input:hover:not(:focus) { border-color: var(--silver); }
  .input[aria-invalid="true"]:hover:not(:focus) { border-color: var(--white); }
  .segment:hover input:not(:checked) + span { background: #262626; }
  .range__pick:hover { text-decoration-color: currentColor; }
  .scale__row:hover .scale__years { text-decoration-color: currentColor; }
  .price-row--pick:hover:not([aria-pressed="true"]) { background: var(--concrete); box-shadow: -12px 0 0 var(--concrete), 12px 0 0 var(--concrete); }
  .price-row--pick:hover:not([aria-pressed="true"]) .price-row__note { color: #404040; }
  @supports selector(:has(a)) {
    .plan > .price-row--pick:hover:not([aria-pressed="true"]) { background: none; box-shadow: none; }
    .plan:has(> .price-row--pick:hover:not([aria-pressed="true"])) { background: var(--concrete); box-shadow: -12px 0 0 var(--concrete), 12px 0 0 var(--concrete); }
    .plan:has(> .price-row--pick[aria-pressed="true"]) > .plan__action:hover { background: var(--rule); border-color: var(--rule); }
  }
  .quote__add:hover,
  .quote__remove:hover { text-decoration-color: currentColor; }
  .newcar__btn:hover:not([aria-pressed="true"]) { background: #333333; border-color: #333333; }
  .faq summary:hover { text-decoration-color: currentColor; }
  .words__panel:hover { flex-grow: 1.7; }
  .words__panel:hover img { filter: brightness(1); }
  .words__panel:hover .words__after { opacity: 1; }
  .js .compare:hover .compare__handle { background: var(--white); color: var(--black); }
}

/* The quote form answers back: errors, sending and sent */

/* "backwards" rather than "both": once an entrance ends it lets go, so press and hover transforms still work */
.quote__sent > * { animation: rise var(--medium) var(--ease-out) backwards; }
.quote__sent > :nth-child(2) { animation-delay: 40ms; }
.quote__sent > :nth-child(3) { animation-delay: 80ms; }
.quote__sent > :nth-child(4) { animation-delay: 120ms; }
.quote__sent > :nth-child(5) { animation-delay: 160ms; }
.quote__sent > :nth-child(n+6) { animation-delay: 200ms; }
.quote form.is-back,
.field[data-option-field],
.field[data-date-field],
.quote__service--more,
.quote__backup,
.field__error,
.quote__status.is-error { animation: rise var(--fast) var(--ease-out) backwards; }
.segments.is-new { animation: fade var(--fast) var(--ease-out) backwards; }
.summary__price.is-new { animation: tick var(--fast) var(--ease-out) backwards; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes tick {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition-duration: 1ms !important; }
  .quote__sent > *,
  .quote form.is-back,
  .field[data-option-field],
  .field[data-date-field],
  .quote__service--more,
  .quote__backup,
  .field__error,
  .quote__status.is-error,
  .segments.is-new,
  .summary__price.is-new { animation: none; }
  .btn:active,
  .nav-toggle:active,
  .quote__submit:active { transform: none; }
  .quote__submit[aria-busy="true"]::before { animation-duration: 2.4s; }
}