/* ==========================================================================
   FWX Auto — "Showroom" design system (v2)
   Built from Claude Design artifact 5874f8a5, direction 1A.
   Light, gallery-quiet, Manrope. Fixed 1280px artifact translated into a
   responsive system.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --paper:      #f7f7f8;
  --card:       #ffffff;
  --ink:        #101114;
  --ink-deep:   #0b0c0e;
  --ink-soft:   #202327;
  --body:       #3c3f45;
  --muted:      #5c6068;
  --faint:      #8a8f97;
  --on-dark:    #b9bcc2;
  --on-dark-hi: #f4f4f5;
  --navy:       #1b3a6b;
  --navy-hover: #16305a;
  --cyan:       #4fd2e6;

  --line:       rgba(16, 17, 20, 0.12);
  --line-soft:  rgba(16, 17, 20, 0.06);
  --line-dark:  rgba(255, 255, 255, 0.12);

  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --max: 1280px;
  --gutter: clamp(20px, 3.2vw, 40px);
  --nav-h: 52px;
  --subnav-h: 56px;

  --r-card: 16px;
  --r-pill: 999px;
  --r-sm: 7px;

  --shadow-card: 0 1px 2px rgba(16, 17, 20, 0.06);
  --shadow-lift: 0 18px 40px rgba(16, 17, 20, 0.14);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }   /* no sticky link bar under the nav any more */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Keyboard focus only — mouse and touch see nothing. :where() keeps specificity
   at zero so component styles still win on everything except the ring itself. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 3px;
}
.footer :where(a, button):focus-visible,
.band-dark :where(a, button):focus-visible,
.motion :where(a, button):focus-visible { outline-color: var(--cyan); }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
button { font: inherit; color: inherit; }

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

