/* =================================================================
   HOME PAGE  ·  v3 redesign
   Scoped entirely under .home-v3 so it never touches other pages
   (about/pricing/partners/cads) or shared components. Loaded after
   styles.css. Functional class names (hero-search-card, address-input,
   results-*, faq-*, promo-banner-*, fade-in) are kept for app.js and
   mainController.js and restyled here.
   ================================================================= */

/* --hv-* design tokens live on :root in styles.css (shared with pages.css). */
.home-v3 {
  background: var(--hv-cream);
  color: var(--hv-text);
}

.home-v3 .fade-in {
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-v3 .fade-in.visible { transform: none; }

/* ----------------------------- Shared type ----------------------------- */
.home-v3 .hv-section { padding: var(--hv-section) 0; }
.home-v3 .hv-head { max-width: 680px; margin-bottom: clamp(40px, 5vw, 56px); }
.home-v3 .hv-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.home-v3 .hv-kicker {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hv-green);
}
.home-v3 .hv-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--hv-text);
  text-wrap: balance;
}
.home-v3 .hv-sub {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--hv-muted);
  text-wrap: pretty;
}
.home-v3 .hv-sub a { color: var(--hv-green); font-weight: 600; }
.home-v3 .hv-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--hv-green);
  text-decoration: none;
}
.home-v3 .hv-link i { font-size: 13px; transition: transform 0.2s ease; }
.home-v3 .hv-link:hover i { transform: translateX(3px); }
.home-v3 .hv-link-light { color: var(--hv-mint); }

/* ================================ HERO ================================ */
.home-v3 .hv-hero-shell {
  position: relative;
  color: var(--hv-on-dark);
  background:
    radial-gradient(900px 560px at 82% 18%, rgba(111, 216, 173, 0.13), transparent 62%),
    radial-gradient(700px 480px at 0% 100%, rgba(232, 168, 56, 0.08), transparent 60%),
    linear-gradient(180deg, var(--hv-ink) 0%, var(--hv-ink-2) 100%);
  /* Clip sideways only: the address autocomplete dropdown must be able to hang
     below the hero, and sit above the proof bar that follows it. */
  overflow-x: clip;
  z-index: 2;
}
/* Faint dot texture, faded toward the bottom */
.home-v3 .hv-hero-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
}
.home-v3 .hv-hero-shell > * { position: relative; z-index: 1; }

.home-v3 .hv-hero {
  padding: clamp(128px, 15vh, 168px) 0 clamp(64px, 8vw, 104px);
}
.home-v3 .promo-banner-strip + .hv-hero { padding-top: clamp(32px, 4vh, 48px); }

.home-v3 .hv-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.home-v3 .hv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  margin-bottom: 26px;
  border: 1px solid var(--hv-hairline);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  font-weight: 500;
  color: var(--hv-on-dark);
}
.home-v3 .hv-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hv-mint);
  box-shadow: 0 0 0 4px rgba(111, 216, 173, 0.18);
}

.home-v3 .hv-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 66px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #fff;
}
.home-v3 .hv-hero-title-accent { display: block; color: var(--hv-mint); }

.home-v3 .hv-hero-lede {
  max-width: 560px;
  margin: 22px 0 32px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--hv-on-dark-muted);
}

