/* Design tokens -----------------------------------------------------------
   Ported as-is from the live site's Elementor global kit (identical values
   confirmed across baseline/pages/home.html and the service-area pages --
   this is a genuine site-wide kit, not per-page inline styling). Like-for-
   like port, no redesign: change values here only, nothing downstream. */

:root {
  /* Colors (original kit variable names kept in the comments for traceability) */
  --color-heading: #0a0d31;       /* --e-global-color-a9cf77f */
  --color-primary: #010ed0;       /* --e-global-color-vamtam_accent_1: CTA buttons, sticky header */
  --color-bg-light: #f5f5f5;      /* --e-global-color-vamtam_accent_2 */
  --color-muted: #5f6567;         /* --e-global-color-vamtam_accent_3 */
  --color-accent-light: #dee0ff;  /* --e-global-color-vamtam_accent_4: secondary button bg */
  --color-on-primary: #ffffff;    /* --e-global-color-vamtam_accent_5 */
  --color-text: #242627;          /* --e-global-color-vamtam_accent_6: body text / links */
  --color-overlay-16: #00000026;  /* --e-global-color-vamtam_accent_7 */
  --color-overlay-60: #00000099;  /* --e-global-color-vamtam_accent_8 */

  /* Fonts */
  --font-heading: "Inter Tight", sans-serif;
  --font-body: Helvetica, Arial, sans-serif;

  /* Heading scale (desktop -- kit also defines tablet/mobile step-downs,
     applied via the media queries below) */
  --h1-size: 60px; --h1-weight: 600; --h1-line-height: 1em; --h1-letter-spacing: -1px;
  --h2-size: 48px; --h2-weight: 700; --h2-line-height: 1.2em; --h2-letter-spacing: 0px;
  --h3-size: 30px; --h3-weight: 600; --h3-line-height: 1.2em; --h3-letter-spacing: 0px;
  --h4-size: 24px; --h4-weight: 600; --h4-line-height: 1.3em; --h4-letter-spacing: 0px;
  --h5-size: 20px; --h5-weight: 600; --h5-line-height: 1.3em; --h5-letter-spacing: 0px;
  --h6-size: 16px; --h6-weight: 600; --h6-line-height: 1.6em; --h6-letter-spacing: 0px;
}

/* Tablet step-down (kit breakpoint) */
@media (max-width: 1024px) {
  :root {
    --h1-size: 35px; --h1-line-height: 1em;
    --h2-size: 30px; --h2-line-height: 1.1em;
    --h3-size: 24px; --h3-line-height: 1.1em;
    --h4-size: 22px;
    --h5-size: 18px;
    --h6-size: 15px; --h6-line-height: 1em;
  }
}

/* Mobile step-down (kit breakpoint) */
@media (max-width: 767px) {
  :root {
    --h1-size: 30px; --h1-line-height: 1em;
    --h2-size: 25px; --h2-line-height: 1.3em;
    --h3-size: 20px; --h3-line-height: 1.1em;
    --h4-size: 18px; --h4-line-height: 1.4em;
    --h5-size: 16px;
    --h6-size: 14px; --h6-line-height: 1em;
  }
}

/* Base --------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: #fff;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  margin: 0 0 0.6em;
}
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-line-height); letter-spacing: var(--h1-letter-spacing); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-line-height); letter-spacing: var(--h2-letter-spacing); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-line-height); letter-spacing: var(--h3-letter-spacing); }
h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-line-height); letter-spacing: var(--h4-letter-spacing); }
h5 { font-size: var(--h5-size); font-weight: var(--h5-weight); line-height: var(--h5-line-height); letter-spacing: var(--h5-letter-spacing); }
h6 { font-size: var(--h6-size); font-weight: var(--h6-weight); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing); }

a { color: var(--color-text); }
a:hover { color: var(--color-primary); }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.button,
button[type="submit"] {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  padding: 14px 24px;
  text-decoration: none;
  cursor: pointer;
}
.button:hover, button[type="submit"]:hover { color: var(--color-on-primary); opacity: 0.92; }

.button--secondary {
  background: var(--color-accent-light);
  color: var(--color-primary);
}

section { padding: 3rem 0; }
section.bg-light { background: var(--color-bg-light); }

/* Site chrome ---------------------------------------------------------- */

