/* ==========================================================================
   Marketing site — the C. Auto Aesthetics website.

   "Shine, Shield, Style, Sustain & All in one roof."

   The last surface of the ecosystem redesign, after CAA Console and the link page,
   and drawn in their language rather than a third one: warm ivory, near-black
   ink, Newsreader for what is said and Inter for everything else. The
   reference is an editorial page, not a showroom — the photographs carry the
   cars, and nothing around them competes.

   The rules, which tools/a11y.test.mjs holds this file to:

   · Colour means something. Ink for text and the primary button; the one
     warm accent for a headline's closing words; WhatsApp green for WhatsApp;
     danger for errors. No pillar colours, no champagne capitals.
   · Motion is restrained. Feedback is colour, background, border colour and
     opacity at 120 ms; a card lifts two pixels under the pointer; a section
     rises twelve pixels into place as it is scrolled to (`[data-reveal]`,
     set by components/reveal.js); a page reached by a link fades in; the
     home page's hero has its entrance. Every one of them is opacity and a
     transform, never a size or a position the layout notices, none is
     longer than 400 ms, and all of them are off under reduced motion. No
     blur, no gradients but the hero's mask, no light sweeping across a
     photograph. See "Motion" at the foot of this file.
   · Light and dark both, decided by the device, from the same token values
     CAA Console and the link page use.
   · One border, one radius family (6px controls, 8px everything else), and a
     shadow only on things that float over the page.

   core.css is shared by every surface. So, as console.css does, this file
   re-points the shared names at the theme and overrides the shared primitives
   here, scoped by being linked only from public/index.html.
   ========================================================================== */

/* --- Type ------------------------------------------------------------------
   The same two families as CAA Console and the link page, from the same files on
   this origin (SIL OFL 1.1; the licences sit beside them).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-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;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-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: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-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;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-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;
}

/* --- Theme tokens ----------------------------------------------------------
   The --console-* values are CAA Console's, value for value; tools/a11y.test.mjs fails
   the build if one drifts, and checks every text/ground pair below against
   WCAG AA in both themes.

   Three are the site's own:
   · --site-accent, a warm bronze for the closing words of a headline — the
     old champagne, darkened until it reads as text on ivory.
   · --site-invert-*, the one dark band a page may carry (the closing call to
     action), and the inks and accent on it.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --console-bg: #faf9f7;
  --console-surface: #ffffff;
  --console-subtle: #f3f2ee;
  --console-selected: #ebe9e3;
  --console-border: #e6e4df;
  --console-border-strong: #d4d1ca;
  --console-ink: #1a1a18;
  --console-ink-2: #5f5e5a;
  --console-ink-3: #6f6e69;
  --console-primary: #1a1a18;
  --console-primary-hover: #3a3936;
  --console-on-primary: #faf9f7;
  --console-focus: #2f6feb;
  --console-ok: #1e7a45;
  --console-warn: #8a5a00;
  --console-danger: #b11217;
  --console-info: #1f4fc7;
  --console-scrim: rgba(26, 26, 24, 0.32);
  --console-shadow-pop: 0 1px 2px rgba(26, 26, 24, 0.06), 0 12px 32px rgba(26, 26, 24, 0.14);
  --console-logo-filter: brightness(0);

  --site-accent: #8a5a2b;
  --site-invert-bg: #1a1a18;
  --site-invert-ink: #faf9f7;
  --site-invert-ink-2: #bdbab2;
  --site-invert-accent: #d9ad7c;

  --on-whatsapp: #0b2e17;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --console-bg: #1c1b19;
    --console-surface: #242320;
    --console-subtle: #2c2b28;
    --console-selected: #34332f;
    --console-border: #383632;
    --console-border-strong: #4a4843;
    --console-ink: #eceae5;
    --console-ink-2: #a8a6a0;
    --console-ink-3: #999791;
    --console-primary: #eceae5;
    --console-primary-hover: #ffffff;
    --console-on-primary: #1c1b19;
    --console-focus: #7aa2f7;
    --console-ok: #5cc98a;
    --console-warn: #e3b25a;
    --console-danger: #f0787c;
    --console-info: #86a8ff;
    --console-scrim: rgba(0, 0, 0, 0.5);
    --console-shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.45);
    --console-logo-filter: none;

    --site-accent: #d9ad7c;
    --site-invert-bg: #2c2b28;
    --site-invert-ink: #eceae5;
    --site-invert-ink-2: #a8a6a0;
    --site-invert-accent: #d9ad7c;
  }
}

/* The shared names core.css is written against, pointed at the
   theme — the same re-pointing console.css does, so a shared rule this file does
   not override still reads on either theme. */
:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-num: var(--font);

  --black: var(--console-bg);
  --carbon: var(--console-surface);
  --gunmetal: var(--console-border);
  --hairline: var(--console-border);
  --white: var(--console-ink);
  --light: var(--console-ink);
  --grey: var(--console-ink-2);
  --dim: var(--console-ink-3);
  --champagne: var(--console-ink);
  --crimson-text: var(--console-danger);
  --blue-text: var(--console-info);
  --ok: var(--console-ok);
  --warn: var(--console-warn);
  --amber: var(--console-warn);
  --danger: var(--console-danger);
  --info: var(--console-info);

  /* Colour means something here, and a pillar is not a status. */
  --pillar-ppf: var(--console-ink-2);
  --pillar-coating: var(--console-ink-2);
  --pillar-correction: var(--console-ink-2);
  --pillar-wrap: var(--console-ink-2);
  --pillar-detailing: var(--console-ink-2);

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-pill: 999px;

  --pad: 20px;
  --maxw: 1200px;
  --maxw-prose: 760px;
  --maxw-narrow: 680px;

  /* No bar along the foot of the page any more. The consent banner and the
     support launcher still measure from these, so they sit on the edge. */
  --bar-h: 0px;
  --bar-inset: env(safe-area-inset-bottom, 0px);
  --above-bar: 0px;
  --header-h: 64px;

  --fs-hero: clamp(40px, 7.4vw, 84px);
  --fs-h1: clamp(36px, 5.6vw, 60px);
  --fs-h2: clamp(28px, 3.8vw, 44px);
  --fs-h3: clamp(22px, 2.6vw, 30px);
  --fs-deck: clamp(17px, 1.8vw, 20px);

  --ease: ease;
  --t-fast: 0.12s;
  --t-base: 0.12s;

  /* The motion scale. --t-fast is feedback (a colour under the pointer);
     these two are movement: a lift, a reveal, a page arriving. Nothing on
     the site moves for longer than --motion, and tools/a11y.test.mjs reads
     these values to hold every transition to 400 ms. */
  --motion-fast: 0.18s;
  --motion: 0.32s;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* The spacing scale. Four steps, so two sections cannot end up 36 and 40
     pixels apart for no reason anybody can name. */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;

  --shadow-float: var(--console-shadow-pop);
  --shadow-panel: none;
  --blur-glass: none;
  /* Under a card that has lifted. Softer than the pop shadow a panel floats
     on: the card is still on the page, just nearer. */
  --shadow-lift: 0 1px 2px rgba(26, 26, 24, 0.05), 0 10px 24px rgba(26, 26, 24, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.35);
  }
}

@media (min-width: 760px) {
  :root {
    --pad: 32px;
  }
}

/* --- Ground ---------------------------------------------------------------- */
html {
  background: var(--console-bg);
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  background: var(--console-bg);
  color: var(--console-ink);
  font-family: var(--font);
  line-height: 1.6;
}

body[data-locked] {
  overflow: hidden;
}

a {
  color: var(--console-ink);
  text-decoration: underline;
  text-decoration-color: var(--console-border-strong);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--console-ink);
  text-decoration-color: var(--console-ink);
}

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

:focus-visible {
  outline: 2px solid var(--console-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

input[type="search"]::-webkit-search-cancel-button {
  filter: none;
}

.skip-link {
  background: var(--console-primary);
  color: var(--console-on-primary);
  border-radius: var(--r-sm);
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-sm);
  transition: none;
}

.skip-link:focus {
  color: var(--console-on-primary);
}

/* --- The first paint ---------------------------------------------------------
   src/seo/body.js renders each page's words into #app as plain HTML, and
   app.js replaces them once its modules have loaded — about two seconds later
   on a phone over slow 4G. Unstyled, those two seconds were a raw document in
   the browser's default serif; this sets the same words in the site's type, on
   the site's column, so the swap reads as the page filling in.
   -------------------------------------------------------------------------- */
.ssr {
  max-width: var(--maxw-prose);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad);
  color: var(--console-ink-2);
}

.ssr h1,
.ssr h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--console-ink);
  text-wrap: balance;
}

