/* ==========================================================================
   Manrope, self-hosted.
   Was a render-blocking request to fonts.googleapis.com plus a second
   connection to fonts.gstatic.com — two DNS lookups and two TLS handshakes
   before a single glyph could paint, on the critical path of every page.

   ONE FILE covers every weight: Manrope is a variable font (wght 200-800), and
   Google serves the same woff2 for 400/500/600/700/800. Declaring the range on
   a single @font-face is what makes that work — five static faces would be five
   downloads of the same bytes.

   latin-ext costs nothing when unused: unicode-range means the browser only
   fetches it if a character in that range actually appears.
   ========================================================================== */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   ONDMOVE Auto — design system
   Palette from automotive glass seen edge-on + the dry Temecula valley.
   One typeface (Archivo variable), width axis used as hierarchy.
   ========================================================================== */

:root {
  /* Ground */
  --black:     #000000;   /* true black, not a tinted stand-in */
  --coal:      #141417;   /* raised dark surface */
  --coal-2:    #1D1D21;   /* dark surface, hover */
  --white-bg:  #FFFFFF;   /* page */
  --paper:     #F4F4F5;   /* alternating light section */

  /* Type */
  --white:      #FFFFFF;
  --grey-400:   #9A9AA2;  /* muted on dark */
  --grey-900:   #131316;  /* headings on light */
  --grey-600:   #56565C;  /* body on light */

  /* Accent */
  --red:        #C8102E;  /* fills, rules, markers */
  --red-hot:    #E8203C;  /* accent on black, hover */
  --red-ink:    #A50D25;  /* accent on white */

  /* Lines */
  --line-dark:  rgba(255,255,255,0.18);
  --line-light: rgba(19,19,22,0.16);
  --line-hair:  rgba(19,19,22,0.08);

  /* Metrics */
  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --r: 3px;
  --r-lg: 10px;

  /* Type scale — perfect fourth, fluid */
  --t-xs:  0.78rem;
  --t-sm:  0.92rem;
  --t-b:   1.0625rem;
  --t-md:  clamp(1.15rem, 0.9rem + 0.8vw, 1.4rem);
  --t-lg:  clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --t-xl:  clamp(2rem, 1.3rem + 3vw, 3.3rem);
  --t-2xl: clamp(2.2rem, 1.1rem + 4.3vw, 4.3rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

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

/* ---------- Base ---------- */
body {
  background: var(--white-bg);
  color: var(--grey-900);
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-b);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.prose { max-width: 66ch; }
.prose p + p { margin-top: 1em; }
.prose p + h3 { margin-top: 2em; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--red-ink); }

:focus-visible {
  outline: 2px solid var(--red-hot);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--red-hot); color: var(--black);
  padding: 0.6rem 1rem; font-weight: 700;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Type roles ---------- */
.display, h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: var(--t-xl); }
.h-hero { font-size: var(--t-2xl); line-height: 1.0; letter-spacing: -0.035em; }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); line-height: 1.2; letter-spacing: -0.02em; }
h4 { font-size: var(--t-b); letter-spacing: -0.01em; }
.lede { font-size: var(--t-md); line-height: 1.45; max-width: 46ch; }

.section-intro { max-width: 52ch; margin-top: 0.9rem; color: var(--grey-600); }
.on-dark .section-intro, .on-dark .meta { color: var(--grey-400); }

/* ---------- Sections ---------- */
section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.on-dark { background: var(--black); color: var(--white); }
.on-light-raised { background: var(--paper); }
.tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* The film band — a graduated strip at the seam of a dark section.
   The one decorative device on the site; it stands for the film itself. */
.film-band { height: 4px; background: var(--black); position: relative; }
.film-band::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%;
  width: clamp(120px, 18vw, 260px); background: var(--red);
}

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--black); color: var(--white);
  border-bottom: 1px solid var(--line-dark);
}
.head-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.brand { display: block; line-height: 0; text-decoration: none; margin-right: auto; }
.brand img { height: 38px; width: auto; }
.brand-foot { margin-right: 0; }
.brand-foot img { height: 52px; }
@media (max-width: 900px) { .brand img { height: 28px; } }

.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a { text-decoration: none; font-size: var(--t-sm); font-weight: 600; color: var(--white); padding-block: 0.4rem; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--red-hot); }
.head-tel { text-decoration: none; font-weight: 700; white-space: nowrap; }
/* the header CTA needs its own metrics; the page button padding is too tall for a nav bar */
.site-head .btn { padding: 0.68rem 1.3rem; line-height: 1.25; }

.nav-toggle { display: none; background: none; border: 1px solid var(--line-dark); color: inherit; border-radius: var(--r); padding: 0.45rem 0.7rem; font-weight: 600; font-size: var(--t-sm); cursor: pointer; }

@media (max-width: 760px) { .site-head .btn-primary { display: none; } }
@media (max-width: 900px) {
  .nav-toggle { display: block; order: 3; }
  .head-tel { font-size: var(--t-sm); }
  .nav {
    order: 4; flex-basis: 100%; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: 0.75rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: 0.7rem 0; border-bottom: 1px solid var(--line-dark); }
  .head-inner { flex-wrap: wrap; padding-block: 0.6rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-weight: 700; font-size: var(--t-sm); letter-spacing: 0.005em;
  padding: 0.85rem 1.4rem; border-radius: var(--r); border: 1.5px solid transparent;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-hot); }
.btn-ghost-dark { border-color: var(--line-dark); color: var(--white); }
.btn-ghost-dark:hover { border-color: var(--red-hot); color: var(--red-hot); }
.btn-ghost-light { border-color: var(--line-light); color: var(--grey-900); }
.btn-ghost-light:hover { border-color: var(--black); background: var(--black); color: var(--white); }
.btn-solid-dark { background: var(--black); color: var(--white); }
.btn-solid-dark:hover { background: var(--coal-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }

/* ---------- Hero ---------- */
.hero { background: var(--black); color: var(--white); padding-block: clamp(3.5rem, 9vw, 7.5rem); }
/* Top-aligned, not centred. The right column is the quote form on every page
   that uses this grid, and it is far taller than the copy beside it — so
   centring pushed the headline down by roughly the difference, past the fold
   and onto the brightest part of the hero photo where it read worst. Adding
   the consent notice made the form taller again and the gap with it. */
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; align-items: start; } }
.hero .lede { color: var(--white); margin-top: 1.3rem; font-size: var(--t-md); font-weight: 600; letter-spacing: -0.015em; max-width: 34ch; }
.hero-sub { margin-top: 1.1rem; max-width: 56ch; font-size: var(--t-b); line-height: 1.6; color: var(--grey-400); }
.hero .trust-row { margin-top: 1.9rem; }

/* load reveal — one orchestrated moment, nothing else animates on scroll */
.reveal > * { animation: rise 620ms cubic-bezier(.2,.7,.3,1) both; }
.reveal > *:nth-child(2) { animation-delay: 90ms; }
.reveal > *:nth-child(3) { animation-delay: 170ms; }
.reveal > *:nth-child(4) { animation-delay: 240ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Photo slots (placeholders + shot list) ---------- */
.photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 12px, transparent 12px 24px),
    var(--coal);
  border: 1px dashed rgba(232,32,60,0.45);
  display: flex; align-items: flex-end;
  min-height: 300px; color: var(--white);
}
.on-light-raised .photo, body > main .photo { color: var(--white); }
.photo p { padding: 1rem 1.1rem; font-size: var(--t-xs); font-weight: 600; line-height: 1.45; color: var(--grey-400); }
.photo p b { display: block; color: var(--red-hot); font-weight: 700; margin-bottom: 0.15rem; }

.photo--real { border: 0; background: var(--coal); display: block; min-height: 0; overflow: hidden; border-radius: var(--r-lg); margin: 0; }
.photo--real img { display: block; width: 100%; height: auto; }
.hero .photo--real, .photo-grid .photo--real { aspect-ratio: 4 / 5; }
.hero .photo--real img, .photo-grid .photo--real img { height: 100%; object-fit: cover; }

/* ---------- Spec rows (not cards — the content really is specs) ---------- */
.spec { border-top: 1px solid var(--line-light); margin-top: 2.5rem; }
.on-dark .spec { border-color: var(--line-dark); }
.spec > div {
  display: grid; grid-template-columns: minmax(150px, 22%) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.5rem 0; border-bottom: 1px solid var(--line-light);
}
.on-dark .spec > div { border-color: var(--line-dark); }
@media (max-width: 720px) { .spec > div { grid-template-columns: 1fr; gap: 0.4rem; } }
.spec h3 { margin: 0; }
.spec p { margin: 0; color: var(--grey-600); max-width: 62ch; }
.on-dark .spec p { color: var(--grey-400); }