/* Seasonal line (mainController getSeasonMessage); shown when the countdown isn't */
.home-v3 .hv-season {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
  margin: -8px 0 26px;
  padding: 9px 14px 9px 12px;
  border: 1px solid var(--hv-hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
  line-height: 1.5;
  color: var(--hv-on-dark-muted);
  text-align: left;
}
.home-v3 .hv-season i { margin-top: 3px; color: var(--hv-gold); }

/* ---- Search card ---- */
.home-v3 .hero-search-section { margin: 0; animation: none; }
.home-v3 .hero-search-card {
  max-width: 640px;
  margin: 0;
  padding: 22px 22px 18px;
  border-radius: var(--hv-radius);
  background: #fff;
  color: var(--hv-text);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.search-focused .home-v3 .hero-search-card {
  position: relative;
  z-index: 3;
  background: #fff;
}

/* ---- Pinned search bar (app.js initStickySearch) ----
   Once the page is scrolled past the card, it becomes a slim full-width bar
   fixed just below the navbar or the docked promo bar (top is set inline):
   title + pill, the input, and (no promo) the counties line.
   The .hero-search-section keeps its height as a placeholder. */
body .home-v3 .hero-search-section.is-pinned .hero-search-card {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1050;
  max-width: none;
  margin: 0;
  padding: 10px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--hv-border);
  box-shadow: 0 14px 30px -18px rgba(15, 44, 36, 0.45);
  transition: none;
  animation: hv-pin-in 0.22s ease-out;
}
/* White fill extending up behind the navbar, so no page background shows
   between the navbar and the bar while the navbar animates its height. */
body .home-v3 .hero-search-section.is-pinned .hero-search-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 40px;
  background: #fff;
}
@keyframes hv-pin-in {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* The input spans the page's content width (same as .container). */
.home-v3 .hero-search-section.is-pinned .hero-search-form {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
/* Pinned: the title and rotating pill sit above the input, lined up with
   it. The counties line shows only when there's no promo code (with one,
   the promo bar is docked above and the bar stays shorter). */
.home-v3 .hero-search-section.is-pinned :is(.hv-search-label, .hv-search-counties) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
.home-v3 .hero-search-section.is-pinned .hv-search-label {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 15px;
}
.home-v3 .hero-search-section.is-pinned .hv-search-label-hint.hero-search-badge {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
}
.home-v3 .hero-search-section.is-pinned .hv-search-counties {
  margin-top: 6px;
  font-size: 12px;
}
body.promo-docked .home-v3 .hero-search-section.is-pinned .hv-search-counties { display: none; }
.home-v3 .hero-search-section.is-pinned .address-input::part(input) {
  padding-top: 11px;
  padding-bottom: 11px;
}
/* The bar sits under the promo dock, so its white fill mustn't reach up. */
body.promo-docked .home-v3 .hero-search-section.is-pinned .hero-search-card::before { display: none; }

/* ---- Docked promo bar (app.js initStickySearch) ----
   A slim copy of the promo banner (photo, name, email, phone, amount),
   fixed just below the navbar once the full banner scrolls behind it.
   top is set inline from the navbar's height. */
.home-v3 .promo-dock {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1060;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  padding: 8px 0;
  background: linear-gradient(135deg, #16382d, #0f2920);
  border-bottom: 1px solid var(--hv-hairline);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6);
  color: var(--hv-on-dark);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
body.promo-docked .home-v3 .promo-dock {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* White fill extending up behind the navbar while it animates its height
   (same as the pinned search bar). */
.home-v3 .promo-dock::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 40px;
  background: #fff;
}
.home-v3 .promo-dock-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-v3 .promo-dock-photo {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--hv-hairline);
}
.home-v3 .promo-dock-who {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 16px;
}
.home-v3 .promo-dock-name { font-size: 15px; font-weight: 700; color: #fff; }
.home-v3 .promo-dock-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 13px;
  color: var(--hv-on-dark-muted);
}
.home-v3 .promo-dock-contact i { margin-right: 4px; color: var(--hv-gold); }
.home-v3 .promo-dock-amount {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid rgba(111, 216, 173, 0.25);
  border-radius: 100px;
  font-size: 12px;
  color: var(--hv-on-dark-muted);
}
.home-v3 .promo-dock-amount strong { font-size: 16px; color: var(--hv-gold); }

/* ---- Phone promo summary + chevron (hidden above 640px) ----
   The hero banner collapses to a one-line summary button; the docked bar
   gets a chevron that opens the rest of the details under it. On wider
   screens the details wrapper is layout-neutral and the dock stays one row. */
.home-v3 .promo-banner-details { display: contents; }
.home-v3 .promo-banner-summary,
.home-v3 .promo-dock .promo-chevron,
.home-v3 .promo-dock-details { display: none !important; }
.home-v3 .promo-chevron {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--hv-hairline);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.home-v3 .promo-chevron i { transition: transform 0.2s ease; }
.home-v3 :is(.promo-banner, .promo-dock).is-open .promo-chevron i { transform: rotate(180deg); }
.home-v3 .hv-search-label {
  display: flex;
  flex-wrap: wrap;           /* narrow cards: badge drops under the label */
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--hv-text);
}
/* Phones swap in a shorter label when the bar is pinned (640px block). */
.home-v3 .hv-search-label-pinned { display: none; }
.home-v3 .hv-search-label-hint { font-size: 13px; font-weight: 500; color: var(--hv-muted); }
/* Rotating messages (app.js initHeroBadgeRotation) use the green pill from
   styles.css (.hero-search-badge, fixed width so the row never reflows as
   the text changes). Only restore its white, bold text over the hint style. */
.home-v3 .hv-search-label-hint.hero-search-badge {
  flex: 0 0 auto;
  width: 256px;              /* fits "Join 25,000+ Texas homeowners" on one line */
  white-space: nowrap;
  color: #fff;
  font-weight: 600;
}
.home-v3 .hv-search-label:has(.hero-search-badge) { align-items: center; }
.home-v3 .hv-search-label label { white-space: nowrap; }
/* Field + arrow button side by side. The button sits outside the Google
   widget (its inner input isn't styleable), so the placeholder never gets
   covered and the suggestion dropdown still lines up with the field. */
.home-v3 .address-input-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-v3 .address-input-row .address-input { flex: 1 1 auto; min-width: 0; }
.home-v3 .address-input {
  border: 1.5px solid #d7dbd5;
  border-radius: 12px;
  padding-left: 16px;
}
/* The arrow can't pick a suggestion for the user (Google's widget does
   that); it signals "this is a search" and, on submit, prompts them to
   choose from the list (mainController). */
.home-v3 .hv-search-submit {
  flex: 0 0 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--hv-green);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.home-v3 .hv-search-submit:hover { background: var(--hv-green-2); }
.home-v3 .hv-search-submit:disabled { opacity: 0.5; cursor: default; }
/* The prediction dropdown is sized to the widget's content box, so any host
   padding makes it narrower than (and offset from) the input. Keep the host
   flush so the dropdown lines up with the input's left and right edges. */
.home-v3 gmp-place-autocomplete.address-input {
  padding: 0;
  overflow: visible;
}
/* Inset the suggestion rows so they (and the highlighted row's outline)
   don't run edge to edge inside the dropdown. */
.home-v3 .address-input::part(prediction-list) {
  padding: 8px;
  box-sizing: border-box;
}
.home-v3 .address-input::part(prediction-item) {
  border-radius: 10px;
}
.home-v3 .address-input::part(prediction-item):hover,
.home-v3 .address-input::part(prediction-item-selected) {
  background-color: #eef6f1;
  color: var(--hv-text);
}
.home-v3 .address-input:focus,
.home-v3 .address-input:focus-within {
  border-color: var(--hv-green);
  box-shadow: 0 0 0 4px rgba(27, 77, 62, 0.12);
}
.home-v3 .hv-search-counties {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--hv-muted);
}
.home-v3 .hv-search-counties i { color: var(--hv-gold); }