/* Header: white bar, not the solid blue one this replaces. #478b422 in the
   baseline is background #FFFFFF / min-height 80px (70px at <=1024), with
   the hairline from #3edb061 (1px solid #00000026). */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--color-overlay-16);
}
.site-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-header a { text-decoration: none; }

.site-header__logo {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  line-height: 1.05;
  color: var(--color-heading);
  flex: 0 0 auto;
}
.site-header__logo-line1 { font-size: 20px; font-weight: 700; }
.site-header__logo-line2 { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }

/* Nav type is #4677853: Inter Tight 18px/500, #242627, active #010ED0. */
.site-header__nav { margin-inline: auto; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav > li { position: relative; }
.site-nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--color-text);
  white-space: nowrap;
}
.site-nav > li > a:hover,
.site-nav > li > a.is-active { color: var(--color-primary); }
.site-nav__caret { width: 10px; height: 6px; flex: none; }

/* Submenu opens on hover and on focus-within, so it works from the
   keyboard without a script. Baseline #4677853: white panel, 1px
   #00000026 border, Inter 14px/500 items. */
.site-nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 230px;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-overlay-16);
  border-top-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.site-nav__has-children:hover .site-nav__submenu,
.site-nav__has-children:focus-within .site-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.site-nav__submenu a {
  display: block;
  padding: 10px 18px;
  font-family: "Inter", var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.site-nav__submenu a:hover { color: var(--color-primary); background: var(--color-bg-light); }

.site-header__cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
}
.site-header__phone {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-heading);
  white-space: nowrap;
}
.site-header__quote { font-size: 13px; letter-spacing: 0.02em; }

/* The header collapses before the nav can overlap the CTA cluster. Below
   1024px the nav wraps to its own row and the submenus become plain
   nested lists -- a hover-only flyout is unusable on touch. */
@media (max-width: 1024px) {
  .site-header__inner { min-height: 70px; flex-wrap: wrap; padding-block: 0.75rem; }
  .site-header__nav { order: 3; width: 100%; margin-inline: 0; }
  .site-header__cta { margin-left: auto; }
  .site-nav { flex-wrap: wrap; gap: 1rem 1.25rem; }
  .site-nav > li > a { font-size: 16px; }
  .site-nav__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    padding: 0 0 0 0.75rem;
    min-width: 0;
    display: none;
  }
  .site-nav__has-children:focus-within .site-nav__submenu { display: block; }
  .site-nav__caret { display: none; }
}

@media (max-width: 767px) {
  .site-header__inner { gap: 0.75rem; }
  .site-header__cta { gap: 0.6rem; width: 100%; justify-content: space-between; }
  .site-header__cta .pill--ghost { display: none; }
  .site-header__phone { font-size: 14px; }
}

.site-footer {
  background: var(--color-heading);
  color: var(--color-on-primary);
  padding: 2.5rem 0;
  margin-top: 3rem;
}
/* :not(.button) stops this beating `.button--secondary` (0-1-0), which was
   getting white text on its own #dee0ff lavender fill, about 1.2:1. The
   button keeps its blue-on-lavender, which is roughly 8:1. */
.site-footer a:not(.button) { color: var(--color-on-primary); }
/* Quick Links used to borrow .site-nav, which is a horizontal flex row above
   1024px -- so the footer column laid its links out sideways and blew the
   grid apart. The live footer has no menu widget at all: its link column
   (#8144c77, Service Areas) is <a> + <br />, one link per line, #DEDEDE. So
   the footer gets its own stacked list rather than the header's nav rules.
   Colour stays --color-on-primary from the rule above; #DEDEDE on the navy
   is about 12:1 and white is 16:1, so nothing is lost by keeping white. */
.site-footer__links {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.site-footer__links a { font-size: 0.95rem; line-height: 1.4; }
/* The header hover colour is --color-primary (#010ed0), which is near
   unreadable on the footer navy. Use the light accent there instead. */
.site-footer__links a:hover { color: var(--color-accent-light); }
.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
.site-footer__meta { color: var(--color-accent-light); font-size: 0.85rem; margin-top: 2rem; }

.breadcrumbs { font-size: 0.85rem; color: var(--color-muted); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--color-muted); }

