/*
 * AP Site - Gutters Edition — Master Design System v1.1
 * glacier-air-child / GeneratePress (free)
 *
 * ARCHITECTURE PRINCIPLE
 * ─────────────────────────────────────────────
 * Every shared element is defined ONCE here.
 * Pages use these classes — they never redefine them.
 * To restyle something sitewide, change it here.
 * To restyle one instance, add a modifier class.
 *
 * TABLE OF CONTENTS
 * ─────────────────────────────────────────────
 *  0.  CSS Custom Properties (Design Tokens)
 *  1.  Reset & Base
 *  2.  Typography Scale
 *  3.  Layout Utilities  (.ga-wrap, .ga-section, .ga-section-light, etc.)
 *  4.  Button System     (.ga-btn-*)
 *  5.  Card System       (.ga-card-*)
 *  6.  List System       (.ga-checklist, .ga-icon-list)
 *  7.  Badge & Chip System
 *  8.  ── SHARED HOOKS (used across multiple pages) ──
 *      8a. Page Hero      (.ga-page-hero)
 *      8b. Section Header (.ga-section-header)
 *      8c. Sidebar CTA    (.ga-sidebar-cta)
 *      8d. CTA Strip      (.ga-cta-strip)
 *      8e. Trust Pills    (.ga-trust-pill-row)
 *      8f. Placeholder Images (.ga-img-placeholder)
 *  9.  Form System        (.ga-form, .ga-form-field, etc.)
 * 10.  GeneratePress Overrides
 * 11.  Header & Navigation
 * 12.  Homepage Hero      (.ga-hero)
 * 13.  Trust Bar          (.ga-trust-bar)
 * 14.  Services Grid      (.ga-services)
 * 15.  Process Section    (.ga-process)
 * 16.  Why Us Section     (.ga-why)
 * 17.  Booking Section    (.ga-booking)
 * 18.  Reviews Section    (.ga-reviews)
 * 19.  Service Areas      (.ga-areas)
 * 20.  Footer             (.ga-footer)
 * 21.  Floating Bar       (#gaFloatingBar)
 * 22.  Service Page Layout (.ga-service-layout)
 * 23.  Membership Cards   (.ga-membership)
 * 24.  FAQ Accordion      (.ga-faq)
 * 25.  Animations
 * 26.  Responsive Breakpoints
 * 27.  Print
 * 28.  v970 Components
 *      28a. Callout Block     (.ga-callout)
 *      28b. Proof Stats Row   (.ga-proof-stats)
 *      28c. Review Wall       (.ga-review-wall)
 *      28d. County Services   (.ga-county-services)
 *      28e. City List         (.ga-city-list / .ga-city-tag)
 *      28f. Promo Card        (.ga-promo-card / .ga-promo-grid)
 *      28g. Inline CTA        (.ga-inline-cta)
 *      28h. Image Slots       (.ga-img-county, .ga-img-team, .ga-img-promo)
 * ─────────────────────────────────────────────
 */


/* ============================================================
   0. CSS CUSTOM PROPERTIES
   Change brand here → everything updates automatically.
   ============================================================ */
:root {
  /* Brand Colors */
  --ga-primary:       #0077B6;
  --ga-primary-dark:  #005F92;
  --ga-navy:          #023E8A;
  --ga-navy-dark:     #03045E;
  --ga-teal:          #00B4D8;
  --ga-teal-light:    #90E0EF;
  --ga-accent:        #FF6B35;
  --ga-accent-dark:   #E55A26;
  --ga-green:         #2DC653;
  --ga-white:         #ffffff;
  --ga-off-white:     #F0F8FF;
  --ga-light-gray:    #F4F7FA;
  --ga-border:        #E2EBF3;
  --ga-text:          #1A1A2E;
  --ga-text-muted:    #5A6B7A;
  --ga-text-light:    #8899AA;

  /* Gradients */
  --ga-gradient-hero:    linear-gradient(105deg, rgba(2,62,138,.95) 0%, rgba(3,4,94,.88) 40%, rgba(3,4,94,.65) 75%, rgba(0,60,130,.40) 100%);
  --ga-gradient-primary: linear-gradient(135deg, #0077B6 0%, #023E8A 100%);
  --ga-gradient-accent:  linear-gradient(135deg, #FF6B35 0%, #E55A26 100%);
  --ga-gradient-dark:    linear-gradient(135deg, #03045E 0%, #023E8A 100%);
  --ga-gradient-ice:     linear-gradient(180deg, #F0F8FF 0%, #ffffff 100%);

  /* Typography — system font stack = zero HTTP requests */
  --ga-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

  /* Font Sizes */
  --ga-text-xs:   .75rem;
  --ga-text-sm:   .875rem;
  --ga-text-base: 1rem;
  --ga-text-lg:   1.125rem;
  --ga-text-xl:   1.25rem;
  --ga-text-2xl:  1.5rem;
  --ga-text-3xl:  1.875rem;
  --ga-text-4xl:  2.25rem;
  --ga-text-5xl:  3rem;
  --ga-text-6xl:  3.75rem;

  /* Spacing */
  --ga-space-1:  .25rem;
  --ga-space-2:  .5rem;
  --ga-space-3:  .75rem;
  --ga-space-4:  1rem;
  --ga-space-5:  1.25rem;
  --ga-space-6:  1.5rem;
  --ga-space-8:  2rem;
  --ga-space-10: 2.5rem;
  --ga-space-12: 3rem;
  --ga-space-16: 4rem;
  --ga-space-20: 5rem;

  /* Border Radius */
  --ga-radius-sm:   6px;
  --ga-radius-md:   10px;
  --ga-radius-lg:   14px;
  --ga-radius-xl:   18px;
  --ga-radius-2xl:  24px;
  --ga-radius-pill: 999px;

  /* Shadows */
  --ga-shadow-sm:      0 1px 3px rgba(2,62,138,.08), 0 1px 2px rgba(0,0,0,.06);
  --ga-shadow-md:      0 4px 16px rgba(2,62,138,.10), 0 2px 4px rgba(0,0,0,.06);
  --ga-shadow-lg:      0 10px 32px rgba(2,62,138,.14), 0 4px 8px rgba(0,0,0,.06);
  --ga-shadow-xl:      0 20px 60px rgba(2,62,138,.18), 0 8px 16px rgba(0,0,0,.08);
  --ga-shadow-accent:  0 8px 24px rgba(255,107,53,.35);
  --ga-shadow-primary: 0 8px 24px rgba(0,119,182,.35);

  /* Transitions */
  --ga-transition:      all .25s ease;
  --ga-transition-fast: all .15s ease;

  /* Layout */
  --ga-max-width:      1160px;
  --ga-max-width-text: 760px;
  --ga-header-height:  88px;  /* 72px logo + 8px top/bottom padding each side */

  /* Image placeholder */
  --ga-placeholder-bg:      #D6E8F5;
  --ga-placeholder-text:    #4A7FA5;
  --ga-placeholder-border:  #A8C8E0;
}


/* ============================================================
   1. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  /* scroll-behavior intentionally omitted — all scrolling handled by floating-bar.js
     with proper header/bar offset. Native anchor jumps bypass the offset calculation
     and cause auto-scroll on desktop when #ga-book-form is in the URL. */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ga-font);
  color: var(--ga-text);
  background: var(--ga-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Push content above the fixed floating bar on mobile */
@media (max-width: 900px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Skip to main content — keyboard / screen reader accessibility (WCAG 2.4.1) ──
   Hidden off-screen, becomes visible when focused via Tab key.                     */
.ga-skip-link {
  position: absolute;
  top: -120px; left: 1rem;
  background: var(--ga-teal);
  color: var(--ga-navy-dark);
  padding: 10px 20px;
  border-radius: 0 0 6px 6px;
  font-size: .875rem; font-weight: 700;
  text-decoration: none;
  z-index: 99999;
  transition: top .15s ease;
}
.ga-skip-link:focus { top: 0; }

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

a { color: var(--ga-primary); transition: var(--ga-transition-fast); text-decoration: none; }
a:hover { color: var(--ga-primary-dark); }

p { margin: 0 0 var(--ga-space-4); line-height: 1.65; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: var(--ga-space-5); }

/* Offset for sticky header on anchor jumps */
[id] { scroll-margin-top: calc(var(--ga-header-height) + 16px); }


/* ============================================================
   2. TYPOGRAPHY SCALE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ga-font);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ga-text);
  margin: 0 0 var(--ga-space-4);
}

h1 { font-size: clamp(2rem,    5vw,   var(--ga-text-5xl)); }
h2 { font-size: clamp(1.5rem,  3.5vw, var(--ga-text-4xl)); }
h3 { font-size: clamp(1.125rem,2.5vw, var(--ga-text-2xl)); }
h4 { font-size: var(--ga-text-xl); }
h5 { font-size: var(--ga-text-lg); }
h6 { font-size: var(--ga-text-base); }

.ga-eyebrow {
  display: inline-block;
  font-size: var(--ga-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ga-primary);
  margin-bottom: var(--ga-space-3);
}

.ga-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-space-2);
  background: rgba(0,119,182,.10);
  border: 1px solid rgba(0,119,182,.22);
  border-radius: var(--ga-radius-pill);
  padding: 5px 14px;
  font-size: var(--ga-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ga-navy);
  margin-bottom: var(--ga-space-4);
}

.ga-eyebrow-pill-accent {
  background: rgba(255,107,53,.10);
  border-color: rgba(255,107,53,.25);
  color: var(--ga-accent);
}


/* ============================================================
   3. LAYOUT UTILITIES
   ============================================================ */
.ga-wrap {
  max-width: var(--ga-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ga-space-5);
  padding-right: var(--ga-space-5);
  width: 100%;
}

.ga-wrap-text {
  max-width: var(--ga-max-width-text);
  margin-left: auto;
  margin-right: auto;
}

.ga-section    { padding-top: var(--ga-space-20); padding-bottom: var(--ga-space-20); }
.ga-section-sm { padding-top: var(--ga-space-12); padding-bottom: var(--ga-space-12); }
.ga-section-lg { padding-top: calc(var(--ga-space-20) * 1.5); padding-bottom: calc(var(--ga-space-20) * 1.5); }

/* Section background modifiers — alternate these for visual rhythm */
.ga-section-light { background: var(--ga-light-gray); }
.ga-section-off   { background: var(--ga-off-white); }
.ga-section-white { background: var(--ga-white); }

.ga-text-center  { text-align: center; }
.ga-text-white   { color: var(--ga-white); }
.ga-text-muted   { color: var(--ga-text-muted); }
.ga-text-primary { color: var(--ga-primary); }
.ga-text-accent  { color: var(--ga-accent); }
.ga-text-navy    { color: var(--ga-navy); }

.ga-bg-white   { background: var(--ga-white); }
.ga-bg-off     { background: var(--ga-off-white); }
.ga-bg-navy    { background: var(--ga-gradient-dark); color: var(--ga-white); }
.ga-bg-primary { background: var(--ga-gradient-primary); color: var(--ga-white); }
.ga-bg-accent  { background: var(--ga-gradient-accent); color: var(--ga-white); }


/* ============================================================
   4. BUTTON SYSTEM
   All button variants defined once. Used everywhere.
   ============================================================ */
.ga-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ga-space-2);
  padding: 14px 28px;
  border-radius: var(--ga-radius-md);
  font-size: var(--ga-text-base);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--ga-transition);
  white-space: nowrap;
  font-family: var(--ga-font);
  -webkit-tap-highlight-color: transparent;
}
.ga-btn:focus-visible {
  outline: 3px solid rgba(0,119,182,.5);
  outline-offset: 3px;
}

/* Primary — ice blue */
.ga-btn-primary {
  background: var(--ga-gradient-primary);
  color: var(--ga-white);
  box-shadow: var(--ga-shadow-primary);
}
.ga-btn-primary:hover {
  background: var(--ga-primary-dark);
  color: var(--ga-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,119,182,.45);
}

/* Accent — orange, emergency/urgent */
.ga-btn-accent {
  background: var(--ga-gradient-accent);
  color: var(--ga-white);
  box-shadow: var(--ga-shadow-accent);
}
.ga-btn-accent:hover {
  background: var(--ga-accent-dark);
  color: var(--ga-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255,107,53,.50);
}

/* Outline white — on dark backgrounds */
.ga-btn-outline {
  background: transparent;
  color: var(--ga-white);
  border-color: rgba(255,255,255,.40);
}
.ga-btn-outline:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.70);
  color: var(--ga-white);
}

/* Outline dark — on light backgrounds */
.ga-btn-outline-dark {
  background: transparent;
  color: var(--ga-navy);
  border-color: var(--ga-border);
}
.ga-btn-outline-dark:hover {
  background: var(--ga-navy);
  color: var(--ga-white);
  border-color: var(--ga-navy);
}

/* Sizes */
.ga-btn-lg { padding: 18px 36px; font-size: var(--ga-text-lg); border-radius: var(--ga-radius-lg); }
.ga-btn-sm { padding: 10px 20px; font-size: var(--ga-text-sm); }
.ga-btn-full { width: 100%; justify-content: center; }

/* Stack — vertical button group */
.ga-btn-stack { display: flex; flex-direction: column; gap: var(--ga-space-3); }

/* Touch — no hover lift on touchscreens */
@media (hover: none) and (pointer: coarse) {
  .ga-btn:hover { transform: none; }
  .ga-btn:active { transform: scale(.98); }
}


/* ============================================================
   5. CARD SYSTEM
   Base card — shared by service cards, process cards, etc.
   ============================================================ */
.ga-card {
  background: var(--ga-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-xl);
  box-shadow: var(--ga-shadow-md);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ga-card:hover { transform: translateY(-5px); box-shadow: var(--ga-shadow-xl); }

@media (hover: none) and (pointer: coarse) {
  .ga-card:hover { transform: none; }
  .ga-card:active { transform: scale(.98); }
}


/* ============================================================
   6. LIST SYSTEM
   Checklist and icon list — used in sidebars, why-us, service pages
   ============================================================ */
.ga-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-3);
}
.ga-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--ga-space-3);
  font-size: var(--ga-text-sm);
  line-height: 1.55;
}
.ga-checklist li::before {
  content: '\2713';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: rgba(45,198,83,.15);
  color: var(--ga-green);
  border-radius: var(--ga-radius-sm);
  font-size: 12px;
  font-weight: 900;
  margin-top: 1px;
}

/* White variant — on dark backgrounds */
.ga-checklist-white li { color: rgba(255,255,255,.90); }
.ga-checklist-white li::before {
  background: rgba(255,255,255,.15);
  color: var(--ga-teal-light);
}


/* ============================================================
   7. BADGE & CHIP SYSTEM
   ============================================================ */
.ga-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--ga-radius-sm);
  font-size: var(--ga-text-xs);
  font-weight: 600;
  background: var(--ga-light-gray);
  color: var(--ga-text-muted);
}
.ga-chip-primary { background: rgba(0,119,182,.10); color: var(--ga-primary); }
.ga-chip-accent  { background: rgba(255,107,53,.10); color: var(--ga-accent); }
.ga-chip-teal    { background: rgba(0,180,216,.12); color: #007A94; }
.ga-chip-green   { background: rgba(45,198,83,.12); color: #1A8F3C; }

.ga-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ga-white);
  animation: ga-pulse 1.5s ease-in-out infinite;
}
@keyframes ga-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}