.ssr h1 {
  font-size: var(--fs-h1);
  margin-bottom: 18px;
}

.ssr h2 {
  font-size: var(--fs-h3);
  margin: 48px 0 14px;
}

.ssr h3,
.ssr dt {
  font-weight: 600;
  color: var(--console-ink);
}

.ssr p,
.ssr li,
.ssr dd {
  font-size: 16px;
  line-height: 1.7;
}

.ssr p + p,
.ssr dd + dt {
  margin-top: 12px;
}

.ssr ul {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.ssr nav {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--console-border);
}

/* --- Layout ---------------------------------------------------------------- */
.band {
  padding-block: clamp(56px, 8vw, 104px);
}

.band--tight {
  padding-block: clamp(40px, 5vw, 64px);
}

.band--carbon,
.band--subtle {
  background: var(--console-subtle);
  border-top: 0;
}

/* The one dark band a page may carry. */
.band--ink {
  background: var(--site-invert-bg);
  color: var(--site-invert-ink);
}

.band--ink .lede,
.band--ink .deck {
  color: var(--site-invert-ink-2);
}

.band--ink .display,
.band--ink a:not(.btn) {
  color: var(--site-invert-ink);
}

.band--ink .display .accent {
  color: var(--site-invert-accent);
}

.band--ink .btn--primary {
  background: var(--site-invert-ink);
  border-color: var(--site-invert-ink);
  color: var(--site-invert-bg);
}

.band--ink .btn--primary:hover:not(:disabled) {
  background: var(--site-invert-ink-2);
  border-color: var(--site-invert-ink-2);
  color: var(--site-invert-bg);
}

.band--ink .btn--ghost {
  border-color: var(--site-invert-ink-2);
  color: var(--site-invert-ink);
}

.band--ink .btn--ghost:hover {
  border-color: var(--site-invert-ink);
  color: var(--site-invert-ink);
}

/* Every section opens the same way: eyebrow, headline and, at the right on a
   desk, the link to the rest. The gap under it is the one gap between a
   heading and what it introduces, everywhere. */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.section-head .textlink {
  margin-bottom: 6px;
}

.section-lede {
  margin-top: 16px;
}

/* A label over a block, with the one gap it needs under it. These replace
   inline margins set from the page modules. */
.label--head {
  margin-bottom: 14px;
}

.label--head-sm {
  margin-bottom: 12px;
}

/* A label opening the next block of a column. */
.label--section {
  margin: var(--sp-4) 0 var(--sp-2);
}

/* The next block of a reading column. */
.prose-section {
  margin-top: var(--sp-4);
}

.prose-section--sm {
  margin-top: 32px;
}

/* --- Type ------------------------------------------------------------------ */
.eyebrow,
.label {
  display: block;
  margin-bottom: 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--console-ink-2);
  line-height: 1.4;
}

.eyebrow::before {
  content: none;
}

.label {
  margin-bottom: 0;
  font-size: 13px;
}

.label--crimson {
  color: var(--console-danger);
}

.label--grey {
  color: var(--console-ink-2);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: none;
  text-wrap: balance;
  color: var(--console-ink);
}

.display--hero {
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16em;
}

.display--1 {
  font-size: var(--fs-h1);
}

.display--2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.display--3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* The closing words of a headline: the same face in italic, in the accent. */
.display .accent {
  font-style: italic;
  color: var(--site-accent);
}

/* A measure of sixty characters, the deck's and the lede's: a line longer
   than that is where the eye loses its place coming back. */
.deck {
  font-size: var(--fs-deck);
  line-height: 1.55;
  color: var(--console-ink-2);
  max-width: 60ch;
}

.lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--console-ink-2);
  max-width: 60ch;
}

.quote {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.45;
  font-style: italic;
  color: var(--console-ink);
}

.card__body,
.rule-grid__line {
  font-size: 15px;
  line-height: 1.65;
  color: var(--console-ink-2);
}

.rule-grid__line {
  color: var(--console-ink);
}

/* --- Buttons --------------------------------------------------------------- */
.btn {
  height: 48px;
  gap: 8px;
  padding-inline: 22px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--console-ink);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.btn--sm {
  height: 40px;
  padding-inline: 16px;
  font-size: 14px;
}

.btn--md {
  height: 44px;
  padding-inline: 18px;
  font-size: 15px;
}

.btn--primary {
  background: var(--console-primary);
  border-color: var(--console-primary);
  color: var(--console-on-primary);
}

.btn--primary:hover:not(:disabled) {
  background: var(--console-primary-hover);
  border-color: var(--console-primary-hover);
  color: var(--console-on-primary);
}

.btn--ghost {
  background: transparent;
  border-color: var(--console-border-strong);
  color: var(--console-ink);
}

.btn--ghost:hover {
  border-color: var(--console-ink);
  color: var(--console-ink);
}

.btn svg {
  flex: 0 0 auto;
}

.btn:disabled {
  opacity: 0.4;
}

.textlink {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--console-ink);
  text-decoration: underline;
  text-decoration-color: var(--console-border-strong);
  text-underline-offset: 4px;
}

.textlink:hover {
  text-decoration-color: var(--console-ink);
}

.underlink {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--console-ink);
  border-bottom: 0;
  padding-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--console-border-strong);
  text-underline-offset: 4px;
}

.underlink:hover {
  text-decoration-color: var(--console-ink);
}

/* --- Surfaces ----------------------------------------------------------------
   One card: the surface, one hairline, the 8px radius. Every boxed thing on
   the site — a spec card, a review, a brief service, the company card — is
   this and nothing else, so the page reads as one set of objects.
   -------------------------------------------------------------------------- */
.panel,
.card {
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
  padding: 24px;
}

.card--accent {
  border-left: 1px solid var(--console-border);
}

a.card,
button.card {
  color: var(--console-ink);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

a.card:hover,
button.card:hover {
  background: var(--console-surface);
  border-color: var(--console-border-strong);
  color: var(--console-ink);
}

/* A card that goes somewhere lifts under the pointer: two pixels nearer, and
   a shadow to say so (.work-card, .brief-card, .brands__item below). Only on
   a device with a pointer that hovers — a thumb has nothing to hover with,
   and a card that jumps when tapped reads as a glitch. */

.rule-grid {
  background: var(--console-border);
  border-color: var(--console-border);
  border-radius: var(--r-md);
}

.rule-grid > * {
  background: var(--console-surface);
}

.specs {
  border-top: 1px solid var(--console-border);
}

.specs__row {
  border-bottom: 1px solid var(--console-border);
}

.specs__k {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--console-ink-2);
}

.specs__v {
  font-size: 14px;
  font-weight: 500;
  color: var(--console-ink);
}

/* The register of what the studio still owes stays in CAA Console and the docs.
   Where a page still draws one, it is a quiet note rather than a red box. */
.owed {
  border: 1px solid var(--console-border);
  background: var(--console-subtle);
  border-radius: var(--r-md);
  padding: 16px 18px;
}

.owed__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--console-ink);
}

.owed__body {
  color: var(--console-ink-2);
}

.empty {
  border: 1px dashed var(--console-border-strong);
  color: var(--console-ink-2);
}

