/*
Theme Name: AutoX Mobile Detailing
Theme URI: https://www.autoxmobiledetailing.com/
Author: AutoX Mobile Detailing
Description: Mobile auto detailing, paint correction and ceramic coating in Odessa, TX. Twenty-two hand-built pages — services, pricing, gallery, eight service-area pages and a quote form. Converted from the static build; the layout mirrors the sister site trustntint.com.
Version: 1.2.8
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autox
Tags: business, one-column, custom-menu, responsive-layout
*/

/* Fonts, self-hosted (latin). Loaded from WordPress.com's font proxy they were a
   render-blocking stylesheet on a second host, about 0.8 s on a phone. */
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-latin.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(assets/fonts/rajdhani-500-latin.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(assets/fonts/rajdhani-600-latin.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(assets/fonts/rajdhani-700-latin.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ==============================================================
   AUTOX MOBILE DETAILING
   Layout skeleton mirrors trustntint.com (sister company): same
   container, section rhythm, 4px radii, Rajdhani/Inter pairing.
   The finish is AutoX's own: the logo's blue with red as punctuation.

   What is deliberately NOT here, because the sister site has none of it
   and because it is what makes a dark page look generated rather than
   designed — coloured radial glows, film grain, gradient-filled display
   text, brushed-metal numerals. Accents are flat colour. If a future
   pass wants to "elevate" this, elevate the photography instead.

   Sampled from the client's logo master (assets/brand/*.jpg):

     ring navy   #0C5578    logo azure  #1486C0    logo red  #DC2127

   Those three are the brand. On a near-black ground the two lighter
   siblings below carry text and accents; the true logo colours stay
   for anything that sits under white text, because white on #FF3B45
   is only 3.5:1 while white on #DC2127 is 4.9:1.

     Blue accent  #45C3FF   Red accent  #FF3B45
   ============================================================== */

:root {
  /* Ground — deeper than TNT for more contrast under the duotone */
  --bg:         #04070E;
  --bg-alt:     #01030A;
  --bg-deep:    #000205;
  --card:       rgba(7, 13, 26, .72);
  --card-hi:    rgba(11, 19, 34, .92);
  --card-solid: #060C18;

  /* Hairlines */
  --line:   rgba(255,255,255,.055);
  --line-2: rgba(255,255,255,.10);
  --line-3: rgba(255,255,255,.18);

  /* Text — the alphas are set by contrast against --bg, not by eye:
     .72 = 8.9:1   .52 = 5.8:1   .48 = 4.9:1 (AA floor for the small
     uppercase labels)   .40 = 3.6:1, decorative only, never body copy */
  --text:    #EEF2F7;
  --text-70: rgba(255,255,255,.72);
  --text-50: rgba(255,255,255,.52);
  --text-40: rgba(255,255,255,.48);
  --text-30: rgba(255,255,255,.40);

  /* Blue — primary interactive */
  --blue:      #45C3FF;
  --blue-deep: #1486C0;
  --navy:      #0C5578;   /* the logo ring */
  --blue-t05:  rgba(69,195,255,.05);
  --blue-t10:  rgba(69,195,255,.10);
  --blue-t20:  rgba(69,195,255,.20);
  --blue-t35:  rgba(69,195,255,.35);

  /* Red — the second half of the theme */
  --red:      #FF3B45;
  --red-deep: #DC2127;
  --red-t05:  rgba(255,59,69,.05);
  --red-t10:  rgba(255,59,69,.10);
  --red-t20:  rgba(255,59,69,.20);
  --red-t35:  rgba(255,59,69,.35);

  /* No gradient tokens. The sister site uses flat colour, flat hairlines and
     no shadows on its controls; every gradient here was added on top of that
     brief and is exactly what makes a dark page read as generated. Accents
     are --blue, hairlines are --line*, and the photography does the work. */

  /* alias kept so `accent` reads as blue throughout */
  --accent:     var(--blue);
  --accent-t05: var(--blue-t05);
  --accent-t10: var(--blue-t10);
  --accent-t20: var(--blue-t20);
  --accent-t30: var(--blue-t35);

  --gold: #F0C46A;   /* review stars only */

  --radius: 4px;
  --maxw:   1280px;
  --pad:    32px;

  /* Slower, softer motion reads more expensive than snappy motion */
  --ease:     cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.4, 0, .2, 1);

  --font-display: "Rajdhani", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* No film-grain overlay. It was a fixed full-viewport layer at .028 opacity —
   invisible in practice, and one of the standard "make it look premium"
   affectations. trustntint.com has none. */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--blue); color: #041018; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
@media (max-width: 640px) { :root { --pad: 22px; } }

/* 96/128 is the sister site's measured rhythm; this had drifted up to
   104/152, which is how a homepage quietly becomes 8,700px tall. */
.section { position: relative; padding-block: 96px; overflow: hidden; }
@media (min-width: 768px) { .section { padding-block: 128px; } }
.section--alt { background: var(--bg-alt); }
/* Alt sections are simply a darker ground, as on the sister site. The blue
   and red radial glows that used to sit here are the single strongest tell
   that a dark page was generated rather than designed. */
.section--tight { padding-block: 80px; }
/* hairline between stacked sections */
.section + .section { border-top: 1px solid var(--line); }

.grid { display: grid; gap: 18px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); } }

