/*
Theme Name: Texas Wrecked Cars
Theme URI: https://texaswreckedcars.com/
Author: Blue Ribbon Auto Sales LLC (TrackWala)
Description: Purpose-built theme for texaswreckedcars.com. Each page writes its own
  title, meta description, canonical, Open Graph tags and JSON-LD from its template.
  Layout system shared with the Fremont site; color system is the Texas flag.
Version: 1.14.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary
Text Domain: texas-wrecked-cars
*/


/* ==========================================================================
   Texas Wrecked Cars
   Operated by Blue Ribbon Auto Sales LLC (TrackWala)

   Same layout language as the Fremont and Arizona sites: alternating light and
   dark bands, uppercase letter-spaced eyebrows, a short accent rule under the
   headline, rounded cards, a photographic hero with the copy overlaid.

   The color system is the only thing that differs, and it is the Texas flag
   rather than the TrackWala violet:

     #BF0A30  flag red, the accent and the primary call to action
     #002868  flag navy, the dark ground and the heading color
     #001B47  a deeper navy for the foot of gradients
     #FFFFFF  white, the third flag color and the default ground
     #F6F8FC  the near-white section ground
     #EEF3FB  the tinted card ground

   Red is used for accents and action, navy for structure. They are never
   layered on each other at small sizes, because red on navy is close to
   unreadable and it is the classic way flag palettes go wrong.
   ========================================================================== */

:root {
  /* Texas flag */
  --red:        #BF0A30;   /* flag red, for fills and light grounds */
  --red-deep:   #960724;
  --red-ink:    #A80A2A;   /* accent text on light grounds, 6.4:1 on white */
  --red-bright: #FF6B84;   /* accent text on navy, 5.1:1 on the darkest ground.
                              Flag red on navy measures 2.2:1, which is why it
                              is never used as text on a dark band here. */
  --navy:       #002868;
  --navy-800:   #00204F;
  --navy-900:   #001B47;

  /* Grounds */
  --ground:     #001129;
  --ground-2:   #001B42;
  --ground-3:   #002559;

  /* Light grounds */
  --white:      #FFFFFF;
  --paper:      #F6F8FC;
  --tint:       #EEF3FB;
  --tint-2:     #E4ECF8;

  /* Ink */
  --ink:        #0F172A;
  --ink-soft:   #475569;
  --ink-faint:  #64748B;

  /* Lines */
  --line:       #DCE4F0;
  --line-tint:  #C9D8EE;
  --line-dark:  rgba(255,255,255,.16);

  --wrap:       1180px;
  --radius:     14px;
  --radius-lg:  18px;
  --shadow:     0 1px 2px rgba(0,20,60,.05), 0 8px 24px rgba(0,20,60,.07);
  --shadow-lift:0 2px 6px rgba(0,20,60,.07), 0 18px 44px rgba(0,20,60,.11);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--red-ink); }