/* Lead form -------------------------------------------------------------- */

.lead-form__honeypot {
  /* Deliberately NOT display:none or visibility:hidden -- some bots skip
     fields hidden that way. Positioned off-screen instead: present in the
     DOM and "visible" to a naive autofill-everything bot, invisible and
     unreachable to a real person (also aria-hidden + tabindex="-1" in the
     markup so screen reader / keyboard users never land on it). */
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The form is a card sitting in its section, not the section itself. It
   previously ran the full width of whatever contained it, which on a
   1240px page meant 90-character-wide inputs for a 5-digit ZIP. */
.lead-form {
  max-width: 640px;
  margin-inline: auto;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--color-overlay-16);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(10, 13, 49, 0.04), 0 8px 24px rgba(10, 13, 49, 0.06);
}

/* Inside the homepage's contact section the card already sits on a tinted
   panel, so the shadow and second border would stack. */
.contact__form .lead-form {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  max-width: none;
}

.lead-form__phone-fallback {
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-overlay-16);
  font-size: 0.95rem;
  color: var(--color-muted);
}
.lead-form__phone-fallback a {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

/* Grouped fields: contact first, vehicle second. */
.lead-form__group {
  border: 0;
  margin: 0 0 1.75rem;
  padding: 0;
  min-width: 0;   /* fieldset defaults to min-content, which breaks grid children */
}
.lead-form__legend {
  padding: 0;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-heading);
}

.lead-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}
.lead-form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lead-form__req { color: var(--color-primary); }

.lead-form__banner {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 1rem 0;
}
.lead-form__banner--error {
  background: #fdecea;
  color: #7a1f1f;
  border: 1px solid #f2b8b5;
}
.lead-form__banner--pending {
  background: var(--color-accent-light);
  color: var(--color-text);
  border: 1px solid var(--color-primary);
}

.lead-form__row { margin-bottom: 1.15rem; min-width: 0; }

/* Labels are always visible above the field. Placeholder-as-label
   disappears the moment someone starts typing, which is exactly when they
   need to check what they are answering. */
.lead-form__row > label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-heading);
  margin-bottom: 0.4rem;
}

.lead-form__row input[type="text"],
.lead-form__row input[type="tel"],
.lead-form__row input[type="email"],
.lead-form__row select,
.lead-form__row textarea {
  width: 100%;
  min-height: 48px;              /* comfortable target, and matches select */
  padding: 0.7rem 0.85rem;
  border: 1px solid #d3d5e0;
  border-radius: 8px;
  background: #fff;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lead-form__row textarea { min-height: 0; resize: vertical; }

.lead-form__row input::placeholder { color: #9aa0b4; }

.lead-form__row input:hover,
.lead-form__row select:hover,
.lead-form__row textarea:hover { border-color: #b6b9cc; }

/* Focus ring is the brand blue at low alpha plus a solid border, so it
   reads clearly against both the white card and the tinted panel. */
.lead-form__row input:focus-visible,
.lead-form__row select:focus-visible,
.lead-form__row textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(1, 14, 208, 0.18);
}

/* Native select arrow varies wildly across platforms; this normalises it
   without replacing the control. */
.lead-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230A0D31' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 10px 6px;
  padding-right: 2.2rem;
}

.lead-form__radios {
  border: 1px solid var(--color-overlay-16);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.15rem;
  min-width: 0;
}
.lead-form__radios legend {
  padding: 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-heading);
}
.lead-form__radios label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1.1rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.lead-form__radios input[type="radio"] { accent-color: var(--color-primary); width: 18px; height: 18px; }

/* One obvious primary action. */
.lead-form__submit {
  width: 100%;
  min-height: 54px;
  padding: 14px 24px;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.lead-form__submit:hover { background: #000bb0; opacity: 1; }
.lead-form__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 14, 208, 0.35);
}

.lead-form__fineprint {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .lead-form { padding: 1.25rem; border-radius: 8px; }
  .lead-form__grid,
  .lead-form__grid--3 { grid-template-columns: minmax(0, 1fr); }
  .lead-form__radios label { display: flex; margin: 0 0 0.5rem; }
}