.ga-emergency-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ga-gradient-accent);
  color: var(--ga-white);
  padding: 10px 20px;
  border-radius: var(--ga-radius-pill);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: var(--ga-shadow-accent);
  width: fit-content;
  max-width: 100%;        /* never overflow its container on mobile */
  white-space: nowrap;    /* single line always */
  margin-bottom: var(--ga-space-3);
}
/* Pulse dot inside emergency badge */
.ga-pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
  flex-shrink: 0;
  animation: ga-pulse-dot 2s ease-in-out infinite;
}
@keyframes ga-pulse-dot {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
  50%      { box-shadow: 0 0 0 6px rgba(255,255,255,.08); }
}


/* ============================================================
   8a. SHARED HOOK — PAGE HERO
   Used on: Services hub, all 6 service pages, Reviews page.
   Homepage has its own full .ga-hero (section 12).
   Modifier classes override per-page background image only.
   ============================================================ */
.ga-page-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  background: var(--ga-navy-dark);
  overflow: hidden;
}

/* Background image set via inline style per page */
.ga-page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
}

.ga-page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(2,62,138,.92) 0%, rgba(3,4,94,.85) 100%);
}

/* Bottom accent line — same on every inner page */
.ga-page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ga-teal), var(--ga-primary), var(--ga-teal));
}

.ga-page-hero-inner {
  position: relative;
  z-index: 2;
  padding: var(--ga-space-16) 0;
}
@media (max-width: 640px) {
  .ga-page-hero-inner { padding: var(--ga-space-12) 0 var(--ga-space-10); }
}

/* Service badge — "Gutter Service", "Repair Service", etc. */
.ga-page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,180,216,.20);
  border: 1px solid rgba(0,180,216,.35);
  border-radius: var(--ga-radius-pill);
  padding: 8px 18px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ga-teal-light);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--ga-space-4);
  white-space: nowrap;
  max-width: 100%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Emergency badge modifier — accent orange */
.ga-page-hero-badge-emergency {
  background: rgba(255,107,53,.20);
  border-color: rgba(255,107,53,.35);
  color: #FFB49A;
}

.ga-page-hero h1 {
  color: var(--ga-white);
  font-size: clamp(1.75rem, 4vw, var(--ga-text-5xl));
  margin-bottom: var(--ga-space-4);
  max-width: 700px;
}

.ga-page-hero p {
  font-size: var(--ga-text-lg);
  color: rgba(255,255,255,.80);
  max-width: 580px;
  margin-bottom: var(--ga-space-8);
}

/* Hero CTA row — inline buttons */
.ga-page-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-3);
  align-items: center;
}


/* ============================================================
   8a-ii. PAGE HERO — TEXT-ONLY VARIANT (.ga-page-hero-no-img)
   Used by /service-areas/ and /reviews/.
   No background image, no overlay div — rich brand-navy hero.
   ============================================================ */
.ga-page-hero-no-img {
  min-height: 0;
  background: linear-gradient(125deg, var(--ga-navy-dark) 0%, #012A6B 55%, #014E8A 100%);
}
.ga-page-hero-no-img .ga-page-hero-inner {
  padding: var(--ga-space-20) 0 var(--ga-space-16);
}
.ga-page-hero-no-img h1 {
  font-size: clamp(2rem, 5vw, var(--ga-text-5xl));
  max-width: 680px;
  line-height: 1.15;
}
.ga-page-hero-no-img p {
  font-size: var(--ga-text-lg);
  max-width: 560px;
  color: rgba(255,255,255,.80);
  margin-bottom: var(--ga-space-8);
}

/* ── Split hero: two-column layout for Services + Service Areas pages ── */
.ga-page-hero-split .ga-page-hero-inner {
  padding: var(--ga-space-20) 0 var(--ga-space-16);
}
.ga-page-hero-split-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--ga-space-12);
  align-items: center;
}
.ga-page-hero-split-content {
  display: flex;
  flex-direction: column;
}
/* In split mode h1 has no max-width constraint — left col handles it */
.ga-page-hero-split .ga-page-hero-split-content h1 {
  max-width: none;
}
.ga-page-hero-split-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ga-img-hero-split {
  width: 100%;
  aspect-ratio: 680 / 520;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
}
@media (max-width: 900px) {
  .ga-page-hero-split-grid {
    grid-template-columns: 1fr;
  }
  .ga-page-hero-split-media {
    display: block;
    max-width: 480px;
    margin: 0 auto;
  }
  .ga-img-hero-split {
    aspect-ratio: 16 / 9;
  }
  .ga-page-hero-split .ga-page-hero-inner {
    padding: var(--ga-space-10) 0 var(--ga-space-10);
  }
}
@media (max-width: 540px) {
  .ga-page-hero-split-media {
    max-width: 100%;
  }
}

/* Service-areas specific hero modifier — adds location pin accent */
.ga-page-hero-areas {
  position: relative;
  overflow: hidden;
}
.ga-page-hero-areas::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,216,.18) 0%, transparent 70%);
  pointer-events: none;
}
.ga-page-hero-areas::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ga-teal), var(--ga-primary), var(--ga-teal));
}
.ga-page-hero-areas .ga-page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--ga-space-5);
}
.ga-page-hero-areas .ga-page-hero-cta {
  margin-bottom: var(--ga-space-6);
}
.ga-page-hero-areas .ga-page-hero-cta .ga-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 640px) {
  .ga-page-hero-no-img .ga-page-hero-inner {
    padding: var(--ga-space-12) 0 var(--ga-space-10);
  }
  .ga-page-hero-no-img h1 {
    font-size: clamp(1.6rem, 6vw, 2.25rem);
  }
}

/* ============================================================
   8a-iii. SERVICE AREAS HIERARCHY SECTION
   Primary county highlighted first, full depth on all counties.
   Token: %service_areas_hierarchy% — always live, never baked.
   ============================================================ */
.ga-sa-hierarchy {
  background: var(--ga-off-white);
  padding: var(--ga-space-16) 0 var(--ga-space-20);
}

/* ── Primary county block ── */
.ga-sa-hierarchy-primary {
  background: var(--ga-white);
  border-radius: 16px;
  border: 1px solid var(--ga-border);
  overflow: hidden;
  margin-bottom: var(--ga-space-12);
  box-shadow: 0 4px 24px rgba(2,62,138,.07);
}
/* Dark header strip — matches ga-svc-hub-emergency aesthetic */
.ga-sa-primary-header {
  display: flex;
  align-items: center;
  gap: var(--ga-space-4);
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--ga-navy-dark) 0%, #012A6B 100%);
  padding: var(--ga-space-5) var(--ga-space-8);
  border-bottom: none;
  margin-bottom: 0;
}
.ga-sa-primary-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--ga-teal-light);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--ga-radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.ga-sa-primary-county-name {
  font-size: clamp(1.25rem, 3vw, var(--ga-text-2xl));
  font-weight: 900;
  color: var(--ga-white);
  margin: 0;
  letter-spacing: -.01em;
}
.ga-sa-primary-county-name a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ga-sa-primary-county-name a::after {
  content: '↗';
  font-size: .65em;
  opacity: .5;
  font-weight: 700;
}
.ga-sa-primary-county-name a:hover { color: var(--ga-teal-light); }
.ga-sa-primary-county-name a:hover::after { opacity: 1; }

/* City grid inside the primary card */
.ga-sa-cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ga-space-4);
  padding: var(--ga-space-6) var(--ga-space-8) var(--ga-space-8);
}
/* City card — matches ga-svc-hub-card style */
.ga-sa-city-card {
  background: var(--ga-light-gray);
  border-radius: 12px;
  border: 1px solid var(--ga-border);
  padding: var(--ga-space-5);
  min-height: 90px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.ga-sa-city-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ga-gradient-primary);
  opacity: 0;
  transition: opacity .18s;
}
.ga-sa-city-card:hover {
  box-shadow: 0 8px 24px rgba(0,119,182,.14);
  transform: translateY(-2px);
  border-color: rgba(0,119,182,.25);
  background: var(--ga-white);
}
.ga-sa-city-card:hover::before { opacity: 1; }
.ga-sa-city-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ga-text-base);
  font-weight: 800;
  color: var(--ga-navy-dark);
  text-decoration: none;
  margin-bottom: var(--ga-space-3);
  line-height: 1.2;
}
.ga-sa-city-name::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ga-primary);
  flex-shrink: 0;
  transition: background .15s;
}
.ga-sa-city-name:hover { color: var(--ga-primary); }
.ga-sa-nbhd-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ga-text-muted);
  margin-bottom: var(--ga-space-2);
  display: block;
}
.ga-sa-nbhd-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}
.ga-sa-nbhd-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--ga-primary-dark);
  background: rgba(0,119,182,.10);
  border: 1px solid rgba(0,119,182,.15);
  border-radius: var(--ga-radius-pill);
  padding: 3px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.ga-sa-nbhd-pill:hover {
  background: var(--ga-primary);
  border-color: var(--ga-primary);
  color: var(--ga-white);
}
/* City-only card (no neighborhoods) — show a "View Area" prompt */
.ga-sa-city-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ga-primary);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--ga-space-2);
  opacity: .7;
  transition: opacity .15s, gap .15s;
}
.ga-sa-city-card:hover .ga-sa-city-card-link { opacity: 1; gap: 7px; }

/* ── Secondary counties ── */
.ga-sa-secondary-header {
  display: flex;
  align-items: center;
  gap: var(--ga-space-4);
  margin-bottom: var(--ga-space-8);
}
.ga-sa-secondary-divider-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ga-text-muted);
  white-space: nowrap;
  background: var(--ga-off-white);
  padding: 0 var(--ga-space-3);
}
.ga-sa-secondary-divider-line {
  flex: 1;
  height: 1px;
  background: var(--ga-border);
}
.ga-sa-secondary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ga-space-5);
}
.ga-sa-secondary-card {
  background: var(--ga-white);
  border-radius: 12px;
  border: 1px solid var(--ga-border);
  padding: var(--ga-space-5) var(--ga-space-6);
  transition: box-shadow .18s;
}
.ga-sa-secondary-card:hover {
  box-shadow: 0 4px 16px rgba(2,62,138,.08);
}
.ga-sa-secondary-county-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--ga-text-sm);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ga-navy-dark);
  text-decoration: none;
  margin-bottom: var(--ga-space-4);
  padding-bottom: var(--ga-space-3);
  border-bottom: 2px solid var(--ga-border);
}
.ga-sa-secondary-county-name span {
  font-size: 10px;
  font-weight: 600;
  color: var(--ga-primary);
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
  transition: opacity .15s;
}
.ga-sa-secondary-county-name:hover { color: var(--ga-primary); }
.ga-sa-secondary-county-name:hover span { opacity: 1; }
.ga-sa-secondary-city-block {
  margin-bottom: var(--ga-space-4);
  padding-bottom: var(--ga-space-3);
  border-bottom: 1px solid var(--ga-light-gray);
}
.ga-sa-secondary-city-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.ga-sa-secondary-city-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ga-navy-dark);
  text-decoration: none;
  margin-bottom: 6px;
}
.ga-sa-secondary-city-name::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ga-teal);
  flex-shrink: 0;
}
.ga-sa-secondary-city-name:hover { color: var(--ga-primary); }
.ga-sa-secondary-nbhd-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ga-sa-secondary-nbhd-pill {
  font-size: 10px;
  font-weight: 600;
  color: var(--ga-text-muted);
  background: var(--ga-light-gray);
  border-radius: var(--ga-radius-pill);
  padding: 2px 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.ga-sa-secondary-nbhd-pill:hover {
  background: var(--ga-primary);
  color: var(--ga-white);
}
@media (max-width: 768px) {
  .ga-sa-hierarchy-primary {
    padding: var(--ga-space-6);
  }
  .ga-sa-cities-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--ga-space-3);
  }
  .ga-sa-secondary-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .ga-sa-cities-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   8b. SHARED HOOK — SECTION HEADER
   Used on every section on every page.
   ============================================================ */
.ga-section-header {
  text-align: center;
  margin-bottom: var(--ga-space-12);
}
.ga-section-header h2 { margin-bottom: var(--ga-space-3); }
.ga-section-subtitle {
  font-size: var(--ga-text-lg);
  color: var(--ga-text-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Left-aligned variant — service page content */
.ga-section-header-left { text-align: left; }
.ga-section-header-left .ga-section-subtitle { margin: 0; }

/* On dark backgrounds */
.ga-section-header-white h2,
.ga-section-header-white .ga-section-subtitle { color: var(--ga-white); }
.ga-section-header-white .ga-eyebrow-pill { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); color: var(--ga-teal-light); }


/* ============================================================
   8c. SHARED HOOK — SIDEBAR CTA CARD
   Used identically on all 6 service pages.
   Define once here, never repeat.
   ============================================================ */
.ga-sidebar-cta {
  background: var(--ga-gradient-dark);
  border-radius: var(--ga-radius-xl);
  padding: var(--ga-space-6);
  color: var(--ga-white);
  box-shadow: var(--ga-shadow-lg);
}
.ga-sidebar-cta h4 {
  font-size: var(--ga-text-xl);
  color: var(--ga-white);
  margin-bottom: var(--ga-space-3);
}
.ga-sidebar-cta p {
  font-size: var(--ga-text-sm);
  color: rgba(255,255,255,.75);
  margin-bottom: var(--ga-space-5);
  line-height: 1.6;
}

/* Emergency modifier — orange */
.ga-sidebar-cta-emergency {
  background: var(--ga-gradient-accent);
  box-shadow: var(--ga-shadow-accent);
}

/* Stacked buttons inside sidebar CTA — auto gap */
.ga-sidebar-cta .ga-btn + .ga-btn {
  margin-top: var(--ga-space-2);
}

/* Info card variant — white card in sidebar */
.ga-sidebar-info {
  background: var(--ga-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-xl);
  padding: var(--ga-space-6);
  box-shadow: var(--ga-shadow-md);
}
.ga-sidebar-info h4 {
  font-size: var(--ga-text-base);
  color: var(--ga-navy);
  margin-bottom: var(--ga-space-4);
}

/* Phone card — orange phone number display */
.ga-sidebar-phone {
  background: var(--ga-gradient-dark);
  border-radius: var(--ga-radius-xl);
  padding: var(--ga-space-6);
  text-align: center;
  box-shadow: 0 8px 32px rgba(2,62,138,.30);
  position: relative;
  overflow: hidden;
}
/* Teal bottom accent strip */
.ga-sidebar-phone::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ga-teal), var(--ga-accent));
}
.ga-sidebar-phone-label {
  font-size: var(--ga-text-xs);
  color: rgba(255,255,255,.70);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--ga-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ga-space-2);
}
/* Phone icon before label via pseudo */
.ga-sidebar-phone-label::before {
  content: '\1F4DE';
  font-size: .9rem;
  line-height: 1;
}
.ga-sidebar-phone-number {
  display: block;
  font-size: var(--ga-text-3xl);
  font-weight: 900;
  color: var(--ga-white);
  text-decoration: none;
  letter-spacing: -.03em;
  margin-bottom: var(--ga-space-2);
  line-height: 1.05;
  transition: opacity var(--ga-transition-fast);
}
.ga-sidebar-phone-number:hover { opacity: .85; }
.ga-sidebar-phone-hours {
  font-size: var(--ga-text-xs);
  color: rgba(255,255,255,.55);
  font-style: italic;
}


/* ============================================================
   8d. SHARED HOOK — CTA STRIP
   Bottom-of-page CTA band. Used on every page.
   ============================================================ */
.ga-cta-strip {
  position: relative;
  overflow: hidden;
}

/* Navy + teal gradient default */
.ga-cta-strip-navy {
  background: var(--ga-gradient-dark);
}