a:hover { color: var(--red); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 800;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.25rem); }
h3 { font-size: 1.16rem; letter-spacing: -.012em; }
h4 { font-size: 1rem; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

section { padding: 72px 0; }
section.tight { padding: 48px 0; }

/* ---------- section grounds ----------
   The deck's rhythm: near-white by default, a violet-tinted band for supporting
   material, a deep panel when something needs to land hard. */

.tinted     { background: var(--paper); }
.purple-tint{ background: var(--tint); }

.on-dark,
section.on-dark {
  background:
    radial-gradient(900px 480px at 82% -20%, rgba(0,70,170,.22), transparent 60%),
    linear-gradient(168deg, var(--ground-3) 0%, var(--ground-2) 42%, var(--ground) 100%);
  color: #fff;
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark p { color: rgba(255,255,255,.82); }
.on-dark a { color: var(--red-bright); }
.on-dark .lede { color: rgba(255,255,255,.86); }
/* Buttons keep their own colors on a dark ground: the link rule above is for
   body copy, not for a gold button with dark ink on it. */
.on-dark .btn-gold, .cta-band .btn-gold, .hero .btn-gold, .split-dark .btn-gold { color: #FFFFFF; }
.on-dark .btn-ghost, .cta-band .btn-ghost, .hero .btn-ghost, .split-dark .btn-ghost { color: #fff; }
.on-dark .btn-purple, .cta-band .btn-purple, .hero .btn-purple, .split-dark .btn-purple { color: #fff; }
.on-dark .btn-outline, .cta-band .btn-outline, .hero .btn-outline, .split-dark .btn-outline { color: var(--red-ink); }

/* ---------- eyebrow ----------
   Uppercase, wide tracking, violet. Straight off every slide in the deck. */

.eyebrow {
  display: block;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin-bottom: 12px;
}
.eyebrow.on-dark,
.on-dark .eyebrow { color: var(--red-bright); background: none; }

/* The short violet rule the deck sets under its headlines. */
.rule::after {
  content: "";
  display: block;
  width: 74px;
  height: 4px;
  margin-top: 22px;
  border-radius: 2px;
  background: var(--red);
}

.lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }

.btn-gold {
  background: var(--red); color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(191,10,48,.28);
}
.btn-gold:hover { background: #D4173C; color: #FFFFFF; }

.btn-purple {
  background: var(--navy); color: #fff;
  box-shadow: 0 6px 20px rgba(0,40,104,.28);
}
.btn-purple:hover { background: var(--navy-800); color: #fff; }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn-outline { background: #fff; color: var(--red-ink); border-color: var(--line-tint); }
.btn-outline:hover { border-color: var(--red-ink); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  min-height: 68px;
}
.brand {
  font-weight: 800; font-size: 1.04rem; letter-spacing: -.02em;
  color: var(--red-ink); text-decoration: none; margin-right: auto;
  line-height: 1.15;
}
.brand span {
  display: block; font-size: .68rem; font-weight: 700; color: var(--ink-faint);
  letter-spacing: .08em; text-transform: uppercase;
}

/* The deck's two-tone lockup: dark question, violet answer. */
.brand-tagline {
  font-weight: 800; font-size: .92rem; letter-spacing: -.01em;
  color: var(--ink); white-space: nowrap;
}
.brand-tagline .tagline-accent { color: var(--red-ink); }

.site-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .93rem;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--red-ink); border-bottom-color: var(--red-ink); }
.site-nav a[aria-current="page"] { color: var(--red-ink); border-bottom-color: var(--red); }

.header-phone { font-weight: 800; color: var(--navy); text-decoration: none; font-size: .97rem; }
.header-cta { padding: 11px 20px; font-size: .95rem; border-radius: 10px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy-800); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; top: 0; z-index: 200; }

/* ---------- hero ----------
   Deck cover: near-black indigo, a violet bloom top right, white headline,
   red accent on the tagline. */

.hero {
  background:
    radial-gradient(1000px 520px at 78% -12%, rgba(0,70,170,.30), transparent 62%),
    linear-gradient(168deg, var(--ground-3) 0%, var(--ground-2) 44%, var(--ground) 100%);
  color: #fff;
  padding: 74px 0 80px;
}
.hero h1 { color: #fff !important; max-width: 20ch; margin-bottom: 20px; }
.hero p.hero-sub {
  font-size: clamp(1.06rem, 2.1vw, 1.24rem);
  color: rgba(255,255,255,.86) !important;
  max-width: 56ch;
  margin-bottom: 0;
}
.hero .btn-row { margin-top: 30px; }
.hero-note { margin-top: 22px; font-size: .92rem; color: rgba(255,255,255,.68) !important; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 36px; padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}
.hero-fact { flex: 1 1 190px; }
.hero-fact strong { display: block; font-size: 1.34rem; color: #fff; line-height: 1.2; }
.hero-fact span { font-size: .88rem; color: rgba(255,255,255,.78); }

/* ---------- background hero with overlaid copy ----------
   The hero photograph runs full bleed behind the section and the copy sits on
   top of it. A gradient scrim carries the contrast: near solid on the right
   where the text is, thinning across to the left so the rep, the key handoff
   and the loaded flatbed still read as a photograph rather than a violet wash.

   The copy sits right, not left, because the subject of the photograph stands
   on the left. She faces right, so her eyeline leads into the headline.

   The image is an <img> inside .hero-media, not a CSS background. It is the
   largest contentful paint on this page, so it needs alt text, intrinsic width
   and height to reserve its box, srcset, and fetchpriority. A background-image
   gets none of those.
   ------------------------------------------------------------ */

.hero.hero-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  color: #fff;
  background: var(--ground);
}

.hero-media { position: absolute; inset: 0; z-index: 0; margin: 0; }
.hero-media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* The frame is nearly square and the hero is wide, so the crop is vertical.
     Held low enough to keep the rep's face, the key and the check in shot. */
  object-position: 50% 56%;
}

.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(281deg,
      rgba(0,17,41,.970) 0%,
      rgba(12,6,40,.955) 30%,
      rgba(0,21,50,.915) 44%,
      rgba(30,16,66,.810) 54%,
      rgba(0,33,80,.570) 66%,
      rgba(0,44,108,.390) 80%,
      rgba(191,10,48,.310) 100%),
    radial-gradient(900px 420px at 14% -12%, rgba(0,70,170,.20), transparent 62%),
    /* Weighted to the foot of the section so the trust row keeps its contrast
       wherever the photograph happens to be bright. */
    linear-gradient(180deg,
      rgba(0,6,20,.48) 0%,
      rgba(0,6,20,.30) 12%,
      rgba(0,6,20,.06) 28%,
      rgba(0,6,20,.28) 62%,
      rgba(0,6,20,.64) 88%,
      rgba(0,6,20,.74) 100%);
}

.hero-bg-inner { position: relative; z-index: 2; padding-top: 58px; padding-bottom: 30px; }

.hero.hero-bg .hero-copy { max-width: 620px; margin-left: auto; }
.hero.hero-bg h1 {
  max-width: 21ch;
  font-size: clamp(1.9rem, 3.1vw, 2.5rem);
  text-shadow: 0 1px 24px rgba(0,5,16,.6);
}
.hero.hero-bg .hero-sub { max-width: 46ch; text-shadow: 0 1px 18px rgba(0,5,16,.6); }
.hero.hero-bg .hero-note {
  max-width: 52ch;
  color: rgba(255,255,255,.88) !important;
  text-shadow: 0 1px 14px rgba(0,5,16,.65);
}

.hero.hero-bg .hero-facts {
  position: relative;
  margin-top: 34px; padding: 24px 0 2px;
  border-top: 1px solid rgba(255,255,255,.22);
}
.hero.hero-bg .hero-fact strong { font-size: 1.28rem; }
.hero.hero-bg .hero-fact span   { color: rgba(255,255,255,.86); }

/* The wider the viewport, the harder object-fit: cover crops a nearly square
   photograph vertically. Left at one value the rep's eyes fall out of frame on
   a large monitor, so the focal point climbs as the crop tightens. */
@media (min-width: 1500px) { .hero-media img { object-position: 50% 44%; } }
@media (min-width: 2000px) { .hero-media img { object-position: 50% 38%; } }

@media (min-width: 901px) {
  /* The trust row runs the full width of the hero, so its far columns sit over
     the brightest part of the photograph. Rather than darken the whole scrim
     and lose the picture, the row gets its own full-bleed band. */
  .hero.hero-bg .hero-facts::before {
    content: "";
    position: absolute; z-index: -1;
    top: -1px; bottom: -30px; left: -50vw; right: -50vw;
    background: linear-gradient(180deg, rgba(0,6,20,.78) 0%, rgba(0,6,20,.92) 100%);
  }
}


/* ---------- the brand lockup ----------
   Question in the body color, answer in flag red. .tagline inherits, so it
   reads white on navy and ink on the white header.
   ------------------------------------------------------------ */

.tagline { color: inherit; }
.tagline-accent { color: var(--red-bright); }
.brand-tagline .tagline { color: var(--ink); }

/* ---------- brand tagline in the hero ----------
   Carries the strapline and the service area on one line rather than stacking
   two small labels above the headline. */

.hero-tagline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.hero-tagline .tagline {
  font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,5,16,.65);
}
.hero-tagline .tagline-accent { color: var(--red-bright); }
.hero-tagline-geo {
  position: relative; padding-left: 15px;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.76);
}
.hero-tagline-geo::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 13px; background: rgba(255,255,255,.36);
}
@media (max-width: 520px) {
  /* The divider reads as a stray mark once the line wraps, so the two halves
     stack instead of butting against each other. */
  .hero-tagline { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-tagline-geo { padding-left: 0; }
  .hero-tagline-geo::before { display: none; }
}

/* ---------- cards & grids ---------- */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
@media (min-width: 900px) {
  /* Fixed at three so a nine-card set reads as three tidy rows. On auto-fit a
     wide viewport gives four columns and the ninth card sits alone. */
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }

.on-dark .card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
  color: rgba(255,255,255,.84);
}
.on-dark .card h3 { color: #fff; }

/* Numbered step cards, the deck's process strip. */
.card-step { position: relative; padding-top: 30px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 14px;
  border-radius: 50%;
  background: var(--red); color: #fff;
  font-weight: 800; font-size: 1.02rem;
}

/* The problem cards on slide 2: tinted, no shadow, violet left edge. */
.card-problem {
  background: var(--tint);
  border: 1px solid var(--line-tint);
  border-left: 4px solid var(--red);
  box-shadow: none;
}

.callout {
  background: var(--tint);
  border: 1px solid var(--line-tint);
  border-left: 4px solid var(--red-ink);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 26px 0;
}
.on-dark .callout {
  background: rgba(0,70,170,.12);
  border-color: rgba(0,70,170,.34);
  border-left-color: var(--red);
  color: rgba(255,255,255,.86);
}

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.check-list li::before {
  content: "";
  position: absolute; left: 4px; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red);
}
.on-dark .check-list li { color: rgba(255,255,255,.84); }

.area-list { columns: 2; column-gap: 30px; margin: 0; padding-left: 20px; }
.area-list li { margin-bottom: 7px; }

/* ---------- proof figures ----------
   Big violet numerals with a short label, the deck's market-driver pattern. */

.proof { padding: 0; }
.proof-figures { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 8px; }
.proof-fig { flex: 1 1 190px; }
.split-light .proof-fig { flex: 1 1 120px; }
.proof-fig strong {
  display: block;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
  color: var(--red-ink);
}
.proof-fig span { display: block; font-size: .95rem; color: var(--ink-soft); margin-top: 6px; }
.on-dark .proof-fig strong { color: var(--red-bright); }
.on-dark .proof-fig span { color: rgba(255,255,255,.76); }

/* ---------- offer comparison ----------
   Slide 6: a horizontal bar per buyer, ours filled violet and the rest muted.
   Widths are set inline per row because they are data, not styling. */

.offer-compare { margin-top: 26px; display: grid; gap: 14px; }
.offer-row {
  display: grid;
  grid-template-columns: minmax(120px, 170px) 1fr auto;
  align-items: center; gap: 16px;
}
.offer-row .offer-name { font-weight: 700; font-size: .97rem; }
.offer-track {
  display: block;
  background: rgba(0,70,170,.14);
  border-radius: 8px;
  height: 30px;
  overflow: hidden;
}
.on-dark .offer-track { background: rgba(255,255,255,.10); }
.offer-bar { display: block; height: 100%; border-radius: 8px; background: rgba(0,70,170,.55); }
.offer-row.is-us .offer-name { color: var(--red-ink); }
.on-dark .offer-row.is-us .offer-name { color: var(--red-bright); }
.offer-row.is-us .offer-bar {
  background: linear-gradient(90deg, var(--red), var(--red));
}
.offer-row .offer-value { font-weight: 800; font-size: 1.02rem; white-space: nowrap; }
.offer-row.is-none .offer-track { background: none; }
.offer-row.is-none .offer-value { color: var(--ink-faint); font-weight: 600; }
.on-dark .offer-row.is-none .offer-value { color: rgba(255,255,255,.6); }
.offer-note { margin-top: 18px; font-size: .88rem; color: var(--ink-faint); }
.on-dark .offer-note { color: rgba(255,255,255,.62); }