/* ---------- Tint scale — the signature element ---------- */
.tintscale { margin-top: 2.5rem; }
.tintscale-bar {
  position: relative; height: 84px; border-radius: var(--r-lg); margin-top: 2.4rem;
  background: linear-gradient(90deg, #000 0%, #0D0D0F 16%, #34343A 36%, #6C6C74 56%, #A4A4AC 72%, #D5D5DA 88%, #FFF 100%);
  border: 1px solid var(--line-dark);
}
.tintscale-legal {
  position: absolute; top: 0; bottom: 0; left: 75%;
  width: 2px; background: var(--red);
}
.tintscale-legal::before {
  content: ""; position: absolute; left: 0; top: -0.7rem; width: 2px; height: 0.7rem;
  background: var(--red);
}
.tintscale-legal::after {
  content: "70% \2014 California legal floor, front side windows";
  position: absolute; right: 0.55rem; left: auto; top: -2.15rem;
  font-size: var(--t-xs); font-weight: 700;
  color: var(--red); white-space: nowrap; text-align: right;
}
@media (max-width: 760px) {
  .tintscale-legal::after { content: "70% legal floor"; }
  .tintscale-ticks span { font-size: 0.68rem; }
}
.tintscale-ticks { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 0.6rem; }
.tintscale-ticks span { text-align: center; font-size: var(--t-xs); font-weight: 600; color: var(--grey-400); }
.tintscale-note { margin-top: 1.4rem; font-size: var(--t-sm); color: var(--grey-400); max-width: 62ch; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.cols-2 > * + * { min-width: 0; }
@media (max-width: 860px) { .cols-2 { grid-template-columns: 1fr; } }

/* ---------- Q&A ---------- */
.qa { margin-top: 2.5rem; border-top: 1px solid var(--line-light); max-width: 76ch; }
.on-dark .qa { border-color: var(--line-dark); }
.qa details { border-bottom: 1px solid var(--line-light); }
.on-dark .qa details { border-color: var(--line-dark); }
.qa summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative; font-weight: 700; font-size: var(--t-b);
  letter-spacing: -0.012em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 1.55rem;
  width: 11px; height: 11px;
  border-right: 2px solid var(--red-ink); border-bottom: 2px solid var(--red-ink);
  transform: rotate(45deg); transition: transform 180ms ease;
}
.on-dark .qa summary::after { border-color: var(--red-hot); }
.qa details[open] summary::after { transform: rotate(-135deg); }
.qa summary:hover { color: var(--red-ink); }
.on-dark .qa summary:hover { color: var(--red-hot); }
.qa .a { padding: 0 2.5rem 1.4rem 0; color: var(--grey-600); max-width: 66ch; }
.on-dark .qa .a { color: var(--grey-400); }
.qa .a p + p { margin-top: 0.8em; }

/* ---------- Table ---------- */
.tbl { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: var(--t-sm); }
.tbl th, .tbl td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--line-light); vertical-align: top; }
.on-dark .tbl th, .on-dark .tbl td { border-color: var(--line-dark); }
.tbl th { font-weight: 700; }
.tbl td:first-child { font-weight: 600; width: 34%; }

/* Inline form feedback. Only ever appears after a failed submit — a success
   redirects to /thank-you — so it is styled for the bad case. */
.form-note { margin-top: 0.9rem; font-size: var(--t-sm); line-height: 1.5; color: var(--grey-400); }
.form-note.is-bad { color: #FF8FA0; }
.quote-card .form-note { color: var(--grey-400); }
.quote-card .form-note.is-bad { color: #FF8FA0; }

/* ---------- Customer review band ----------
   Light by default and only ever used on a light section, but the .on-dark
   overrides are here anyway so it cannot repeat the inversion that bit .mode,
   .faq-help and .procrow. */
.rv-band { background: var(--paper); padding-block: clamp(2.75rem, 5vw, 4rem); }
.on-dark .rv-band { background: transparent; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.35rem; border-bottom: 1px solid var(--line-light); }
.on-dark .rv-head { border-bottom-color: var(--line-dark); }
.rv-score { display: flex; align-items: center; gap: 1rem; }
.rv-num { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--grey-900); }
.on-dark .rv-num { color: var(--white); }
.rv-stars { display: flex; gap: 2px; color: #E8A33D; font-size: 1rem; line-height: 1; }
.rv-head .rv-stars { font-size: 1.15rem; }
.rv-count { margin-top: 0.35rem; font-size: var(--t-sm); color: var(--grey-600); font-weight: 600; }
.on-dark .rv-count { color: var(--grey-400); }
.rv-all { font-size: var(--t-sm); font-weight: 700; color: var(--red-ink); text-decoration: none; white-space: nowrap; }
.on-dark .rv-all { color: var(--red-hot); }
.rv-all:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 900px) { .rv-grid { grid-template-columns: 1fr; } }
.rv-card { margin: 0; background: var(--white-bg); border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(1.25rem, 2.4vw, 1.6rem); display: flex; flex-direction: column; gap: 0.85rem; }
.on-dark .rv-card { background: var(--coal); border-color: var(--line-dark); }
.rv-card blockquote { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }
.on-dark .rv-card blockquote { color: var(--grey-400); }
/* margin-top:auto pins the attribution to the bottom, so cards of different
   quote lengths still line their names up across the row */
.rv-card figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 0.5rem; border-top: 1px solid var(--line-hair); }
.on-dark .rv-card figcaption { border-top-color: var(--line-dark); }
.rv-who { font-weight: 700; font-size: var(--t-sm); color: var(--grey-900); }
.on-dark .rv-who { color: var(--white); }
.rv-src { font-size: var(--t-xs); color: var(--text-subtle, #9A9AA2); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- City chips ---------- */
.cities { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.cities a {
  text-decoration: none; font-size: var(--t-sm); font-weight: 600;
  padding: 0.5rem 0.9rem; border: 1px solid var(--line-light); border-radius: 100px;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.on-dark .cities a { border-color: var(--line-dark); }
.cities a:hover { background: var(--black); border-color: var(--black); color: var(--white); }
.on-dark .cities a:hover { background: var(--red); border-color: var(--red); color: var(--white); }

/* ---------- Area cards ----------
   Removed. This was a grid-of-links component that no page ever used — the
   markup for it was cut before handoff, but the styles stayed. Its only
   remaining effect was a collision: `.areas` is ALSO the descriptor line inside
   .opt on /vehicle-wraps (styled at `.opt .areas` further down), and those five
   paragraphs were inheriting this block's background, border and radius, which
   painted a grey bar behind each one. `.opt .areas` could not override them
   because it only sets colour and spacing.
   If a link grid is ever wanted, give it a name of its own — `.areas` is taken. */

/* ---------- Callout ---------- */
.note {
  border-left: 3px solid var(--red); padding: 1.1rem 0 1.1rem 1.25rem;
  margin-top: 2rem; font-size: var(--t-sm); max-width: 66ch; color: var(--grey-600);
}
.on-dark .note { color: var(--grey-400); }
.note b { color: var(--grey-900); }
.on-dark .note b { color: var(--white); }

/* ---------- Quote form ---------- */
.form { display: grid; gap: 1.1rem; margin-top: 2.5rem; max-width: 34rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--t-sm); font-weight: 700; }
.field input, .field select, .field textarea {
  background: var(--paper); border: 1px solid var(--line-light);
  border-radius: var(--r); padding: 0.75rem 0.85rem; font-size: var(--t-b);
}
.on-dark .field input, .on-dark .field select, .on-dark .field textarea {
  background: var(--coal); border-color: var(--line-dark); color: var(--white);
}
.field textarea { min-height: 110px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--red); color: var(--white); }
.cta-band h2 { max-width: 20ch; }
.cta-band p { margin-top: 0.9rem; max-width: 50ch; color: rgba(255,255,255,0.86); }
.cta-band .btn-solid-dark { margin-top: 1.8rem; }
/* Split variant: copy left, photograph right. Only the thank-you page uses it —
   the blog and article CTAs stay full-width, so this is a modifier. */
.cta-band--split .cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
/* The cells stretch so the photo fills the row, but that leaves the copy
   top-aligned inside a taller cell — reading as though the two are misaligned.
   Centre the copy against the photo rather than against the top of its cell.
   align-items:flex-start keeps the button its own width — a flex column
   otherwise stretches it edge to edge. */
.cta-band--split .cta-split > :first-child { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.cta-shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; max-width: 100%; min-height: 260px; }
/* height:100% here is doing real work. The img carries width/height attributes
   for CLS, and those become USED dimensions — which means aspect-ratio on the
   image is ignored and it lays out at a literal 800px tall whatever column it
   is in. Letting the grid row set the height instead keeps the band the height
   of its copy rather than the height of the file. */
.cta-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  /* one column, so there is no text column to match — give it its own ratio */
  .cta-band--split .cta-split { grid-template-columns: 1fr; }
  .cta-shot { min-height: 0; aspect-ratio: 16 / 9; }
}

.cta-lines { margin-top: 1.5rem; font-weight: 700; }
.cta-lines a { text-decoration: none; }
.cta-lines a:hover { text-decoration: underline; }

/* ---------- Blog ---------- */
.post { max-width: 68ch; }
.post h2 { margin-top: 2.6rem; }
.post h3 { margin-top: 2rem; }
.post p, .post ul, .post .tbl { margin-top: 1rem; }
.post ul:not([class]) { padding-left: 1.2rem; }
.post ul:not([class]) li { margin-top: 0.45rem; }
.post-meta { margin-top: 1.2rem; font-size: var(--t-sm); font-weight: 600; color: var(--grey-600); }
.postcard { border-top: 1px solid var(--line-light); padding: 1.6rem 0; display: block; text-decoration: none; }
.postcard:hover h3 { color: var(--red-ink); }
.postcard p { margin-top: 0.4rem; color: var(--grey-600); font-size: var(--t-sm); max-width: 66ch; }

/* ---------- Footer ---------- */
.site-foot { background: var(--black); color: var(--white); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: clamp(1.75rem, 4vw, 3rem); }
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.site-foot h4 { font-size: var(--t-sm); color: var(--red-hot); margin-bottom: 0.9rem; }
.site-foot ul { display: grid; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.site-foot a { text-decoration: none; font-size: var(--t-sm); color: var(--grey-400); }
.site-foot a:hover { color: var(--white); }
.foot-blurb { font-size: var(--t-sm); color: var(--grey-400); max-width: 34ch; margin-top: 0.9rem; }
.foot-base {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; justify-content: space-between;
  font-size: var(--t-xs); color: var(--grey-400);
}
.foot-base ul { display: flex; gap: 1.25rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }

/* ============================================================
   Showcase treatment — full-bleed image sections with overlay
   ============================================================ */
.hero--bg { position: relative; background-size: cover; background-position: center; isolation: isolate; }
.hero--bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.74) 40%, rgba(0,0,0,0.42) 70%, rgba(0,0,0,0.26) 100%),
    linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 45%);
}
/* ---- Mobile heroes: a photo band, not a backdrop ----
   A phone hero box is about 371x1650 — a 0.22 ratio. These photographs are
   1.78. With background-size:cover that means the browser scales the image to
   ~2900px wide and shows a 371px strip: roughly 13% of the picture, then blacks
   80-94% of that strip out with the overlay. Every hero was effectively a black
   rectangle on a phone, which is where most of this traffic is.

   No crop fixes that — the box is too tall for any image ratio. So stop trying
   to cover it. The photo is drawn full width at its natural height as a band at
   the top, the copy starts below it, and the overlay only darkens the seam. The
   whole picture is visible and the text sits on solid black.

   Uniform 56vw band: a 16:9 source fills it exactly (56.25vw), and anything
   taller is simply trimmed by the gradient. */
