/*
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.1.0
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
*/

/* ==============================================================
   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; }
.review__who 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-30); }
.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; }