/* ---------- split band ----------
   Slides 2, 4, 5 and 6: a dark column of statement beside a light column of
   detail, meeting on a hard vertical edge. */

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split-dark {
  background:
    radial-gradient(600px 420px at 20% 0%, rgba(0,70,170,.26), transparent 62%),
    linear-gradient(200deg, var(--navy) 0%, var(--ground-2) 60%, var(--ground) 100%);
  color: #fff;
  padding: 66px 46px 66px max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
}
.split-dark h2 { color: #fff; }
.split-dark p { color: rgba(255,255,255,.80); }
.split-dark .eyebrow { color: var(--red-bright); }
.split-light {
  background: var(--white);
  padding: 66px max(24px, calc((100vw - var(--wrap)) / 2 + 24px)) 66px 46px;
}

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; }
table.widefat {
  width: 100%; border-collapse: collapse; min-width: 560px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
table.widefat th, table.widefat td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.widefat th { background: var(--tint); font-weight: 800; font-size: .9rem; letter-spacing: .02em; }
table.widefat tr:last-child td { border-bottom: none; }
table.striped tbody tr:nth-child(even) { background: var(--paper); }
.table-note { font-size: .88rem; color: var(--ink-faint); margin-top: 10px; }

/* ---------- cta band ---------- */

.cta-band {
  background:
    radial-gradient(700px 380px at 84% -30%, rgba(0,70,170,.28), transparent 60%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy) 52%, var(--ground) 100%);
  color: #fff;
  padding: 60px 0;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.84); }

/* ---------- contact cards ---------- */

.contact-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
}
.contact-card h3 { margin-bottom: .35em; }
.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.hours-list li:last-child { border-bottom: none; }

/* ---------- breadcrumbs ---------- */

/* --ink-faint measures 4.43:1 here, a hair under AA for text this size. This
   is the breadcrumb on every page, English and Chinese, so it takes the softer
   ink the links already use and clears the threshold. */
.crumbs { font-size: .86rem; color: var(--ink-soft); padding: 16px 0 0; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--red-ink); text-decoration: underline; }

/* ---------- footer ----------
   Slide 11: a near-black slate ground, columns divided by hairlines, the
   contact details sitting on their own row at the foot. */

.site-footer {
  background: linear-gradient(180deg, var(--ground-2) 0%, var(--ground) 100%);
  color: rgba(255,255,255,.74);
  padding: 58px 0 30px;
  font-size: .94rem;
}
.footer-top { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.site-footer h4 {
  color: #fff; font-size: .84rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.site-footer a { color: rgba(255,255,255,.80); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-tagline { font-weight: 800; color: #fff; margin-bottom: 6px !important; }
.footer-tagline .tagline-accent { color: var(--red-bright); }
.footer-identity { color: rgba(255,255,255,.86); font-weight: 600; }
.footer-bottom {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: .86rem; color: rgba(255,255,255,.56);
}

/* ---------- reviews ---------- */

.review-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  /* Reviews vary wildly in length. Stretching every card to match the longest
     one leaves short reviews sitting above an empty half-card. */
  align-items: start;
}
@media (min-width: 860px) {
  /* Two columns rather than three: four reviews read as a tidy block instead of
     a row of three plus an orphan, and a long review gets a sensible measure. */
  .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.review-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow);
}
.review-card blockquote { margin: 0; }
.review-card blockquote p { margin: 0; color: var(--ink); }
.review-stars { color: var(--red); font-size: 1.05rem; letter-spacing: .14em; margin-bottom: 12px; }
.review-stars-off { color: var(--line); }
.review-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.review-meta strong { display: block; font-size: .95rem; }
.review-meta span { font-size: .86rem; color: var(--ink-faint); }
.review-meta a { color: var(--ink-faint); }

/* ---------- price promise ---------- */

.promise-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); margin-top: 30px; }
.promise-card {
  background: #fff; border: 1px solid var(--line-tint); border-radius: var(--radius-lg);
  padding: 30px 28px 24px; box-shadow: var(--shadow-lift);
}
.promise-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--red); color: #fff; font-weight: 800; font-size: 1.1rem;
  margin-bottom: 16px;
}
.promise-ask {
  margin-top: 26px;
  background:
    radial-gradient(560px 300px at 88% -40%, rgba(0,70,170,.3), transparent 62%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--ground-2) 62%, var(--ground) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 30px 34px;
}
.promise-ask p { color: rgba(255,255,255,.88); }
.promise-ask p:last-child { margin-bottom: 0; }
.promise-ask-label {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red-bright) !important; margin-bottom: 8px !important;
}
.promise-ask-q {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 800; line-height: 1.3; color: #fff !important; margin-bottom: .7em !important;
}

/* ---------- admin notices (setup screen) ---------- */

.notice { padding: 12px 16px; border-left: 4px solid var(--red-ink); background: #fff; margin: 12px 0; }
.notice-success { border-left-color: #15803D; }
.notice-info { border-left-color: var(--red-ink); }


/* ---------- comparison table ----------
   Slide 4's three-column comparison, flattened into a table: our column carries
   the violet ground so the eye lands there first. */

table.compare {
  width: 100%; min-width: 640px; border-collapse: collapse;
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); font-size: .96rem;
}
table.compare th, table.compare td {
  padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.compare thead th {
  background: var(--navy); color: #fff; font-weight: 700; font-size: .92rem;
  border-bottom: none;
}
table.compare thead th:last-child { background: var(--red); }
table.compare tbody th { font-weight: 700; color: var(--ink); width: 24%; }
table.compare td:last-child { background: var(--tint); font-weight: 600; }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: none; }

.card-problem .fix { color: var(--red-ink); font-weight: 700; }

/* ---------- faq ---------- */

.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; margin-bottom: 12px; overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 1.04rem;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
  align-items: flex-start;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.5rem; line-height: 1; color: var(--red-ink);
  font-weight: 400; flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item summary:hover { background: var(--tint); }
.faq-answer { padding: 18px 22px 4px; }
.faq-answer p:last-child { margin-bottom: 1.1em; }

/* ---------- contact blocks ---------- */

.contact-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.contact-card .big {
  font-size: 1.35rem; font-weight: 800; color: var(--red-ink);
  text-decoration: none; display: inline-block; margin-bottom: 6px; word-break: break-word;
}

/* ---------- footer columns ---------- */

.footer-col h4 { color: #fff; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 7px; }

/* ---------- social row ----------
   Two pills in the Contact column, each one a mark and its name. The name is
   not hidden behind the icon: a bare glyph in a dark footer is a guess for
   anyone who does not recognise it, and the label costs nothing here. The mark
   inherits currentColor so the hover state needs no second rule for the fill.

   The row is laid out with flex rather than inheriting .footer-col li, hence
   the margin reset on its own items. */

.footer-social {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px !important;
}
.footer-social li { margin-bottom: 0; }
.footer-social a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--line-dark); border-radius: 999px;
  font-size: .86rem; font-weight: 600;
  color: rgba(255,255,255,.86);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.34);
  color: #fff; text-decoration: none;
}
.footer-social svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: currentColor;
}