@media (max-width: 760px) {
  /* .hero.hero--bg, not .hero--bg: modifiers like .hero--story re-declare
     padding-block further down the file at the same specificity and would win
     on source order. Two classes beats one, wherever it sits. */
  .hero.hero--bg {
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: calc(56vw + 1.75rem);
  }
  .hero.hero--bg::before {
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.18) 0,
      rgba(0,0,0,0.30) calc(56vw - 90px),
      rgba(0,0,0,0.90) calc(56vw + 6px),
      #000 calc(56vw + 34px));
  }
}

/* Home page only. The home hero photograph is worth showing more of than the
   service and city heroes, several of which are open road shots with a bright
   sky and far less headroom — so this is a modifier, not a change to the
   shared rule.

   Desktop lifts the RIGHT of the horizontal gradient harder than the left: the
   headline and sub-line sit in the left column, so that is where the darkness
   has to stay. Measured against the real composite under the text column, the
   small grey sub-line holds 5.13:1 (was 5.55:1) while roughly 29% more of the
   photograph reads through. Mobile has no such split — the overlay there is a
   plain vertical one — so it takes the straight reduction.

   background-position: the band is wider than the photograph, so `cover` crops
   it top and bottom whatever the file is — re-cropping the file alone does not
   hold. Moving the focal point down lifts the car in the band and keeps the
   whole wheel above the bottom edge. Scoped here, so the thirteen service and
   city heroes keep the shared `center`. */
.hero--bg.hero--lift { background-position: center 62%; }
.hero--bg.hero--lift::before {
  background:
    linear-gradient(100deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.70) 40%, rgba(0,0,0,0.32) 70%, rgba(0,0,0,0.14) 100%),
    linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 45%);
}
@media (max-width: 760px) {
  /* The home photograph is 1.25, not 16:9, so it stands taller than the band and
     the top of it is sky. Pull it up to put the car and its wheel in frame —
     the same decision as the desktop 62% focal point, expressed for a band. */
  .hero.hero--bg.hero--lift { background-position: center -20vw; }
  /* and it takes the shared band overlay: the lighter desktop lift is a
     left-to-right gradient that means nothing once the photo is a band */
  .hero.hero--bg.hero--lift::before {
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.18) 0,
      rgba(0,0,0,0.30) calc(56vw - 90px),
      rgba(0,0,0,0.90) calc(56vw + 6px),
      #000 calc(56vw + 34px));
  }
}

/* Trust row — the reassurance strip under a headline */
.trust-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-top: 1.6rem; }
.trust-row li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-sm); font-weight: 600; color: var(--white); }
.trust-row li::before { content: ""; width: 6px; height: 6px; background: var(--red); border-radius: 50%; }

/* Quote card — the primary conversion surface, above the fold */
.quote-card {
  background: rgba(20,20,23,0.92); backdrop-filter: blur(6px);
  border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.quote-card h2 { font-size: var(--t-md); }
.quote-card .sub { margin-top: 0.4rem; font-size: var(--t-sm); color: var(--grey-400); }
.quote-card .form { margin-top: 1.25rem; gap: 0.85rem; max-width: none; }
.quote-card .field input, .quote-card .field select { background: rgba(0,0,0,0.55); border-color: var(--line-dark); color: var(--white); padding: 0.7rem 0.8rem; }
.quote-card .field label { color: var(--grey-400); font-size: var(--t-xs); }
.quote-card .btn { width: 100%; text-align: center; padding-block: 0.95rem; }
.quote-card .reassure { margin-top: 0.9rem; font-size: var(--t-xs); color: var(--grey-400); text-align: center; }

/* Sticky action bar — mobile conversion */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: none; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(0,0,0,0.94); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-dark);
}
.mobile-cta .btn { text-align: center; padding-block: 0.85rem; }
@media (max-width: 760px) {
  .mobile-cta { display: grid; }
  body { padding-bottom: 4.6rem; }
}
@keyframes mq { to { transform: translateX(calc(-50% - 6px)); } }

/* Feature break — bright image, type sits in a solid panel beside it */
.feature {
  position: relative; background-size: cover; background-position: center;
  min-height: clamp(420px, 56vw, 620px); display: grid; align-items: center;
  isolation: isolate;
}
.feature .wrap { width: 100%; position: relative; }
.feature-panel {
  background: var(--red); color: var(--white);
  padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--r-lg); max-width: 34rem;
}
.feature-panel h2 { max-width: 16ch; }
.feature-panel p { margin-top: 0.9rem; color: rgba(255,255,255,0.9); max-width: 42ch; }
.feature-panel .btn { margin-top: 1.6rem; }

/* Review, enlarged */
.review-lg blockquote { font-size: clamp(1.3rem, 0.9rem + 1.4vw, 2rem); line-height: 1.28; letter-spacing: -0.025em; max-width: 24ch; }
.review-lg blockquote { max-width: 30ch; }
.logo-track { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); width: max-content; animation: mq 46s linear infinite; }
.logo-item {
  flex: none; background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: 0.6; transition: opacity 160ms ease;
}
.logo-item:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }

/* ------------------------------------------------------------------
   Manrope has no width axis, so the hierarchy that used to come from
   expanded/condensed widths is rebuilt from weight and tracking.
   ------------------------------------------------------------------ */
.meta, .hero-facts dt, .hero-facts b, .photo p, .tbl th, .review .who,
.site-foot h4, .build-note b, .field label, .post-meta, .stat span,
.stat-type span, .logo-strip .label, .tintscale-ticks span,
.trust-row li, .note b, .svc .go, .svc-card .go, .quote-card .field label {
  letter-spacing: 0.015em;
  font-weight: 700;
}
.tintscale-legal::after { letter-spacing: 0.015em; font-weight: 700; }

/* Display weight: Manrope needs 800 to carry headline scale */
h1, h2, .display, .h-hero, .stat b, .stat-type b, .steps li::before { font-weight: 800; }
h3, h4, .qa summary { font-weight: 700; }

/* Manrope runs a touch wider than Archivo at display sizes */
.h-hero { letter-spacing: -0.035em; }
body { font-weight: 400; }
.lede, .hero .lede { font-weight: 600; }

/* ============================================================
   Services section — photo carries the service name only;
   benefit copy and link sit below on the black ground.
   ============================================================ */
.section-services { padding-block: clamp(4.5rem, 9vw, 8rem); }
.section-head { max-width: 48rem; margin-inline: auto; text-align: center; }
.eyebrow {
  display: block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red-hot); margin-bottom: 1rem;
}
.section-head h2 { max-width: none; margin-inline: auto; }
.section-head--tight h2 { text-wrap: nowrap; }
@media (max-width: 900px) { .section-head--tight h2 { text-wrap: balance; } }
.section-head p { margin-top: 1.1rem; margin-inline: auto; color: var(--grey-400); max-width: 66ch; }

/* One column rhythm for all six tiles. Every left edge lines up with the tile
   above it, every card is the same size, every photo the same shape. */
.svc-grid { display: grid; gap: clamp(1.5rem, 2.4vw, 2rem); margin-top: clamp(3rem, 6vw, 5rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc-item { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.svc-shot { position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
.svc-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 460ms cubic-bezier(.2,.7,.3,1);
}

.svc-shot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.52), rgba(0,0,0,0));
}
.svc-label {
  position: absolute; z-index: 2; top: clamp(0.85rem, 1.8vw, 1.1rem);
  left: clamp(0.9rem, 1.8vw, 1.15rem);
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--white);
}
.svc-rule { height: 2px; width: 0; background: var(--red); transition: width 340ms ease; }
.svc-item:hover .svc-img, .svc-item:focus-visible .svc-img { transform: scale(1.045); }
.svc-item:hover .svc-rule, .svc-item:focus-visible .svc-rule { width: 100%; }

