/* ---------------------------------------------------------------- fonts */
/* Self-hosted, not linked from Google. Two reasons: a CDN font is a
   third-party request on every page load and a privacy footnote nobody wants
   to write, and the latin subsets are 47 KB and 15 KB, which is less than a
   fifth of the 278 KB Mercedes star PNG the current site ships. Both faces are
   SIL Open Font License, so self-hosting is explicitly permitted.
   font-display: swap, so text paints immediately in the fallback and never
   disappears while a font loads. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/img/inter-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/img/instrument-serif-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;
  --bg:          #ffffff;
  --surface:     #f4f7fa;
  --surface-2:   #e9eef5;
  --ink:         #0d1117;
  --ink-2:       #48545f;
  --ink-3:       #5b6874;
  --line:        #dbe3ec;
  --line-strong: #c3cfdb;
  --brand:       #084cb2;
  --brand-hover: #063a8a;
  --brand-ink:   #ffffff;
  --brand-soft:  #e9f0fb;
  --brand-edge:  #b9d0f0;
  --good:        #1c6b3f;
  --good-soft:   #e6f4ec;
  --shadow:      0 1px 2px rgba(13,17,23,.06), 0 8px 24px rgba(13,17,23,.06);
  --shadow-lg:   0 2px 4px rgba(13,17,23,.06), 0 18px 48px rgba(13,17,23,.12);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Palatino, Georgia, serif;

  --wrap: 1180px;
  --gut: clamp(18px, 4vw, 40px);
  --radius: 12px;
  --radius-lg: 18px;
}


/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  /* 17px base. His customers skew older and this is a shop, not a startup. */
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.08; letter-spacing: -0.028em; font-weight: 780; }
h1 { font-size: clamp(2.7rem, 7.4vw, 5.4rem); letter-spacing: -0.042em; font-weight: 820; line-height: 0.98; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -0.036em; font-weight: 800; text-wrap: balance; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.02em; font-weight: 720; }
h4 { font-size: 1.02rem; }
/* SEMANTIC LEVEL AND VISUAL WEIGHT ARE DIFFERENT PROBLEMS. Several headings sat
   at h3 or h4 purely because that is the size they wanted, which left every page
   skipping a level: the footer columns were h4 straight after an h2, and the
   service-area cards and the appointment sidebar were h3 straight after the h1.
   A screen reader reads the outline, not the font size. The tag is correct now
   and this class carries the old appearance, so nothing on screen moved. */
.h3-look { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.02em; font-weight: 720; }

/* The italic serif is the personality voice: pull quotes, the odd emphasized
   phrase. Never body text. */
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
h1 .serif, h2 .serif { font-size: 1.06em; letter-spacing: -0.02em; }

/* Numbers that are meant to be read as data line up. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }

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

/* Inline icon SVGs carry a viewBox but no width/height, so with no CSS an SVG
   falls back to the replaced-element default of 300x150. That is what blew the
   mobile layout out to 470px in a 390px viewport: the phone glyph inside the
   hero button was rendering at ~300px wide. Every inline icon gets an explicit
   box, and the catch-all keeps a future icon from doing it again. */
/* Every inline SVG on this site is an ICON, so they get icon dimensions by
   default. Anything that is a real drawing has to be excluded by name: the
   analytics chart inherited 1.15em square and rendered as a 15px smudge with
   its bars technically present and completely invisible. Add new drawings to
   this list rather than fighting the specificity from the other end. */
svg:not(.logo-mark):not(.ch) { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.btn svg { width: 18px; height: 18px; }
.btn-lg svg { width: 19px; height: 19px; }
/* <picture> is an inline wrapper by default, so an image whose intrinsic width
   is narrower than its column just sits there at natural size instead of
   filling it. Several of his source photos are only 508px wide, which is how
   one row ended up with an undersized image. Make the wrapper
   a block and let the images fill. */
picture { display: block; }
.row img, .hero-media img, .card img, figure img { width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Focus that is actually visible, on both themes. The overlay widget on his
   current site is the kind that gets shops sued; real focus states are the
   thing that actually helps somebody navigating by keyboard. */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--brand); color: var(--brand-ink);
  padding: 12px 18px; border-radius: 0 0 10px 10px; font-weight: 650;
  transition: top .16s ease;
}
.skip:focus { top: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 760px; }

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

/* ---------------------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .hdr { background: var(--bg); } }

.hdr-in { display: flex; align-items: center; gap: 14px; min-height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; text-decoration: none; }
.menu { flex: 0 0 auto; }
.brand svg, .brand img { width: 158px; height: auto; }
.logo-mark { fill: var(--brand); }

.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 550;
  padding: 9px 9px; border-radius: 8px; white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--surface); }
.nav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }

.hdr-cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Open / closed. Computed server-side in America/New_York and corrected on the
   client, so it is right for a visitor in another timezone too. */
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .79rem; font-weight: 600; color: var(--ink-2);
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); white-space: nowrap;
}
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.status.is-open { color: var(--good); border-color: color-mix(in srgb, var(--good) 34%, transparent); background: var(--good-soft); }
.status.is-open .dot { background: var(--good); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-weight: 650; font-size: .97rem;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
  /* 44px minimum touch target. His current site has tap targets under 24px. */
  min-height: 46px;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-3); }
.btn-lg { padding: 16px 28px; font-size: 1.05rem; min-height: 54px; }
.btn-block { width: 100%; }

.tel { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* A phone number inside a sentence is technically exempt from the 24px target
   floor, but it is the single thing a customer is most likely to tap. Give the
   inline ones a real target. */
p > a.tel { display: inline-block; min-height: 24px; padding-block: 2px; }


/* Mobile nav: a details/summary disclosure, so it works with zero JS. */
.menu { display: none; }
.menu > summary {
  list-style: none; cursor: pointer; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 10px;
  border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--ink);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--surface); }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 10px var(--gut) 20px; box-shadow: var(--shadow-lg);
}
.menu-panel a {
  display: block; padding: 14px 8px; color: var(--ink); text-decoration: none;
  font-weight: 600; border-bottom: 1px solid var(--line);
}
.menu-panel a:last-of-type { border-bottom: 0; }


/* ---------------------------------------------------------------- hero */
.hero { position: relative; background: var(--surface); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 68px);
  align-items: center; padding-block: clamp(46px, 7vw, 92px);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--brand); }