.home-v3 .search-loading {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--hv-green);
  font-weight: 500;
}
.home-v3 .search-spinner { animation: hv-spin 1s linear infinite; }
@keyframes hv-spin { to { transform: rotate(360deg); } }

.home-v3 .address-validity-message { margin-top: 14px; text-align: left; }
.home-v3 .alert { padding: 0.85rem 1.1rem; border: 1px solid transparent; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.home-v3 .alert-warning { color: #856404; background: #fff8e6; border-color: #ffeeba; }
.home-v3 .alert-info { color: #0c5460; background: #e7f6f9; border-color: #bee5eb; }
.home-v3 .alert-danger { color: #631212; background: #ffecec; border-color: #f5c6cb; }
.home-v3 .result-exists-alert { width: 100%; flex-basis: 100%; text-align: center; margin-bottom: 12px; }
.home-v3 .result-exists-title { font-size: 19px; }
.home-v3 .result-exists-sub { margin-top: 6px; font-size: 14px; }
.home-v3 .result-header-hint { font-size: 14px; color: var(--hv-muted); }
.home-v3 .result-actions-centered { margin-top: 20px; justify-content: center; }
.home-v3 .property-search-results { border-top: none; }
.home-v3 .results-card,
.home-v3 .multiple-results-card { border-radius: 14px; }
/* Each match is a real button (keyboard reachable); layout comes from
   .results-list-item in styles.css. */
.home-v3 button.results-list-item {
  appearance: none;
  width: 100%;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hv-border);
  text-align: left;
}

/* Results mode: give the property details the full width */
.home-v3 .hv-hero-results .hv-hero-grid { grid-template-columns: minmax(0, 1fr); }
.home-v3 .hv-hero-results .hv-hero-visual { display: none; }
.home-v3 .hv-hero-results .hv-hero-main { max-width: 980px; width: 100%; margin: 0 auto; }
.home-v3 .hv-hero-results .hero-search-card { max-width: none; }

.home-v3 .hv-hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 22px;
  list-style: none;
  font-size: 15px;
  color: var(--hv-on-dark-muted);
}
.home-v3 .hv-hero-checks li { display: inline-flex; align-items: center; gap: 8px; }
.home-v3 .hv-hero-checks i { color: var(--hv-mint); }

/* ---- Countdown (only shown May 10–20) ---- */
.home-v3 .hero-countdown {
  display: inline-flex;
  margin: 0 0 28px;
  padding: 16px 22px;
  border: 1px solid var(--hv-hairline);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  align-items: flex-start;
}
.home-v3 .hero-countdown-kicker { color: var(--hv-gold); }
.home-v3 .hero-countdown-unit { min-width: 72px; }
.home-v3 .hero-countdown-value { font-size: clamp(32px, 4vw, 44px); color: #fff; text-shadow: none; }
.home-v3 .hero-countdown-label { color: var(--hv-on-dark-muted); }
.home-v3 .hero-countdown-separator { font-size: 32px; color: var(--hv-mint); }

/* ---- Example result card ---- */
.home-v3 .hv-hero-visual { position: relative; }
.home-v3 .hv-result {
  position: relative;
  padding: 26px 28px 24px;
  border-radius: 22px;
  background: #fff;
  color: var(--hv-text);
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.7);
}
/* Stacked "sheet" behind the card for depth */
.home-v3 .hv-result::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  z-index: -1;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--hv-hairline);
}
.home-v3 .hv-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hv-border);
}
.home-v3 .hv-result-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hv-muted);
}
.home-v3 .hv-result-title { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; }
.home-v3 .hv-result-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  background: #e7f6ee;
  color: #17694a;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.home-v3 .hv-result-status i { font-size: 11px; }