.svc-body { padding-top: 1.15rem; display: flex; flex-direction: column; flex: 1; }
/* benefit line demoted to an eyebrow; the service name is now the heading */
.svc-eyebrow {
  display: block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--white);
  margin-bottom: 0.55rem;
}
.svc-name {
  margin-top: 0; color: var(--white); font-weight: 800;
  font-size: clamp(1.2rem, 0.95rem + 0.75vw, 1.45rem);
  line-height: 1.15; letter-spacing: -0.025em;
}
.svc-desc { margin-top: 0.6rem; font-size: var(--t-sm); color: var(--grey-400); max-width: 46ch; line-height: 1.55; }
.svc-go { display: inline-block; margin-top: auto; padding-top: 1rem; font-size: var(--t-sm); font-weight: 700; color: var(--red-hot); }
.svc-item:hover .svc-go { text-decoration: underline; text-underline-offset: 0.2em; }

@media (prefers-reduced-motion: reduce) {
  .svc-item:hover .svc-img { transform: none; }
}

/* Sixth tile: turns the empty slot into the "I don't know what I need" path,
   which is a real segment of this audience. Deliberately photoless so it never
   reads as a service. */
.svc-ask {
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); text-decoration: none; color: inherit;
  background: var(--coal); transition: border-color 200ms ease, background 200ms ease;
}
.svc-ask:hover { border-color: var(--red); background: #17171b; }
.svc-ask .svc-name { margin-top: 0.5rem; max-width: 14ch; }
.svc-ask p { margin-top: 0.6rem; font-size: var(--t-sm); color: var(--grey-400); max-width: 34ch; line-height: 1.55; }
.svc-ask .svc-go { margin-top: 1.25rem; }
.svc-ask .tel { display: block; margin-top: 0.5rem; font-size: var(--t-sm); color: var(--grey-400); }

/* Materials: brand line sits between the service name and the explanation */
.spec .brands { margin-top: 0.2rem; font-weight: 800; color: var(--grey-900); letter-spacing: -0.01em; }
.on-dark .spec .brands { color: var(--white); }
.spec .brands + p { margin-top: 0.45rem; }

/* spec rows now hold three children, so pin the heading left and stack the rest right */

/* section-head sits on light grounds too */
.on-light-raised .section-head p, body > main section:not(.on-dark) .section-head p { color: var(--grey-600); }

/* Trust bar — compact credibility directly under the logo strip, sized to
   reassure rather than to shout. */
.trustbar { background: var(--black); border-top: 1px solid var(--line-dark); padding-block: clamp(1.6rem, 3vw, 2.4rem); }
.trustbar-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trustbar-grid > div { padding-inline: clamp(0.85rem, 2.2vw, 1.75rem); border-left: 1px solid var(--line-dark); }
.trustbar-grid > div:first-child { border-left: 0; padding-left: 0; }
.tb-num { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.1rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; color: var(--white); }
.trustbar-grid > div:first-child .tb-num { color: var(--red-hot); }
.tb-lab { margin-top: 0.45rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-400); line-height: 1.35; }
@media (max-width: 720px) {
  .trustbar-grid { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
  .trustbar-grid > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* closing CTA over photography */
.cta-close .feature-panel { max-width: 40rem; }
.cta-close .feature-panel p { color: var(--grey-400); max-width: 50ch; }
.cta-close .cta-lines { margin-top: 1.4rem; font-size: var(--t-sm); font-weight: 600; color: var(--grey-400); }
.cta-close .cta-lines a { color: var(--white); text-decoration: none; }
.cta-close .cta-lines a:hover { text-decoration: underline; }

/* review panel on About needs a wider measure than the homepage pull-quote */
.feature-panel.review-lg { max-width: 40rem; }
.feature-panel.review-lg blockquote { max-width: 34ch; font-size: clamp(1.15rem, 0.85rem + 1vw, 1.6rem); }
.feature-panel.review-lg .btn { margin-top: 1.5rem; }

/* Typographic testimonial — deliberately not a photo band, so it doesn't
   repeat the device used by the pre-footer CTA. */
.testimonial { background: var(--paper); padding-block: clamp(4rem, 8vw, 7rem); }
.testimonial .inner { max-width: 54rem; margin-inline: auto; text-align: center; }
.testimonial .mark { font-size: clamp(3rem, 6vw, 5rem); line-height: 0.6; color: var(--red); font-weight: 800; }
.testimonial blockquote {
  margin-top: 1.25rem; font-size: clamp(1.35rem, 0.9rem + 1.7vw, 2.3rem);
  line-height: 1.28; letter-spacing: -0.028em; font-weight: 700; color: var(--grey-900);
}
.testimonial .who { margin-top: 1.6rem; font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-600); }
.testimonial .btn-row { justify-content: center; }

/* long-form story column: the portrait tracks the reader on desktop */
@media (min-width: 900px) {
  .story-photo { position: sticky; top: 104px; }
}
.pull {
  border-left: 3px solid var(--red); padding: 0.2rem 0 0.2rem 1.25rem; margin: 1.75rem 0;
  font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em; color: var(--grey-900); max-width: 34ch;
}

/* Three-point grid — breaks a wall of prose into scannable claims */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.point { border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem); background: var(--white-bg); }
.on-dark .point { border-color: var(--line-dark); background: var(--coal); }
.point .n { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-ink); margin-bottom: 0.9rem; }
.on-dark .point .n { color: var(--red-hot); }
.point h3 { margin-bottom: 0.55rem; }
.point p { color: var(--grey-600); font-size: var(--t-sm); line-height: 1.6; }
.on-dark .point p { color: var(--grey-400); }

/* Contact close — the About page's own ending, not the homepage photo band */
.contact-card { border: 1px solid var(--line-dark); border-radius: var(--r-lg); overflow: hidden; }
.contact-card div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 2.5vw, 1.6rem); border-bottom: 1px solid var(--line-dark);
}
.contact-card div:last-child { border-bottom: 0; }
.contact-card dt, .contact-card b {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey-400); white-space: nowrap;
}
.contact-card span { text-align: right; font-weight: 700; color: var(--white); }
.contact-card a { color: var(--white); text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }

/* ---- Pricing page components -------------------------------------------
   Deliberately different devices from home and about: a large statement,
   a numbered card grid, a comparison table, a horizontal process, a red close.
   ----------------------------------------------------------------------- */

/* Large statement beside supporting prose */
.statement { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 880px) { .statement { grid-template-columns: 1fr; } }
.statement-lead {
  font-size: clamp(1.5rem, 0.9rem + 2.3vw, 2.7rem); font-weight: 800;
  line-height: 1.14; letter-spacing: -0.035em; max-width: 18ch; color: var(--grey-900);
}
.on-dark .statement-lead { color: var(--white); }
.statement .prose p { color: var(--grey-600); }
.on-dark .statement .prose p { color: var(--grey-400); }

/* Numbered factor cards */
.points .n.num { font-size: var(--t-md); letter-spacing: -0.02em; text-transform: none; }

/* Horizontal process: four steps across, rule on top of each */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.1rem, 2.4vw, 2rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 960px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }
.flow-step { border-top: 2px solid var(--red); padding-top: 1.15rem; }
.flow-step .n { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-hot); }
.flow-step h3 { margin-top: 0.55rem; }
.flow-step p { margin-top: 0.55rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-400); }

/* Full red close — the third distinct ending on the site */
.cta-red { background: var(--red); color: var(--white); padding-block: clamp(4rem, 8vw, 6.5rem); text-align: center; }
.cta-red .inner { max-width: 46rem; margin-inline: auto; }
.cta-red .eyebrow { color: rgba(255,255,255,0.75); }
.cta-red h2 { color: var(--white); }
.cta-red p { margin-top: 1.1rem; color: rgba(255,255,255,0.9); }
.cta-red .btn-row { justify-content: center; margin-top: 2rem; }
.cta-red .btn-ghost-dark { border-color: rgba(255,255,255,0.6); color: var(--white); }
.cta-red .btn-ghost-dark:hover { background: var(--white); color: var(--red); border-color: var(--white); }
.cta-red .foot { margin-top: 1.6rem; font-size: var(--t-sm); font-weight: 700; color: rgba(255,255,255,0.9); }
.cta-red .foot a { color: var(--white); text-decoration: none; }

/* Accordion sat left under a centered heading, which read as misaligned.
   Only centers where a centered section-head precedes it — city pages keep
   their left-aligned headings and left-aligned lists. */
.section-head + .qa { margin-inline: auto; }

/* Full-overlay closing CTA: the whole photograph is darkened and the copy sits
   directly on it, centered, with no panel. */
.feature--full::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.78) 50%, rgba(0,0,0,0.90) 100%);
}
.feature--full .feature-panel {
  background: transparent; border: 0; backdrop-filter: none; padding: 0;
  max-width: 48rem; margin-inline: auto; text-align: center;
}
.feature--full .feature-panel h2 { max-width: none; }
.feature--full .feature-panel p { margin-inline: auto; }
.feature--full .btn-row { justify-content: center; }
.feature--full .cta-lines { text-align: center; }

/* Centered content block */
.center-block { text-align: center; }
.center-block .cities, .center-block .btn-row { justify-content: center; }
.center-block > p { max-width: 62ch; margin-inline: auto; margin-top: 1.1rem; }