/* Skip link: off-screen until a keyboard user tabs to it. Without this the
   nav costs 11 focus stops before the first word of content on every page. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
  background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 600;
}
.skip:focus { left: 0; }
main:focus { outline: none; }
.section { padding-block: clamp(56px, 7vw, 84px); }

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* --faint is 3.05:1 on --paper; --muted is 5.89:1 and still reads as quiet */
  color: var(--muted);
}
.eyebrow.on-dark { color: var(--faint); }
.hero-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.h-display {
  font-size: clamp(46px, 9.2vw, 132px);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.h-section {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.h-closing {
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; color: var(--body); }
.prose { font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.6; color: var(--muted); }
.prose + .prose { margin-top: 14px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hover); }
.btn-ghost { border-color: rgba(16, 17, 20, 0.2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark { background: var(--red); color: #fff; }
.btn-dark:hover { background: var(--red-hover); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.link-navy { font-size: 13px; font-weight: 600; color: var(--navy); }

/* ---------- brand logo ----------
   Two client lockups, both trimmed to their ink: the wide one in the nav bar and the
   stacked one (white-on-dark variant) in the footer. Height is set here; width follows. */
.logo-wide { display: block; flex: none; height: 34px; width: auto; }
.logo-stacked { display: block; height: clamp(88px, 8vw, 108px); width: auto; }
@media (max-width: 600px) { .nav .logo-wide { height: 28px; } }

/* ---------- top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(247, 247, 248, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}
.nav .inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav .brand { display: flex; align-items: center; }
.nav .links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); font-size: 13px; font-weight: 500; color: var(--body); }
.nav .links a:hover { color: var(--ink); }
.nav .links a[aria-current="page"],
.nav .links a.in-section { color: var(--ink); }
.nav .right { display: flex; align-items: center; gap: 18px; font-size: 13px; font-weight: 500; }

/* Category services: a full-width row under the bar, opened by hovering or
   focusing the category link. The panel is opaque on purpose: .nav's own
   backdrop-filter makes it the backdrop root, so a blurred child shows the
   hero straight through. */
.nav .has-sub { position: static; display: flex; align-items: center; height: var(--nav-h); }
.nav-sub {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px -20px rgba(16, 17, 20, 0.25);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.nav .has-sub:hover .nav-sub,
.nav .has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
.nav-sub .container { display: flex; align-items: center; gap: 6px; height: 58px; overflow-x: auto; scrollbar-width: none; }
.nav-sub .container::-webkit-scrollbar { display: none; }
.nav-sub .sub-head { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 14px; white-space: nowrap; }
.nav .links .nav-sub a {
  padding: 7px 13px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--body); white-space: nowrap; transition: background .2s ease, color .2s ease;
}
.nav .links .nav-sub a:hover { background: rgba(16, 17, 20, 0.06); color: var(--ink); }
.nav .links .nav-sub a[aria-current="page"] { background: var(--ink); color: #fff; }
.nav .tel { color: var(--body); }
.nav-toggle { display: none; background: none; border: 0; padding: 6px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); margin: 4px 0; transition: transform .25s ease, opacity .2s ease; }
.nav[data-open="true"] .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav[data-open="true"] .nav-toggle span:nth-child(2) { opacity: 0; }
.nav[data-open="true"] .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav .links { display: none; }
  .nav .tel { display: none; }
  .nav-toggle { display: block; }
  .nav .links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    /* Opaque, not translucent: .nav's own backdrop-filter makes it the backdrop
       root, so a blur on this child samples nothing and the hero read through
       the panel behind the menu items. */
    background: var(--paper);
    box-shadow: var(--shadow-lift);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 18px;
    font-size: 17px;
    /* landscape phones: the panel is taller than what is left of the screen */
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav .links.open a { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  /* phone menu: each category with its services indented beneath it */
  .nav .links.open .has-sub { display: block; height: auto; }
  .nav .links.open .has-sub > a { display: block; font-weight: 600; }
  .nav .links.open .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; }
  .nav .links.open .nav-sub::before { display: none; }
  .nav .links.open .nav-sub .container { display: block; height: auto; max-width: none; margin: 0; padding: 4px 0 6px 14px; overflow: visible; }
  .nav .links.open .sub-head { display: none; }
  .nav .links.open .nav-sub a { display: block; padding: 9px 0; border-bottom: 0; border-radius: 0; font-size: 15px; font-weight: 500; }
  .nav .links.open .nav-sub a[aria-current="page"] { background: none; color: var(--ink); font-weight: 600; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(36px, 4.4vw, 56px) 0 clamp(28px, 3.2vw, 40px);
  background: linear-gradient(180deg, #e4e8ec 0%, #eef0f2 54%, var(--paper) 100%);
}
.hero .h-display { position: relative; z-index: 1; margin-top: 10px; font-size: clamp(46px, 9.2vw, 120px); }
/* short hub titles fit the 1200px column on one line at 120px; a longer one ("Custom Bodywork in Denver")
   wraps onto two balanced lines instead of overflowing, as nowrap used to make it */
@media (min-width: 700px) { .hero:not(.svc):not(.project) .h-display { text-wrap: balance; } }
/* hero.h1Stacked: a two-line name ("FWX Auto / Bodyshop and Detailing"), sized so the longer
   second line fits the column: about 11.6em wide, so 6.6vw up to 88px. */
.hero .h-display.is-stacked { font-size: clamp(27px, 6.6vw, 88px); line-height: 0.98; text-wrap: initial; }
/* hero.h1Compact: a longer hub title kept on one line at a smaller size. ~12.6em wide at this
   weight. Tops out at 64px from 1280px wide (Bernard), scales at 5vw below that, floor 22px on phones ("Custom Bodywork Denver, CO" must fit 360px). */
.hero .h-display.is-compact { font-size: clamp(22px, 5vw, 64px); white-space: nowrap; line-height: 1; }
/* pill switcher under the title (hero.switcher): the category highlighted, its services beside it.
   A frosted white track on the gray hero, the current pill in ink with a red dot, and a soft
   white lift on hover. When the row is wider than the screen it scrolls sideways: the cut-off
   edge fades out and a small arrow sits over the fade (classes set by v2.js). */
.seg-wrap { position: relative; z-index: 3; display: inline-block; max-width: 100%; margin-top: clamp(16px, 2vw, 24px); vertical-align: top; }
.seg {
  display: flex; align-items: center; gap: 2px; padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(16, 17, 20, 0.07);
  box-shadow: 0 1px 2px rgba(16, 17, 20, 0.05), 0 10px 28px -14px rgba(16, 17, 20, 0.28);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.seg::-webkit-scrollbar { display: none; }
.seg a {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  color: var(--body); white-space: nowrap;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.seg a:hover { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16, 17, 20, 0.14); transform: translateY(-1px); }
.seg a[aria-current="page"] { background: var(--ink); color: #fff; box-shadow: none; transform: none; }
.seg a[aria-current="page"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.hero .container > .seg-wrap + .hero-car,
.hero.hero-3d .container > .seg-wrap + .hero-model { margin-top: clamp(-52px, -4.2vw, -24px); }   /* tuck the 3D frame's empty headroom up under the pills */

/* scroll hints: whichever edge has more pills beyond it fades out and gets a round arrow */
.seg-wrap.can-right .seg { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.seg-wrap.can-left .seg { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 64px), transparent); }
.seg-wrap.can-left.can-right .seg {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}
.seg-more, .seg-less {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  display: none; place-items: center; width: 28px; height: 28px; padding: 0 0 2px 1px;
  border: 0; border-radius: 50%; background: var(--ink); color: #fff;
  font: 600 18px/1 var(--sans); cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 17, 20, 0.28);
}
.seg-less { right: auto; left: 2px; padding: 0 1px 2px 0; }
.seg-wrap.can-right .seg-more, .seg-wrap.can-left .seg-less { display: grid; }

/* Service-page variant (.has-up): the category pill is the first item in the row, a shade darker,
   with a red back arrow. It scrolls with the services on narrow screens. */
.seg a.seg-up {
  gap: 7px; padding: 9px 16px 9px 13px; margin-right: 2px;
  background: rgba(16, 17, 20, 0.11); color: var(--ink);
}
.seg a.seg-up:hover { background: rgba(16, 17, 20, 0.18); box-shadow: none; transform: none; }
.seg-up > span[aria-hidden] { font-weight: 700; color: var(--red); transform: translateY(-1px); transition: transform .2s ease; }
.seg-up:hover > span[aria-hidden] { transform: translate(-2px, -1px); }
.hero.svc .seg-wrap { margin-bottom: clamp(14px, 1.8vw, 20px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Phones and small tablets: the track runs a little into the page gutters so more of the row shows */
@media (max-width: 880px) {
  .seg-wrap { display: block; margin-inline: -8px; max-width: none; }
}
@media (max-width: 600px) {
  .seg-wrap { margin-top: 12px; }
  .seg { padding: 4px; }
  .seg a { padding: 9px 13px; font-size: 14.5px; }
  .seg a.seg-up { padding: 9px 12px 9px 10px; }
}
@media (prefers-reduced-motion: reduce) { .seg a { transition: none; } .seg a:hover { transform: none; } }
/* slogan under the title (hero.tagline). The car or 3D frame normally tucks up under the title;
   with a slogan in between it starts below the slogan instead. */
.hero-tagline {
  position: relative; z-index: 3; margin: clamp(10px, 1.4vw, 16px) auto 0; max-width: 30ch;
  font-size: clamp(18px, 2.3vw, 27px); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ink); text-wrap: balance;
}
/* hero.taglineLarge: the slogan is the page's big line (home has no name above it). One line
   where 24em fits the column, which caps it near 48px; two balanced lines on phones. */
.hero-tagline.is-display {
  margin-top: clamp(12px, 1.6vw, 20px); max-width: none; white-space: normal;
  font-size: clamp(22px, 3.75vw, 48px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em;
  text-wrap: balance;   /* a long sentence that has to wrap on a phone splits evenly, no orphaned word */
}
@media (min-width: 700px) { .hero-tagline.is-display { white-space: nowrap; } }
/* one line wherever the longest slogan fits (about 24em); phones keep the balanced two lines */
@media (min-width: 560px) { .hero-tagline { max-width: none; white-space: nowrap; } }
.hero .container > .hero-tagline + .hero-car { margin-top: 4px; }
/* the 3D frame has empty headroom above the car, so it tucks up under the slogan to close the gap */
.hero.hero-3d .container > .hero-tagline + .hero-model { margin-top: clamp(-72px, -6vw, -44px); }
.hero-car {
  position: relative; z-index: 2;
  margin: clamp(-44px, -3.4vw, -18px) auto 12px;
  max-width: 900px;
}
.hero-car > img { width: 100%; filter: drop-shadow(0 24px 28px rgba(16, 17, 20, 0.24)); }
.hero-car svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.callout {
  position: absolute;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--cyan);
  background: var(--ink-soft);
  color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.callout:hover { background: var(--ink); transform: translateX(0) scale(1.04); }
.callout.l { right: 102%; }
.callout.r { left: 102%; }
.hero .lede { position: relative; z-index: 3; margin-inline: auto; max-width: 560px; }
.hero-plain .lede { margin-top: 22px; }
.hero .btns { position: relative; z-index: 3; display: flex; justify-content: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }

/* The callout rail collapses into chips under the car on narrow screens.
   Threshold is the container width: the pills hang off the car at 102%, so
   below ~1280px they run past both viewport edges before the car shrinks. */
.callout-list { display: none; }
@media (max-width: 1279px) {
  .hero-car svg, .callout { display: none; }
  .callout-list {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 4px auto 20px; max-width: 620px;
  }
  .callout-list a {
    padding: 6px 12px; border-radius: var(--r-sm);
    border-left: 3px solid var(--cyan); background: var(--ink-soft); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  }
}

/* ---------- 3D hero (model-viewer) ----------
   A turntable model replaces the static cutout on pages whose hero carries a
   model. Pins are anchored to the car's surface by model-viewer and inherit the
   look of the 2D callout pills so the two heroes read as one family.          */
.hero-3d { padding-bottom: clamp(48px, 5vw, 72px); }
.hero-model {
  position: relative; z-index: 2;
  margin: clamp(-40px, -3vw, -20px) auto 0;
  max-width: 980px;
}
.hero-model model-viewer {
  width: 100%;
  /* model-viewer's host styles set an explicit height, and an explicit height
     wins over aspect-ratio. Reset it so the 2:1 box actually applies. */
  height: auto;
  aspect-ratio: 2 / 1;
  min-height: 300px;
  max-height: 490px;
  --poster-color: transparent;
  --progress-bar-color: var(--ink);
  --progress-bar-height: 0px;
  outline: none;
}
/* ---------- 3D hero: loading screen ----------
   Until the model has drawn, the frame carries .is-loading: the still (model-viewer's
   slot="poster") is dimmed and a ring with the download percentage sits in the middle of the
   frame. v2-model.js swaps .is-loading for .is-ready at the hand-over, or .is-failed on error.
   The ring's spin animates transform only, so it keeps turning while the browser is busy
   unpacking the model, which is when the page used to look frozen. */
.hero-model model-viewer { display: block; position: relative; }   /* true before the element is upgraded too */
.mv-poster { position: absolute; inset: 0; display: grid; place-items: center; }
.mv-poster img { width: 100%; height: 100%; object-fit: contain; transition: opacity .4s ease; }
.hero-model.is-loading .mv-poster img,
.hero-model.is-ready .mv-poster img { opacity: .35; }   /* stays dim while it cross-fades to the live car */
.hero-model.is-failed .mv-poster img { opacity: 1; }

.mv-load {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  pointer-events: none; transition: opacity .4s ease;
}
.hero-model.is-ready .mv-load { opacity: 0; }
.hero-model.is-failed .mv-load { display: none; }
.mv-ring { position: relative; display: block; width: 84px; height: 84px; }
.mv-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.mv-ring circle { fill: none; stroke-width: 3; }
.mv-ring .track { stroke: rgba(16, 17, 20, 0.12); }
.mv-ring .bar {
  stroke: var(--ink); stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .3s linear;
}
/* a short red arc that keeps circling, so there is always motion between progress updates */
.mv-ring::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--red);
  animation: mv-spin 1s linear infinite;
}
.mv-pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mv-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--body);
}
@keyframes mv-spin { to { transform: rotate(360deg); } }
/* nothing sits on the still while it loads */
.hero-model.is-loading .pin,
.hero-model.is-loading .hint { opacity: 0; pointer-events: none; }
.hero-model .hint { transition: opacity .4s ease; }

.hero-model .hint {
  position: absolute; left: 4px; bottom: 2px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--faint);
  pointer-events: none;
}
.hero-model .hint svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.hero-model.paused .hint .rot { display: none; }

/* pins — the dot */
.pin {
  --d: 10px;
  display: block; position: relative;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--navy), 0 0 0 6px rgba(27, 58, 107, 0.22);
  text-decoration: none; color: inherit;
  transition: opacity .45s ease, transform .45s ease;
}
.pin::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid var(--navy); opacity: .45;
  animation: pin-pulse 2.4s ease-out infinite;
}
/* pins — the label, styled like .callout */
.pin .label {
  position: absolute; left: calc(var(--d) + 16px); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 6px 10px 6px 9px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--navy);
  background: var(--ink-soft); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.05em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(16, 17, 20, 0.22);
  transition: background .2s ease, transform .2s ease;
}
.pin .label::before {
  content: ""; position: absolute; right: 100%; top: 50%;
  width: 14px; height: 1px; background: var(--navy); opacity: .9;
}
.pin .n { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--on-dark); letter-spacing: 0; }
.pin .arrow { color: var(--on-dark-hi); font-weight: 500; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.pin:hover .label, .pin:focus-visible .label { background: var(--ink); transform: translateY(-50%) translateX(2px); }
.pin:hover .arrow, .pin:focus-visible .arrow { opacity: 1; transform: none; }
.pin:focus-visible { outline: 2px solid var(--navy); outline-offset: 8px; }
.pin.left .label { left: auto; right: calc(var(--d) + 16px); }
.pin.left .label::before { right: auto; left: 100%; }
/* model-viewer drops data-visible when the pin's surface faces away */
.pin:not([data-visible]) { opacity: 0; pointer-events: none; transform: scale(.6); }
@keyframes pin-pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }

.hero-3d .callout-list a { border-left-color: var(--navy); }

/* Unlike the 2D rail, these pins live INSIDE the model's box, so they never
   run off-screen and the chip list is only needed without JavaScript. On a
   phone one label is up at a time, anchored to the bottom of the model frame
   in `.pin-stage`, with a leader line (`.pin-lead`, drawn by v2-model.js)
   from the active dot on the car down to it. The frame gets a band of
   padding under the car for the label to sit in, so it never covers the
   wheels. The label is the tap target, so it is generous. */
.hero-3d .callout-list { display: none; }
.pin-stage,
.pin-lead { display: none; }   /* the SVG is not an HTML element, so the hidden attribute alone does not hide it */
@media (max-width: 760px) {
  .hero-3d .pin .label { display: none; }
  .hero-3d .pin.active { --d: 14px; box-shadow: 0 0 0 4px var(--navy), 0 0 0 9px rgba(27, 58, 107, 0.22); }
  .hero-3d .pin.active::before { inset: -10px; opacity: .6; }
  /* A 16:9 box at phone width is too short for the car: from above, a
     front or rear view is nearly as tall as it is wide, so the bottom of the
     car and its ground shadow were being cut by the canvas edge. Square,
     full-bleed, and the script pulls the camera back a touch on phones. */
  .hero-model model-viewer { aspect-ratio: 1 / 1; min-height: 320px; max-height: 460px; }
  .hero-model .hint { display: none; }
  /* full-bleed frame, with the band under the car that the label sits in.
     At 100% radius the car sits low in the square (the camera is pitched
     down), so the frame tucks up under the title to use that headroom. */
  .hero-3d .hero-model {
    margin: -56px calc(-1 * var(--gutter)) 8px;
    max-width: none;
    padding-bottom: 70px;
  }
  .mv-load { bottom: 70px; }   /* the band under the car is for the label, so keep the ring over the car */
  /* The stills are rendered for the wide desktop frame. In the square phone frame the live car
     is drawn about 1.66 times larger (measured on the Huracan, G 63 and Bentley), so the still
     is scaled to match and the car does not grow at the hand-over. */
  .mv-poster img { transform: scale(1.66); }

  .pin-stage {
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
    z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 0;
    min-height: 52px;
    padding: 13px 20px 13px 16px;
    border-radius: var(--r-sm);
    border-left: 4px solid var(--navy);
    background: var(--ink-soft); color: #fff;
    font-size: 13px; font-weight: 700; line-height: 1.25;
    letter-spacing: 0.05em; text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(16, 17, 20, 0.22);
    max-width: 92%;
  }
  .pin-stage[hidden] { display: none; }
  .pin-stage .n { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--on-dark); letter-spacing: 0; }
  .pin-stage .arrow { color: var(--on-dark-hi); font-weight: 500; }
  .pin-stage.swap { animation: stage-in .6s cubic-bezier(.2,.7,.2,1); }
  .pin-stage.out { animation: stage-out .4s ease-in forwards; }   /* SWAP_OUT_MS in the script covers this plus a beat */

  .pin-lead {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: block; z-index: 1;
    pointer-events: none; overflow: visible;
  }
  .pin-lead[hidden] { display: none; }
  .pin-lead { transition: opacity .6s ease-out; }               /* returns with the label */
  .pin-lead.out { opacity: 0; transition: opacity .4s ease-in; }  /* leaves with it */
  .pin-lead line { stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; opacity: .9; }
  .pin-lead circle { fill: var(--navy); }
}
/* opacity only: the stage is positioned with a transform, so the entrance
   must not touch transform or it fights the centring */