/* Split — navy left / accent right */
.ga-cta-strip-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ga-cta-strip-split-left  { background: var(--ga-navy-dark); padding: var(--ga-space-16) var(--ga-space-10); }
.ga-cta-strip-split-right { background: var(--ga-gradient-accent); padding: var(--ga-space-16) var(--ga-space-10); }

.ga-cta-strip-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ga-space-6);
  padding: var(--ga-space-16) 0;
}

.ga-cta-strip-text h2 { color: var(--ga-white); margin-bottom: var(--ga-space-3); }
.ga-cta-strip-text p  { color: rgba(255,255,255,.80); font-size: var(--ga-text-lg); margin: 0; }

.ga-cta-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-3);
  align-items: center;
  flex-shrink: 0;
}


/* ============================================================
   8e. SHARED HOOK — TRUST PILL ROW
   Used in hero, service page heroes, CTA sections.
   ============================================================ */
.ga-trust-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-2);
  margin-top: var(--ga-space-5);
}
.ga-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--ga-radius-pill);
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Light background variant — use in sidebar and light sections */
.ga-trust-pill-row-light .ga-trust-pill {
  background: rgba(0,119,182,.08);
  border-color: rgba(0,119,182,.25);
  color: var(--ga-navy);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ============================================================
   8f. SHARED HOOK — PLACEHOLDER IMAGES
   Replaced with real WebP images before launch.
   Each modifier sets the correct aspect ratio.
   Replace: swap out the ga-img-placeholder div
            for a real <img> with the same class suffix.

   PLACEHOLDER SYSTEM — ThemeForest safe, zero external dependencies.
   All placeholders use inline SVG data URIs. They show slot name +
   recommended dimensions. Always visible — no hover required.
   Real images override via inline style="background-image:url(...)"
   on the element.
   ============================================================ */

/* ── Placeholder base ──────────────────────────────────────── */
.ga-img-placeholder {
  background-color: var(--ga-placeholder-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: var(--ga-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Slot label — always visible, centered */
.ga-img-placeholder::before {
  content: attr(data-slot);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(2,62,138,.72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: .3px;
  pointer-events: none;
  z-index: 1;
  display: block;
}

/* Dimension chip — bottom right, always visible */
.ga-img-placeholder::after {
  content: attr(data-dims);
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(2,62,138,.55);
  color: rgba(255,255,255,.90);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: .2px;
  pointer-events: none;
  z-index: 1;
  display: block;
}

/* Hide labels when a real background image has been applied inline */
.ga-img-placeholder[style*="background-image"]::before,
.ga-img-placeholder[style*="background-image"]::after { display: none; }

/* ── Slot definitions — aspect ratio + SVG placeholder bg ──── */

/* Hero — full-width page hero. 1440×680. */
.ga-img-hero {
  aspect-ratio: 1440 / 680;
  border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='680'%3E%3Crect width='1440' height='680' fill='%23b8d4e8'/%3E%3Crect x='0' y='0' width='1440' height='680' fill='url(%23g1)'/%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a8c8e0'/%3E%3Cstop offset='1' stop-color='%23cce0f0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: cover;
}

/* Hero Inner — secondary/inner page hero. 1440×360. */
.ga-img-hero-inner {
  aspect-ratio: 1440 / 360;
  border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='360'%3E%3Crect width='1440' height='360' fill='%23b8d4e8'/%3E%3Crect x='0' y='0' width='1440' height='360' fill='url(%23g2)'/%3E%3Cdefs%3E%3ClinearGradient id='g2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a0c0dc'/%3E%3Cstop offset='1' stop-color='%23c8dcf0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: cover;
}

/* Service card image. 800×500. */
.ga-img-service-card {
  aspect-ratio: 800 / 500;
}

/* About page feature image. 960×640. */
.ga-img-about {
  aspect-ratio: 960 / 640;
  border-radius: var(--ga-radius-2xl);
}

/* Why-us / value prop feature image. 700×860. */
.ga-img-why {
  aspect-ratio: 700 / 860;
  border-radius: var(--ga-radius-2xl);
}

/* Booking section image. 640×400. */
.ga-img-booking {
  aspect-ratio: 640 / 400;
}


/* ============================================================
   9. FORM SYSTEM
   All form elements defined once.
   GHL embed, contact form — same classes, consistent style.
   ============================================================ */
.ga-form {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-4);
}

.ga-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ga-space-4);
}

.ga-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-2);
}

.ga-form-label {
  font-size: var(--ga-text-sm);
  font-weight: 600;
  color: var(--ga-text);
}

.ga-form-field {
  width: 100%;
  padding: 13px 16px;
  font-size: var(--ga-text-base);
  font-family: var(--ga-font);
  color: var(--ga-text);
  background: var(--ga-white);
  border: 1.5px solid var(--ga-border);
  border-radius: var(--ga-radius-md);
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.ga-form-field:focus {
  outline: none;
  border-color: var(--ga-primary);
  box-shadow: 0 0 0 3px rgba(0,119,182,.12);
}
.ga-form-field:hover { border-color: var(--ga-text-light); }
.ga-form-field::placeholder { color: var(--ga-text-light); }

textarea.ga-form-field {
  resize: vertical;
  min-height: 120px;
}

select.ga-form-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6B7A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

/* On dark bg — white form variant */
.ga-form-dark .ga-form-label { color: rgba(255,255,255,.85); }
.ga-form-dark .ga-form-field {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
  color: var(--ga-white);
}
.ga-form-dark .ga-form-field::placeholder { color: rgba(255,255,255,.60); }
.ga-form-dark .ga-form-field:focus {
  border-color: var(--ga-teal);
  box-shadow: 0 0 0 3px rgba(0,180,216,.15);
  background: rgba(255,255,255,.12);
}

.ga-form-submit {
  margin-top: var(--ga-space-2);
}

.ga-form-disclaimer {
  font-size: var(--ga-text-xs);
  color: var(--ga-text-muted);
  text-align: center;
  line-height: 1.5;
}
.ga-form-disclaimer-white { color: rgba(255,255,255,.80); }

/* GHL iframe container — lazy-loaded via ui.js */
.ga-ghl-frame {
  width: 100%;
  /* 820px = safe ceiling above HL form's max auto-resize height (~760px).
     Wrapper height is PRE-RESERVED so form_embed.js resizing the iframe
     causes zero layout shift and the scroll target never moves.          */
  min-height: 820px;
  overflow: hidden;
  border-radius: var(--ga-radius-lg);
}
.ga-ghl-frame iframe {
  width: 100%;
  min-height: 820px;
  border: none;
  border-radius: var(--ga-radius-lg);
  display: block;
}

/* Loading state shown before iframe injects */
.ga-ghl-frame-loading {
  min-height: 820px;
  background: var(--ga-light-gray);
  border-radius: var(--ga-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ga-text-sm);
  color: var(--ga-text-muted);
}


/* ============================================================
   10. GENERATEPRESS OVERRIDES
   Hides ALL GP chrome so our custom HTML is the only output.
   The correct permanent fix is: WordPress Page Editor →
   Page Attributes → Template → "Blank Canvas"
   These CSS rules are belt-and-suspenders for anything that leaks.
   ============================================================ */

/* ── HIDE GP HEADER (we build our own in HTML) ── */
.site-header,
.site-header-container,
.navigation-branding,
.site-branding,
#masthead { display: none !important; }

/* ── HIDE GP NAVIGATION ── */
.main-navigation,
.nav-bar,
.mobile-menu-control-wrapper,
.mobile-menu { display: none !important; }

/* ── HIDE GP FOOTER (we build our own in HTML) ── */
.site-footer,
.site-footer-container,
.footer-bar,
.footer-bar-inner,
.footer-widgets,
#colophon { display: none !important; }

/* ── HIDE GP PAGE TITLE ("Homepage" h1) ── */
.entry-title,
.page-title,
.post-title { display: none !important; }

/* ── HIDE GP SIDEBAR ── */
.widget-area,
.sidebar,
.sidebar-container { display: none !important; }

/* ── HIDE GP BACK-TO-TOP ── */
.generate-back-to-top { display: none !important; }

/* ── STRIP ALL PADDING/MARGIN/MAX-WIDTH FROM GP CONTENT WRAPPERS ──
   GP wraps everything: .site → .site-content → .content-area
   → .site-main → article → .inside-article → .entry-content     */
.site,
.site-content,
.site-container,
.grid-container,
.content-area,
.site-main,
.inside-article,
.entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  float: none !important;
}

/* ── REMOVE GP BOTTOM MARGIN ON ENTRY-CONTENT CHILDREN ── */
.entry-content > * { margin-bottom: 0 !important; }


/* ============================================================
   11. HEADER & NAVIGATION
   ============================================================ */
.ga-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--ga-white);
  border-bottom: 1px solid var(--ga-border);
  box-shadow: 0 2px 12px rgba(2,62,138,.08);
  height: var(--ga-header-height);
  display: flex;
  align-items: center;
  contain: layout style;
}
.ga-header.is-scrolled { box-shadow: 0 4px 20px rgba(2,62,138,.14); }

.ga-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ga-space-6);
  height: 100%;
}

/* Logo */
.ga-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; min-width: 0; }
.ga-logo-img {
  /* 333×180 wordmark: at height:72px → natural width ~133px. width:auto preserves ratio. */
  height: 72px;
  width: auto;
  max-width: 300px;
  display: block;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}

.ga-logo-placeholder {
  height: 56px; width: 56px;
  background: var(--ga-placeholder-bg);
  border-radius: var(--ga-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ga-text-sm); font-weight: 700; color: var(--ga-navy);
}


   11b. SLIM NAV — Hover dropdowns (2-col services, smart areas)
        + Full-screen mobile menu
   ============================================================ */

/* ── Desktop header CTA wrapper ── */
.ga-header-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* ── Desktop header call button ── */
.ga-header-call-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
  padding: 7px 14px 7px 10px;
  border-radius: var(--ga-radius-md);
  border: 1.5px solid var(--ga-border);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  color: var(--ga-navy);
}
.ga-header-call-btn:hover {
  border-color: var(--ga-primary);
  box-shadow: 0 2px 10px rgba(0,119,182,.12);
}
/* Icon circle */
.ga-hcb-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--ga-primary);
}
.ga-hcb-icon svg { stroke: #fff; display: block; }
/* Text stack */
.ga-hcb-text {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.ga-hcb-text strong {
  font-size: 13px; font-weight: 800; color: var(--ga-navy);
  letter-spacing: -.01em; line-height: 1.15; white-space: nowrap;
}
.ga-hcb-text small {
  font-size: 10px; font-weight: 500; color: var(--ga-muted);
  line-height: 1; display: block; white-space: nowrap;
}


/* ── Hamburger button ── */
.ga-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: var(--ga-radius-sm);
  -webkit-tap-highlight-color: transparent;
  width: 44px; height: 44px;
  align-items: center;
}
.ga-hamburger-line {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--ga-navy);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .3s ease, opacity .3s ease, background .2s ease;
}
/* Hamburger → X when open */
.ga-hamburger.is-open .ga-hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ga-hamburger.is-open .ga-hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ga-hamburger.is-open .ga-hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Slim nav wrapper ── */
.ga-slim-nav { flex: 1; display: flex; justify-content: center; }
.ga-slim-nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ga-slim-item { position: relative; }

/* Trigger links/buttons */
.ga-slim-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: var(--ga-text-sm);
  font-weight: 600;
  color: var(--ga-navy);
  text-decoration: none;
  border-radius: var(--ga-radius-md);
  transition: background .15s, color .15s;
  white-space: nowrap;
  cursor: pointer;
}
.ga-slim-trigger:hover,
.ga-slim-item.is-open .ga-slim-trigger {
  background: var(--ga-off-white);
  color: var(--ga-primary);
}
.ga-slim-link-plain {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  font-size: var(--ga-text-sm);
  font-weight: 600;
  color: var(--ga-navy);
  text-decoration: none;
  border-radius: var(--ga-radius-md);
  transition: background .15s, color .15s;
}
.ga-slim-link-plain:hover { background: var(--ga-off-white); color: var(--ga-primary); }

.ga-slim-chevron {
  transition: transform .18s ease;
  stroke: currentColor;
  flex-shrink: 0;
  opacity: .6;
}
.ga-slim-item.is-open .ga-slim-chevron { transform: rotate(180deg); opacity: 1; }

/* ── Dropdown panels — shared ── */
.ga-slim-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ga-white);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(2,62,138,.12), 0 2px 8px rgba(0,0,0,.07);
  z-index: 9900;
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none;
}
.ga-slim-item.is-open .ga-slim-drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Services dropdown — 2 columns */
.ga-slim-drop--services { min-width: 460px; }
.ga-slim-drop-inner {
  display: flex;
  gap: 0;
  padding: var(--ga-space-5) var(--ga-space-5) var(--ga-space-4);
}
.ga-slim-col { flex: 1; }
.ga-slim-divider {
  width: 1px;
  background: var(--ga-border);
  margin: 0 var(--ga-space-4);
  flex-shrink: 0;
  align-self: stretch;
}
.ga-slim-col-head {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ga-text-muted);
  margin: 0 0 var(--ga-space-3);
  padding: 0 var(--ga-space-2);
}
.ga-slim-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Item links */
.ga-slim-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--ga-space-2);
  font-size: var(--ga-text-sm);
  font-weight: 600;
  color: var(--ga-navy);
  text-decoration: none;
  border-radius: 8px;
  transition: background .12s, color .12s;
  white-space: nowrap;
  border-left: 2px solid transparent;
}
.ga-slim-link:hover { background: var(--ga-off-white); color: var(--ga-primary); }

/* Emergency item */
.ga-slim-link--em {
  color: var(--ga-accent);
  font-weight: 800;
  border-left-color: var(--ga-accent);
}
.ga-slim-link--em:hover { background: #fff5f0; color: #c94400; border-left-color: #c94400; }
.ga-slim-em-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ga-accent);
  flex-shrink: 0;
  animation: ga-ice-pulse 1.8s ease-in-out infinite;
}

/* Seasonal badge on items */
.ga-slim-link--seasonal { color: var(--ga-primary); }
.ga-slim-seasonal-tag {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--ga-teal);
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* More link */
.ga-slim-link--more {
  color: var(--ga-primary);
  font-weight: 700;
  font-size: 11px;
  margin-top: var(--ga-space-1);
}

/* Dropdown footer strip */
.ga-slim-drop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ga-space-3) var(--ga-space-5);
  border-top: 1px solid var(--ga-border);
  background: var(--ga-off-white);
  border-radius: 0 0 14px 14px;
}
.ga-slim-drop-cta {
  font-size: var(--ga-text-xs);
  font-weight: 800;
  color: var(--ga-primary);
  text-decoration: none;
  transition: color .14s;
}
.ga-slim-drop-cta:hover { color: var(--ga-primary-dark); }
.ga-slim-drop-all {
  font-size: var(--ga-text-xs);
  font-weight: 600;
  color: var(--ga-text-muted);
  text-decoration: none;
  transition: color .14s;
}
.ga-slim-drop-all:hover { color: var(--ga-navy); }

/* ── Areas dropdown ── */
.ga-slim-drop--areas { min-width: 280px; }
.ga-slim-drop-inner--areas { flex-direction: column; gap: var(--ga-space-4); }

.ga-slim-area-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ga-primary);
  margin: 0 0 var(--ga-space-2);
}
.ga-slim-area-head svg { stroke: var(--ga-primary); }
.ga-slim-area-head--secondary { color: var(--ga-text-muted); }
.ga-slim-area-head--secondary svg { stroke: var(--ga-text-muted); }

