/* ============================================================
   WILLIAMS DIESEL PERFORMANCE — theme v4
   Loads AFTER base.css. Principles: one type scale, one spacing
   scale, one radius family, glass only where it sits over imagery.
   Every size below is a token; components never invent their own.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* Type scale — seven sizes, nothing else on the site */
  --fs-display: clamp(3rem, 1.75rem + 4.8vw, 6rem);    /* hero H1 only */
  --fs-h2:      clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  --fs-h3:      clamp(1.375rem, 1.3rem + .35vw, 1.625rem);
  --fs-lede:    clamp(1.125rem, 1.07rem + .3vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;

  /* Spacing scale */
  --sp-1: .5rem; --sp-2: .75rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2rem; --sp-6: 3rem; --sp-7: 4rem; --sp-8: 6rem;

  /* Kit token contract (base.css) mapped onto the scales */
  --step-0: var(--fs-body); --step-1: var(--fs-lede); --step-2: var(--fs-h3); --step-4: var(--fs-h2); --step-5: var(--fs-display);
  --measure-wide: 76rem;
  --header-h: 4.25rem;
  --space-section: clamp(5rem, 3.75rem + 5vw, 9rem);
  --space-grid: clamp(1rem, .85rem + .5vw, 1.375rem);

  --paper: #f5f5f7; --ink: #1d1d1f; --ink-2: #424245; --ink-3: #6e6e73;
  --surface: #ffffff; --surface-2: #fbfbfd;
  --rule: rgba(0,0,0,.1); --rule-soft: rgba(0,0,0,.06); --rule-strong: #86868b;
  --input-bg: #fff;

  --band: #0a0a0b; --band-2: #161618; --band-fg: #f5f5f7; --band-fg-2: #a1a1a6; --band-rule: rgba(255,255,255,.09);
  --glass: rgba(28,28,30,.55); --glass-edge: rgba(255,255,255,.13); --blur: saturate(180%) blur(24px);

  --footer-bg: var(--band); --footer-fg: var(--band-fg);
  --callbar-bg: rgba(10,10,11,.84); --callbar-rule: var(--band-rule);
  --accent: var(--ink); --accent-hover: #000; --accent-ink: var(--ink); --accent-contrast: #fff; --accent-wash: rgba(0,0,0,.05);
  --danger: #d70015; --star: currentColor; --focus: var(--ink);

  --font-display: "Big Shoulders Display", "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: var(--font-body); --font-mono: var(--font-body);
  --display-weight: 800; --display-leading: .95; --display-tracking: .004em;

  --r-sm: 12px; --r-md: 18px; --r-lg: 24px;
  --radius-sm: var(--r-sm); --radius-btn: 999px; --radius-lg: var(--r-lg);
  --shadow-btn: none; --shadow-btn-hover: none;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -12px rgba(0,0,0,.14);
  --shadow-panel: var(--shadow-card);
  --ease-out: cubic-bezier(.22,.61,.36,1); --dur-1: 160ms; --dur-2: 260ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111113; --ink: #f5f5f7; --ink-2: #c7c7cc; --ink-3: #98989d; --surface: #1c1c1e; --surface-2: #1c1c1e;
    --rule: rgba(255,255,255,.12); --rule-soft: rgba(255,255,255,.08); --rule-strong: #8e8e93; --input-bg: #1c1c1e;
    --accent-hover: #fff; --accent-contrast: #111113; --accent-wash: rgba(255,255,255,.08); --danger: #ff6961;
    --shadow-card: 0 0 0 1px rgba(255,255,255,.08); --shadow-panel: var(--shadow-card);
  }
}
:root[data-theme="dark"] {
  --paper: #111113; --ink: #f5f5f7; --ink-2: #c7c7cc; --ink-3: #98989d; --surface: #1c1c1e; --surface-2: #1c1c1e;
  --rule: rgba(255,255,255,.12); --rule-soft: rgba(255,255,255,.08); --rule-strong: #8e8e93; --input-bg: #1c1c1e;
  --accent-hover: #fff; --accent-contrast: #111113; --accent-wash: rgba(255,255,255,.08); --danger: #ff6961;
  --shadow-card: 0 0 0 1px rgba(255,255,255,.08); --shadow-panel: var(--shadow-card);
}

/* ---------- Type ---------- */
body { font-size: var(--fs-body); line-height: 1.6; letter-spacing: .004em; }
h1, h2, h3 { text-transform: uppercase; }
h2 { font-size: var(--fs-h2); line-height: .98; }
h3 { font-size: var(--fs-h3); line-height: 1.02; letter-spacing: .01em; }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.small { font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------- Section head: label → h2 → lede, one rhythm everywhere ---------- */
.head { display: grid; gap: var(--sp-3); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head > .label + h2 { margin-top: calc(var(--sp-1) * -.5); }
.head--split { align-items: end; }
@media (min-width: 62rem) { .head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); column-gap: var(--sp-7); } }
.head h2 { max-width: 16ch; }
.head--tight { margin-bottom: var(--sp-5); }

/* ---------- Dark band ---------- */
.band {
  background: radial-gradient(70rem 36rem at 50% -10%, rgba(255,255,255,.06), transparent 62%), var(--band);
  color: var(--band-fg);
  --paper: var(--band); --ink: var(--band-fg); --ink-2: var(--band-fg-2); --ink-3: var(--band-fg-2);
  --surface: var(--band-2); --surface-2: var(--band-2);
  --rule: var(--band-rule); --rule-soft: rgba(255,255,255,.07); --rule-strong: rgba(255,255,255,.3);
  --accent: var(--band-fg); --accent-contrast: var(--band); --accent-ink: var(--band-fg); --accent-hover: #fff; --accent-wash: rgba(255,255,255,.1);
  --focus: var(--band-fg);
}