/* --- Chips and fields ------------------------------------------------------ */
.chip {
  height: 38px;
  padding-inline: 14px;
  border: 1px solid var(--console-border-strong);
  background: var(--console-surface);
  color: var(--console-ink);
  font-size: 14px;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.chip:hover {
  border-color: var(--console-ink);
}

.chip--filter {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.chip[aria-pressed="true"] {
  background: var(--console-primary);
  border-color: var(--console-primary);
  color: var(--console-on-primary);
}

/* A set of choices as one pill: the names side by side, the chosen one
   filled. The pill is as wide as its names; on a phone the row around it
   (.work__filters) scrolls sideways, so the pill moves whole rather than
   being cut at the edge of the screen. */
.segmented {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid var(--console-border-strong);
  border-radius: var(--r-pill);
  background: var(--console-surface);
}

.segmented__item {
  flex: 0 0 auto;
  height: 36px;
  padding-inline: 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--console-ink-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.segmented__item:hover {
  color: var(--console-ink);
  background: var(--console-subtle);
}

.segmented__item[aria-pressed="true"] {
  background: var(--console-primary);
  color: var(--console-on-primary);
}

.segmented__item:focus-visible {
  outline-offset: -2px;
}

.field {
  height: 48px;
  padding-inline: 14px;
  background: var(--console-surface);
  border: 1px solid var(--console-border-strong);
  border-radius: var(--r-sm);
  color: var(--console-ink);
}

.field::placeholder {
  color: var(--console-ink-3);
}

.field:focus {
  border-color: var(--console-focus);
}

.field:focus-visible {
  outline: 2px solid var(--console-focus);
  outline-offset: 0;
}

.field[aria-invalid="true"] {
  border-color: var(--console-danger);
}

.field--boxy {
  height: 48px;
  border-radius: var(--r-sm);
  font-size: 16px;
}

/* A radio or checkbox drawn as a selectable row. The input stays real. */
.choice {
  min-height: 0;
  padding: 16px 18px;
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.choice:hover {
  background: var(--console-surface);
  border-color: var(--console-border-strong);
}

.choice input:focus-visible ~ .choice__top {
  outline: 2px solid var(--console-focus);
  outline-offset: 4px;
}

.choice__label {
  font-weight: 500;
  font-size: 16px;
  color: var(--console-ink);
}

.choice__price {
  font-size: 14px;
  color: var(--console-ink-2);
}

.choice__spec {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--console-ink-2);
}

.choice:has(input:checked) {
  background: var(--console-surface);
  border-color: var(--console-ink);
  box-shadow: inset 0 0 0 1px var(--console-ink);
}

.choice:has(input:checked) .choice__label {
  color: var(--console-ink);
}

/* core.css's glass is a dark translucent pill; here it is a plain surface. */
.glass {
  background: var(--console-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--console-border);
  box-shadow: var(--console-shadow-pop);
}

.badge {
  border-color: var(--console-border-strong);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--console-ink-2);
}

.toast {
  background: var(--console-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--console-border);
  border-left: 3px solid var(--console-ink);
  box-shadow: var(--console-shadow-pop);
  color: var(--console-ink);
  animation: none;
}

.toast[data-leaving="true"] {
  transform: none;
  transition: opacity var(--t-fast) var(--ease);
}

.toast__icon {
  background: var(--console-subtle);
  color: var(--console-ink);
}

.toast--ok {
  border-left-color: var(--console-ok);
}

.toast--ok .toast__icon {
  background: var(--console-subtle);
  color: var(--console-ok);
}

.toast--danger {
  border-left-color: var(--console-danger);
}

.toast--danger .toast__icon {
  background: var(--console-subtle);
  color: var(--console-danger);
}

.toast--warn {
  border-left-color: var(--console-warn);
}

.toast--warn .toast__icon {
  background: var(--console-subtle);
  color: var(--console-warn);
}

/* --- Image slot ------------------------------------------------------------ */
image-slot {
  display: block;
  position: relative;
  aspect-ratio: var(--ratio, 4 / 5);
  overflow: hidden;
  background: var(--console-subtle);
}

image-slot[ratio="auto"] {
  aspect-ratio: auto;
  height: 100%;
}

/* The <picture> around a resized photograph only chooses the file; the <img>
   inside it is still what fills the frame. */
image-slot picture {
  display: contents;
}

.image-slot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

image-slot[data-state="loaded"] .image-slot__img {
  opacity: 1;
}

.image-slot__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

.frame {
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --- Masthead -------------------------------------------------------------
   One slim bar along the top, at every width: the logo, four places, and the
   one thing the whole site points at. Everything else is in the menu and the
   footer.
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 55;
  background: var(--console-bg);
  border-bottom: 1px solid var(--console-border);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.masthead__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 40px;
  text-decoration: none;
}

.masthead__logo img,
.footer__logo {
  height: 18px;
  width: auto;
  filter: var(--console-logo-filter);
}

.masthead__nav {
  display: none;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}

.masthead__link {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--console-ink-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.masthead__link:hover {
  color: var(--console-ink);
  background: var(--console-subtle);
}

.masthead__link[aria-current="page"] {
  color: var(--console-ink);
  font-weight: 500;
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* "Design your protection" does not fit beside the logo and the menu on a
   phone; "Design yours" does. The link's aria-label keeps the full name. */
.masthead__cta-full {
  display: none;
}

@media (min-width: 600px) {
  .masthead__cta-full {
    display: inline;
  }

  .masthead__cta-short {
    display: none;
  }
}

.masthead__menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding-inline: 12px;
  border: 1px solid var(--console-border-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--console-ink);
  font-size: 14px;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.masthead__menu:hover {
  border-color: var(--console-ink);
  color: var(--console-ink);
}

.masthead__menu svg {
  display: block;
}

@media (min-width: 900px) {
  .masthead__nav {
    display: flex;
  }

  .masthead__actions {
    margin-left: 0;
  }

  .masthead__menu-label {
    display: none;
  }
}

/* --- The menu ---------------------------------------------------------------
   Every page, as a list. A dialog over the page, from the top.
   -------------------------------------------------------------------------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--console-scrim);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 8px;
}

.sheet__panel {
  width: 100%;
  max-width: 400px;
  max-height: calc(100svh - 16px);
  overflow-y: auto;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  box-shadow: var(--console-shadow-pop);
}

.sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 12px 8px;
}

.sheet__close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--console-ink-2);
  font-size: 22px;
  line-height: 1;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.sheet__close:hover {
  background: var(--console-subtle);
  color: var(--console-ink);
}

.sheet__list {
  display: grid;
}

.sheet__item {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  color: var(--console-ink);
  font-size: 16px;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}

.sheet__item:hover {
  background: var(--console-subtle);
  color: var(--console-ink);
}

.sheet__item[aria-current="page"] {
  background: var(--console-selected);
  font-weight: 500;
}

/* The foot of the menu: one quiet way to ask, and the number as a line. */
.sheet__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 4px 4px;
  border-top: 1px solid var(--console-border);
}

.sheet__phone {
  font-size: 15px;
  color: var(--console-ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) var(--ease);
}

.sheet__phone:hover {
  color: var(--console-ink);
}

/* --- Page head and image hero ---------------------------------------------- */
.page-head__deck {
  margin-top: 18px;
}

/* A page's opening block is followed by its first section, and two tight
   bands' padding stacked into a gap of 130 px between a heading and the
   thing it introduces. */
.page-head {
  padding-bottom: clamp(24px, 3vw, 36px);
}

/* The opening. On a phone: the photograph first, edge to edge, then the
   words. On a desk: the words on the left, the photograph on the right at the
   4:5 it was shot at, sized so all of it sits above the fold. See imageHero()
   in site/parts.js. */
.hero {
  padding-block: 0 clamp(48px, 7vw, 88px);
}

.hero__grid {
  display: grid;
  gap: 28px;
}

.hero__media {
  margin-inline: calc(var(--pad) * -1);
}

/* A portrait cropped to 5:4 around the car, so the headline is still on the
   first screen beneath it. */
.hero__media image-slot {
  aspect-ratio: 5 / 4;
}

.hero__caption {
  padding: 10px var(--pad) 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--console-ink-2);
}

.hero__caption-link {
  color: var(--console-ink);
  font-weight: 500;
  white-space: nowrap;
}

.hero__body {
  max-width: 40em;
}

.hero__pull,
.hero__deck {
  margin-top: 18px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}

/* On a phone the "Ask us" launcher (a 48 px round button, 16 px in from the
   right) sits in the hero's bottom-right corner on the first screen — over
   the end of the deck's lines and the buttons under it. Both keep clear of
   its column; the headline above them is not where it reaches. */
@media (max-width: 599px) {
  .hero__deck,
  .hero__actions {
    padding-right: 56px;
  }
}

.hero__proof-row {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--console-border);
}

@media (min-width: 900px) {
  .hero {
    padding-top: clamp(32px, 4vw, 56px);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "body media";
    align-items: center;
    gap: clamp(40px, 5vw, 80px);
  }

  .hero__body {
    grid-area: body;
  }

  .hero__media {
    grid-area: media;
    justify-self: end;
    /* As wide as the column allows, but never so tall that the bottom of the
       car falls below the fold on a 13-inch laptop. */
    width: min(100%, calc((100svh - var(--header-h) - 120px) * 0.8));
    margin-inline: 0;
  }

  .hero__media image-slot {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-md);
  }

  .hero__caption {
    padding-inline: 0;
  }

  .hero .display--hero {
    font-size: clamp(44px, 4.8vw, 72px);
  }
}