.home-v3 .hv-result-values {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
  margin-top: 20px;
}
.home-v3 .hv-result-label { display: block; font-size: 13px; color: var(--hv-muted); }
.home-v3 .hv-result-num {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--hv-green);
  font-variant-numeric: tabular-nums;
}
.home-v3 .hv-result-num-old {
  color: var(--hv-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(154, 162, 158, 0.7);
}
.home-v3 .hv-result-arrow { margin-bottom: 8px; color: var(--hv-gold); }

.home-v3 .hv-result-bar {
  position: relative;
  height: 8px;
  margin-top: 18px;
  border-radius: 100px;
  background: #eceee9;
  overflow: hidden;
}
.home-v3 .hv-result-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 91.4%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--hv-green), var(--hv-green-2));
}
.home-v3 .hv-result-reduction { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--hv-green); }

.home-v3 .hv-result-lines {
  margin-top: 18px;
  padding: 6px 16px;
  border-radius: 14px;
  background: var(--hv-cream);
}
.home-v3 .hv-result-lines > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 15px;
}
.home-v3 .hv-result-lines > div + div { border-top: 1px solid var(--hv-border); }
.home-v3 .hv-result-lines dt { color: var(--hv-muted); }
.home-v3 .hv-result-lines dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.home-v3 .hv-result-total dt { color: var(--hv-text); font-weight: 600; }
.home-v3 .hv-result-total dd { font-size: 20px; color: var(--hv-green); }

.home-v3 .hv-result-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 20px;
  list-style: none;
  counter-reset: none;
}
.home-v3 .hv-result-steps li {
  position: relative;
  padding-top: 22px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hv-muted);
  text-align: center;
}
/* connector line */
.home-v3 .hv-result-steps li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -50%;
  right: 50%;
  height: 2px;
  background: var(--hv-green);
}
.home-v3 .hv-result-steps li:first-child::before { display: none; }
/* dot */
.home-v3 .hv-result-steps li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--hv-green);
  box-shadow: 0 0 0 3px #e7f6ee;
}
.home-v3 .hv-result-note {
  margin-top: 26px;
  font-size: 13px;
  text-align: center;
  color: var(--hv-on-dark-muted);
}

/* ============================== PROOF BAR ============================== */
.home-v3 .hv-proof {
  background: #fff;
  border-bottom: 1px solid var(--hv-border);
}
.home-v3 .hv-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.home-v3 .hv-proof-item {
  padding: 34px 28px;
  border-left: 1px solid var(--hv-border);
}
.home-v3 .hv-proof-item:first-child { border-left: none; padding-left: 0; }
.home-v3 .hv-proof-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hv-green);
  font-variant-numeric: tabular-nums;
}
.home-v3 .hv-proof-label { display: block; margin-top: 10px; font-size: 15px; color: var(--hv-muted); }

/* ============================ HOW IT WORKS ============================ */
.home-v3 .hv-how { background: var(--hv-cream); }
/* Horizontal timeline. Each step draws the line segment from its own node
   to the next step's node (so the line is robust to any column width). */
.home-v3 .hv-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}
.home-v3 .hv-step {
  position: relative;
  padding: 0 20px;
  text-align: center;
}
.home-v3 .hv-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 27px;              /* node center */
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--hv-green);
  opacity: 0.3;
}
.home-v3 .hv-step-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--hv-green);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 0 0 6px var(--hv-cream), 0 14px 28px -14px rgba(27, 77, 62, 0.6);
}
.home-v3 .hv-step-num {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hv-green);
}
.home-v3 .hv-step h3 { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--hv-text); }
.home-v3 .hv-step p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--hv-muted); }
/* Steps reveal left to right */
.home-v3 .hv-step:nth-child(2) { transition-delay: 0.1s; }
.home-v3 .hv-step:nth-child(3) { transition-delay: 0.2s; }
.home-v3 .hv-step:nth-child(4) { transition-delay: 0.3s; }

/* Narrow screens: vertical timeline, nodes on the left, text on the right. */
@media (max-width: 900px) {
  .home-v3 .hv-steps { grid-template-columns: minmax(0, 1fr); }
  .home-v3 .hv-step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 18px;
    padding: 0 0 24px;
    text-align: left;
  }
  .home-v3 .hv-step:last-child { padding-bottom: 0; }
  .home-v3 .hv-step:not(:last-child)::before {
    top: 24px;
    bottom: -24px;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .home-v3 .hv-step-node { grid-row: 1 / span 3; width: 48px; height: 48px; margin: 0; font-size: 18px; }
  .home-v3 .hv-step-num,
  .home-v3 .hv-step h3,
  .home-v3 .hv-step p { grid-column: 2; }
  .home-v3 .hv-step-num { margin: 4px 0; }
  .home-v3 .hv-step:nth-child(n) { transition-delay: 0s; }
}