.ga-slim-area-primary-tag {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--ga-accent);
  color: #fff;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: auto;
}

/* City list */
.ga-slim-area-cities {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ga-space-2);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ga-slim-city {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px var(--ga-space-2);
  font-size: var(--ga-text-sm);
  font-weight: 600;
  color: var(--ga-navy);
  text-decoration: none;
  border-radius: 8px;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.ga-slim-city:hover { background: var(--ga-off-white); color: var(--ga-primary); }
.ga-slim-city--primary { font-weight: 800; color: var(--ga-primary); }
.ga-slim-city-star { color: var(--ga-accent); font-size: .85em; flex-shrink: 0; }

.ga-slim-area-more {
  display: block;
  font-size: var(--ga-text-xs);
  font-weight: 700;
  color: var(--ga-primary);
  text-decoration: none;
  padding: 4px var(--ga-space-2);
  transition: color .14s;
}
.ga-slim-area-more:hover { color: var(--ga-primary-dark); }

/* Secondary counties compact */
.ga-slim-area-secondary { border-top: 1px solid var(--ga-border); padding-top: var(--ga-space-3); }
.ga-slim-area-counties {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ga-slim-county-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--ga-space-2);
  font-size: var(--ga-text-sm);
  font-weight: 600;
  color: var(--ga-navy);
  text-decoration: none;
  border-radius: 8px;
  transition: background .12s, color .12s;
}
.ga-slim-county-link:hover { background: var(--ga-off-white); color: var(--ga-primary); }
.ga-slim-county-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--ga-text-muted);
  background: var(--ga-off-white);
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid var(--ga-border);
}

/* ══════════════════════════════════════════════════
   FULL-SCREEN MOBILE MENU (unchanged from v8)
   ══════════════════════════════════════════════════ */
.ga-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--ga-navy-dark);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.ga-mobile-menu.is-open { transform: translateX(0); }
.ga-mobile-menu-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ga-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ga-space-4) var(--ga-space-5);
  min-height: var(--ga-header-height);
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.ga-mobile-menu-logo { display: flex; align-items: center; border-radius: 12px; overflow: hidden; }
.ga-mobile-menu-logo img { display: block; border-radius: 12px; }
.ga-mobile-menu-close {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  cursor: pointer; color: var(--ga-white);
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, transform .15s;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.ga-mobile-menu-close:hover,
.ga-mobile-menu-close:focus-visible {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.34);
}
.ga-mobile-menu-close:active { transform: translateY(1px); }
.ga-mobile-menu-close svg { stroke: var(--ga-white); flex-shrink: 0; }
.ga-mobile-menu-close span { display: inline-block; }

.ga-mobile-promo-stack {
  display: grid;
  gap: 12px;
  margin-bottom: var(--ga-space-3);
}
.ga-mobile-promo {
  display: grid;
  gap: 5px;
  padding: 16px;
  text-decoration: none;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--ga-white);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ga-mobile-promo:hover,
.ga-mobile-promo:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(0,0,0,.22);
}
.ga-mobile-promo--emergency {
  background: linear-gradient(135deg, #ff6b3d 0%, #ff8a3d 100%);
}
.ga-mobile-promo--plan {
  background: linear-gradient(135deg, #1290d8 0%, #0a63c9 100%);
}
.ga-mobile-promo-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .88;
}
.ga-mobile-promo-title {
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.ga-mobile-promo-copy {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.92);
}
.ga-mobile-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
}
.ga-mobile-promo-cta svg { flex-shrink: 0; }
.ga-mobile-menu-nav {
  flex: 1;
  padding: var(--ga-space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ga-mobile-intent-group { border-radius: var(--ga-radius-lg); overflow: hidden; }
.ga-mobile-intent-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ga-space-4);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--ga-radius-lg);
  cursor: pointer; font-family: var(--ga-font);
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
  margin-bottom: 2px;
}
.ga-mobile-intent-trigger:hover,
.ga-mobile-intent-trigger[aria-expanded="true"],
.ga-mobile-intent-group.is-expanded .ga-mobile-intent-trigger { background: rgba(255,255,255,.12); }
.ga-mobile-intent-label { font-size: var(--ga-text-base); font-weight: 700; color: var(--ga-white); text-align: left; }
.ga-mobile-intent-chevron { stroke: rgba(255,255,255,.6); flex-shrink: 0; transition: transform .2s ease; }
.ga-mobile-intent-trigger[aria-expanded="true"] .ga-mobile-intent-chevron { transform: rotate(180deg); }
.ga-mobile-intent-items {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--ga-space-2) var(--ga-space-2) var(--ga-space-3);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-top: none;
  border-radius: 0 0 var(--ga-radius-lg) var(--ga-radius-lg);
  margin-bottom: 2px;
}
.ga-mobile-intent-items[hidden] { display: none !important; }
.ga-mobile-intent-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--ga-space-3);
  font-size: var(--ga-text-sm); font-weight: 600;
  color: rgba(255,255,255,.85);
  text-decoration: none; border-radius: var(--ga-radius-md);
  transition: background .14s, color .14s;
}
.ga-mobile-intent-item:hover { background: rgba(255,255,255,.08); color: var(--ga-white); }
.ga-mobile-intent-item svg { stroke: rgba(255,255,255,.4); flex-shrink: 0; }
.ga-mobile-intent-item--emergency { color: #FF9A7A; font-weight: 800; }
.ga-mobile-intent-item--emergency .ga-pulse-dot { width: 7px; height: 7px; background: var(--ga-accent); flex-shrink: 0; }
.ga-mobile-intent-item--primary-city { color: var(--ga-teal-light); }
.ga-mobile-area-label {
  font-size: 10px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ga-teal-light);
  padding: var(--ga-space-2) var(--ga-space-3) var(--ga-space-1); margin: 0;
}
.ga-mobile-standalone-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ga-space-4);
  font-size: var(--ga-text-base); font-weight: 700;
  color: rgba(255,255,255,.8); text-decoration: none;
  border-radius: var(--ga-radius-lg);
  transition: background .15s, color .15s;
  margin-top: var(--ga-space-2);
}
.ga-mobile-standalone-link:hover { background: rgba(255,255,255,.07); color: var(--ga-white); }
.ga-mobile-standalone-link svg { stroke: rgba(255,255,255,.4); }
.ga-mobile-menu-footer {
  padding: var(--ga-space-4) var(--ga-space-5);
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
  padding-bottom: calc(var(--ga-space-4) + env(safe-area-inset-bottom));
}
.ga-mobile-menu-license { font-size: var(--ga-text-xs); color: rgba(255,255,255,.4); text-align: center; margin: 0; }
.ga-mobile-backdrop {
  position: fixed; inset: 0; z-index: 9997;
  background: rgba(2,4,94,.7);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .32s ease;
}
.ga-mobile-backdrop.is-active { opacity: 1; pointer-events: auto; }



/* ── Desktop header layout hardening: keep phone + CTA on one row ── */
@media (min-width: 1025px) {
  .ga-header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(12px, 2vw, 28px);
  }

  .ga-slim-nav {
    min-width: 0;
  }

  .ga-header-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-self: end;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .ga-header-call-btn,
  .ga-header-cta .ga-btn {
    flex: 0 0 auto;
  }
}

/* ── Responsive visibility ── */
@media (min-width: 1025px) {
  .ga-hamburger { display: none !important; }
  .ga-mobile-menu { display: none !important; }
  .ga-mobile-backdrop { display: none !important; }
}
@media (max-width: 1024px) {
  .ga-slim-nav { display: none !important; }
  .ga-header-cta { display: none !important; }
  .ga-hamburger { display: flex !important; }
}


/* ============================================================
   12. HOMEPAGE HERO
   Full-height hero — homepage only.
   Inner pages use .ga-page-hero (section 8a).
   ============================================================ */
.ga-hero {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ga-navy-dark);
}
.ga-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* ── Media Mapping overrides ────────────────────────────────────────────────
 * Applied when generator bakes a media_item via %hero_media% token.
 * .has-custom-media added to ga-hero <section> by %hero_section_class% token.
 *
 * Selector specificity (not !important) handles override precedence.
 * enqueue.php targets .ga-hero-bg; baked image uses .ga-hero-bg-baked (distinct class).
 * These rules are inert on all pages that lack .has-custom-media. */

/* 1. Hide original placeholder when custom media is baked */
.ga-hero.has-custom-media .ga-hero-bg {
  display: none;
}

/* 1b. Always hide the slot label/dims badge on the hero background placeholder.
 * .ga-hero-bg always carries .ga-img-placeholder when used as a placeholder.
 * This targets only that element — all other .ga-img-placeholder slots elsewhere
 * (service cards, why-us image, etc.) are unaffected because they lack .ga-hero-bg. */
.ga-hero-bg.ga-img-placeholder::before,
.ga-hero-bg.ga-img-placeholder::after {
  display: none;
}

/* 2. Baked image element — positioned identically to ga-hero-bg */
.ga-hero.has-custom-media .ga-hero-bg-baked {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* background-image applied via inline style by apsite_render_media_html() */
}

/* 3. Baked video wrapper */
.ga-hero.has-custom-media .ga-hero-video-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 4. Baked video iframe — full-cover regardless of native aspect ratio */
.ga-hero-video-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.05);
  border: 0;
}
/* ── End media mapping ───────────────────────────────────────────────────── */

.ga-hero-overlay { position: absolute; inset: 0; background: var(--ga-gradient-hero); }
.ga-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ga-teal), var(--ga-primary), var(--ga-teal));
}
.ga-hero-inner { position: relative; z-index: 2; padding: var(--ga-space-20) 0; }
@media (max-width: 640px) {
  .ga-hero-inner { padding: var(--ga-space-12) 0 var(--ga-space-10); }
}

.ga-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--ga-space-16);
  align-items: center;
}

.ga-hero-content { display: flex; flex-direction: column; }
.ga-hero-h1 {
  font-size: clamp(2.25rem, 5vw, var(--ga-text-6xl));
  font-weight: 900;
  color: var(--ga-white);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 var(--ga-space-4);
}
@media (max-width: 640px) {
  .ga-hero-h1 {
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin-bottom: var(--ga-space-4);
  }
}
.ga-hero-h1 em { font-style: normal; color: var(--ga-teal); }
.ga-hero-sub {
  font-size: var(--ga-text-lg);
  color: rgba(255,255,255,.80);
  line-height: 1.65;
  margin: 0 0 var(--ga-space-8);
  max-width: 520px;
}
@media (max-width: 640px) {
  .ga-hero-sub {
    font-size: var(--ga-text-base);
    line-height: 1.60;
    margin-bottom: var(--ga-space-6);
  }
}

/* Full-width hero CTA buttons on small screens */
@media (max-width: 480px) {
  .ga-hero-content > div[style*="display:flex"],
  .ga-hero-content > div[style*="display: flex"] {
    flex-direction: column;
  }
  .ga-hero-content .ga-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Right col — CTA card */
.ga-hero-cta-card {
  background: var(--ga-white);
  border-radius: var(--ga-radius-2xl);
  padding: var(--ga-space-8);
  box-shadow: var(--ga-shadow-xl);
  /* Subtle top accent line — draws the eye to the title */
  border-top: 3px solid var(--ga-primary);
}
/* Urgent card uses accent color for its top bar */
.ga-hero-cta-card-urgent {
  border-top-color: var(--ga-accent);
}
.ga-hero-cta-card h3 { font-size: var(--ga-text-3xl); color: var(--ga-navy); margin-bottom: var(--ga-space-2); }

/* .ga-cta-card-title
 * The hero card title — "Get a Free Estimate" or similar.
 * Intentionally larger than the body copy to establish clear hierarchy.
 * Uses a tight letter-spacing and clamp() so it scales gracefully
 * from compact card widths (320px) up to full-width desktop.       */
.ga-cta-card-title,
.ga-cta-card-title.ap-t {
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  font-weight: 900;
  color: var(--ga-navy);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 var(--ga-space-3);
  padding-left: var(--ga-space-3);
  border-left: 3px solid var(--ga-teal);
}

/* Body copy beneath the title — intentionally lighter and smaller
 * so the title dominates. Tighter bottom margin because the button
 * provides enough breathing room on its own.                        */
.ga-hero-cta-card p {
  font-size: var(--ga-text-sm);
  color: var(--ga-text-muted);
  line-height: 1.6;
  margin-bottom: var(--ga-space-5);
}

.ga-hero-divider {
  display: flex;
  align-items: center;
  gap: var(--ga-space-3);
  margin: var(--ga-space-4) 0;
  color: var(--ga-text-light);
  font-size: var(--ga-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ga-hero-divider::before,
.ga-hero-divider::after { content: ''; flex: 1; height: 1px; background: var(--ga-border); }


/* ============================================================
   13. TRUST BAR
   ============================================================ */
.ga-trust-bar { background: var(--ga-gradient-primary); padding: 0; }
.ga-trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}
.ga-trust-stat {
  flex: 1 1 200px;
  padding: var(--ga-space-6) var(--ga-space-5);
  border-right: 1px solid rgba(255,255,255,.15);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ga-space-1);
  min-height: 88px;
}
.ga-trust-stat:last-child { border-right: none; }
.ga-trust-stat-num   { font-size: clamp(1.35rem, 5vw, 2rem); font-weight: 900; color: var(--ga-white); line-height: 1; letter-spacing: -.03em; }
.ga-trust-stat-label { font-size: var(--ga-text-xs); font-weight: 700; color: rgba(255,255,255,.80); text-transform: uppercase; letter-spacing: 1px; }


/* ============================================================
   14. SERVICES GRID
   ============================================================ */
/* content-visibility: auto skips rendering below-fold sections until near viewport.
   Combined with contain-intrinsic-size this prevents layout shift. */
.ga-services  { background: var(--ga-gradient-ice); }

/* ============================================================
   14a. SERVICES HUB — /services/ top-level page dynamic grid
   Token: %services_hub% — always live, never baked.
   ============================================================ */

/* Services page hero modifier */
.ga-page-hero-services {
  position: relative;
  overflow: hidden;
}
.ga-page-hero-services::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,53,.12) 0%, transparent 70%);
  pointer-events: none;
}
.ga-page-hero-services em {
  font-style: italic;
  color: var(--ga-teal-light);
}

/* Hub section wrapper */
.ga-svc-hub {
  background: var(--ga-off-white);
}