@keyframes stage-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes stage-out { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .mv-ring::after { animation: none; }
  .pin::before { animation: none; }
  .pin, .pin .label { transition: none; }
}

/* ---------- sticky sub-nav ---------- */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 40;
  height: var(--subnav-h);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.subnav .inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.subnav .pills { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; overflow-x: auto; scrollbar-width: none; }
.subnav .pills::-webkit-scrollbar { display: none; }
.subnav .pills a { padding: 7px 13px; border-radius: var(--r-pill); color: var(--body); white-space: nowrap; transition: background .2s ease, color .2s ease; }
.subnav .pills a:hover { background: rgba(16, 17, 20, 0.06); }
.subnav .pills a[aria-current="page"] { background: var(--ink); color: #fff; }
.subnav .aside { font-size: 14px; font-weight: 600; color: var(--navy); white-space: nowrap; }
@media (max-width: 860px) { .subnav .aside { display: none; } }

/* ---------- service card grid ---------- */
.grid-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 36px; flex-wrap: wrap; }
.grid-head h2 { max-width: 560px; }
.grid-head p { margin: 0; max-width: 320px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .svc-grid { grid-template-columns: 1fr; } }

.svc-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  transition: box-shadow .28s ease, transform .28s ease;
}
.svc-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
/* 3:2 frame, the shape of most of the photos (was a fixed 160px strip, about 2.4:1, which cut the top and bottom off) */
.svc-card .media { aspect-ratio: 3 / 2; overflow: hidden; }
.svc-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.svc-card:hover .media img { transform: scale(1.045); }
.svc-card .body { padding: 15px 17px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.svc-card .num { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.svc-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.svc-card p { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.svc-card .go { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--navy); }

.svc-card.prompt {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 18px 17px; background: #eceef0;
  border: 1px dashed rgba(16, 17, 20, 0.18); box-shadow: none;
}
.svc-card.prompt:hover { transform: none; box-shadow: none; }
.svc-card.prompt h3 { margin-bottom: 6px; }
.svc-card.prompt p { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.svc-card.prompt .btn { align-self: flex-start; padding: 12px 22px; font-size: 14px; }

/* ---------- dark band + stats ---------- */
.band-dark { background: var(--ink); color: var(--on-dark-hi); padding-block: clamp(56px, 7vw, 84px); }
.band-dark .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .band-dark .split { grid-template-columns: 1fr; } }
.band-dark h2 { margin-top: 16px; }
.band-dark .prose { color: var(--on-dark); max-width: 460px; margin-top: 22px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); }
.stats .stat { background: var(--ink); padding: 28px 24px; }
.stats .num { font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: -0.03em; }
.stats .lbl { margin-top: 6px; font-size: 14px; color: var(--faint); }

/* ---------- full-bleed motion band ---------- */
/* The band takes its height from the copy rather than forcing one, so long
   paragraphs push it taller instead of being cut off by the overflow clip. */
.motion { position: relative; overflow: hidden; background: var(--ink-deep); }
.motion > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Holds its weight out to ~78%, which is where the copy column ends on the
   narrowest desktop. The old ramp thinned out under the text: white fell to
   2.87:1 and the muted half of the heading to 1.13:1, i.e. invisible. */
.motion .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(8, 9, 11, 0.88) 0%,
    rgba(8, 9, 11, 0.72) 45%,
    rgba(8, 9, 11, 0.45) 78%,
    rgba(8, 9, 11, 0.28) 100%);
}
.motion .copy {
  position: relative;
  min-height: clamp(340px, 34vw, 480px);
  display: flex; flex-direction: column; justify-content: center;
  /* Sits in the same centred content column as the rest of the page (the
     .container defaults), with the text held to a readable measure on the
     left of that column. The scrim keeps that side dark at every width. */
  padding-block: clamp(36px, 4.4vw, 56px);
}
.motion .copy > * { max-width: 620px; }
.motion .eyebrow { color: #fff; }
.motion h2 { margin-top: 14px; color: #fff; }
/* --faint is tuned for a flat dark panel; over a photo it disappears. */
.motion .mute { color: rgba(255, 255, 255, 0.72); }
.motion p { margin-top: 16px; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.55; color: #fff; max-width: 480px; }

/* ---------- testimonial ---------- */
.quote { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--card); }
@media (max-width: 900px) { .quote { grid-template-columns: 1fr; } }
.quote .copy { padding: clamp(44px, 6vw, 76px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.quote .stars { font-size: 15px; letter-spacing: 0.24em; color: var(--navy); }
.quote blockquote { margin-top: 20px; font-size: clamp(21px, 2.4vw, 30px); line-height: 1.32; font-weight: 500; letter-spacing: -0.02em; max-width: 560px; text-wrap: pretty; }
.quote .who { margin-top: 24px; font-size: 15px; color: var(--muted); }
.quote .who strong { color: var(--ink); }
.quote .shot { min-height: 320px; overflow: hidden; }
.quote .shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- FAQ ---------- */
.faq .split { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 4.4vw, 56px); }
@media (max-width: 900px) { .faq .split { grid-template-columns: 1fr; } }
.faq h2 { margin-top: 14px; }
.faq .aside { margin-top: 18px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.faq .aside strong { color: var(--ink); }
.faq .list { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 20px; font-weight: 400; color: var(--faint); transition: transform .2s ease; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 24px; max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- closing CTA ---------- */
.cta-close {
  padding-block: clamp(64px, 8vw, 96px);
  background: linear-gradient(180deg, var(--paper) 0%, #dfe3e8 100%);
  text-align: center;
}
.cta-close h2 { margin-top: 16px; }
.cta-close p { margin: 16px auto 0; max-width: 520px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: var(--body); }
.cta-close .btns { display: flex; justify-content: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.footer {
  background: var(--ink);
  color: var(--on-dark);
  font-size: 13.5px;
  padding-top: clamp(48px, 6vw, 72px);
}
.footer a { color: var(--on-dark); transition: color .18s ease; }
.footer a:hover { color: #fff; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 44px) clamp(40px, 6vw, 96px);
}
.footer-brand { max-width: 320px; }
.footer-logo { display: inline-block; }
.footer-name { margin-top: 18px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.footer-name + .footer-line { margin-top: 8px; }
.footer-line { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--faint); }

/* Services reads as one horizontal row, Shop as a second row beneath it. */
.footer-links { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 36px); }
.footer-row .col-label {
  display: block;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line-dark);
  font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em;
  color: #fff;
}
.footer-row ul {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 2px clamp(18px, 2.4vw, 36px);
}
.footer-row li { line-height: 1.35; }
/* padding, not margin, so each link clears the 24px minimum target size */
.footer-row li a { display: block; padding-block: 4px; }

.footer-contact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(28px, 3.2vw, 38px);
  border-top: 1px solid var(--line-dark);
}
.footer-contact .fc { display: flex; flex-direction: column; gap: 8px; }
.footer-contact .eyebrow { color: var(--faint); }
.footer-contact a,
.footer-contact .fc-strong {
  font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em;
  color: #fff;
}
.footer-contact a { display: inline-block; padding-block: 2px; }
.footer-contact .fc-note { font-size: 12.5px; line-height: 1.45; color: var(--faint); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 48px);
  padding-block: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: 12.5px;
  color: var(--faint);
}
.footer-bottom .fb-note { color: var(--faint); }

/* Below this the brand sits above the link rows rather than beside them. The
   threshold is set by the Services row: it needs ~570px to stay on one line,
   and under 1100px the side-by-side layout stops giving it that. */
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-brand { max-width: 520px; }
  .footer-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .footer-contact { grid-template-columns: 1fr; }
}

/* ---------- generic content blocks (service pages) ---------- */
.rail { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 4.4vw, 56px); }
@media (max-width: 900px) { .rail { grid-template-columns: 1fr; } }
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n { font-family: var(--mono); font-size: 12px; color: var(--faint); padding-top: 4px; }
.step h3 { font-size: clamp(17px, 1.4vw, 19px); font-weight: 700; letter-spacing: -0.02em; }
.step p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--muted); }

