/* =========================================================
   Evergreen Garage Door Repair - Homepage v2 (mockup match)
   Design tokens sampled directly from design/mockup-adir-homepage.png
   ========================================================= */

:root {
  /* Brand colors (sampled from mockup) */
  --green-900: #0A3D2B;      /* trust bar, header phone text, headings on white, buttons text-on-lime */
  --green-800: #0E4B36;      /* hover/secondary shade */
  --lime: #A1E026;           /* accent buttons, checkmarks, stars, "YOU CAN TRUST" */
  --lime-dark: #7FB81D;      /* lime hover / border shade */

  --white: #FFFFFF;
  --band-light: #F6F9F1;     /* services strip + light section bands */
  --ink: #13251C;            /* dark heading/body text (near-black, green cast, matches mockup) */
  --muted: #5B6B63;          /* muted sub-copy */
  --border: #E2E8E5;         /* hairline borders/dividers */
  --border-strong: #D8E5DF;

  --shadow-soft: 0 8px 24px rgba(6, 59, 58, .16);
  --shadow-card: 0 6px 18px rgba(6, 59, 58, .10);
  --shadow-strip: 0 20px 45px rgba(6, 40, 30, .20);

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --font-head: 'Poppins', 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;

  --container-w: 1280px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea, button { font-family: inherit; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  background: var(--white);
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 24px;
}
/* Wide container variant for hero/services/badges - near-full-width per mockup (item 1) */
.hero .container,
.services > .container,
.badges-strip-wrap.container {
  max-width: min(1408px, calc(100% - 96px));
}
/* ...but the fixed 96px inset is a DESKTOP gutter. On a phone it eats ~27% of
   a 360px screen (leaving the hero only ~216px of usable width once its own
   24px padding is taken), which squeezed the layout and pushed the headline
   past the right edge where `overflow-x:hidden` silently clipped it. Below
   tablet, these behave like every other container. */
@media (max-width: 1024px) {
  .hero .container,
  .services > .container,
  .badges-strip-wrap.container {
    max-width: 100%;
  }
}

.icon { width: 1em; height: 1em; display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-filled { fill: currentColor; stroke: none; }

/* ---------- Mobile-only photo banner (above the hero) ----------
   Desktop keeps the hero's own background photo; this full-bleed 4:5 image
   is the first thing a phone visitor sees. Frosted translucent caption over
   the lower portion carries the hook line (city name on city pages). */
.mobile-banner { display: none; }
@media (max-width: 640px) {
  .mobile-banner {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--green-900);
  }
  .mobile-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
  }
  .mobile-banner__caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 8px 26px rgba(4, 17, 13, .22);
  }
  /* Fallback for browsers without backdrop-filter: a more opaque panel keeps
     the text readable instead of leaving it over a raw photo. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-banner__caption { background: rgba(255, 255, 255, .88); }
  }
  .mobile-banner__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green-800);
    margin-bottom: 3px;
  }
  .mobile-banner__line {
    display: block;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.18;
    color: var(--green-900);
    text-wrap: balance;
  }
}

/* ---------- Reveal-on-scroll ----------
   Plain hidden-by-default state only - no CSS transition/delay here. The
   actual reveal animation (opacity+translate, easing, stagger) is driven by
   Motion (js/main.js) so there is exactly one animation engine, not two
   competing ones. This CSS exists solely to prevent a flash-of-visible
   content before Motion's JS runs on first paint. */
.reveal { opacity: 0; }
/* Hero entrance elements (title/sub/actions) - animated on load, not scroll,
   but need the same pre-JS hidden state to avoid a flash of visible text
   before Motion's CDN script finishes loading. */
.hero-copy h1, .hero-sub, .hero-actions { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-copy h1, .hero-sub, .hero-actions { opacity: 1; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  cursor: pointer;
}
.btn .icon { width: 18px; height: 18px; }
.btn-lime {
  background: var(--lime);
  color: var(--green-900);
  box-shadow: var(--shadow-soft);
}
.btn-lime:hover { background: var(--lime-dark); transform: translateY(-1px); }
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: var(--lime);
}
.btn-outline-white:hover { background: rgba(255,255,255,.12); }
.btn-block { width: 100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  background: var(--white);
  border-top: 3px solid var(--green-900);
  border-bottom: 3px solid var(--green-900);
  position: relative;
  z-index: 30;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 8px;
}
.header-call {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-call .call-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green-900);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.header-call .call-icon .icon { width: 24px; height: 24px; stroke-width: 2; }
.header-call .call-text small {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--green-900);
  text-transform: uppercase;
}
.header-call .call-text strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  color: var(--green-900);
  letter-spacing: -.01em;
}
.header-logo { flex-shrink: 0; }
.header-logo img { height: 100px; width: auto; }
.header-cta.btn { min-height: 54px; min-width: 200px; padding: 0 26px; font-size: 14px; }