.split { display: grid; gap: 64px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
@media (max-width: 1023px) { .split { grid-template-columns: minmax(0, 1fr); gap: 44px; } }

/* ---------- Type ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .96;
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.6rem, 6.6vw, 4.75rem); line-height: .94; letter-spacing: -.028em; }
h2, .h2 { font-size: clamp(2.05rem, 4.4vw, 3.15rem); line-height: 1; letter-spacing: -.024em; }
h3, .h3 { font-size: 1.28rem; letter-spacing: .01em; line-height: 1.25; }
h4, .h4 { font-size: 1.0625rem; letter-spacing: .01em; }

/* Accent words in a headline are a FLAT colour, the way trustntint.com sets
   its cyan line. Gradient-filled display text and brushed-metal numerals were
   added here and exist nowhere on the sister site; they are also the fastest
   way to make a page read as machine-made. Restraint is the brand. */
.accent { color: var(--blue); }
.metal  { color: var(--text); }
.red { color: var(--red); }
.blue { color: var(--blue); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}
/* No dash before the eyebrow and no rule under the heading — trustntint.com
   has neither. A tracked-caps label with a little em-dash above every single
   section is template rhythm; the label alone is enough. */
.lede { color: var(--text-50); font-size: 1.03rem; line-height: 1.7; max-width: 42rem; }
.body-sm { font-size: .875rem; line-height: 1.7; color: var(--text-50); }
.muted { color: var(--text-50); }
.faint { color: var(--text-40); }

/* section heading, with a duotone rule beneath it */
.sec-head { margin-bottom: 72px; max-width: 44rem; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--text-50); line-height: 1.7; margin-top: 20px; }