/* --- The home page's opening: full bleed ------------------------------------
   The studio's call, against the "frame everything" default above: on the
   home page the photograph has no frame. It runs to the edge of the screen
   and dissolves into the page toward the words, so the car reads as standing
   in the page rather than pinned to it.

   Three things keep that from becoming decoration, and are why the rules at
   the top of this file allow it here and nowhere else:

   · The fade is a mask on the photograph, never a colour laid over it — no
     scrim, no tint. The words sit on the page's own ground, past the point
     where the photograph has faded out, so their contrast is the page's.
   · The ground stays light in both themes. The photograph is bright (white
     sky, grey concrete); dissolved into the dark theme it turned to haze. So
     the hero re-declares the light tokens for itself, and the page around it
     still follows the device.
   · One entrance, on the first draw only (see entrance() in site/parts.js),
     and none at all for anyone who has asked their device for less motion.

   tools/a11y.test.mjs holds that line: gradients only as a mask, keyframes
   only named hero-*, and a reduced-motion rule that turns them off.
   -------------------------------------------------------------------------- */
.hero--bleed {
  background: var(--console-bg);
  color: var(--console-ink);
}

.hero--bleed .hero__media image-slot {
  background: transparent;
  /* Phone: the photograph on top, its foot dissolving into the words. Eased
     stops rather than a straight ramp, which shows a visible band where it
     starts. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 70%,
    rgba(0, 0, 0, 0.75) 80%,
    rgba(0, 0, 0, 0.35) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 70%,
    rgba(0, 0, 0, 0.75) 80%,
    rgba(0, 0, 0, 0.35) 90%,
    rgba(0, 0, 0, 0) 100%
  );
}

.hero--bleed .hero__caption {
  padding-top: 0;
}

@media (min-width: 900px) {
  /* The section is the stage: as tall as the first screen allows, the words
     centred in the left of it, the photograph filling the right to the edge
     of the window. */
  .hero--bleed {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(560px, calc(100svh - var(--header-h)), 860px);
    padding-block: 56px;
    overflow: hidden;
  }

  .hero--bleed .hero__grid {
    display: block;
    width: 100%;
  }

  .hero--bleed .hero__body {
    position: relative;
    max-width: min(32em, 46%);
  }

  .hero--bleed .hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 60%;
    margin: 0;
  }

  .hero--bleed .hero__media image-slot {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    /* Toward the words, and into the band below. */
    -webkit-mask-image:
      linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.12) 12%,
        rgba(0, 0, 0, 0.4) 24%,
        rgba(0, 0, 0, 0.78) 36%,
        #000 48%
      ),
      linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000 14%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.12) 12%,
        rgba(0, 0, 0, 0.4) 24%,
        rgba(0, 0, 0, 0.78) 36%,
        #000 48%
      ),
      linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000 14%);
    mask-composite: intersect;
  }

  /* Under the car, where the photograph has fully faded in — and clear of the
     support launcher in the bottom-right corner. */
  .hero--bleed .hero__caption {
    position: absolute;
    left: 48%;
    bottom: 18px;
    padding: 0;
  }
}

/* Light in both themes — the light values of the tokens, re-declared for the
   hero alone. Value for value the :root block's, so nothing new to check. */
@media (prefers-color-scheme: dark) {
  .hero--bleed {
    color-scheme: light;
    --console-bg: #faf9f7;
    --console-surface: #ffffff;
    --console-subtle: #f3f2ee;
    --console-border: #e6e4df;
    --console-border-strong: #d4d1ca;
    --console-ink: #1a1a18;
    --console-ink-2: #5f5e5a;
    --console-ink-3: #6f6e69;
    --console-primary: #1a1a18;
    --console-primary-hover: #3a3936;
    --console-on-primary: #faf9f7;
    --console-focus: #2f6feb;
    --site-accent: #8a5a2b;
  }
}

/* The entrance. The photograph settles from slightly close to rest; the
   words rise into place one after another. `--hero-t` is zero on the first
   draw and negative on a redraw mid-way, so a redraw resumes rather than
   restarts. Transform and opacity only: nothing here moves the layout. */
@keyframes hero-settle {
  from {
    transform: scale(1.06);
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.hero--enter .hero__media .image-slot__img {
  animation: hero-settle 1600ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--hero-t, 0ms);
}

.hero--enter .hero__body > *,
.hero--enter .hero__caption {
  animation: hero-rise 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--hero-t, 0ms) + var(--rise, 0ms));
}

.hero--enter .hero__body > :nth-child(2) {
  --rise: 80ms;
}

.hero--enter .hero__body > :nth-child(3) {
  --rise: 160ms;
}

.hero--enter .hero__body > :nth-child(4) {
  --rise: 240ms;
}

.hero--enter .hero__body > :nth-child(5) {
  --rise: 320ms;
}

.hero--enter .hero__body > :nth-child(n + 6),
.hero--enter .hero__caption {
  --rise: 400ms;
}

.hero__proof {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 15px;
  color: var(--console-ink-2);
  text-decoration: none;
}

a.hero__proof:hover {
  color: var(--console-ink);
}

.hero__proof-title {
  font-weight: 600;
  color: var(--console-ink);
  font-variant-numeric: tabular-nums;
}

.hero__stars {
  letter-spacing: 0.06em;
  color: var(--console-ink);
}

/* --- Home: services ---------------------------------------------------------
   The eight as a list: number, name, line, arrow. Two columns on a desk,
   numbered down the first column and then the second.
   -------------------------------------------------------------------------- */
.service-list {
  border-top: 1px solid var(--console-border);
}

@media (min-width: 900px) {
  .service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: 48px;
  }
}

.service-row {
  display: grid;
  grid-template-columns: 2.5ch minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  height: 100%;
  padding: 18px 4px;
  border-bottom: 1px solid var(--console-border);
  color: var(--console-ink);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}

.service-row:hover {
  background: var(--console-selected);
  color: var(--console-ink);
}

.service-row__n {
  font-size: 13px;
  color: var(--console-ink-3);
  font-variant-numeric: tabular-nums;
}

.service-row__text {
  display: grid;
  gap: 4px;
}

.service-row__title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 24px);
  line-height: 1.2;
}

.service-row__line {
  font-size: 15px;
  line-height: 1.5;
  color: var(--console-ink-2);
}

.service-row__arrow {
  color: var(--console-ink-2);
}

.service-row:hover .service-row__arrow {
  color: var(--console-ink);
}

/* --- Home: work -------------------------------------------------------------
   Three across on a desk; on a phone, a row that scrolls sideways with the
   next card showing at the edge, so it reads as more to see.
   -------------------------------------------------------------------------- */
.work-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 16px;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}

.work-rail::-webkit-scrollbar {
  display: none;
}

.work-rail > * {
  scroll-snap-align: start;
}

@media (min-width: 760px) {
  .work-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 20px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

/* --- Home: how it works ---------------------------------------------------- */
.process {
  display: grid;
  gap: 0 32px;
}

@media (min-width: 640px) {
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.process__step {
  padding: 22px 0 26px;
  border-top: 1px solid var(--console-ink);
}

.process__n {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--console-ink-3);
  font-variant-numeric: tabular-nums;
}

.process__title {
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.process__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--console-ink-2);
  text-wrap: pretty;
}

/* --- Home: the studio ------------------------------------------------------ */
.studio-strip__grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

.studio-strip__media {
  border-radius: var(--r-md);
  overflow: hidden;
}

.studio-strip__media image-slot {
  aspect-ratio: 4 / 3;
}

.studio-strip__reach {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

.studio-strip__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 24px;
  margin-top: 28px;
  border-top: 1px solid var(--console-border);
}

.studio-strip__fact {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--console-border);
}

.studio-strip__fact dt {
  font-size: 14px;
  font-weight: 600;
  color: var(--console-ink);
}

.studio-strip__fact dd {
  font-size: 15px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

@media (min-width: 520px) {
  .studio-strip__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.studio-strip__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 28px;
}

@media (min-width: 900px) {
  .studio-strip__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 64px;
  }

  .studio-strip__media image-slot {
    aspect-ratio: 1 / 1;
  }
}

/* --- Home: reviews, and the close ------------------------------------------ */
.closing {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.closing .review-wall__grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cta-band {
  text-align: left;
}

.cta-band__inner {
  display: grid;
  gap: 28px;
  align-items: end;
}

.cta-band__title {
  max-width: 18ch;
}

.cta-band__body {
  margin-top: 16px;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
  }
}

/* --- Breadcrumb ------------------------------------------------------------
   Above a page that sits under another: Home › Services › Ceramic coating. */
.crumbs {
  padding-top: 20px;
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--console-ink-2);
}

.crumbs__list li + li::before {
  content: "›";
  margin-right: 6px;
}

.crumbs__list a {
  color: inherit;
}

.crumbs__list [aria-current] {
  color: var(--console-ink);
}

/* --- Services page --------------------------------------------------------- */
.service-index {
  padding-bottom: 32px;
}