/* Emergency card — full-width strip at top */
.ga-svc-hub-emergency {
  display: flex;
  align-items: center;
  gap: var(--ga-space-6);
  background: linear-gradient(135deg, var(--ga-navy-dark) 0%, #012A6B 100%);
  border-radius: 16px;
  padding: var(--ga-space-6) var(--ga-space-8);
  margin-bottom: var(--ga-space-10);
  border: 1px solid rgba(255,107,53,.30);
  box-shadow: 0 8px 32px rgba(3,4,94,.20);
  flex-wrap: wrap;
}
.ga-svc-hub-emergency-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,107,53,.20);
  border: 2px solid rgba(255,107,53,.40);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ga-accent);
}
.ga-svc-hub-emergency-body {
  flex: 1;
  min-width: 200px;
}
.ga-svc-hub-emergency-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ga-accent);
  margin-bottom: var(--ga-space-2);
}
.ga-svc-hub-emergency-title {
  font-size: var(--ga-text-xl);
  font-weight: 900;
  color: var(--ga-white);
  margin: 0 0 var(--ga-space-2);
}
.ga-svc-hub-emergency-desc {
  font-size: var(--ga-text-sm);
  color: rgba(255,255,255,.75);
  margin: 0;
  line-height: 1.55;
}
.ga-svc-hub-emergency-cta {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-2);
  flex-shrink: 0;
}
.ga-svc-hub-emergency-cta .ga-btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Service cards grid */
.ga-svc-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ga-space-5);
}
.ga-svc-hub-card {
  display: flex;
  flex-direction: column;
  background: var(--ga-white);
  border-radius: 14px;
  border: 1px solid var(--ga-border);
  padding: var(--ga-space-6);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.ga-svc-hub-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ga-gradient-primary);
  opacity: 0;
  transition: opacity .18s;
}
.ga-svc-hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,119,182,.13);
  border-color: rgba(0,119,182,.25);
}
.ga-svc-hub-card:hover::before {
  opacity: 1;
}
.ga-svc-hub-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0,119,182,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ga-primary);
  margin-bottom: var(--ga-space-4);
  flex-shrink: 0;
  transition: background .18s, color .18s;
}
.ga-svc-hub-card:hover .ga-svc-hub-card-icon {
  background: var(--ga-primary);
  color: var(--ga-white);
}
.ga-svc-hub-card-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ga-primary);
  background: rgba(0,119,182,.10);
  border-radius: var(--ga-radius-pill);
  padding: 2px 9px;
  margin-bottom: var(--ga-space-2);
  width: fit-content;
}
.ga-svc-hub-card-title {
  font-size: var(--ga-text-base);
  font-weight: 800;
  color: var(--ga-navy-dark);
  margin: 0 0 var(--ga-space-2);
  line-height: 1.25;
}
.ga-svc-hub-card-desc {
  font-size: var(--ga-text-sm);
  color: var(--ga-text-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.ga-svc-hub-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ga-primary);
  margin-top: var(--ga-space-4);
  transition: gap .15s;
}
.ga-svc-hub-card:hover .ga-svc-hub-card-link {
  gap: 8px;
}

@media (max-width: 768px) {
  .ga-svc-hub-emergency {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--ga-space-5) var(--ga-space-5);
    gap: var(--ga-space-4);
  }
  .ga-svc-hub-emergency-cta {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .ga-svc-hub-emergency-cta .ga-btn {
    flex: 1;
    justify-content: center;
    min-width: 140px;
  }
  .ga-svc-hub-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--ga-space-4);
  }
}
@media (max-width: 480px) {
  .ga-svc-hub-grid {
    grid-template-columns: 1fr;
  }
}

.ga-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ga-space-6); }

/* ── Services fallback strip (zero active services state) ── */
.ga-services-fallback { background: var(--ga-bg-alt); }
.ga-services-fallback-inner { text-align: center; padding: var(--ga-space-10) 0; }
.ga-services-fallback-heading { margin-bottom: var(--ga-space-4); }
.ga-services-fallback-btns { display: flex; flex-wrap: wrap; gap: var(--ga-space-3); justify-content: center; margin-bottom: var(--ga-space-4); }
.ga-services-fallback-trust { font-size: var(--ga-text-sm); color: var(--ga-text-muted); }

.ga-service-card {
  background: var(--ga-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-xl);
  overflow: hidden;
  box-shadow: var(--ga-shadow-md);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ga-service-card:hover { transform: translateY(-6px); box-shadow: var(--ga-shadow-xl); }
.ga-service-card-emergency { border-color: var(--ga-accent); border-width: 2px; }
.ga-service-card-emergency:hover { box-shadow: 0 16px 48px rgba(255,107,53,.20); }

.ga-service-card-img { width: 100%; aspect-ratio: 16/10; overflow: hidden; position: relative; }
/* ── Real photo image strip for service cards ── */
.ga-service-card-img-real {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
}


.ga-service-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ga-service-card:hover .ga-service-card-img img { transform: scale(1.04); }

/* Placeholder inside service card img slot */
.ga-service-card-img .ga-img-placeholder { height: 100%; aspect-ratio: unset; }

.ga-service-card-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 12px;
  border-radius: var(--ga-radius-pill);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--ga-white);
  background: var(--ga-primary);
}
.ga-service-card-badge-emergency { background: var(--ga-accent); box-shadow: 0 4px 12px rgba(255,107,53,.40); }

.ga-service-card-body { padding: var(--ga-space-6); display: flex; flex-direction: column; flex: 1; gap: var(--ga-space-3); }
.ga-service-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--ga-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--ga-teal);
  box-shadow: 0 3px 10px rgba(0,180,216,.30);
  flex-shrink: 0;
}
.ga-service-card-icon svg { stroke: #fff; stroke-width: 2.5; }
.ga-service-card-icon-emergency { background: var(--ga-accent); box-shadow: 0 3px 10px rgba(255,107,53,.30); }
.ga-service-card-icon-emergency svg { stroke: #fff; }
.ga-service-card-title { font-size: var(--ga-text-xl); font-weight: 900; color: var(--ga-text); margin: 0; line-height: 1.15; }
.ga-service-card-desc  { font-size: var(--ga-text-sm); color: var(--ga-text-muted); line-height: 1.6; margin: 0; flex: 1; }
.ga-service-card-link  {
  display: inline-flex; align-items: center; gap: var(--ga-space-2);
  font-size: var(--ga-text-sm); font-weight: 700;
  color: var(--ga-primary); text-decoration: none;
  margin-top: auto;
  transition: var(--ga-transition-fast);
}
.ga-service-card-link:hover { color: var(--ga-primary-dark); gap: var(--ga-space-3); }
.ga-service-card-link-emergency { color: var(--ga-accent); }
.ga-service-card-link-emergency:hover { color: var(--ga-accent-dark); }


/* ============================================================
   15. PROCESS SECTION
   ============================================================ */
.ga-process { background: var(--ga-off-white); }
.ga-process-grid {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  align-items: start;
}
.ga-process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 56px;
  color: var(--ga-teal);
  font-size: 22px;
}

.ga-process-card { background: var(--ga-white); border: 1px solid var(--ga-border); border-radius: var(--ga-radius-xl); overflow: hidden; box-shadow: var(--ga-shadow-sm); }
.ga-process-card-bar { height: 4px; background: linear-gradient(90deg, var(--ga-teal), var(--ga-primary)); }
.ga-process-card-inner { padding: var(--ga-space-6); }
.ga-process-num-row { display: flex; align-items: center; gap: var(--ga-space-3); margin-bottom: var(--ga-space-4); }
.ga-process-num {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--ga-teal), var(--ga-primary));
  border-radius: var(--ga-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: var(--ga-white);
  box-shadow: 0 6px 18px rgba(0,119,182,.30); flex-shrink: 0;
  letter-spacing: -.02em;
}
.ga-process-step-label { font-size: var(--ga-text-xs); color: var(--ga-primary); font-weight: 900; text-transform: uppercase; letter-spacing: 2px; }
.ga-process-title { font-size: var(--ga-text-lg); font-weight: 900; color: var(--ga-navy); margin: 0 0 var(--ga-space-3); }
.ga-process-body  { font-size: var(--ga-text-sm); color: var(--ga-text-muted); line-height: 1.65; margin: 0 0 var(--ga-space-4); padding-bottom: var(--ga-space-4); border-bottom: 1px solid var(--ga-border); }


/* ============================================================
   16. WHY US SECTION
   ============================================================ */
.ga-why { background: var(--ga-white); }
.ga-why-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--ga-space-16);
  align-items: center;
}
.ga-why-list { display: flex; flex-direction: column; gap: var(--ga-space-4); }
.ga-why-item {
  display: flex; gap: var(--ga-space-5); align-items: flex-start;
  padding: var(--ga-space-5) var(--ga-space-6);
  background: var(--ga-off-white);
  border: 1px solid var(--ga-border);
  border-left: 4px solid var(--ga-teal);
  border-radius: var(--ga-radius-lg);
  transition: var(--ga-transition);
}
.ga-why-item:hover { border-left-color: var(--ga-primary); background: rgba(0,119,182,.04); box-shadow: var(--ga-shadow-sm); }
.ga-why-icon {
  width: 56px; height: 56px; min-width: 56px;
  background: linear-gradient(135deg, var(--ga-teal), var(--ga-primary));
  border-radius: var(--ga-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 16px rgba(0,119,182,.25);
}
/* SVG icons in why items: white stroke, thicker for visibility */
.ga-why-icon svg { stroke: #fff; stroke-width: 2.5; }
.ga-why-item-title { font-size: var(--ga-text-base); font-weight: 700; color: var(--ga-navy); margin: 0 0 var(--ga-space-1); }
.ga-why-item-desc  { font-size: var(--ga-text-sm); color: var(--ga-text-muted); margin: 0; line-height: 1.55; }

.ga-why-image-wrap { position: relative; }
.ga-why-image-wrap img { width: 100%; border-radius: var(--ga-radius-2xl); box-shadow: var(--ga-shadow-xl); display: block; }
.ga-why-credential {
  position: absolute; bottom: 24px; left: -24px;
  background: var(--ga-white); border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-lg); padding: var(--ga-space-4) var(--ga-space-5);
  box-shadow: var(--ga-shadow-lg); min-width: 200px;
}
/* Prevent overflow on mobile — reposition inside image bounds */
@media (max-width: 1024px) {
  .ga-why-credential { left: 0; }
}
@media (max-width: 640px) {
  .ga-why-credential { bottom: 12px; left: 12px; min-width: 160px; padding: var(--ga-space-3) var(--ga-space-4); }
}
.ga-why-credential-label { font-size: var(--ga-text-xs); color: var(--ga-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--ga-space-1); }
.ga-why-credential-value { font-size: var(--ga-text-base); font-weight: 900; color: var(--ga-navy); }


/* ============================================================
   17. BOOKING SECTION
   GHL calendar embed + sidebar stats + phone card
   ============================================================ */
.ga-booking { background: var(--ga-gradient-dark); position: relative; overflow: hidden; }
.ga-booking::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none; z-index: 0;
}
.ga-booking::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ga-teal), var(--ga-primary), var(--ga-teal));
}
.ga-booking-inner { position: relative; z-index: 1; }

.ga-booking-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--ga-space-8);
  align-items: start;
}

/* Sidebar */
.ga-booking-sidebar { display: flex; flex-direction: column; gap: var(--ga-space-4); }

.ga-booking-info-card {
  background: var(--ga-white);
  border-radius: var(--ga-radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(2,62,138,.18), 0 2px 8px rgba(0,0,0,.08);
  border: 1px solid rgba(255,255,255,.15);
}
.ga-booking-info-img  { width: 100%; aspect-ratio: 16/10; overflow: hidden; }
.ga-booking-info-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Info body — header band + content area */
.ga-booking-info-body {
  display: flex;
  flex-direction: column;
}
/* Dark gradient title band */
.ga-booking-info-body .ga-booking-info-title {
  background: var(--ga-gradient-dark);
  color: var(--ga-white);
  font-size: var(--ga-text-base);
  font-weight: 900;
  line-height: 1.25;
  margin: 0;
  padding: var(--ga-space-4) var(--ga-space-5);
  border-bottom: 3px solid var(--ga-teal);
  letter-spacing: -.01em;
}
/* Checklist sits in a padded white area */
.ga-booking-info-body .ga-checklist {
  padding: var(--ga-space-5) var(--ga-space-5) var(--ga-space-4);
  gap: var(--ga-space-3);
}
.ga-booking-info-body .ga-checklist li {
  font-size: var(--ga-text-sm);
  color: var(--ga-text);
  font-weight: 500;
  align-items: center;
}
.ga-booking-info-body .ga-checklist li::before {
  background: var(--ga-teal);
  color: var(--ga-white);
  border-radius: var(--ga-radius-pill);
  font-size: 11px;
}

/* On mobile: hide the image portion of booking info card to reduce scroll */
@media (max-width: 640px) {
  .ga-booking-info-img { display: none; }
}

/* Stat row — three coloured stat cells */
.ga-booking-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ga-border);
}
.ga-booking-stats > div {
  padding: var(--ga-space-4) var(--ga-space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ga-space-1);
  border-right: 1px solid var(--ga-border);
}
.ga-booking-stats > div:last-child { border-right: none; }
.ga-booking-stat-num {
  font-size: var(--ga-text-2xl);
  font-weight: 900;
  color: var(--ga-accent);
  line-height: 1;
  text-align: center;
}
.ga-booking-stat-label {
  font-size: 10px;
  color: var(--ga-text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  text-align: center;
  font-weight: 700;
}

/* Calendar card */
.ga-booking-calendar {
  background: var(--ga-white);
  border-radius: var(--ga-radius-2xl);
  padding: var(--ga-space-8);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  /* Scroll target — clears sticky header + 16px breathing room on all screen sizes */
  scroll-margin-top: calc(var(--ga-header-height) + 16px);
}
.ga-booking-calendar h3 { font-size: var(--ga-text-2xl); color: var(--ga-navy); margin-bottom: var(--ga-space-2); } /* inner pages may use */


/* ============================================================
   18. REVIEWS SECTION
   Trustindex widget shell
   ============================================================ */
.ga-reviews { background: var(--ga-white); position: relative; }
.ga-reviews::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,216,.10), transparent 70%);
  top: -200px; left: -200px;
  pointer-events: none;
  overflow: hidden;
}
.ga-reviews-shell {
  background: var(--ga-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-2xl);
  box-shadow: var(--ga-shadow-lg);
  overflow: hidden;
  margin-top: var(--ga-space-8);
}
.ga-reviews-shell-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ga-space-4) var(--ga-space-5);
  border-bottom: 1px solid var(--ga-border);
  background: linear-gradient(180deg, rgba(0,180,216,.07), transparent);
}
.ga-reviews-shell-title {
  display: flex; align-items: center; gap: var(--ga-space-3);
  font-size: var(--ga-text-base); font-weight: 900; color: var(--ga-text);
}
.ga-reviews-widget { padding: var(--ga-space-5); min-height: 0; }