.side-figure { margin-top: 32px; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; max-width: 420px; }
.side-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .side-figure { display: none; } }

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

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .svc-card, .svc-card .media img { transition: none; }
}

/* ==========================================================================
   SERVICE PAGE components — from Claude Design artifact 3c9f04c0
   (FWX Ceramic Coating). Shares the Showroom system; adds a breadcrumb hero
   with a before/after comparison, two-tone headings and a red primary CTA.
   ========================================================================== */

/* brand red, used for the service-page primary CTA and sub-nav link */
:root { --red: #e20e0f; --red-hover: #c00c0d; --red-link: #e60707; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-hover); }
.subnav .aside.red { color: var(--red-link); }

/* headline with a muted second sentence */
.mute { color: var(--faint); }

/* service hero: smaller display type than a category page */
.hero.svc .h-display { font-size: clamp(46px, 6vw, 74px); line-height: 0.94; margin-top: 0; }
/* most service titles fit the 1200px column on one line at 74px; the "... in Denver" ones wrap onto two balanced lines */
@media (min-width: 1280px) { .hero.svc .h-display { text-wrap: balance; } }
.hero.svc { padding-top: clamp(24px, 2.6vw, 34px); padding-bottom: 0; }
.hero.svc .lede { margin-top: 18px; max-width: 600px; }
.hero.svc .btns { margin-top: 22px; }
.hero.svc .ba-wrap { margin-top: 28px; }
/* on desktop the photo shrinks with the window height so its bottom edge stays above the fold */
@media (min-width: 900px) { .hero.svc .ba-wrap { max-width: clamp(640px, calc((100vh - 372px) * 16 / 9), 1020px); } }
/* With the service switcher above it the photo sits lower, by an amount that depends on how many
   lines the title takes. v2.js measures where the photo starts and sets --ba-top on the hero, and
   the photo is sized to end 24px above the bottom of the screen (449px is the one-line case). */
@media (min-width: 900px) { .hero.svc .seg-wrap ~ .ba-wrap { max-width: clamp(380px, calc((100vh - var(--ba-top, 425px) - 24px) * 16 / 9), 1020px); } }
/* Short desktop screens (small laptops): a smaller title and a lower floor on the photo, so a
   two-line title, the switcher, the intro, the button and the photo still share the first screen. */
@media (min-width: 900px) and (max-height: 720px) {
  .hero.svc:has(.seg-wrap) .h-display { font-size: clamp(40px, 4.1vw, 56px); }
  .hero.svc .seg-wrap ~ .ba-wrap { max-width: clamp(300px, calc((100vh - var(--ba-top, 425px) - 20px) * 16 / 9), 1020px); margin-top: 20px; }
}

/* breadcrumb */
.crumb {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.crumb a:hover { color: var(--ink); }
.crumb .here { color: var(--ink); }

/* before / after comparison */
.ba-wrap { margin: 36px auto 0; max-width: 1020px; }
.ba {
  position: relative; overflow: hidden;
  border-radius: 18px;   /* was square at the bottom, where it met the link bar (removed 2026-10-08) */
  aspect-ratio: 16 / 9; background: var(--ink-deep);
  cursor: ew-resize; touch-action: none; user-select: none;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba .after-img { transform: scale(1.5); transform-origin: 38% 62%; object-position: 38% 62%; }
.ba .before {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(0 calc(100% - var(--pos, 42%)) 0 0);
}
.ba .before img { transform: scale(1.5); transform-origin: 38% 62%; object-position: 38% 62%;
  filter: saturate(0.5) brightness(0.82) contrast(0.8) blur(1.2px); }
/* compare.zoom: false — a pair already cropped to 16:9 and lined up shows whole, with no 1.5x zoom */
.ba.no-zoom img, .ba.no-zoom .before img { transform: none; object-position: 50% 50%; }
/* a real before photo (compare.before differs from compare.after) shows unfiltered */
.ba.is-real .before img { filter: none; }
.ba-tag {
  position: absolute; bottom: 16px; padding: 6px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.ba-tag.b { left: 16px; background: rgba(11, 12, 14, 0.72); color: #fff; }
.ba-tag.a { right: 16px; background: rgba(255, 255, 255, 0.9); color: var(--ink); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 42%); width: 2px; background: #fff; box-shadow: 0 0 14px rgba(0, 0, 0, 0.4); }
.ba-knob {
  position: absolute; top: 50%; left: var(--pos, 42%); transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: var(--r-pill); background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.ba-caption { padding-top: 10px; font-size: 13px; color: var(--muted); }

/* "what's included" — text cards, no imagery */
.plain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.plain-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 22px 26px; background: var(--card);
  border: 1px solid rgba(16, 17, 20, 0.07); border-radius: var(--r-card);
}
.plain-card .num { font-size: 12px; font-weight: 700; color: var(--muted); }
.plain-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.plain-card p { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* dash list */
.dash-list { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; font-size: 16px; color: var(--ink); }
.dash-list div { display: flex; gap: 12px; }
.dash-list .d { color: var(--navy); font-weight: 700; }

/* two-column split with a supporting image (certified band) */
.split-img { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.split-img .shot { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.split-img .shot img { width: 100%; height: 100%; object-fit: cover; }

/* three-up testimonials */
.quotes-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.quotes-3 .q { display: flex; flex-direction: column; gap: 14px; }
.quotes-3 .stars { font-size: 14px; letter-spacing: 0.22em; color: var(--navy); }
.quotes-3 blockquote { font-size: 18px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }
.quotes-3 .who { font-size: 14px; color: var(--muted); }
.quotes-3 .who strong { color: var(--ink); }

/* ---------- CMS project gallery (gallery.html) ---------- */
/* Blocks of five: a 2x2 feature tile beside four singles, alternating sides. */
.project-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(170px, 15.5vw, 230px); grid-auto-flow: dense; gap: 14px;
}
.project-tile {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: var(--r-card); background: var(--ink-soft); color: #fff;
}
.project-tile.is-feature { grid-column: span 2; grid-row: span 2; }
.project-tile.is-feature.is-right { grid-column: 3 / span 2; }
.project-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.project-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 12, 14, 0) 40%, rgba(11, 12, 14, 0.84) 100%);
}
.project-tile:hover img { transform: scale(1.045); }
.project-tile:focus-visible { border-radius: var(--r-card); outline-offset: 4px; }
.project-tile .copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 17px;
}
.project-tile .meta { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.project-tile .title { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.project-tile.is-feature .copy { gap: 7px; padding: 22px 24px 24px; }
.project-tile.is-feature .title { font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.025em; }
@media (max-width: 1000px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 28vw, 250px); }
  .project-tile.is-feature, .project-tile.is-feature.is-right { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .project-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .project-tile, .project-tile.is-feature, .project-tile.is-feature.is-right { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
}
/* gallery.html has no hero: the grid's head carries the page h1, on the project pages' title scale */
.section.page-head { padding-top: clamp(40px, 5vw, 64px); }
.page-head .grid-head { row-gap: 16px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.page-head .h-display { max-width: 12ch; font-size: clamp(38px, 6vw, 76px); line-height: 0.98; text-wrap: pretty; }

/* ---------- CMS project page (/projects/<slug>/) ---------- */
.hero.project { padding-bottom: 0; }
.hero.project .h-display { margin: 14px auto 0; max-width: 17ch; font-size: clamp(38px, 6vw, 76px); line-height: 0.98; text-wrap: balance; }
.hero.project .lede { margin-top: 16px; }
.project-cover { margin-top: clamp(26px, 3.4vw, 40px); overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--ink-soft); }
.project-cover img { width: 100%; height: 100%; object-fit: cover; }
.project-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.project-writeup .rich { margin-top: 18px; max-width: 640px; }
.project-writeup .rich p, .project-writeup .rich li { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; color: var(--body); }
.project-writeup .rich p + p, .project-writeup .rich ul, .project-writeup .rich ol { margin-top: 14px; }
.project-writeup .rich ul, .project-writeup .rich ol { padding-left: 1.2em; }
.project-writeup .rich a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
/* the aside is the booking button alone: the vehicle and service are already in the page header */
.project-facts { display: flex; }
.project-facts .btn { align-self: flex-start; margin-top: 6px; }
.project-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.project-photos figure { overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--r-card); background: var(--ink-soft); }
.project-photos figure.is-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.project-photos img { width: 100%; height: 100%; object-fit: cover; }
.project-nav { padding-top: 0; }
.project-nav-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
.project-nav-row .prev, .project-nav-row .next { display: flex; flex-direction: column; gap: 6px; }
.project-nav-row .next { align-items: flex-end; text-align: right; }
.project-nav-row .t { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.project-nav-row a.prev:hover .t, .project-nav-row a.next:hover .t { color: var(--navy); }
@media (max-width: 900px) { .project-body { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .project-photos { grid-template-columns: 1fr; }
  .project-photos figure.is-wide { aspect-ratio: 3 / 2; }
  .project-nav-row { grid-template-columns: 1fr 1fr; }
  .project-nav-row .all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .project-tile img { transition: none; } }
.ba-wrap.single { margin-bottom: 0; }
.ba-wrap.single img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; background: var(--ink-deep); }

/* ---------- contact page: calendar placeholder, form, phone + email ---------- */
.contact-book { padding-top: clamp(28px, 3.4vw, 44px); }
.contact-3 { display: grid; grid-template-columns: 1.05fr 1.25fr 0.8fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .contact-3 { grid-template-columns: 1fr 1fr; } .contact-3 .c-reach { grid-column: 1 / -1; } }
@media (max-width: 620px)  { .contact-3 { grid-template-columns: 1fr; } }
.c-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card); padding: clamp(22px, 2.4vw, 30px); }
.c-title { font-size: clamp(21px, 1.9vw, 26px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.c-lede { font-size: 15px; line-height: 1.5; color: var(--muted); }
.c-panel .btn { margin-top: 6px; }
.c-email { font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; word-break: break-all; }
.c-email:hover { color: var(--red); }
.c-note { font-size: 14px; line-height: 1.5; color: var(--muted); }
/* calendar placeholder: a real month, no interaction until booking is wired up */
.cal { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--paper); }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cal-month { white-space: nowrap; }
.cal-month { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.cal-soon { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.cal-days, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-days span { font-family: var(--mono); font-size: 10.5px; color: var(--faint); padding-bottom: 4px; }
.cal-grid span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line-soft); }
.cal-grid .past, .cal-grid .closed { color: var(--faint); background: transparent; border-color: transparent; font-weight: 500; }
.cal-grid .today { outline: 2px solid var(--red); outline-offset: -2px; }
.cal-grid .pad { background: transparent; border: 0; }
/* form */
.c-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.c-form .hp { position: absolute; left: -9999px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--body); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-weight: 500; font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--red); outline-offset: 0; border-color: transparent; }
.c-form .btn { align-self: flex-start; }

/* contact page, below the booking calendar: message form + phone/email */
.contact-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .contact-2 { grid-template-columns: 1fr; } }

/* ---------- booking calendar (contact page; assets/v2-booking.js) ---------- */
.booking { padding-top: clamp(28px, 3.4vw, 44px); padding-bottom: 0; }
.bk { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card); padding: clamp(20px, 3vw, 40px); }
.bk-head { margin-bottom: clamp(18px, 2.4vw, 28px); max-width: 640px; }
.bk-head h2 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.bk-head p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.bk-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (max-width: 860px) { .bk-form { grid-template-columns: 1fr; } }
.bk-form .hp { position: absolute; left: -9999px; }
.bk-when, .bk-who { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bk-step { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); margin-top: 4px; }
.bk-step > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 13px; flex: none; }
.bk-tz { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.bk-cal .cal-head { flex-wrap: nowrap; }
.bk-nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.bk-nav:hover:not(:disabled) { border-color: var(--ink); }
.bk-nav:disabled { opacity: .3; cursor: default; }
.bk-cal .cal-grid button { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font: 700 14px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); cursor: pointer; padding: 0; }
.bk-cal .cal-grid button:hover { border-color: var(--ink); }
.bk-cal .cal-grid .picked { background: var(--ink); color: #fff; border-color: var(--ink); }
.bk-cal .cal-grid[aria-busy] { opacity: .5; }
.bk-day { font-weight: 700; font-size: 15px; color: var(--ink); }
.bk-group { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bk-group-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.bk-slots button { font: 600 14px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 6px; cursor: pointer; }
.bk-slots button:hover { border-color: var(--ink); }
.bk-slots .picked { background: var(--red); border-color: var(--red); color: #fff; }
.bk-hint { font-size: 14px; color: var(--muted); }
.bk-note { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.field em { font-style: normal; font-weight: 500; color: var(--faint); }
.bk-sources { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.bk-sources legend { font-size: 13px; font-weight: 600; color: var(--body); margin-bottom: 8px; padding: 0; }
.bk-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bk-check { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; }
.bk-check input { width: 17px; height: 17px; accent-color: var(--red); margin: 0; }
.bk-extra { flex-basis: 100%; }
.bk-extra[hidden] { display: none; }
.bk-summary { font-size: 15px; font-weight: 600; color: var(--muted); padding: 12px 14px; border-radius: 10px; background: var(--paper); border: 1px dashed var(--line); }
.bk-summary.set { color: var(--ink); border-style: solid; }
.bk-who .btn { align-self: flex-start; }
.bk-error { font-size: 13px; font-weight: 600; color: var(--red); margin-top: -6px; }
.bk-error:empty { display: none; }
.field-row .bk-error { margin-top: 6px; }
.bk-done { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; color: var(--body); outline: none; }
.bk-done[hidden] { display: none; }
.bk-done-when { font-weight: 700; color: var(--ink); font-size: 18px; }
.bk-noscript { margin-top: 12px; font-weight: 600; }
@media (max-width: 480px) { .bk-slots { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Scratch repair decision tree
   Replaces the four-card .plain-grid in #included on
   /auto-detailing/scratch-repair-removal/. Append to /assets/v2.css.
   Uses the Showroom tokens (--card, --muted, --navy, --r-card, --mono).
   ========================================================================== */

.scratch-tree {
  --st-a:      #0d7382;                   /* clearcoat path, deep cyan (5.5:1 on white) */
  --st-a-tint: rgba(13, 115, 130, 0.07);
  --st-a-edge: rgba(13, 115, 130, 0.30);
  --st-b:      var(--navy);               /* paint path */
  --st-b-tint: rgba(27, 58, 107, 0.06);
  --st-b-edge: rgba(27, 58, 107, 0.26);
  --st-trunk:  rgba(16, 17, 20, 0.20);
  --st-w:      2px;                       /* line weight */
  --st-link:   28px;                      /* vertical connector length */
  --st-gap:    24px;                      /* column gap */
  --st-radius: 14px;                      /* elbow radius */
  position: relative;
}

/* ---------- cards (same build as .plain-card) ---------- */
.st-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 22px 26px;
  background: var(--card);
  border: 1px solid rgba(16, 17, 20, 0.07);
  border-radius: var(--r-card);
}
.st-num { font-size: 12px; font-weight: 700; color: var(--muted); }
.st-card h3,
.st-card h4 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.st-card p { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---------- root ---------- */
.st-root { display: flex; justify-content: center; }
.st-card--root { max-width: 560px; box-shadow: 0 10px 28px rgba(16, 17, 20, 0.07); }
.st-card--root .st-num { color: var(--ink); }

.st-trunk { position: relative; height: var(--st-link); }
.st-trunk::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(50% - var(--st-w) / 2); width: var(--st-w);
  background: var(--st-trunk);
}

/* ---------- the fork ---------- */
.st-branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--st-gap);
  padding-top: var(--st-link);
}
/* two rounded elbows run from the trunk out to the centre of each column */
.st-branches::before,
.st-branches::after {
  content: ""; position: absolute; top: 0;
  width: calc(25% + var(--st-gap) / 4 + var(--st-w) / 2);
  height: var(--st-link);
  border-top: var(--st-w) solid;
  pointer-events: none;
}
.st-branches::before {
  left: calc((100% - var(--st-gap)) / 4 - var(--st-w) / 2);
  border-left: var(--st-w) solid;
  border-color: var(--st-a);
  border-top-left-radius: var(--st-radius);
}
.st-branches::after {
  right: calc((100% - var(--st-gap)) / 4 - var(--st-w) / 2);
  border-right: var(--st-w) solid;
  border-color: var(--st-b);
  border-top-right-radius: var(--st-radius);
}

/* ---------- a branch ---------- */
.st-branch {
  --c: var(--st-a); --tint: var(--st-a-tint); --edge: var(--st-a-edge);
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  grid-column: 1; grid-row: 1;
}
.st-branch--b {
  --c: var(--st-b); --tint: var(--st-b-tint); --edge: var(--st-b-edge);
  grid-column: 2; grid-row: 1 / span 2;
}
.st-branch .st-num { color: var(--c); }

/* connector above every node after the first */
.st-branch > * + * { margin-top: var(--st-link); }
.st-branch > * + *::before {
  content: ""; position: absolute;
  top: calc(-1 * var(--st-link) - 1px); height: var(--st-link);
  left: calc(50% - var(--st-w) / 2); width: var(--st-w);
  background: var(--c);
}

/* decision node: where the assessment sends the car */
.st-decision {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 16px 28px 18px;
  background: linear-gradient(var(--tint), var(--tint)), var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--st-radius);
  text-align: center;
}
.st-if {
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c);
}
.st-decision h3 { margin-top: 4px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }

/* end cap */
.st-end {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px 12px 16px;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--c);
}
.st-end svg { width: 20px; height: 20px; flex: none; }

/* fingernail note, parked in the space under the short branch */
.st-note {
  grid-column: 1; grid-row: 2;
  align-self: start; justify-self: center;
  width: 100%; max-width: 520px;
  margin-top: 44px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px 22px;
  border: 1px dashed rgba(16, 17, 20, 0.18);
  border-radius: var(--r-card);
}
.st-note h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.st-note p { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---------- phones: keep the fork side by side, just tighter ----------
   Two columns of ~165px at 375px wide. Cards drop to a compact scale; the
   percentage-based elbows and connectors need no change. */
@media (max-width: 760px) {
  .scratch-tree { --st-gap: 12px; --st-link: 22px; --st-radius: 10px; }
  .st-root { display: block; }
  .st-card--root { max-width: none; padding: 18px 16px 20px; }
  .st-card--root h3 { font-size: 17px; }
  .st-card--root p { font-size: 13.5px; }

  .st-card { padding: 14px 12px 16px; gap: 6px; }
  .st-card h3, .st-card h4 { font-size: 15px; line-height: 1.2; }
  .st-card p { font-size: 12.5px; line-height: 1.45; }
  .st-num { font-size: 11px; }

  .st-decision { padding: 12px 10px 13px; gap: 2px; }
  .st-if { font-size: 10px; letter-spacing: 0.06em; line-height: 1.3; }
  .st-decision h3 { font-size: 15px; margin-top: 3px; }

  .st-end { padding: 8px 14px 8px 11px; gap: 7px; font-size: 13px; }
  .st-end svg { width: 16px; height: 16px; }

  .st-note { margin-top: 24px; padding: 16px 14px 18px; }
  .st-note h3 { font-size: 15px; }
  .st-note p { font-size: 12.5px; }
}