.service-index .chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.service,
.brief-card {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.service {
  border-top: 1px solid var(--console-border);
}

/* A phone gets the service photograph at 4:3 rather than a full portrait:
   it is there to show the work, not to be scrolled past for a screen. */
@media (max-width: 899px) {
  .service__media image-slot {
    aspect-ratio: 4 / 3;
  }
}

.brief-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.brief-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
}

@media (hover: hover) {
  .brief-card {
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease);
  }

  .brief-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    border-color: var(--console-border-strong);
  }
}

.brief-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}

.brief-card__body {
  flex: 1;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

.brief-card .service__actions {
  margin-top: 20px;
}

/* A panel with a heading and a paragraph, side by side on a desk instead of
   the paragraph stopping at half the panel's width. */
.side-panel {
  display: grid;
  gap: 12px 48px;
  padding: clamp(24px, 3vw, 36px);
}

@media (min-width: 900px) {
  .side-panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* The same split with no panel around it. */
.side-panel--bare {
  padding: 0 var(--pad);
}

.side-panel .textlink {
  display: inline-block;
}

.side-panel__link {
  margin-top: 16px;
}

.service__grid {
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 900px) {
  .service__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
  }
}

.service__n {
  font-size: 14px;
  color: var(--console-ink-3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.service__also {
  margin-top: 6px;
  font-size: 15px;
  color: var(--console-ink-2);
}

.service__angle {
  margin-top: 16px;
}

.service__body {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--console-ink-2);
  max-width: 38em;
}

.service__body + .service__body {
  margin-top: 12px;
}

.service__craft {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 640px) {
  .service__craft {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.service__signature {
  padding: 18px 20px;
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
  background: var(--console-surface);
}

.service__signature-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
}

.service__signature-body {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--console-ink-2);
}

.service__signature-kicker {
  font-weight: 600;
  color: var(--console-ink);
}

.service__subs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 24px;
  margin-top: 24px;
  border-top: 1px solid var(--console-border);
}

.service__sub {
  padding: 10px 0;
  border-bottom: 1px solid var(--console-border);
  font-size: 15px;
  color: var(--console-ink);
}

.service__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}

.service__media {
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --- Work ------------------------------------------------------------------ */
.work__filters {
  display: flex;
  padding-bottom: 28px;
  /* To the edges on a phone, so the pill can scroll out from under the
     page's padding rather than being cut by it. */
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  overflow-x: auto;
  scrollbar-width: none;
}

.work__filters::-webkit-scrollbar {
  display: none;
}

/* The index: as many cards across as fit at 260px, three on a desk. */
.work-grid {
  display: grid;
  gap: 32px 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.work-card {
  display: block;
  color: var(--console-ink);
  text-decoration: none;
}

.work-card:hover {
  color: var(--console-ink);
}

.work-card__media {
  border-radius: var(--r-md);
  overflow: hidden;
}

.work-card:hover .image-slot__img {
  opacity: 0.92;
}

/* The photograph lifts, not the whole card: the caption under it stays
   put, and the shadow belongs to the frame. */
@media (hover: hover) {
  .work-card__media {
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
  }

  .work-card:hover .work-card__media {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
  }
}

.work-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
}

.work-card__car {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
}

.work-card__tag {
  font-size: 13px;
  color: var(--console-ink-2);
  white-space: nowrap;
}

.work-card__note {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

/* --- Case study --------------------------------------------------------------
   On a desk, as written: the opening split with the photograph, the story in
   the reading column, the other frames two across, the next job, the close.
   On a phone the photographs come first and the words after — see casePage()
   in site/pages/work.js for why — which `order` does here without a second
   copy of the page.
   -------------------------------------------------------------------------- */
.case {
  display: flex;
  flex-direction: column;
}

.case > * {
  width: 100%;
}

@media (max-width: 759px) {
  .case > .hero {
    order: -3;
    padding-bottom: var(--sp-3);
  }

  .case > .case__gallery {
    order: -2;
  }

  .case > .case__story {
    order: -1;
  }

  /* The opening, compacted: the photograph edge to edge, and under it a
     card — the car, the service and the one-line note — rather than the
     display-size headline the desk has room for. */
  .case .hero__body {
    padding: 20px;
    background: var(--console-surface);
    border: 1px solid var(--console-border);
    border-radius: var(--r-md);
  }

  .case .hero__body .display--hero {
    font-size: var(--fs-h2);
  }

  .case .hero__pull {
    margin-top: 12px;
    font-size: 18px;
  }

  .case .hero__deck {
    margin-top: 10px;
    font-size: 16px;
  }

  /* The rest of the photographs as a row to swipe through, the next frame
     showing at the edge — the same rail the home page uses. */
  .case__gallery {
    padding-top: 0;
    padding-bottom: var(--sp-3);
  }

  .case__grid {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }

  .case__grid::-webkit-scrollbar {
    display: none;
  }

  .case__grid > * {
    scroll-snap-align: start;
  }

  .case__story {
    padding-top: var(--sp-2);
  }

  /* The specification as two columns, the name beside its value, rather
     than a row that pushes a long value to the far edge. */
  .case__spec .specs__row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 12px;
  }

  .case__spec .specs__v {
    text-align: left;
  }
}

.case__block {
  margin-bottom: 36px;
}

.case__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--console-ink);
  text-wrap: pretty;
}

/* Consecutive paragraphs of written copy — the warranty terms, the About
   sections — read as paragraphs, not one block broken by line ends. */
.case__body + .case__body {
  margin-top: 14px;
}

.fine-print {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

.case__spec {
  border-top: 1px solid var(--console-border);
  padding-top: 24px;
  margin-top: 8px;
}

.case__gallery {
  padding-top: 0;
}

/* Two across on a desk, at the full width of the page rather than the
   reading column — a photograph is not a paragraph. */
.case__grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .case__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  /* One more frame — the Bolide has one — at the width of one column, in
     the middle, rather than alone at the left of an empty second column. */
  .case__grid:has(> :only-child) {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
  }
}

.case__frame {
  border-radius: var(--r-md);
  overflow: hidden;
}

.next-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label arrow"
    "car arrow"
    "tag arrow";
  align-items: center;
  gap: 2px 16px;
  padding: 24px 0;
  border-top: 1px solid var(--console-border);
  border-bottom: 1px solid var(--console-border);
  color: var(--console-ink);
  text-decoration: none;
}

.next-job:hover {
  color: var(--console-ink);
  background: var(--console-subtle);
  transition: background-color var(--t-fast) var(--ease);
}

.next-job__label {
  grid-area: label;
  font-size: 13px;
  color: var(--console-ink-2);
}

.next-job__car {
  grid-area: car;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.next-job__tag {
  grid-area: tag;
  font-size: 14px;
  color: var(--console-ink-2);
}

.next-job__arrow {
  grid-area: arrow;
  font-size: 24px;
  color: var(--console-ink-2);
}

.next-job:hover .next-job__arrow {
  color: var(--console-ink);
}

.case__actions {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* --- Visit -----------------------------------------------------------------
   The details on the left, the map on the right and held in view on a desk;
   on a phone, the buttons, the move, the map, then hours and parking.
   -------------------------------------------------------------------------- */
.visit__grid {
  display: grid;
  gap: 28px;
}

.visit__info {
  display: grid;
  gap: 20px;
  align-content: start;
}

@media (min-width: 960px) {
  .visit__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
    align-items: start;
  }

  .visit__mapcol {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

.moved {
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--console-surface);
}

.moved__banner {
  padding: 10px 16px;
  background: var(--console-subtle);
  border-bottom: 1px solid var(--console-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--console-ink);
}

.moved__body {
  padding: 14px 16px 16px;
}

.moved__old {
  font-size: 14px;
  line-height: 1.6;
  color: var(--console-ink-2);
  text-decoration: line-through;
  margin-bottom: 6px;
}

.moved__note {
  font-size: 14px;
  line-height: 1.65;
  color: var(--console-ink-2);
}

.visit__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.visit__cards {
  display: grid;
  gap: 16px;
}

.visit__map {
  display: block;
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--console-subtle);
}

@media (min-width: 960px) {
  .visit__map {
    aspect-ratio: 4 / 5;
    max-height: calc(100svh - var(--header-h) - 48px);
    width: 100%;
  }
}

.visit__map__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.visit__map__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 24px;
  border: 0;
  background: transparent;
  color: var(--console-ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.visit__map__button__title {
  font-size: 16px;
  font-weight: 600;
}

.visit__map__button__note {
  max-width: 32ch;
  font-size: 13px;
  color: var(--console-ink-2);
}

.visit__hour {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--console-border);
  font-size: 15px;
  color: var(--console-ink-2);
}

.visit__hour[data-today="true"] {
  color: var(--console-ink);
  font-weight: 600;
}

.visit__hour dd {
  font-variant-numeric: tabular-nums;
}

.visit__warning {
  margin-top: 14px;
  font-size: 13px;
  color: var(--console-danger);
}

/* --- Google record --------------------------------------------------------- */
google-record {
  display: contents;
}

.record__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.record__pill {
  font-size: 12px;
  font-weight: 500;
  color: var(--console-ink-2);
  border: 1px solid var(--console-border-strong);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  white-space: nowrap;
}

.record__pill--open {
  color: var(--console-ok);
  border-color: var(--console-ok);
}

.record__number {
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  color: var(--console-ink);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.record__note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

.record__note--ok {
  color: var(--console-ok);
}

.record__closures {
  margin: 14px 0 0;
  padding: 12px 14px;
  list-style: none;
  display: grid;
  gap: 8px;
  background: var(--console-subtle);
  border: 1px solid var(--console-border);
  border-radius: var(--r-sm);
}

.record__closure {
  display: grid;
  gap: 1px;
}

.record__closure-when {
  font-size: 13px;
  font-weight: 600;
  color: var(--console-ink);
}

.record__closure-what {
  font-size: 13px;
  line-height: 1.5;
  color: var(--console-ink-2);
}

/* --- Materials ------------------------------------------------------------- */
.brand-row {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--console-border);
  border-bottom: 1px solid var(--console-border);
}

.brands__item {
  appearance: none;
  flex: 1 1 auto;
  min-height: 64px;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  cursor: pointer;
  text-align: center;
  padding: 16px 20px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--console-ink);
  transition: background-color var(--t-fast) var(--ease);
}