@media (max-width: 900px) {
  .header-call .call-text small { display: none; }
  .header-call .call-text strong { font-size: 18px; }
  .header-logo img { height: 56px; }
  .header-cta.btn { padding: 11px 16px; font-size: 12px; }
  .header-call .call-icon { width: 42px; height: 42px; }
}
@media (max-width: 560px) {
  .header-inner { padding-block: 10px; gap: 10px; }
  /* Logo art has the brand name baked into the image - at 42px that text was
     an illegible smudge. 54px keeps it readable and still fits alongside the
     phone + CTA now that the oversized container inset is gone on mobile. */
  .header-logo img { height: 54px; }
  .header-call .call-text strong { font-size: 17px; }
  .header-cta .btn-label { display: none; }
  .header-cta.btn { padding: 10px; width: 42px; height: 42px; min-width: 0; min-height: 0; }
  .header-cta.btn .icon { width: 20px; height: 20px; }
}
@media (max-width: 380px) {
  /* Very narrow: drop the phone digits from the header (the big Call Now
     button in the hero is directly below) so the logo stays legible. */
  .header-call .call-text { display: none; }
  .header-logo img { height: 50px; }
}

/* =========================================================
   TRUST BAR
   ========================================================= */
.trust-bar {
  background: var(--green-900);
  color: var(--white);
}
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding-block: 11px;
  min-height: 44px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.trust-item .icon { width: 20px; height: 20px; }