.footer-legal {
  border-top: 1px solid var(--line-dark);
  margin-top: 34px; padding-top: 22px;
  font-size: .84rem; color: rgba(255,255,255,.58); line-height: 1.6;
}
.footer-legal p { margin-bottom: .7em; }
.footer-legal p:last-child { margin-bottom: 0; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split-dark, .split-light { padding: 48px 24px; }

  /* A portrait viewport crops a landscape photograph down to an unreadable
     sliver, so on phones the picture stops being a full-bleed background and
     becomes a band across the foot of the hero, where the whole frame fits. */
  .hero.hero-bg {
    background:
      radial-gradient(700px 340px at 82% -6%, rgba(0,70,170,.26), transparent 62%),
      linear-gradient(168deg, var(--ground-3) 0%, var(--ground-2) 46%, var(--ground) 100%);
  }
  .hero-media,
  .hero-scrim { inset: auto 0 0 0; height: 300px; }
  .hero-media img { object-position: 50% 50%; }
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(0,17,41,.97) 0%,
      rgba(0,17,41,.62) 18%,
      rgba(0,17,41,.22) 46%,
      rgba(0,17,41,.10) 100%);
  }
  /* Clears the full height of the band so the photograph is never cut in half
     by the trust row. */
  .hero-bg-inner { padding-top: 44px; padding-bottom: 316px; }
  .hero.hero-bg .hero-copy { max-width: none; margin-left: 0; }
  .hero.hero-bg h1 { max-width: none; }
  .hero.hero-bg .hero-facts { margin-top: 30px; padding-top: 22px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  section { padding: 52px 0; }
  section.tight { padding: 38px 0; }
  .hero { padding: 56px 0 62px; }
  .header-inner { min-height: 58px; padding: 10px 24px; }
  .brand { font-size: .95rem; }
  .brand-tagline { display: none; }
  .header-phone { font-size: .92rem; }
  .site-nav { order: 3; width: 100%; gap: 16px; padding-top: 4px; }
  .site-nav a { font-size: .88rem; }
  .brand { margin-right: auto; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  /* The masthead button is not a page call to action and should not eat a whole
     row of a sticky header. */
  .header-cta { width: auto; padding: 9px 16px; font-size: .9rem; }
  .proof-figures { gap: 20px; }
  .area-list { columns: 1; }
  .offer-row { grid-template-columns: minmax(96px, 120px) 1fr auto; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
  * { transition: none !important; }
}

@media print {
  .site-header, .cta-band, .btn-row, .hero-media, .hero-scrim { display: none; }
  body { color: #000; font-size: 12pt; }
  .hero, .hero.hero-bg, .on-dark, .split-dark { background: none; color: #000; }
  .hero h1, .hero p.hero-sub, .hero .hero-note,
  .hero.hero-bg h1, .hero.hero-bg .hero-sub, .hero.hero-bg .hero-note {
    color: #000 !important; text-shadow: none;
  }
}

/* ---------- city link list ----------
   36 links need to read as a directory, not a wall. Three columns of plain
   links, no cards, because cards at this count become noise. */

.city-links {
  list-style: none; margin: 26px 0 0; padding: 0;
  columns: 3; column-gap: 34px;
}
.city-links li { margin-bottom: 9px; break-inside: avoid; }
.city-links a { color: var(--ink); text-decoration: none; font-size: .95rem; }
.city-links a:hover { color: var(--red-ink); text-decoration: underline; }

@media (max-width: 900px) { .city-links { columns: 2; } }
@media (max-width: 560px) { .city-links { columns: 1; } }

/* Long page content coming from the WordPress editor rather than a template. */
.page-content h2 { margin-top: 1.6em; }
.page-content h3 { margin-top: 1.4em; }
.page-content img { border-radius: var(--radius); }

/* ---------- footer city directory ----------
   The footer carries the whole market list as well, so a city page reached
   from an ad still offers a route to the other 35 without a trip home. Four
   narrow columns inside one wide footer cell, at a smaller size than the body
   list, because this is a sitemap block and not a reading list. */

.footer-col-wide { grid-column: 1 / -1; }
.footer-cities {
  columns: 4; column-gap: 26px;
  margin-top: 4px !important;
}
.footer-cities li { margin-bottom: 6px; break-inside: avoid; }
.footer-cities a { font-size: .87rem; }

@media (max-width: 900px) { .footer-cities { columns: 3; } }
@media (max-width: 620px) { .footer-cities { columns: 2; } }

/* ---------- editor content ----------
   The 36 city pages are built in the WordPress editor, not in a template, so
   whatever markup they contain has to look right with no help from here. These
   rules cover plain HTML and the block editor's own class names, so the pages
   render correctly whether or not the block stylesheets load.

   Everything is scoped to .page-content. Nothing here may leak into the
   templates, which have their own layout. */

.page-content { font-size: 1.03rem; }
.page-content > *:first-child { margin-top: 0; }
.page-content h2 { margin-top: 1.6em; margin-bottom: .5em; font-size: 1.62rem; }
.page-content h3 { margin-top: 1.4em; margin-bottom: .45em; font-size: 1.24rem; }
.page-content h4 { margin-top: 1.3em; margin-bottom: .4em; font-size: 1.06rem; }
.page-content p { margin-bottom: 1.15em; }
.page-content ul,
.page-content ol { margin: 0 0 1.3em 1.15em; padding: 0; }
.page-content li { margin-bottom: .5em; }
.page-content a { color: var(--red-ink); }
.page-content strong { color: var(--navy); }
.page-content blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px;
  border-left: 4px solid var(--red); color: var(--ink-soft);
}
.page-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.page-content img { border-radius: var(--radius); max-width: 100%; height: auto; }
.page-content figure { margin: 1.6em 0; }
.page-content figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: 8px; }

.page-content table {
  width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95rem;
}
.page-content th,
.page-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.page-content th { background: var(--tint); color: var(--navy); font-weight: 800; }

/* Block editor markup. These carry no layout of their own once the block
   stylesheets are absent, and they are cheap to support, so they are supported
   either way rather than depending on a plugin's CSS loading. */
.page-content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 1.4em; }
.page-content .wp-block-column { flex: 1 1 260px; min-width: 0; }
.page-content .wp-block-group { margin-bottom: 1.4em; }
.page-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0; }
.page-content .wp-block-button__link {
  display: inline-block; background: var(--red); color: #fff;
  padding: 13px 24px; border-radius: 10px; font-weight: 800; text-decoration: none;
}
.page-content .wp-block-button__link:hover { background: var(--red-deep); color: #fff; }
.page-content .has-text-align-center { text-align: center; }
.page-content .has-text-align-right { text-align: right; }
.page-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.page-content .alignleft { float: left; margin: 0 22px 16px 0; }
.page-content .alignright { float: right; margin: 0 0 16px 22px; }
.page-content .wp-block-image { margin: 1.6em 0; }
.page-content .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }

@media (max-width: 620px) {
  .page-content .alignleft,
  .page-content .alignright { float: none; margin: 1.4em 0; }
}

/* ==========================================================================
   Simplified Chinese pages (/zh/)

   Scoped entirely to .lang-zh, which inc/zh.php puts on <body> for those
   pages, so nothing here can touch the English site.

   Three things have to change for Chinese to look like it was designed rather
   than pasted in:

   1. The font stack. Latin-first stacks fall back to whatever CJK font the
      system offers, which on Windows is often a mismatched one. Naming the
      platform faces (PingFang on Apple, Microsoft YaHei on Windows, Noto on
      Linux and Android) keeps the page consistent.
   2. Tracking. The headings on this site run at -0.02em, which is right for
      a Latin display face and wrong for Chinese: CJK glyphs are drawn on a
      fixed body and negative tracking makes them collide.
   3. Line height and size. Chinese characters are denser and taller than
      Latin lowercase, so the same point size reads bigger and needs more
      leading.
   ========================================================================== */

body.lang-zh {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.85;
}

.lang-zh h1, .lang-zh h2, .lang-zh h3, .lang-zh h4 {
  letter-spacing: 0;
  line-height: 1.35;
  font-weight: 700;   /* 800 on a CJK face renders as a synthesised bold */
}

.lang-zh h1 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
.lang-zh h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.lang-zh h3 { font-size: 1.12rem; }

.lang-zh .hero-sub,
.lang-zh .lede { line-height: 1.9; }

.lang-zh .eyebrow { letter-spacing: .06em; }

/* Chinese breaks between characters, so a long unbroken run still needs to be
   told it may wrap inside a narrow card or table cell. */
.lang-zh h1, .lang-zh h2, .lang-zh h3,
.lang-zh p, .lang-zh li, .lang-zh summary { overflow-wrap: anywhere; }

/* The tagline lockup: no negative tracking, and a little air around the
   accent half so the two clauses do not run together. */
.lang-zh .tagline { letter-spacing: 0; }
.lang-zh .tagline-accent { margin-left: .15em; }

/* Latin inside Chinese text (form numbers, road names, the phone number) keeps
   its own face so VTR-34 and I-45 do not render in a CJK Latin variant. */
.lang-zh .latin,
.lang-zh a[href^="tel:"],
.lang-zh a[href^="mailto:"] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* The area list runs two columns on Chinese because each entry carries both
   the Chinese name and the English one. */
