/*
Theme Name: Florida Wrecked Cars
Theme URI: https://floridawreckedcars.com/
Author: Blue Ribbon Auto Sales LLC (TrackWala)
Description: Purpose-built theme for floridawreckedcars.com. Each page writes its own
  title, meta description, canonical, Open Graph tags and JSON-LD from its template, so
  no SEO plugin is required or wanted. City pages are driven by inc/cities.php.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: florida-wrecked-cars
*/


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

   DESIGN DIRECTION

   Style cues taken from Peddle: a warm cream ground instead of stark white,
   near-black charcoal ink, one loud sunny accent reserved for the button you
   are meant to press, very heavy headlines with tight tracking, big rounded
   cards, simple line illustrations for the steps, and a lot of air between
   sections. The voice is plain and friendly.

   It is deliberately not Peddle's identity. The accent is our own sunshine
   yellow rather than their mustard, a Gulf teal carries links and secondary
   emphasis, and the logo, wording and layout are original. A visitor should
   feel the same ease, not think they are on Peddle.

   Content cues taken from Wheelzy: an explicit written-offer guarantee, a
   straight comparison against the alternatives, a full city directory, and
   real reviews. Where both of them are thin is Florida itself. Neither names
   a single FLHSMV form. That is where this site puts its weight.

   CONTRAST

   Every text and ground pairing below was measured, not assumed. Yellow is
   never used as text on a light ground (it fails badly). It is a fill with
   charcoal text on it, or it is text on charcoal.
   ========================================================================== */

:root {
  /* Ink */
  --ink:          #1D1D1F;   /* charcoal, the Peddle-style near-black */
  --ink-soft:     #4A4A52;
  --ink-faint:    #6B6B74;

  /* Grounds */
  --white:        #FFFFFF;
  --cream:        #FFF8E7;   /* the default page ground */
  --cream-2:      #FFF0C9;   /* a warmer band for emphasis */
  --sand:         #F4EBD6;   /* lines and card borders on cream */
  --charcoal:     #1D1D1F;
  --charcoal-2:   #2A2A2E;

  /* Accents */
  --sun:          #FFC72C;   /* primary button fill, charcoal text on it */
  --sun-hover:    #FFD55C;
  --sun-deep:     #B57F00;   /* never text; rules and small marks only */
  --gulf:         #0A6E69;   /* links and secondary emphasis on light grounds */
  --gulf-deep:    #07524E;
  --gulf-tint:    #E3F3F1;
  --coral:        #D9482B;   /* used once, for the "do not" warnings */

  --line:         #EADFC4;
  --line-dark:    rgba(255,255,255,.14);

  --wrap:         1180px;
  --radius:       18px;
  --radius-lg:    26px;
  --radius-btn:   14px;
  --shadow:       0 1px 2px rgba(29,29,31,.05), 0 10px 30px rgba(29,29,31,.07);
  --shadow-lift:  0 2px 6px rgba(29,29,31,.07), 0 22px 50px rgba(29,29,31,.12);

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

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

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

a { color: var(--gulf); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gulf-deep); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 900;
  color: var(--ink);
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.22rem; letter-spacing: -.015em; font-weight: 800; line-height: 1.2; }
h4 { font-size: 1rem; letter-spacing: 0; font-weight: 800; }

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

ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .45em; }

:focus-visible { outline: 3px solid var(--gulf); outline-offset: 3px; border-radius: 6px; }

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

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

section { padding: 84px 0; }
section.tight { padding: 56px 0; }

.band-white { background: var(--white); }
.band-warm  { background: var(--cream-2); }
.band-teal  { background: var(--gulf-tint); }