.prose { color: var(--text-50); line-height: 1.8; }
.prose p + p { margin-top: 1.3em; }
.prose strong, .prose b { color: var(--text); font-weight: 600; }
.prose a { color: var(--blue); }
.prose h2 { font-size: 1.55rem; margin: 2.4em 0 .7em; color: var(--text); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin: 1.9em 0 .5em; color: var(--text); }
.prose ul, .prose ol { margin: 1em 0; padding-left: 1.2em; display: grid; gap: .55em; }
.prose li::marker { color: var(--blue); }
.prose--legal { max-width: 46rem; }
.prose--legal p, .prose--legal li { font-size: .95rem; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 34px;
  background: var(--blue); color: #041018;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: .06em; text-transform: uppercase;
  border: 0; border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
  transition: background .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow: none;
}
.btn:hover { background: #8FDBFF; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
/* No sheen sweep across the button on hover, and no light-catch hairline on
   card tops — the sister site's buttons and cards carry no pseudo-elements at
   all. Both were "premium" affectations rather than anything the brand does. */

/* Red is a first-class button, not a footnote. It uses the *true* logo red
   rather than the lifted --red: white on #FF3B45 is 3.5:1 and fails AA at
   button sizes, white on #DC2127 is 4.9:1. Hover deepens the fill and lets
   the glow do the brightening, so the ratio only ever improves. */
.btn--red { background: var(--red-deep); color: #fff; }
.btn--red:hover { background: #B81319; }

/* duotone hairline outline */
.btn--outline {
  background: var(--bg);
  border-color: var(--line-2);
  border: 1px solid var(--line); color: var(--text); box-shadow: none;
}
.btn--outline:hover {
  background: var(--card-hi);
  border-color: var(--line-3);
  color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px -18px rgba(0,0,0,.8);
}
.btn--outline::after { display: none; }
.btn--sm { padding: 12px 24px; font-size: .875rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

.textlink {
  display: inline-flex; align-items: center; gap: 10px; padding-block: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
.textlink svg { width: 16px; height: 16px; transition: transform .5s var(--ease); }
.textlink:hover { color: #fff; }
.textlink:hover svg { transform: translateX(6px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 88px; display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .5s var(--ease-io), border-color .5s var(--ease-io), height .4s var(--ease-io);
}
.site-header.is-stuck {
  height: 74px;
  background: rgba(4, 7, 14, .88);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line);
}
/* duotone hairline under a stuck header */
.site-header.is-stuck::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--line-2);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* Brand lockup — the mark is a vector rebuild of the client's own ring,
   the wordmark is lifted straight off their logo master and reversed to
   white. Do not re-set the wordmark in a webfont: the logo is drawn in
   Futura and nothing else on this page is close. */
.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand__mark {
  width: 44px; height: 44px; flex: none;
  transition: filter .55s var(--ease), transform .55s var(--ease);
}
/* Sized by width, not height: the artwork carries the g's descender, so
   height-sizing would shrink the letterforms to make room for it. The nudge
   re-centres the cap/baseline mass against the ring, since the descender
   hangs below and pulls the box's geometric centre down. */
.brand__word { width: 276px; height: auto; flex: none; transform: translateY(4%); }
.brand:hover .brand__mark {
  transform: scale(1.05);
  filter: drop-shadow(0 0 9px rgba(69,195,255,.32));
}
/* `.foot-col a` is more specific than `.brand`, so without this the footer
   lockup loses its flex box and the two images stack. */
.foot-col a.brand { display: flex; padding-block: 0; }
.site-footer .brand__mark { width: 50px; height: 50px; }
.site-footer .brand__word { width: 280px; }
@media (max-width: 1023px) {
  .brand { gap: 11px; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__word { width: 208px; }
}
@media (max-width: 360px) { .brand__word { display: none; } }

.nav { display: flex; align-items: center; gap: 38px; }
.nav a {
  position: relative; padding-block: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-70);
  transition: color .4s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--blue); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }

.header-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--radius);
  background: var(--red-deep); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
  letter-spacing: .04em; white-space: nowrap; flex: none;
  transition: background .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.header-cta:hover {
  background: #B81319; transform: translateY(-1px);
}
.header-cta svg { width: 16px; height: 16px; }

.burger {
  display: none; width: 46px; height: 46px; flex: none; cursor: pointer;
  background: var(--bg);
  border-color: var(--line-2);
  border: 1px solid var(--line); border-radius: var(--radius); position: relative;
}
.burger i, .burger i::before, .burger i::after {
  content: ""; position: absolute; left: 50%; width: 18px; height: 2px;
  background: var(--text); transform: translateX(-50%);
  transition: transform .4s var(--ease), opacity .25s var(--ease);
}
.burger i { top: 50%; margin-top: -1px; }
.burger i::before { top: -6px; left: 0; transform: none; }
.burger i::after  { top: 6px;  left: 0; transform: none; }
.burger[aria-expanded="true"] i { transform: translateX(-50%) rotate(45deg); }
.burger[aria-expanded="true"] i::before { opacity: 0; }
.burger[aria-expanded="true"] i::after  { transform: rotate(-90deg); top: 0; }

@media (max-width: 1023px) {
  .nav, .header-cta { display: none; }
  .burger { display: block; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 88px 0 auto 0; z-index: 49;
  background: rgba(3, 6, 12, .985);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line-2);
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  /* visibility, not just opacity — otherwise the closed drawer's links stay
     in the tab order and keyboard users land on invisible controls */
  visibility: hidden;
  transition: transform .45s var(--ease), opacity .35s var(--ease),
              visibility 0s linear .45s;
  max-height: calc(100vh - 88px); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.site-header.is-stuck ~ .drawer { inset-block-start: 74px; max-height: calc(100vh - 74px); }
.drawer.is-open {
  transform: none; opacity: 1; pointer-events: auto;
  visibility: visible; transition-delay: 0s;
}
.drawer .container { display: flex; flex-direction: column; padding-block: 8px 30px; }
.drawer a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 2px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-70);
}
.drawer a::after { content: ""; width: 18px; height: 1px; background: var(--blue); opacity: 0; transition: opacity .3s var(--ease); }
.drawer a:hover, .drawer a[aria-current="page"] { color: #fff; }
.drawer a:hover::after, .drawer a[aria-current="page"]::after { opacity: 1; }
.drawer .btn { margin-top: 26px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--bg-deep); }
.hero--short { min-height: 0; padding-block: 188px 108px; }
@media (max-width: 767px) { .hero--short { padding-block: 148px 84px; } }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Two flat gradients, no colour and no radials — the same construction the
     sister site uses. The old version stacked a .9-to-.96 vertical wash over
     the whole frame, which is why the vehicle sat in fog; now only the bottom
     darkens, so the photograph actually carries the section. */
  background:
    linear-gradient(92deg, rgba(4,7,14,.94) 0%, rgba(4,7,14,.78) 46%, rgba(4,7,14,.42) 100%),
    linear-gradient(180deg, rgba(4,7,14,.55) 0%, rgba(4,7,14,0) 34%, rgba(4,7,14,.92) 100%);
}
@media (max-width: 767px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(4,7,14,.88) 0%, rgba(4,7,14,.6) 44%, rgba(4,7,14,.96) 100%);
  }
}
.hero .container { position: relative; z-index: 2; padding-block: 140px 120px; }
.hero--short .container { padding-block: 0; }
.hero__inner { max-width: 43rem; }

.pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 18px; border-radius: var(--radius);
  background: rgba(7,13,26,.82);
  border-color: var(--line-2);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--text-70);
  margin-bottom: 32px;
}
.pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); flex: none;
  box-shadow: 0 0 0 4px var(--red-t20);
}

.hero h1 { margin-bottom: 30px; }
.hero h1 .accent { display: block; }
.hero__sub { color: var(--text-50); font-size: 1.08rem; line-height: 1.75; max-width: 34rem; margin-bottom: 40px; }
.hero .btn-row { margin-bottom: 44px; }

.hero__meta { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.hero__meta span { display: inline-flex; align-items: center; gap: 9px; font-size: .875rem; color: var(--text-50); }
.hero__meta svg { width: 16px; height: 16px; color: var(--blue); flex: none; }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 14px; height: 14px; color: var(--gold); }

.scrollcue {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--text-30);
}
.scrollcue i { width: 1px; height: 48px; background: var(--line-3); animation: cue 2.6s var(--ease-io) infinite; }
@keyframes cue { 0%,100% { opacity: .22; transform: scaleY(.55); } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 767px) { .scrollcue { display: none; } }

/* ---------- Cards ---------- */
.card {
  position: relative; padding: 34px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card);
  border-color: var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .55s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease);
}
@media (max-width: 639px) { .card { padding: 26px; } }