/* Google branding pill */
.ga-google-pill {
  display: inline-flex; align-items: center; gap: var(--ga-space-3);
  background: var(--ga-white); border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-lg);
  padding: var(--ga-space-3) var(--ga-space-4);
  box-shadow: var(--ga-shadow-sm);
}
.ga-stars { color: var(--ga-accent); font-size: var(--ga-text-base); letter-spacing: 1.5px; }
.ga-g-blue  { color: #4285F4; font-weight: 900; }
.ga-g-red   { color: #EA4335; font-weight: 900; }
.ga-g-yellow{ color: #FBBC05; font-weight: 900; }
.ga-g-green { color: #34A853; font-weight: 900; }


/* ============================================================
   19. SERVICE AREAS SECTION
   ============================================================ */
.ga-areas { background: var(--ga-gradient-dark); color: var(--ga-white); content-visibility: auto; contain-intrinsic-size: 0 600px; }

/* Two-col grid: county cards left, map right */
.ga-areas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ga-space-10);
  align-items: start;
}

/* ── County card list ── */
.ga-areas-county-list { display: flex; flex-direction: column; gap: var(--ga-space-3); }

/* Each county = a card with image thumbnail + text + CTA */
.ga-areas-county {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--ga-radius-xl);
  color: var(--ga-white);
  text-decoration: none;
  overflow: hidden;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.ga-areas-county:hover {
  background: rgba(255,255,255,.14);
  border-color: var(--ga-teal);
  color: var(--ga-white);
  transform: translateY(-2px);
}

/* Left: location image thumbnail */
.ga-areas-county-thumb {
  width: 88px;
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.ga-areas-county-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.ga-areas-county:hover .ga-areas-county-thumb-img { transform: scale(1.05); }

/* Fallback gradient for each county if no photo uploaded yet */
.ga-areas-county-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}
.ga-areas-county-thumb-fallback.marion  { background: linear-gradient(135deg,#0a5c8a,#00b4d8); }

.ga-areas-county-thumb-fallback.sumter  { background: linear-gradient(135deg,#6a3d9a,#c77dff); }
.ga-areas-county-thumb-fallback.lake    { background: linear-gradient(135deg,#b45309,#f59e0b); }
.ga-areas-county-thumb-fallback.citrus  { background: linear-gradient(135deg,#9d174d,#ec4899); }

/* Middle: county name + cities */
.ga-areas-county-body {
  padding: var(--ga-space-3) var(--ga-space-4);
  flex: 1;
  min-width: 0;
}
.ga-areas-county-name {
  font-size: var(--ga-text-base);
  font-weight: 900;
  line-height: 1.2;
  display: block;
  letter-spacing: -.01em;
  color: var(--ga-white);
}
.ga-areas-county-cities {
  font-size: 11px;
  color: rgba(255,255,255,.80);
  margin-top: 3px;
  display: block;
  line-height: 1.4;
}
.ga-areas-county-primary {
  border-color: rgba(67, 212, 255, .45);
  background: linear-gradient(90deg, rgba(67,212,255,.16), rgba(255,255,255,.07));
  box-shadow: 0 14px 32px rgba(0,0,0,.20);
}
.ga-areas-county-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ga-teal-light);
}
.ga-areas-county-nbhd-label {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.ga-areas-county-nbhds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.ga-areas-county-nbhd-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.ga-areas-county-nbhd-pill-more {
  color: var(--ga-teal-light);
}

/* Right: arrow CTA */
.ga-areas-county-cta {
  padding: var(--ga-space-3) var(--ga-space-4);
  font-size: var(--ga-text-xs);
  font-weight: 700;
  color: var(--ga-teal-light);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .2s ease, gap .2s ease;
}
.ga-areas-county:hover .ga-areas-county-cta { color: var(--ga-white); gap: 8px; }

/* ── Map container ── */
.ga-areas-map-wrap {
  position: sticky;
  top: calc(var(--ga-header-height) + 1.5rem);
  border-radius: var(--ga-radius-2xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.15);
}
.ga-areas-map-wrap iframe {
  display: block;
  width: 100%;
  height: 520px;
  border: none;
}
.ga-areas-map-label {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--ga-white);
  border-radius: var(--ga-radius-lg);
  padding: 8px 14px;
  box-shadow: var(--ga-shadow-lg);
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--ga-navy);
  pointer-events: none;
}
.ga-areas-map-label-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ga-accent);
  animation: ga-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.ga-areas-map-label-primary {
  border: 1px solid rgba(0,0,0,.06);
}
.ga-areas-map-note {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--ga-radius-lg);
  background: rgba(7, 16, 64, .80);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-size: 11px;
  line-height: 1.4;
  backdrop-filter: blur(6px);
}
.ga-areas-map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  font-weight: 700;
}



/* ============================================================
   20. FOOTER
   ============================================================ */
/* ── Footer shell — layered gradient for depth, not flat navy ── */
.ga-footer {
  background: linear-gradient(180deg, #051240 0%, #03045E 40%, #020338 100%);
  color: var(--ga-white);
  position: relative;
  overflow: hidden;
}
/* Subtle radial glow behind brand column */
.ga-footer::before {
  content: '';
  position: absolute;
  top: -120px; left: -80px;
  width: 600px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(0,180,216,.12) 0%, transparent 70%);
  pointer-events: none;
}
/* Top accent — teal-to-primary gradient bar */
.ga-footer-accent {
  height: 3px;
  background: linear-gradient(90deg, var(--ga-teal) 0%, var(--ga-primary) 50%, var(--ga-teal) 100%);
}

.ga-footer-grid {
  display: grid;
  grid-template-columns: 280px 1fr 220px;
  gap: var(--ga-space-12);
  padding: var(--ga-space-16) 0 var(--ga-space-12);  /* generous top so content is away from accent bar */
  align-items: start;
  position: relative; /* above ::before glow */
}

/* ── Brand column ── */
.ga-footer-brand { display: flex; flex-direction: column; gap: var(--ga-space-4); }
.ga-footer-logo {
  font-size: var(--ga-text-xl); font-weight: 900; color: var(--ga-white);
  letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: var(--ga-space-2);
}
/* Teal accent bar under logo name */
.ga-footer-logo::after {
  content: '';
  display: block;
  width: 40px; height: 3px;
  background: var(--ga-teal);
  border-radius: 2px;
  margin-top: var(--ga-space-2);
}
.ga-footer-logo img { max-height: 52px; width: auto; border-radius: var(--ga-radius-sm); }
.ga-footer-tagline {
  font-size: var(--ga-text-sm); color: rgba(255,255,255,.82);
  line-height: 1.65; margin: 0;
}
.ga-footer-license {
  display: inline-flex; align-items: center; gap: var(--ga-space-2);
  font-size: var(--ga-text-xs); font-weight: 700; color: var(--ga-teal-light);
  background: rgba(0,180,216,.12); border: 1px solid rgba(0,180,216,.25);
  padding: 6px 12px; border-radius: var(--ga-radius-lg);
  width: fit-content; letter-spacing: .02em;
}
.ga-footer-actions {
  display: flex; flex-direction: column; gap: var(--ga-space-2);
  padding-top: var(--ga-space-2);
}

/* ── Links columns ── */
.ga-footer-links-col { display: flex; gap: var(--ga-space-10); }
.ga-footer-link-group { display: flex; flex-direction: column; gap: var(--ga-space-2); flex: 1; }
.ga-footer-heading {
  font-size: var(--ga-text-xs); font-weight: 900; text-transform: uppercase;
  letter-spacing: 1.8px; color: var(--ga-teal); margin: 0 0 var(--ga-space-3);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,180,216,.25);
}
.ga-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ga-footer-links a, .ga-footer-links li {
  font-size: var(--ga-text-sm); color: rgba(255,255,255,.82);
  text-decoration: none; transition: color .2s;
  display: flex; align-items: center; gap: 6px;
}
.ga-footer-links a::before {
  content: '›'; color: var(--ga-teal); font-size: 14px;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
  flex-shrink: 0;
}
.ga-footer-links a:hover { color: var(--ga-white); }
.ga-footer-links a:hover::before { opacity: 1; transform: translateX(0); }

/* ── Contact / social column ── */
.ga-footer-social {
  display: flex; gap: var(--ga-space-2);
  padding-top: var(--ga-space-4);
  margin-top: var(--ga-space-4);
  border-top: 1px solid rgba(255,255,255,.08);
}
.ga-footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--ga-radius-sm);
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: var(--ga-transition-fast);
}
.ga-footer-social a:hover {
  background: var(--ga-teal); border-color: var(--ga-teal);
  color: var(--ga-navy-dark); transform: translateY(-2px);
}

/* ── Bottom bar ── */
.ga-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--ga-space-3);
  padding: var(--ga-space-5) 0;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.ga-footer-copy { font-size: var(--ga-text-xs); color: rgba(255,255,255,.72); margin: 0; }
.ga-footer-legal { display: flex; gap: var(--ga-space-5); }
.ga-footer-legal a {
  font-size: var(--ga-text-xs); color: rgba(255,255,255,.65);
  text-decoration: none; transition: color .2s;
}
.ga-footer-legal a:hover { color: var(--ga-teal); }


/* ============================================================
   21. FLOATING ENGAGEMENT BAR  (v964)
   ─────────────────────────────────────────────────────────────
   DESKTOP:  Horizontal pill bar — bottom-right corner
             Orange call pill  |  Teal book pill  side-by-side
             Navy backdrop with blur — matches hero card design
             High-contrast, large text, instantly readable
             Same visual language as hero CTA buttons

   MOBILE:   Full-width bottom bar — strict 50/50 split
             Left half: teal book | Right half: orange call
             Icon + text centered in each half
             68px tall — easy thumb target
             Safe-area-inset aware for iPhone home indicator
   ─────────────────────────────────────────────────────────────
   JS: floating-bar.js adds .ga-bar-visible after 55vh scroll
       .ga-bar-active = booking section in viewport (cyan glow)
   ============================================================ */

/* ── Shared entrance state ───────────────────────────────── */
#gaFloatingBar {
  position: fixed;
  z-index: 99999;
  font-family: var(--ga-font);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity .32s cubic-bezier(.22,1,.36,1),
              transform .32s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  will-change: transform, opacity;
}
#gaFloatingBar * { box-sizing: border-box; }
#gaFloatingBar.ga-bar-hidden  { opacity:0; transform:translateY(110%); pointer-events:none; }
#gaFloatingBar.ga-bar-visible { opacity:1; transform:translateY(0);    pointer-events:auto; }

/* ── Shared: icon box ────────────────────────────────────── */
.ga-floating-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ga-floating-icon svg { display: block; }

/* ── Shared: text stack ──────────────────────────────────── */
.ga-floating-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* ── Focus a11y ──────────────────────────────────────────── */
.ga-floating-book:focus-visible,
.ga-floating-call:focus-visible { outline: 2px solid #90E0EF; outline-offset: 2px; }

/* ── Pulse animation (desktop live dot) ─────────────────── */
@keyframes ga-ice-pulse {
  0%,100% { opacity:1; box-shadow:0 0 8px rgba(0,229,255,.9),0 0 16px rgba(0,229,255,.4); }
  50%      { opacity:.5; box-shadow:0 0 2px rgba(0,229,255,.3); }
}

/* ══════════════════════════════════════════════════════════
   DESKTOP — Clean horizontal pill, bottom-right
   Same 50/50 concept as mobile but scaled up for desktop:
   Orange CALL left | Teal BOOK right
   No label sidebar — clean, bold, instantly readable
   ═════════════════════════════════════════════════════════= */
@media (min-width: 1025px) {
  #gaFloatingBar {
    right: 28px;
    bottom: 28px;
    left: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    border-radius: 18px;
    overflow: hidden;
    /* Navy glass — same dark navy as hero overlay */
    background: #01103A;
    border: 1px solid rgba(144,224,239,.22);
    box-shadow:
      0 20px 48px rgba(0,0,0,.55),
      0 1px 0 rgba(255,255,255,.08) inset;
  }

  /* Label hidden on desktop — no clutter */
  .ga-fbar-label { display: none; }
  .ga-fbar-divider {
    width: 1px;
    background: rgba(255,255,255,.18);
    flex-shrink: 0;
    align-self: stretch;
  }

  /* ── CALL pill — orange ── */
  .ga-floating-call {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 28px;
    min-height: 76px;
    background: linear-gradient(135deg, #FF7B45 0%, #FF6B35 50%, #E55A26 100%);
    border: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: filter .18s ease, transform .15s ease;
    cursor: pointer;
  }
  .ga-floating-call:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .ga-floating-call:active { transform: scale(.98); filter: brightness(.92); }

  .ga-floating-call .ga-floating-icon {
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.30);
    flex-shrink: 0;
  }
  .ga-floating-call .ga-floating-icon svg { stroke: #fff; width: 18px; height: 18px; }
  .ga-floating-call .ga-floating-text strong {
    font-size: 19px; font-weight: 900; color: #fff;
    letter-spacing: -.03em; line-height: 1.1; white-space: nowrap;
  }
  .ga-floating-call .ga-floating-text small {
    font-size: 10px; color: rgba(255,255,255,.80); display: block;
  }

  /* ── BOOK pill — teal, shimmer on hover ── */
  .ga-floating-book {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 14px;
    padding: 18px 28px;
    min-height: 76px;
    background: linear-gradient(135deg, #0096C7 0%, #0077B6 60%, #005F96 100%);
    border: none;
    cursor: pointer; font-family: var(--ga-font);
    appearance: none; -webkit-appearance: none; outline: none;
    -webkit-tap-highlight-color: transparent; text-decoration: none;
    transition: filter .18s ease, transform .15s ease;
  }
  .ga-floating-book::after {
    content: '';
    position: absolute; top: 0; left: -70%;
    width: 45%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
    transform: skewX(-18deg);
    transition: left .5s ease;
  }
  .ga-floating-book:hover::after { left: 125%; }
  .ga-floating-book:hover { filter: brightness(1.10); transform: translateY(-1px); }
  .ga-floating-book:active { transform: scale(.98); filter: brightness(.92); }

  .ga-floating-book .ga-floating-icon {
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.30);
    flex-shrink: 0;
  }
  .ga-floating-book .ga-floating-icon svg { stroke: #fff; width: 18px; height: 18px; }
  .ga-floating-book .ga-floating-text strong {
    font-size: 17px; font-weight: 900; color: #fff;
    letter-spacing: -.02em; line-height: 1.1; white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,.15);
  }
  .ga-floating-book .ga-floating-text small {
    font-size: 10px; color: rgba(255,255,255,.80); display: block;
  }

  /* Active — book pill brightens when calendar in viewport */
  #gaFloatingBar.ga-bar-active .ga-floating-book {
    background: linear-gradient(135deg, #00B4D8 0%, #0096C7 50%, #007BAA 100%);
    box-shadow: inset 0 0 0 1px rgba(0,229,255,.35);
  }
  #gaFloatingBar.ga-bar-active { border-color: rgba(0,229,255,.40); }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — Full-width bottom bar, strict 50/50 split
   ═════════════════════════════════════════════════════════= */
@media (max-width: 1024px) {
  #gaFloatingBar {
    left: 0; right: 0; bottom: 0; width: 100%;
    border-radius: 0;
    display: flex; flex-direction: row; align-items: stretch;
    /* Safe area for iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
    /* Deep navy base — unifies the two colored halves */
    background: #02144F;
    border-top: 2px solid rgba(0,229,255,.55);
    box-shadow: 0 -4px 24px rgba(0,0,0,.35);
  }

  /* No shimmer on mobile (perf) */
  #gaFloatingBar::before { display: none; }

  /* Status label and desktop divider hidden on mobile */
  .ga-fbar-label { display: none; }
  .ga-fbar-divider { display: none; }

  /* ── BOOK — left 50%, teal gradient ── */
  .ga-floating-book {
    flex: 1 1 50%;
    order: 1;  /* Mobile: Book goes LEFT */
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 0 12px;
    min-height: 66px;
    background: linear-gradient(135deg, #0096C7 0%, #0077B6 100%);
    border: none; border-right: 1px solid rgba(255,255,255,.15);
    border-radius: 0;
    cursor: pointer; font-family: var(--ga-font);
    appearance: none; -webkit-appearance: none; outline: none;
    -webkit-tap-highlight-color: transparent; text-decoration: none;
    transition: filter .15s ease;
  }
  .ga-floating-book:active { filter: brightness(.88); }

  /* ── CALL — right 50%, orange gradient ── */
  .ga-floating-call {
    flex: 1 1 50%;
    order: 2;  /* Mobile: Call goes RIGHT even though it's first in HTML */
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 0 12px;
    min-height: 66px;
    background: linear-gradient(135deg, #FF7B45 0%, #E55A26 100%);
    border: none; border-left: 1px solid rgba(255,255,255,.15);
    border-radius: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: filter .15s ease;
  }
  .ga-floating-call:active { filter: brightness(.85); }

  /* Mobile icons — compact square */
  .ga-floating-book .ga-floating-icon,
  .ga-floating-call .ga-floating-icon {
    width: 28px; height: 28px; border-radius: 7px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
    flex-shrink: 0;
  }
  .ga-floating-book .ga-floating-icon svg,
  .ga-floating-call .ga-floating-icon svg { stroke: #fff; width: 14px; height: 14px; }

  /* Mobile text — centered, sized to fit */
  .ga-floating-book .ga-floating-text strong {
    font-size: 13px; font-weight: 800; color: #fff;
    letter-spacing: -.01em; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ga-floating-book .ga-floating-text small {
    font-size: 9.5px; color: rgba(255,255,255,.75); display: block;
  }
  .ga-floating-call .ga-floating-text strong {
    font-size: 13px; font-weight: 900; color: #fff;
    letter-spacing: -.03em; line-height: 1.15; white-space: nowrap;
  }
  .ga-floating-call .ga-floating-text small {
    font-size: 9.5px; color: rgba(255,255,255,.75); display: block;
  }

  /* Active state — cyan border brightens */
  #gaFloatingBar.ga-bar-active { border-top-color: rgba(0,229,255,.85); }

  /* Hide desktop-only divider */
  .ga-fbar-divider { display: none; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print { #gaFloatingBar { display: none !important; } }

/* ============================================================
   22. SERVICE PAGE LAYOUT
   Content + sticky sidebar — used on all 6 service pages
   Named columns: .ga-service-main (left) + .ga-service-sidebar (right)
   ============================================================ */
.ga-service-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--ga-space-10); align-items: start; padding: var(--ga-space-16) 0; }

/* Named columns — use these in HTML for clarity */
.ga-service-main { min-width: 0; } /* prevents grid blowout on long content */

/* Sticky sidebar — uses shared .ga-sidebar-* classes from section 8c */
.ga-service-sidebar {
  position: sticky;
  top: calc(var(--ga-header-height) + var(--ga-space-5));
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-4);
}

/* Prose content area — shared on all service pages */
.ga-content-body { font-size: var(--ga-text-base); line-height: 1.75; color: var(--ga-text); }
.ga-content-body h2 { margin-top: var(--ga-space-10); margin-bottom: var(--ga-space-4); color: var(--ga-navy); }
.ga-content-body h3 { margin-top: var(--ga-space-8); margin-bottom: var(--ga-space-3); color: var(--ga-navy); }
.ga-content-body p  { margin-bottom: var(--ga-space-5); }
.ga-content-body ul { margin-bottom: var(--ga-space-5); }
.ga-content-body li { margin-bottom: var(--ga-space-2); }

/* Content image — same pattern every service page */
.ga-content-img {
  width: 100%;
  border-radius: var(--ga-radius-xl);
  box-shadow: var(--ga-shadow-lg);
  margin: var(--ga-space-8) 0;
  overflow: hidden;
}
.ga-content-img img { width: 100%; height: auto; display: block; }


/* ============================================================
   23. MEMBERSHIP CARDS
   ============================================================ */
.ga-membership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ga-space-6); }
.ga-membership-card {
  background: var(--ga-white);
  border: 2px solid var(--ga-border);
  border-radius: var(--ga-radius-2xl);
  overflow: hidden;
  box-shadow: var(--ga-shadow-md);
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}
.ga-membership-card:hover { transform: translateY(-6px); box-shadow: var(--ga-shadow-xl); }
.ga-membership-card-featured { border-color: var(--ga-primary); }

.ga-membership-badge {
  position: absolute; top: 0; right: var(--ga-space-4);
  background: linear-gradient(135deg, #F5C518 0%, #E5A800 100%);
  color: #1a1a1a;
  padding: 5px 14px;
  border-radius: 0 0 var(--ga-radius-sm) var(--ga-radius-sm);
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px;
}
.ga-membership-header { background: var(--ga-gradient-dark); padding: var(--ga-space-6) var(--ga-space-5); text-align: center; }
.ga-membership-header-featured { background: var(--ga-gradient-primary); }
.ga-membership-name    { font-size: var(--ga-text-2xl); font-weight: 900; color: var(--ga-white); margin-bottom: var(--ga-space-1); }
.ga-membership-tagline { font-size: var(--ga-text-sm); color: rgba(255,255,255,.80); }
.ga-membership-body    { padding: var(--ga-space-6); display: flex; flex-direction: column; flex: 1; gap: var(--ga-space-4); }


/* ============================================================
   24. FAQ ACCORDION
   Two variants: dark (navy bg) and light (white/light-gray bg)
   HTML pattern — use this exact markup:

   <div class="ga-faq-list">
     <div class="ga-faq-item">
       <button class="ga-faq-q" aria-expanded="false">Question text</button>
       <div class="ga-faq-a" hidden>
         <p>Answer text</p>
       </div>
     </div>
   </div>

   JS in ui.js handles toggle automatically via [data-faq] or
   .ga-faq-list discovery. No extra attributes needed.
   ============================================================ */

/* ── Shared structure ── */
.ga-faq-list { display: flex; flex-direction: column; }

.ga-faq-item { border-bottom: 1px solid rgba(0,0,0,.08); }
.ga-faq-item:first-child { border-top: 1px solid rgba(0,0,0,.08); }

.ga-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--ga-space-5) var(--ga-space-1);
  background: none;
  border: none;
  cursor: pointer;
  gap: var(--ga-space-4);
  text-align: left;
  font-family: var(--ga-font);
  font-size: var(--ga-text-base);
  font-weight: 700;
  color: var(--ga-navy);
  line-height: 1.4;
  transition: color .2s;
}
.ga-faq-q:hover { color: var(--ga-primary); }
.ga-faq-q[aria-expanded="true"] { color: var(--ga-primary); }

/* The +/× icon — generated via CSS, no extra HTML */
.ga-faq-q::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--ga-teal);
  flex-shrink: 0;
  line-height: 1;
  transition: transform .25s ease, color .2s;
}
.ga-faq-q[aria-expanded="true"]::after {
  transform: rotate(45deg);
  color: var(--ga-primary);
}