.brands__item:hover,
.brands__item:focus-visible {
  background: var(--console-subtle);
  color: var(--console-ink);
}

/* A name lifts a touch under the pointer, as a card does — it opens
   something, and the row of plain words otherwise gives no sign of it. */
@media (hover: hover) {
  .brands__item {
    transition: background-color var(--t-fast) var(--ease), transform var(--motion-fast) var(--ease-out);
  }

  .brands__item:hover {
    transform: translateY(-2px);
  }
}

.spec-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 760px) {
  .spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

.brand-modal {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
  background: var(--console-surface);
  color: var(--console-ink);
  box-shadow: var(--console-shadow-pop);
}

.brand-modal::backdrop {
  background: var(--console-scrim);
}

.brand-modal__inner {
  position: relative;
  padding: 28px 24px 24px;
}

.brand-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  appearance: none;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--console-ink-2);
  font-size: 24px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.brand-modal__close:hover,
.brand-modal__close:focus-visible {
  color: var(--console-ink);
  background: var(--console-subtle);
}

.brand-modal__name {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--console-ink);
}

.brand-modal__role,
.brand-modal__blurb {
  margin: 12px 0 0;
  color: var(--console-ink-2);
}

.brand-modal__out {
  margin-top: 22px;
}

.brand-modal__foot {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--console-ink-2);
}

.spec-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 12px;
}

.spec-card__series {
  font-family: var(--font-display);
  font-size: 20px;
}

.spec-card__type {
  font-size: 13px;
  color: var(--console-ink-2);
}

/* --- Aftercare ------------------------------------------------------------- */
.steps {
  border-top: 1px solid var(--console-border);
}

.steps__item {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--console-border);
}

.steps__n {
  flex: 0 0 auto;
  min-width: 2ch;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.15;
  color: var(--console-ink-3);
  font-variant-numeric: tabular-nums;
}

.steps__title {
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 6px;
}

.steps__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--console-ink-2);
  text-wrap: pretty;
}

/* --- FAQ ------------------------------------------------------------------- */
/* The search sits directly over the list: its band's bottom padding and the
   list's top padding stacked into a 120 px gap under the chips. */
.faq__search {
  padding-bottom: 0;
}

.faq__chips {
  padding-top: 16px;
}

.faq__results {
  margin-top: 24px;
}

/* No query, no results, no gap under the chips. */
.faq__results:empty {
  margin-top: 0;
}

.faq__stack {
  --gap: 10px;
}

.faq__result-cat {
  margin-bottom: 8px;
}

.faq__result-q {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
}

.faq__result-a {
  font-size: 15px;
  line-height: 1.7;
  color: var(--console-ink-2);
}

.faq__miss {
  text-align: center;
  display: grid;
  gap: 16px;
  justify-items: center;
}

.faq__cat {
  margin-bottom: 36px;
}

.faq__cat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--console-ink);
  margin-bottom: 4px;
}

.faq__cat-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
}

.faq__cat-meta {
  font-size: 13px;
  color: var(--console-ink-2);
  font-variant-numeric: tabular-nums;
}

.faq__item {
  border-bottom: 1px solid var(--console-border);
}

.faq__q {
  cursor: pointer;
  padding: 16px 0;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--console-ink);
  list-style: none;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__plus {
  flex: 0 0 auto;
  color: var(--console-ink-2);
}

.faq__item[open] .faq__plus {
  color: var(--console-ink);
}

.faq__a {
  padding-bottom: 18px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--console-ink-2);
  max-width: 60ch;
}

/* --- About ---------------------------------------------------------------- */
.about__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    align-items: start;
  }
}

.about__written {
  margin-bottom: 40px;
}

.about__copy .display {
  margin-bottom: 16px;
}

/* One column here at every width: it shares the page with the photograph. */
.about__list {
  display: block;
}

.about__side {
  display: grid;
  gap: 20px;
}

.about__media {
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --- Written sections: warranty and About ---------------------------------- */
.warranty__list,
.warranty__steps {
  margin: 0 0 18px;
  padding-left: 1.3em;
  color: var(--console-ink);
  line-height: 1.8;
}

.warranty__list li,
.warranty__steps li {
  margin-bottom: 6px;
}

.warranty__list {
  list-style: disc;
}

.warranty__heading {
  margin-bottom: 14px;
}

.warranty__steps {
  list-style: decimal;
}

/* --- The configurator -------------------------------------------------------
   One question at a time. A count and a bar say how far along it is, what is
   already chosen sits above as a trail to step back along, and the total
   stays in view: beside the question on a desk, along the foot on a phone.
   -------------------------------------------------------------------------- */
/* Not `.quote` — that is core.css's italic pull-quote, and the whole
   configurator used to inherit it. */
.configurator {
  padding-bottom: 96px;
}

.quote__layout {
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 960px) {
  .configurator {
    padding-bottom: 48px;
  }

  .quote__layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
  }
}

.quote__main {
  min-width: 0;
}

.quote__progress {
  margin-bottom: 20px;
}

.quote__count {
  font-size: 14px;
  color: var(--console-ink-2);
  font-variant-numeric: tabular-nums;
}

.quote__bar {
  height: 4px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  background: var(--console-border);
  overflow: hidden;
}

.quote__bar span {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--console-ink);
  transition: background-color var(--t-fast) var(--ease);
}

.quote__trail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.quote__crumb {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--console-border);
  border-radius: var(--r-pill);
  background: var(--console-surface);
  color: var(--console-ink);
  font-size: 14px;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.quote__crumb:hover {
  border-color: var(--console-ink);
}

.quote__crumb-k {
  color: var(--console-ink-2);
}

.quote__step {
  margin: 0;
  padding: 0;
  border: none;
  /* A fieldset will not shrink below its widest child by default, so the
     day picker's scrolling row would scroll the whole page sideways. */
  min-width: 0;
}

.quote__legend {
  padding: 0;
  margin-bottom: 20px;
}

.quote__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--console-ink);
}

.quote__title:focus {
  outline: none;
}

.quote__title:focus-visible {
  outline: 2px solid var(--console-focus);
  outline-offset: 4px;
}

.quote__sub {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

.quote__options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.quote__more {
  margin-top: 16px;
}

.quote__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--console-border);
}

.quote__nav .quote__next,
.quote__nav .quote__send {
  margin-left: auto;
}

.quote__back {
  border: 0;
  padding: 8px 0;
  background: none;
  color: var(--console-ink-2);
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: var(--console-border-strong);
  text-underline-offset: 4px;
  transition: color var(--t-fast) var(--ease);
}

.quote__back:hover {
  color: var(--console-ink);
}

.quote__error {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--console-danger);
  border-radius: var(--r-sm);
  color: var(--console-danger);
  font-size: 15px;
}

.quote__total {
  font-weight: 600;
  color: var(--console-ink);
}

.quote__tax {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--console-ink-2);
}

.quote__caveat {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--console-warn);
}

.quote__field {
  display: grid;
  align-content: start;
  gap: 6px;
}

.quote__label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--console-ink);
}