/* FAQ accordions ----------------------------------------------------------
   Native <details>/<summary>, emitted by extract-content.js in place of the
   live site's script-driven Elementor toggle. Expand/collapse, keyboard
   operation and screen-reader announcement all come from the element
   itself, so there is no behaviour here to style around -- only the marker,
   which browsers draw inconsistently. */
.faq-item {
  border: 1px solid var(--color-overlay-16);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  background: #fff;
}
.faq-item > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;               /* Firefox */
  border-radius: 8px;
}
.faq-item > summary::-webkit-details-marker { display: none; }

/* Caret drawn as a pseudo-element so it can rotate on open. */
.faq-item > summary::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.faq-item[open] > summary::before { transform: rotate(45deg); }

.faq-item > summary:hover { color: var(--color-primary); }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.faq-item[open] > summary { border-bottom: 1px solid var(--color-overlay-16); border-radius: 8px 8px 0 0; }

/* Direct children only: a nested list inside the answer keeps its own
   spacing rather than inheriting the panel's. */
.faq-item > :not(summary) { padding: 0 1.15rem; }
.faq-item > :not(summary):first-of-type { padding-top: 1rem; }
.faq-item > :not(summary):last-child { padding-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .faq-item > summary::before { transition: none; }
}

/* City / service-area pages ---------------------------------------------- */

.city-hero { background: var(--color-bg-light); text-align: center; }
.city-page__body :is(p, ul, ol) { max-width: 70ch; }

/* ==========================================================================
   HOMEPAGE
   Values below are read from the Elementor <style> blocks in
   baseline/pages/home.html; the element id each one came from is noted so
   any of them can be traced back. See docs/home-design-values.txt (generated
   by scripts/report-home-design.py).
   ========================================================================== */

.home {
  --home-max: 1240px;
  --radius: 4px;
}

.home > section { padding: 0; }        /* sections carry their own spacing */