.ga-faq-a {
  padding: 0 var(--ga-space-1) var(--ga-space-5);
  animation: ga-faq-open .2s ease;
}
.ga-faq-a p { font-size: var(--ga-text-sm); color: var(--ga-text-muted); line-height: 1.7; margin: 0; }
.ga-faq-a a { color: var(--ga-primary); font-weight: 600; }

@keyframes ga-faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Dark variant — navy background (ga-faq section) ── */
.ga-faq { background: var(--ga-navy-dark); padding: var(--ga-space-20) 0; }
.ga-faq .ga-faq-item { border-color: rgba(255,255,255,.08); }
.ga-faq .ga-faq-item:first-child { border-top-color: rgba(255,255,255,.08); }
.ga-faq .ga-faq-q { color: var(--ga-white); }
.ga-faq .ga-faq-q:hover { color: var(--ga-teal-light); }
.ga-faq .ga-faq-q[aria-expanded="true"] { color: var(--ga-teal-light); }
.ga-faq .ga-faq-q[aria-expanded="true"]::after { color: var(--ga-teal-light); }
.ga-faq .ga-faq-a p { color: rgba(255,255,255,.72); }
.ga-faq .ga-faq-a a { color: var(--ga-teal-light); }

/* Legacy classes — kept for backward compat */
.ga-faq-inner  { max-width: var(--ga-max-width-text); margin: 0 auto; }
.ga-faq-header { text-align: center; margin-bottom: var(--ga-space-10); }


/* ============================================================
   25. ANIMATIONS
   Triggered by IntersectionObserver in ui.js
   ============================================================ */
.ga-animate { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; will-change: opacity, transform; }
.ga-animate.is-visible { will-change: auto; } /* release after animation */
.ga-animate.is-visible { opacity: 1; transform: translateY(0); }
.ga-animate-delay-1 { transition-delay: .10s; }
.ga-animate-delay-2 { transition-delay: .20s; }
.ga-animate-delay-3 { transition-delay: .30s; }
.ga-animate-delay-4 { transition-delay: .40s; }
.ga-animate-delay-5 { transition-delay: .50s; }

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  .ga-animate { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ============================================================
   26. RESPONSIVE BREAKPOINTS
   ============================================================ */


/* ── Tablet / Mobile: 1024px and below ── */
@media (max-width: 1024px) {
  :root { --ga-header-height: 80px; } /* mobile — 68px logo + 6px padding each side */

  /* Mobile header — logo fills left, hamburger pins right */
  .ga-header-inner { gap: 0; }
  .ga-logo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 56px);
  }
  .ga-logo-img {
    height: 62px;
    width: auto;
    max-width: 100%;
    object-position: left center;
  }
  .ga-hamburger {
    flex: 0 0 44px;
    width: 44px; height: 44px;
    display: flex;
    margin-left: 8px;
  }

  /* Hide desktop nav + phone CTA, show hamburger */
  .ga-desktop-nav,
  .ga-header-cta { display: none; }
  .ga-hamburger { display: flex; }

  /* Hero */
  .ga-hero-grid { grid-template-columns: 1fr; gap: var(--ga-space-10); }
  .ga-hero-cta-card { max-width: 480px; margin: 0 auto; }

  /* Services */
  .ga-services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Process */
  .ga-process-grid { grid-template-columns: 1fr; gap: var(--ga-space-4); }
  .ga-process-arrow { display: none; }

  /* Why */
  .ga-why-grid { grid-template-columns: 1fr; gap: var(--ga-space-10); }
  .ga-why-credential { left: 0; }

  /* Booking */
  .ga-booking-grid { grid-template-columns: 1fr; max-width: 100%; margin: 0 auto; }
  .ga-booking-sidebar  { order: 2; }
  .ga-booking-calendar { order: 1; }

  /* Areas */
  .ga-areas-grid { grid-template-columns: 1fr; gap: var(--ga-space-8); }
  .ga-areas-map-wrap { position: relative; top: auto; }
  .ga-areas-map-wrap iframe { height: 360px; }
  .ga-areas-county { grid-template-columns: 72px 1fr auto; }
  .ga-areas-county-thumb { width: 72px; height: 60px; }
  .ga-areas-map-note { position: static; margin-top: 10px; }

  /* Footer */
  .ga-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--ga-space-8); }
  .ga-footer-links-col { flex-direction: column; gap: var(--ga-space-6); }

  /* Service layout */
  .ga-service-layout { grid-template-columns: 1fr; gap: var(--ga-space-8); }
  .ga-service-sidebar { position: static; order: -1; display: grid; grid-template-columns: 1fr 1fr; }

  /* Membership */
  .ga-membership-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  /* CTA strip split */
  .ga-cta-strip-split { grid-template-columns: 1fr; }

  /* Form row */
  .ga-form-row { grid-template-columns: 1fr; }
}

/* ── Mobile: 640px and below ── */
@media (max-width: 640px) {
  .ga-section    { padding-top: var(--ga-space-12); padding-bottom: var(--ga-space-12); }
  .ga-section-sm { padding-top: var(--ga-space-8);  padding-bottom: var(--ga-space-8); }
  .ga-section-header { margin-bottom: var(--ga-space-8); }

  .ga-hero { min-height: auto; }
  .ga-hero-inner { padding: var(--ga-space-12) 0; }
  /* Trust pills: 2-column wrap on mobile — no ugly column stack */
  .ga-trust-pill-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ga-space-2);
    margin-top: var(--ga-space-4);
  }
  .ga-trust-pill {
    width: 100%;
    justify-content: flex-start;
    font-size: 10.5px;
    padding: 6px 11px;
    gap: 5px;
  }
  .ga-hero-cta-card  { padding: var(--ga-space-6); }

  .ga-trust-stat { flex: 1 1 50%; border-right: none; padding: var(--ga-space-4); }
  .ga-trust-stat:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,.15); }
  .ga-trust-stat:nth-child(1), .ga-trust-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.15); }
  .ga-trust-stat-num { font-size: 1.5rem; }
  .ga-trust-stat-label { font-size: 10px; letter-spacing: .3px; }

  .ga-services-grid { grid-template-columns: 1fr; }

  /* Booking section: prevent embed/card overflow on smaller phones */
  .ga-booking.ga-section { overflow-x: clip; }
  .ga-booking-inner.ga-wrap { width: min(100%, calc(100vw - 24px)); }
  .ga-booking-grid { gap: var(--ga-space-4); }
  .ga-booking-calendar {
    width: 100%;
    max-width: 100%;
    padding: var(--ga-space-4) var(--ga-space-3) var(--ga-space-5);
    border-radius: calc(var(--ga-radius-2xl) - 8px);
    overflow: hidden;
    box-sizing: border-box;
  }
  .ga-booking-calendar > *,
  .ga-booking-calendar .ga-lt-booking,
  .ga-booking-calendar .ga-lt-booking-highlevel,
  .ga-booking-calendar .ga-ghl-frame,
  .ga-booking-calendar iframe {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .ga-ghl-frame iframe { min-height: 820px; }
  .ga-booking-stats { gap: var(--ga-space-2); }
  .ga-booking-stat-num { font-size: clamp(1.25rem, 6vw, 1.75rem); }
  .ga-booking-stat-label { font-size: 9px; letter-spacing: .25px; }

  .ga-service-sidebar { grid-template-columns: 1fr; }

  .ga-footer-grid   { grid-template-columns: 1fr; padding: var(--ga-space-10) 0; }
  .ga-footer-brand  { text-align: center; align-items: center; }
  .ga-footer-brand .ga-footer-logo::after { margin: var(--ga-space-2) auto 0; }
  .ga-footer-links-col { flex-direction: column; gap: var(--ga-space-6); }
  .ga-footer-bottom { flex-direction: column; text-align: center; }

  .ga-btn-stack .ga-btn { width: 100%; justify-content: center; }

  .ga-page-hero-cta { flex-direction: column; }
  .ga-page-hero-cta .ga-btn { width: 100%; justify-content: center; }

  .ga-cta-strip-content { flex-direction: column; }
  .ga-cta-strip-actions { width: 100%; flex-direction: column; }
  .ga-cta-strip-actions .ga-btn { width: 100%; justify-content: center; }
  .ga-cta-strip-split-left,
  .ga-cta-strip-split-right { padding: var(--ga-space-10) var(--ga-space-5); }
}

/* ── Very small: 400px and below ── */
@media (max-width: 400px) {
  .ga-wrap { padding-left: var(--ga-space-4); padding-right: var(--ga-space-4); }
  .ga-hero-h1 { font-size: 1.875rem; }
  .ga-page-hero h1 {
    font-size: clamp(1.625rem, 7vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -.02em;
  }
  .ga-trust-stat-num { font-size: 1.35rem; }
  .ga-trust-stat-label { font-size: 9px; }
}


/* ============================================================
   27. PRINT
   ============================================================ */
@media print {
  #gaFloatingBar { display: none !important; }
  .ga-header { position: relative; box-shadow: none; }
  .ga-hero-overlay, .ga-hero-bg,
  .ga-page-hero-overlay, .ga-page-hero-bg { display: none; }
  .ga-hero-h1, .ga-hero-sub,
  .ga-page-hero h1, .ga-page-hero p { color: #000; }
}

/* ============================================================
   27. ADDITIONAL PAGE COMPONENTS
   Reviews page, About page, Service Areas hub
   All classes defined here — pages use them without redefining
   ============================================================ */

/* ── REVIEWS PAGE ── */
.ga-reviews-page-intro {
  max-width: 680px;
  margin: 0 auto var(--ga-space-10);
  text-align: center;
}
.ga-reviews-full-widget {
  background: var(--ga-white);
  border-radius: var(--ga-radius-2xl);
  border: 1px solid var(--ga-border);
  padding: var(--ga-space-8);
  box-shadow: var(--ga-shadow-md);
}

/* ── ABOUT PAGE ── */
.ga-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ga-space-16);
  align-items: center;
}
.ga-about-image-wrap {
  position: relative;
  border-radius: var(--ga-radius-2xl);
  overflow: hidden;
}
.ga-about-image-wrap img,
.ga-about-image-wrap .ga-img-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  border-radius: var(--ga-radius-2xl);
}
.ga-about-content .ga-eyebrow-pill { margin-bottom: var(--ga-space-4); }
.ga-about-content h2 { margin-bottom: var(--ga-space-5); }
.ga-about-content p { margin-bottom: var(--ga-space-5); color: var(--ga-text-muted); line-height: 1.7; }
.ga-about-license-badge {
  display: inline-flex; align-items: center; gap: var(--ga-space-3);
  background: var(--ga-off-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-lg);
  padding: var(--ga-space-3) var(--ga-space-5);
  margin-top: var(--ga-space-4);
}
.ga-about-license-badge strong { color: var(--ga-navy); font-size: var(--ga-text-sm); }

