/* ============================================================
   GDK VISUAL REPAIR PACK — v1.0
   File: gdk-fixes.css
   Author: Audit by Claude / Garage Door Kingdom LLC
   Instructions: Add AFTER your main stylesheet in every PHP template.
   e.g. <link rel="stylesheet" href="/assets/css/gdk-fixes.css">
   ============================================================ */

:root {
  --gdk-amber:        #F59E0B;
  --gdk-amber-dark:   #D97706;
  --gdk-amber-light:  rgba(245, 158, 11, 0.15);
  --gdk-navy-900:     #0D1B3E;
  --gdk-navy-700:     #162346;
  --gdk-navy-500:     #1E3160;
  --gdk-white:        #FFFFFF;
  --gdk-gray-100:     #F8F9FA;
  --gdk-gray-500:     #6B7280;
  --gdk-gray-900:     #111827;
  --gdk-shadow-sm:    0 1px 3px  rgba(0, 0, 0, 0.10);
  --gdk-shadow-md:    0 4px 16px rgba(0, 0, 0, 0.10);
  --gdk-shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.14);
  --gdk-shadow-amber: 0 4px 20px rgba(245, 158, 11, 0.38);
}

/* 2. ANNOUNCEMENT BAR — Red → Amber */
.announcement-bar,
.top-bar,
.site-header .emergency-bar,
body > header > .top-strip,
[class*="announcement"],
[class*="top-bar"] {
  background-color: var(--gdk-amber-dark) !important;
  color: var(--gdk-white) !important;
}
.announcement-bar a,
.top-bar a {
  color: var(--gdk-white) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 3. LEARN MORE LINKS — Rogue red → Brand Amber */
.service-card .learn-more,
.service-card a.learn-more,
.services-grid a.learn-more,
.card-body .learn-more,
a.learn-more-link,
.service-card [class*="learn"],
.service-card p > a,
.card-body > a {
  color: var(--gdk-amber) !important;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease, gap 0.2s ease;
}
.service-card .learn-more:hover,
.service-card a.learn-more:hover,
a.learn-more-link:hover {
  color: var(--gdk-amber-dark) !important;
  gap: 8px;
}

/* 4. HERO SUBHEADLINE — Max-width constraint */
.hero-description,
.hero .subtitle,
.hero-subheadline,
.hero__subtext,
.hero > .container > p,
section.hero p:not([class]) {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
  font-size: 1.125rem;
}

/* 5. STATS BAR — All-caps label tracking */
.stats-bar .stat-label,
.stats-section .label,
.stats-grid [class*="label"],
.stats-bar p,
.stats-bar span:not([class*="number"]) {
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.80;
}
@media (max-width: 767px) {
  .stats-bar,
  .stats-grid,
  .stats-section > .container > div {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 8px;
    padding: 28px 20px;
  }
  .stats-bar .stat-number,
  .stats-grid [class*="number"] {
    font-size: 2rem;
    line-height: 1;
  }
  .stats-bar .stat-label,
  .stats-grid [class*="label"] {
    font-size: 0.625rem;
  }
}

/* 6. SERVICE CARD HEADERS — Proportion fix */
.service-card .card-header,
.service-card-header,
.services-grid .card > div:first-child,
[class*="service-card"] > [class*="header"] {
  padding: 20px 24px 16px !important;
  min-height: unset !important;
}
.service-card .card-icon,
[class*="service-card"] [class*="icon"] {
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
}
.service-card .card-title,
[class*="service-card"] [class*="title"],
[class*="service-card"] h3 {
  font-size: 1rem !important;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.service-card .card-body,
[class*="service-card"] > [class*="body"] {
  padding: 18px 24px 22px !important;
}

/* 7. LOCATION LABEL IN CARDS — Remove repetition */
.service-card .card-location,
.service-card .location-label,
.service-card [class*="location"],
.service-card .card-header span:last-child {
  display: none !important;
}

/* 8. EMERGENCY CARD — Red header → Navy */
.service-card.emergency .card-header,
.service-card[data-type="emergency"] .card-header,
.services-grid .card.emergency > div:first-child,
.services-grid .card:last-child .card-header {
  background-color: var(--gdk-navy-900) !important;
  border-top: 3px solid #EF4444;
}

/* 9. SERVICE AREA PILLS — Center-justified */
.service-areas-grid,
.location-pills-wrapper,
[class*="area"] [class*="pills"],
[class*="location-pills"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  max-width: 920px;
  margin: 0 auto;
}
.location-pill,
[class*="location-pill"],
.service-areas-grid a,
.service-areas-grid button {
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  border-radius: 9999px;
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
}
.location-pill:hover,
[class*="location-pill"]:hover,
.service-areas-grid a:hover {
  background: var(--gdk-amber-light);
  border-color: var(--gdk-amber);
  color: var(--gdk-amber);
}

/* 10. HERO CTA HIERARCHY */
.hero .btn-primary,
.hero .btn-call,
.hero-cta-group .btn-primary,
.hero-buttons .btn-primary {
  box-shadow: var(--gdk-shadow-amber) !important;
  font-weight: 800 !important;
  font-size: 1.0625rem !important;
}
.hero .btn-secondary,
.hero .btn-explore,
.hero-cta-group .btn-secondary,
.hero-buttons .btn-secondary {
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
}
@media (max-width: 575px) {
  .hero-cta-group,
  .hero-buttons {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100%;
  }
  .hero-cta-group .btn-primary,
  .hero-cta-group .btn-secondary,
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    width: 100% !important;
    max-width: 340px !important;
    min-height: 52px !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* 11. EMOJI ICONS — Why Choose Us */
.why-card,
[class*="why-card"],
[class*="choose-card"] {
  text-align: center;
}
.why-card .card-icon,
[class*="why-card"] .card-icon,
[class*="choose-card"] .card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  background: rgba(245, 158, 11, 0.13);
  border-radius: 14px;
  font-size: 1.5rem;
  transition: transform 0.2s;
}
.why-card:hover .card-icon,
[class*="why-card"]:hover .card-icon {
  transform: scale(1.08);
}

/* 12. CONSISTENT SHADOW SYSTEM */
.service-card,
.why-card,
.review-card,
.testimonial-card,
[class*="service-card"],
[class*="review-card"] {
  box-shadow: var(--gdk-shadow-md) !important;
  transition: box-shadow 0.2s, transform 0.2s;
}
.service-card:hover,
.why-card:hover {
  box-shadow: var(--gdk-shadow-lg) !important;
  transform: translateY(-2px);
}

/* 13. AMBER HEADING UNDERLINE — Global */
.section-divider,
.heading-rule {
  width: 44px !important;
  height: 3px !important;
  background: var(--gdk-amber) !important;
  border: none !important;
  border-radius: 2px !important;
  margin: 10px 0 20px !important;
}

/* 14. FLOATING MOBILE CTA */
.float-call,
.floating-cta,
.mobile-call-btn,
.fab-call {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  background: var(--gdk-amber) !important;
  color: var(--gdk-navy-900) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: 14px 28px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: var(--gdk-shadow-amber) !important;
  min-width: 210px;
  min-height: 52px;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .float-call,
  .floating-cta,
  .mobile-call-btn,
  .fab-call {
    display: none !important;
  }
}

/* 15. FOOTER DEAD SPACE */
.cta-section,
[class*="cta-section"],
section.pre-footer {
  padding-bottom: 64px;
  margin-bottom: 0 !important;
}
footer,
.site-footer {
  margin-top: 0 !important;
}

/* 16. REVIEW CARDS — Trust layer */
.review-card .verify-link,
.testimonial-card .verify-link {
  font-size: 0.75rem;
  color: var(--gdk-amber);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  margin-top: 2px;
}
.review-card .review-date,
.testimonial-card .review-date {
  font-size: 0.75rem;
  color: var(--gdk-gray-500);
  display: block;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════
   17. BEM SELECTOR PATCHES (actual class names on-site)
   The live site uses BEM notation — patching here.
   ═══════════════════════════════════════════════════════ */

/* LEARN MORE links — service-card__link (BEM) */
.service-card__link,
.service-card__link:link,
.service-card__link:visited {
  color: var(--gdk-amber) !important;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease, gap 0.2s ease;
}
.service-card__link:hover {
  color: var(--gdk-amber-dark) !important;
  gap: 8px;
}

/* Service card header — BEM: service-card__top */
.service-card__top {
  padding: 20px 24px 16px !important;
  min-height: unset !important;
}

/* Service card body — BEM: service-card__body */
.service-card__body {
  padding: 18px 24px 22px !important;
}

/* Service card heading — BEM: service-card__heading */
.service-card__heading {
  font-size: 1rem !important;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.service-card__heading span {
  display: none !important;   /* Hide "Sunrise, FL" repeat inside heading */
}

/* Emergency service card — keep red as thin top accent only */
.service-card--emergency .service-card__top,
.service-card[data-type="emergency"] .service-card__top {
  background-color: var(--gdk-navy-900) !important;
  border-top: 3px solid #EF4444 !important;
}

/* Shadow + hover lift on service cards */
.service-card {
  box-shadow: var(--gdk-shadow-md) !important;
  transition: box-shadow 0.2s, transform 0.2s;
}
.service-card:hover {
  box-shadow: var(--gdk-shadow-lg) !important;
  transform: translateY(-2px);
}


/* ══════════════════════════════════════════════════════════════
   18. INTERNAL PAGE TEMPLATES — gr-* PREFIX (Gates & Fences)
   ═══════════════════════════════════════════════════════════ */

/* ── gr-hero-badge: Hero pill badge ── */
.gr-hero-badge {
  background-color: var(--gdk-amber) !important;
  color: var(--gdk-navy-900) !important;
  border: none !important;
}

/* ── gr-tag-red: "Critical service" tag variant ── */
.gr-tag-red,
.gr-tag.gr-tag-red {
  background: #FFFBEB !important;
  color: var(--gdk-amber-dark) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

/* ── gr-sign-card: Warning signs cards (red top border) ── */
.gr-sign-card {
  border-top-color: var(--gdk-amber) !important;
}

/* ── gr-alert: Alert box (default uses red left border) ── */
.gr-alert:not(.gr-alert-amber):not(.gr-alert-green) {
  border-left-color: var(--gdk-amber) !important;
  border-top-color: transparent !important;
  background-color: #FFFBEB !important;
}

/* ── gr-threat-stat: Stat badge inside threat section ── */
.gr-threat-stat {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--gdk-amber-dark) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

/* ── gr-comp-risk / gr-risk-critical: Risk level badge ── */
.gr-risk-critical,
.gr-comp-risk.gr-risk-critical {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--gdk-amber-dark) !important;
}

/* ── Phone links that appeared red ── */
.gr-phone-cta,
.gr-phone-block a[href*="tel"],
.gr-hero a[href*="tel"]:not(.gr-btn-primary) {
  color: var(--gdk-amber) !important;
}

/* ══════════════════════════════════════════════════════════════
   19. INTERNAL PAGE TEMPLATES — gd-* PREFIX (Garage Doors)
   ═══════════════════════════════════════════════════════════ */

/* ── gd-pillar-accent--6: 6th pillar icon accent ── */
.gd-pillar-accent--6,
.gd-pillar-accent:nth-child(6) {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--gdk-amber) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

/* ── gd-hero-badge: Already amber but ensure consistency ── */
.gd-hero-badge {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: var(--gdk-amber) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   20. GLOBAL — Any remaining red tel: links & hero badges
   ═══════════════════════════════════════════════════════════ */

/* Any hero badge across ALL templates */
[class*="hero-badge"],
[class*="hero__badge"],
[class*="badge--red"],
[class*="badge-red"] {
  background-color: var(--gdk-amber) !important;
  color: var(--gdk-navy-900) !important;
}

/* Exception — amber/green/navy badges should NOT be overridden */
[class*="badge--amber"],
[class*="badge-amber"],
[class*="badge--navy"],
[class*="badge-navy"],
[class*="badge--green"],
[class*="alert-amber"],
[class*="alert-green"],
.gd-hero-badge {
  background-color: unset !important;
  color: unset !important;
}
/* Re-apply gd-hero-badge correctly */
.gd-hero-badge {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: var(--gdk-amber) !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 21 — SERVICE-CARD--EMERGENCY  (Garage Door Repair page)
   Overrides the hardcoded red border-top on the Emergency Service card header
   rgb(239, 68, 68) → var(--gdk-amber)
   ══════════════════════════════════════════════════════════ */
.service-card--emergency .service-card__top {
  border-top-color: var(--gdk-amber) !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION 22 — REVIEWS-NOTE LINK  (site-wide reviews footer line)
   "Read All Reviews on Google →" link was red → amber
   ══════════════════════════════════════════════════════════ */
.reviews-note a,
.reviews-note a:link,
.reviews-note a:visited {
  color: var(--gdk-amber) !important;
}
.reviews-note a:hover {
  color: var(--gdk-amber-dark) !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION 23 — GR-ALERT LINKS  (gate repair page alert boxes)
   Phone/CTA links inside .gr-alert were red → amber
   ══════════════════════════════════════════════════════════ */
.gr-alert a,
.gr-alert a:link,
.gr-alert a:visited {
  color: var(--gdk-amber) !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION 24 — SF-SVC-CARD--EMERGENCY  (Service Area city pages)
   Fix: H3 heading was rgb(6,15,38) on rgb(6,15,38) background = invisible
   Fix: paragraph text too dark for navy background
   Fix: font sizes too small
   ══════════════════════════════════════════════════════════ */
.sf-svc-card--emergency {
  color: #FFFFFF !important;
}
.sf-svc-card--emergency h2,
.sf-svc-card--emergency h3,
.sf-svc-card--emergency h4 {
  color: #FFFFFF !important;
  font-size: 1rem !important;
}
.sf-svc-card--emergency p,
.sf-svc-card--emergency li {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.9rem !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION 25 — SF-WARNING-BOX  (Service Area city pages)
   Red left-border + pink bg → amber brand colors
   ══════════════════════════════════════════════════════════ */
.sf-warning-box {
  border-left-color: var(--gdk-amber) !important;
  border-color: var(--gdk-amber-light) var(--gdk-amber-light) var(--gdk-amber-light) var(--gdk-amber) !important;
  background-color: #FFFBEB !important;
}
.sf-warning-box *,
.sf-tip-box * {
  color: var(--gdk-navy-900) !important;
}

/* ============================================================
   SECTION 26 — GDK-FORM REQUIRED ASTERISK (form labels)
   Replaces red * required-field indicators with amber
   ============================================================ */
.gdk-form__label span,
.gdk-form__label span:only-child {
  color: var(--gdk-amber) !important;
  border-color: transparent !important;
}


/* ============================================================
   SECTION 27 — GR-HERO H1 EM TYPOGRAPHY FIX
   "South Florida" & dynamic location labels inside H1
   Fixes: 11.52px → 20px | negative letter-spacing → spaced
   Affects: all .gr-hero pages (gate-repair, gate-installation, etc.)
   ============================================================ */
.gr-hero h1 em,
.gr-hero__title em,
.ni-hero h1 em,
.ni-hero__title em {
  display: block !important;
  font-size: 1.25rem !important;   /* 20px — passes WCAG 1.4.4 */
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gdk-amber) !important;
  margin: 0.15em auto -62px !important; /* -62px cancels h1 line-height strut from <br> */
  line-height: 1.2 !important;
}

/* Remove <br> tags flanking the em — display:block handles line breaks */
.gr-hero h1 br,
.gr-hero__title br,
.ni-hero h1 br,
.ni-hero__title br {
  display: block !important;
  font-size: 0 !important;
  line-height: 0 !important;
  content: "" !important;
}

/* Hero badge text (11px → 13px minimum) */
.gr-hero-badge,
.gr-hero .hero-badge,
.ni-hero-badge,
.ni-hero .hero-badge,
[class*="gr-"][class*="badge"],
[class*="ni-"][class*="badge"] {
  font-size: 0.8125rem !important;  /* 13px */
  letter-spacing: 0.06em !important;
}

/* ============================================================
   SECTION 28 — ANNOUNCEMENT BAR WCAG CONTRAST FIX
   white on #D97706 amber = 3.19:1 (FAILS 4.5:1 for 14px text)
   Fix: darken text to navy for sufficient contrast
   ============================================================ */
.announcement-bar,
.alert-bar,
[class*="announcement"],
[class*="alert-strip"],
.site-banner {
  color: var(--gdk-navy-900) !important;
}

/* Phone link in announcement bar — keep amber underline */
.announcement-bar a,
.alert-bar a,
[class*="announcement"] a {
  color: var(--gdk-navy-900) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* Specific top-bar structure used on GDK */
.gr-topbar,
.gdk-topbar,
.top-bar,
.topbar {
  color: var(--gdk-navy-900) !important;
}
.gr-topbar a,
.gdk-topbar a,
.top-bar a,
.topbar a {
  color: var(--gdk-navy-900) !important;
  font-weight: 700 !important;
}


/* ══════════════════════════════════════════════
   29. FEATURED HERO IMAGES — MAX-HEIGHT + PROPORTIONAL
   FIX: Images too tall (700px+), dominating content area
   Affects: gate-repair, new-gate-installation, hurricane pages
   ══════════════════════════════════════════════ */

/* Container: cap height & clip overflow */
figure.ni-featured-hero,
figure.gr-featured-hero,
.wp-block-image.ni-featured-hero,
.wp-block-image.gr-featured-hero {
  max-height: 460px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  margin: 1.5rem auto 2.5rem !important;
  display: block !important;
  width: 100% !important;
}

/* Image inside: fill container, crop rather than stretch */
figure.ni-featured-hero img,
figure.gr-featured-hero img,
.wp-block-image.ni-featured-hero img,
.wp-block-image.gr-featured-hero img {
  width: 100% !important;
  height: 460px !important;
  max-height: 460px !important;
  object-fit: cover !important;
  object-position: center 30% !important; /* favour upper subject area */
  display: block !important;
  border-radius: 12px !important;
}

/* Tighter on mobile — no more full-screen takeover */
@media (max-width: 768px) {
  figure.ni-featured-hero,
  figure.gr-featured-hero,
  .wp-block-image.ni-featured-hero,
  .wp-block-image.gr-featured-hero {
    max-height: 280px !important;
  }
  figure.ni-featured-hero img,
  figure.gr-featured-hero img,
  .wp-block-image.ni-featured-hero img,
  .wp-block-image.gr-featured-hero img {
    height: 280px !important;
    max-height: 280px !important;
  }
}

/* ══════════════════════════════════════════════
   30. SERVICE CARD ICONS — BRANDED AMBER BOX
   FIX: Raw emoji rendering inconsistently across OS/browser
   Adds: amber-tinted rounded container for professional look
   ══════════════════════════════════════════════ */

.service-icon,
.why-icon,
[class*="-svc-icon"],
[class*="service-icon"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  background: rgba(245, 158, 11, 0.10) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.22) !important;
  border-radius: 12px !important;
  margin-bottom: 0.875rem !important;
}

/* Signs & alerts — tighter, inline layout */
.gr-sign-icon,
.gr-alert-icon {
  font-size: 1.25rem !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(245, 158, 11, 0.10) !important;
  border-radius: 6px !important;
  padding: 2px 4px !important;
}

/* Emergency card icon — stronger amber tint */
.sf-svc-card--emergency .service-icon,
.service-card .service-icon:has(+ *) {
  background: rgba(245, 158, 11, 0.20) !important;
  border-color: rgba(245, 158, 11, 0.40) !important;
}

/* ══════════════════════════════════════════════
   31. EMERGENCY SERVICE CARD — HEADING VISIBILITY
   FIX: Card heading invisible on dark navy background
   ══════════════════════════════════════════════ */

/* Restore heading to amber so it pops on dark card */
[class*="svc-card--emergency"] h2,
[class*="svc-card--emergency"] h3,
[class*="svc-card--emergency"] h4 {
  color: var(--gdk-amber) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
}

/* Body text — use light for contrast on dark card */
[class*="svc-card--emergency"] p,
[class*="svc-card--emergency"] li {
  color: rgba(255,255,255,0.88) !important;
}

/* Lightning bolt icon inside emergency card */
[class*="svc-card--emergency"] [class*="svc-icon"],
[class*="svc-card--emergency"] .service-icon {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: var(--gdk-amber) !important;
}

/* ══════════════════════════════════════════════
   32. SECTION HEADING ACCENT EM — INLINE KEYWORD FIX
   FIX: Words like "Different", "Right", "Best" inside h2/h3
   are rendering at 11.52px (inline em scaling)
   They should be a styled amber accent, ~65% of heading size
   ══════════════════════════════════════════════ */

/* Inline em in section body headings — NOT the hero h1 */
[class*="-section"] h2 em,
[class*="-section"] h3 em,
.ni-section h2 em,
.ni-section h3 em,
.gr-section h2 em,
.gr-section h3 em,
.ni-pillars h2 em,
.ni-pillars h3 em,
section h2 em,
section h3 em {
  display: inline !important;
  font-size: 0.6em !important;       /* 60% of parent h2 — accent, not micro */
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--gdk-amber) !important;
  letter-spacing: 0.04em !important;
  vertical-align: middle !important;
  margin-left: 0.3em !important;
  line-height: inherit !important;
}

/* ══════════════════════════════════════════════
   33. SERVICE CARD ICON SPACING
   FIX: Icon too close to card title — insufficient gap
   ══════════════════════════════════════════════ */

.service-card {
  padding: 1.5rem !important;
}

.service-card [class*="icon"],
.service-card .service-icon {
  margin-bottom: 1rem !important;
}

/* Why-cards on commercial/about sections */
.why-card {
  padding: 1.25rem !important;
}
.why-card [class*="icon"],
.why-card .why-icon {
  margin-bottom: 0.875rem !important;
}

/* Hurricane / other service cards */
[class*="-card"] [class*="-icon"],
[class*="-card"] .service-icon {
  margin-bottom: 0.75rem !important;
}

/* ══════════════════════════════════════════════
   34. HERO H1 INLINE EM — LOCATION ACCENT
   FIX: cg-hero, fn-hero (and any *-hero except gr/ni) have
   an inline <em> at end of h1 rendering at 11.52px
   These should be a styled amber accent — proportional, NOT block
   Selector excludes .gr-hero and .ni-hero (handled in Section 27)
   ══════════════════════════════════════════════ */

/* All hero h1 em EXCEPT the ones with block treatment */
[class*="-hero"]:not(.gr-hero):not(.ni-hero):not(.gr-hero__inner):not(.ni-hero__inner) h1 em {
  display: inline !important;
  font-size: 0.6em !important;       /* proportional accent */
  font-style: normal !important;
  font-weight: 700 !important;
  color: var(--gdk-amber) !important;
  text-transform: none !important;   /* keep location names as written */
  letter-spacing: 0.04em !important;
  margin: 0 0 0 0.2em !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
}

/* Direct hero class selectors for certainty */
.cg-hero h1 em,
.fn-hero h1 em,
.hp-hero h1 em,
.cs-hero h1 em,
.ab-hero h1 em,
.ct-hero h1 em {
  display: inline !important;
  font-size: 0.6em !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: var(--gdk-amber) !important;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  margin-left: 0.2em !important;
  line-height: inherit !important;
}

/* ============================================================
   SECTION 35 — Mobile Responsiveness Fixes (2026-03-25)
   Fixes:
   1. ni-hero / gr-hero h1 em — -62px margin too aggressive on mobile
      (designed for desktop 3.6rem h1 = 62px line-height)
      On mobile, clamp → 2.1rem = 36px line — em overlaps heading below
   2. Stats-bar labels — wrapping to 3 lines on 2-col mobile grid
      (stat__label at default size too wide for ~175px columns)
   3. ac-badge — pill badge overflows on narrow mobile viewports
   4. Homepage hero btn full-width on mobile
   5. ni/gr hero CTA buttons — ensure no overlap with fixed float-call
   ============================================================ */

/* 1. Fix hero em margin for mobile — reduce -62px to match mobile line-height */
@media (max-width: 600px) {
  .ni-hero h1 em,
  .gr-hero h1 em,
  .ni-hero__title em,
  .gr-hero__title em {
    margin: 0.15em auto 0.5rem !important; /* positive on mobile — em stays visible */
    font-size: 1rem !important;          /* slightly smaller label on mobile */
  }
}

/* 2. Stats-bar — compact labels and numbers on small screens */
@media (max-width: 480px) {
  .stats-bar__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem 0.75rem !important;
  }
  .stat__num {
    font-size: 1.7rem !important;
  }
  .stat__label {
    font-size: 9px !important;
    letter-spacing: 0.2px !important;
    line-height: 1.3 !important;
  }
  /* 5th stat: center it spanning full width */
  .stats-bar__grid .stat:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* 3. ac-badge — allow wrapping on narrow screens */
@media (max-width: 480px) {
  .ac-badge {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    padding: 5px 12px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    display: inline-block !important;
    max-width: 90vw !important;
  }
}

/* 4. Hero CTA buttons — full-width on mobile (section & hero buttons) */
@media (max-width: 600px) {
  .ni-hero-cta,
  .ac-hero-cta,
  .gr-hero .hero-cta,
  .hero__cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    padding-inline: 0 !important;
  }
  .ni-btn-primary,
  .ni-btn-secondary,
  .ac-btn-primary,
  .ac-btn-secondary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  /* Padding so fixed float-call button doesn't overlap last CTA */
  .ni-hero,
  .ac-hero {
    padding-bottom: 80px !important;
  }
}

/* ============================================================
   SECTION 36 — Mobile UX Comprehensive Repair (2026-03-25)
   Consolidates & supersedes Section 35 stats fixes.
   ============================================================

   DIAGNOSIS (from live mobile screenshots):
   1. stat__label still wrapping 3 lines — Section 35 used max-width:480px;
      some Android phones use wider viewports. Fix: bump to 600px AND
      remove letter-spacing (saves ~7px per word, critical at narrow cols).
   2. .btn.btn-primary inside .section__text NOT full-width — inline-flex
      auto-sizes to content. Fix: flex + width:100% on mobile.
   3. .float-call overlaps van image — Fixed button visually collides with
      content images. Fix: reduce size, add stronger drop-shadow.
   4. Container text padding — Some sections lack left padding on mobile.
   ============================================================ */

/* ── 1. STATS BAR — DEFINITIVE MOBILE FIX ─────────────────────────────────
   Root cause: letter-spacing:.5px adds ~7px per word; at Inter 12px,
   "BROWARD COUNTY COVERAGE" = ~176px in a ~161px column → wraps.
   Fix: font-size:8.5px + letter-spacing:0 → "BROWARD COUNTY COVERAGE" = ~99px
   (23 chars × 4.3px avg) → fits on ONE line in 161px column.
   Breakpoint raised to 600px for broader device coverage.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .stats-bar {
    padding: 1.5rem 0 !important;
  }
  .stats-bar__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem 0.5rem !important;
  }
  .stat {
    padding: 0.25rem 0.1rem !important;
  }
  .stat__num {
    font-size: 1.65rem !important;
    margin-bottom: 0.25rem !important;
  }
  .stat__label {
    font-size: 8.5px !important;
    letter-spacing: 0 !important;        /* removes ~7px/word — critical */
    line-height: 1.25 !important;
    word-spacing: -0.5px !important;     /* tightens word gaps slightly */
    text-align: center !important;
  }
  .stats-bar__grid .stat:last-child {
    grid-column: 1 / -1 !important;
    max-width: 220px !important;
    margin: 0 auto !important;
  }
}

/* ── 2. ABOUT SECTION CTA — FULL-WIDTH BUTTON ON MOBILE ────────────────────
   .btn.btn-primary inside .section__text is display:inline-flex.
   On mobile (single column), it should be full-width for max tap area.
   Only targets .section__text to avoid breaking hero CTA row buttons.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .section__text .btn,
  .section__text .btn-primary,
  .section__text a[class*="btn"] {
    display: flex !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* ── 3. FLOAT-CALL BUTTON — REDUCE VISUAL COLLISION ────────────────────────
   Fixed amber circle at bottom-right visually clashes with content images.
   Fix: slightly smaller, stronger shadow for depth, prevent overlap with
   browser bottom nav by raising it slightly.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .float-call {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    bottom: 1.25rem !important;
    right: 1rem !important;
    box-shadow: 0 4px 24px rgba(245,158,11,0.55), 0 2px 8px rgba(0,0,0,0.25) !important;
    border: 2.5px solid rgba(255,255,255,0.35) !important;
    z-index: 990 !important; /* below modals, above content */
  }
  .float-call svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ── 4. CONTAINER & SECTION TEXT PADDING STANDARDIZATION ───────────────────
   Ensures no text bleeds to screen edge on mobile.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .container {
    padding-inline: clamp(16px, 5vw, 24px) !important;
  }
  /* Explicit override for any section that could bypass container */
  .section__text,
  .section__body,
  .why-grid,
  .service-grid {
    padding-left: 0 !important;   /* container handles padding */
    padding-right: 0 !important;
  }
}

/* ── 5. HERO H1 GATE REPAIR / NEW GATE — TYPOGRAPHY CONSOLIDATION ──────────
   Ensures .gr-hero h1 and .ni-hero h1 render as one visual unit on mobile.
   The em (South Florida / SOUTH FLORIDA.) stays below with amber accent.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .gr-hero h1,
  .ni-hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.8rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.3px !important;
  }
  /* Keep em (SOUTH FLORIDA.) visible — positive margin on mobile */
  .gr-hero h1 em,
  .ni-hero h1 em {
    margin: 0.12em auto 0.4rem !important;
    font-size: 0.9rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 37 — Mobile: Stats nowrap + 2-col force + About stack
                + Homepage text centering + CTA full-width
   Breakpoint: ≤ 767px (matches style.css Section 24 breakpoint)
   Deployed: 2026-03-25
═══════════════════════════════════════════════════════════════ */

/* 1 ── Stats bar: definitive label fix at the CORRECT breakpoint */
@media (max-width: 767px) {
  .stats-bar__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem 0.5rem !important;
  }
  .stat__num {
    font-size: 1.55rem !important;
  }
  .stat__label {
    font-size: 7.5px !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;   /* nuclear option — no wrap */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .stats-bar__grid .stat:last-child {
    grid-column: 1 / -1 !important;
    max-width: 200px !important;
    margin: 0.25rem auto 0 !important;
  }
}

/* 2 ── About 2-col: force single-column stack (belt + suspenders) */
@media (max-width: 767px) {
  .section__2col {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* Constrain section image height so it doesn't dominate mobile */
  .section__2col .section__img {
    max-height: 280px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
}

/* 3 ── Homepage about-section text centering on mobile */
@media (max-width: 767px) {
  .section__text {
    text-align: center !important;
  }
  .section__label,
  .section__heading,
  .section__body,
  .section__intro {
    text-align: center !important;
  }
  .section__divider {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Keep checklist items readable — only center the list container */
  .check-list {
    align-items: center !important;
  }
  .check-list li {
    text-align: left !important;
    max-width: 340px !important;
    width: 100% !important;
  }
}

/* 4 ── CTA button: full-width, centered, auto-margin */
@media (max-width: 767px) {
  .section__text .btn,
  .section__text .btn-primary,
  .section__text .btn--amber {
    display: flex !important;
    width: 100% !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0.75rem !important;
    justify-content: center !important;
  }
}

/* 5 ── Hero CTA row: reinforce stacking + full-width (belt+suspenders) */
@media (max-width: 767px) {
  .hero__cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    padding-inline: 0.5rem !important;
    gap: 0.75rem !important;
  }
  .hero__cta-row .btn {
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 38 — Mobile: Checklist clean stack layout
   Converts the messy flex 4-child layout into clean
   icon-pinned block with bold label + description stacked.
   Deployed: 2026-03-25
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Convert flex row to block with absolute icon */
  .check-list li {
    display: block !important;
    position: relative !important;
    padding-left: 2.1rem !important;
    margin-bottom: 0.85rem !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }
  .check-list li:last-child { margin-bottom: 0 !important; }

  /* Pin icon to top-left */
  .check-list__icon {
    position: absolute !important;
    left: 0 !important;
    top: 0.08em !important;
    font-size: 1rem !important;
    margin-top: 0 !important;
  }

  /* Bold label: display block → own line */
  .check-list li strong {
    display: block !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: var(--brand-text, #1C2333) !important;
    margin-bottom: 0.1em !important;
    line-height: 1.35 !important;
  }

  /* Description text node flows naturally after strong as inline */
  /* em-dash prefix is fine visually at smaller font */
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 39 — Stats definitive centering + Float-call pill CTA
   Deployed: 2026-03-25
═══════════════════════════════════════════════════════════════ */

/* ── 1. Stats: explicit center alignment at every level ── */
@media (max-width: 767px) {
  .stats-bar {
    text-align: center !important;
  }
  .stats-bar__grid {
    text-align: center !important;
    justify-items: center !important;
  }
  .stat {
    text-align: center !important;
    width: 100% !important;
  }
  .stat__num {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
  .stat__label {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
}

/* ── 2. Float-call: pill CTA with "Call Now" text on mobile ── */
@media (max-width: 767px) {
  .float-call {
    /* Override circle → pill */
    width: auto !important;
    height: auto !important;
    border-radius: 50px !important;
    padding: 0.65rem 1.1rem 0.65rem 0.85rem !important;
    /* Position: bottom-right, above browser nav bar */
    bottom: 5rem !important;
    right: 0.75rem !important;
    /* Label layout */
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    /* Typography */
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: var(--brand-navy, #0B1E3D) !important;
    white-space: nowrap !important;
    /* Enhanced shadow for visibility */
    box-shadow: 0 4px 20px rgba(245,158,11,0.55), 0 2px 8px rgba(0,0,0,0.22) !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
  }

  /* Inject "Call Now" text after the SVG icon */
  .float-call::after {
    content: "Call Now";
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-navy, #0B1E3D);
    letter-spacing: 0.01em;
  }

  /* Scale SVG icon down slightly inside the pill */
  .float-call svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 40 — Stats centering: FLEXBOX approach
   Root cause: grid items auto-size to content width and sit
   left-aligned inside the column. text-align cannot fix this.
   Fix: convert grid → flex on mobile + align-items:center on .stat
   Deployed: 2026-03-25
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Convert stats grid to flex for reliable centering */
  .stats-bar__grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem 0.5rem !important;
  }

  /* Each stat: 2-per-row pill, centered content */
  .stats-bar__grid .stat {
    flex: 0 0 calc(50% - 0.5rem) !important;
    max-width: calc(50% - 0.5rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* centers children horizontally */
    justify-content: center !important;
    text-align: center !important;
  }

  /* Last stat (100%) spans full row, auto-centered */
  .stats-bar__grid .stat:last-child {
    flex: 0 0 100% !important;
    max-width: 200px !important;
    margin: 0.25rem auto 0 !important;
    grid-column: unset !important;
  }

  /* Ensure num and label text is centered */
  .stat__num {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }
  .stat__label {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 41 — Stats bar mobile: 3-col grid (FINAL FIX)
   Spec: repeat(3,1fr) | gap:15px 5px | padding:20px 10px
   Overrides all previous Section 37/39/40 stats rules
   Deployed: 2026-03-25
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Container padding */
  .stats-bar {
    padding: 20px 10px !important;
  }

  /* 3-column grid — overrides flex from Section 40 */
  .stats-bar__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px 5px !important;
    text-align: center !important;
    justify-items: center !important;
  }

  /* Every stat: stretch full cell width, center content */
  .stats-bar__grid .stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    /* Reset any max-width from previous sections */
    max-width: none !important;
    margin: 0 !important;
    flex: unset !important;
  }

  /* Number */
  .stat__num {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 1.55rem !important;
  }

  /* Label */
  .stat__label {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 7.5px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  /* 5th stat (100%): center in middle column of row 2 */
  .stats-bar__grid .stat:last-child {
    grid-column: 2 / 3 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 42 — Stats 3+2 grid cards | Float-call final fix
   Grid: 6-col base (items 1-3: span 2 | items 4-5: span 3)
   Overrides: all previous Section 37/39/40/41 stats rules
   Deployed: 2026-03-25
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Container */
  .stats-bar {
    padding: 25px 15px !important;
  }

  /* 6-col underlying grid: 3 items on row 1, 2 centered on row 2 */
  .stats-bar__grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 10px !important;
    text-align: center !important;
  }

  /* All stat cards: span 2 cols (fits 3 per row) */
  .stats-bar__grid .stat {
    grid-column: span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: rgba(255,255,255,0.1) !important;
    border-bottom: 3px solid rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    padding: 10px 5px !important;
    max-width: none !important;
    margin: 0 !important;
    flex: unset !important;
    width: auto !important;
  }

  /* Items 4 & 5: span 3 cols each = 2 equal halves, centered row */
  .stats-bar__grid .stat:nth-child(4),
  .stats-bar__grid .stat:nth-child(5) {
    grid-column: span 3 !important;
  }

  /* Stat number: bold */
  .stats-bar__grid .stat .stat__num {
    display: block !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Stat label: 10px uppercase, directly under number */
  .stats-bar__grid .stat .stat__label {
    display: block !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    text-align: center !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 2px !important;
  }

  /* Float call button: pill, bottom-right fixed */
  .float-call {
    position: fixed !important;
    bottom: 30px !important;
    right: 20px !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    padding: 12px 20px !important;
    border-radius: 50px !important;
  }

}

/* ═══════════════════════════════════════════════════════════════
   SECTION 43 — Stats bar mobile: VERTICAL FLEX LIST (nuclear reset)
   Replaces all grid attempts (S37/39/40/41/42). Zero overlap guaranteed.
   Deployed: 2026-03-25
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* 1. STATS CONTAINER — vertical flex, no grid */
  .stats-bar {
    padding: 30px 0 !important;
  }

  .stats-bar__grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    /* Kill all grid settings from S37-S42 */
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
  }

  /* 2. STAT ITEMS — block, full width, centered */
  .stats-bar__grid .stat {
    display: block !important;
    width: 90% !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding-bottom: 10px !important;
    /* Kill grid-column assignments from S42 */
    grid-column: unset !important;
    position: static !important;
    max-width: none !important;
    margin: 0 auto !important;
    flex: unset !important;
    flex-direction: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
  }

  /* No bottom border on last stat */
  .stats-bar__grid .stat:last-child {
    border-bottom: none !important;
    grid-column: unset !important;
  }

  /* 3. TYPOGRAPHY */
  .stats-bar__grid .stat .stat__num,
  .stat__num {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    display: block !important;
    text-align: center !important;
    line-height: 1.1 !important;
  }

  .stats-bar__grid .stat .stat__label,
  .stat__label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-top: 5px !important;
    display: block !important;
    text-align: center !important;
    white-space: normal !important;
    letter-spacing: 0.04em !important;
  }

  /* 4. FLOAT BUTTON — z-index boost */
  .float-call {
    position: fixed !important;
    bottom: 30px !important;
    right: 20px !important;
    left: auto !important;
    transform: none !important;
    z-index: 99999 !important;
    width: auto !important;
    padding: 12px 20px !important;
    border-radius: 50px !important;
  }

}

/* ═══════════════════════════════════════════════════════════════
   SECTION 44 — Stats nuclear reset: nth-child overrides + order:0
   Kills: S37 flex-basis, S41/42 grid-column, S43 conflicts
   Vertical list | no overlap | correct DOM order guaranteed
   Deployed: 2026-03-25
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Container */
  .stats-bar {
    padding: 25px 20px !important;
    overflow: hidden !important;
  }

  /* Grid → vertical flex column, no wrapping */
  .stats-bar__grid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    grid-template-columns: none !important;
  }

  /* ALL stats: explicit nth-child(1-5) + base rule to nuke every previous override */
  .stats-bar__grid .stat,
  .stats-bar__grid .stat:nth-child(1),
  .stats-bar__grid .stat:nth-child(2),
  .stats-bar__grid .stat:nth-child(3),
  .stats-bar__grid .stat:nth-child(4),
  .stats-bar__grid .stat:nth-child(5),
  .stats-bar__grid .stat:last-child {
    display: block !important;
    flex: none !important;
    order: 0 !important;
    width: 88% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding: 14px 0 !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(0,0,0,0.15) !important;
    border-radius: 0 !important;
    background: transparent !important;
    position: static !important;
    grid-column: unset !important;
    align-self: center !important;
    transform: none !important;
    left: unset !important;
    top: unset !important;
  }

  /* Last stat: remove border */
  .stats-bar__grid .stat:last-child,
  .stats-bar__grid .stat:nth-child(5) {
    border-bottom: none !important;
  }

  /* Number */
  .stats-bar__grid .stat .stat__num,
  .stats-bar__grid .stat:nth-child(1) .stat__num,
  .stats-bar__grid .stat:nth-child(2) .stat__num,
  .stats-bar__grid .stat:nth-child(3) .stat__num,
  .stats-bar__grid .stat:nth-child(4) .stat__num,
  .stats-bar__grid .stat:nth-child(5) .stat__num {
    display: block !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    width: 100% !important;
    white-space: nowrap !important;
  }

  /* Label */
  .stats-bar__grid .stat .stat__label,
  .stats-bar__grid .stat:nth-child(1) .stat__label,
  .stats-bar__grid .stat:nth-child(2) .stat__label,
  .stats-bar__grid .stat:nth-child(3) .stat__label,
  .stats-bar__grid .stat:nth-child(4) .stat__label,
  .stats-bar__grid .stat:nth-child(5) .stat__label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 4px !important;
  }

  /* Float call button */
  .float-call {
    position: fixed !important;
    bottom: 30px !important;
    right: 20px !important;
    left: auto !important;
    transform: none !important;
    z-index: 99999 !important;
    width: auto !important;
    padding: 12px 20px !important;
    border-radius: 50px !important;
  }

}

/* ═══════════════════════════════════════════════════════════════
   SECTION 45 — Stats: HORIZONTAL single row (flex-direction:row)
   All 5 stats side-by-side | flex:1 | nowrap | small typography
   Replaces S37-S44 vertical attempts
   Deployed: 2026-03-25
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Container */
  .stats-bar {
    padding: 16px 4px !important;
    overflow: hidden !important;
  }

  /* HORIZONTAL single row */
  .stats-bar__grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 0 !important;
    width: 100% !important;
    grid-template-columns: none !important;
  }

  /* All stats: equal flex share, centered column */
  .stats-bar__grid .stat,
  .stats-bar__grid .stat:nth-child(1),
  .stats-bar__grid .stat:nth-child(2),
  .stats-bar__grid .stat:nth-child(3),
  .stats-bar__grid .stat:nth-child(4),
  .stats-bar__grid .stat:nth-child(5),
  .stats-bar__grid .stat:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    text-align: center !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(0,0,0,0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    position: static !important;
    grid-column: unset !important;
    order: 0 !important;
    align-self: auto !important;
    transform: none !important;
  }

  /* Last item: no right border */
  .stats-bar__grid .stat:last-child,
  .stats-bar__grid .stat:nth-child(5) {
    border-right: none !important;
    border-bottom: none !important;
  }

  /* Number: compact size to fit 5 across 390px */
  .stats-bar__grid .stat .stat__num,
  .stats-bar__grid .stat:nth-child(1) .stat__num,
  .stats-bar__grid .stat:nth-child(2) .stat__num,
  .stats-bar__grid .stat:nth-child(3) .stat__num,
  .stats-bar__grid .stat:nth-child(4) .stat__num,
  .stats-bar__grid .stat:nth-child(5) .stat__num {
    display: block !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Label: 7px to fit within ~78px cell */
  .stats-bar__grid .stat .stat__label,
  .stats-bar__grid .stat:nth-child(1) .stat__label,
  .stats-bar__grid .stat:nth-child(2) .stat__label,
  .stats-bar__grid .stat:nth-child(3) .stat__label,
  .stats-bar__grid .stat:nth-child(4) .stat__label,
  .stats-bar__grid .stat:nth-child(5) .stat__label {
    display: block !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 3px !important;
    line-height: 1.2 !important;
  }

  /* Float call button */
  .float-call {
    position: fixed !important;
    bottom: 30px !important;
    right: 20px !important;
    left: auto !important;
    transform: none !important;
    z-index: 99999 !important;
    width: auto !important;
    padding: 12px 20px !important;
    border-radius: 50px !important;
  }

}

/* stat-label-contrast */
.stats-bar .stat__label,
.stat__label {
  color: rgba(11, 30, 61, 1) !important;
}