/* Highlight card for the collection-and-return promise */
.highlight {
  border: 1px solid var(--red); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); background: rgba(200,16,46,0.07);
}
.on-dark .highlight { background: rgba(200,16,46,0.14); }
.highlight .n { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-hot); margin-bottom: 0.8rem; }
.highlight p { margin-top: 0.6rem; color: var(--grey-400); font-size: var(--t-sm); line-height: 1.6; }
.highlight .btn { margin-top: 1.3rem; }

/* Certification badge inline with copy */
.cert-inline { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.25rem; }
.cert-inline .badge { background: #FFF; border-radius: var(--r); padding: 0.75rem 1.1rem; }
.cert-inline .badge img { width: 180px; height: auto; display: block; }

/* ======================================================================
   PPF page — components built for this content only
   ====================================================================== */

/* Left-aligned section head, so this page reads differently from the
   centered heads on home and pricing */
.head-left { max-width: 58rem; }
.head-left h2 { max-width: 24ch; margin-top: 0.35rem; }
.head-left p { margin-top: 1.05rem; max-width: 60ch; color: var(--grey-600); }
.on-dark .head-left p { color: var(--grey-400); }

/* Slim "protects against" row — four short claims, hairline separated */
.protects { --pgut: clamp(1rem, 2vw, 1.75rem); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-light); margin-top: clamp(2rem, 4vw, 3rem); }
.on-dark .protects { border-color: var(--line-dark); }
/* Gutter on BOTH sides: this only had padding-right, so every column after the
   first started hard against the divider belonging to the column before it.
   The first column in each row stays flush so it lines up with the heading. */
.protects > div { padding: 1.5rem var(--pgut); border-right: 1px solid var(--line-light); }
.protects > div:nth-child(4n+1) { padding-left: 0; }
.on-dark .protects > div { border-color: var(--line-dark); }
.protects > div:last-child { border-right: 0; padding-right: 0; }
.protects h3 { font-size: var(--t-b); }
.protects p { margin-top: 0.45rem; font-size: var(--t-sm); line-height: 1.55; color: var(--grey-600); }
.on-dark .protects p { color: var(--grey-400); }
@media (max-width: 860px) {
  .protects { grid-template-columns: repeat(2, 1fr); }
  /* two per row now, so the flush-left column is every odd one, not every 4th */
  .protects > div { padding-left: var(--pgut); }
  .protects > div:nth-child(2n+1) { padding-left: 0; }
  .protects > div:nth-child(2n) { border-right: 0; padding-right: 0; }
}
@media (max-width: 480px) {
  .protects { grid-template-columns: 1fr; }
  /* the rest of .protects is light-by-default; this one slipped */
  .protects > div { border-right: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--line-light); }
  .on-dark .protects > div { border-bottom-color: var(--line-dark); }
  .protects > div:last-child { border-bottom: 0; }
}

/* Coverage ladder — the amount of the car being protected, shown as a scale */
.coverage { margin-top: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--line-dark); }
.cov {
  display: grid; grid-template-columns: minmax(170px, 19%) 1fr minmax(128px, 16%);
  gap: clamp(1rem, 3vw, 2.5rem); padding: 1.6rem 0;
  border-bottom: 1px solid var(--line-dark); align-items: start;
}
.cov h3 { font-size: var(--t-b); }
.cov .areas-line { font-weight: 800; color: var(--white); font-size: var(--t-sm); line-height: 1.45; }
.cov .areas-line + p { margin-top: 0.5rem; }
.cov p { font-size: var(--t-sm); line-height: 1.6; color: var(--grey-400); }
.cov .lvl { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-400); }
.bar { display: flex; gap: 4px; margin-top: 0.55rem; }
.bar i { display: block; height: 6px; flex: 1; background: rgba(255,255,255,0.16); border-radius: 2px; }
.bar i.on { background: var(--red); }
@media (max-width: 880px) {
  .cov { grid-template-columns: 1fr; gap: 0.6rem; }
  .cov .bar { max-width: 180px; }
}

/* Compact three-step strip inside the installation section */
.miniflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (max-width: 760px) { .miniflow { grid-template-columns: 1fr; } }
.miniflow > div { border-top: 2px solid var(--red); padding-top: 0.95rem; }
.miniflow b { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-hot); }
.miniflow h3 { margin-top: 0.45rem; font-size: var(--t-b); }
.miniflow p { margin-top: 0.4rem; font-size: var(--t-sm); line-height: 1.55; color: var(--grey-400); }

/* ======================================================================
   Vehicle wraps page — its own components
   ====================================================================== */

/* Four ways to change the car */
.changes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.6vw, 2.25rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 720px) { .changes { grid-template-columns: 1fr; } }
.changes > div { border-left: 3px solid var(--red); padding: 0.15rem 0 0.15rem 1.35rem; }
.changes h3 { font-size: var(--t-md); }
.changes p { margin-top: 0.5rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }
.on-dark .changes p { color: var(--grey-400); }

/* Wrap options */
.optgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 760px) { .optgrid { grid-template-columns: 1fr; } }
.opt { border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(1.3rem, 2.6vw, 1.9rem); }
.on-dark .opt { border-color: var(--line-dark); }
.opt--wide { grid-column: 1 / -1; }
.opt .scope { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-ink); }
.on-dark .opt .scope { color: var(--red-hot); }
.opt h3 { margin-top: 0.65rem; }
.opt .areas { margin-top: 0.35rem; font-weight: 800; font-size: var(--t-sm); color: var(--grey-900); }
.on-dark .opt .areas { color: var(--white); }
.opt p { margin-top: 0.6rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }
.on-dark .opt p { color: var(--grey-400); }

/* Finish swatches — CSS renders the finish, not the colour, so the page stays
   on palette while still showing what gloss / satin / matte actually look like */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 900px) { .swatches { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .swatches { grid-template-columns: 1fr; } }
.swatch .chip { aspect-ratio: 16 / 9; border-radius: var(--r-lg); border: 1px solid var(--line-dark); }
.swatch h3 { margin-top: 0.85rem; font-size: var(--t-b); }
.swatch p { margin-top: 0.3rem; font-size: var(--t-sm); color: var(--grey-400); line-height: 1.55; }
.sw-gloss { background: linear-gradient(118deg, #17171a 0%, #4e4e57 24%, #f2f2f5 40%, #3c3c44 50%, #101013 100%); }
.sw-satin { background: linear-gradient(118deg, #26262b 0%, #55555e 42%, #7c7c86 52%, #34343a 66%, #1b1b1f 100%); }
.sw-matte { background: #34343a; }
.sw-metallic { background: linear-gradient(118deg, #1d1d21 0%, #7e7e8a 22%, #2c2c32 34%, #9a9aa6 56%, #33333a 70%, #16161a 100%); }
.sw-shift { background: linear-gradient(118deg, #0d0d12 0%, #5e0c1a 30%, #C8102E 52%, #3a1020 72%, #101015 100%); }
.sw-specialty { background: repeating-linear-gradient(45deg, #232327 0 9px, #34343b 9px 18px); }

/* Brand row under the finishes */
.vinylrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--line-dark); }
@media (max-width: 760px) { .vinylrow { grid-template-columns: 1fr; gap: 1.5rem; } }
.vinylrow h3 { font-size: var(--t-md); }
.vinylrow p { margin-top: 0.5rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-400); }

/* Vertical process rail */
.timeline { margin-top: clamp(2.25rem, 4vw, 3rem); max-width: 62rem; }
.tl { display: grid; grid-template-columns: 2rem 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
.tl .rail { position: relative; }
.tl .rail::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); }
.tl .rail::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 24px; bottom: 0; width: 2px; background: var(--line-light); }
.on-dark .tl .rail::after { background: var(--line-dark); }
.tl:last-child .rail::after { display: none; }
.tl-body { padding-bottom: clamp(1.6rem, 3vw, 2.25rem); }
.tl:last-child .tl-body { padding-bottom: 0; }
.tl-body b { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-ink); }
.on-dark .tl-body b { color: var(--red-hot); }
.tl-body h3 { margin-top: 0.4rem; font-size: var(--t-b); }
.tl-body p { margin-top: 0.45rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }
.on-dark .tl-body p { color: var(--grey-400); }

/* ======================================================================
   Window tinting page — its own components
   ====================================================================== */

/* Reasons list — two columns of hairline-separated rows */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); margin-top: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--line-light); }
.on-dark .reasons { border-color: var(--line-dark); }
.reasons > div { padding: 1.5rem 0; border-bottom: 1px solid var(--line-light); }
.on-dark .reasons > div { border-color: var(--line-dark); }
.reasons > div:last-child { grid-column: 1 / -1; }
.reasons h3 { font-size: var(--t-md); }
.reasons p { margin-top: 0.5rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); max-width: 52ch; }
.on-dark .reasons p { color: var(--grey-400); }
@media (max-width: 720px) { .reasons { grid-template-columns: 1fr; } .reasons > div:last-child { grid-column: 1; } }

/* Film tiers with a relative heat-rejection meter */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }
.tier { display: flex; flex-direction: column; border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.8vw, 2rem); }
.tier .best { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-hot); }
.tier h3 { margin-top: 0.6rem; }
.tier p { margin-top: 0.6rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-400); }
.meter { margin-top: auto; padding-top: 1.5rem; }
.meter .lbl { display: flex; justify-content: space-between; gap: 1rem; white-space: nowrap; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-400); }
.meter .track { margin-top: 0.45rem; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.14); overflow: hidden; }
.meter .fill { display: block; height: 100%; background: var(--red); border-radius: 3px; }