.card:hover {
  background: var(--card-hi);
  border-color: var(--line-2);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.9);
}
a.card:hover { transform: translateY(-4px); }
.card__ico {
  width: 52px; height: 52px; border-radius: var(--radius);
  display: grid; place-items: center; margin-bottom: 24px;
  background: var(--bg-alt);
  border-color: var(--line-2);
  border: 1px solid var(--line);
  transition: background .55s var(--ease);
}
.card__ico svg { width: 24px; height: 24px; color: var(--blue); transition: color .55s var(--ease); }
.card:hover .card__ico svg { color: #fff; }
.card h3 { margin-bottom: 14px; }
.card p { font-size: .9rem; line-height: 1.7; color: var(--text-50); }
.card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: .875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.card__foot .from { color: var(--text-40); }
.card__foot .amt { color: var(--blue); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
@media (max-width: 639px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stat {
  position: relative; padding: 24px 16px; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(7,13,26,.6);
  border-color: var(--line);
  text-align: center;
}
.stat b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 2.1rem; line-height: 1; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.stat span {
  display: block; margin-top: 12px; position: relative; padding-top: 12px;
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-40);
}
.stat span::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 24px; height: 1px; background: var(--line-3);
}

/* ---------- Gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 48px; }
.filters button {
  padding: 10px 22px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--line-2); background: transparent;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-50);
  transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.filters button:hover { color: #fff; border-color: var(--line-3); }
.filters button[aria-pressed="true"] {
  background: var(--blue); border-color: var(--blue); color: #041018;
}

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
@media (max-width: 1023px) { .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 639px)  { .gallery { grid-template-columns: minmax(0,1fr); } }
.tile {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--card-solid);
}
.tile.is-hidden { display: none; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 46%, rgba(2,4,9,.72) 100%);
}
.tile:hover img { transform: scale(1.06); }
.tile__tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  padding: 6px 12px; border-radius: var(--radius);
  background: rgba(4,7,14,.72); border: 1px solid var(--line-2); backdrop-filter: blur(8px);
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
.tile--tall { aspect-ratio: 3 / 4; }

/* ---------- Reviews ---------- */
.review { display: flex; flex-direction: column; gap: 18px; }
.review blockquote { font-size: .96rem; line-height: 1.8; color: var(--text-70); }
.review__who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.review__av {
  width: 44px; height: 44px; border-radius: var(--radius); flex: none;
  display: grid; place-items: center;
  background: var(--bg-alt);
  border-color: var(--line-2);
  border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--blue);
}
.review__who b { display: block; font-family: var(--font-display); font-size: .96rem; letter-spacing: .04em; }
/* b + span: the plain `span` also hit the avatar letter and shrank it to a grey speck */
.review__who b + span { font-size: .75rem; color: var(--text-40); }

/* ---------- Price table ---------- */
.ptable-wrap {
  overflow-x: auto; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  border-color: var(--line);
  -webkit-overflow-scrolling: touch;
}
.ptable { width: 100%; border-collapse: collapse; min-width: 460px; }
.ptable th, .ptable td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.ptable thead th {
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-40);
  background: rgba(255,255,255,.022);
}
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable td b { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .02em; }
.ptable td a { display: inline-block; padding-block: 4px; }
.ptable td small { display: block; margin-top: 3px; font-size: .75rem; color: var(--text-40); }

/* The vehicle-size switcher is gone — nothing is priced per size now. */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 1023px) { .plans { grid-template-columns: minmax(0,1fr); } }
.plan { display: flex; flex-direction: column; }
.plan--best {
  background: var(--card-hi);
  border-color: var(--blue-t35);   /* the one card that should read as chosen */
}
.plan__tag {
  position: absolute; top: 18px; right: 18px;
  padding: 5px 12px; border-radius: var(--radius);
  background: var(--red-deep); color: #fff;
  font-family: var(--font-display); font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.plan__price { display: flex; align-items: baseline; gap: 7px; margin: 24px 0 8px; font-family: var(--font-display); }
/* Nothing is published any more, so the slot that held the figure carries the
   phrase instead — same weight and position, so the cards still line up. */
.plan__price .quote {
  font-size: 1.85rem; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: var(--blue);
}
.plan__price .cur { font-size: 1.3rem; font-weight: 600; color: var(--text-40); }
.plan__price .amt {
  font-size: 3.3rem; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--text); font-variant-numeric: tabular-nums;
  transition: opacity .2s var(--ease);
}
.plan__price .amt.swap { opacity: 0; }
.plan__dur { display: flex; align-items: center; gap: 9px; font-size: .8125rem; color: var(--text-40); margin-bottom: 24px; }
.plan__dur svg { width: 14px; height: 14px; }
.checks { list-style: none; padding: 0; display: grid; gap: 12px; margin-bottom: 32px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: .89rem; line-height: 1.6; color: var(--text-50); }
.checks svg { width: 16px; height: 16px; color: var(--blue); margin-top: 4px; }
.checks li.no { color: var(--text-40); }
.checks li.no svg { color: var(--red); opacity: .7; }
.plan .btn { margin-top: auto; }

.note {
  position: relative; padding: 24px 26px; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(7,13,26,.5);
  border-color: var(--line);
  font-size: .89rem; line-height: 1.8; color: var(--text-50);
}
.note b { color: var(--text); }
.note a { color: var(--blue); display: inline-block; padding-block: 3px; }