/* ============================== PRICING ============================== */
.home-v3 .hv-pricing { background: #fff; }
.home-v3 .hv-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.home-v3 .hv-checklist { margin: 28px 0 30px; list-style: none; }
.home-v3 .hv-checklist li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--hv-muted);
}
.home-v3 .hv-checklist li + li { border-top: 1px solid var(--hv-border); }
.home-v3 .hv-checklist strong { color: var(--hv-text); font-weight: 600; }
.home-v3 .hv-checklist i {
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--hv-green);
  color: #fff;
  font-size: 11px;
}

.home-v3 .hv-split-card {
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--hv-border);
  border-radius: 22px;
  background: var(--hv-cream);
}
.home-v3 .hv-split-card-label {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--hv-text);
}
.home-v3 .hv-split-bar {
  display: flex;
  height: 68px;
  border-radius: 14px;
  overflow: hidden;
  font-size: 16px;
}
.home-v3 .hv-split-bar span { display: flex; align-items: center; padding: 0 18px; }
.home-v3 .hv-split-bar strong { font-size: 20px; margin-left: 6px; }
.home-v3 .hv-split-keep { flex: 65; background: var(--hv-green); color: #fff; }
.home-v3 .hv-split-fee { flex: 35; justify-content: center; background: var(--hv-gold); color: var(--color-primary-dark); }
.home-v3 .hv-split-fee strong { margin-left: 0; }
.home-v3 .hv-split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--hv-muted);
}
.home-v3 .hv-split-legend span { display: inline-flex; align-items: center; gap: 8px; }
.home-v3 .hv-swatch { width: 10px; height: 10px; border-radius: 3px; }
.home-v3 .hv-swatch-keep { background: var(--hv-green); }
.home-v3 .hv-swatch-fee { background: var(--hv-gold); }
.home-v3 .hv-split-zero {
  display: flex;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hv-border);
}
.home-v3 .hv-split-zero i { margin-top: 3px; font-size: 22px; color: var(--hv-gold); }
.home-v3 .hv-split-zero strong { display: block; font-size: 16px; color: var(--hv-text); }
.home-v3 .hv-split-zero span { font-size: 14px; color: var(--hv-muted); }

/* =========================== WHY US (dark) =========================== */
.home-v3 .hv-why {
  color: var(--hv-on-dark);
  background:
    radial-gradient(800px 420px at 90% 0%, rgba(111, 216, 173, 0.12), transparent 60%),
    linear-gradient(180deg, var(--hv-ink) 0%, var(--hv-ink-2) 100%);
}
.home-v3 .hv-why .hv-kicker { color: var(--hv-mint); }
.home-v3 .hv-why .hv-title { color: #fff; }
.home-v3 .hv-why .hv-sub { color: var(--hv-on-dark-muted); }
.home-v3 .hv-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 40px;
}
.home-v3 .hv-why-item { padding-top: 24px; border-top: 1px solid var(--hv-hairline); }
.home-v3 .hv-why-item i { font-size: 22px; color: var(--hv-mint); }
.home-v3 .hv-why-item h3 { margin-top: 16px; font-size: 18px; font-weight: 600; color: #fff; }
.home-v3 .hv-why-item p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--hv-on-dark-muted); }

/* Team strip */
.home-v3 .hv-team {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--hv-hairline);
}
.home-v3 .hv-team-head { max-width: 560px; margin: 0 auto 36px; text-align: center; }
.home-v3 .hv-team-head h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
}
.home-v3 .hv-team-head p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--hv-on-dark-muted); }
.home-v3 .hv-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 20px;
  list-style: none;
}
.home-v3 .hv-member { flex: 0 1 196px; text-align: center; }
.home-v3 .hv-member-photo {
  display: block;
  width: 112px;
  height: 112px;
  margin: 0 auto 14px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: #fff;
  border: 3px solid rgba(111, 216, 173, 0.35);
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.7);
}
.home-v3 .hv-member strong { display: block; font-size: 16px; font-weight: 600; color: #fff; }
.home-v3 .hv-member > span { display: block; margin-top: 3px; font-size: 14px; color: var(--hv-mint); }
.home-v3 .hv-member small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--hv-on-dark-muted); }