.home__wrap,
.hero__inner,
.trust__inner,
.features__inner,
.link-rows__inner,
.story-panels__inner,
.local-stories__inner,
.checks__inner,
.zips__inner,
.blog__inner,
.reviews__inner,
.contact__inner,
.section-heading,
.dark-cta {
  max-width: var(--home-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Pills -- #6092203 (on dark) and #6d26402 (on light) are the same shape:
   10px/600 Inter Tight, uppercase, 1px tracking, 4px radius. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  margin: 0 0 20px;
  padding: 7px 9px 6px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.7em;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pill--onDark  { background: var(--color-overlay-16); color: var(--color-accent-light); }
.pill--onLight { background: var(--color-bg-light);   color: var(--color-muted); }
.pill--ghost {
  background: transparent;
  color: var(--color-heading);
  border: 1px solid var(--color-overlay-16);
  border-radius: 999px;
  margin: 0;
  padding: 8px 14px;
  text-transform: none;
  font-size: 12px;
  letter-spacing: 0;
}
.pill--ghost:hover { color: var(--color-primary); border-color: currentColor; }
.pill__arrow { width: 14px; height: 10px; flex: none; }

/* Secondary button: #fae6b0b is lavender at rest, #242627 on hover. */
.button--secondary:hover {
  background: var(--color-text);
  color: var(--color-on-primary);
  opacity: 1;
}

/* --- 2. Hero (#cfde7a9) -------------------------------------------------- */
/* min-height 475px; margin-top 60px. The photo's diagonal is a raster mask
   on the live site; the polygon here is fitted to that PNG's alpha channel
   by scripts/derive-mask-polygon.py. */
.hero__inner {
  margin-top: 60px;
  min-height: 475px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 2rem;
}
.hero__copy { padding-bottom: 2rem; }
.hero__title {
  font-size: clamp(3rem, 5vw, 4.5rem);   /* #3d03f29 */
  line-height: 1em;
  letter-spacing: -1px;
  margin: 0 0 5%;
}
.hero__subtitle {
  margin: 0 0 2rem;
  max-width: 44%;                        /* #0e2b671: padding-right 56% */
  font-size: clamp(1.6rem, 2.55vw, 2rem);
  line-height: 1.4em;
  color: var(--color-text);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 15px; }
.hero__media { align-self: end; }
.hero__photo {
  display: block;
  width: 100%;
  max-width: 750px;
  height: 475px;
  object-fit: cover;
  margin-left: -30%;                     /* #38546ad */
  clip-path: polygon(27.3% 0%, 100% 0%, 100% 100%, 0% 100%, 27.3% 44.8%);
}

@media (max-width: 1024px) {
  .hero__inner { margin-top: 30px; min-height: 300px; }
  .hero__subtitle { max-width: 45%; font-size: 20px; }
  .hero__photo { max-width: 450px; height: 300px; margin-left: -15%; }
}
@media (max-width: 767px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
    min-height: 0;
    gap: 1.5rem;
  }
  .hero__copy { padding-bottom: 0; }
  .hero__title { font-size: var(--h1-size); margin-bottom: 15px; }
  .hero__subtitle { max-width: none; font-size: 18px; margin-bottom: 15px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .button { text-align: center; }
  .hero__photo { max-width: none; height: 220px; margin-left: 0; }
}

/* --- 3. Trust strip (#4f198ee) ------------------------------------------ */
.trust__inner {
  padding-block: 3.5rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.trust__title { margin: 0 0 0.5rem; }
.trust__google { display: block; width: 100%; max-width: 180px; height: auto; }
.stars { display: flex; gap: 3px; margin: 0.6rem 0 0.35rem; color: #f5b301; }
.stars__star svg { width: 16px; height: 16px; display: block; }
.trust__rating { margin: 0; font-size: 13px; color: var(--color-muted); }
.trust__item { margin: 0; }
.trust__photo {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: var(--radius);
}
.trust__caption {
  margin-top: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-heading);
}

@media (max-width: 1024px) {
  .trust__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust__badge { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .trust__inner { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block: 2.5rem; }
  .trust__photo { height: 200px; }
}

/* --- 4. Dark CTA banner (#73213ce / #cdbe00b) --------------------------- */
.dark-cta { margin-bottom: 55px; }
.dark-cta__panel {
  background: var(--color-text) url("/assets/images/cash-for-cars-no-title.png") no-repeat 90% 47%;
  border-radius: var(--radius);
  padding: 25px;
}
.dark-cta__title {
  margin: 0;
  padding-right: 30%;                    /* #90d2145 */
  color: var(--color-accent-light);
}

@media (max-width: 1024px) {
  .dark-cta__panel { background-position: 65% 8%; background-size: 25vw auto; }
}
@media (max-width: 767px) {
  .dark-cta { margin-bottom: 30px; padding-inline: 0; }
  .dark-cta__panel { border-radius: 0; padding: 20px; background-size: 200px auto; background-position: 60vw 4em; }
  .dark-cta__title { padding-right: 0; }
}

/* --- 5. Feature grid (#5564304) ----------------------------------------- */
.features__inner {
  padding-block: 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.feature__icon { display: block; color: var(--color-primary); }
.feature__icon svg { width: 48px; height: 48px; display: block; }
.feature__title { margin: 1rem 0 0.5rem; }
.feature__body { margin: 0; color: var(--color-muted); }

@media (max-width: 1024px) { .features__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .features__inner { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-block: 2.5rem; } }

/* --- 6. Link rows (#21c899c) -------------------------------------------- */
.link-rows__inner { padding-block: 1rem 3rem; }
.link-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-overlay-16);
}
.link-row:last-child { border-bottom: 1px solid var(--color-overlay-16); }
.link-row__icon { color: var(--color-primary); flex: none; }
.link-row__icon svg { width: 26px; height: 26px; display: block; }
.link-row__link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-primary);
}
.link-row__note { margin: 0.35rem 0 0; color: var(--color-muted); font-size: 15px; }

/* --- 7. Centered heading (#71d606cd) ------------------------------------ */
.section-heading { padding-block: 2.5rem 1.5rem; text-align: center; }
.section-heading__title { margin: 0; }

/* --- 8. Story panels ----------------------------------------------------- */
/* Three graduated lavender tints (#DEE0FF, #ECEEFF, #F6F6FF) on 40px radii,
   offset vertically so consecutive panels overlap. */
.story-panels__inner { padding-block: 1rem 4rem; }

/* The panels slide and stack as you scroll. That is Elementor Sticky, not
   motion effects -- baseline/pages/home.html carries no motion_fx on any of
   these elements (the four that exist belong to the dark CTA, the contact
   section and #9f9047c; the 49 `elementor-motion-effects-*` classes are inert
   wrapper markup Elementor emits for every classic-background container).
   Each panel sits in a wrapper section with sticky:top, sticky_parent:yes,
   sticky_on [desktop, tablet]. All three share one parent column (#29a3fc3b),
   so they pin at rising offsets and fan over one another. Offsets and
   min-heights below are the configured data-settings values verbatim; the
   40vh runway between them is spacers #bef040c / #73dc0fb0 / #70cfa863.
   The overlap used to be faked with negative margins -- those are gone, the
   sticky offsets produce it for real now. */
.story-panel-sticky { position: sticky; }
.story-panel-sticky--1 { top: 80px;  min-height: 900px; }
.story-panel-sticky--2 { top: 310px; min-height: 670px; }
.story-panel-sticky--3 { top: 370px; min-height: 400px; }
.story-panel-gap { height: 40vh; }

.story-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  border-radius: 40px;
  /* padding:65px 80px 55px 80px on #23575fc, #eafec62 and #e40cd70 verbatim.
     Live drops it to 30px all round at 1024px and 30px 20px 20px at 767px --
     both overrides are below, because 80px of side padding on a phone-width
     panel leaves no room for the copy. */
  padding: 65px 80px 55px;
  /* min-height:500px on #23575fc, #eafec62 and #e40cd70, all widths. */
  min-height: 500px;
}
/* Tints run light to dark down the page, not dark to light: #23575fc is
   #F6F6FF, #eafec62 is #ECEEFF, #e40cd70 is #DEE0FF. */