.on-dark,
section.on-dark {
  background: var(--charcoal);
  color: #fff;
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark p { color: rgba(255,255,255,.84); }
.on-dark a { color: var(--sun); }
.on-dark .lede { color: rgba(255,255,255,.86); }

/* ---------- eyebrow ----------
   Small, uppercase, widely tracked, sitting on a short sun-yellow bar. The bar
   is decoration, so the yellow never has to carry text on cream. */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 6px; border-radius: 3px; background: var(--sun);
}
.on-dark .eyebrow { color: #fff; }

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

.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

/* ---------- buttons ----------
   One loud button per view. Yellow means "this is the offer". Everything else
   is quieter. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius-btn);
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.005em;
  text-decoration: none; line-height: 1.2;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-sun {
  background: var(--sun); color: var(--ink);
  box-shadow: 0 8px 22px rgba(255,199,44,.38), inset 0 -3px 0 rgba(0,0,0,.08);
}
.btn-sun:hover { background: var(--sun-hover); color: var(--ink); }

.btn-ink { background: var(--charcoal); color: #fff; }
.btn-ink:hover { background: #000; color: #fff; }

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

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

/* Links on dark grounds are yellow, which is right for body links and wrong for
   buttons. Buttons keep their own colors wherever they sit. */
.on-dark .btn-sun, .cta-band .btn-sun { color: var(--ink); }
.on-dark .btn-ghost, .cta-band .btn-ghost { color: #fff; }
.on-dark .btn-ink { color: #fff; }

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

.btn .arrow { font-size: 1.1em; line-height: 1; }

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

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,248,231,.96);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  min-height: 72px;
}

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-weight: 900; font-size: 1.06rem; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none; margin-right: auto;
  line-height: 1.1;
}
.brand-mark { flex: 0 0 auto; width: 36px; height: 36px; }
.brand-text span {
  display: block; font-size: .66rem; font-weight: 700; color: var(--ink-soft);
  letter-spacing: .1em; text-transform: uppercase; margin-top: 3px;
}

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

.header-phone {
  font-weight: 800; color: var(--ink); text-decoration: none; font-size: .97rem; white-space: nowrap;
}
.header-phone:hover { color: var(--gulf-deep); }

/* The offer button in the sticky header. Declared after .btn on purpose: both
   are single-class selectors, so whichever comes last wins, and above .btn its
   padding would be overridden. */
.header-cta {
  padding: 11px 18px; font-size: .94rem; border-radius: 12px;
  white-space: nowrap; flex: 0 0 auto;
  box-shadow: 0 3px 10px rgba(255,199,44,.40), inset 0 -2px 0 rgba(0,0,0,.08);
}
.header-cta:hover { transform: none; }

.crumbs { font-size: .87rem; color: var(--ink-soft); padding: 16px 0 0; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--gulf-deep); text-decoration: underline; }

/* ---------- hero ----------
   Copy on the left, the photograph on the right at its own aspect ratio. The
   photo is never cropped with object-fit: an earlier build on this network did
   that and cut the heads off the two people in it. */