/* ---------- Feature / included lists ---------- */
.features { list-style: none; padding: 0; display: grid; gap: 26px; }
.features li { display: grid; grid-template-columns: 24px 1fr; gap: 18px; }
.features svg { width: 20px; height: 20px; color: var(--blue); margin-top: 3px; }
.features b { display: block; font-family: var(--font-display); font-size: 1.08rem; letter-spacing: .02em; margin-bottom: 6px; }
.features p { font-size: .89rem; line-height: 1.7; color: var(--text-50); }

.incl { list-style: none; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 639px) { .incl { grid-template-columns: minmax(0,1fr); } }
.incl li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: .94rem; line-height: 1.6; color: var(--text-50); }
.incl svg { width: 16px; height: 16px; color: var(--blue); margin-top: 4px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 639px)  { .steps { grid-template-columns: minmax(0,1fr); } }
.step {
  position: relative; padding: 32px 26px; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  border-color: var(--line);
}
.step b.n {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 2.3rem; line-height: 1; margin-bottom: 18px;
  color: var(--blue); font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.08rem; margin-bottom: 12px; }
.step p { font-size: .89rem; line-height: 1.7; color: var(--text-50); }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: transparent;
  font-size: .875rem; color: var(--text-50);
  transition: all .4s var(--ease);
}
.chip svg { width: 14px; height: 14px; color: var(--blue); }
a.chip:hover {
  color: #fff; border-color: transparent;
  background: var(--card-hi);
  border-color: var(--line-2);
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 14px; max-width: 52rem; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--card);
  border-color: var(--line);
  transition: background .5s var(--ease);
}
.faq details[open] {
  background: var(--card-hi);
  border-color: var(--line-2);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 22px 26px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: .02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg); margin-top: -4px; transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; border-color: var(--red); }
.faq .answer { padding: 0 26px 24px; font-size: .94rem; line-height: 1.8; color: var(--text-50); }
.faq .answer p + p { margin-top: 1em; }
.faq .answer a { color: var(--blue); }

/* ---------- Form ---------- */
.form { display: grid; gap: 22px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.fgrid .full { grid-column: 1 / -1; }
@media (max-width: 639px) { .fgrid { grid-template-columns: minmax(0,1fr); } }
.field label {
  display: block; margin-bottom: 10px;
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-40);
}
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  background: var(--bg-deep); border: 1px solid var(--line-2);
  border-radius: var(--radius); color: #fff; font-size: .9375rem;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-40); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-t10);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 44px;
}
/* iOS zooms a focused field under 16px */
@media (max-width: 767px) {
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* Form result states — the quote form posts with fetch so it can report back
   in place instead of throwing the visitor at a blank confirmation page. */
.formnote {
  display: none; gap: 12px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid var(--line); font-size: .9rem; line-height: 1.65;
}
.formnote.is-on { display: flex; }
.formnote svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.formnote--ok {
  background: rgba(7,13,26,.9);
  border-color: rgba(69,195,255,.4);
  color: var(--text-70);
}
.formnote--ok svg { color: var(--blue); }
.formnote--err { background: rgba(220,33,39,.10); border-color: rgba(255,59,69,.4); color: var(--text-70); }
.formnote--err svg { color: var(--red); }
.formnote a { color: var(--blue); }
.btn[aria-busy="true"] { opacity: .62; pointer-events: none; }

/* Contact info blocks */
.info { display: grid; gap: 18px; }
.infobox {
  padding: 26px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--card);
  border-color: var(--line);
}
.infobox b {
  display: flex; align-items: center; gap: 11px; margin-bottom: 14px;
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-40);
}
.infobox b svg { width: 16px; height: 16px; color: var(--blue); }
.infobox p, .infobox a { font-size: 1.03rem; color: var(--text); line-height: 1.6; }
.infobox a { display: inline-block; padding-block: 7px; }
.infobox a:hover { color: var(--blue); }
.infobox small { display: block; margin-top: 8px; font-size: .8125rem; color: var(--text-40); line-height: 1.6; }
.infobox--accent {
  background: linear-gradient(135deg, rgba(220,33,39,.10), rgba(7,13,26,.72));
  border-color: rgba(255,59,69,.28);
}
.infobox--accent b svg { color: var(--red); }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: .8125rem; color: var(--text-40); margin-bottom: 28px; }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a { display: inline-block; padding-block: 4px; }
.crumbs a:hover { color: var(--blue); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--text-30); }

/* ---------- CTA band ---------- */
.cta {
  position: relative; overflow: hidden;
  padding: 76px 44px; border-radius: var(--radius); text-align: center;
  border: 1px solid var(--line);
  background: rgba(7,13,26,.72);
  border-color: var(--line-2);
}
/* the CTA band is a bordered panel, not a light show — no radial wash */
.cta > * { position: relative; }
@media (max-width: 639px) { .cta { padding: 48px 24px; } }
.cta h2 { padding-bottom: 0; }
.cta p { color: var(--text-50); max-width: 36rem; margin: 20px auto 32px; line-height: 1.8; }
.cta .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: 76px 0; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line-2);
}
.foot-grid { display: grid; gap: 52px; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 44px; } }
@media (max-width: 559px)  { .foot-grid { grid-template-columns: minmax(0,1fr); gap: 36px; } }
/* h3, not h4 — the page runs h1 -> h2 and jumping to h4 here skipped a level */
.foot-col h3 {
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--text-40);
  margin-bottom: 20px; line-height: 1.25;
}
.foot-col ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.foot-col a, .foot-col li { font-size: .875rem; color: var(--text-50); }
.foot-col a { display: inline-block; padding-block: 5px; transition: color .4s var(--ease); }
.foot-col a:hover { color: var(--blue); }
.foot-brand p { font-size: .89rem; line-height: 1.8; color: var(--text-50); margin: 22px 0; max-width: 30rem; }
.socials { display: flex; gap: 12px; }
.socials a {
  width: 44px; height: 44px; border-radius: var(--radius);
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-2); transition: all .4s var(--ease);
}
.socials a:hover { border-color: transparent; background: var(--card-hi);
  border-color: var(--line-3); }