.lang-zh .city-links { columns: 2; }
@media (max-width: 760px) { .lang-zh .city-links { columns: 1; } }


/* ---------- the VIN pricing widget ----------
   An opaque card on purpose. It sits over a photograph in the hero, so it
   carries its own ground rather than relying on the scrim; that also means the
   same component drops onto a light page elsewhere without a second skin.
   ------------------------------------------------------------ */

/* Every text rule below is scoped ".vinw X" rather than ".X". The card is
   dropped inside .cta-band and inside .hero, and both of those paint their
   descendants white (".cta-band p", ".hero p"). A single-class rule here loses
   to those, and the copy goes white on a white card. */
.vinw {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 18px 44px rgba(0,17,41,.28);
  max-width: 460px;
}
.vinw .vinw-head {
  margin: 0 0 8px;
  font-size: 1.32rem; line-height: 1.22;
  color: var(--ink);
}
.vinw .vinw-sub { margin: 0 0 18px; font-size: .93rem; line-height: 1.5; color: var(--ink-soft); }

.vinw .vinw-label {
  display: block; margin-bottom: 7px;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* The field and the button share a row while there is room for both, then the
   button drops to its own full-width line. A 17 character field squeezed next
   to a button is the reason people mistype a VIN. */
.vinw-row { display: flex; flex-wrap: wrap; gap: 10px; }
.vinw-input {
  flex: 1 1 210px; min-width: 0;
  padding: 14px 15px;
  border: 2px solid var(--line-strong, #C2CFE4);
  border-radius: 11px;
  font-size: 1.02rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .06em;
  color: var(--ink);
  background: #fff;
}
.vinw-input::placeholder { color: var(--ink-faint); letter-spacing: normal; font-family: inherit; }
.vinw-input:focus-visible {
  outline: none;
  border-color: var(--red-ink);
  box-shadow: 0 0 0 4px rgba(191,10,48,.20);
}
.vinw-go { flex: 0 0 auto; padding-top: 14px; padding-bottom: 14px; }
.vinw-form.is-ready .vinw-input { border-color: var(--red-ink); }
.vinw-form.is-bad .vinw-input { border-color: #B3261E; }

/* Empty until the script has something to say, so it must not hold a line of
   blank space while it is empty. */
.vinw .vinw-msg { margin: 0; font-size: .88rem; color: #B3261E; font-weight: 600; }
.vinw .vinw-msg:empty { display: none; }
.vinw-form.is-bad .vinw-msg { margin-top: 10px; }

.vinw .vinw-help { margin: 12px 0 0; font-size: .84rem; line-height: 1.5; color: var(--ink-faint); }
.vinw .vinw-alt  { margin: 12px 0 0; font-size: .89rem; color: var(--ink-soft); }
.vinw .vinw-alt a { color: var(--red-ink); font-weight: 600; }
.vinw .vinw-trust {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .8rem; line-height: 1.5; color: var(--ink-faint);
}

/* The hero and rail variants. Slightly tighter than the standing panel, and
   the shadow is heavier because the card is floating over a photograph or over
   the page rather than sitting in a band of its own. With the heading and the
   standfirst gone the card is the form and nothing else, so it no longer needs
   the padding that was holding three blocks apart. */
.vinw-hero, .vinw-rail { box-shadow: 0 24px 60px rgba(0,12,31,.50); max-width: none; }
.vinw-hero, .vinw-rail { padding: 22px 22px 20px; }
.vinw-hero .vinw-head, .vinw-rail .vinw-head { font-size: 1.42rem; }

/* The standing panel used on inner pages, on the dark band. */
.on-dark .vinw, .cta-band .vinw { box-shadow: 0 18px 44px rgba(0,12,31,.45); }

@media (max-width: 420px) {
  .vinw { padding: 20px 17px 18px; }
  .vinw-go { width: 100%; }
}


/* ---------- the closing band, split around the widget ----------
   Copy on the left, the form on the right. The band is the darkest thing on
   the page and the widget is the lightest, which is the point: at the bottom
   of a long read there is exactly one bright object and it is the thing to do.
   ------------------------------------------------------------ */

.cta-split { display: grid; gap: 30px; align-items: center; }
@media (min-width: 901px) {
  .cta-split { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 56px; }
}
.cta-copy h2 { margin-top: 0; }
.cta-offer .vinw { max-width: none; }

/* Inside the band the widget already carries the contrast, so the .btn-row
   under the copy is just the phone. Give it room without a second card. */
.cta-copy .btn-row { margin-top: 26px; }


/* ---------- the AuDoServ offer flow ----------
   One step on screen at a time inside the widget card. Every text rule is
   scoped under .of for the same reason the card's own rules are scoped under
   .vinw: this sits inside .cta-band and .hero, and both paint their
   descendants white.
   ------------------------------------------------------------ */

.of { margin-top: 4px; }
/* Each step is a <section>, and the theme gives a bare section the vertical
   padding that separates page bands. Inside a card that reads as a stray
   70px gap above every step heading. */
.of .of-step { padding: 0; margin: 0; }
.of-noscript { font-size: .92rem; color: var(--ink-soft); }

.of-progress { margin-bottom: 18px; }
.of-bar {
  height: 4px; border-radius: 999px; background: var(--tint-2); overflow: hidden;
}
.of-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--red-ink);
  transition: width .22s ease;
}
.of .of-count {
  margin: 8px 0 0; font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}

.of .of-title { margin: 0 0 6px; font-size: 1.16rem; line-height: 1.25; color: var(--ink); }
.of .of-lede  { margin: 0 0 16px; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.of .of-lede a { color: var(--red-ink); font-weight: 600; }

.of-field { margin-bottom: 16px; }
.of-field:last-of-type { margin-bottom: 0; }
.of .of-label {
  display: block; margin-bottom: 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.of .of-hint { font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ink-faint); }

.of .of-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid #C2CFE4; border-radius: 10px;
  font-size: 1rem; font-family: inherit; color: var(--ink); background: #fff;
}
.of .of-input[data-vin] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; }
.of .of-input::placeholder { color: var(--ink-faint); }
.of .of-input:focus-visible {
  outline: none; border-color: var(--red-ink);
  box-shadow: 0 0 0 4px rgba(191,10,48,.20);
}
.of-field.is-bad .of-input { border-color: #B3261E; }
.of .of-err { margin: 7px 0 0; font-size: .84rem; font-weight: 600; color: #B3261E; }

/* Radio groups as pickable cards. A radio dot at 13px is a poor target on a
   phone; the whole card is the target instead, which clears 44px everywhere. */
.of-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.of .of-choice legend {
  padding: 0; margin-bottom: 8px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.of-opts { display: grid; gap: 8px; }
/* 132px, not 110px. Below that a three-option row inside a 430px card leaves
   about 80px of text width per card, and a single long word such as
   "business" cannot wrap out of that, so it was being cut off mid-word. At
   132px the row drops to two columns first, which is the right trade. */
.of-choice-inline .of-opts { grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr)); }
.of .of-opt-l, .of .of-opt-d { overflow-wrap: break-word; }
.of-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; min-height: 44px; box-sizing: border-box;
  border: 2px solid var(--line); border-radius: 10px;
  cursor: pointer; background: #fff;
  transition: border-color .12s ease, background .12s ease;
}
.of-opt:hover { border-color: #AFC1DD; background: var(--tint); }
.of-opt input { margin: 2px 0 0; accent-color: var(--red-ink); flex: 0 0 auto; }
.of-opt:has(input:checked) { border-color: var(--red-ink); background: var(--tint); }
.of-opt:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(191,10,48,.20); }
.of-opt-body { display: block; min-width: 0; }
.of .of-opt-l { display: block; font-weight: 700; font-size: .93rem; color: var(--ink); }
.of .of-opt-d { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.4; color: var(--ink-soft); }

.of-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.of-check input { accent-color: var(--red-ink); }
.of .of-check span { font-size: .92rem; color: var(--ink-soft); }

.of-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
/* .btn-ghost is a white-on-transparent button built for the dark bands. The
   card underneath this flow is white, so left alone the Back button and the
   "talk to someone" link were white on white: present, focusable, and
   completely invisible. Inside .of it becomes an outline button instead. */
.of .btn-ghost {
  background: #fff;
  border-color: #C2CFE4;
  color: var(--ink);
}
.of .btn-ghost:hover,
.of .btn-ghost:focus-visible {
  background: var(--tint);
  border-color: var(--red-ink);
  color: var(--ink);
}
.of-nav .btn { padding: 12px 22px; font-size: .95rem; flex: 0 1 auto; }
.of-back[hidden] { display: none; }
.of .of-skip {
  display: block; margin: 12px 0 0; padding: 6px 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .88rem; color: var(--red-ink);
  text-decoration: underline; text-underline-offset: 3px;
}

/* The number. The one moment the card is allowed to shout. */
.of-offer { text-align: center; padding: 6px 0 2px; }
.of .of-offer-eyebrow {
  margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.of .of-amount {
  margin: 6px 0 10px;
  font-size: clamp(2.6rem, 9vw, 3.4rem); font-weight: 800; line-height: 1;
  color: var(--red-ink); letter-spacing: -.02em;
}
.of .of-offer-note { margin: 0 auto; max-width: 34ch; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
.of-nav-offer { justify-content: center; margin-top: 22px; }

.of-done { text-align: center; }
.of .of-done-mark {
  margin: 0 auto 10px; width: 46px; height: 46px; line-height: 46px;
  border-radius: 999px; background: var(--red-ink); color: #fff; font-size: 1.4rem;
}
.of .of-done-ref {
  margin: 4px 0 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem; color: var(--ink);
}
.of .of-done-ref[hidden] { display: none; }

.of .of-fail {
  margin: 16px 0 0; padding: 12px 14px;
  border: 1px solid rgba(179,38,30,.35); border-radius: 10px;
  background: #FDF3F2; font-size: .9rem; line-height: 1.45; color: #8C1D18; font-weight: 600;
}
.of .of-consent { margin: 16px 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-faint); }

.of-busy { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: .9rem; color: var(--ink-soft); }
/* An author rule that sets display beats the browser's own [hidden] rule, so
   without this the spinner is on screen for the whole session. Every element
   in this flow that carries an explicit display needs the same line. */
.of-busy[hidden], .of-choice[hidden], .of-check[hidden], .of-nav[hidden], .of-opts[hidden] { display: none; }
.of .of-skip[hidden] { display: none; }
.of-spin {
  width: 16px; height: 16px; border-radius: 999px;
  border: 2px solid var(--line); border-top-color: var(--red-ink);
  animation: of-spin .7s linear infinite;
}
@keyframes of-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .of-spin { animation-duration: 2.4s; }
  .of-bar span { transition: none; }
}

/* Off screen, not display:none: a hidden input is skipped by some bots but a
   positioned one is filled in by most of them, which is the point. */
.of-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The flow is taller than the one-line widget was, so the hero card needs to
   be allowed to grow and the hero needs to stop forcing both columns level. */
@media (min-width: 901px) {
  .hero.hero-car .hero-bg-inner { align-items: start; }
}


/* ---------- the docked offer bar ----------
   Takes over when the card scrolls off. Bottom of the screen on a phone,
   bottom left on a desktop so it sits under the column the card came from and
   leaves the page's own content clear.
   ------------------------------------------------------------ */

.odock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;                      /* over the page, under the masthead's 100 */
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(0,17,41,.94);
  border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -10px 30px rgba(0,12,31,.42);
}
@supports (backdrop-filter: blur(10px)) {
  /* .82 let enough of the page through that the accent line measured 4.09:1
     against what was actually behind it. The blur is worth keeping; the
     transparency that made it look good is not worth the contrast. */
  .odock { background: rgba(0,17,41,.93); backdrop-filter: blur(10px); }
}
.odock[hidden] { display: none; }