.quote__optional {
  font-weight: 400;
  color: var(--console-ink-2);
}

.quote__hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--console-ink-2);
}

.quote__hint--warn {
  color: var(--console-danger);
}

.quote__rule {
  margin: 32px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--console-border);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--console-ink);
}

.quote__note {
  margin: -4px 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

.quote__fields {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

/* Your car: Brand → Model → Year. */
.quote__car {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px;
}

.quote__car-note {
  margin: 14px 0 0;
}

.quote__car-switch {
  justify-self: start;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--console-ink);
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: var(--console-border-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}

.quote__car-switch:hover {
  text-decoration-color: var(--console-ink);
}

/* The slot picker. Days scroll sideways so the times stay on a phone screen. */
.quote__days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.quote__day {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  gap: 2px;
  min-width: 104px;
  padding: 10px 14px;
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
  color: var(--console-ink);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.quote__day:hover {
  border-color: var(--console-border-strong);
}

.quote__day[data-chosen="true"] {
  border-color: var(--console-ink);
  box-shadow: inset 0 0 0 1px var(--console-ink);
}

.quote__day--closed {
  cursor: not-allowed;
  background: var(--console-subtle);
  color: var(--console-ink-2);
}

.quote__day-name {
  font-size: 14px;
  font-weight: 600;
}

.quote__day-sub {
  font-size: 12px;
  color: var(--console-ink-2);
}

.quote__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.quote__slot {
  padding: 8px 14px;
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  border-radius: var(--r-pill);
  color: var(--console-ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.quote__slot:hover {
  border-color: var(--console-border-strong);
}

.quote__slot[data-chosen="true"] {
  background: var(--console-primary);
  border-color: var(--console-primary);
  color: var(--console-on-primary);
  font-weight: 600;
}

.quote__turnstile {
  margin-top: 20px;
  min-height: 65px;
}

.quote__consent {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--console-ink-2);
  max-width: 62ch;
}

.quote__consent a,
.quote__consent-link {
  color: inherit;
  text-decoration: underline;
}

.quote__consent-link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  text-underline-offset: 2px;
  cursor: pointer;
}

.quote__consent-link:hover {
  color: var(--console-ink);
}

.quote__consent-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--console-ink-2);
  cursor: pointer;
}

.quote__consent-check input {
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--console-ink);
}

/* The review: what was chosen, and what it costs. */
.quote__review .specs {
  margin-top: 4px;
}

.quote__change {
  margin-left: 12px;
  padding: 0;
  font-size: 14px;
}

.quote__review > .specs {
  border-top: 0;
}

.quote__review-wa {
  margin-top: 16px;
  font-size: 15px;
  color: var(--console-ink-2);
}

/* After sending. */
.quote__done {
  padding: clamp(24px, 4vw, 40px);
}

/* The thank-you is the one configurator screen with the "Ask us" launcher
   on it; on a phone it sits over the end of the lines at the foot of the
   first screen. The words keep clear of its column, as the hero's do. */
@media (max-width: 599px) {
  .quote__done .lede,
  .quote__done .quote__next-steps {
    padding-right: 48px;
  }
}

.quote__ref {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--console-subtle);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.quote__next-steps {
  margin-top: 24px;
  padding-left: 1.2em;
  list-style: decimal;
  color: var(--console-ink-2);
  line-height: 1.8;
}

/* The running total. A card beside the question on a desk; a plain bar along
   the foot of a phone, where it is the only fixed thing on the screen. */
.estimate {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 56;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--console-surface);
  border-top: 1px solid var(--console-border);
}

.estimate__label {
  font-size: 13px;
  color: var(--console-ink-2);
}

.estimate__tax {
  font-weight: 400;
}

.estimate__value {
  font-weight: 600;
  font-size: 20px;
  color: var(--console-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.estimate__specs,
.estimate__heading {
  display: none;
}

.estimate__step {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--console-ink-2);
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 960px) {
  .estimate {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    display: block;
    padding: 24px;
    border: 1px solid var(--console-border);
    border-radius: var(--r-md);
  }

  .estimate__heading {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 22px;
  }

  .estimate__specs {
    display: block;
    margin-bottom: 18px;
  }

  .estimate__step {
    display: none;
  }

  .estimate__value {
    font-size: 28px;
  }
}

/* --- Footer ---------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--console-border);
  background: var(--console-bg);
  padding: 56px 0 32px;
  font-size: 15px;
}

.footer__grid {
  display: grid;
  gap: 32px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer__brand {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: auto;
  }
}

.footer__tagline {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  color: var(--console-ink);
  max-width: 18em;
  text-wrap: balance;
}

.footer__address {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--console-ink-2);
}

.footer__heading {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--console-ink);
}

.footer__links {
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--console-ink-2);
}

.footer__links a,
.footer__prefs {
  color: var(--console-ink-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.footer__links a:hover,
.footer__prefs:hover {
  color: var(--console-ink);
}

.footer__prefs {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.footer__base {
  margin-top: 48px;
  font-size: 13px;
  color: var(--console-ink-2);
}

/* The rule above the copyright line, inside the wrap's padding rather than
   across it, so it starts and ends where the columns above do. */
.footer__base::before {
  content: "";
  display: block;
  margin-bottom: 20px;
  border-top: 1px solid var(--console-border);
}

/* --- Support --------------------------------------------------------------- */
.support {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Off the configurator's steps (site/app.js), where it sat on the step nav's
   button and the running total along the foot of a phone. */
.support[hidden] {
  display: none;
}

/* The one contact affordance on every page, in the site's ink on its ivory:
   it used to be a white pill, and before that a green one. Ink, because it
   is the studio's button, not WhatsApp's — the panel it opens ends with
   WhatsApp and the phone, and the icon alone may be green. */
.support__launcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding-inline: 18px;
  border: 1px solid var(--console-primary);
  border-radius: var(--r-pill);
  background: var(--console-primary);
  box-shadow: var(--console-shadow-pop);
  color: var(--console-on-primary);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    transform var(--motion-fast) var(--ease-out);
}

.support__launcher:hover {
  background: var(--console-primary-hover);
  border-color: var(--console-primary-hover);
  color: var(--console-on-primary);
}

@media (hover: hover) {
  .support__launcher:hover {
    transform: translateY(-1px);
  }
}

.support[data-open="true"] .support__launcher {
  background: var(--console-surface);
  border-color: var(--console-border);
  color: var(--console-ink);
}

.support__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.support__actions .btn {
  height: 44px;
  padding-inline: 16px;
}

.support__launcher-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* On a phone the launcher sat over whatever line of text was at the foot of
   the screen. A round button covers a third of what the pill did; its
   aria-label already says what it is. */
@media (max-width: 599px) {
  .support__launcher {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
  }

  .support__launcher-label {
    display: none;
  }
}

.support__panel {
  width: min(360px, calc(100vw - 32px));
  max-height: min(70svh, 560px);
  overflow-y: auto;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  box-shadow: var(--console-shadow-pop);
  display: grid;
  gap: 14px;
}

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

.support__close {
  background: none;
  border: none;
  color: var(--console-ink-2);
  padding: 4px;
}

.support__close:hover {
  color: var(--console-ink);
}

.support__intro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

.support__results {
  display: grid;
  gap: 8px;
}

.support__result {
  border: 1px solid var(--console-border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}

.support__result summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--console-ink);
  list-style: none;
}

.support__result summary::-webkit-details-marker {
  display: none;
}

.support__result p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--console-ink-2);
}

.support__miss {
  font-size: 14px;
  line-height: 1.7;
  color: var(--console-ink-2);
}

/* The assistant's conversation. The customer's turns sit right in the ink
   the launcher wears; the assistant's sit left, on the panel, under a label
   that says it is AI every time it speaks. */
.support__thread {
  display: grid;
  gap: 10px;
}

.support__msg {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.support__msg--me {
  justify-self: end;
  background: var(--console-primary);
  color: var(--console-on-primary);
}

.support__msg--ai {
  justify-self: start;
  border: 1px solid var(--console-border);
  color: var(--console-ink);
}

.support__msg--pending p {
  color: var(--console-ink-2);
}

.support__who {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--console-ink-2);
}

.support__quote {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--console-border);
}

.support__quote-total {
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.support__quote-total span {
  font-size: 13px;
  font-weight: 400;
  color: var(--console-ink-2);
}

.support__ask {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.support__send {
  height: 44px;
  padding-inline: 16px;
}

/* --- Review wall ----------------------------------------------------------- */
review-wall {
  display: block;
}

.review-wall__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--console-border);
}

.review-wall__score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.review-wall__figure {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--console-ink);
  font-variant-numeric: tabular-nums;
}