.story-panel--1 { background: #f6f6ff; }
.story-panel--2 { background: #eceeff; }
.story-panel--3 { background: #dee0ff; }
.story-panel__title { margin: 0 0 1rem; }
.story-panel__body { margin: 0 0 1.5rem; color: var(--color-text); }
/* Live carries these as column backgrounds at background-size:contain
   (#905cd60, #a7d0ee2, #6bb0f0d), so the whole photo is always visible.
   height:auto is the <img> equivalent. The previous height:320px +
   object-fit:cover cut 108px off the top and bottom of the 950x950 Jetta
   photo, which is why that customer had no head. */
.story-panel__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

@media (max-width: 1024px) {
  .story-panel-sticky--1 { top: 80px;  min-height: 680px; }
  .story-panel-sticky--2 { top: 250px; min-height: 500px; }
  .story-panel-sticky--3 { top: 280px; min-height: 400px; }
  .story-panel { min-height: 400px; padding: 30px; }
}

@media (max-width: 767px) {
  /* sticky_on is [desktop, tablet]: nothing pins below 768px. Spacers drop to
     30px / 30px / 0 at this width. */
  .story-panel-sticky { position: static; min-height: 0; }
  .story-panel-gap { height: 30px; }
  .story-panel-gap--3 { height: 0; }
  .story-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: 30px 20px 20px;
    border-radius: 24px;
    min-height: 0;
  }
}

/* --- 9. Local stories (#d0d5a27) ---------------------------------------- */
.local-stories {
  background-image: linear-gradient(180deg, #afc6e6 0%, #e9e6ef 100%);
  margin-bottom: 80px;
}
.local-stories__inner { padding-block: 60px; text-align: center; }
.local-stories__title { margin: 0 0 2rem; }
.local-stories .pill { margin-inline: auto; }
/* space_between: 10px at every breakpoint on the live widget. Widened to
   30px here because these cards carry a photo and a paragraph; 10px between
   full-bleed images reads as a printing error. */
.local-stories .carousel { --gap: 30px; text-align: left; }
.story-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 290px;
}
.story-card__photo { display: block; width: 100%; height: 200px; object-fit: cover; }
.story-card__body { padding: 1.25rem; }
.story-card__title { margin: 0 0 0.6rem; font-size: 18px; line-height: 1.3; }
.story-card__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-muted); }