.trust-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,.5);
}
@media (max-width: 640px) {
  .trust-bar-inner { gap: 14px; padding-inline: 12px; }
  .trust-item { font-size: 12px; }
  .trust-sep { display: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  color: var(--white);
  padding-block: 56px 110px;
  overflow: hidden;
  /* SWAP-HERO-BG: real photo is live. Left-to-right dark evergreen scrim keeps the
     headline/checklist readable over the dark garage door + siding on the left third. */
  background: linear-gradient(90deg, rgba(4,17,13,.90) 0%, rgba(4,17,13,.62) 40%, rgba(4,17,13,.30) 68%, rgba(4,17,13,.14) 100%), url('../img/hero.webp') 58% center/cover no-repeat;
}
@media (max-width: 640px) {
  .hero {
    /* Mobile stacks full-width, unlike desktop's left-text/right-photo split -
       a horizontal scrim here darkened almost the whole photo instead of just
       a text-safe zone. Vertical scrim: dark enough behind the headline at
       top to stay readable, lighter toward the bottom so the photo actually
       reads as a photo (the explicit ask: "show a nice image on top"). */
    background: linear-gradient(180deg, rgba(4,17,13,.78) 0%, rgba(4,17,13,.55) 38%, rgba(4,17,13,.22) 75%, rgba(4,17,13,.30) 100%), url('../img/hero-900.webp') center/cover no-repeat;
  }
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px;
  align-items: start;
}
.hero-copy h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 3.34vw, 48px);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 18px;
}
.hero-copy h1 .lime { color: var(--lime); display: block; }
.hero-copy h1 span.line { display: block; }
.hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  margin-bottom: 26px;
  max-width: 520px;
}
.hero-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 12px 32px;
  margin-bottom: 32px;
  max-width: 560px;
}
.hero-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
}
.hero-checklist .check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--lime);
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-checklist .check .icon { width: 13px; height: 13px; stroke-width: 3; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.hero-actions .btn { min-height: 58px; padding: 0 30px; font-size: 16px; }
.hero-actions .btn-lime { min-width: 300px; }
.hero-actions .btn-outline-white { min-width: 230px; }

/* Form card (shared by hero + CTA band) */
.form-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 30px 32px 26px;
  box-shadow: var(--shadow-strip);
}
.form-card__heading {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  color: var(--green-900);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.form-card__sub {
  text-align: center;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 20px;
}
.form-card__sub .lime-text { color: var(--lime-dark); font-weight: 700; }
.form-card__sub .dark-text { font-weight: 500; }

.estimate-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field {
  width: 100%;
  min-height: 44px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-body);
  transition: border-color .15s ease;
}
.field::placeholder { color: #8A9A93; }
.field:focus { outline: none; border-color: var(--lime-dark); }
textarea.field { resize: vertical; min-height: 90px; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 38px; }

.form-submit {
  margin-top: 6px;
  min-height: 56px;
  padding: 16px;
  font-size: 16px;
}
.form-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.form-trust span { display: flex; align-items: center; gap: 7px; }
.form-trust .icon { width: 16px; height: 16px; color: var(--green-900); }
.form-trust-sep { width: 1px; height: 16px; background: var(--border-strong); }

/* Link from the short hero form down to the full appointment form */
.form-card__altlink {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.form-card__altlink a {
  color: var(--green-900);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-status { margin: 10px 0 0; font-size: 14px; font-weight: 600; text-align: center; min-height: 0; }
.form-status:empty { margin: 0; }
.form-status--success { color: var(--green-900); }
.form-status--error { color: #b3261e; }

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero { padding-bottom: 140px; }
}
/* ---- Mobile hero (must stay AFTER the .hero-* base rules above: an earlier
   attempt at these overrides was placed before them and lost the cascade at
   equal specificity, so it silently never applied at any width). 640px is the
   same boundary the mobile hero background uses. ---- */
@media (max-width: 640px) {
  /* Long labels ("New Garage Door Installation") wrapped to 3 uneven lines in
     the 2-column grid - single column reads cleanly at every phone width. */
  .hero-checklist {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
    gap: 11px;
    margin-bottom: 26px;
  }
  .hero-checklist li { font-size: 15px; }
  /* 5-line headline ate most of the first screen. The desktop markup forces
     line breaks via `span.line { display:block }`, which on a narrow screen
     compounds with natural wrapping into 5 ragged lines - let those spans
     reflow inline on mobile and balance instead. The lime accent line stays
     its own block. */
  .hero-copy h1 { font-size: 30px; line-height: 1.12; text-wrap: balance; }
  .hero-copy h1 span.line { display: inline; }
  .hero-copy h1 span.line + span.line::before { content: ' '; }
  .hero-sub { font-size: 16.5px; line-height: 1.5; margin-bottom: 20px; }
  .hero { padding-block: 36px 96px; }
}
@media (max-width: 560px) {
  .hero-copy h1 { font-size: 27px; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 24px 20px 22px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; min-width: 0; }
}

/* ---------- Badges strip (floats over hero bottom) ---------- */
.badges-strip-wrap {
  position: relative;
  z-index: 10;
  margin-top: -72px;
}
.badges-strip {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strip);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 108px;
}
.badge-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 36px;
  border-left: 1px solid var(--border);
}
.badge-item:first-child { border-left: none; }
.badge-score {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--lime);
  color: var(--green-900);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.badge-stars { display: flex; gap: 2px; margin-bottom: 4px; }
.badge-stars .icon { width: 14px; height: 14px; color: var(--lime); }
.badge-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.8px solid var(--lime-dark);
  color: var(--green-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.badge-icon .icon { width: 22px; height: 22px; stroke-width: 1.8; }
.badge-title { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.badge-sub { font-size: 13px; color: var(--muted); line-height: 1.35; }

@media (max-width: 900px) {
  /* 2x2 grid persists all the way down to real phone widths (only true
     legacy-narrow devices under 380px fall back to a single column) - a
     single stacked column of 4 tall rows ate a huge amount of scroll space
     for very little content on every real phone. */
  .badges-strip { grid-template-columns: 1fr 1fr; min-height: 0; }
  .badge-item {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    padding: 16px 16px;
    border-left: none !important;
  }
  .badge-item:nth-child(1), .badge-item:nth-child(2) { border-bottom: 1px solid var(--border); }
  .badge-item:nth-child(2), .badge-item:nth-child(4) { border-left: 1px solid var(--border) !important; }
  .badge-score, .badge-icon { width: 38px; height: 38px; }
  .badge-icon .icon { width: 19px; height: 19px; }
}
@media (max-width: 380px) {
  .badges-strip { grid-template-columns: 1fr; }
  .badge-item {
    flex-direction: row;
    align-items: center;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    border-left: none !important;
    border-top: 1px solid var(--border);
    border-bottom: none !important;
    padding: 16px 18px;
  }
  .badge-item:first-child { border-top: none; }
  .badges-strip-wrap { margin-top: -40px; }
}

/* =========================================================
   SERVICES STRIP
   ========================================================= */
.services {
  background: var(--band-light);
  padding-block: 96px 72px;
}
.section-heading-accent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--green-900);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 36px;
}
.section-heading-accent::before,
.section-heading-accent::after {
  content: '';
  height: 2px;
  width: 64px;
  background: var(--lime);
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .section-heading-accent { font-size: 16px; gap: 10px; }
  .section-heading-accent::before, .section-heading-accent::after { width: 28px; }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: stretch;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.service-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 12px;
}
.service-card .service-icon { width: 24px; height: 24px; color: var(--white); stroke-width: 1.5; }
.service-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.service-card p { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-bottom: 14px; }
.service-photo {
  display: block;
  width: 82%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin: auto auto 0;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--lime), var(--shadow-card);
}
.service-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1199px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ABOUT
   ========================================================= */