.home-v3 .hv-owner {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: clamp(48px, 6vw, 72px);
  padding: 22px 26px;
  border: 1px solid var(--hv-hairline);
  border-radius: var(--hv-radius);
  background: rgba(255, 255, 255, 0.04);
}
.home-v3 .hv-owner-logo {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  padding: 9px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}
.home-v3 .hv-owner p { flex: 1; font-size: 15px; line-height: 1.6; color: var(--hv-on-dark-muted); }
.home-v3 .hv-owner strong { color: #fff; font-weight: 600; }
.home-v3 .hv-owner .hv-link { flex: 0 0 auto; }

/* ============================ TESTIMONIALS ============================ */
.home-v3 .hv-reviews { background: var(--hv-cream); }
.home-v3 .hv-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.home-v3 .hv-review {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 30px 28px 26px;
  border: 1px solid var(--hv-border);
  border-radius: var(--hv-radius);
  background: #fff;
}
.home-v3 .hv-stars { display: flex; gap: 3px; color: var(--hv-gold); font-size: 15px; }
.home-v3 .hv-review blockquote {
  flex: 1;
  margin: 18px 0 24px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--hv-text);
}
.home-v3 .hv-review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--hv-border);
  font-size: 14px;
  color: var(--hv-muted);
}
.home-v3 .hv-review figcaption strong { display: block; font-size: 15px; color: var(--hv-text); }
.home-v3 .hv-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e9f3ee;
  color: var(--hv-green);
  font-weight: 700;
  font-size: 14px;
}