.hero { padding: 56px 0 72px; }
.hero-grid {
  display: grid; gap: 52px; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

.hero-kicker {
  font-size: clamp(1.05rem, 1.8vw, 1.28rem); font-weight: 900; letter-spacing: -.02em;
  margin: 0 0 16px;
}
.tagline { color: inherit; }
/* A solid marker block behind the words. The earlier version was a gradient
   band across the lower part of the line, which at 19px read as a strikethrough
   rather than a highlight. */
.tagline-accent {
  background: var(--sun);
  padding: .04em .22em .08em;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero h1 { margin-bottom: 20px; max-width: 16ch; }
.hero-sub { font-size: clamp(1.08rem, 1.7vw, 1.24rem); color: var(--ink-soft); max-width: 50ch; }

.hero-checks {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; gap: 10px;
}
.hero-checks li {
  display: flex; gap: 12px; align-items: flex-start; margin: 0;
  font-weight: 700;
}
.hero-checks svg { flex: 0 0 auto; margin-top: 3px; }

.hero-media { position: relative; }
.hero-photo {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  width: 100%; height: auto;
  aspect-ratio: 1402 / 1122;
  background: var(--sand);
}

/* The Peddle-style offer card: floats over the corner of the photo and tells
   the seller exactly what they will be asked. It is honest about what it is,
   a list and a button, not a form that throws its answers away. */
.offer-card {
  position: absolute; right: -26px; bottom: -40px;
  width: min(312px, 74%);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
}
.offer-card h2 {
  font-size: 1.08rem; letter-spacing: -.01em; margin: 0 0 12px; font-weight: 900;
}
.offer-card ol {
  list-style: none; padding: 0; margin: 0 0 16px;
  counter-reset: offer;
}
.offer-card li {
  counter-increment: offer;
  display: flex; gap: 10px; align-items: center;
  font-size: .93rem; font-weight: 700; margin-bottom: 8px;
}
.offer-card li::before {
  content: counter(offer);
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream-2); color: var(--ink); font-size: .78rem; font-weight: 900;
}
.offer-card .btn { width: 100%; padding: 14px 18px; }
.offer-card .fine { font-size: .8rem; color: var(--ink-soft); margin: 10px 0 0; text-align: center; }

/* ---------- trust strip ---------- */

.trust-strip { background: var(--charcoal); color: #fff; padding: 26px 0; }
.trust-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trust-list li { display: flex; gap: 12px; align-items: center; margin: 0; }
.trust-list strong { display: block; font-size: 1rem; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.trust-list span { display: block; font-size: .85rem; color: rgba(255,255,255,.78); line-height: 1.35; }
.trust-icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,199,44,.14);
  display: inline-flex; align-items: center; justify-content: center;
}

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

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); }
.card p strong { color: var(--ink); }

.on-dark .card {
  background: var(--charcoal-2); border-color: var(--line-dark); box-shadow: none;
}
.on-dark .card p { color: rgba(255,255,255,.80); }

/* Steps: the Peddle three-up, with a line illustration above each. */
.step {
  text-align: left; position: relative;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px 28px; box-shadow: var(--shadow);
}
.step-art {
  width: 84px; height: 84px; border-radius: 22px; background: var(--cream-2);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.step-num {
  position: absolute; top: 26px; right: 26px;
  font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.step h3 { font-size: 1.32rem; }
.step p { color: var(--ink-soft); }

/* Icon tiles for "what we buy". */
.tile {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.tile-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--gulf-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.tile h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tile p { font-size: .95rem; color: var(--ink-soft); }

/* ---------- split feature ---------- */

.split {
  display: grid; gap: 56px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ---------- Florida paperwork, numbered ---------- */

.paper-list { list-style: none; padding: 0; margin: 34px 0 0; counter-reset: paper; display: grid; gap: 16px; }
.paper-list > li {
  counter-increment: paper;
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; margin: 0; box-shadow: var(--shadow);
}
.paper-list > li::before {
  content: counter(paper);
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--sun); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 900;
}
.paper-list h3 { margin: 4px 0 8px; }
.paper-list p { color: var(--ink-soft); }
.paper-list .form-tag {
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  background: var(--gulf-tint); color: var(--gulf-deep);
  padding: 3px 9px; border-radius: 999px; margin-left: 6px; vertical-align: 2px;
}

/* ---------- comparison ---------- */

.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 34px; border-radius: var(--radius); }
.compare {
  width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; font-size: .97rem;
}
.compare th, .compare td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--cream-2); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; }
.compare thead th.us { background: var(--sun); }
.compare tbody th { font-weight: 800; width: 24%; }
.compare td.us { background: #FFFBEF; font-weight: 700; }
.compare .no { color: var(--ink-soft); }
.table-note { font-size: .87rem; color: var(--ink-soft); margin-top: 12px; }

/* ---------- callouts ---------- */

.callout {
  background: var(--white); border-left: 6px solid var(--sun);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px; box-shadow: var(--shadow);
}
.callout-warn { border-left-color: var(--coral); }
.callout-teal { border-left-color: var(--gulf); }
.callout p { color: var(--ink-soft); }
.callout strong { color: var(--ink); }

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

.promise-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promise-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow);
}
.promise-num {
  width: 44px; height: 44px; border-radius: 12px; background: var(--charcoal); color: var(--sun);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem;
  margin-bottom: 18px;
}
.promise-card p { color: var(--ink-soft); }
.promise-ask {
  background: var(--charcoal); color: #fff; border-radius: var(--radius-lg); padding: 30px 32px;
}
.promise-ask-label { font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--sun); margin-bottom: 8px; }
.promise-ask-q { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 900; letter-spacing: -.02em; color: #fff; margin-bottom: 14px; }
.promise-ask p { color: rgba(255,255,255,.84); }

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

.review-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review-card {
  margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.review-stars {
  /* #B57F00 measures 3.50:1 on white, under AA for text this size. #9A6B00 is
     4.69:1 and still reads as gold. */
  color: #9A6B00; font-size: 1.15rem; letter-spacing: 2px; margin-bottom: 12px;
}
.review-stars-off { color: var(--line); }
.review-card blockquote { margin: 0 0 18px; flex: 1 1 auto; }
.review-card blockquote p { font-size: 1.02rem; color: var(--ink); }
.review-meta { font-size: .9rem; color: var(--ink-soft); }
.review-meta strong { display: block; color: var(--ink); font-size: 1rem; }

/* ---------- FAQ accordions ---------- */

.faq-group { margin-top: 42px; }
.faq-group h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-bottom: 16px; }
.faq-item {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 12px; overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; position: relative;
  font-weight: 800; font-size: 1.04rem; letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--cream-2);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 900;
}
.faq-item[open] summary::after { content: "\2212"; background: var(--sun); }
.faq-item summary:hover { background: #FFFCF3; }
.faq-answer { padding: 0 22px 20px; color: var(--ink-soft); }

/* ---------- city directory ---------- */

.region-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; }
.region {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow);
}
.region h3 { font-size: 1.02rem; margin-bottom: 12px; }
.region ul { list-style: none; padding: 0; margin: 0; }
.region li { margin-bottom: 6px; }
.region a { color: var(--ink); text-decoration: none; font-weight: 700; }
.region a:hover { color: var(--gulf-deep); text-decoration: underline; }
.region a::after { content: " \2192"; color: var(--ink-faint); font-weight: 400; }