.socials svg { width: 18px; height: 18px; color: var(--text-50); }
.socials a:hover svg { color: #fff; }
.foot-bar {
  margin-top: 64px; padding-block: 26px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: .8125rem; color: var(--text-40);
}
.foot-bar a { color: var(--text-40); display: inline-block; padding-block: 4px; }
.foot-bar a:hover { color: var(--text-50); }

/* ---------- Sticky mobile call bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; gap: 12px; padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(3, 6, 12, .96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-2);
  transform: translateY(115%); visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s linear .45s;
}
.callbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2);
}
.callbar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.callbar .btn { flex: 1; padding: 15px 12px; font-size: .9375rem; letter-spacing: .04em; }
@media (max-width: 767px) {
  .callbar { display: flex; }
  body { padding-bottom: 84px; }
}

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ---------- Target size ----------
   An inline <a> is only as tall as its font's content box — 17px at .875rem —
   so links sitting inside running text miss WCAG 2.2's 24px minimum. The worst
   was the phone number in the CTA band, which is on every page. Vertical
   padding on an inline box grows the hit area without changing the line box,
   so this buys the height without reflowing a single line. */
.prose a, .note a, .faq .answer a, .cta p a, .body-sm a, .lede a, .hero__meta a,
.review blockquote a, .tile__tag a {
  padding-block: 4px;
}

/* ---------- Utility ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; z-index: 300; background: var(--blue); color: #041018; padding: 14px 22px; font-weight: 700; }
.skip:focus { left: 0; top: 0; }
.center { text-align: center; }
.mt-40 { margin-top: 44px; }
.mt-64 { margin-top: 68px; }

/* ---------- Ad landing pages ----------
   Built from the same parts as every other page. Only the hero changes: the
   quote form sits beside the pitch on desktop, and directly under it on a
   phone, so nobody has to hunt for it. Nav and footer links are removed in
   header.php / footer.php — on paid traffic every exit is a lost lead. */
.hero--funnel { min-height: 0; overflow: clip; }   /* clip, not hidden: hidden would stop the sticky pitch below */
.hero--funnel .container {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px; align-items: start; padding-block: 148px 96px;
}
@media (max-width: 1023px) {
  .hero--funnel .container { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 116px 64px; }
}
.hero--funnel .hero__inner { max-width: 38rem; }
.hero--funnel .hero__sub { margin-bottom: 32px; }
.hero--funnel .btn-row { margin-bottom: 36px; }
/* the form stacks under this text over a bright photo, so it needs the stronger tone */
.is-funnel .hero__sub, .is-funnel .hero__meta span { color: var(--text-70); }
@media (min-width: 1024px) { .hero--funnel h1 { font-size: clamp(2.8rem, 4.4vw, 4.1rem); } }
/* the full quote form runs longer than the pitch beside it; keep the price and
   call button in view while someone fills it in */
@media (min-width: 1024px) { .hero--funnel .hero__inner { position: sticky; top: 112px; } }
/* wide screens get a landscape crop of the truck; keep it a touch low so the
   headline sits over sky, not over the grille */
@media (min-width: 768px) { .hero--funnel .hero__bg img { object-position: 50% 60%; } }
/* On a phone the form has to start above the fold, so the pill and the call
   button go (the header keeps a call button) and the copy tightens up. */
@media (max-width: 639px) {
  .hero--funnel .container { padding-block: 92px 48px; gap: 20px; }
  .hero--funnel .pill, .hero--funnel .btn-row { display: none; }
  .hero--funnel h1 { margin-bottom: 16px; font-size: 2.2rem; }
  .hero--funnel .hero__sub { margin-bottom: 20px; font-size: 1rem; line-height: 1.6; }
  .hero--funnel .hero__meta { gap: 8px 20px; }
  .hero--funnel .hero__meta > span:nth-child(n+2) { display: none; }
}
.hero--funnel .form { padding: 34px; background: var(--card-hi); border-color: var(--line-2); }
@media (max-width: 639px) { .hero--funnel .form { padding: 26px 20px; } }
.form__head h2 { font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.05; }
.form__head p { margin-top: 10px; font-size: .9rem; line-height: 1.6; color: var(--text-50); }
.form .body-sm { font-size: .8125rem; line-height: 1.6; color: var(--text-40); }

.site-footer--min { padding-block: 0; }
.site-footer--min .foot-bar { margin-top: 0; }
.form .body-sm a, .site-footer--min .foot-bar a { color: var(--blue); }   /* links, not grey text */
/* No drawer on the ad pages, so the call button stays in the header on a
   phone, shrunk to its icon. */
@media (max-width: 1023px) {
  .is-funnel .header-cta { display: inline-flex; padding: 12px 16px; min-height: 44px; }
}
/* every phone width, 320 up: name, Call and Text on one row, the wordmark sized to what's left */
@media (max-width: 639px) {
  .is-funnel .brand__word { display: block; width: min(172px, calc(100vw - 215px)); }
  .is-funnel .header-cta span { display: none; }
  .is-funnel .header-cta svg { width: 18px; height: 18px; }
}

.steps--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1199px) { .steps--5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 767px)  { .steps--5 { grid-template-columns: minmax(0,1fr); } }
.gallery--strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery--strip .tile { aspect-ratio: 3 / 4; }
/* Below desktop the eight jobs are one swipeable row (the way people browse on
   Instagram and Facebook, where this traffic comes from) instead of a grid
   four screens tall, or four tiles too narrow for their labels. */