/* Mobile service trio */
.mobilegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 760px) { .mobilegrid { grid-template-columns: 1fr; gap: 1.75rem; } }
.mobilegrid h3 { display: inline-block; padding-bottom: 0.7rem; border-bottom: 2px solid var(--red); font-size: var(--t-md); }
.mobilegrid p { margin-top: 0.85rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }
.on-dark .mobilegrid p { color: var(--grey-400); }

/* Five-step row with outlined numerals */
.numsteps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 1040px) { .numsteps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .numsteps { grid-template-columns: 1fr; } }
.nstep { position: relative; padding-top: 3rem; }
.nstep .big {
  position: absolute; top: -0.35rem; left: 0; font-size: 2.9rem; font-weight: 800;
  line-height: 1; letter-spacing: -0.04em; color: transparent;
  -webkit-text-stroke: 1.5px var(--red); }
.nstep h3 { font-size: var(--t-b); }
.nstep p { margin-top: 0.45rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }
.on-dark .nstep p { color: var(--grey-400); }

/* Law rows */
.lawgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (max-width: 720px) { .lawgrid { grid-template-columns: 1fr; } }
.lawgrid > div { padding: 1.35rem 0; border-bottom: 1px solid var(--line-dark); }
.lawgrid h3 { font-size: var(--t-b); }
.lawgrid p { margin-top: 0.4rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-400); }

/* ======================================================================
   Mobile detailing page — its own components
   ====================================================================== */

/* Alternating image + checklist blocks */
.incl { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.incl-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center; }
.incl-row:nth-child(even) .incl-media { order: 2; }
@media (max-width: 860px) { .incl-row { grid-template-columns: 1fr; } .incl-row:nth-child(even) .incl-media { order: 0; } }
.incl-row h3 { font-size: var(--t-lg); letter-spacing: -0.025em; }
.incl-row > div > p { margin-top: 0.8rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); max-width: 48ch; }
.incl-list { display: grid; gap: 0.6rem; margin-top: 1.3rem; }
.incl-list li { display: grid; grid-template-columns: 0.5rem 1fr; gap: 0.8rem; font-size: var(--t-sm); line-height: 1.55; color: var(--grey-600); }
.incl-list li::before { content: ""; width: 7px; height: 7px; margin-top: 0.56em; background: var(--red); border-radius: 50%; }

/* Add-on pills */
.addons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.addons span { border: 1px solid var(--line-light); border-radius: 100px; padding: 0.6rem 1.1rem; font-size: var(--t-sm); font-weight: 700; }
.on-dark .addons span { border-color: var(--line-dark); }

/* What we bring, said plainly and large */
.kit { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; color: var(--white); }
.kit span::after { content: "·"; color: var(--red); margin: 0 0.85rem; }
.kit span:last-child::after { content: ""; margin: 0; }

/* Environmental factors */
.factors { display: grid; gap: 1.1rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.factors div { border-left: 3px solid var(--red); padding-left: 1.2rem; }
.factors b { display: block; font-size: var(--t-b); color: var(--white); }
.factors p { margin-top: 0.3rem; font-size: var(--t-sm); line-height: 1.55; color: var(--grey-400); }

/* Horizontal connected process */
.hflow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 1.75rem); margin-top: clamp(2.75rem, 5vw, 3.5rem); }
.hflow::before { content: ""; position: absolute; top: 7px; left: 8px; right: 8px; height: 2px; background: var(--line-light); }
.on-dark .hflow::before { background: var(--line-dark); }
.hstep { position: relative; padding-top: 2.4rem; }
.hstep::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--red); }
.hstep h3 { font-size: var(--t-b); }
.hstep p { margin-top: 0.45rem; font-size: var(--t-sm); line-height: 1.55; color: var(--grey-600); }
.on-dark .hstep p { color: var(--grey-400); }
@media (max-width: 1040px) {
  .hflow { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .hflow::before { display: none; }
}
@media (max-width: 560px) { .hflow { grid-template-columns: 1fr; } }

/* ======================================================================
   Maintenance detailing page — its own components
   ====================================================================== */

/* Tick list, two columns */
.fitlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem clamp(1.5rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (max-width: 780px) { .fitlist { grid-template-columns: 1fr; } }
.fitlist li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; font-size: var(--t-sm); line-height: 1.55; color: var(--grey-600); }
.fitlist li::before { content: "\2713"; color: var(--red); font-weight: 800; }
.on-dark .fitlist li { color: var(--grey-400); }
.fitlist--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .fitlist--three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fitlist--three { grid-template-columns: 1fr; } }

/* Visit sheet — reads like the service record it describes */
.visit { border: 1px solid var(--line-dark); border-radius: var(--r-lg); overflow: hidden; margin-top: clamp(2rem, 4vw, 2.75rem); }
.visit-row { display: grid; grid-template-columns: 1.7rem 1fr; gap: 1.15rem; padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--line-dark); }
.visit-row:last-child { border-bottom: 0; }
.visit-row .tick { width: 26px; height: 26px; border-radius: 50%; background: var(--red); display: grid; place-items: center; color: #FFF; font-weight: 800; font-size: 0.78rem; margin-left: -0.15rem; }
.visit-row h3 { font-size: var(--t-b); }
.visit-row p { margin-top: 0.4rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-400); }

/* Cadence options */
.cadence { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (max-width: 780px) { .cadence { grid-template-columns: 1fr; } }
.cad { border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.8vw, 2rem); }
.on-dark .cad { border-color: var(--line-dark); }
.cad .every { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-ink); }
.on-dark .cad .every { color: var(--red-hot); }
.cad .int { margin-top: 0.55rem; font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.cad p { margin-top: 0.8rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }
.on-dark .cad p { color: var(--grey-400); }

/* Maintained vs neglected */
.versus { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (max-width: 720px) { .versus { grid-template-columns: 1fr; } }
.vs { border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem); }
.vs--good { border-color: var(--red); background: rgba(200,16,46,0.08); }
.vs .tag { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-400); }
.vs--good .tag { color: var(--red-hot); }
.vs h3 { margin-top: 0.65rem; }
.vs p { margin-top: 0.7rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-400); }

/* ======================================================================
   Services hub — its own components
   ====================================================================== */

/* Service directory rows: thumbnail, name, substance, link */
.svcrows { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line-dark); }
.svcrow { display: grid; grid-template-columns: 190px minmax(180px, 0.9fr) 1.4fr; gap: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.75rem, 3.5vw, 2.6rem) 0; border-bottom: 1px solid var(--line-dark); align-items: start; }
.svcrow .thumb { aspect-ratio: 4 / 3; border-radius: var(--r); background-size: cover; background-position: center; }
.svcrow .lab { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red-hot); }
.svcrow h3 { margin-top: 0.55rem; font-size: var(--t-lg); letter-spacing: -0.025em; }
.svcrow p { font-size: var(--t-sm); line-height: 1.6; color: var(--grey-400); }
.svcrow p + p { margin-top: 0.7rem; }
.svcrow .go { display: inline-block; margin-top: 1.15rem; font-weight: 700; font-size: var(--t-sm); color: var(--red-hot); text-decoration: none; }
.svcrow .go:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 960px) {
  .svcrow { grid-template-columns: 1fr; }
  .svcrow .thumb { max-width: 300px; }
}

/* Problem picker */
.picker { margin-top: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--line-light); }
.pick { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(0.75rem, 3vw, 2.5rem); padding: 1.6rem 0; border-bottom: 1px solid var(--line-light); align-items: baseline; }
.pick .prob { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-600); }
.pick h3 { font-size: var(--t-md); }
.pick p { margin-top: 0.45rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }
.pick a { font-weight: 700; color: var(--red-ink); }
@media (max-width: 780px) { .pick { grid-template-columns: 1fr; gap: 0.6rem; } }

/* Two-panel split */
.split2 { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(2.25rem, 4vw, 3rem); border: 1px solid var(--line-dark); border-radius: var(--r-lg); overflow: hidden; }
.split2 > div { padding: clamp(1.5rem, 3vw, 2.25rem); }
.split2 > div:first-child { border-right: 1px solid var(--line-dark); }
.split2 .cat { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-hot); }
.split2 h3 { margin-top: 0.6rem; }
.split2 p { margin-top: 0.7rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-400); }
@media (max-width: 840px) {
  .split2 { grid-template-columns: 1fr; }
  .split2 > div:first-child { border-right: 0; border-bottom: 1px solid var(--line-dark); }
}

/* Brand groups */
.brandgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 960px) { .brandgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .brandgrid { grid-template-columns: 1fr; } }
.brandgrid .cat { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-ink); }
.brandgrid .names { margin-top: 0.6rem; font-size: var(--t-md); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.brandgrid p { margin-top: 0.75rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }

/* ======================================================================
   FAQ page — a reference page, not a sales page
   ====================================================================== */
.hero--slim { min-height: 0; padding-block: clamp(3.5rem, 6vw, 5.5rem); display: block; background: var(--coal); border-bottom: 1px solid var(--line-dark); }
.faq-intro { max-width: 46rem; margin-inline: auto; text-align: center; }
.faq-intro h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); letter-spacing: -0.035em; line-height: 1.05; }
.faq-intro p { margin-top: 1.1rem; color: var(--grey-400); }
.faq-intro .btn-row { justify-content: center; margin-top: 1.75rem; }