/* Team grid (used on About page) */
.ga-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ga-space-6);
}
.ga-team-card {
  background: var(--ga-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-xl);
  overflow: hidden;
  text-align: center;
}
.ga-team-card-img { aspect-ratio: 1; overflow: hidden; background: var(--ga-off-white); }
.ga-team-card-img img,
.ga-team-card-img .ga-img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.ga-team-card-body { padding: var(--ga-space-5); }
.ga-team-card-name { font-size: var(--ga-text-lg); font-weight: 700; color: var(--ga-navy); margin-bottom: var(--ga-space-1); }
.ga-team-card-role { font-size: var(--ga-text-sm); color: var(--ga-text-muted); }

/* ── SERVICE AREAS HUB PAGE ── */
.ga-areas-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ga-space-6);
}
.ga-area-hub-card {
  background: var(--ga-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--ga-text);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.ga-area-hub-card:hover { transform: translateY(-4px); box-shadow: var(--ga-shadow-xl); color: var(--ga-text); }
.ga-area-hub-card-img { aspect-ratio: 16/9; overflow: hidden; background: var(--ga-placeholder-bg); }
.ga-area-hub-card-img img,
.ga-area-hub-card-img .ga-img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.ga-area-hub-card-body { padding: var(--ga-space-5); flex: 1; }
.ga-area-hub-card-county { font-size: var(--ga-text-xl); font-weight: 800; color: var(--ga-navy); margin-bottom: var(--ga-space-2); }
.ga-area-hub-card-cities { font-size: var(--ga-text-sm); color: var(--ga-text-muted); line-height: 1.5; margin-bottom: var(--ga-space-4); }
.ga-area-hub-card-cta { font-size: var(--ga-text-sm); font-weight: 700; color: var(--ga-primary); }

/* ── ABOUT + AREAS RESPONSIVE ── */
@media (max-width: 1024px) {
  .ga-about-grid { grid-template-columns: 1fr; gap: var(--ga-space-10); }
  .ga-about-image-wrap { max-width: 500px; margin: 0 auto; }
}


/* ============================================================
   28. MISSING COMPONENTS — v970
   All components needed across service pages, county pages,
   reviews page, and promo offers page.
   ============================================================ */


/* ── 28a. CALLOUT BLOCK
   Fear-dissolve / promise statement inside content areas.
   Use inside .ga-service-main to break up prose with a
   visually distinct trust statement.

   HTML:
   <div class="ga-callout">
     <p class="ga-callout-text">We will never recommend a repair
     you don't need. We will never replace a system that can be fixed.</p>
   </div>

   Variants: ga-callout-accent (orange), ga-callout-green (promise)
   ──────────────────────────────────────────────────────────── */
.ga-callout {
  border-left: 4px solid var(--ga-teal);
  background: var(--ga-off-white);
  border-radius: 0 var(--ga-radius-lg) var(--ga-radius-lg) 0;
  padding: var(--ga-space-5) var(--ga-space-6);
  margin: var(--ga-space-8) 0;
}
.ga-callout-text {
  font-size: var(--ga-text-lg);
  font-weight: 700;
  color: var(--ga-navy);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}
/* Orange — urgency or warning */
.ga-callout-accent {
  border-left-color: var(--ga-accent);
  background: rgba(255,107,53,.06);
}
.ga-callout-accent .ga-callout-text { color: var(--ga-accent-dark); }
/* Green — promise / guarantee */
.ga-callout-green {
  border-left-color: var(--ga-green);
  background: rgba(45,198,83,.06);
}
.ga-callout-green .ga-callout-text { color: #186A2E; }


/* ── 28b. PROOF STATS ROW
   3-column inline stat row used inside content sections.
   NOT the full-width trust bar — this lives inside prose.

   HTML:
   <div class="ga-proof-stats">
     <div class="ga-proof-stat">
       <span class="ga-proof-num">500+</span>
       <span class="ga-proof-label">Jobs Completed</span>
     </div>
     <div class="ga-proof-stat">
       <span class="ga-proof-num">5★</span>
       <span class="ga-proof-label">Google Rating</span>
     </div>
     <div class="ga-proof-stat">
       <span class="ga-proof-num">24/7</span>
       <span class="ga-proof-label">Emergency Response</span>
     </div>
   </div>
   ──────────────────────────────────────────────────────────── */
.ga-proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ga-space-4);
  margin: var(--ga-space-8) 0;
}
.ga-proof-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ga-space-5);
  background: var(--ga-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-xl);
  box-shadow: var(--ga-shadow-sm);
  gap: var(--ga-space-1);
}
.ga-proof-num {
  font-size: var(--ga-text-3xl);
  font-weight: 900;
  color: var(--ga-primary);
  line-height: 1;
  letter-spacing: -.03em;
}
.ga-proof-label {
  font-size: var(--ga-text-xs);
  font-weight: 700;
  color: var(--ga-text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  line-height: 1.3;
}
/* On dark backgrounds */
.ga-proof-stats-dark .ga-proof-stat {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}
.ga-proof-stats-dark .ga-proof-num  { color: var(--ga-teal-light); }
.ga-proof-stats-dark .ga-proof-label { color: rgba(255,255,255,.70); }
@media (max-width: 640px) {
  .ga-proof-stats { grid-template-columns: repeat(3, 1fr); gap: var(--ga-space-3); }
  .ga-proof-num { font-size: var(--ga-text-2xl); }
  .ga-proof-stat { padding: var(--ga-space-4) var(--ga-space-3); }
}


/* ── 28c. REVIEW WALL
   Trustindex embed shell. Used on Reviews page (full-page)
   and optionally on service/county pages (compact).

   HTML — full page version:
   <div class="ga-review-wall">
     <div class="ga-review-wall-header">
       <div class="ga-review-wall-meta">
         <span class="ga-stars">★★★★★</span>
         <strong>5.0 on Google</strong>
       </div>
     </div>
     <div class="ga-review-wall-embed">
       [Trustindex script goes here]
     </div>
   </div>

   HTML — compact (inside service/county pages):
   <div class="ga-review-wall ga-review-wall-compact">
     <div class="ga-review-wall-embed">
       [Trustindex script]
     </div>
   </div>
   ──────────────────────────────────────────────────────────── */
.ga-review-wall {
  background: var(--ga-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-2xl);
  overflow: hidden;
  box-shadow: var(--ga-shadow-lg);
}
.ga-review-wall-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ga-space-4) var(--ga-space-6);
  border-bottom: 1px solid var(--ga-border);
  background: linear-gradient(180deg, var(--ga-off-white), var(--ga-white));
}
.ga-review-wall-meta {
  display: flex;
  align-items: center;
  gap: var(--ga-space-3);
  font-size: var(--ga-text-sm);
  font-weight: 700;
  color: var(--ga-navy);
}
.ga-review-wall-embed {
  padding: var(--ga-space-5);
  min-height: 300px; /* prevents layout shift while Trustindex loads */
}
/* Compact — no header, less padding */
.ga-review-wall-compact { border-radius: var(--ga-radius-xl); }
.ga-review-wall-compact .ga-review-wall-embed { padding: var(--ga-space-4); min-height: 200px; }


/* ── 28d. COUNTY SERVICES LIST
   Used on all 5 county pages. Compact list of services
   offered in that county with links to each service page.

   HTML:
   <div class="ga-county-services">
     <h3 class="ga-county-services-title">Gutter Services in %county%</h3>
     <ul class="ga-county-services-list">
       <li><a href="/services/air-conditioning-repair/">AC Repair</a></li>
       ...
     </ul>
   </div>
   ──────────────────────────────────────────────────────────── */
.ga-county-services {
  background: var(--ga-off-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-xl);
  padding: var(--ga-space-6);
  margin: var(--ga-space-6) 0;
}
.ga-county-services-title {
  font-size: var(--ga-text-base);
  font-weight: 800;
  color: var(--ga-navy);
  margin: 0 0 var(--ga-space-4);
  padding-bottom: var(--ga-space-3);
  border-bottom: 2px solid var(--ga-teal);
  display: inline-block;
}
.ga-county-services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-2);
}
.ga-county-services-list li::before { display: none; } /* override ga-checklist if inherited */
.ga-county-services-list a {
  display: flex;
  align-items: center;
  gap: var(--ga-space-2);
  font-size: var(--ga-text-sm);
  font-weight: 600;
  color: var(--ga-primary);
  padding: var(--ga-space-2) 0;
  border-bottom: 1px solid var(--ga-border);
  transition: gap .15s ease, color .15s ease;
}
.ga-county-services-list li:last-child a { border-bottom: none; }
.ga-county-services-list a::before {
  content: '→';
  font-size: 12px;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.ga-county-services-list a:hover { color: var(--ga-primary-dark); gap: var(--ga-space-3); }
.ga-county-services-list a:hover::before { transform: translateX(3px); }


/* ── 28e. CITY LIST
   Row of city name tags on county pages.

   HTML:
   <div class="ga-city-list" aria-label="Cities served in Marion County">
     <span class="ga-city-tag">Ocala</span>
     <span class="ga-city-tag">Belleview</span>
     <span class="ga-city-tag">Dunnellon</span>
     ...
   </div>
   ──────────────────────────────────────────────────────────── */
.ga-city-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-2);
  margin: var(--ga-space-4) 0;
}
.ga-city-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--ga-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-pill);
  font-size: var(--ga-text-sm);
  font-weight: 600;
  color: var(--ga-navy);
  box-shadow: var(--ga-shadow-sm);
}
/* On dark backgrounds */
.ga-city-list-dark .ga-city-tag {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: var(--ga-white);
}


/* ── 28f. PROMO CARD
   Used on /promo-offers/ page. Each card = one offer.

   HTML:
   <div class="ga-promo-card">
     <div class="ga-promo-card-badge">Limited Time</div>
     <div class="ga-promo-card-body">
       <h3 class="ga-promo-card-title">Fall Gutter Cleaning Special</h3>
       <p class="ga-promo-card-desc">Full system inspection...</p>
       <div class="ga-promo-card-value">
         <span class="ga-promo-price">$89</span>
         <span class="ga-promo-was">Reg. $149</span>
       </div>
     </div>
     <div class="ga-promo-card-cta">
       <a href="#ga-book-form" class="ga-btn ga-btn-accent ga-btn-full">Claim This Offer</a>
     </div>
   </div>
   ──────────────────────────────────────────────────────────── */
.ga-promo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ga-space-6);
}
.ga-promo-card {
  background: var(--ga-white);
  border: 2px solid var(--ga-border);
  border-radius: var(--ga-radius-2xl);
  overflow: hidden;
  box-shadow: var(--ga-shadow-md);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}
.ga-promo-card:hover { transform: translateY(-4px); box-shadow: var(--ga-shadow-xl); }
.ga-promo-card-badge {
  position: absolute;
  top: 0; right: var(--ga-space-4);
  background: var(--ga-gradient-accent);
  color: var(--ga-white);
  padding: 5px 14px;
  border-radius: 0 0 var(--ga-radius-sm) var(--ga-radius-sm);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  box-shadow: var(--ga-shadow-accent);
}
.ga-promo-card-header {
  height: 6px;
  background: linear-gradient(90deg, var(--ga-teal), var(--ga-primary));
}
.ga-promo-card-body {
  padding: var(--ga-space-8) var(--ga-space-6) var(--ga-space-4);
  flex: 1;
}
.ga-promo-card-title {
  font-size: var(--ga-text-xl);
  font-weight: 900;
  color: var(--ga-navy);
  margin: 0 0 var(--ga-space-3);
  line-height: 1.2;
  padding-right: var(--ga-space-10); /* clear the badge */
}
.ga-promo-card-desc {
  font-size: var(--ga-text-sm);
  color: var(--ga-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--ga-space-5);
}
.ga-promo-card-value {
  display: flex;
  align-items: baseline;
  gap: var(--ga-space-3);
  margin-bottom: var(--ga-space-4);
}
.ga-promo-price {
  font-size: var(--ga-text-4xl);
  font-weight: 900;
  color: var(--ga-accent);
  letter-spacing: -.03em;
  line-height: 1;
}
.ga-promo-was {
  font-size: var(--ga-text-sm);
  color: var(--ga-text-muted);
  text-decoration: line-through;
}
.ga-promo-card-cta { padding: 0 var(--ga-space-6) var(--ga-space-6); }
@media (max-width: 1024px) {
  .ga-promo-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}


/* ── 28g. INLINE CTA
   Mid-content conversion nudge. Softer than a full section.
   Use inside .ga-service-main between prose blocks.

   HTML:
   <div class="ga-inline-cta">
     <p class="ga-inline-cta-text">Ready to get an honest answer about your system?</p>
     <div class="ga-inline-cta-actions">
       <a href="#ga-book-form" class="ga-btn ga-btn-primary">Get a Free Estimate</a>
       <a href="tel:3525548633" class="ga-btn ga-btn-outline-dark">(352) 554-8633</a>
     </div>
   </div>
   ──────────────────────────────────────────────────────────── */
.ga-inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ga-space-4);
  background: var(--ga-off-white);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-xl);
  padding: var(--ga-space-5) var(--ga-space-6);
  margin: var(--ga-space-8) 0;
}
.ga-inline-cta-text {
  font-size: var(--ga-text-base);
  font-weight: 700;
  color: var(--ga-navy);
  margin: 0;
  line-height: 1.4;
  max-width: 400px;
}
.ga-inline-cta-actions {
  display: flex;
  gap: var(--ga-space-3);
  flex-wrap: wrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .ga-inline-cta { flex-direction: column; align-items: flex-start; }
  .ga-inline-cta-actions { width: 100%; flex-direction: column; }
  .ga-inline-cta-actions .ga-btn { width: 100%; justify-content: center; }
}


/* ── 28h. IMAGE ASPECT RATIOS — additional slots
   ga-img-county  : county hero / feature image (16/9, wider crop)
   ga-img-team    : square team member headshot
   ga-img-promo   : promo card image (4/3)
   ──────────────────────────────────────────────────────────── */
.ga-img-county { aspect-ratio: 16 / 9; border-radius: var(--ga-radius-xl); }
.ga-img-team   { aspect-ratio: 1 / 1;  border-radius: var(--ga-radius-xl); }
.ga-img-promo  { aspect-ratio: 4 / 3;  border-radius: var(--ga-radius-lg) var(--ga-radius-lg) 0 0; }


/* ============================================================
   29. CONTENT-VISIBILITY — render performance
   Tells the browser to skip layout/paint of offscreen sections
   until they approach the viewport. Zero visual change, measurable
   LCP + CLS improvement on long pages (service pages, county pages).
   contain-intrinsic-size provides a size hint to prevent layout shift
   when the browser skips rendering.
   ============================================================ */
.ga-faq,
.ga-reviews,
.ga-county-services,
.ga-city-list,
.ga-review-wall,
.ga-proof-stats {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}