/* Carousel ----------------------------------------------------------------
   The track is a native scroll-snap container, so touch, trackpad and
   keyboard scrolling all work before carousel.client.js runs and keep
   working if it fails. The script adds arrows, autoplay and wrap-around.
   Slide widths come from --per-view so the breakpoint counts (3 / 2 / 1,
   read from the live widgets) live in one place. */
.carousel { --per-view: 3; --gap: 30px; position: relative; }

.carousel__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  /* Space for the focus ring, minus the same amount of margin so the row
     still lines up with the section's other content. */
  padding: 4px;
  margin: -4px;
  /* Firefox/IE scrollbar hiding; WebKit below. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.carousel__slide {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  min-width: 0;
}

@media (max-width: 1024px) { .carousel { --per-view: 2; } }
@media (max-width: 767px)  { .carousel { --per-view: 1; } }

.carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 2rem; }
/* display:flex would otherwise beat the hidden attribute. The nav is hidden
   whenever the slide count does not exceed per-view -- including before the
   script runs, since arrows that cannot move anything should not be drawn. */
.carousel-nav[hidden] { display: none; }
.carousel-nav__button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.carousel-nav__button svg { width: 16px; height: 12px; }
.carousel-nav__button:hover:not([disabled]) {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.carousel-nav__button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 14, 208, 0.3);
}
/* Disabled means either "script has not run yet" or, on a clamping
   carousel, "already at this end". Both should look unavailable. */
.carousel-nav__button[disabled] { opacity: 0.35; cursor: default; }
.carousel-nav--onDark .carousel-nav__button:hover:not([disabled]) {
  background: var(--color-accent-light);
  color: var(--color-text);
}
.carousel-nav--onDark .carousel-nav__button:focus-visible {
  box-shadow: 0 0 0 3px rgba(222, 224, 255, 0.4);
}
.carousel-nav--onDark .carousel-nav__button { color: var(--color-accent-light); }

@media (max-width: 1024px) {
  .local-stories { margin-bottom: 60px; }
  .local-stories__inner { padding-block: 30px 40px; }
  /* per-view drops to 2 via the shared .carousel rule */
}
@media (max-width: 767px) {
  .local-stories__inner { padding: 40px 20px 30px; }
  .local-stories .carousel { --gap: 20px; }
}

/* --- 10. Checkmark section (#15c6411) ----------------------------------- */
.checks__inner {
  padding-block: 2rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3rem;
  align-items: center;
}
.checks__title { margin: 0 0 1rem; }
.checks__copy p { color: var(--color-muted); }
.checks__grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}
.check-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.check-item__mark {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--color-primary);       /* #010ED0 */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.check-item__mark svg { width: 16px; height: 12px; }
.check-item__title { margin: 0 0 0.35rem; font-size: 18px; }
.check-item__body { margin: 0; font-size: 14px; color: var(--color-muted); }
.checks__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (max-width: 1024px) { .checks__inner { gap: 2rem; } }
@media (max-width: 767px) {
  .checks__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 1rem 3rem; }
  .checks__grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .checks__photo { min-height: 260px; }
}

/* --- 11. ZIP codes (#5f703b1 .. #47d9ab3) ------------------------------- */
/* Four stacked Elementor rows in the baseline, one dark panel here. */
.zips { padding-inline: 1.5rem; margin-bottom: 4rem; }
.zips__inner {
  background: var(--color-text);          /* #242627 */
  border-radius: var(--radius);
  padding: 60px 40px;
  text-align: center;
  max-width: var(--home-max);
}
.zips__title { color: var(--color-accent-light); margin: 0 0 1rem; }
.zips .pill { margin-inline: auto; }
.zips__intro {
  max-width: 80ch;
  margin: 0 auto 2rem;
  color: #f5f5f1b3;                       /* --e-global-color-8a42445 */
  font-size: 15px;
}
.zips__service-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto 2.5rem;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--color-overlay-16);
  color: var(--color-accent-light);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
}
.zips__service-arrow svg { width: 14px; height: 10px; display: block; }
/* space_between: 45px desktop, 10px tablet/mobile -- the one widget that
   sets it explicitly. */