@media (max-width: 1023px) {
  .gallery--strip {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 38%;
    gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
  }
  .gallery--strip::-webkit-scrollbar { display: none; }
  .gallery--strip .tile { scroll-snap-align: start; }
}
@media (max-width: 639px) { .gallery--strip { grid-auto-columns: 66%; } }
.gallery-cta { justify-content: center; margin-top: 40px; }

/* On a phone the jobs follow the form closely, so the first scroll lands on
   real trucks instead of a section header. */
@media (max-width: 639px) {
  .hero--funnel .container { padding-bottom: 32px; }
  .hero--funnel + .section { padding-top: 40px; }
  .hero--funnel + .section .sec-head { margin-bottom: 24px; }
  .hero--funnel + .section .sec-head h2 { font-size: 1.75rem; }
  .gallery-cta { margin-top: 28px; }
}
.gallery--strip:focus-visible { outline-offset: 6px; }

/* a note with the job photo that proves it */

/* ---- polish pass (review 3) ---- */
.nowrap { white-space: nowrap; }
.is-funnel a[href^="tel:"], .is-funnel a[href^="sms:"] { white-space: nowrap; }   /* never "(432) 202-" / "8294" */
.form__head a, .form__next a { color: var(--blue); }
.is-funnel .faq summary { text-wrap: balance; }            /* no one-word second lines */
.is-funnel .cta p:last-child { margin-bottom: 0; }         /* even top/bottom in the closing box */
.is-funnel .hero--short .pill::before { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-t10); }  /* success, not alert */
/* tablets: no half-empty grid rows */
@media (min-width: 640px) and (max-width: 1023px) { .is-funnel .cols-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 768px) and (max-width: 1199px) {
  .steps--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps--5 .step { grid-column: span 2; }
  .steps--5 .step:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 639px) {
  .is-funnel .sec-head { margin-bottom: 40px; }
}