.odock-in {
  display: flex; align-items: center; gap: 12px;
  max-width: var(--wrap); margin: 0 auto;
}
.odock .odock-text { margin: 0; min-width: 0; flex: 1 1 auto; }
.odock .odock-eyebrow {
  display: block;
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #FF8DA1;
}
.odock .odock-line {
  margin-top: 1px;
  font-size: .93rem; line-height: 1.3; color: #fff; font-weight: 600;
  /* Two lines, then clip. One line with an ellipsis was cutting the only
     sentence on the bar in half at every width under about 1000px, and the
     bar is 430px wide even on a large screen. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.odock-go {
  flex: 0 0 auto;
  padding: 11px 18px; font-size: .92rem; border-radius: 10px;
  white-space: nowrap;
  /* The phone breakpoint makes every .btn full width, which is right in a
     button row and wrong in a one-line bar: the button took all 366px and
     squeezed the wording beside it to nothing. */
  width: auto;
}
.odock-close {
  flex: 0 0 auto;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255,255,255,.22); border-radius: 9px;
  color: rgba(255,255,255,.78); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.odock-close:hover { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.4); }

/* Once there is a number on it, the bar earns a brighter edge. */
.odock.is-priced { border-top-color: rgba(255,107,132,.55); }
.odock.is-priced .odock-line { color: #FF8DA1; }

/* So the last of the footer is not sitting under the bar. */
body.has-odock { padding-bottom: 68px; }

@media (min-width: 901px) {
  /* Off the full width and into the corner, so it stops being a banner across
     the page and becomes a card that followed the reader down. */
  .odock {
    left: 24px; right: auto; bottom: 24px;
    width: min(430px, calc(100vw - 48px));
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
  }
  .odock.is-priced { border-color: rgba(255,107,132,.55); }
  body.has-odock { padding-bottom: 0; }
}

@media (max-width: 560px) {
  .odock .odock-go { width: auto; }
}

@media (max-width: 380px) {
  /* The close button is the first thing to go when there is no room: the bar
     can still be scrolled past. */
  .odock-close { display: none; }
  .odock-go { padding: 11px 14px; font-size: .88rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .odock { animation: odock-in .22s ease-out; }
  @keyframes odock-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

@media print { .odock { display: none !important; } }


/* ---------- the offer card, stripped back ----------
   The brief was that a seller should not have to read anything to know what
   to do. So: one question at the top, the thing to type or tap under it, one
   button. Labels that only repeat the placeholder are moved off screen rather
   than deleted, because a placeholder vanishes as soon as anyone types and a
   screen reader would be left with an unnamed box.
   ------------------------------------------------------------ */

.of-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.of-hidden-input { display: none; }

/* The question is the biggest thing on the card. */
.of .of-title {
  font-size: 1.44rem; line-height: 1.18; letter-spacing: -.01em;
  margin: 0 0 14px;
}
.of .of-lede { font-size: .88rem; margin-bottom: 14px; }

/* A bigger, calmer field: this is the one thing to do on the first screen. */
.of .of-input {
  padding: 15px 16px;
  font-size: 1.04rem;
  border-radius: 12px;
}
/* The placeholder is doing the label's job on most screens now, so it has to
   pass as body text rather than sit at the usual placeholder grey. #7B879B
   measured 3.33:1 against the white card; this is 4.83:1. */
.of .of-input::placeholder { color: var(--ink-faint); }

.of-field { margin-bottom: 12px; }

/* One line of chrome, not two: the bar carries the progress and the count
   sits on the same line as a quiet number rather than a shouted label. */
.of-progress {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.of-bar { flex: 1 1 auto; }
.of .of-count {
  flex: 0 0 auto; margin: 0;
  font-size: .72rem; letter-spacing: .06em; font-weight: 700;
  text-transform: none; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* The primary button fills the card. On a screen with one question there is
   no second thing to put beside it. */
.of-nav { margin-top: 18px; gap: 8px; }
.of-nav .of-next { flex: 1 1 auto; justify-content: center; }
.of-nav .of-back { flex: 0 0 auto; }

.of .of-skip { margin-top: 10px; text-align: center; width: 100%; }

.of-choice + .of-choice { margin-top: 2px; }
.of .of-choice legend { margin-bottom: 7px; font-size: .78rem; letter-spacing: .02em; text-transform: none; color: var(--ink-soft); font-weight: 700; }
.of-opt { padding: 11px 13px; }
.of .of-opt-l { font-size: .95rem; }

.of .of-consent { font-size: .74rem; margin-top: 12px; }
.of .of-offer-note { font-size: .86rem; }
.of .of-done-ref { font-size: .82rem; color: var(--ink-faint); letter-spacing: .08em; }


/* ---------- the fallback card, same treatment ----------
   One question, one field, one button. It is what the site shows until the
   AuDoServ credential is in wp-config.php, so it should not look like a
   different product from the flow that replaces it.
   ------------------------------------------------------------ */

.vinw .vinw-head { font-size: 1.44rem; line-height: 1.18; letter-spacing: -.01em; margin: 0 0 14px; }
.vinw .vinw-input {
  width: 100%; box-sizing: border-box;
  padding: 15px 16px; font-size: 1.04rem; border-radius: 12px;
}
.vinw .vinw-input::placeholder { color: var(--ink-faint); font-family: inherit; letter-spacing: normal; }
.vinw .vinw-go { width: 100%; margin-top: 10px; justify-content: center; }
.vinw .vinw-alt { margin-top: 12px; text-align: center; font-size: .88rem; }
.vinw .vinw-msg { margin-top: 8px; }


/* ---------- hero with the widget in it ----------
   The card goes in the right column. It does NOT go beside the copy the way
   the Arizona one does, and the reason is this photograph.

   The Texas hero is a full-bleed 5:4 shot that is never cropped horizontally,
   so the whole frame is always on screen: the TrackWala rep on the left, the
   loaded flatbed through the middle, the seller taking the check on the right.
   The scrim above runs at 281deg, dark at the right edge and clear at the
   left, precisely so the copy has a dark ground on the right while the rep
   stays lit on the left.

   Moving the headline to the left column would have meant inverting that
   gradient and putting a headline across her face. So the right column keeps
   the copy. Column one is left empty on purpose, and what fills it is the
   photograph.
   ------------------------------------------------------------ */

@media (min-width: 901px) {
  .hero.hero-bg .hero-bg-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 545px);
    column-gap: 40px;
    align-items: start;
  }
  .hero.hero-bg .hero-copy  { grid-column: 2; grid-row: 1; max-width: none; margin: 0; }
  .hero.hero-bg .hero-facts { grid-column: 1 / -1; grid-row: 2; }
  /* 21ch inside a 545px column wrapped the headline to four lines for no
     reason. The column is the constraint now, not a character count. */
  .hero.hero-bg h1 { max-width: none; }
  .hero.hero-bg .hero-sub { max-width: none; }
  .hero.hero-bg .hero-bg-inner { padding-top: 44px; }
  .hero.hero-bg .hero .btn-row { margin-top: 22px; }
}


/* ==========================================================================
   The sticky offer rail
   ==========================================================================

   The pricing card is one element on the page and it lives here. On a wide
   screen it is pinned in a portrait column on the right while everything else
   scrolls past it. Below the breakpoint the whole apparatus switches off and
   the card is an ordinary block in the flow.

   WHY THE RAIL EXISTS AT ALL

   A sticky element travels inside its containing block and nowhere else. While
   the card sat in the hero's grid its containing block was its own grid area,
   which was exactly as tall as the card, because the card was the tallest
   thing in it. Zero travel. So the card is lifted out and given a containing
   block that runs the whole height of <main>: .orail is absolutely positioned
   top to bottom inside it, and the card sticks inside that.

   HOW IT LINES UP

   .orail-inner repeats .wrap exactly, same max-width, same 24px gutter, same
   auto margins, so the card's right edge lands on the same vertical as every
   heading and paragraph on the page. Nothing here is measured in vw, because
   vw includes the scrollbar and .wrap does not, and a card half a scrollbar
   out of true is visible on a page of left-aligned text.

   The rail is pointer-events: none and the card inside it is pointer-events:
   auto, so the empty column below a short card does not swallow clicks meant
   for the page underneath it.
   ------------------------------------------------------------------------ */

:root {
  --rail-w:   336px;   /* the card's width: portrait, one question wide */
  --rail-gap: 32px;    /* between the content column and the card */

  /* The page gutter once the rail is up.
     A flat 48px put the text almost against the left edge of the screen, which
     reads as squashed even when the column itself is wide. It grows with the
     viewport now and stops at 96px, so a big monitor gets a real margin and a
     1280px laptop still keeps more than 60% of its width for the text. */
  --rail-pad: clamp(52px, 5vw, 96px);
  --head-h:   69px;    /* the sticky masthead: 68px min-height plus its border */

  /* How much of the page the rail occupies, gap included. */
  --rail-take: calc(var(--rail-w) + var(--rail-gap));

  /* The container width on a page that carries a rail.
     The first version of this took the rail out of the 1180px content width,
     which left every section on a city page reading in a 748px column with a
     third of the screen empty beside it. The rail has to come out of the page
     margins instead, so the content column keeps roughly the width it had and
     the card sits in space that was white before.

     1840 rather than 1180 plus the rail. The derived figure capped the content
     column at 1180 minus the rail, which is 988px, and on a 1600 or 1920 screen
     that is barely half the width: the section headings and the card grids
     under them read as a narrow strip down a wide page. At 1840 the column tops
     out at 1280px, which is about two thirds of a 1920 screen and two thirds to
     seven tenths of everything between 1440 and 1680. Above 1920 the cap holds,
     because a 1700px line of body text is not an improvement. */
  --wrap-rail: 1840px;

  /* Distance from the right edge of the viewport to the right edge of the
     content column. Everything that has to line up with that edge, the hero
     photograph and the split band included, is written in terms of this. */
  --rail-inset: calc(max(var(--rail-pad), (100vw - var(--wrap-rail)) / 2 + var(--rail-pad)) + var(--rail-take));
}

/* The flow state, which is also what a phone gets. */
.orail-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.orail-card  { margin-top: 30px; max-width: 520px; }

/* 1280, not 1180. At 1180 the rail leaves a 700px column, which is 59% of the
   screen and reads as squeezed. One notch up it is 800px and the balance
   holds. Below the breakpoint the card is an ordinary block near the top of
   the page and the docked bar takes over, which is a fine experience and a
   better one than a cramped column. */
@media (min-width: 1280px) {
  main.has-orail { position: relative; }

  .has-orail .orail {
    position: absolute;
    /* 26px down so the card's top edge lines up with the hero's tagline
       rather than with the raw top of the section. */
    top: 26px; bottom: 0; left: 0; right: 0;
    z-index: 5;
    pointer-events: none;
  }
  .has-orail .orail-inner {
    height: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .has-orail .orail-card {
    position: sticky;
    top: calc(var(--head-h) + 20px);
    align-self: flex-start;
    width: var(--rail-w);
    max-width: none;
    margin-top: 0;
    pointer-events: auto;
    /* Late in the flow the card is twice the height it starts at. On a short
       laptop screen that would run off the bottom with the buttons on it, so
       the card scrolls inside itself rather than off the screen. */
    max-height: calc(100vh - var(--head-h) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The container gets WIDER, and the rail lives in the space that gains.
     Taking the rail out of the 1180px content width instead was the first
     attempt and it was wrong: every section ended up reading in a 748px column
     with a third of the screen blank beside it, which is exactly what it looked
     like. The container now runs to 1180 plus the rail, capped by the viewport,
     so the content column holds its width and the card stands where the page
     margin used to be.

     .orail-inner repeats these three values exactly, which is what keeps the
     card's right edge on the same vertical as every heading on the page. */
  .has-orail .wrap,
  .has-orail .orail-inner {
    max-width: var(--wrap-rail);
    padding-left: var(--rail-pad);
    padding-right: calc(var(--rail-pad) + var(--rail-take));
  }
  .has-orail .orail-inner { padding-right: var(--rail-pad); }

  /* The split band is the one thing on the page that is not built out of
     .wrap: it is two full-bleed columns meeting on a hard edge, sized 5fr to
     7fr across the whole viewport. Take 384px off the right of that and the
     light column's text drops to about 300px, which wraps the bullet list into
     a ribbon. Two columns is a device, and it is not worth a ribbon, so with
     the rail up the band stacks: statement, then detail, both across the full
     width the rail leaves. */
  .has-orail .split { grid-template-columns: minmax(0, 1fr); }
  .has-orail .split-dark {
    padding: 58px var(--rail-inset)
             54px max(var(--rail-pad), calc((100vw - var(--wrap-rail)) / 2 + var(--rail-pad)));
  }
  .has-orail .split-light {
    padding: 54px var(--rail-inset)
             58px max(var(--rail-pad), calc((100vw - var(--wrap-rail)) / 2 + var(--rail-pad)));
  }

  /* ---- the hero, with the card taken out of it ----
     The photograph stops where the rail begins instead of running under it.
     That matters more than it sounds: the copy sits about halfway across the
     picture, and if the picture kept its full width while the copy moved left
     to clear the rail, the headline would land on the rep's face. Shrinking
     the frame moves her left by the same proportion, so the copy stays where
     it has always been relative to what is behind it, and the 281deg scrim
     needs no retuning. */
  /* The strip the card stands on is what shows beside the photograph, and the
     photograph's right edge is nearly solid --ground. Anything lighter than
     that next to it draws a seam down the hero, so the strip starts at the
     same value and only lifts well away from the join. */
  .has-orail .hero.hero-bg {
    background:
      radial-gradient(620px 460px at 118% 4%, rgba(0,70,170,.30), transparent 64%),
      linear-gradient(200deg, var(--ground-2) 0%, var(--ground) 58%, var(--ground) 100%);
  }
  .has-orail .hero.hero-bg .hero-media,
  .has-orail .hero.hero-bg .hero-scrim {
    right: var(--rail-inset);
  }
  /* No second column to place anything in any more: the copy is simply held
     to the right of its own box, which is already clear of the rail. */
  .has-orail .hero.hero-bg .hero-bg-inner { display: block; }
  .has-orail .hero.hero-bg .hero-copy {
    max-width: 430px; margin-left: auto; margin-right: 0;
  }
  /* The trust row's full-bleed band runs off the left edge as before, but now
     stops where the photograph does rather than passing under the card. */
  .has-orail .hero.hero-bg .hero-facts::before { right: 0; }
  /* Four facts at a 190px basis need 802px and the row now has 748px, so the
     fourth dropped to a second line on its own. They are four short labels;
     they fit on one line at a smaller basis. */
  .has-orail .hero.hero-bg .hero-fact { flex: 1 1 158px; }

  /* ---- the closing band ----
     It exists to put a card in front of someone who has read to the bottom.
     There is already a card in front of them and it has their answers in it,
     so a second empty one beside it is two forms competing. The band keeps the
     words and the phone number and gives up its copy of the card. */
  .has-orail .cta-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .has-orail .cta-offer { display: none; }
}


/* ---------- two ways into the first screen ----------
   A VIN field, a rule with "or" across it, then a plate and its state. The
   rule matters: without it the two fields read as one form to fill in rather
   than a choice between them.
   ------------------------------------------------------------ */

.of .of-or {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 12px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-faint);
}
.of .of-or::before,
.of .of-or::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}

/* The plate and its state share a line: a plate is short and a state code is
   shorter, and stacking them wastes the height the card is trying to save. */
.of-field-plate { margin-bottom: 0; }
.of-field-plate + .of-field-state { margin-top: 10px; }

@media (min-width: 380px) {
  /* A float pair, not two inline-blocks. Inline-block leaves a space between
     the two boxes whose width comes from the source whitespace, so widths that
     add to 100% overflow and the state drops onto its own line. A float and a
     block formatting context beside it ignore whitespace entirely. */
  .of-field-plate {
    /* The reserve is for the state select beside it, which holds two letters
       and a dropdown arrow. 118px was set when the card was 460px wide. In the
       336px rail it left the plate field too narrow for its own placeholder,
       which clipped mid word. */
    float: left; width: calc(100% - 104px);
    padding-right: 10px; box-sizing: border-box; margin-bottom: 0;
  }
  .of-field-plate + .of-field-state { overflow: hidden; margin-top: 0; }
  /* And the float has to end before the button. */
  .of-field-plate ~ .of-nav,
  .of-field-plate + .of-field-state + * { clear: both; }
}
.of .of-field-plate .of-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
}
.of .of-field-plate .of-input::placeholder { font-family: inherit; letter-spacing: normal; }




/* ---------- Trustpilot review collector ----------
   Trustpilot draws its own box inside its own frame, so there is nothing here
   to style except the space around it. The min-height matches the 52px the
   widget is configured for, which stops the footer jumping when the script
   finishes and the box appears.
   ------------------------------------------------------------ */

.twc-trustbox {
  margin: 8px 0 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  min-height: 52px;
}
/* Before the script runs, and if it never does, the anchor is the whole
   widget. It has to be visible and obviously a link. */
.twc-trustbox > a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: .9rem;
}


/* ==========================================================================
   The city landing pages
   ==========================================================================

   These pages used to be editor prose with no design at all. They now run
   through page-city.php and carry the home page's structure: the same hero,
   the same trust row, the same split band, the same FAQ. The blocks below are
   the parts the home page does not have, and there are only four of them.

   All of them are grids built on minmax(min(Npx, 100%), 1fr) rather than
   minmax(Npx, 1fr). The difference matters because the sticky rail takes 384px
   off the right of every .wrap on a wide screen, and a hard minimum wider than
   what is left pushes the page into horizontal scroll. The min() lets a column
   give up its minimum instead of overflowing.
   ------------------------------------------------------------------------ */

/* ---- the crash figures ---- */

.statrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 16px;
  margin: 30px 0 14px;
}
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red-ink);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow);
}
.stat strong {
  display: block;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}