/* ---------- Buttons: three kinds, two sizes ---------- */
.btn { border-radius: 999px; font-weight: 600; font-size: var(--fs-body); letter-spacing: .01em; text-transform: none;
  min-height: 3rem; padding: .8rem 1.4rem;
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.btn:hover { translate: none; transform: translateY(-1px); background-color: var(--accent-hover); }
.btn:active { transform: none; }
.btn--lg { min-height: 3.5rem; padding: 1rem 1.75rem; }
.btn--ghost { box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.btn--ghost:hover { background-color: var(--accent-wash); }
.btn--glass { --btn-bg: rgba(255,255,255,.12); --btn-fg: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.btn--glass:hover { background-color: rgba(255,255,255,.2); }
.band .btn:not(.btn--glass):not(.btn--ghost) { --btn-bg: #f5f5f7; --btn-fg: #0a0a0b; }
.band .btn:not(.btn--glass):not(.btn--ghost):hover { background-color: #fff; }

/* ---------- Header: dark frosted glass ---------- */
.masthead { background: rgba(10,10,11,.9); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid rgba(255,255,255,.06); }
.masthead[data-stuck="true"] { box-shadow: none; background: rgba(10,10,11,.92); }
.masthead__inner { gap: var(--sp-5); }
.brand img { display: block; block-size: 2.5rem; inline-size: auto; }
.nav { gap: var(--sp-5); }
.nav a { font-weight: 500; font-size: var(--fs-sm); color: rgba(245,245,247,.72); }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav a::after { background: #fff; block-size: 1.5px; bottom: .25rem; }
.masthead__phone { padding: .5rem 1rem; border-radius: 999px; background: #f5f5f7; color: #0a0a0b;
  font-weight: 600; font-size: var(--fs-sm); transition: background-color var(--dur-2) var(--ease-out); }
.masthead__phone:hover { background: #fff; }
.nav-toggle { color: #f5f5f7; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); font-weight: 600; font-size: var(--fs-sm); }
@media (max-width: 62rem) {
  .masthead[data-open="true"] .nav { background: rgba(10,10,11,.94); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding-bottom: var(--sp-4); }
  .masthead[data-open="true"] .nav a { color: #f5f5f7; border-color: var(--band-rule); font-size: var(--fs-body); }
}
@media (min-width: 48.0625rem) and (max-width: 62rem) { .masthead__phone { display: flex; } }   /* kit fix */

.callbar { background: var(--callbar-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--band-rule); }
.callbar .btn { --btn-bg: #f5f5f7; --btn-fg: #0a0a0b; white-space: nowrap; font-size: var(--fs-sm); padding-inline: var(--sp-2); }
.callbar .btn--glass { --btn-bg: rgba(255,255,255,.12); --btn-fg: #fff; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(100svh, 62rem); }
.hero__bg { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 60% 40%; filter: saturate(1.05) brightness(.8); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,9,.6) 0%, rgba(8,8,9,0) 24%),
              linear-gradient(90deg, rgba(8,8,9,.9) 0%, rgba(8,8,9,.62) 45%, rgba(8,8,9,.2) 100%),
              linear-gradient(0deg, var(--band) 0%, rgba(10,10,11,0) 42%); }
@media (max-width: 48rem) { .hero::before { background: linear-gradient(0deg, var(--band) 10%, rgba(8,8,9,.8) 55%, rgba(8,8,9,.6) 100%); } }
.hero__inner { padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-6); }
.pill { display: inline-flex; align-items: center; padding: .45rem 1rem; border-radius: 999px;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px var(--glass-edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #f5f5f7; }
.hero h1 { font-size: var(--fs-display); line-height: .95; margin-top: var(--sp-5); }
.hero h1 > span { display: block; }
/* Inverse highlight on the second line; if it wraps, each line gets its own bar */
.hero h1 > .l2 { margin-top: .08em; line-height: 1.3; }
.hl { display: inline; background: #f5f5f7; color: #0a0a0b; padding: 0 .14em; border-radius: .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .lede { color: rgba(245,245,247,.8); margin-top: var(--sp-5); max-width: 44ch; }
.hero .btn-row { margin-top: var(--sp-6); gap: var(--sp-2); }
@media (max-width: 30rem) { .hero .btn-row .btn { flex: 1 1 100%; } }
.hero__meta { margin-top: var(--sp-4); font-size: var(--fs-sm); color: rgba(245,245,247,.6); }
.trust { display: grid; grid-template-columns: 1fr; list-style: none; margin: clamp(3rem, 7vw, 5rem) 0 0; padding: var(--sp-1);
  background: var(--glass); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--glass-edge);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
@media (min-width: 40rem) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .trust { grid-template-columns: repeat(4, auto); justify-content: space-between; } }
.trust li { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-weight: 600; font-size: var(--fs-body); color: #f5f5f7; }
.icon-dot { inline-size: 2.25rem; block-size: 2.25rem; padding: .55rem; flex: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }

/* ---------- Service cards: identical shells ---------- */
.grid8 { display: grid; gap: var(--space-grid); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .grid8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.svc:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 20px 44px -22px rgba(0,0,0,.9); }
.svc__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #1c1c1e; }
.svc__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.svc:hover .svc__img img { transform: scale(1.03); }
.kind { position: absolute; top: var(--sp-2); left: var(--sp-2); padding: .3rem .7rem; border-radius: 999px;
  background: rgba(20,20,22,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.svc__body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; padding: var(--sp-4); }
.svc h3 { text-wrap: balance; }
/* Every card body is exactly four lines: copy is written to fill four at the 4-up width, the clamp stops a fifth */
.svc p { color: var(--band-fg-2); line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-wrap: pretty; }
@media (min-width: 75rem) { .svc p { min-height: calc(4 * 1.55em); } }
/* Titles and bodies line up across a row even when one title runs to two lines */
@supports (grid-template-rows: subgrid) {
  .svc { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .svc__body { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--sp-2); }
}
.go { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: var(--sp-1); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; color: #fff; }
.go svg { inline-size: 1em; block-size: 1em; transition: transform var(--dur-2) var(--ease-out); }
.go:hover svg { transform: translateX(3px); }

/* ---------- Light cards (platforms, steps, jobs, slabs, faq, form) ---------- */
.card-light { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.engines { display: grid; gap: var(--space-grid); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.engine { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.engine__oem { display: flex; align-items: center; gap: var(--sp-4); block-size: 2.5rem; margin-bottom: var(--sp-4); }
.oem { display: block; opacity: .9; }
.engine h3 small { display: block; margin-top: var(--sp-1); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; color: var(--ink-3); }
.engine ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.engine li { display: flex; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-2); border-top: 1px solid var(--rule-soft); }
.engine b { font-weight: 700; }
.engine li span { color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.engines__foot { margin-top: var(--sp-5); color: var(--ink-2); }

.tiles { display: grid; gap: var(--space-grid); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tiles li { display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-4); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tiles .icon-dot { margin-bottom: var(--sp-2); }
.tiles b { font-weight: 700; font-size: var(--fs-body); }
.tiles span { color: var(--band-fg-2); text-wrap: pretty; }

.steps4 { display: grid; gap: var(--space-grid); list-style: none; margin: 0; padding: 0; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .steps4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps4 li { padding: var(--sp-4); display: grid; gap: var(--sp-2); align-content: start; }
@supports (grid-template-rows: subgrid) { @media (min-width: 40rem) { .steps4 li { grid-row: span 3; grid-template-rows: subgrid; } } }
.steps4 .icon-dot { margin-bottom: var(--sp-2); background: var(--accent-wash); color: var(--ink); }
.steps4 p { color: var(--ink-2); }

/* ---------- Split (tuning, about) ---------- */
.split { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 62rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.photo { position: relative; overflow: hidden; margin: 0; border-radius: var(--r-lg); background: var(--band-2); aspect-ratio: 4 / 5; }
@media (max-width: 62rem) { .photo { aspect-ratio: 4 / 3; } }
.photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.photo figcaption { position: absolute; left: var(--sp-2); bottom: var(--sp-2); padding: .35rem .8rem; border-radius: 999px;
  background: rgba(20,20,22,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.uses { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.uses li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
@media (max-width: 30rem) { .uses li { grid-template-columns: 1fr; } }
.uses b { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); text-transform: uppercase; line-height: 1.05; }
.uses span { color: var(--band-fg-2); }
.callout { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.callout p { margin-top: var(--sp-1); color: var(--band-fg-2); }
.split .btn-row { margin-top: var(--sp-5); }
.about p + p { margin-top: var(--sp-3); }
.about p { color: var(--band-fg-2); max-width: 54ch; }

/* ---------- Recent work ---------- */
.jobs { display: grid; gap: var(--space-grid); grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.job { overflow: hidden; display: grid; }
@media (min-width: 40rem) { .job { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.job .photo { border-radius: 0; }
@media (min-width: 40rem) { .job .photo { aspect-ratio: 4 / 3; } }
.job__body { padding: var(--sp-5); display: grid; gap: var(--sp-2); align-content: center; }
.job__body p { color: var(--ink-2); }
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-2) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--rule-soft); }
.spec div { display: grid; gap: .25rem; align-content: start; }
.spec dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.job--todo { place-items: center; padding: var(--sp-5); box-shadow: inset 0 0 0 1.5px var(--rule); background: transparent; }
html.clean .job--todo { display: none; }

/* ---------- Phone number, set large ---------- */
.call-big { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; font-family: var(--font-display);
  font-weight: 900; font-size: var(--fs-h2); line-height: 1; }
.call-big svg { inline-size: .6em; block-size: .6em; }

/* ---------- FAQ ---------- */
.faq { border: 0; padding: var(--sp-1) var(--sp-4); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq details:last-child { border-bottom: 0; }
.faq summary { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); letter-spacing: 0; text-transform: none; padding-block: var(--sp-4); }
.faq summary::after { content: "+"; border: 0; rotate: 0deg; translate: none; inline-size: auto; block-size: auto;
  font-size: 1.5rem; font-weight: 400; color: var(--ink-3); line-height: 1; transition: rotate var(--dur-2) var(--ease-out); }
.faq details[open] summary::after { rotate: 45deg; translate: none; }
.faq details > div { padding-bottom: var(--sp-4); color: var(--ink-2); }

/* ---------- Warranty ---------- */
.promise .wrap { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 48rem) { .promise .wrap { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-7); } }
.badge { display: grid; place-items: center; text-align: center; inline-size: 10.5rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 10px rgba(255,255,255,.03); }
.badge b { display: block; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); line-height: .9; }
.badge span { display: block; margin-top: .45rem; font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--band-fg-2); }
.promise p { color: var(--band-fg-2); max-width: 56ch; }
.promise .head { margin-bottom: var(--sp-3); }

/* ---------- Form ---------- */
.form-wrap { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 62rem) { .form-wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.form.panel { border: 0; padding: var(--sp-5); gap: var(--sp-4); }
.field > label { font-size: var(--fs-sm); font-weight: 600; }
.field input, .field textarea { border-radius: var(--r-sm); border: 1px solid var(--rule-strong); min-height: 3.1rem; font-size: var(--fs-body); }
.field input:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-wash); }
.check { display: flex; gap: var(--sp-2); align-items: center; font-weight: 600; }
.check input, .consent input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--ink); }
.consent { font-size: var(--fs-xs); }
.contact-side .call-big { margin-top: var(--sp-5); }
.contact-side .small { margin-top: var(--sp-2); }

/* ---------- Footer ---------- */
.find { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding-bottom: var(--sp-6); margin-bottom: var(--sp-6); border-bottom: 1px solid var(--band-rule); }
.footer h3, .find h3 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; color: var(--band-fg-2); margin-bottom: var(--sp-2); }
.hours { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; font-variant-numeric: tabular-nums; }
.hours dt { color: var(--band-fg-2); }
.hours dd { margin: 0; }
.footer ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.footer a { color: var(--band-fg); }
.footer .brand img { block-size: 3rem; }
.footer .call-big { font-size: var(--fs-h3); color: var(--band-fg); }
.footer__tag { margin-top: var(--sp-3); color: var(--band-fg-2); font-size: var(--fs-sm); max-width: 30ch; }

/* ---------- Service-area pages ---------- */
.area-hero { padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-7); }
.area-hero h1 { font-size: var(--fs-h2); max-width: 20ch; }
.area-hero .lede { color: rgba(245,245,247,.8); margin-top: var(--sp-4); }
.area-hero .btn-row { margin-top: var(--sp-5); gap: var(--sp-2); }
.crumbs { font-size: var(--fs-sm); color: var(--band-fg-2); margin-bottom: var(--sp-4); }
.crumbs a { color: var(--band-fg-2); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.facts { display: grid; gap: var(--sp-1); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); margin: var(--sp-6) 0 0; padding: var(--sp-1);
  background: var(--glass); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.facts div { padding: var(--sp-3) var(--sp-4); }
.facts dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--band-fg-2); }
.facts dd { margin: var(--sp-1) 0 0; font-weight: 600; font-size: var(--fs-body); }
.svc-list { display: grid; gap: var(--sp-1); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.svc-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); text-decoration: none; font-weight: 600; }
.svc-list a svg { inline-size: 1em; block-size: 1em; color: var(--ink-3); }
.prose-block { display: grid; gap: var(--sp-3); max-width: 62ch; color: var(--ink-2); }
.prose-block strong { color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.pills a { display: inline-block; padding: .5rem 1rem; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-card);
  text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.pills a small { color: var(--ink-3); font-weight: 500; margin-left: .35rem; }
.county { padding-block: var(--sp-5); border-top: 1px solid var(--rule); }
.county:first-of-type { border-top: 0; padding-top: 0; }
.county h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.county .also { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-3); }
.two-col { display: grid; gap: var(--sp-6); }
@media (min-width: 62rem) { .two-col { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }

/* ---------- Unknown-fact markers ---------- */
.needs { display: inline-block; padding: .05rem .5rem; border: 1px dashed currentColor; border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; vertical-align: middle; opacity: .85; }
html.clean .needs { display: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead, .callbar { background: rgba(10,10,11,.97); }
  .trust, .callout, .badge, .facts { background: #1c1c1e; }
  .pill, .kind, .photo figcaption, .btn--glass { background: rgba(40,40,42,.92); }
}
.section--flush-top { padding-top: 0; }

/* Hero fit: one full first screen on a laptop, header not double-counted */
:root { --fs-display: clamp(3rem, 1.75rem + 4.4vw, 5.25rem); }
.hero { min-height: calc(100svh - var(--header-h)); }
.hero__inner { padding-block: clamp(3rem, 6vw, 5rem) var(--sp-5); }
.hero h1 { max-width: none; }
.trust { margin-top: clamp(2.5rem, 5vw, 4rem); }
.area-hero { padding-block: clamp(3.5rem, 7vw, 6rem); }
.hero { min-height: min(calc(100svh - var(--header-h)), 60rem); }
.prose-block h2 { color: var(--ink); }
.svc-list a { block-size: 100%; }
.head .head { margin-bottom: 0; }

/* ---------- OEM marks follow the theme ---------- */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .oem { filter: invert(1); } }
:root[data-theme="dark"] .oem { filter: invert(1); }

.go--ink { color: var(--ink); }
.lede .go { display: flex; inline-size: fit-content; margin-top: var(--sp-3); padding-top: 0; font-size: var(--fs-body); }
.footer__tm { margin-top: var(--sp-3); max-width: 90ch; font-size: var(--fs-xs); color: color-mix(in oklab, var(--footer-fg) 48%, transparent); }

/* ---------- Blog: cards ---------- */
.posts { display: grid; gap: var(--space-grid); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.posts--three { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .posts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { position: relative; display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.post-card:hover { transform: translateY(-3px); }
.post-card__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--band-2); }
.post-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.post-card:hover .post-card__img img { transform: scale(1.03); }
.post-card__body { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-4); }
@supports (grid-template-rows: subgrid) {
  .post-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .post-card__body { grid-row: span 3; grid-template-rows: subgrid; }
}
.post-card h3 { line-height: 1.05; text-wrap: balance; }
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card h3 a:focus-visible { outline: none; }
.post-card:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.post-card p:not(.label) { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- Blog: article ---------- */
.wrap--post { width: min(100% - 2.5rem, 42rem); margin-inline: auto; }
.wrap--figure { width: min(100% - 2.5rem, 64rem); margin-inline: auto; }
.post-hero { padding-block: clamp(3.5rem, 7vw, 6rem) var(--sp-7); }
.post-hero .crumbs { margin-bottom: var(--sp-5); }
.post-hero h1 { font-size: var(--fs-h2); margin-top: var(--sp-2); text-wrap: balance; }
.post-hero .lede { margin-top: var(--sp-4); color: rgba(245,245,247,.8); max-width: none; }
.post-meta { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--band-fg-2); }
.post-figure { background: linear-gradient(to bottom, var(--band) 50%, transparent 50%); }
.post-figure figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: var(--band-2); }
.post-figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.post-body { padding-block: var(--sp-7) var(--space-section); }

.prose { color: var(--ink-2); line-height: 1.7; }
.prose > * + * { margin-top: var(--sp-3); }
.prose > h2 { margin-top: var(--sp-7); font-size: var(--fs-h3); line-height: 1.05; color: var(--ink); }
.prose > h3 { margin-top: var(--sp-5); font-family: var(--font-body); font-size: var(--fs-lede); font-weight: 700; line-height: 1.3;
  letter-spacing: 0; text-transform: none; color: var(--ink); }
.prose > h2 + *, .prose > h3 + * { margin-top: var(--sp-2); }
.prose > :first-child { margin-top: 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--rule-strong); }
.prose a:not(.btn):hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { list-style: none; padding: 0; display: grid; gap: var(--sp-1); }
.prose li { position: relative; padding-left: 1.5rem; }
.prose ul > li::before { content: ""; position: absolute; left: .3rem; top: .72em; inline-size: .375rem; block-size: .375rem; border-radius: 50%; background: var(--ink-3); }
.prose ol { counter-reset: step; }
.prose ol > li { counter-increment: step; }
.prose ol > li::before { content: counter(step) "."; position: absolute; left: 0; font-weight: 600; color: var(--ink); }
.table-wrap { overflow-x: auto; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.prose > .table-wrap { margin-block: var(--sp-4); }
.prose table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.prose th, .prose td { padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top; border-top: 1px solid var(--rule-soft); }
.prose thead th { border-top: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.prose tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }

.cta-inline { display: grid; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-lg); }
.prose > .cta-inline { margin-block: var(--sp-6); }
.cta-inline__text { color: var(--band-fg); font-size: var(--fs-lede); line-height: 1.45; }
.cta-inline .btn-row { margin-top: var(--sp-2); gap: var(--sp-2); }
@media (max-width: 30rem) { .cta-inline .btn { flex: 1 1 100%; } }

/* ---------- Header floats over the first dark band ----------
   The sticky header used to sit on the light page background, so its glass read grey.
   Pulling the first section up underneath it means the glass blurs the dark band or hero photo. */
main > :first-child { margin-top: calc(-1 * (var(--header-h) + 1px)); }
.hero { min-height: min(100svh, calc(60rem + var(--header-h))); }
.hero__inner { padding-block: calc(var(--header-h) + clamp(3rem, 6vw, 5rem)) var(--sp-5); }
.area-hero { padding-block: calc(var(--header-h) + clamp(3.5rem, 7vw, 6rem)) clamp(3.5rem, 7vw, 6rem); }
.post-hero { padding-block: calc(var(--header-h) + clamp(3.5rem, 7vw, 6rem)) var(--sp-7); }
.prose { max-width: none; }                       /* the column width comes from .wrap--post */
.prose p + p { margin-top: var(--sp-3); }
.head__aside { align-self: end; }
@media (min-width: 62rem) { .head__aside { justify-self: end; } }
.head__aside .go { margin-top: 0; padding-top: 0; font-size: var(--fs-body); }
.trust li { padding-inline: var(--sp-3); }
@media (min-width: 75rem) { .trust li { white-space: nowrap; } }

/* Fleet: photo on the right on wide screens, so the splits alternate down the page */
@media (min-width: 62rem) { .split--flip > .photo { order: 2; } }
/* "Read more" under a row of cards */
.more { display: flex; justify-content: center; margin-top: var(--sp-6); }

/* ================= Phone pass =================
   One rhythm on small screens: 64px section gaps, full-width calls to action,
   icon-left rows wherever a list pairs an icon with a line of text. */
:root { --space-section: clamp(4rem, 2.5rem + 6.25vw, 9rem); }
.hero + .section.band { padding-top: calc(var(--space-section) - var(--sp-5)); }   /* dark into dark: one gap, not two */
.hero__meta span { white-space: nowrap; }
.call-verb { display: none; }

@media (max-width: 30rem) {
  .hero__meta .sep { display: none; }
  .hero__meta span { display: block; }
  .btn-row > .btn, .more .btn, .form [type="submit"], .find .btn { flex: 1 1 100%; inline-size: 100%; justify-content: center; }
}

@media (max-width: 39.99rem) {
  .job__body, .form.panel { padding: var(--sp-4); }            /* every card on a phone: 24px inside */
  .tiles li, .steps4 li { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); row-gap: var(--sp-1); align-items: start; }
  .tiles .icon-dot, .steps4 .icon-dot { grid-row: span 2; margin-bottom: 0; }
  .tiles b, .steps4 h3 { display: flex; align-items: center; min-block-size: 2.25rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

/* Warranty and end-of-page bands: one centred column on phones */
@media (max-width: 47.99rem) {
  .promise .wrap { justify-items: center; text-align: center; }
  .promise .head { justify-items: center; }
  .promise .head h2, .promise p { margin-inline: auto; }
  .promise .btn-row { justify-content: center; }
  .badge { inline-size: 9.5rem; }
}

/* Contact: on stacked layouts the phone number becomes a proper call button */
@media (max-width: 61.99rem) {
  .contact-side .call-big { display: flex; justify-content: center; gap: var(--sp-1); inline-size: 100%; min-block-size: 3.5rem; margin-top: var(--sp-5);
    border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); letter-spacing: .01em; }
  .contact-side .call-big svg { inline-size: 1em; block-size: 1em; }
  .contact-side .call-verb { display: inline; }
  .contact-side .small { text-align: center; }
}
.nw { white-space: nowrap; }
/* Native controls follow the forced theme, not just the OS setting */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Fleet checklist */
.checks { display: grid; gap: var(--sp-2); }
.checks li { display: flex; align-items: center; gap: var(--sp-3); font-weight: 500; color: var(--ink); }
.checks .icon-dot { background: var(--accent-wash); color: var(--ink); }
/* Phone menu: one solid panel under the header, big tap targets, no pill floating on top of the links */
@media (max-width: 62rem) {
  .masthead[data-open="true"] .masthead__phone { position: static; translate: none; }
  .masthead[data-open="true"] { background: var(--band); }
  .masthead[data-open="true"] .nav { min-block-size: calc(100svh - var(--header-h)); background: var(--band);
    -webkit-backdrop-filter: none; backdrop-filter: none; padding: var(--sp-2) 1.25rem var(--sp-6); }
  .masthead[data-open="true"] .nav a { font-size: var(--fs-lede); font-weight: 600; padding-block: var(--sp-3); }
}
@media (max-width: 48rem) { .masthead[data-open="true"] .masthead__phone { display: none; } }
/* Menu button: three-line icon that folds into an X when the menu is open.
   44px tap target, pulled into the gutter so the icon itself lines up with the page edge. */
@media (max-width: 62rem) {
  .nav-toggle { inline-size: 2.75rem; block-size: 2.75rem; min-height: 0; padding: 0; justify-content: center;
    margin-right: calc((2.75rem - 1.25rem) / -2); box-shadow: none; border-radius: 50%; }
}
.burger { position: relative; display: block; inline-size: 1.25rem; block-size: .875rem; }
.burger span { position: absolute; left: 0; inline-size: 100%; block-size: 2px; border-radius: 2px; background: currentColor;
  transition: top var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: calc(50% - 1px); }
.burger span:nth-child(3) { top: calc(100% - 2px); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger span { transition: none; } }
/* Header call button: the menu's own font, room to breathe */
.masthead__phone { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .01em;
  min-block-size: 2.5rem; padding: .5rem 1.4rem; justify-content: center; }
/* Pre-purchase rows: four equal cells, each two lines */
.uses--even { grid-auto-rows: 1fr; }
.uses--even li { align-items: center; }
/* Split whose text column runs exactly photo-top to photo-bottom: label at the top edge, button on the bottom edge */
@media (min-width: 62rem) {
  .split--fit { align-items: stretch; }
  .split--fit > .photo { aspect-ratio: auto; block-size: 100%; min-block-size: 36rem; }
  .split--fit > div { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5); }
  .split--fit > div > * { margin: 0; }
  .split--fit .head .label { line-height: 1; }
  .split--fit .btn-row { margin-top: 0; }
}
/* ---------- DCR special: a slim strip hanging under the menu, same dark glass as the header.
   It sits over the top padding of the first band, so nothing below moves, and fades once you scroll. ---------- */
.promo { position: absolute; inset-inline: 0; top: 100%; z-index: 1; display: block; text-decoration: none; color: #f5f5f7;
  background: rgba(10,10,11,.9); border-bottom: 1px solid rgba(255,255,255,.06);
  transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), visibility var(--dur-2); }
.masthead[data-stuck="true"] .promo, .masthead[data-open="true"] .promo { opacity: 0; translate: 0 -.5rem; visibility: hidden; pointer-events: none; }
.promo__inner { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); min-block-size: 2.5rem; padding-block: .3rem; }
.promo__text { font-size: var(--fs-sm); color: rgba(245,245,247,.72); }
.promo__text b { font-weight: 600; color: #f5f5f7; }
.promo__sep { margin-inline: .45rem .3rem; }
.promo__btn { display: inline-flex; align-items: center; gap: .35rem; flex: none; padding: .3rem .85rem; border-radius: 999px;
  background: #f5f5f7; color: #0a0a0b; font-weight: 600; font-size: var(--fs-xs); transition: background-color var(--dur-2) var(--ease-out); }
.promo__btn svg { inline-size: .9em; block-size: .9em; transition: transform var(--dur-2) var(--ease-out); }
.promo:hover .promo__btn { background: #fff; }
.promo:hover .promo__btn svg { transform: translateX(2px); }
.promo__short { display: none; }
@media (max-width: 40rem) {
  .promo__inner { justify-content: space-between; gap: var(--sp-2); }
  .promo__long { display: none; }
  .promo__short { display: inline; }
}
.dcr-ended { display: none; }
.promo-ended .dcr-ended { display: block; }
.promo-ended .dcr-live, .promo-ended #claim { display: none; }
/* While the strip is showing, the first band gets its height added on top so nothing crowds it */
:root:has(.promo) { --promo-h: 2.5rem; }
:root:has(.promo) .hero__inner { padding-top: calc(var(--header-h) + var(--promo-h) + clamp(3rem, 6vw, 5rem)); }
:root:has(.promo) .area-hero, :root:has(.promo) .post-hero { padding-top: calc(var(--header-h) + var(--promo-h) + clamp(3.5rem, 7vw, 6rem)); }
/* Fleet photo: show the trucks and the sign on wide screens, the trucks on narrow ones */
.photo--fleet img { object-position: 50% 55%; }
/* Hero photo: truck sits on the right, text over the smoke on the left; phones keep the truck in frame */
.hero__bg { object-position: 62% 50%; }
@media (max-width: 48rem) { .hero__bg { object-position: 78% 50%; } }
.hero__bg { filter: brightness(1) contrast(1.08); }
/* Touch screens: the special strip and its pill get a full thumb-sized target */
@media (hover: none), (max-width: 62rem) {
  :root:has(.promo) { --promo-h: 3rem; }
  .promo__inner { min-block-size: 3rem; }
  .promo__btn { min-block-size: 2.25rem; padding-inline: 1rem; }
}
/* ---------- Hero photo at its natural shape: the whole width of the photo always shows ----------
   Wide screens: full width, centred top to bottom. Narrow screens: full width at the top,
   fading into the dark band, with the headline below it. */
.hero__bg { object-fit: fill; inset: auto 0 auto 0; top: 50%; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; translate: 0 -50%; }
@media (max-width: 61.99rem) {
  .hero__bg { top: calc(var(--header-h) + var(--promo-h, 0px)); translate: none; }
  .hero::before { background: linear-gradient(180deg, rgba(8,8,9,.35) 0%, rgba(8,8,9,0) calc(var(--header-h) + 6rem),
      rgba(8,8,9,.15) calc(var(--header-h) + var(--promo-h, 0px) + 40vw), var(--band) calc(var(--header-h) + var(--promo-h, 0px) + 66.6vw)); }
  :root:has(.promo) .hero__inner, .hero__inner { padding-top: calc(var(--header-h) + var(--promo-h, 0px) + 50vw); }
  .hero { min-height: 0; }
}
@media (min-width: 62rem) {
  /* never taller than the photo, so it is never zoomed in */
  .hero { min-height: min(100svh, 66.6vw); }
}
@media (min-width: 62rem) and (max-width: 69.99rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40rem) and (max-width: 46rem) { .tiles { grid-template-columns: 1fr; } }
/* ---------- Tablet pass ---------- */
/* Engine cards: one per row until three fit side by side, never two-plus-one */
@media (max-width: 61.99rem) { .engines { grid-template-columns: 1fr; } }
@media (min-width: 62rem) { .engines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Three-card blog rows: two cards on tablets (the third is one tap away under Read more), three on desktop */
@media (min-width: 40rem) and (max-width: 74.99rem) {
  .posts--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts--three > :nth-child(3) { display: none; }
}
@media (min-width: 75rem) { .posts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Blog card summaries: always three lines, so every card in a row matches */
.post-card p:not(.label) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-block-size: calc(3 * 1.55em); }
.photo--city img { object-position: 50% 40%; }
@media (min-width: 62rem) { .photo--city img { object-position: 50% 50%; } }
/* ---------- Hero, integrated: text sits inside the photo, tighter stack ---------- */
.hero h1 { margin-top: 0; }
.hero .lede { margin-top: var(--sp-4); }
.hero .btn-row { margin-top: var(--sp-5); }
.hero__meta { margin-top: var(--sp-3); }
@media (min-width: 62rem) {
  .hero { justify-content: center; }
  .hero__inner, :root:has(.promo) .hero__inner { padding-block: calc(var(--header-h) + var(--promo-h, 0px) + var(--sp-5)) var(--sp-7); }
}
@media (max-width: 61.99rem) {
  /* start the headline a third of the way down the photo, and darken under it */
  .hero__inner, :root:has(.promo) .hero__inner { padding-block: calc(var(--header-h) + var(--promo-h, 0px) + 24vw) var(--sp-6); }
  .hero::before { background: linear-gradient(180deg, rgba(8,8,9,.25) 0%, rgba(8,8,9,.2) calc(var(--header-h) + var(--promo-h, 0px) + 10vw),
      rgba(8,8,9,.62) calc(var(--header-h) + var(--promo-h, 0px) + 30vw), var(--band) calc(var(--header-h) + var(--promo-h, 0px) + 66.6vw)); }
}
/* Sticky call bar slides in once the hero buttons are off screen */
.callbar { transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), visibility var(--dur-2); }
html.cb-hide .callbar { transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .callbar { transition: none; } }
/* ---------- Hero block ends at the G of "Spartanburg" ---------- */
.hero h1 > span:first-child { inline-size: fit-content; }
.hero--g .lede { max-width: none; inline-size: var(--g); text-align: justify; }
.hero--g .btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: var(--g); }
.hero--g .btn-row .btn { justify-content: center; padding-inline: .75rem; white-space: nowrap; }
.hero--g .hero__meta { display: flex; justify-content: space-between; gap: var(--sp-2); inline-size: var(--g); }
.hero--g .hero__meta .sep { display: none; }
.hero--g .lede { font-size: var(--fs-body); line-height: 1.6; word-spacing: -.02em; }
.hero--g-stack .btn-row { grid-template-columns: 1fr; }
.hero--g-stack .hero__meta { flex-direction: column; gap: .15rem; }
/* Phones: headline sized so "Diesel repair & service." always fits on one line */
@media (max-width: 47.99rem) {
  .hero h1 { font-size: clamp(1.5rem, calc((100vw - 2.5rem) / 11), 2.75rem); }
  .hero h1 > .l2 { white-space: nowrap; }
}
.hero--g-stack .lede { font-size: var(--fs-sm); line-height: 1.6; }
/* ---------- Phones and tablets: same hero as desktop — text over the photo, block ends at the G ---------- */
@media (max-width: 61.99rem) {
  .hero { min-height: 0; justify-content: center; }
  .hero__bg { inset: 0; top: 0; translate: none; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; object-position: 72% 50%; }
  .hero::before { background: linear-gradient(90deg, rgba(8,8,9,.88) 0%, rgba(8,8,9,.6) 55%, rgba(8,8,9,.25) 100%),
      linear-gradient(0deg, var(--band) 0%, rgba(10,10,11,0) 30%); }
  .hero__inner, :root:has(.promo) .hero__inner { padding-block: calc(var(--header-h) + var(--promo-h, 0px) + var(--sp-6)) var(--sp-6); }
  .hero--g .btn-row { gap: var(--sp-1); }
}
/* Phones: everything inside the width of "Spartanburg" */
.hero--g-sm .lede { font-size: .8125rem; line-height: 1.55; }
.hero--g-sm .btn-row { gap: .375rem; }
.hero--g-sm .btn-row .btn { display: inline-flex; min-height: 2.75rem; padding: .5rem .25rem; font-size: .8125rem; gap: .3rem; }
.hero--g-sm .btn-row .btn svg { inline-size: .9em; block-size: .9em; }
.hero--g-sm .hero__an { display: none; }
.hero--g-sm .hero__meta { flex-direction: column; gap: .1rem; font-size: .75rem; }
@media (max-width: 61.99rem) {
  /* let the truck show: lighter wash, darker only behind the text column */
  .hero::before { background: linear-gradient(90deg, rgba(8,8,9,.82) 0%, rgba(8,8,9,.55) 45%, rgba(8,8,9,.08) 80%),
      linear-gradient(0deg, var(--band) 0%, rgba(10,10,11,0) 22%); }
  .hero__bg { object-position: 78% 50%; filter: contrast(1.08); }
}
.hero--g-stack .btn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero--g .hero__meta span { display: inline; white-space: nowrap; }
.hero--g-md .btn-row .btn { font-size: .9375rem; padding-inline: .5rem; }
.hero--g-md .lede { font-size: .9375rem; }
/* ---------- Phones + tablets: the whole photo, never cropped ---------- */
@media (max-width: 61.99rem) {
  .hero { justify-content: flex-start; min-height: calc(var(--header-h) + var(--promo-h, 0px) + 66.67vw); }
  .hero__bg { inset: auto 0 auto 0; top: calc(var(--header-h) + var(--promo-h, 0px)); inline-size: 100%; block-size: auto;
    aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; }
}
/* Tablets: the text fits inside the photo, as on desktop */
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .hero::before { background: linear-gradient(90deg, rgba(8,8,9,.8) 0%, rgba(8,8,9,.5) 45%, rgba(8,8,9,.05) 80%),
      linear-gradient(0deg, var(--band) 0%, rgba(10,10,11,0) 18%); }
  .hero__inner, :root:has(.promo) .hero__inner { padding-block: calc(var(--header-h) + var(--promo-h, 0px) + var(--sp-5)) var(--sp-5); }
}
/* Phones: headline over the photo, the rest just under it on the dark band */
@media (max-width: 47.99rem) {
  .hero::before { background: linear-gradient(180deg, rgba(8,8,9,.15) 0%, rgba(8,8,9,.15) calc(var(--header-h) + var(--promo-h, 0px) + 25vw),
      rgba(8,8,9,.7) calc(var(--header-h) + var(--promo-h, 0px) + 50vw), var(--band) calc(var(--header-h) + var(--promo-h, 0px) + 66.67vw)); }
  .hero__inner, :root:has(.promo) .hero__inner { padding-block: calc(var(--header-h) + var(--promo-h, 0px) + 38vw) var(--sp-6); }
}
/* Phones: buttons stack, each exactly the width of "Spartanburg" */
.hero--g-sm .btn-row { grid-template-columns: 1fr; gap: var(--sp-1); }
.hero--g-sm .btn-row .btn { min-height: 2.75rem; font-size: .875rem; padding-inline: .5rem; }
.hero--g-sm .hero__an { display: inline; }
.hero--g-sm .hero__city, .hero--g-md .hero__city { display: none; }
.hero--g-md .hero__meta { font-size: var(--fs-xs); }
.hero--g-sm .lede { font-size: .75rem; line-height: 1.55; }
.hero--g-sm .btn-row .btn { font-size: .8125rem; }
.hero--g-sm .hero__meta { font-size: .6875rem; }
@media (max-width: 47.99rem) { .hero__inner, :root:has(.promo) .hero__inner { padding-top: calc(var(--header-h) + var(--promo-h, 0px) + 44vw); } }
/* ---------- Phone hero, by the book: 16px+ body, 48px full-width buttons, headline 32-40px on two lines ---------- */
@media (max-width: 47.99rem) {
  .hero h1 { font-size: clamp(1.75rem, calc((100vw - 2.5rem) / 9.4), 2.5rem); }
  .hero__inner, :root:has(.promo) .hero__inner { padding-top: calc(var(--header-h) + var(--promo-h, 0px) + 42vw); padding-bottom: var(--sp-6); }
  .hero .lede { margin-top: var(--sp-4); font-size: 1rem; line-height: 1.55; max-width: none; text-align: left; color: rgba(245,245,247,.82); }
  .hero .btn-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin-top: var(--sp-5); inline-size: 100%; }
  .hero .btn-row .btn { min-height: 3.25rem; font-size: 1rem; justify-content: center; }
  .hero__meta { display: block; margin-top: var(--sp-4); font-size: var(--fs-sm); color: rgba(245,245,247,.62); }
  .hero__meta span { display: block; }
  .hero__meta .sep { display: none; }
  .hero .hero__an, .hero .hero__city { display: inline; }
}
/* Normal word spacing (no justify gaps) and the hours + address on one line, all sizes */
.hero .lede, .hero--g .lede { text-align: left; word-spacing: normal; }
.hero__meta, .hero--g .hero__meta { display: block; white-space: nowrap; }
.hero__meta span, .hero--g .hero__meta span { display: inline; }
.hero__meta .sep, .hero--g .hero__meta .sep { display: inline; }
.hero .hero__city { display: inline; }
@media (max-width: 47.99rem) { .hero__meta { font-size: .875rem; } }
@media (max-width: 24.5rem) { .hero .hero__city { display: none; } }
/* Phones: nudge the hero text further up over the photo; the photo stays put */
@media (max-width: 47.99rem) {
  .hero__inner, :root:has(.promo) .hero__inner { padding-top: calc(var(--header-h) + var(--promo-h, 0px) + 32vw); }
  .hero::before { background: linear-gradient(180deg, rgba(8,8,9,.15) 0%, rgba(8,8,9,.2) calc(var(--header-h) + var(--promo-h, 0px) + 16vw),
      rgba(8,8,9,.72) calc(var(--header-h) + var(--promo-h, 0px) + 42vw), var(--band) calc(var(--header-h) + var(--promo-h, 0px) + 66.67vw)); }
}
/* ---------- Contact: heading + one contact card, top and bottom aligned with the form ---------- */
.form-wrap { align-items: stretch; }
.contact-side { display: flex; flex-direction: column; gap: var(--sp-5); }
.contact-side .head { margin-bottom: 0; }
.contact-side .lede { max-width: 38ch; }
@media (min-width: 62rem) { .contact-side { justify-content: space-between; } }
.contact-card { display: grid; padding: var(--sp-1) var(--sp-4); border-radius: var(--r-lg); }
.contact-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding-block: var(--sp-3); text-decoration: none; color: var(--band-fg); }
.contact-row + .contact-row { border-top: 1px solid var(--band-rule); }
.contact-row span { display: grid; gap: .15rem; min-width: 0; }
.contact-row small { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--band-fg-2); }
.contact-row b { font-weight: 600; font-size: var(--fs-body); }
.contact-row--call b { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); letter-spacing: .01em; line-height: 1.05; }
.contact-row .icon-dot { background: rgba(255,255,255,.1); color: #fff; }
.contact-row--call .icon-dot { background: #f5f5f7; color: #0a0a0b; }
.contact-row__go { inline-size: 1.1rem; block-size: 1.1rem; color: var(--band-fg-2); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2); }
a.contact-row:hover .contact-row__go { transform: translateX(3px); color: #fff; }
/* ---------- Contact, merged: one card — dark info pane + form pane ---------- */
.form-wrap--merged { gap: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
@media (min-width: 62rem) { .form-wrap--merged { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.form-wrap--merged .contact-side { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); gap: var(--sp-6); }
.form-wrap--merged .form.panel { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: transparent; box-shadow: none; border-radius: 0; }
.form-wrap--merged .contact-card { padding: 0; background: none; border-top: 1px solid var(--band-rule); }
.form-wrap--merged .contact-row { padding-block: var(--sp-3); }
.form-wrap--merged .contact-row + .contact-row { border-top-color: var(--band-rule); }
.form-wrap--merged .contact-side .lede { color: var(--band-fg-2); }
.form-wrap--merged .contact-side h2 { color: var(--band-fg); }
.form-wrap--merged .contact-card { border-radius: 0; }
/* ---------- Form: pick-a-reason chips ---------- */
.needs-pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.needs-pick legend, .field > label { font-size: var(--fs-sm); font-weight: 600; padding: 0; margin-bottom: var(--sp-2); }
.opt { font-weight: 400; color: var(--ink-3); }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); }
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.chip span { display: flex; align-items: center; gap: .5rem; min-block-size: 3rem; padding: .6rem .9rem; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong); font-weight: 600; font-size: var(--fs-sm); line-height: 1.25;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.chip span::before { content: ""; flex: none; inline-size: 1.05rem; block-size: 1.05rem; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--rule-strong);
  background: var(--input-bg) center / 70% no-repeat; }
.chip:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.chip input:checked + span::before { box-shadow: none; background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.field textarea#f-msg { min-height: 5rem; }
@media (max-width: 22rem) { .chips { grid-template-columns: 1fr; } }
.chip span { block-size: 100%; }
@media (max-width: 30rem) {
  .chips { grid-template-columns: 1fr; gap: .375rem; }
  .chip span { min-block-size: 2.75rem; }
}
/* DCR strip: more ceiling and floor */
:root:has(.promo) { --promo-h: 3.5rem; }
.promo__inner { min-block-size: 3.5rem; padding-block: .75rem; }
.promo__btn { padding: .45rem 1rem; }
@media (hover: none), (max-width: 62rem) {
  :root:has(.promo) { --promo-h: 3.75rem; }
  .promo__inner { min-block-size: 3.75rem; padding-block: .75rem; }
}
/* Two dark sections back to back read as one band: one gap between them, not two */
.section.band + .section.band { padding-top: 0; }

/* ---------- Phone hero: taller photo, text on the image, room to breathe ---------- */
@media (max-width: 47.99rem) {
  .hero { min-height: 0; }
  .hero__bg { top: calc(var(--header-h) + var(--promo-h, 0px)); block-size: 128vw; aspect-ratio: auto;
    object-fit: cover; object-position: 64% 50%; }
  .hero::before { background: linear-gradient(180deg, rgba(8,8,9,.12) 0%, rgba(8,8,9,.12) calc(var(--header-h) + var(--promo-h, 0px) + 20vw),
      rgba(8,8,9,.55) calc(var(--header-h) + var(--promo-h, 0px) + 62vw),
      rgba(8,8,9,.9) calc(var(--header-h) + var(--promo-h, 0px) + 100vw), var(--band) calc(var(--header-h) + var(--promo-h, 0px) + 128vw)); }
  .hero__inner, :root:has(.promo) .hero__inner { padding-top: calc(var(--header-h) + var(--promo-h, 0px) + 46vw); padding-bottom: var(--sp-7); }
  .hero .lede { margin-top: var(--sp-5); }
  .hero .btn-row { margin-top: var(--sp-6); gap: var(--sp-3); }
}
/* Form: spam trap, status, sent state */
.hp { position: absolute; left: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.form__status:empty { display: none; }
.form__status { font-size: var(--fs-sm); font-weight: 600; }
.form__status.is-error { color: var(--danger); }
.form.is-sent { align-content: center; }
.form__done { display: grid; gap: var(--sp-2); padding-block: var(--sp-6); }
.form__done p:not(.label) { color: var(--ink-2); }
.form__done a { color: var(--ink); font-weight: 600; }
/* DCR strip in red */
.promo { background: #b3121b; border-bottom-color: rgba(0,0,0,.18); }
.promo__text { color: rgba(255,255,255,.86); }
.promo__text b { color: #fff; }
.promo__btn { background: #fff; color: #8e0e15; }
.promo:hover .promo__btn { background: #fff; color: #6f0a10; }
/* Back-to-back dark sections: one continuous band (no second glow at the seam), and a real gap before the next heading */
.section.band + .section.band { padding-top: clamp(3.5rem, 2rem + 5vw, 6rem); background: var(--band); }