/* ---- v4: proof-led funnel ---- */
/* Google rating line: the strongest proof on the page, so it sits right under the pitch */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 24px; font-size: .95rem; color: var(--text-70); }
.rating b { font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.rating .stars svg { width: 16px; height: 16px; }
.rating__n { color: var(--text-50); }
.rating--head { margin: 18px 0 0; font-size: .9rem; }
.hero__checks { margin-bottom: 32px; }
.hero__checks li { font-size: .98rem; color: var(--text-70); }
@media (max-width: 639px) {
  .hero--funnel .hero__checks { display: none; }
  .hero--funnel .rating { margin-bottom: 0; }
}

/* the owner's gloss clip, first tile of the jobs */
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* wax/sealant vs ceramic */
.compare { margin-top: 48px; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.compare__row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
.compare__row > * { display: flex; gap: 10px; align-items: flex-start; padding: 18px 22px; border-top: 1px solid var(--line); font-size: .94rem; line-height: 1.5; }
.compare__row--head > * { border-top: 0; padding-block: 16px; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-50); }
.compare b { font-family: var(--font-display); font-size: 1rem; color: #fff; }
.compare__row > :nth-child(2) { color: var(--text-50); }
.compare__row > :nth-child(3) { background: var(--blue-t05); color: #fff; }
.compare__row--head > :nth-child(3) { color: var(--blue); }
.compare svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.compare__row > :nth-child(2) svg { color: var(--red); }
.compare__row > :nth-child(3) svg { color: var(--blue); }
@media (max-width: 639px) {
  .compare { margin-top: 32px; }
  .compare__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compare__row--head > :first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* hidden, but still a header to a screen reader */
  .compare__row > b { grid-column: 1 / -1; padding: 16px 16px 0; background: transparent; }
  .compare__row > span { border-top: 0; padding: 8px 16px 16px; font-size: .86rem; }
  .compare__row--head > span { padding: 14px 16px; }
}

/* ---- v5: conversion pass ---- */
/* header: Call and Text sit together on the right */
.is-funnel .site-header .container > .header-cta:not(.header-cta--text) { margin-left: auto; }
.is-funnel .site-header .container { gap: 10px; }
.header-cta--text { background: transparent; border: 1px solid var(--line-3); color: #fff; }
.header-cta--text:hover { background: var(--card-hi); border-color: #fff; }

/* three of the owner's trucks on the first screen (phone) and in the hero column (desktop) */
.hero__jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 28px; }
.hero__jobs img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 68%; border-radius: var(--radius); border: 1px solid var(--line-2); }
@media (max-width: 639px) { .hero__jobs { margin: 16px 0 0; } }
/* under the button: what happens next, then a customer's words */
.form__next { font-size: .875rem; line-height: 1.6; color: var(--text-70); text-align: center; }
.form__proof { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font-size: .875rem; color: #fff; text-align: center; }
.form__proof span:last-child { color: var(--text-50); }
/* the form on a phone: first and last name side by side, the rest full width */
@media (max-width: 639px) {
  .hero--funnel .fgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 12px; }
  .hero--funnel .fgrid > .field:nth-child(n+3) { grid-column: 1 / -1; }
  .hero--funnel .field textarea { min-height: 84px; }
  .hero--funnel .field label { color: var(--text-70); }
  .hero--funnel .form__head p { display: block; }
}
/* desktop: pull the hero up so the button clears the fold */
@media (min-width: 1024px) { .hero--funnel .container { padding-top: 120px; } }
/* phone: the comparison already makes the three cards' points */
@media (max-width: 639px) {
  .why-coat .cols-3 { display: none; }
  .why-coat .compare { margin-top: 0; }
}
/* three buttons in the phone bar */
.is-funnel .callbar .btn { padding-inline: 8px; }

/* ---- v6: polish pass ---- */
/* phone: a shorter header on the ad pages lifts the pitch and the form */
@media (max-width: 639px) {
  .is-funnel .site-header { height: 64px; }
  .is-funnel .site-header.is-stuck { height: 60px; }
  .hero--funnel .container { padding-top: 76px; }
  .hero--funnel .pill { display: inline-flex; margin-bottom: 12px; padding: 6px 12px; }
  .pill__svc, .form__svc, .ph-hide { display: none; }   /* the header has Text and Call on a phone */
}
/* optional fields say so; the required ones already carry the red star */
.field label .opt { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-50); }
/* field edges you can see in the sun (3:1 against the card) */
.hero--funnel .field input, .hero--funnel .field select, .hero--funnel .field textarea { border-color: rgba(255, 255, 255, .42); }
.hero--funnel .field input:hover, .hero--funnel .field select:hover, .hero--funnel .field textarea:hover { border-color: rgba(255, 255, 255, .55); }
.hero--funnel .field input:focus, .hero--funnel .field select:focus, .hero--funnel .field textarea:focus { border-color: var(--blue); }
.hero--funnel .field textarea { min-height: 84px; }
/* the ad page quotes ceramic only: the service is a fixed, ticked value, not a menu */
.hero--funnel .field input.field__fixed {
  padding-left: 46px; font-weight: 600; color: #fff; cursor: default; pointer-events: none;
  border-color: var(--blue-t35);
  background: var(--blue-t10) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345C3FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat 16px center / 18px;
}
/* "five questions": the comparison table with two columns, AutoX's answer in the ceramic column's colours */
.compare--qa { margin-top: 0; }
.compare--qa .compare__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.compare--qa .compare__row > :nth-child(2) { background: var(--blue-t05); color: #fff; }
.compare--qa .compare__row > :nth-child(2) svg { color: var(--blue); }
.compare--qa .compare__row--head > :nth-child(2) { color: var(--blue); }
@media (max-width: 639px) { .compare--qa .compare__row > span { grid-column: 1 / -1; } }
.qa-cta { margin-top: 32px; }
/* the process opens on the same TRX job, during prep and finished */
.prep-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 190px)) minmax(0, 1fr); gap: 16px 28px; align-items: center; max-width: 60rem; margin-bottom: 32px; }
.prep-pair figure { position: relative; margin: 0; }
.prep-pair img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.prep-pair .tile__tag { left: 10px; bottom: 10px; padding: 5px 10px; font-size: .6875rem; }
.prep-pair p { font-size: .98rem; }
@media (max-width: 767px) { .prep-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prep-pair p { grid-column: 1 / -1; } }
/* consent and privacy right under the button */
.form__consent { font-size: .8125rem; line-height: 1.55; color: var(--text-50); text-align: center; }
/* cost drivers are not inclusions: dots, not checkmarks */
.checks--plain li { grid-template-columns: 6px 1fr; }
.checks--plain li::before { content: ""; width: 6px; height: 6px; margin-top: 10px; border-radius: 50%; background: var(--text-40); }
/* phone: tighter rhythm, and no second Call button where the bottom bar already has one */
@media (max-width: 639px) {
  .is-funnel .section { padding-block: 56px; }
  .is-funnel .hero--funnel + .section { padding-top: 40px; }
  .is-funnel .btn-row .btn--outline[href^="tel:"] { display: none; }
  .is-funnel .steps--5 .step { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 18px 18px 20px; }
  .is-funnel .steps--5 .step b.n { grid-row: span 2; margin: 0; font-size: 1.4rem; }
  .is-funnel .steps--5 .step h3 { margin-bottom: 6px; }
}
/* the clip has controls; the tag moves up out of their way */
.tile--video .tile__tag { top: 14px; bottom: auto; }
.tile--video::after { display: none; }
/* the FAQ's overflow clip hid the keyboard focus ring */
.faq summary:focus-visible { outline-offset: -3px; }
/* iPad landscape: room for the field text */
@media (min-width: 1024px) and (max-width: 1179px) { .hero--funnel .container { gap: 40px; } .hero--funnel .form { padding: 28px; } }
.field select { padding-right: 36px; background-position: right 10px center; }