.review-wall__stars {
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--console-ink);
}

.review-wall__count {
  font-size: 15px;
  color: var(--console-ink-2);
}

.review-wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.review-wall__foot {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--console-ink-2);
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
  padding: 22px 20px;
}

.review-card__stars {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--console-ink);
  line-height: 1;
}

.review-card__body {
  flex: 1;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.5;
  color: var(--console-ink);
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card__by {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--console-border);
}

.review-card__monogram {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--console-subtle);
  font-size: 13px;
  font-weight: 600;
  color: var(--console-ink);
}

.review-card__author {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--console-ink);
}

.review-card__when {
  display: block;
  font-size: 13px;
  color: var(--console-ink-2);
  margin-top: 2px;
}

.review-card__link {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--console-ink-2);
}

.review-card__link:hover {
  color: var(--console-ink);
}

/* Held space while the reviews are on their way. Still, not shimmering. */
.review-card--skeleton {
  gap: 14px;
  min-height: 220px;
}

.skeleton-line {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--console-subtle);
}

.skeleton-line--short {
  width: 45%;
}

/* --- The combobox ---------------------------------------------------------- */
.combo {
  position: relative;
  min-width: 0;
}

.combo__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 300px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
  box-shadow: var(--console-shadow-pop);
  scroll-margin-bottom: 96px;
}

.combo__list[hidden] {
  display: none;
}

.combo__option {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--console-ink);
  font-size: 15px;
  cursor: pointer;
}

.combo__option:hover,
.combo__option[aria-selected="true"] {
  background: var(--console-subtle);
}

.combo__option[data-chosen="true"] .combo__label {
  font-weight: 600;
}

.combo__hint {
  font-size: 13px;
  color: var(--console-ink-2);
  text-align: right;
}

.combo__empty,
.combo__more {
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--console-ink-2);
}

.combo__input:disabled {
  opacity: 0.5;
}

/* --- Motion ------------------------------------------------------------------
   Three movements, all opacity and a transform, all off under reduced motion
   (the rule at the end of this block), and all of them held by the "motion is
   restrained" check in tools/a11y.test.mjs: keyframes named hero-, reveal-,
   page- or quote-; transitions on transform and box-shadow no longer than
   400 ms; no blur; gradients only as the hero's mask.

   · The reveal. An element carrying data-reveal is drawn transparent and,
     when components/reveal.js sees it reach the screen and adds .is-in,
     rises twelve pixels into place. data-reveal="group" does the same to
     each child in turn, --i apart. `translate`, not `transform`, so a card
     that also lifts under the pointer can: the two compose, where a second
     transform would replace the first.
   · The page. #app fades in when a link brings a new page, restarted by
     app.js taking the class off and putting it back. Opacity only, so the
     page is where it was while it arrives.
   · The hero's entrance, above, which came first and set the rule.
   -------------------------------------------------------------------------- */
@keyframes reveal-rise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
  }
}

[data-reveal]:not(.is-in):not([data-reveal="group"]),
[data-reveal="group"]:not(.is-in) > * {
  opacity: 0;
}

[data-reveal].is-in:not([data-reveal="group"]),
[data-reveal="group"].is-in > * {
  animation: reveal-rise var(--motion) var(--ease-out) backwards;
  animation-delay: min(calc(var(--i, 0) * 70ms), 350ms);
}

/* A redraw of the page already on screen: what is already in view is simply
   there (reveal.js adds both classes before the first paint of the new
   nodes). */
[data-reveal].is-settled:not([data-reveal="group"]),
[data-reveal="group"].is-settled > * {
  animation: none;
}

.page--enter {
  animation: page-enter var(--motion) var(--ease-out) backwards;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation: none !important;
  }

  /* The lifts and the rises, named: the hover lifts above, the reveal, the
     hero's entrance and the configurator's step. Not `*` — a transform that
     positions something (rather than moves it) must survive this. */
  [data-reveal],
  [data-reveal="group"] > *,
  .hero--enter .hero__media .image-slot__img,
  .hero--enter .hero__body > *,
  .hero--enter .hero__caption,
  .brief-card:hover,
  .work-card:hover .work-card__media,
  .brands__item:hover,
  .support__launcher:hover,
  .quote__step--enter {
    transform: none !important;
    translate: none !important;
  }

  [data-reveal],
  [data-reveal="group"] > * {
    opacity: 1 !important;
  }
}

/* === Configurator: entry, guide, packages, add-on groups, step motion === */
/* Appended as one block: the gate /quote opens on, the four-question guide
   and its answer, the add-ons step in its three groups, the /packages page,
   and the one motion the configurator has — a step sliding in as it arrives.
   Tokens only, so both themes come for free; transitions stay on colour and
   opacity; the keyframes are quote-* and reduced motion switches them off
   through the rule above. */

/* No running total beside the gate or the guide: nothing is priced yet. */
@media (min-width: 960px) {
  .quote__layout--solo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- The gate: two doors ---------------------------------------------------- */
.quote__gate {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.gate-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label go"
    "spec go";
  gap: 6px 16px;
  align-items: center;
  min-height: 44px;
  padding: 24px;
  text-align: left;
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
  color: var(--console-ink);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.gate-card:hover {
  border-color: var(--console-ink);
}

.gate-card:focus-visible {
  outline: 2px solid var(--console-focus);
  outline-offset: 2px;
}

.gate-card__label {
  grid-area: label;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}

.gate-card__spec {
  grid-area: spec;
  font-size: 15px;
  line-height: 1.55;
  color: var(--console-ink-2);
}

.gate-card__go {
  grid-area: go;
  font-size: 22px;
  line-height: 1;
  color: var(--console-ink-2);
}

.quote__gate-aside {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

.quote__gate-aside a {
  color: var(--console-ink);
  text-decoration: underline;
  text-decoration-color: var(--console-border-strong);
  text-underline-offset: 4px;
}

/* --- Groups inside a step: the guide's questions, the add-ons' three ------- */
.quote__group + .quote__group {
  margin-top: 28px;
}

.quote__group-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--console-ink);
}

.quote__group-sub {
  margin: -6px 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

/* An add-on the package already covers: shown ticked, not a choice. */
.choice--included {
  background: var(--console-subtle);
  cursor: default;
}

.choice--included:hover {
  border-color: var(--console-border);
}

.choice--included .choice__price {
  color: var(--console-ink);
  font-weight: 500;
}

/* An add-on priced after inspection: the words go under the name, not beside it. */
.choice--quoted .choice__top {
  flex-wrap: wrap;
}

.choice--quoted .choice__price {
  flex-basis: 100%;
}

/* Under a figure with a line still to come. */
.quote__partial {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--console-ink-2);
}

/* The guide's answer: why, and what is worth knowing. */
.quote__recommend .quote__group-title + .quote__reasons {
  margin-bottom: 20px;
}

.quote__reasons {
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

.quote__reasons li + li {
  margin-top: 8px;
}

.quote__facts li::marker {
  color: var(--console-ink-3);
}

/* --- The step that arrives ------------------------------------------------- */
@keyframes quote-step {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.quote__step--enter {
  animation: quote-step 180ms var(--ease) both;
}

/* --- /packages --------------------------------------------------------------- */
.packages__pick {
  margin-bottom: 32px;
}

.packages__pick .display {
  margin-top: 8px;
}

.packages__pick-body {
  margin-top: 10px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--console-ink-2);
}

.packages__sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 8px;
}

.packages__sizes-label {
  color: var(--console-ink-2);
}

.packages__sizes .chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.packages__family {
  margin-top: 40px;
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.packages__family-head {
  margin-bottom: 20px;
}

.packages__family-head .lede {
  margin-top: 8px;
}

.packages__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.package {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease);
}

.package:hover {
  border-color: var(--console-border-strong);
}

.package__name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--console-ink);
}

.package__coverage {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--console-ink-2);
}

.package__facts {
  flex: 1;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.55;
  color: var(--console-ink-2);
}

.package__facts li + li {
  margin-top: 6px;
}

.package__facts li::before {
  content: "— ";
  color: var(--console-ink-3);
}

.package__price {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--console-border);
  font-size: 15px;
  line-height: 1.5;
  color: var(--console-ink-2);
}

.package__price strong {
  font-size: 22px;
  font-weight: 500;
  color: var(--console-ink);
  font-variant-numeric: tabular-nums;
}

.package__film,
.package__size {
  font-size: 13px;
}

.package__choose {
  align-self: flex-start;
  margin-top: 16px;
}

.packages__facts {
  max-width: var(--maxw-prose);
  margin-top: 56px;
}

.packages__facts .quote__reasons {
  margin-top: 16px;
}