/* ============================== COUNTIES ============================== */
.home-v3 .hv-counties { background: #fff; }
.home-v3 .hv-county-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.home-v3 .hv-county {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--hv-border);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.home-v3 .hv-county-name { grid-column: 1; font-size: 17px; font-weight: 600; color: var(--hv-text); }
.home-v3 .hv-county-cad { grid-column: 1; margin-top: 2px; font-size: 14px; color: var(--hv-muted); }
.home-v3 .hv-county i {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 14px;
  color: #a7aeaa;
  transition: transform 0.2s ease, color 0.2s ease;
}
.home-v3 .hv-county:hover {
  border-color: rgba(27, 77, 62, 0.35);
  background: #fbfcfb;
  box-shadow: 0 18px 36px -28px rgba(15, 44, 36, 0.5);
}
.home-v3 .hv-county:hover i { color: var(--hv-green); transform: translateX(3px); }

/* ================================ FAQ ================================ */
.home-v3 .hv-faq { background: var(--hv-cream); }
.home-v3 .hv-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.home-v3 .faq-list { display: flex; flex-direction: column; gap: 12px; }
.home-v3 .faq-item {
  margin: 0;
  border: 1px solid var(--hv-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.home-v3 .faq-item.active { border-color: rgba(27, 77, 62, 0.35); box-shadow: 0 18px 40px -30px rgba(15, 44, 36, 0.45); }
.home-v3 .faq-question {
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: var(--hv-text);
  cursor: pointer;
}
.home-v3 .faq-question:hover { background: transparent; color: var(--hv-green); }
.home-v3 .faq-question:focus-visible { outline: 2px solid var(--hv-green); outline-offset: -2px; border-radius: 14px; }
.home-v3 .faq-question i { flex-shrink: 0; margin-left: 16px; font-size: 13px; color: var(--hv-muted); transition: transform 0.3s ease; }
.home-v3 .faq-item.active .faq-question i { transform: rotate(180deg); color: var(--hv-green); }
.home-v3 .faq-answer-content { padding: 0 22px 22px; font-size: 15.5px; color: var(--hv-muted); }

/* ================================ CTA ================================ */
.home-v3 .hv-cta-section { background: var(--hv-cream); padding-top: 0; }
.home-v3 .hv-cta {
  position: relative;
  padding: clamp(48px, 7vw, 84px) clamp(24px, 5vw, 64px);
  border-radius: 28px;
  text-align: center;
  color: var(--hv-on-dark);
  background:
    radial-gradient(560px circle at 12% -20%, rgba(111, 216, 173, 0.2), transparent 60%),
    radial-gradient(560px circle at 90% 120%, rgba(232, 168, 56, 0.16), transparent 60%),
    linear-gradient(135deg, var(--hv-ink) 0%, var(--hv-ink-2) 100%);
  overflow: hidden;
}
.home-v3 .hv-cta-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
.home-v3 .hv-cta-sub {
  max-width: 560px;
  margin: 16px auto 32px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--hv-on-dark-muted);
}
.home-v3 .hv-cta .btn i { font-size: 14px; }
.home-v3 .hv-cta-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 14px;
  color: var(--hv-on-dark-muted);
}
.home-v3 .hv-cta-guarantee i { color: var(--hv-gold); }

/* ===================== PROMO BANNER (on the dark hero) ===================== */
.home-v3 .promo-banner-strip {
  padding-top: 104px;
  padding-bottom: 0;
  background: transparent;
}
.home-v3 .promo-banner,
.home-v3 .promo-banner-partner,
.home-v3 .promo-banner-customer {
  border: 1px solid var(--hv-hairline);
  background: linear-gradient(135deg, #16382d, #0f2920);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  color: var(--hv-on-dark);
  border-radius: 24px;
}
.home-v3 .promo-banner-kicker { color: var(--hv-gold); }
.home-v3 .promo-banner-title,
.home-v3 .promo-banner-customer-title,
.home-v3 .promo-banner-provider-name { color: #fff; }
.home-v3 .promo-banner-byline,
.home-v3 .promo-banner-email,
.home-v3 .promo-banner-customer-subtitle { color: var(--hv-on-dark-muted); }
.home-v3 .promo-banner-partner-message,
.home-v3 .promo-banner-customer-message { color: var(--hv-on-dark); }
.home-v3 .promo-banner-message { color: #fff; }
.home-v3 .promo-banner-name-highlight { background: rgba(111, 216, 173, 0.16); color: var(--hv-mint); }
.home-v3 .promo-banner-link { color: var(--hv-mint); }
.home-v3 .promo-banner-link:hover { color: var(--hv-gold); }
.home-v3 .promo-banner-discount-card { border: 1px solid rgba(111, 216, 173, 0.25); }
.home-v3 .promo-banner-photo { border: 3px solid var(--hv-hairline); }

/* ============================ FOCUS VISIBLE ============================ */
/* Keyboard focus rings for everything interactive on the page. Gold reads on
   the cream/white sections; mint on the dark ones. (.faq-question and the
   address input have their own above.) */
.home-v3 :is(.btn, .hv-link, .hv-county, .hv-search-submit, button.results-list-item, .hv-sub a):focus-visible {
  outline: 3px solid var(--hv-gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.home-v3 .hv-why .hv-link:focus-visible,
.home-v3 .hv-cta .btn:focus-visible { outline-color: var(--hv-mint); }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1080px) {
  .home-v3 .hv-why-grid { grid-template-columns: repeat(2, 1fr); }
  .home-v3 .hv-county-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .home-v3 .hv-hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked hero: center the column (headline, search card, checks, example card) */
  .home-v3 .hv-hero-main { max-width: 640px; width: 100%; margin: 0 auto; text-align: center; }
  .home-v3 .hv-hero-lede { margin-left: auto; margin-right: auto; }
  .home-v3 .hero-search-card { margin-left: auto; margin-right: auto; text-align: left; }
  .home-v3 .hv-hero-checks { justify-content: center; }
  .home-v3 .hero-countdown { margin-left: auto; margin-right: auto; }
  .home-v3 .hv-hero-visual { max-width: 520px; width: 100%; margin: 0 auto; }
  .home-v3 .hv-split { grid-template-columns: minmax(0, 1fr); }
  .home-v3 .hv-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .home-v3 .hv-reviews-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; }
  .home-v3 .hv-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .home-v3 .hv-proof-item { padding: 26px 20px; }
  .home-v3 .hv-proof-item:nth-child(odd) { border-left: none; padding-left: 0; }
  .home-v3 .hv-proof-item:nth-child(n + 3) { border-top: 1px solid var(--hv-border); }
}

@media (max-width: 640px) {
  .home-v3 { --hv-section: 56px; }
  .home-v3 .container { padding: 0 16px; }
  .home-v3 .hv-head { margin-bottom: 28px; }

  /* --- Hero: get the address box onto the first screen --- */
  .home-v3 .hv-hero { padding-top: 96px; padding-bottom: 48px; }
  .home-v3 .promo-banner-strip { padding-top: 96px; }
  .home-v3 .hv-eyebrow { margin-bottom: 14px; padding: 5px 11px 5px 10px; font-size: 13px; }
  .home-v3 .hv-hero-title { font-size: 36px; }
  .home-v3 .hv-hero-lede { margin: 14px 0 18px; font-size: 16px; line-height: 1.55; }
  /* The seasonal note moves below the search card (flex order); the
     countdown, when shown, stays above it. */
  .home-v3 .hv-hero-main { display: flex; flex-direction: column; }
  .home-v3 .hero-countdown { align-self: center; }
  .home-v3 .hv-season { order: 1; margin: 14px 0 0; }
  .home-v3 .hv-hero-checks { order: 2; }
  .home-v3 .hero-search-card { padding: 14px 14px 12px; }
  .home-v3 .hero-search-section.is-pinned .hero-search-form { padding: 0 16px; }
  /* Docked promo: name + amount on one line, phone under it; no email. */
  .home-v3 .promo-dock-email { display: none; }
  .home-v3 .promo-dock-who { flex-direction: column; align-items: flex-start; }
  .home-v3 .promo-dock-name { font-size: 14px; }
  /* Hero promo banner: one-line summary; the chevron opens the full banner. */
  .home-v3 .promo-banner { margin-bottom: 20px; padding: 10px 12px; gap: 0; }
  .home-v3 .promo-banner-summary {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .home-v3 .promo-banner-summary .promo-dock-who { gap: 0; }
  .home-v3 .promo-banner-summary .promo-banner-kicker {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .home-v3 .promo-banner:not(.is-open) .promo-banner-details { display: none; }
  .home-v3 .promo-banner.is-open .promo-banner-details {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--hv-hairline);
  }
  /* The summary row already shows the photo. */
  .home-v3 .promo-banner.is-open .promo-banner-photo-column { display: none; }
  /* Docked bar: chevron opens contact details, message and amount. */
  .home-v3 .promo-dock .promo-chevron { display: grid !important; }
  .home-v3 .promo-dock.is-open .promo-dock-details:not(.ng-hide) {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 4px;
    font-size: 14px;
  }
  .home-v3 .promo-dock-details p { margin: 0; color: var(--hv-on-dark); }
  .home-v3 .promo-dock-details .promo-dock-kicker { font-weight: 700; color: #fff; }
  .home-v3 .promo-dock-details a { color: var(--hv-mint); text-decoration: none; }
  .home-v3 .promo-dock-details a i { width: 18px; color: var(--hv-gold); }
  .home-v3 .promo-dock-details strong { color: var(--hv-gold); }
  /* Label and badge share one row */
  .home-v3 .hv-search-label { flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
  .home-v3 .hv-search-label-hint.hero-search-badge { width: auto; padding: 4px 10px; font-size: 12px; }
  .home-v3 .hv-hero-checks { gap: 8px 18px; font-size: 14px; }
  .home-v3 .hv-result { padding: 22px 20px 20px; }
  .home-v3 .hv-result::before { inset: 10px -8px -10px 8px; }
  .home-v3 .hv-result-values { grid-template-columns: 1fr; gap: 10px; }
  .home-v3 .hv-result-arrow { display: none; }

  /* --- Pinned search: just a short label and the input (no pill, no
     counties line), so it costs as little of the screen as possible --- */
  .home-v3 .hero-search-section.is-pinned .hero-search-card { padding: 6px 0 8px; }
  .home-v3 .hero-search-section.is-pinned .hv-search-label {
    max-width: none;
    margin: 0 0 4px;
    padding: 0 16px;
    font-size: 13px;
  }
  .home-v3 .hero-search-section.is-pinned :is(.hv-search-label-hint, .hv-search-counties) { display: none; }
  .home-v3 .hero-search-section.is-pinned .hv-search-label-full { display: none; }
  .home-v3 .hero-search-section.is-pinned .hv-search-label-pinned { display: inline; }
  .home-v3 .hero-search-section.is-pinned .hv-search-submit { flex-basis: 42px; height: 42px; }
  .home-v3 .hero-search-section.is-pinned .address-input::part(input) {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* --- Why us: two columns, then compact icon-left rows on narrow phones --- */
  .home-v3 .hv-why-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .home-v3 .hv-why-item { padding-top: 16px; }
  .home-v3 .hv-why-item i { font-size: 18px; }
  .home-v3 .hv-why-item h3 { margin-top: 10px; font-size: 15px; }
  .home-v3 .hv-why-item p { font-size: 13.5px; }
  .home-v3 .hv-owner { flex-direction: column; align-items: flex-start; }

  /* --- Team: one swipeable row --- */
  .home-v3 .hv-team-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 0 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .home-v3 .hv-member { flex: 0 0 150px; scroll-snap-align: start; }
  .home-v3 .hv-member-photo { width: 80px; height: 80px; }

  /* --- Reviews: one swipeable row --- */
  .home-v3 .hv-reviews-grid {
    display: flex;
    max-width: none;
    gap: 12px;
    padding-bottom: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .home-v3 .hv-review { flex: 0 0 86%; padding: 22px 20px; scroll-snap-align: center; }

  /* --- Counties: two columns, county name only --- */
  .home-v3 .hv-county-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .home-v3 .hv-county { padding: 14px; }
  .home-v3 .hv-county-name { font-size: 15px; }
  .home-v3 .hv-county-cad { display: none; }

  .home-v3 .faq-question { padding: 16px 18px; font-size: 15px; }
  .home-v3 .hv-cta { padding: 40px 20px; }
  .home-v3 .hv-split-bar { height: 60px; font-size: 14px; }
  .home-v3 .hv-split-bar span { padding: 0 12px; }
  .home-v3 .hv-proof-num { font-size: 26px; }
  .home-v3 .hv-proof-label { font-size: 14px; }
  .home-v3 .hero-countdown { padding: 14px; }
  .home-v3 .hero-countdown-unit { min-width: 48px; }
  .home-v3 .hero-countdown-grid { gap: 4px; }
}

@media (max-width: 479px) {
  .home-v3 .hv-why-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-v3 .hv-why-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding-top: 14px; }
  .home-v3 .hv-why-item i { grid-row: 1 / span 2; margin-top: 2px; }
  .home-v3 .hv-why-item h3 { margin-top: 0; }
  .home-v3 .hv-why-item p { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v3 .fade-in { transition: opacity 0.3s ease; transform: none; }
  .home-v3 .hero-search-badge { transition: none; }
  .home-v3 .search-spinner { animation-duration: 2s; }
  .home-v3 .hero-search-section.is-pinned .hero-search-card { animation: none; }
  .home-v3 .hv-team-grid,
  .home-v3 .hv-reviews-grid { scroll-behavior: auto; }
}