.area-list { columns: 3; column-gap: 32px; list-style: none; padding: 0; margin: 0; }
.area-list li { break-inside: avoid; padding-left: 18px; position: relative; margin-bottom: 8px; }
.area-list li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sun);
}

/* ---------- prose pages ---------- */

.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6em; font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { color: var(--ink-soft); }
.prose p { color: var(--ink-soft); }
.prose p strong, .prose li strong { color: var(--ink); }

.key-facts {
  background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 26px 28px; margin: 28px 0;
}
.key-facts h2 { margin-top: 0; font-size: 1.15rem; letter-spacing: 0; }
.key-facts ul { margin: 0; padding-left: 1.1em; color: var(--ink); }
.key-facts li { margin-bottom: .55em; }

.source-note { font-size: .86rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 34px; }

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--charcoal); color: #fff; text-align: center;
  padding: 84px 0;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%;
  background: radial-gradient(closest-side, rgba(255,199,44,.18), transparent 70%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; }
.cta-band h2 { color: #fff; max-width: 22ch; margin-left: auto; margin-right: auto; }
.cta-band p { color: rgba(255,255,255,.84); max-width: 58ch; margin-left: auto; margin-right: auto; }
.cta-band .btn-row { justify-content: center; }
.cta-tagline { font-size: 1.2rem; font-weight: 900; color: #fff; margin-bottom: 14px; }
/* On a dark ground the highlight trick does not work. The yellow band only
   covers the lower part of the line, so ink-coloured glyphs are invisible
   everywhere it does not reach. Measured at 1.00:1 before this was fixed.
   On dark, the accent is simply yellow text: 10.79:1 on charcoal. */
.cta-band .tagline-accent,
.footer-tagline .tagline-accent,
.on-dark .tagline-accent { background: none; color: var(--sun); padding: 0; }

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

.site-footer {
  background: #141416; color: rgba(255,255,255,.80);
  padding: 64px 0 34px; font-size: .95rem;
}
.footer-top { display: grid; gap: 36px; grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.site-footer h4 {
  color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px;
}
.site-footer a { color: rgba(255,255,255,.84); 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-brand { font-weight: 900; font-size: 1.15rem; color: #fff; letter-spacing: -.02em; margin-bottom: 8px; }
.footer-tagline { font-weight: 900; color: #fff; margin-bottom: 14px; }
.footer-cities {
  margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line-dark);
}
.footer-cities ul { columns: 5; column-gap: 24px; }
.footer-cities li { break-inside: avoid; margin-bottom: 7px; font-size: .9rem; }
.footer-legal {
  border-top: 1px solid var(--line-dark); margin-top: 34px; padding-top: 22px;
  font-size: .84rem; color: rgba(255,255,255,.64); line-height: 1.6;
}
.footer-legal p { margin-bottom: .7em; }

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

/* The masthead holds the brand, five nav links, the phone number and the offer
   button. Below this width they stop fitting on one line, and left alone the
   flex line would break after the phone and strand the button on a row of its
   own. The nav drops to its own row first instead. */
@media (max-width: 1120px) {
  .site-nav { order: 3; width: 100%; gap: 20px; padding-top: 2px; padding-bottom: 6px; }
}

/* The offer card hangs 26px past the photograph, which only works while the
   page still has a side margin to hang into. At and below the wrap width there
   is none, and the card was pushing the document sideways. It tucks flush to
   the photo's edge from here down. */
@media (max-width: 1240px) {
  .offer-card { right: 0; }
}

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 64px; }
  .hero h1 { max-width: 20ch; }
  .hero-media { max-width: 640px; }
  .offer-card { left: auto; right: 8px; bottom: -44px; }
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-cities ul { columns: 3; }
  .split { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  section { padding: 60px 0; }
  section.tight { padding: 44px 0; }
  .hero { padding: 36px 0 64px; }
  .header-inner { min-height: 60px; padding: 10px 20px; gap: 16px; }
  .wrap { padding: 0 20px; }
  .grid-2, .grid-3, .grid-4, .promise-grid, .review-grid { grid-template-columns: 1fr; }
  .region-grid { grid-template-columns: 1fr; }
  .area-list { columns: 2; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .header-cta { width: auto; padding: 10px 15px; font-size: .9rem; }
  .offer-card { position: relative; left: auto; right: auto; bottom: auto; width: 100%; margin-top: -40px; }
  .hero-media { padding: 0 14px; }
  .paper-list > li { grid-template-columns: 1fr; gap: 14px; }
  .cta-band { padding: 64px 0; }
}

/* Phone widths. Brand, phone number and button share the first row; the nav
   becomes one row that scrolls sideways under it rather than wrapping onto a
   third line, which is what keeps the sticky header near 100px instead of a
   quarter of the screen. */
@media (max-width: 560px) {
  .header-inner { gap: 10px; min-height: 54px; padding: 8px 16px; }
  .brand { font-size: .84rem; gap: 8px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-text span { display: none; }
  .header-phone { font-size: .86rem; }
  .header-cta { padding: 9px 12px; font-size: .84rem; }
  .header-cta .cta-my { display: none; }
  .site-nav {
    flex-wrap: nowrap; overflow-x: auto; gap: 18px;
    padding-top: 0; padding-bottom: 4px;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { font-size: .84rem; padding: 4px 0; flex: 0 0 auto; }
  /* A flex line breaks on each item's base size before it shrinks anything,
     so clearing min-width alone is not enough. A small base plus flex-grow
     keeps the brand, phone and button on one line at every phone width. */
  .brand {
    flex: 1 1 90px; margin-right: 0; min-width: 0;
  }
  .brand-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trust-list { grid-template-columns: 1fr; }
  .area-list { columns: 1; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-cities ul { columns: 2; }
  .wrap { padding: 0 16px; }
}

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

@media print {
  .site-header, .cta-band, .btn-row, .offer-card, .trust-strip { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .on-dark { background: none; color: #000; }
}