.about { padding-block: 88px; background: var(--white); }
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.about-copy { max-width: 700px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lime-dark);
  margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--lime); }
.about h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--green-900);
  margin-bottom: 18px;
  line-height: 1.2;
}
.about p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin-bottom: 16px; }
.about-actions { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.about-actions .btn { padding: 14px 24px; font-size: 14px; }
.btn-outline-green { background: transparent; color: var(--green-900); border-color: var(--green-900); }
.btn-outline-green:hover { background: var(--green-900); color: var(--white); }

.about-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.about-gallery .g-item { border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4/3; }
.about-gallery .g-item img { width: 100%; height: 100%; object-fit: cover; }
.about-gallery .g-item.g-tall { grid-row: span 2; aspect-ratio: auto; height: 100%; }

@media (max-width: 1024px) {
  .about-inner { grid-template-columns: 1fr; }
  .about-gallery { order: -1; }
}
@media (max-width: 560px) {
  .about-gallery { grid-template-columns: 1fr 1fr; }
  .about-gallery .g-item.g-tall { grid-row: span 2; aspect-ratio: 4/6; }
}

/* =========================================================
   WHY CHOOSE (dark green band)
   ========================================================= */
.why-choose {
  background: var(--green-900);
  color: var(--white);
  padding-block: 88px;
}
.why-choose .section-heading-accent { color: var(--white); }
.why-choose .section-heading-accent::before,
.why-choose .section-heading-accent::after { background: var(--lime); }
.why-choose h2.section-title {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 32px);
  margin-bottom: 44px;
  line-height: 1.3;
}
.why-choose h2.section-title .lime { color: var(--lime); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.why-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.why-card .why-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(161,224,38,.14);
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-card .why-icon .icon { width: 26px; height: 26px; }
.why-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--lime); }
.why-card p { font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.55; }
.why-choose .cta-center { text-align: center; }
.why-choose .cta-center .btn { padding: 16px 34px; }

@media (max-width: 1024px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  /* Same fix as .badges-strip above: 2-col persists to real phone widths
     instead of stacking 4 tall, padding-heavy cards into a long single
     column for very little text content. */
  .why-grid { gap: 12px; }
  .why-card { padding: 18px 16px; gap: 10px; }
  .why-card .why-icon { width: 38px; height: 38px; }
  .why-card .why-icon .icon { width: 21px; height: 21px; }
  .why-card h3 { font-size: 15px; }
  .why-card p { font-size: 13px; line-height: 1.45; }
}
@media (max-width: 380px) { .why-grid { grid-template-columns: 1fr; } }

/* =========================================================
   BRANDS
   ========================================================= */
.brands { padding-block: 72px; background: var(--white); text-align: center; }
.brands img { margin-inline: auto; max-width: 620px; width: 100%; height: auto; }

/* =========================================================
   CTA BAND (dark green, second form)
   ========================================================= */