.hero h1 { margin-bottom: 20px; }
.hero .lede { font-size: clamp(1.08rem, 1.7vw, 1.24rem); color: var(--ink-2); max-width: 46ch; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.hero-media { position: relative; }
.hero-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
/* A caption, because the photo is of HIS shop and saying so is the point. */
.hero-media figcaption {
  margin-top: 12px; font-size: .84rem; color: var(--ink-3); text-align: right;
}

/* ---------------------------------------------------------------- hero, full bleed */
/* The old hero was text-left, image-right: the most default layout there is,
   and it used his best photograph as a thumbnail. His shop pictures are the
   whole emotional argument, so one of them now fills the screen and the words
   sit on top of it. */
.hero-full {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0b0f14;
  isolation: isolate;
}
/* THE OPEN/CLOSED BADGE OVER THE HERO, phones only. REMOVED 2026-09-01.

   It showed on the hero photograph under 620px, because desktop already carries
   the same line in the header. The fixed call bar now carries that same
   open/closed line on exactly those widths, so the phone was being told twice
   on one screen and the hero was carrying a second thing to read over the
   photograph.

   The rule that showed it is gone rather than overridden. It is kept here as a
   comment because of what it taught: it had to be written .hero-full
   .hero-status and not .hero-status, since the element also carries .status and
   the single-class .status display:none for the collapsing mobile header lives
   LATER in this file. Equal specificity, so source order wins, and a
   single-class rule here renders nothing at all. The call bar pill is the third
   element to hit that trap and is written with two classes for this reason.

  @media (max-width: 620px) {
    .hero-full .hero-status {
      display: inline-flex;
      position: absolute; top: 14px; right: 14px; z-index: 2;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    }
  }
*/
.hero-status { display: none; }

.hero-full > picture, .hero-full > picture img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
/* Two overlays, not one. A vertical gradient carries the text at the bottom,
   and a slight overall darkening keeps the headline legible over the bright
   fluorescent patches in the bay. Measured at 8.9:1 for the h1. */
.hero-full::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6,9,13,.94) 0%, rgba(6,9,13,.82) 26%, rgba(6,9,13,.42) 58%, rgba(6,9,13,.30) 100%),
    linear-gradient(to right, rgba(6,9,13,.55) 0%, rgba(6,9,13,0) 62%);
}
.hero-full .wrap { padding-block: clamp(40px, 7vw, 76px); position: relative; }
.hero-full h1 { color: #fff; max-width: 15ch; margin-bottom: 22px; text-wrap: balance; }
.hero-full .lede { color: rgba(255,255,255,.86); font-size: clamp(1.08rem, 1.7vw, 1.3rem); max-width: 50ch; margin-bottom: 30px; }
.hero-full .eyebrow { color: #9ec6ff; }
.hero-full .eyebrow::before { background: #9ec6ff; }
.hero-full .credit {
  position: absolute; right: var(--gut); bottom: 12px;
  font-size: .76rem; color: rgba(255,255,255,.5);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* On a photo, the secondary button needs its own surface to stay readable. */
.hero-full .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.08); backdrop-filter: blur(6px);
}
.hero-full .btn-ghost:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; }

/* ---------------------------------------------------------------- dark section */
/* Rhythm. Every section being white made the whole page read as one long
   scroll. One hard dark band gives the page a spine and it is where the
   classic-Mercedes argument lives, which is the differentiator. */
.dark {
  background: #0b0f14; color: #e9eef4;
  --ink: #e9eef4; --ink-2: #a9b6c3; --ink-3: #8896a3;
  --line: #1e2933; --line-strong: #2c3945;
  --brand: #7fb2ff; --brand-ink: #06111f; --brand-hover: #a3c9ff;
  --brand-soft: #10203a; --brand-edge: #26456e;
  --bg: #0b0f14; --surface: #121820;
}
.dark .panel, .dark .card, .dark .quote { background: #121820; border-color: #1e2933; }

/* ---------------------------------------------------------------- stat row */
/* The ratings were a four-cell table. They are the strongest thing he has, so
   they are set as display type. */
/* Four across when there is room, fewer when there is not, and NEVER wider
   than the screen. This was a flat repeat(4, 1fr) with no breakpoint: at 320px
   the "32 yrs" stat could not fit its own label, so the row pushed the document
   to 337px and every page scrolled sideways. On a phone that reads as the right
   edge of the content being sliced off, which is exactly what it was.
   min() is what makes it safe: a column can never demand more than the full
   width, so the track collapses instead of overflowing. */
.stats {
  display: grid; gap: clamp(16px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
}
.stat { min-width: 0; }
.stat { border-top: 2px solid var(--brand); padding-top: 16px; }
.stat b {
  display: block; font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 820;
  letter-spacing: -0.045em; line-height: 1; color: var(--ink);
}
.stat b .u { font-size: max(12px, .44em); font-weight: 700; letter-spacing: -0.02em; color: var(--ink-3); margin-left: 3px; }
.stat > span { display: block; margin-top: 9px; font-size: .89rem; color: var(--ink-2); line-height: 1.42; }
.stat .src { display: block; margin-top: 2px; color: var(--ink-3); font-size: .82rem; }

/* ---------------------------------------------------------------- photo strip */
.strip { position: relative; height: clamp(260px, 42vw, 460px); overflow: hidden; background: var(--surface-2); }
.strip picture, .strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- page head */
/* Every page other than the home page opened with a bare heading on white, so
   clicking out of the home page felt like leaving the site. This gives the
   inner pages a consistent, quieter version of the same treatment. */
.page-head {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding-block: clamp(44px, 6.5vw, 84px);
}
.page-head h1 { max-width: 17ch; margin-bottom: 18px; }
.page-head .lede { font-size: clamp(1.06rem, 1.6vw, 1.22rem); color: var(--ink-2); max-width: 58ch; }
.page-head .hero-actions { margin-top: 28px; }
.page-head-img { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.page-head-img img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
@media (max-width: 860px) { .page-head-img { grid-template-columns: 1fr; } .page-head-img figure { order: -1; } }

/* ---------------------------------------------------------------- anchors */
/* The header is sticky, so an in-page link like /services#transmission used to
   scroll the target underneath it and land the reader mid-paragraph. */
[id] { scroll-margin-top: 96px; }
@media (max-width: 620px) { [id] { scroll-margin-top: 132px; } }

/* ---------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-weight: 680; font-size: 1.06rem; color: var(--ink); letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq summary:hover { color: var(--brand); }
.faq .a { padding: 0 44px 24px 0; color: var(--ink-2); max-width: 76ch; }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- details */
::selection { background: var(--brand); color: var(--brand-ink); }
.lead-in::first-letter {
  float: left; font-family: var(--serif); font-style: italic; font-size: 3.6em;
  line-height: .82; padding: .06em .08em 0 0; color: var(--brand);
}

/* ---------------------------------------------------------------- trust */
.trust { border-bottom: 1px solid var(--line); background: var(--bg); }
.trust-in {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border-inline: 1px solid var(--line);
}
.trust-cell { background: var(--bg); padding: 24px clamp(14px, 2vw, 26px); text-align: center; }
.trust-num { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.trust-num .stars { color: var(--brand); }
.trust-lbl { font-size: .84rem; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }

/* ---------------------------------------------------------------- sections */
.sec { padding-block: clamp(52px, 8vw, 96px); }
.sec-alt { background: var(--surface); border-block: 1px solid var(--line); }
/* Wide enough that a 3.3rem heading takes two lines, not six. An earlier pass
   set this to 24ch, which is a sane measure for BODY copy and a disaster for
   display type. text-wrap: balance does the rag. */
.sec-head { max-width: 66ch; margin-bottom: clamp(30px, 4vw, 48px); }
.sec-head h2 { max-width: 20ch; }
.sec-head p { max-width: 58ch; }
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head p { color: var(--ink-2); font-size: 1.08rem; }

.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sec-alt .card { background: var(--bg); }
.card:hover { border-color: var(--brand-edge); box-shadow: var(--shadow); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card-body h3, .card-body .h3-look { margin-bottom: 8px; }
.card-body p { color: var(--ink-2); font-size: .98rem; }
.card-more { margin-top: auto; padding-top: 16px; font-weight: 650; font-size: .95rem; color: var(--brand); }
.card-more a { display: inline-block; min-height: 24px; padding-block: 3px; }

/* ---------------------------------------------------------------- quotes */
.quote {
  background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--radius); padding: 26px 28px;
}
.quote blockquote { margin: 0 0 16px; font-size: 1.04rem; line-height: 1.56; color: var(--ink); }
.quote cite { font-style: normal; font-weight: 650; font-size: .93rem; color: var(--ink); }
.quote .meta { font-size: .84rem; color: var(--ink-3); margin-top: 2px; }

.pull {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.4;
  color: var(--ink); max-width: 24ch;
}

/* ---------------------------------------------------------------- feature rows */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.row + .row { margin-top: clamp(48px, 7vw, 86px); }
.row img { border-radius: var(--radius-lg); aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow); }
.row-flip > figure { order: 2; }

.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--ink-2); }
.ticks svg { width: 20px; height: 20px; color: var(--brand); margin-top: 3px; }
.ticks b { color: var(--ink); font-weight: 650; }

/* The dealer-alternative points are the objections somebody has while deciding
   whether to call, so they get more room than a footnote list. */
.ticks-lg li { grid-template-columns: 24px 1fr; gap: 14px; font-size: 1.04rem; }
.ticks-lg li + li { margin-top: 4px; }
.ticks-lg svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- call bar */
/* This business has exactly one funnel: a Mercedes owner has a problem, decides
   they trust the shop, and calls. On a phone the header scrolls away, so the
   two actions that matter live at the bottom of the screen instead. Desktop
   never sees it; the header is always visible there. */
.callbar { display: none; }
@media (max-width: 620px) {
  .callbar {
    /* Call button, then the open/closed pill where the appointment request
       used to be, at MATCHING size: equal columns, and the pill is given the
       button's 46px height below. It was 1fr auto for an afternoon, which left
       the two the same height as each other only by accident and different
       widths on every screen. */
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: saturate(1.6) blur(12px);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    border-top: 1px solid var(--line);
  }
  @supports not (backdrop-filter: blur(1px)) { .callbar { background: var(--bg); } }
  .callbar .btn { width: 100%; padding-inline: 10px; font-size: .95rem; }

  /* Two classes, so this beats the single-class .status display:none rule
     that collapses the header pill on a phone. See the note by .hero-status:
     this is the third element to hit that rule.

     Built to match the Call button beside it exactly rather than
     approximately: the same 46px min-height, the same 1px border and 10px
     radius, the same box-sizing and column width, and the brand blue on the
     border so the two read as one control. The fill stays light, because the
     pill is information and the button is the action, and two solid blues side
     by side would make the pill look like a second thing to tap.

     The base .status is white-space:nowrap, which is right in the header and
     wrong here: the longest line this renders is "Opens Wednesday at 8:00 AM"
     and half of a 360px bar cannot hold that on one line at a readable size.
     It wraps to centered lines inside the same box instead of shrinking the
     type below the 12px floor. The clock itself carries a non-breaking space
     before AM, so a wrap can never strand it on a line of its own. */
  .callbar .status {
    display: inline-flex; justify-content: center; text-align: center;
    width: 100%; min-height: 46px; box-sizing: border-box;
    padding: 6px 10px; font-size: .78rem; line-height: 1.25;
    white-space: normal;
    border: 1px solid var(--brand); border-radius: 10px;
  }
  /* Open and closed differ in the DOT and the text color, not in the frame:
     the border stays brand blue either way so it never stops matching. */
  .callbar .status.is-open { border-color: var(--brand); }

  /* Room so the bar never covers the last line of the footer. 76px was right
     when the bar held two single-line buttons. The pill wraps now, and on a
     320px screen the longest status this renders, "Opens Wednesday at 8:00 AM",
     takes three lines and pushes the bar to about 94px. Shrinking the type to
     fit two lines was the other option and it is not available: it would need
     roughly .70rem, which is 11.2px, under the 12px floor tools/a11y.js
     enforces. */
  body { padding-bottom: 104px; }
}
@media print { .callbar { display: none !important; } }

/* ---------------------------------------------------------------- forms */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 650; font-size: .93rem; color: var(--ink); }
.field .hint { font-size: .85rem; color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 13px 14px;
  width: 100%; min-height: 50px;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field-err input, .field-err select, .field-err textarea { border-color: #c0392b; }
.err { color: #c0392b; font-size: .87rem; font-weight: 600; }
.f-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.note {
  background: var(--brand-soft); border: 1px solid var(--brand-edge);
  border-radius: var(--radius); padding: 18px 20px; font-size: .95rem; color: var(--ink-2);
}
.note b { color: var(--ink); }

.ok {
  background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 34%, transparent);
  border-radius: var(--radius); padding: 22px 24px;
}
.ok h3 { color: var(--good); margin-bottom: 8px; }

/* ---------------------------------------------------------------- splits */
/* Two-column layouts that actually collapse. Inline grid-template-columns had
   no breakpoint, and because a 1fr track is min-width:auto by default the
   columns refused to shrink and forced the whole document wider than the
   phone. minmax(0, Nfr) plus a real media query fixes both halves of that. */
.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
.split-form { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split-cta { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 900px) {
  .split-form, .split-cta { grid-template-columns: minmax(0, 1fr); }
  .split-form aside, .split-cta dl { position: static !important; }
}

/* ---------------------------------------------------------------- panels */
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3.4vw, 38px); }
.sec-alt .panel { background: var(--bg); }

/* THE FOUR STEPS ON /visit. .panel is used on six other blocks across the site,
   so the shadow is scoped to these rather than added to .panel: the rest are
   quiet containers and would all have lifted off the page with it. They sit on
   the tinted .sec-alt band, where a plain hairline border reads as flat, and
   this is the one place on the site presenting a sequence, so the cards want
   to look like four separate things in order.
   NAMED .step-card, not .step. A dead .step rule survived the removal of the
   offer page and silently applied position:relative and padding-top:30px to
   these, overriding .panel's own padding. That dead block is gone now, but the
   distinct name means it cannot happen again if it is ever restored. */
.step-card { box-shadow: var(--shadow); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: .98rem; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); font-weight: 550; }

/* ---------------------------------------------------------------- compare */
/* A fake Google result. Deliberately plain: the moment it looks designed it
   stops reading as "this is what Google shows" and starts reading as a slide. */
.serp {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px 22px; font-family: arial, sans-serif;
}
.serp-bad { border-color: color-mix(in srgb, #c0392b 40%, var(--line)); }
.serp-url { font-size: .82rem; color: var(--ink-2); margin-bottom: 4px; }
.serp-title {
  font-size: 1.22rem; line-height: 1.3; color: #1a0dab; font-weight: 400;
  letter-spacing: 0; margin-bottom: 5px;
}
.serp-desc { font-size: .88rem; line-height: 1.58; color: var(--ink-2); }
.serp-rating { margin-top: 7px; font-size: .84rem; color: var(--ink-2); }
.serp-stars { color: #b85a00; letter-spacing: -1px; }

.cmp-tag {
  display: inline-block; font-size: .8rem; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 6px; margin-bottom: 12px;
}
.cmp-tag-bad { background: #fbe9e7; color: #a02c1c; }
.cmp-tag-good { background: var(--brand-soft); color: var(--brand); }
.cmp-note { font-size: .95rem; color: var(--ink-2); margin-top: 16px; }

/* The comparison table. A real <table> would be the semantic choice, but this
   has to collapse to a readable stack on a phone and carry a "why it matters"
   line under every row, which a table fights. Grid with explicit labels. */
.cmp { border-top: 2px solid var(--ink); }
.cmp-head {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr;
  gap: 20px; padding: 14px 0; font-size: .78rem; font-weight: 750;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.cmp-row {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr;
  gap: 8px 20px; padding: 20px 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.cmp-what { font-weight: 680; color: var(--ink); }
.cmp-kind {
  display: block; margin-top: 6px; font-size: .78rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.cmp-old, .cmp-new { display: grid; grid-template-columns: 20px 1fr; gap: 9px; color: var(--ink-2); font-size: .97rem; }
.cmp-new { color: var(--ink); font-weight: 550; }
.mark { font-weight: 800; line-height: 1.5; }
.mark-bad { color: #c0392b; }
.mark-ok { color: var(--good); }
.cmp-why {
  grid-column: 1 / -1; margin-top: 10px; font-size: .93rem; color: var(--ink-3);
  line-height: 1.55; max-width: 84ch;
}
.cmp-row.is-tie .cmp-what { font-weight: 600; color: var(--ink-2); }
.cmp-row.is-tie { background: color-mix(in srgb, var(--good) 5%, transparent); }

.big-num {
  font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 830; letter-spacing: -0.05em;
  line-height: 1; color: var(--ink); margin-bottom: 14px;
}
.big-num .u { font-size: max(12px, .34em); font-weight: 700; letter-spacing: -0.01em; color: var(--ink-3); margin-left: 5px; }

@media (max-width: 780px) {
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .cmp-old::before { content: "Today: "; font-weight: 700; color: var(--ink-3); }
  .cmp-new::before { content: "New: "; font-weight: 700; color: var(--ink-3); }
  .cmp-old, .cmp-new { grid-template-columns: 20px auto 1fr; }
  .cmp-why { margin-top: 4px; }
}

.price { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px); }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.price-row span { color: var(--ink-2); font-size: 1rem; }
.price-row b { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 820; letter-spacing: -0.04em; color: var(--ink); }
.price-row .per { font-size: max(12px, .42em); font-weight: 700; color: var(--ink-3); letter-spacing: -0.01em; }
.price-note { margin-top: 8px; font-size: .92rem; color: var(--ink-3); line-height: 1.5; max-width: 46ch; }

.reason-stat { text-align: left; }
.reason-stat .big-num { color: var(--brand); margin-bottom: 6px; }
.reason-lbl { font-size: .96rem; color: var(--ink-3); max-width: 22ch; line-height: 1.42; }

/* ---------------------------------------------------------------- results */
.res-row {
  display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 10px 24px;
  padding: 18px 14px; border-bottom: 1px solid var(--line); align-items: start;
}
.res-row.is-after { background: var(--brand-soft); }
.res-name { font-weight: 700; color: var(--ink); }
.res-meta { font-size: .9rem; color: var(--ink-3); margin-top: 2px; }
.res-problem { color: var(--ink-2); font-size: .97rem; }
.res-when { font-size: .87rem; color: var(--ink-3); text-align: right; white-space: nowrap; }
.res-tag {
  display: block; margin-top: 6px; font-size: .78rem; font-weight: 750;
  letter-spacing: .06em; text-transform: uppercase; color: var(--brand);
}
@media (max-width: 780px) {
  .res-row { grid-template-columns: 1fr; gap: 6px; }
  .res-when { text-align: left; }
  .res-tag { display: inline-block; margin-top: 4px; }
}

/* ------------------------------------------------- private dashboard
   Four server-rendered tabs at /results, one page load each, addressed by
   ?tab=. No JavaScript anywhere in it: this is the page Peter opens from an
   email on a phone that may be several years old, and a settings screen that
   half-loads is worse than one that takes an extra second. */
.dash-head {
  padding-block: clamp(26px, 3.6vw, 44px) 0;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
/* No rule to the left of it here. The little dash is a section marker on the
   public pages, where an eyebrow introduces the band under it. On the dashboard
   the eyebrow is naming the whole screen, not decorating a section. */
.dash-eyebrow::before { content: none; }

/* The portal header: the logo, a label, and nothing else. No nav, no phone
   button, no open/closed pill, no hamburger. Those belong to the website; this
   is the tool. */
.hdr-portal .hdr-in { justify-content: flex-start; }
.hdr-portal .brand { display: inline-flex; }
.dash-head h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -0.035em; margin: 10px 0 0; }

.dash-tabs {
  display: flex; gap: 2px; margin-top: clamp(18px, 2.4vw, 26px);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tabs a {
  flex: 0 0 auto; padding: 13px 18px; min-height: 48px;
  font-weight: 650; font-size: .97rem; color: var(--ink-2); text-decoration: none;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.dash-tabs a:hover { color: var(--ink); background: var(--bg); }
.dash-tabs a.is-on { color: var(--brand); border-bottom-color: var(--brand); background: var(--bg); }

/* The same list as a dropdown, for phones. Hidden above 780px; the row of tabs
   is hidden below it. A <details>, so it needs no JavaScript, matching the
   site's main mobile menu. */
.dash-pick { display: none; margin-top: 18px; position: relative; }
.dash-pick > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; min-height: 52px; padding: 13px 16px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px;
  font-weight: 700; font-size: 1.02rem; color: var(--ink);
}
.dash-pick > summary::-webkit-details-marker { display: none; }
/* A chevron, drawn rather than an icon file, that flips when it opens. */
.dash-pick > summary::after {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto; margin-right: 3px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
}
.dash-pick[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dash-pick[open] > summary { border-color: var(--brand); border-radius: 10px 10px 0 0; }
.dash-pick-panel {
  position: absolute; left: 0; right: 0; z-index: 20;
  background: var(--bg); border: 1px solid var(--brand); border-top: 0;
  border-radius: 0 0 10px 10px; overflow: hidden;
  box-shadow: 0 14px 32px rgba(9, 20, 34, .14);
}
.dash-pick-panel a {
  display: block; padding: 14px 16px; min-height: 48px; text-decoration: none;
  font-weight: 600; color: var(--ink); border-top: 1px solid var(--line);
}
.dash-pick-panel a.is-on { color: var(--brand); font-weight: 750; background: var(--surface); }

/* The overview stats sit inside a tab panel rather than their own band, so they
   need their own bottom margin where the section used to provide it. */
.dash-stats { margin-bottom: 26px; }

/* ------------------------------------------------- overview
   Three facts, sized so the two numbers are readable across a shop. */
.ov-dest {
  background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg); padding: clamp(20px, 2.8vw, 28px); margin-bottom: 22px;
}
.ov-dest.is-away { border-left-color: #c8791f; background: #fff8ee; }
.ov-dest-lbl {
  display: block; font-size: .8rem; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.ov-dest b {
  display: block; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 820;
  letter-spacing: -0.035em; color: var(--ink); line-height: 1.1;
}
.ov-dest-mail { display: block; margin-top: 6px; color: var(--ink-2); font-size: .98rem; word-break: break-all; }
.ov-dest-cc, .ov-dest-tag {
  display: inline-block; margin-top: 10px; margin-right: 8px; font-size: .8rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px;
}
.ov-dest-tag { color: #8a5310; border-color: #e2c79b; background: #fdf3e3; }

/* The bottom margin is not optional. The counts used to be the LAST thing on
   the overview and did not need one; once they moved above the destination
   card the two were touching. */
.ov-counts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 26px); margin-bottom: clamp(18px, 2.4vw, 26px);
}
.ov-count {
  background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--brand);
  border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 30px); text-align: center;
}
.ov-count b {
  display: block; font-size: clamp(3rem, 9vw, 5rem); font-weight: 820;
  letter-spacing: -0.05em; line-height: .95; color: var(--ink);
}
.ov-count span {
  display: block; margin-top: 10px; font-size: 1rem; font-weight: 650; color: var(--ink-2);
}
.ov-note { margin: 22px 0 0; color: var(--ink-3); font-size: .95rem; line-height: 1.6; max-width: 64ch; }

/* The week explanation, behind an "i". Worth having; not worth three lines of
   gray text under the number every single time he opens this.
   IT EXPANDS IN FLOW, INSIDE THE CARD. It was a floating popover first, and a
   popover has to be positioned against something: against the little round
   button it ran off the side of a phone, and against the card it hung over the
   panel below and read as a rendering fault. A box that simply pushes the card
   taller cannot be in the wrong place at any width, on any screen. */
/* The control centers under the number like everything else in the card; the
   panel it opens is left-aligned, because prose is. */
.ov-info { display: block; margin-top: 14px; text-align: center; }
.ov-info > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; margin: 0 auto;
  color: var(--ink-3); font-size: .86rem; font-weight: 650;
}
.ov-info > summary::-webkit-details-marker { display: none; }
.ov-info > summary i {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid currentColor; display: grid; place-items: center;
  /* The sans stack, not the display serif: at this size the serif italic "i"
     reads as a stray mark rather than a letter. */
  font: 800 .76rem/1 var(--sans); font-style: normal;
}
.ov-info > summary:hover, .ov-info[open] > summary { color: var(--brand); }
.ov-info-panel {
  margin-top: 12px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px;
}
.ov-info-panel p {
  margin: 0 0 8px; font-size: .9rem; line-height: 1.55; color: var(--ink-2); font-weight: 400;
}
.ov-info-panel p:last-child { margin-bottom: 0; }

.pt-call { margin: 0; }
.pt-call a {
  font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em;
  color: var(--brand); text-decoration: none;
}

/* The two away controls, as buttons that open into their own form. Closed they
   read as a pair of buttons; open, the one that was tapped shows its fields and
   the other stays a button. <details>, so no JavaScript is involved. */
.ov-away { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 20px); margin-top: 28px; }
/* No overflow:hidden here. It was only ever rounding the summary's corners,
   and it clips anything a form control wants to draw outside the box, which on
   a phone includes the native date control. The summary rounds its own corners
   instead. */
.ov-opt {
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  align-self: start; min-width: 0;
}
.ov-opt > summary { border-radius: calc(var(--radius-lg) - 1px); }
.ov-opt[open] > summary { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }
.ov-opt > summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 24px); min-height: 76px;
  justify-content: center; position: relative;
}
.ov-opt > summary::-webkit-details-marker { display: none; }
.ov-opt > summary b { font-size: 1.1rem; letter-spacing: -0.015em; color: var(--ink); }
.ov-opt > summary span { font-size: .92rem; color: var(--ink-3); }
.ov-opt > summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
}
.ov-opt[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.ov-opt:hover { border-color: var(--brand-edge); }
.ov-opt[open] { border-color: var(--brand); grid-column: 1 / -1; }
.ov-opt[open] > summary { border-bottom: 1px solid var(--line); }
.ov-opt .pt-form { padding: clamp(18px, 2.4vw, 24px); }

/* Away is a state, not a control, so it stops looking like a pair of buttons
   and becomes one panel that says what is happening and how to end it. */
.ov-away.is-on {
  grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  background: #fff8ee; border: 1px solid #e2c79b; border-left: 4px solid #c8791f;
  border-radius: var(--radius-lg); padding: clamp(20px, 2.8vw, 28px);
}
.ov-away.is-on b { display: block; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); }
.ov-away.is-on span { display: block; margin-top: 6px; color: var(--ink-2); font-size: .96rem; max-width: 62ch; }

/* ------------------------------------------------- analytics tab
   Hand-drawn SVG and CSS bars from server-rendered numbers. No charting
   library, for the same reason there is no analytics script: the page that
   argues his site is heavy cannot ship 90 KB to draw thirty rectangles. */
.ch-wrap { overflow-x: auto; color: var(--ink-3); }
.ch { display: block; width: 100%; height: 200px; min-width: 460px; }
.ch-bar { fill: var(--brand); }

/* Wrapped in a scroller so a four-column table cannot push the whole document
   sideways on a 320px phone. The page body must never scroll horizontally; a
   table inside its own box may. */
.an-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.an-tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
/* Long addresses are one unbreakable token and will otherwise set the width of
   everything above them. */
.an-tbl td, .an-tbl th { overflow-wrap: anywhere; }
.an-tbl th {
  text-align: left; font-size: .76rem; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); padding: 0 10px 9px 0;
  border-bottom: 2px solid var(--ink);
}
.an-tbl th.num, .an-tbl td.num { text-align: right; }
.an-tbl td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.an-tbl td b { color: var(--ink); }
.an-tbl tr:last-child td { border-bottom: 0; }
.an-share { width: 40%; }
.an-bar { display: block; height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.an-bar span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

.an-hours { display: flex; align-items: flex-end; gap: 2px; height: 96px; }
.an-h {
  flex: 1 1 0; height: max(2px, var(--h, 0%)); border-radius: 2px 2px 0 0;
  background: var(--surface-2); border: 1px solid var(--line);
}
.an-h.is-open { background: var(--brand); border-color: var(--brand); }
.an-hours-lbl {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: .76rem; color: var(--ink-3);
}

.an-dev { display: flex; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.an-dev span { display: block; height: 100%; }
.an-dev-0 { background: var(--brand); }
.an-dev-1 { background: #6d93cc; }
.an-dev-2 { background: #adc3e0; }
.an-dev-3 { background: var(--surface-2); }
.an-key { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.an-key li { display: flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--ink-2); }
.an-key i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.an-key b { color: var(--ink); }

/* ------------------------------------------------- history feed */
.hist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.hist-row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 10px 22px;
  padding: 16px 2px; border-bottom: 1px solid var(--line); align-items: start;
}
.hist-row.is-after { background: var(--brand-soft); }
.hist-row.is-change { color: var(--ink-3); }
.hist-when b { display: block; font-weight: 700; color: var(--ink); font-size: .94rem; }
.hist-when span { display: block; font-size: .88rem; color: var(--ink-3); }
.hist-kind {
  display: block; font-size: .78rem; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}
/* A change line carries a full email address, which is one unbreakable token
   and was setting the width of the whole document at 320px. */
.hist-row > * { min-width: 0; }
.hist-what { overflow-wrap: anywhere; }
.hist-what > b { font-size: 1.04rem; color: var(--ink); }
.hist-what p { margin: 5px 0 0; color: var(--ink-2); font-size: .96rem; line-height: 1.5; }
.hist-meta { color: var(--ink-3) !important; font-size: .89rem !important; }

@media (max-width: 780px) {
  /* Five tabs in a row on a phone either scroll sideways behind an edge nobody
     drags, or wrap into a block that pushes the content off the first screen.
     The dropdown replaces them and names the section you are on. */
  .dash-tabs { display: none; }
  .dash-pick { display: block; }

  .ov-counts { grid-template-columns: 1fr; }
  .ov-away { grid-template-columns: 1fr; }
  .ov-away.is-on { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .ov-away.is-on .btn { width: 100%; justify-content: center; }
  .an-share { width: 30%; }
  .an-tbl { font-size: .9rem; }
  .hist-row { grid-template-columns: 1fr; gap: 4px; }
  .hist-when { display: flex; gap: 8px; align-items: baseline; }
  .hist-when b, .hist-when span { display: inline; }
}

/* ------------------------------------------------- recipients portal
   The settings at the bottom of /results. Opened perhaps twice a year, on a
   phone, by somebody who has not seen it since the last time, so it is sized
   for a thumb rather than for a mouse: nothing is smaller than 44px, every
   control is labeled with a verb, and there is no icon standing in for a word.
   Everything is a real form POST, so none of it depends on JavaScript. */
/* Deliberately not flex. A flex container makes the <b> its own item and puts
   a gap on both sides of it, which reads as a space before the comma. */
.res-route { margin-top: 18px; font-size: .96rem; color: var(--ink-2); max-width: 60ch; }
.res-route b { color: var(--ink); }
.res-route a { margin-left: 10px; white-space: nowrap; }

.pt-msg {
  margin: 0 0 22px; padding: 14px 18px; border-radius: 10px; font-weight: 600;
  border: 1px solid var(--brand-edge); background: var(--brand-soft); color: var(--ink);
}
.pt-msg.is-error { border-color: #e2b3ac; background: #fdf1ef; color: #8f2c1e; }
.pt-msg.is-hold { border-color: #e2c79b; background: #fdf3e3; color: #7a4a0f; font-weight: 400; }
.pt-msg.is-hold b { color: #6a3f0c; }

.pt-status {
  background: var(--bg); border: 1px solid var(--line);
  border-left: 4px solid var(--brand); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 30px); margin-bottom: 22px;
}
/* h2 in the dashboard, h3 when it was a section. Both, so a markup change
   cannot silently leave this heading at page-title size, which it did. */
.pt-status h2, .pt-status h3 {
  font-size: clamp(1.15rem, 2.1vw, 1.42rem); letter-spacing: -0.02em; margin: 0;
}
.pt-status p { margin: 8px 0 0; color: var(--ink-2); max-width: 60ch; }
.pt-status form { margin-top: 18px; }
/* Away is the state that matters, so it is the one that looks different. */
.pt-status.is-away { border-left-color: #c8791f; background: #fff8ee; }

/* Roomier than it was. The analytics tab put eight dense panels on one screen
   and every one of them was cramped against the next: tables ran to the card
   edge, and a chart, a legend and a paragraph shared a box with 20px around
   the lot. Padding is the whole difference between a dashboard and a printout,
   and this one is read on a phone at arm's length. */
.pt-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 28px); margin-bottom: clamp(18px, 2.4vw, 28px);
}
.pt-card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px);
}
.pt-card > h3 { margin-bottom: 16px; }
.pt-cols + .pt-card, .pt-card + .pt-card,
.pt-cols + .pt-cols, .stats + .pt-card, .stats + .pt-cols {
  margin-top: clamp(18px, 2.4vw, 28px);
}
/* The last thing in a card should not sit flush against its floor. */
.pt-card > *:last-child { margin-bottom: 0; }
/* The dashboard uses h3 inside cards, since the page title is the h1 and the
   status line is the h2. h4 kept so nothing that still uses it jumps size. */
.pt-card h3, .pt-card h4 { font-size: 1.06rem; letter-spacing: -0.01em; margin: 0 0 8px; }
.pt-card > p { color: var(--ink-2); font-size: .95rem; margin: 0 0 18px; max-width: 46ch; }

.pt-form { display: grid; gap: 12px; justify-items: start; }
.pt-form > .btn { margin-top: 4px; }
.pt-lbl {
  font-weight: 650; font-size: .88rem; color: var(--ink);
  display: block; margin-bottom: 6px;
}
.pt-form input, .pt-form select, .pt-form textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px;
  width: 100%; max-width: 100%; min-width: 0; min-height: 48px;
}
/* iOS gives input[type=date] a native control with its own intrinsic width and
   its own padding, and that width does not shrink to its container: the
   Vacation Mode fields ran off the side of a phone while every desktop browser
   and the headless audit showed them fitting. Stripping the native appearance
   puts the box back under this stylesheet's control. The value still opens the
   system date wheel on tap, which is the part that matters.
   min-width:0 on the grid cell as well, because a grid item defaults to
   min-width:auto and will not shrink below its content either. */
.pt-form input[type="date"] {
  -webkit-appearance: none; appearance: none; background-clip: padding-box;
}
.pt-two > * { min-width: 0; }
.pt-form textarea { line-height: 1.55; resize: vertical; min-height: 132px; }
.pt-form input:focus, .pt-form select:focus, .pt-form textarea:focus { border-color: var(--brand); outline: none; }
.pt-form input::placeholder, .pt-form textarea::placeholder { color: var(--ink-3); }
.pt-form select, .pt-form > label + select { max-width: 100%; }
.pt-form > select, .pt-form > input { width: 100%; }
.pt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.pt-form :disabled { opacity: .5; cursor: not-allowed; }

.pt-people { list-style: none; margin: 0 0 6px; padding: 0; border-top: 1px solid var(--line); }
.pt-people li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 20px;
  align-items: center; padding: 15px 2px; border-bottom: 1px solid var(--line);
}
.pt-who b { display: block; color: var(--ink); font-weight: 700; }
.pt-who span { display: block; font-size: .9rem; color: var(--ink-3); word-break: break-all; }
/* .78rem, not .74: below 12px tools/audit.js flags it, and it is a label a man
   in his sixties has to read on a phone. */
.pt-tag {
  font-size: .78rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 4px 11px; white-space: nowrap;
}
.pt-tag.is-main { color: var(--brand); border-color: var(--brand-edge); background: var(--brand-soft); }
/* Each row is its own grid, so the columns do not line up on their own. Fixed
   widths on the two right-hand columns put the badges and the buttons in a
   straight line down the list, which is the whole point of a list. */
.pt-tag { min-width: 9.5rem; text-align: center; }
/* The main recipient has no buttons, so its third cell is an empty placeholder.
   It has to hold the same width as a row of buttons, or the badge above the
   buttons sits further right than the one beside them. */
.pt-people li > span:empty { min-width: 11.5rem; }
.pt-acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; min-width: 11.5rem; }
.pt-link {
  font: inherit; font-size: .92rem; font-weight: 650; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--brand); padding: 10px 12px; min-height: 44px; white-space: nowrap;
}
.pt-link:hover { background: var(--surface-2); }
.pt-link.is-danger { color: #a33224; }
.pt-note { font-size: .88rem; color: var(--ink-3); margin: 10px 0 0; max-width: 52ch; line-height: 1.5; }
.pt-add { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.pt-add .pt-note { margin-top: 2px; }

.pt-log { list-style: none; margin: 0; padding: 0; }
.pt-log li {
  display: flex; gap: 14px; font-size: .93rem; color: var(--ink-2);
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.pt-log li:last-child { border-bottom: 0; }
.pt-log span { color: var(--ink-3); flex: 0 0 auto; min-width: 11.5rem; }
.pt-hist { background: transparent; }

.pt-foot { margin: 24px 0 0; font-size: .92rem; color: var(--ink-3); max-width: 62ch; line-height: 1.6; }

@media (max-width: 780px) {
  .pt-cols { grid-template-columns: 1fr; }
  .pt-two { grid-template-columns: 1fr; }
  .pt-form > .btn, .pt-form button { width: 100%; justify-content: center; }
  /* Name, badge, then the buttons on their own full-width row: at this size a
     three-column row squeezes an email address to two characters a line. */
  .pt-people li { grid-template-columns: minmax(0, 1fr) auto; }
  .pt-tag { min-width: 0; }
  .pt-people li > span:empty { display: none; }
  .pt-acts { grid-column: 1 / -1; justify-content: flex-start; margin-left: -12px; min-width: 0; }
  .pt-log li { flex-direction: column; gap: 2px; }
  .pt-log span { min-width: 0; }
}

/* ---------------------------------------------------------------- services */
/* Compact rows, not full-bleed bands.
   The bands were a mistake: adding a six-item list made the text column tall,
   the band stretched to match, and a 4:3 photograph got forced into a 720x500
   box. A close-up of an engine at that size stops being informative and becomes
   an abstract, and three of them in a row shout at the reader.
   The photograph is now a fixed 300px thumbnail: small enough to stay sharp
   from an 800px source, small enough not to dominate, and the content, which is
   the actual point of a services page, gets the room. */
.svcs { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.svc {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(22px, 3vw, 44px);
  padding: clamp(26px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  /* Center, not start: the covers column is shorter than the text beside it, so
     top-aligning left it hanging off the top of the row. */
  align-items: center;
}
.svc-shot { margin: 0; }
.svc-shot img { border-radius: var(--radius); box-shadow: var(--shadow); }
.svc-n { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .1em; color: var(--brand); margin-bottom: 10px; }
.svc h2 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); letter-spacing: -0.026em; margin-bottom: 10px; max-width: 18ch; }
.svc p { color: var(--ink-2); font-size: .99rem; margin: 0; }
.svc-covers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: center; }
.svc-covers li { position: relative; padding-left: 15px; font-size: .92rem; color: var(--ink-2); line-height: 1.4; }
.svc-covers li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

@media (max-width: 1080px) {
  /* Once the list wraps under the text it is no longer beside anything, so it
     goes back to flowing from the top. */
  .svc { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .svc-covers { grid-column: 2; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; padding-top: 14px; align-content: start; }
}
@media (max-width: 720px) {
  .svc { grid-template-columns: 1fr; gap: 18px; }
  .svc-shot { max-width: 320px; }
  .svc-covers { grid-column: 1; }
}
@media (max-width: 440px) { .svc-covers { grid-template-columns: 1fr; } }

.shot-cap { margin-top: 9px; font-size: .84rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- findings */
/* Each finding shows evidence first, then explains. The two-column footer is
   the part that matters: "what is wrong" and "why it matters to you" side by
   side, so the second is never skipped. A defect without a consequence is
   trivia, and trivia is what a shop owner has learned to tune out. */
.find { border-top: 2px solid var(--ink); padding-top: 26px; margin-top: clamp(38px, 5vw, 58px); }
.find:first-of-type { margin-top: 0; }
.find-head { display: grid; grid-template-columns: 4rem 1fr; gap: clamp(12px, 2vw, 24px); align-items: start; margin-bottom: 24px; }
.find-n { font-size: 1.7rem; font-weight: 830; letter-spacing: -0.04em; color: var(--brand); line-height: 1; }
.find-head h3 { font-size: clamp(1.35rem, 2.3vw, 1.85rem); margin: 0 0 8px; max-width: 26ch; }
.find-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .88rem;
  font-weight: 650; letter-spacing: .02em; color: var(--good); }
.find-check svg { width: 15px; height: 15px; flex: 0 0 auto; }
.find-show { margin-bottom: 26px; }
.find-why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px);
  padding-top: 22px; border-top: 1px solid var(--line); }
.find-why h4 { font-size: .76rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 8px; }
.find-why p { margin: 0; color: var(--ink-2); font-size: .99rem; line-height: 1.6; }
.find-why > div:last-child p { color: var(--ink); }

/* Evidence blocks: a plain fact table, deliberately unstyled-looking, because
   the moment it looks designed it starts reading as a claim again. */
.evidence { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.evidence-row { display: grid; grid-template-columns: 14rem 1fr; gap: 18px;
  padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.evidence-row:last-child { border-bottom: 0; }
.evidence-row > b { color: var(--ink-3); font-weight: 650; font-size: .88rem; }
.evidence-row span, .evidence-row code { color: var(--ink-2); }
.evidence-row code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86rem; word-break: break-all; }
.evidence-note { margin-top: 16px; font-size: .95rem; color: var(--ink-2); max-width: 66ch; }

/* The misspelling, shown at something like the size he actually ships it at.
   Describing this one is far weaker than showing it: a Mercedes owner reads the
   headline and draws their own conclusion in about a second. */
.misspell { border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.misspell-lbl {
  padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.misspell-h1 {
  margin: 0; padding: clamp(24px, 4vw, 44px) clamp(18px, 3vw, 32px);
  font-size: clamp(1.7rem, 4.6vw, 3.1rem); font-weight: 500; line-height: 1.14;
  letter-spacing: -0.02em; color: var(--ink);
}
.misspell-word {
  position: relative; color: #b3261e; font-weight: 700;
  text-decoration: underline wavy #b3261e; text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.misspell-foot {
  display: flex; flex-wrap: wrap; gap: 6px 28px;
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface);
  font-size: .86rem; color: var(--ink-2);
}
.misspell-foot b { color: var(--ink-3); font-weight: 650; margin-right: 5px; }
.misspell-foot code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; }

/* The "what happens instead" block. Only one finding has an answer worth
   showing rather than describing, and this is it: two real emails, rendered by
   the same code that sends them. */
.answer { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.answer-head { margin-bottom: 20px; }
.answer-head p { margin: 10px 0 0; color: var(--ink-2); font-size: .99rem; max-width: 66ch; }
.shot { margin: 0; }
.shot-when {
  font-size: .82rem; color: var(--ink-3); margin-bottom: 9px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.shot-when b { color: var(--ink); font-weight: 700; margin-right: 6px; }
.shot img {
  width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.shot figcaption { margin-top: 11px; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.answer-note {
  margin-top: 22px; padding: 15px 18px; background: var(--brand-soft);
  border: 1px solid var(--brand-edge); border-radius: var(--radius);
  font-size: .94rem; color: var(--ink-2); line-height: 1.55;
}
.answer-note b { color: var(--ink); }
/* The two shots are very different heights, so top-align them rather than
   letting the shorter one float in the middle of its column. */
.answer .grid.g-2 { align-items: start; }

/* The week, as a bar. 45 open hours against 123 with no letterbox. */
.clock-bar { display: flex; height: 58px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-strong); font-size: .85rem; font-weight: 650; }
.clock-open { flex: 0 0 var(--open-share, 26.8%); background: var(--good-soft); color: var(--good);
  display: grid; place-items: center; text-align: center; padding: 0 6px; }
.clock-shut { flex: 1; background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; text-align: center; padding: 0 10px; }
.clock-lbl { margin-top: 9px; font-size: .84rem; color: var(--ink-3); }

/* The observed load-time range, drawn as a span rather than an average.
   An average would be the wrong picture: 1.5 and 27 seconds do not describe a
   site that is "about fourteen seconds", they describe a site that is a
   lottery, and the width between the two ends is the thing to look at. */
.clock-range {
  margin-top: 26px; padding: clamp(22px, 3vw, 32px);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.clock-range h3 { font-size: clamp(1.06rem, 1.9vw, 1.26rem); letter-spacing: -0.02em; margin: 0 0 20px; }
.clock-range p { color: var(--ink-2); font-size: .98rem; margin: 14px 0 0; max-width: 68ch; }
.clock-range p b { color: var(--ink); }

.range-bar { display: flex; align-items: center; gap: 14px; }
.range-fast, .range-slow { display: grid; justify-items: center; gap: 2px; flex: 0 0 auto; }
.range-fast b, .range-slow b {
  font-size: clamp(1.5rem, 3.4vw, 2.15rem); font-weight: 820; letter-spacing: -0.04em; line-height: 1;
}
.range-fast b { color: var(--good); }
.range-slow b { color: var(--brand); }
/* .78rem, not .74: below 12px tools/audit.js flags it, and correctly. */
.range-fast span, .range-slow span {
  font-size: .78rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
/* Left-to-right green into blue, so the eye reads the distance traveled
   rather than two numbers sitting next to each other. */
.range-track {
  flex: 1 1 auto; height: 12px; border-radius: 999px; min-width: 40px;
  background: linear-gradient(to right, var(--good-soft), var(--brand-soft));
  border: 1px solid var(--line-strong);
}
.range-note { font-size: .9rem !important; color: var(--ink-3) !important; }

.ok-panel { border-left: 3px solid var(--good); }

@media (max-width: 780px) {
  .find-head { grid-template-columns: 1fr; gap: 6px; }
  .find-why { grid-template-columns: 1fr; gap: 20px; }
  .evidence-row { grid-template-columns: 1fr; gap: 4px; }
  /* 26.8% of a phone is 105px, which cannot hold "45 hours open" at a legible
     size. Stack the two bars and keep the proportion in the heights instead. */
  .clock-bar { flex-direction: column; height: auto; font-size: .86rem; }
  .clock-open { flex: 0 0 auto; padding: 12px 10px; }
  .clock-shut { flex: 0 0 auto; padding: 26px 10px; }
  /* The gradient track needs room to read as a distance. On a phone the two
     numbers carry it on their own. */
  .range-bar { gap: 10px; }
  .range-track { min-width: 24px; height: 10px; }
}

/* ---------------------------------------------------------------- side by side */
.race { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 30px); }
.race-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.race-head .cmp-tag { margin-bottom: 0; }
.race-time {
  font-size: .92rem; font-weight: 750; color: var(--ink-3);
  font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right;
}
.race-time.is-done { color: var(--ink); }
/* A fixed-height window onto each site, scaled down so a desktop layout is
   recognizable at half width. transform, not zoom: zoom is not in the spec and
   Firefox ignores it, which would show one site at half scale and the other at
   full and make the comparison a lie. */
.race-frame {
  position: relative; height: clamp(320px, 46vw, 520px);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2);
}
.race-frame iframe {
  position: absolute; top: 0; left: 0; border: 0;
  width: 200%; height: 200%;
  transform: scale(.5); transform-origin: 0 0;
}
.race-note { margin-top: 9px; font-size: .84rem; color: var(--ink-3); }

@media (max-width: 820px) {
  .race { grid-template-columns: 1fr; }
  .race-frame { height: 62vw; }
}

/* ---------------------------------------------------------------- reviews */
.rev-head { display: grid; grid-template-columns: 1.5fr auto; gap: clamp(28px, 5vw, 60px); align-items: end; }
.rev-score { text-align: right; flex: 0 0 auto; }
.rev-score-n { font-size: clamp(3.4rem, 8vw, 5.6rem); font-weight: 830; letter-spacing: -0.05em; line-height: .9; color: var(--ink); }
.rev-score-s { color: var(--brand); font-size: 1.34rem; letter-spacing: 1px; margin-top: 6px; }
.rev-score-l { font-size: .88rem; color: var(--ink-3); margin-top: 6px; }

/* FOUR SEPARATE CARDS, not one panel with hairlines through it. These are four
   numbers from four unrelated organizations, and the old single bordered box
   with 1px gaps read as one table from one source. Giving each its own card and
   shadow says what is actually true: four independent parties, four separate
   claims. The shadow is the existing --shadow token so these sit at the same
   elevation as every other raised surface on the site rather than inventing a
   second depth. No hover lift: nothing here is clickable except the source
   name, and a card that rises under the cursor promises a click it cannot take. */
.srcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.3vw, 16px); }
.src-cell { background: var(--bg); padding: 22px clamp(14px, 2vw, 24px);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  display: flex; flex-direction: column; }
.src-cell b { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 820;
  letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
/* display:inline is load-bearing. The label rule below is a descendant selector,
   so it also matched the <span class="u"> nested inside the <b> and pushed the
   unit onto its own line: "4.6" then "/5" underneath it, and "96" then "%".
   The label rule is scoped to a direct child now, and this states the display
   explicitly so a future descendant rule cannot do it again. */
.src-cell b .u { display: inline; font-size: max(12px, .42em); font-weight: 700; color: var(--ink-3); }
.src-cell > span { display: block; margin-top: 7px; font-size: .88rem; color: var(--ink-2); line-height: 1.4; }
/* SOURCE NAMES LINK BUT DO NOT LOOK LIKE LINKS. Ben's call, and the right one:
   these are attributions sitting under a number that is doing the work, not
   calls to action, and coloring them turned quiet credit lines into competing
   buttons.
   The class is ON THE ANCHOR, not scoped by parent. Scoping it by parent missed
   the hero line on /reviews, which rendered a blue underlined "Google" while
   every other instance inherited correctly. One rule now covers every context,
   including any added later. */
a.srcl {
  color: inherit; text-decoration: none;
  /* These labels are 15-16px tall, under the 24px minimum tap target. Vertical
     padding on an INLINE element grows the hit box without contributing to line
     height, so the target clears 24px and not one pixel moves on screen. */
  padding-block: 5px;
}
a.srcl:hover, a.srcl:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* margin-top:auto pins the source name to the bottom of its card, so all four
   sit on one baseline. Checkbook's description wraps to two lines and the other
   three do not; with a fixed margin the four labels landed at four different
   heights, which was tolerable inside one panel and looks unfinished once they
   are separate cards. */
.src-cell em { display: block; margin-top: auto; padding-top: 10px; font-style: normal;
  font-size: .76rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

.rev-feature { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.rev-pull { margin: 0 0 22px; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.3; letter-spacing: -0.018em; color: var(--ink); }
.rev-attr b { display: block; font-size: 1.02rem; color: var(--ink); }
.rev-attr span { font-size: .88rem; color: var(--ink-3); }

/* EACH THEME IS A CARD. Same white surface, border, radius and --shadow as the
   rating cards above it and the four steps on /visit, so the site keeps one
   raised-surface idiom. The gap between them tightens from the old 44-72px to a
   flat 20px: that space was doing the separating when these were bare stacked
   blocks, and once each one has an edge of its own the old gap just reads as a
   hole. */
.theme { background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 34px); }
.theme + .theme { margin-top: clamp(16px, 1.8vw, 22px); }
/* The quotes are now cards inside a card. White on white with a hairline made
   the nesting invisible, so they take the tinted surface and drop their own
   shadow: one level of elevation on the page, not two competing. */
.theme .rev { background: var(--surface); border-color: transparent; box-shadow: none;
  /* border-color:transparent above hits ALL four sides, which silently removed
     the 3px brand bar down the left of every quote. Put it back explicitly. */
  border-left-color: var(--brand); }
/* Three lines of near-equal weight stacked with nothing between them read as
   three orphans. The number and the mention count now sit in their own column
   against a rule, the claim is the only thing at heading weight, and the note
   below it is visibly a footnote rather than a second claim. */
.theme-head {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: clamp(18px, 3vw, 36px);
  align-items: start; padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
}
.theme-mark { border-top: 3px solid var(--brand); padding-top: 10px; }
.theme-n { display: block; font-size: 1.5rem; font-weight: 830; letter-spacing: -0.03em; color: var(--brand); line-height: 1; }
.theme-count { display: block; margin-top: 6px; font-size: .78rem; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.theme-text h3 { margin: 0 0 10px; font-size: clamp(1.3rem, 2.2vw, 1.7rem); max-width: 24ch; }
.theme-note {
  margin: 0; padding-left: 15px; border-left: 2px solid var(--line-strong);
  color: var(--ink-3); font-size: .95rem; line-height: 1.55; max-width: 62ch;
}
.theme-q { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); }

.rev { margin: 0; padding: 22px 24px; background: var(--bg);
  border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius); }
.sec-alt .rev, .dark .rev { background: var(--bg); }
.rev blockquote { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.rev figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.rev-who { font-weight: 700; font-size: .95rem; color: var(--ink); }
.rev-src { font-size: .82rem; color: var(--ink-3); }

@media (max-width: 900px) {
  .rev-head { grid-template-columns: 1fr; }
  .rev-score { text-align: left; }
  .rev-feature { grid-template-columns: 1fr; }
  .rev-feature figure { order: -1; }
  .srcs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .srcs { grid-template-columns: 1fr; }
  .theme-head { grid-template-columns: 1fr; gap: 14px; }
  .theme-mark { display: flex; align-items: baseline; gap: 12px; }
  .theme-count { margin-top: 0; }
}

/* ---------------------------------------------------------------- footer */
.ftr { background: var(--surface); border-top: 1px solid var(--line); padding-block: clamp(44px, 6vw, 72px) 30px; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: clamp(28px, 4.5vw, 60px); }
.ftr h2 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; font-weight: 700; }
.ftr a { color: var(--ink-2); text-decoration: none; }
.ftr a:hover { color: var(--brand); text-decoration: underline; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .96rem; }
/* Footer links are navigation, not prose, so WCAG 2.5.8's inline-link exception
   does not cover them. Padding takes each one to a 24px target. */
.ftr ul a, .ftr ul li { display: inline-block; min-height: 24px; padding-block: 3px; }
.ftr .brand svg { width: 168px; }
.ftr-btm {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between;
  align-items: center; font-size: .87rem; color: var(--ink-3);
}
/* The card marks are his own "we accept" strip, carrying the genuine network
   logos. Native is 308px and it is shown at 210, so it stays sharp. This
   replaced five text pills that wrapped badly and clipped off a phone. */
.pay { display: flex; }
.pay img { width: 210px; height: auto; display: block; }

/* Two separate statements get two lines, rather than running together into one
   long sentence that then wraps at an arbitrary point. */
.ftr-legal { display: grid; gap: 3px; line-height: 1.5; }

/* ---------------------------------------------------------------- map */
.map-embed { border: 0; width: 100%; height: 380px; border-radius: var(--radius-lg); background: var(--surface-2); }

/* ---------------------------------------------------------------- demo banner */
/* This is a demonstration built for Peter Fuchs, and it says so. It is not
   pretending to be the live site, and it is noindex at the server. */
.demo-bar {
  background: #12213a; color: #dce9ff; font-size: .86rem; text-align: center;
  padding: 9px var(--gut); line-height: 1.45;
}
.demo-bar b { color: #ffffff; }
.demo-bar a { color: #9ec8ff; display: inline-block; min-height: 24px; padding-block: 4px; }

/* No scroll-reveal animation, deliberately.
   An earlier version faded content in on scroll. The audit then reported 18
   nodes sitting at opacity:0 on load, which is precisely the defect this
   rebuild criticizes on the current site. A subtle fade is not worth handing
   back the strongest point in the pitch, so the content is simply visible. */

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .status { display: none; }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu { display: block; margin-left: auto; }
  .hdr-cta .btn span.long { display: none; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-media img { aspect-ratio: 16/10; }
  .row, .row-flip > figure { grid-template-columns: 1fr; order: 0; }

  /* MOBILE ONLY, both of these. 900px is where .split-cta and .row already
     collapse to one column, so nothing here introduces a third layout state:
     the stacked view just stops looking like a desktop column that fell over.
     Desktop is untouched, verified by pixel diff at 1280. */

  /* /visit: the Get directions button is the only thing under the address once
     the map moves below it, so it centers rather than hugging the left edge of
     a column that no longer exists. */
  .visit-cta { display: block; width: fit-content; margin-inline: auto; }

  /* Home: the address, hours and phone become a card. On the dark band a card
     reads by being LIGHTER than its ground (#121820 on #0b0f14), which is the
     same idiom as .dark .panel; the shadow is deepened because the site's
     --shadow token is a light-mode value and disappears against near-black. */
  .home-contact {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2px;
    background: #121820;
    border: 1px solid #1e2933;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .38), 0 14px 34px rgba(0, 0, 0, .34);
    padding: clamp(22px, 5vw, 30px);
  }
  .home-contact dt { margin-top: 16px; }
  .home-contact dt:first-of-type { margin-top: 0; }
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
  .trust-in { grid-template-columns: repeat(2, 1fr); }
}
/* Below 620px the header cannot fit the logo, the phone number, the toggle and
   the menu on one line: everything in it is flex: 0 0 auto, so the row forced a
   474px minimum and the whole document scrolled sideways. Wrap it into two
   rows and give the call button the full width of the second one. For a repair
   shop that is the better mobile layout regardless: the phone number is the
   primary action and it becomes a full-width tap target. */
@media (max-width: 620px) {
  /* The fixed Call / Request bar covers both actions on every screen, so every
     other instance of them is noise. Hiding the header's phone button also lets
     the mobile header collapse back to a single row: logo and menu. */
  .hdr-cta { display: none; }
  .hero-actions, .cta-pair { display: none; }

  body { font-size: 16.5px; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .f-2 { grid-template-columns: 1fr; }
  .hdr-in { min-height: 66px; gap: 12px; }
  .brand svg, .brand img { width: 148px; }
  .status { display: none; }
  .hero-actions .btn { width: 100%; }

  /* Centered footer on a phone. Four left-aligned columns stacked into one
     narrow column left everything hugging the edge with no visual close to the
     page, and the payment marks ran off the right. */
  .ftr { text-align: center; }
  .ftr-grid { grid-template-columns: 1fr; gap: 30px; }
  .ftr .brand { justify-content: center; }
  .ftr h2 { margin-bottom: 10px; }
  .ftr ul { justify-items: center; }
  .ftr p { margin-inline: auto; max-width: 34ch; }
  .ftr-btm { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  .pay { display: flex; justify-content: center; }
}

/* ---------------------------------------------------------------- sheet */
/* Designed for the printer first. Sized so the whole thing lands on one side of
   US Letter, because a second page does not get read. */
.sheet {
  max-width: 7.1in; margin: clamp(24px, 4vw, 48px) auto; padding: clamp(20px, 3vw, 34px);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: var(--ink);
}
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: 16px; }
.sheet-kicker { font-size: .78rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.sheet h1 { font-size: 1.72rem; margin: 3px 0 2px; letter-spacing: -0.03em; }
.sheet-sub { font-size: .8rem; color: var(--ink-3); }
.sheet-score { display: flex; gap: 16px; text-align: right; flex: 0 0 auto; }
.sheet-score b { display: block; font-size: 1.75rem; font-weight: 820; line-height: 1; letter-spacing: -0.04em; }
.sheet-score span { font-size: .76rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.sheet-lede { font-size: .88rem; color: var(--ink-2); margin-bottom: 14px; line-height: 1.5; }

.sheet-list { list-style: none; counter-reset: f; margin: 0; padding: 0; }
.sheet-list li {
  counter-increment: f; position: relative; padding: 9px 0 9px 27px;
  border-bottom: 1px solid var(--line);
}
.sheet-list li::before {
  content: counter(f) "."; position: absolute; left: 0; top: 9px;
  font-weight: 800; font-size: .84rem; color: var(--brand);
}
.sheet-list h2 { font-size: .95rem; margin: 0 0 3px; letter-spacing: -0.014em; line-height: 1.3; }
.sheet-list p { font-size: .82rem; color: var(--ink-2); margin: 0; line-height: 1.48; }
.sheet-v {
  display: inline-block; margin-top: 4px; font-size: .76rem; font-weight: 750;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}

.sheet-fine { margin-top: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; }
.sheet-fine h3 { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--good); margin: 0 0 6px; }
.sheet-fine ul { margin: 0; padding-left: 16px; }
.sheet-fine li { font-size: .78rem; color: var(--ink-2); line-height: 1.5; }

.sheet-foot { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; margin-top: 16px;
  padding-top: 14px; border-top: 2px solid var(--ink); }
.sheet-foot h3 { font-size: .95rem; margin: 0 0 5px; }
.sheet-foot p { font-size: .82rem; color: var(--ink-2); margin: 0 0 6px; line-height: 1.48; }
.sheet-url { font-size: .84rem !important; color: var(--ink) !important; }
.sheet-sign { border-left: 1px solid var(--line); padding-left: 18px; font-size: .8rem; color: var(--ink-3); }
.sheet-by { font-weight: 750; color: var(--ink); font-size: .92rem; }
.sheet-note { margin-top: 10px; font-style: italic; line-height: 1.45; }

.sheet-actions { display: flex; gap: 10px; justify-content: center; padding: 0 var(--gut) clamp(40px, 6vw, 70px); flex-wrap: wrap; }

@media (max-width: 620px) {
  .sheet-head { flex-direction: column; gap: 12px; }
  .sheet-score { text-align: left; }
  .sheet-foot { grid-template-columns: 1fr; }
  .sheet-sign { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
}

/* ---------------------------------------------------------------- print */
@media print {
  .hdr, .ftr, .demo-bar, .menu, .sheet-actions { display: none !important; }
  /* Flatten to black on white for the printer. */
  :root {
    --bg: #fff; --surface: #fff; --ink: #000; --ink-2: #222; --ink-3: #555;
    --line: #bbb; --line-strong: #888; --brand: #000; --good: #000;
  }
  /* Tuned until tools/pagecount.sh reports one page. At 10.5pt with the
     original spacing it ran to two, and a second page does not get read. */
  .sheet { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; }
  .sheet h1 { font-size: 17pt; }
  .sheet-lede { font-size: 8.6pt; margin-bottom: 8pt; line-height: 1.4; }
  .sheet-list li { padding: 5.5pt 0 5.5pt 18pt; }
  .sheet-list li::before { top: 5.5pt; font-size: 8pt; }
  .sheet-list h2 { font-size: 9.4pt; margin-bottom: 1.5pt; }
  .sheet-list p { font-size: 8.2pt; line-height: 1.36; }
  .sheet-v { font-size: 6.2pt; margin-top: 2pt; }
  .sheet-head { padding-bottom: 8pt; margin-bottom: 9pt; }
  .sheet-score b { font-size: 16pt; }
  .sheet-fine { margin-top: 8pt; padding: 7pt 10pt; }
  .sheet-fine li { font-size: 7.8pt; line-height: 1.4; }
  .sheet-foot { margin-top: 9pt; padding-top: 8pt; gap: 16pt; }
  .sheet-foot p { font-size: 8.2pt; line-height: 1.38; margin-bottom: 4pt; }
  .sheet-sign { font-size: 7.8pt; }
  .sheet-list li { break-inside: avoid; page-break-inside: avoid; }
  .sheet-foot, .sheet-fine { break-inside: avoid; page-break-inside: avoid; }
  @page { margin: 0.5in; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: none; }
  .card, .panel, .quote { border: 1px solid #999; break-inside: avoid; }
}