/* Jump navigation */
.faq-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.faq-nav a {
  border: 1px solid var(--line-dark); border-radius: 100px; padding: 0.55rem 1.1rem;
  font-size: var(--t-sm); font-weight: 700; color: var(--white); text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.faq-nav a:hover { border-color: var(--red); background: rgba(200,16,46,0.12); }

/* Grouped answers, one continuous column */
.faq-body { max-width: 56rem; margin-inline: auto; }
.faq-group { padding-block: clamp(2.5rem, 5vw, 3.75rem); scroll-margin-top: 96px; }
/* That padding separates one group from the next. At the two ends there is no
   neighbour to separate from, so it stacked on .section-services' own padding
   and opened a ~190px gap above the first heading and below the last. */
.faq-group:first-child { padding-block-start: 0; }
.faq-group:last-child { padding-block-end: 0; }
.faq-group + .faq-group { border-top: 1px solid var(--line-light); }
.faq-group > h2 { font-size: var(--t-lg); letter-spacing: -0.025em; }
.faq-group .qa { margin-top: 1.5rem; max-width: none; }
.faq-count { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-ink); margin-bottom: 0.5rem; }

/* Closing help block */
/* Same inversion as .mode: this sits on .on-light-raised, never on dark. */
.faq-help { border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center; max-width: 46rem; margin-inline: auto; }
.on-dark .faq-help { border-color: var(--line-dark); }
.faq-help p { margin-top: 0.8rem; color: var(--grey-600); max-width: 46ch; margin-inline: auto; }
.on-dark .faq-help p { color: var(--grey-400); }
.faq-help .btn-row { justify-content: center; margin-top: 1.75rem; }

/* Story hero: single column, no form, image gets room to read */
.hero--story { padding-block: clamp(4rem, 9vw, 7.5rem); min-height: clamp(380px, 52vw, 560px); }
.hero-copy { max-width: 46rem; }
.hero-copy .hero-sub { max-width: 52ch; }
.hero-copy .btn-row { margin-top: 2rem; }

/* ======================================================================
   Service areas page
   ====================================================================== */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 880px) { .modes { grid-template-columns: 1fr; } }
/* Light by default, dark on .on-dark — the same way .protects and .spec are
   written. This block used to be dark-only, which left an invisible white
   border and 2.6:1 body copy on the three light sections that use it
   (get-a-quote, temecula, murrieta); only service-areas is actually dark. */
.mode { border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.8vw, 2rem); }
.on-dark .mode { border-color: var(--line-dark); }
.mode .tagline { display: inline-block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--red-ink); border: 1px solid var(--red); border-radius: 100px; padding: 0.4rem 0.9rem; }
.on-dark .mode .tagline { color: var(--red-hot); }
.mode h3 { margin-top: 1.05rem; }
.mode p { margin-top: 0.65rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }
.on-dark .mode p { color: var(--grey-400); }

/* County blocks */
.county { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.county-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 2px solid var(--red); }
.county-head h3 { font-size: var(--t-lg); letter-spacing: -0.025em; }
.county-head span { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--grey-600); white-space: nowrap; }
.citylist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); }
@media (max-width: 820px) { .citylist { grid-template-columns: 1fr; } }
.citylist > div { padding: 1.35rem 0; border-bottom: 1px solid var(--line-light); }
.citylist h4 { font-size: var(--t-b); }
.citylist p { margin-top: 0.4rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }
.citylist a { font-weight: 700; color: var(--red-ink); }

/* Compact service links */
.minisvc { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 1.75rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 1040px) { .minisvc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .minisvc { grid-template-columns: 1fr; } }
.minisvc a { display: block; border-top: 2px solid var(--red); padding-top: 1.05rem; text-decoration: none; color: inherit; }
.minisvc h3 { font-size: var(--t-b); }
.minisvc p { margin-top: 0.45rem; font-size: var(--t-sm); line-height: 1.55; color: var(--grey-400); }
.minisvc .go { display: block; margin-top: 0.9rem; font-size: var(--t-sm); font-weight: 700; color: var(--red-hot); }
.minisvc a:hover .go { text-decoration: underline; text-underline-offset: 0.2em; }

/* Closing quote band */
.quote-band { scroll-margin-top: 92px; position: relative; isolation: isolate; background-size: cover; background-position: center; }
.quote-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.86) 45%, rgba(0,0,0,0.78) 100%);
}
.quote-band .inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 920px) { .quote-band .inner { grid-template-columns: 1fr; } }
.quote-band .quote-card { margin: 0; }

/* Logos and figures in one band rather than two stacked strips */
.proof-band { background: var(--black); border-top: 1px solid var(--line-dark); padding-block: clamp(1.75rem, 3.5vw, 2.5rem); overflow: hidden; }
.proof-band .label { text-align: center; font-size: var(--t-sm); font-weight: 700; color: var(--grey-400); margin-bottom: 1.25rem; }
.proof-band .logo-track { display: flex; gap: clamp(2.5rem, 6vw, 5rem); width: max-content; animation: mq 46s linear infinite; align-items: center; }
.proof-band:hover .logo-track, .proof-band:focus-within .logo-track { animation-play-state: paused; }
.proof-band { position: relative; }
.proof-band::before, .proof-band::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(48px, 8vw, 120px); z-index: 2; pointer-events: none;
}
.proof-band::before { left: 0; background: linear-gradient(90deg, var(--black), transparent); }
.proof-band::after { right: 0; background: linear-gradient(270deg, var(--black), transparent); }
.proof-band .trustbar-grid { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line-dark); }
@media (prefers-reduced-motion: reduce) { .proof-band .logo-track { animation: none; } }

.proof-band .trustbar-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .proof-band .trustbar-grid { grid-template-columns: repeat(3, 1fr); } }

/* pull-quotes inherited a near-black colour that disappears on dark grounds */
.on-dark .pull, .feature .pull { color: var(--white); }

/* Two service modes as full panels rather than a paragraph */
.modes2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 840px) { .modes2 { grid-template-columns: 1fr; } }
.mode2 { border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(1.6rem, 3.2vw, 2.4rem); }
.mode2--pick { border-color: var(--red); background: rgba(200,16,46,0.05); }
.mode2 .tag { display: inline-block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--red-ink); border: 1px solid var(--red); border-radius: 100px; padding: 0.4rem 0.95rem; }
.mode2 h3 { margin-top: 1.15rem; font-size: var(--t-md); letter-spacing: -0.02em; }
.mode2 p { margin-top: 0.75rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }

/* Four steps across, solid red numerals */
.procrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--line-light); }
@media (max-width: 1000px) { .procrow { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } }
@media (max-width: 560px) { .procrow { grid-template-columns: 1fr; } }
.procrow .n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #FFF; font-weight: 800; font-size: var(--t-b); }
.procrow h3 { margin-top: 1rem; font-size: var(--t-b); }
.procrow p { margin-top: 0.5rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); }
/* .procrow is used on a dark section on four pages (get-a-quote, temecula,
   murrieta, thank-you) and light on one (home), but only had the light colours.
   The step descriptions were rendering #56565C on black — 2.88:1, measured on
   the live page, which is not readable body text — and the top rule was a 16%
   BLACK line on black, so invisible. Same light-base + .on-dark-override shape
   as .protects and .spec. */
.on-dark .procrow { border-top-color: var(--line-dark); }
.on-dark .procrow p { color: var(--grey-400); }

/* Service-area heading gets display scale — it's a claim worth making loudly */
.center-block .section-head h2 { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.1rem); letter-spacing: -0.038em; line-height: 1.06; max-width: 20ch; }

/* (a stray top-level `}` shipped in the handoff lived here — removed) */

/* Closing CTA: display scale and a contact row, so the page ends on weight */
.cta-close .feature-panel h2 { font-size: clamp(2rem, 1.1rem + 2.9vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.04; }
.cta-close .feature-panel > .eyebrow { display: block; margin-bottom: 1.1rem; }
.cta-close .feature-panel p { font-size: var(--t-b); max-width: 58ch; }
.cta-rule { width: 64px; height: 3px; background: var(--red); margin: 0 auto 1.6rem; }
.cta-contact {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.25rem, 4vw, 3rem); padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(255,255,255,0.18); max-width: 42rem; margin-inline: auto;
}
@media (max-width: 640px) { .cta-contact { grid-template-columns: 1fr; gap: 1.25rem; } }
.cta-contact div { text-align: center; }
.cta-contact b { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-400); }
.cta-contact span, .cta-contact a { display: block; margin-top: 0.45rem; font-weight: 700; color: var(--white); text-decoration: none; }
.cta-contact a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Homepage close: asymmetric, so the photograph stays visible on the right
   instead of being flattened behind a centred block. */
.cta-left { min-height: clamp(540px, 58vw, 740px); }
.cta-left::before {
  background: linear-gradient(100deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.90) 34%,
                              rgba(0,0,0,0.62) 62%, rgba(0,0,0,0.34) 100%);
}
.cta-left .feature-panel { max-width: none; margin: 0; text-align: left; }
.cta-left .inner { max-width: 46rem; }
.cta-left .cta-rule { margin: 0 0 1.5rem; }
.cta-left h2 { font-size: clamp(2.2rem, 1.15rem + 3.4vw, 4rem); letter-spacing: -0.042em; line-height: 1.02; max-width: 17ch; }
.cta-left .feature-panel p { margin-inline: 0; max-width: 52ch; }
.cta-left .btn-row { justify-content: flex-start; }
.cta-left .cta-contact { max-width: none; margin-inline: 0; grid-template-columns: repeat(3, minmax(0, 15rem)); }
.cta-left .cta-contact div { text-align: left; }
@media (max-width: 760px) { .cta-left .cta-contact { grid-template-columns: 1fr; } }