.cta-band {
  background: var(--green-900);
  padding-block: 88px;
}
.cta-band-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.cta-band-copy h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 36px);
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 16px;
}
.cta-band-copy h2 .lime { color: var(--lime); }
.cta-band-copy p { color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.6; max-width: 460px; }
@media (max-width: 1024px) {
  .cta-band-inner { grid-template-columns: 1fr; }
  .cta-band-copy { text-align: center; }
  .cta-band-copy p { margin-inline: auto; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq { padding-block: 88px; background: var(--band-light); }
.faq-inner { max-width: 980px; margin-inline: auto; }
.faq h2.section-title {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--green-900);
  margin-bottom: 40px;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.faq-question .chevron { width: 20px; height: 20px; color: var(--green-900); transition: transform .25s ease; flex-shrink: 0; }
.faq-item.is-open .faq-question .chevron { transform: rotate(180deg); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.faq-answer > div { overflow: hidden; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer p { padding: 0 22px 20px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews { padding-block: 88px; background: var(--white); }
.reviews h2.section-title {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--green-900);
  margin-bottom: 44px;
}
.reviews h2.section-title .count { display: inline-block; }
.reviews-track-wrap { overflow: hidden; }
.reviews-track {
  display: flex;
  gap: 20px;
  transition: transform .5s ease;
}
.review-card {
  flex: 0 0 calc((100% - 40px) / 3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-stars { display: flex; gap: 3px; }
.review-stars .icon { width: 15px; height: 15px; color: var(--lime); }
.review-text { font-size: 14.5px; color: var(--ink); line-height: 1.6; flex-grow: 1; }
.review-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; margin-top: auto; border-top: 1px solid var(--border); }
.review-author strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.review-author span { display: block; font-size: 12.5px; color: var(--muted); }
.review-google { width: 22px; height: 22px; flex-shrink: 0; }

.reviews-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.reviews-dots button {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-strong); border: none; padding: 0;
  transition: background-color .2s ease, transform .2s ease;
}
.reviews-dots button.is-active { background: var(--lime-dark); transform: scale(1.2); }

@media (max-width: 1024px) {
  .review-card { flex: 0 0 calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
  .review-card { flex: 0 0 100%; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--band-light); }
.footer-top { padding-block: 56px; }
.footer-top-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.footer-logo img { height: 68px; width: auto; }
.footer-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-actions .btn { padding: 13px 22px; font-size: 14px; }
.footer-payments { text-align: center; }
.footer-payments h6 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.payment-marks { display: flex; gap: 10px; justify-content: center; }
.payment-marks .icon-card { width: 54px; height: 36px; }

.footer-legal {
  background: var(--green-900);
  color: rgba(255,255,255,.82);
  padding-block: 20px;
}
.footer-legal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .footer-top-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 560px) {
  .footer-actions { flex-direction: column; width: 100%; }
  .footer-actions .btn { width: 100%; }
}

/* =========================================================
   Count-up target (used by JS)
   ========================================================= */
[data-count-target] { font-variant-numeric: tabular-nums; }

/* =========================================================
   CITY SERVICE AREA + MAP (city landing pages only)
   ========================================================= */
.city-area { background: var(--white); padding-block: 84px; }
.city-area-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
  margin-top: 32px;
}
.city-area-copy h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.15;
  color: var(--green-900);
  margin: 6px 0 16px;
}
.city-area-copy p { color: var(--muted); line-height: 1.65; margin-bottom: 14px; }
.city-area-sub { font-weight: 700; color: var(--ink) !important; margin-bottom: 10px !important; }
.city-area-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.city-area-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.city-area-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--lime);
}
.city-area-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background: var(--band-light);
}
.city-area-map__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 2px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.city-area-map__note .icon { width: 16px; height: 16px; color: var(--green-900); flex-shrink: 0; margin-top: 2px; }

@media (max-width: 900px) {
  .city-area-grid { grid-template-columns: 1fr; gap: 30px; }
  .city-area-map iframe { height: 320px; }
}
@media (max-width: 640px) {
  .city-area { padding-block: 56px; }
  .city-area-copy h3 { font-size: 24px; }
  .city-area-map iframe { height: 280px; }
  .city-area-list { grid-template-columns: 1fr; }
}

/* =========================================================
   STICKY MOBILE CALL BAR (mobile only, every page)
   Always-reachable CTA + phone. Hidden on desktop, where the
   header phone number is already permanently visible.
   ========================================================= */
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--green-900);
    border-top: 2px solid var(--lime);
    box-shadow: 0 -6px 22px rgba(4, 17, 13, .28);
  }
  .sticky-cta__copy { min-width: 0; }
  .sticky-cta__line {
    display: block;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 13.5px;
    line-height: 1.2;
    color: var(--white);
  }
  .sticky-cta__sub {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--lime);
    margin-top: 2px;
  }
  .sticky-cta__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lime);
    color: var(--green-900);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 15px;
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    min-height: 46px;           /* comfortable tap target */
    white-space: nowrap;
  }
  .sticky-cta__btn .icon { width: 18px; height: 18px; }

  /* Keep the fixed bar from covering the end of the page content. */
  body { padding-bottom: 74px; }
}

/* =========================================================
   FORM SUCCESS PANEL
   Replaces the form card after a successful submit, so it is
   obvious something happened and the customer has an
   immediate next step (call) rather than a stale filled form.
   ========================================================= */
.form-success { text-align: center; padding: 6px 2px 2px; }
.form-success__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--green-900);
  margin-bottom: 14px;
}
.form-success__check .icon { width: 28px; height: 28px; stroke-width: 3; }
.form-success__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  color: var(--green-900);
  margin-bottom: 8px;
}
.form-success__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 10px;
}
.form-success__text--muted { font-size: 13.5px; margin-bottom: 18px; }
.form-success .btn { min-height: 52px; }