.stat span {
  display: block;
  margin-top: 8px;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* The source line. Small, but never small enough to fail contrast: it is the
   thing that makes the figure above it worth printing. */
.statsrc {
  margin: 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.statsrc + .statsrc { margin-top: 12px; }
.statsrc a { color: var(--red-ink); font-weight: 600; }

/* ---- the weather record ---- */

.weather-head {
  margin: 34px 0 0;
  font-size: 1.12rem;
}
.weathers {
  list-style: none;
  margin: 18px 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}
.weather {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
}
.weather p { margin: 0; }
.weather .weather-when {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-ink);
}
.weather .weather-what {
  margin-top: 8px;
  font-size: .93rem; line-height: 1.55;
  color: var(--ink-soft);
}
.weather .weather-what strong { color: var(--ink); }
.weather .weather-src { margin-top: 10px; font-size: .82rem; }
.weather .weather-src a { color: var(--ink-soft); }

/* ---- what we buy ---- */

.buys {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  /* 260 rather than 230, so a 1280px column lands on four across and the eight
     categories fall as two even rows. At 230 it fitted five and left a row of
     three trailing off to one side. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}
.buys li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
}
.buys strong { display: block; font-size: .97rem; color: var(--ink); }
.buys span   { display: block; margin-top: 3px; font-size: .85rem; line-height: 1.45; color: var(--ink-soft); }

/* ---- the pickup area ---- */

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 0; padding: 0; }
.chip {
  border: 1px solid var(--line-tint);
  background: var(--tint);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: .89rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.chips-note { margin: 18px 0 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }

/* ---- the split band's closing line ---- */

.split-light .fineprint {
  margin: 20px 0 0;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- whatever is left in the editor ----
   The old prose is not deleted, it just stops being the page. It prints under
   everything the template supplies, set back a little so it reads as an
   appendix rather than as part of the design. */
.city-legacy {
  margin-top: 8px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.city-legacy h1, .city-legacy h2 { font-size: 1.3rem; }
.city-legacy h3 { font-size: 1.08rem; }

/* A safety net under the editor content.
   inc/legacy.php removes the button blocks before this stylesheet ever sees
   them, but a page could be edited tomorrow and a new one pasted in. A button
   block carries the colors the editor saved on it, and against this theme's
   red that has been rendering as red text on a red button. Whatever class it
   arrives with, it reads. */
.city-legacy .wp-block-button__link,
.city-legacy .wp-element-button,
.city-legacy button,
.city-legacy .btn {
  color: #fff !important;
  background: var(--red-ink) !important;
  border-color: var(--red-ink) !important;
  text-decoration: none;
}
.city-legacy a { color: var(--red-ink); }