/* California with a heat overlay on the service area */
.camap svg { width: 100%; height: auto; display: block; }
.ca-fill { fill: rgba(19,19,22,0.07); }
.on-dark .ca-fill { fill: rgba(255,255,255,0.06); }
.ca-stroke { fill: none; stroke: var(--grey-400); stroke-width: 1.5; stroke-linejoin: round; opacity: 0.7; }
.ca-ring { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0.85; }
.ca-lead { stroke: var(--red); stroke-width: 1.5; opacity: 0.85; }
.ca-lead-label { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; fill: var(--grey-900); }
.ca-lead-sub { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--grey-600); }
.ca-base { fill: var(--red); stroke: #FFF; stroke-width: 2.5; }
.ca-base-label { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; fill: var(--grey-900); }

/* Service-area layout: map beside the list */
.area-split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 900px) { .area-split { grid-template-columns: 1fr; } .camap { max-width: 26rem; margin-inline: auto; } }
.area-counties { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.area-county h3 { font-size: var(--t-b); padding-bottom: 0.7rem; border-bottom: 2px solid var(--red); }
.area-city-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem 1.5rem; margin-top: 1.1rem; }
@media (max-width: 520px) { .area-city-list { grid-template-columns: 1fr; } }
.area-city-list a { font-size: var(--t-sm); font-weight: 700; color: var(--grey-900); text-decoration: none; }
.area-city-list span { font-size: var(--t-sm); font-weight: 700; color: var(--grey-900); }
.area-city-list a:hover { color: var(--red-ink); }

.on-dark .ca-lead-label, .on-dark .ca-base-label { fill: var(--white); }
.on-dark .ca-lead-sub { fill: var(--grey-400); }
.camap { max-width: 32rem; }
@media (min-width: 901px) { .area-split { align-items: center; } }

/* Brand wall: category rows of wordmark tiles, so the products read as a
   roster you can scan rather than paragraphs of text. */
.brandwall { margin-top: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--line-light); }
.bw-row { display: grid; grid-template-columns: minmax(140px, 17%) 1fr; gap: clamp(1rem, 3vw, 2.5rem);
          align-items: center; padding-block: clamp(1.25rem, 2.4vw, 1.7rem); border-bottom: 1px solid var(--line-light); }
@media (max-width: 720px) { .bw-row { grid-template-columns: 1fr; gap: 0.9rem; } }
.bw-row .cat { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--red-ink); }
.bw-marks { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.bw-marks span {
  background: var(--white-bg); border: 1px solid var(--line-light); border-radius: var(--r);
  padding: 0.65rem 1.15rem; font-size: var(--t-b); font-weight: 800; letter-spacing: -0.015em;
  color: var(--grey-900); white-space: nowrap;
}

/* Certification, closing the same section behind a heavier rule */
.cert-foot {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 2px solid var(--red);
}
@media (max-width: 760px) { .cert-foot { grid-template-columns: 1fr; } }
.cert-foot .badge { background: var(--white-bg); border: 1px solid var(--line-light); border-radius: var(--r); padding: 1rem 1.3rem; }
.cert-foot .badge img { display: block; width: 190px; max-width: 100%; height: auto; }
.cert-foot .eyebrow { color: var(--red-ink); }
.cert-foot h3 { margin-top: 0.6rem; font-size: var(--t-md); letter-spacing: -0.025em; }
.cert-foot p { margin-top: 0.6rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-600); max-width: 56ch; }

/* Temecula: local concerns, each with its answer */
.concerns { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 880px) { .concerns { grid-template-columns: 1fr; } }
.concern { border-top: 2px solid var(--red); padding-top: 1.15rem; }
.concern h3 { font-size: var(--t-md); letter-spacing: -0.02em; }
.concern p { margin-top: 0.7rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-400); }
.on-light-raised .concern p, section:not(.on-dark) .concern p { color: var(--grey-600); }
.concern .go { display: inline-block; margin-top: 1rem; font-size: var(--t-sm); font-weight: 700; color: var(--red-hot); text-decoration: none; }
.on-light-raised .concern .go, section:not(.on-dark) .concern .go { color: var(--red-ink); }
.concern .go:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Local service cards, eyebrow above the name */
.locsvc { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 800px) { .locsvc { grid-template-columns: 1fr; } }
.locsvc > a { display: block; border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.8vw, 2rem); text-decoration: none; color: inherit; transition: border-color 180ms ease; }
.locsvc > a:hover { border-color: var(--red); }
.locsvc .lab { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red-hot); }
.locsvc h3 { margin-top: 0.6rem; font-size: var(--t-md); letter-spacing: -0.02em; }
.locsvc p { margin-top: 0.65rem; font-size: var(--t-sm); line-height: 1.6; color: var(--grey-400); }
.locsvc .go { display: inline-block; margin-top: 1rem; font-size: var(--t-sm); font-weight: 700; color: var(--red-hot); }
.locsvc > a:hover .go { text-decoration: underline; text-underline-offset: 0.2em; }

.procrow--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .procrow--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .procrow--5 { grid-template-columns: 1fr; } }

/* Scannable highlights under the pricing statement */
.pricelist { display: grid; gap: 0.75rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.pricelist li { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.75rem; font-size: var(--t-sm); font-weight: 700; line-height: 1.5; color: var(--grey-900); }
.pricelist li::before { content: "\2713"; color: var(--red); font-weight: 800; }
.on-dark .pricelist li { color: var(--white); }

/* Quote page form extras */
.field textarea {
  width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--line-dark);
  border-radius: var(--r); color: var(--white); padding: 0.85rem 1rem;
  font: inherit; font-size: var(--t-sm); line-height: 1.55; min-height: 120px; resize: vertical;
}
.field textarea::placeholder { color: var(--grey-400); }
.field textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }
/* padding-block, not a `padding: x 0` shorthand — the shorthand zeroed the side
   padding inherited from .quote-card .field input, which put the native Choose
   Files button hard against the field's left border. */
.field input[type="file"] { width: 100%; font-size: var(--t-sm); color: var(--grey-400); padding-block: 0.6rem; }
/* The raw OS button reads as a foreign object on the dark card, but a fully
   transparent ghost disappears into it — the field is near-black and the ghost
   border is only 18% white. Lift it on a faint white fill with a brighter edge
   so it still reads as a control you press. */
.field input[type="file"]::file-selector-button {
  margin-right: 0.85rem; padding: 0.45rem 0.9rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.32); border-radius: var(--r);
  color: var(--white); font: inherit; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.field input[type="file"]::file-selector-button:hover {
  background: rgba(255,255,255,0.2); border-color: var(--red-hot); color: var(--white);
}

/* Selects drew the browser's own arrow, which sits flush against padding-right —
   0.8rem on the quote card — so it read as jammed into the border, and Safari
   and Firefox each place it somewhere different again. Draw our own instead and
   give it room. The chevron matches the one on .qa summary. */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.5rem;
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 11px 7px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23131316' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Every form on this site sits in .quote-card, which is dark whatever section
   it is placed on; .on-dark is here so a select dropped anywhere else still works.
   Everything has to be repeated here, not just the image: .quote-card .field
   select is (0,2,1) and its `background` shorthand outranks the (0,1,1) rule
   above — and a shorthand resets position, size and repeat as well as the
   image, so setting only background-image there painted the chevron at 0% 0%. */
.quote-card .field select, .on-dark .field select {
  padding-right: 2.5rem;
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 11px 7px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23F4F4F5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field select:focus { outline: 2px solid var(--red); outline-offset: 1px; }
/* SMS consent (10DLC). The block only ever renders inside .form, which only
   ever sits in the dark .hero — the same context as .field .hint below, so it
   borrows that proven muted tone rather than inventing a second one. */
.field--consent { gap: 0.55rem; margin-top: 0.3rem; }
.consent-check { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.consent-check input { width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--red); cursor: pointer; }
/* Deliberately a notch under --t-xs: this is the longest single block on the
   form and it pushed the submit button well down the card. Not smaller than
   this — the disclosure has to stay conspicuous to count for 10DLC.

   Boxed, matching the house legalbox treatment: it reads as a notice attached
   to the checkbox rather than as more form copy, which is also why the border
   stays visible instead of being toned down to nothing. */
.consent-text {
  font-size: 11.5px; line-height: 1.4; color: var(--grey-400);
  border: 1px solid var(--line-dark); border-radius: var(--r);
  background: rgba(255,255,255,0.03);
  padding: 0.7rem 0.8rem; margin: 0;
}
.consent-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.consent-text a:hover, .consent-text a:focus-visible { color: var(--white); }
.field .hint { margin-top: 0.4rem; font-size: var(--t-xs); line-height: 1.5; color: var(--grey-400); text-transform: none; letter-spacing: 0; font-weight: 400; }
.quote-card--full { max-width: none; }

/* Hero contact details on the quote page */
.contact-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
@media (max-width: 560px) { .contact-facts { grid-template-columns: 1fr; } }
.contact-facts b { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--grey-400); }
.contact-facts span, .contact-facts a { display: block; margin-top: 0.3rem; font-weight: 700; color: var(--white); text-decoration: none; }
.contact-facts a:hover { text-decoration: underline; text-underline-offset: 0.2em; }