.zips .carousel { --gap: 45px; text-align: left; }
.zip-card {
  background: var(--color-overlay-60);    /* #00000099 */
  border-radius: var(--radius);
  padding: 25px;
}
.zip-card__title { margin: 0 0 8px; color: var(--color-bg-light); }
.zip-card__body { margin: 0 0 20px; font-size: 14px; line-height: 1.4em; color: #f5f5f1b3; }
.zip-card__list {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #f5f5f1b3;
  word-spacing: 0.35em;
}

/* space_between_tablet / _mobile are both 10px on this widget. */
@media (max-width: 1024px) { .zips .carousel { --gap: 10px; } }
@media (max-width: 767px) {
  .zips { padding-inline: 0; }
  .zips__inner { border-radius: 0; padding: 40px 20px; }
  .zips__service-pill { font-size: 14px; }
}

/* --- 12-13. Blog -------------------------------------------------------- */
.blog__inner { padding-block: 1rem 4rem; text-align: center; }
.blog .pill { margin-inline: auto; }
.blog__title { margin: 0 0 2rem; }
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  text-align: left;
}
.blog-card { display: flex; flex-direction: column; }
.blog-card__photo {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius);
}
.blog-card__cats { margin: 1rem 0 0.5rem; font-size: 12px; color: var(--color-muted); }
.blog-card__cats a { color: var(--color-muted); }
.blog-card__title { margin: 0 0 0.5rem; font-size: 20px; line-height: 1.25; }
.blog-card__title a { color: var(--color-heading); text-decoration: none; }
.blog-card__title a:hover { color: var(--color-primary); }
.blog-card__excerpt { margin: 0 0 0.75rem; font-size: 14px; color: var(--color-muted); }
.blog-card__more { font-weight: 600; color: var(--color-primary); text-decoration: none; }

@media (max-width: 1024px) { .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .blog__grid { grid-template-columns: minmax(0, 1fr); } }

/* --- 14. Reviews -------------------------------------------------------- */
.reviews__inner { padding-block: 2rem 4rem; text-align: center; }
.reviews .carousel { --gap: 2rem; text-align: left; margin-bottom: 2rem; }
.review {
  margin: 0;
  background: var(--color-bg-light);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.review__quote { margin: 0 0 1rem; font-size: 15px; line-height: 1.6; color: var(--color-text); }
.review__cite { display: flex; flex-direction: column; }
.review__name { font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); }
.review__place { font-size: 13px; color: var(--color-muted); }
.reviews__google { display: inline-block; width: 180px; height: auto; }


/* --- 15. Final CTA + lead form ------------------------------------------ */
.contact__inner {
  padding-block: 2rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 3rem;
  align-items: start;
}
.contact__title { margin: 0 0 1rem; }
.contact__lede { color: var(--color-muted); }
.contact__phone { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); text-decoration: none; }
.contact__subhead { margin: 1.75rem 0 0.75rem; }
.benefits { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.benefits__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.benefits__list li { display: flex; align-items: center; gap: 0.6rem; }
.benefits__check { color: var(--color-primary); display: inline-flex; }
.benefits__check svg { width: 14px; height: 11px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step__num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--color-accent-light);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.step__text { margin: 0; color: var(--color-muted); font-size: 15px; }
.contact__form {
  background: var(--color-bg-light);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.contact__form-title { margin: 0 0 1rem; }
.contact__form .lead-form { max-width: none; }

@media (max-width: 767px) {
  .contact__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 1rem 3rem; }
  .benefits { gap: 1.25rem; }
  .contact__form { padding: 1.25rem; }
}

/* Nothing on the homepage may force a horizontal scrollbar: the hero photo
   is pulled left by a negative margin and overflows its box by design.
   This must be `clip`, not `hidden`. `overflow-x: hidden` computes overflow-y
   to `auto`, which makes .home a scroll container -- and a sticky descendant
   pins to its nearest scroll container, not the viewport. Since .home never
   scrolls itself, `hidden` here silently stops the story panels from
   sticking at all. `clip` does the same visual clipping without creating a
   scroll container. */
.home { overflow-x: clip; }