:root {
  --color-primary-dark: #0B1F2A;
  --color-deep-navy: #102F3A;
  --color-primary: #176B5B;
  --color-primary-light: #2A8C75;
  --color-gold: #C9A45C;
  --color-gold-light: #E2C98A;
  --color-background: #F8F5EE;
  --color-surface: #F1EFE8;
  --color-white: #FFFFFF;
  --color-text: #17232A;
  --color-text-secondary: #66747A;
  --color-border: #D9DED9;
  --color-success: #176B5B;
}

/* Global Premium Palette Overrides */
body {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text) !important;
}

p, li, span, label {
  color: var(--color-text);
}

.text-muted, .subtitle, .meta, .desc, p.desc {
  color: var(--color-text-secondary) !important;
}

/* Header & Navigation */
header, .header-ditto, .main-header, .navbar {
  background-color: var(--color-white) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.nav-link, .nav-menu a {
  color: var(--color-text) !important;
}

.nav-link:hover, .nav-menu a:hover, .nav-link.active, .nav-menu a.active {
  color: var(--color-primary) !important;
}

/* Primary CTAs & Buttons */
.btn-primary, .cta-btn, .btn-submit, button[type="submit"], .hero-cta, .quote-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
  color: var(--color-white) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(23, 107, 91, 0.35) !important;
}

.btn-primary:hover, .cta-btn:hover, .btn-submit:hover, button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%) !important;
  box-shadow: 0 6px 20px rgba(23, 107, 91, 0.45) !important;
}

/* Secondary & Gold Buttons */
.btn-secondary, .btn-outline {
  border: 1.5px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: transparent !important;
}

.btn-secondary:hover, .btn-outline:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.btn-gold, .badge-gold, .accent-gold {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%) !important;
  color: var(--color-primary-dark) !important;
}

/* Rating Stars */
.star, .stars, .rating-stars, .fa-star, .star-rating {
  color: var(--color-gold) !important;
}

/* Dark Sections & Footer */
footer, .footer, .footer-ditto, .dark-section, .hero-overlay {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}

footer h1, footer h2, footer h3, footer h4, footer a, .footer a {
  color: var(--color-white) !important;
}

footer a:hover {
  color: var(--color-gold) !important;
}

/* Cards & Surfaces */
.card, .service-card, .testimonial-card, .faq-card, .feature-card, .area-link-card, .pricing-card {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 4px 18px rgba(11, 31, 42, 0.06) !important;
}

.card:hover, .service-card:hover, .faq-card:hover {
  border-color: var(--color-primary) !important;
}

/* Fixed Mobile Bottom Action Bar */
.fixed-mobile-bottom-bar {
  background: var(--color-primary-dark) !important;
  border-top: 2px solid var(--color-gold) !important;
}

.fixed-bar-btn.call-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
}

.fixed-bar-btn.wa-btn {
  background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   ELITE HOME PACKERS & MOVERS — MOBILE UI DESIGN SYSTEM  v900
   Matches the approved mobile mockups exactly.
   Green + Orange brand system · fluid auto-scaling type · sticky bottom CTA.
   Loaded AFTER styles.css so it wins the cascade.
   Desktop (>= 992px) layout is preserved.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette (from mockups) ── */
  --brand-green:        #1a5632;
  --brand-green-dark:   #113d24;
  --brand-green-soft:   #e8f2ec;
  --brand-orange:       #f4600f;
  --brand-orange-dark:  #d94e08;
  --brand-orange-soft:  #fff1e8;
  --brand-navy:         #10202f;
  --brand-navy-soft:    #16293a;

  /* ── Fluid type scale — auto-adjusts to every screen size ── */
  --fs-hero:   clamp(1.75rem, 8.2vw,  3.15rem);
  --fs-h2:     clamp(1.35rem, 5.6vw,  2.25rem);
  --fs-h3:     clamp(1.05rem, 4.3vw,  1.45rem);
  --fs-h4:     clamp(0.95rem, 3.8vw,  1.15rem);
  --fs-body:   clamp(0.92rem, 3.7vw,  1.05rem);
  --fs-small:  clamp(0.78rem, 3.1vw,  0.9rem);
  --fs-tiny:   clamp(0.68rem, 2.7vw,  0.8rem);
  --fs-btn:    clamp(0.9rem,  3.7vw,  1.02rem);

  --sp-section: clamp(34px, 8vw, 64px);
  --sp-gutter:  clamp(14px, 4.2vw, 24px);
  --r-card:     16px;
  --r-pill:     999px;
  --bottombar-h: 62px;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE (<= 991px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  html { -webkit-text-size-adjust: 100%; }

  body {
    font-family: var(--font-body);
    background: #ffffff !important;
    color: #12202c !important;
    padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }

  .container {
    padding-left: var(--sp-gutter) !important;
    padding-right: var(--sp-gutter) !important;
    max-width: 100% !important;
  }

  .section-padding { padding: var(--sp-section) 0 !important; }

  /* ─── 1. GREEN ANNOUNCEMENT BAR ─────────────────────────────── */
  .top-announcement-bar {
    background: var(--brand-green) !important;
    color: #fff !important;
    padding: 9px 0 !important;
    text-align: center !important;
  }
  .announcement-flex {
    flex-direction: column !important;
    gap: 0 !important;
    align-items: center !important;
  }
  .announcement-text {
    font-size: var(--fs-tiny) !important;
    font-weight: 600 !important;
    color: #fff !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }
  /* ─── 2. HEADER — big logo + circular hamburger ──────────────── */
  .main-header {
    background: #fff !important;
    border-bottom: 1px solid #f0f3f5 !important;
    box-shadow: 0 1px 12px rgba(11, 31, 42,.05) !important;
    position: sticky !important; top: 0 !important; z-index: 1000 !important;
  }
  .header-container {
    height: clamp(66px, 17vw, 88px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 var(--sp-gutter) !important;
  }
  .logo-brand img, .logo img, .logo-img {
    height: clamp(46px, 13.5vw, 72px) !important;
    max-height: none !important;
    width: auto !important;
    max-width: 62vw !important;
    object-fit: contain !important;
  }
  .header-container .btn-pill-orange { display: none !important; }

  .mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important; height: 46px !important;
    min-width: 46px !important; flex: 0 0 46px !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1.5px solid #e4e9ed !important;
    color: #12202c !important;
    font-size: 1.15rem !important;
    box-shadow: 0 2px 6px rgba(11, 31, 42,.05) !important;
  }

  /* ─── 3. DROPDOWN NAV PANEL (mockup 9) ──────────────────────── */
  .nav-menu.active {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: var(--sp-gutter) !important;
    left: auto !important;
    width: min(78vw, 320px) !important;
    background: #fff !important;
    border: 1px solid #e9edf1 !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 44px rgba(11, 31, 42,.18) !important;
    padding: 8px !important;
    gap: 0 !important;
    max-height: 74vh !important;
    overflow-y: auto !important;
    /* Must sit above .mobile-nav-backdrop (z-index: 999998 in styles.css) —
       this rule is the one that actually wins (mobile-ui.css loads last),
       and previously had no z-index at all, so the dark blurred backdrop
       painted on top of the menu instead of behind it. */
    z-index: 1000000 !important;
  }
  .nav-menu.active > li { width: 100% !important; border-bottom: 1px solid #f4f6f8 !important; }
  .nav-menu.active > li:last-child { border-bottom: none !important; }
  .nav-menu.active .nav-link,
  .nav-menu.active .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 13px 14px !important;
    font-size: var(--fs-small) !important;
    font-weight: 600 !important;
    color: #23323f !important;
    border-radius: 9px !important;
    min-height: 46px !important;
  }
  .nav-menu.active .nav-link.active,
  .nav-menu.active .dropdown-item:hover {
    color: var(--brand-orange) !important;
    background: var(--brand-orange-soft) !important;
  }
  .nav-menu.active .dropdown-menu {
    position: static !important; display: none !important;
    box-shadow: none !important; border: none !important;
    width: 100% !important; padding: 0 0 0 8px !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
  }

  /* ─── 4. FLUID TYPOGRAPHY ───────────────────────────────────── */
  h1, .hero-main-title {
    font-family: var(--font-heading) !important;
    font-size: var(--fs-hero) !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
  }
  h2 { font-size: var(--fs-h2) !important; line-height: 1.24 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; }
  h3 { font-size: var(--fs-h3) !important; line-height: 1.32 !important; font-weight: 700 !important; }
  h4 { font-size: var(--fs-h4) !important; font-weight: 700 !important; }
  p, li, td, th { font-size: var(--fs-body) !important; line-height: 1.65 !important; }
  /* neutralise oversized inline font-sizes coming from old markup */
  [style*="font-size: 2.2rem"], [style*="font-size:2.2rem"],
  [style*="font-size: 2rem"],   [style*="font-size:2rem"]   { font-size: var(--fs-h2) !important; }
  [style*="font-size: 1.3rem"], [style*="font-size:1.3rem"] { font-size: var(--fs-h3) !important; }

  /* Section eyebrow label (orange pill: "Overview", "Why Choose Us", "FAQ") */
  .about-badge-small, .section-badge, .badge-eyebrow {
    display: inline-block !important;
    background: var(--brand-orange-soft) !important;
    color: var(--brand-orange) !important;
    font-size: var(--fs-tiny) !important;
    font-weight: 700 !important;
    padding: 6px 15px !important;
    border-radius: var(--r-pill) !important;
    letter-spacing: .02em !important;
  }

  /* ─── 5. BUTTONS ────────────────────────────────────────────── */
  .btn, a.btn, button.btn,
  .btn-pill-orange, .btn-farmers-orange, .btn-farmers-outline,
  .cta-call, .cta-wa {
    font-size: var(--fs-btn) !important;
    font-weight: 700 !important;
    min-height: 52px !important;
    padding: 14px 24px !important;
    border-radius: var(--r-pill) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
  .btn-primary, .btn-pill-orange, .btn-farmers-orange {
    background: var(--brand-green) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(26,86,50,.24) !important;
  }
  .btn-secondary, .btn-farmers-outline, .btn-outline {
    background: #fff !important;
    color: #12202c !important;
    border: 1.7px solid #dfe5ea !important;
  }
  .hero-buttons-row, .farmers-dog-btn-group, .area-cta-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 11px !important;
    width: 100% !important;
  }
  .hero-buttons-row > *, .farmers-dog-btn-group > *, .area-cta-bar > * { width: 100% !important; }

  /* ─── 6. TRUST / FEATURE STRIP (4 icons in a row) ───────────── */
  /* Real markup: the 4-stat row is the last flex child of .area-hero,
     handled in §8. These classes are for the homepage strip. */
  .trust-strip-4, .hero-trust-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid #edf1f4 !important;
    border-radius: var(--r-card) !important;
    padding: 16px 6px !important;
    box-shadow: 0 3px 14px rgba(11, 31, 42,.045) !important;
  }
  .trust-strip-4 > *, .hero-trust-row > * {
    text-align: center !important;
    font-size: var(--fs-tiny) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    padding: 0 4px !important;
    border-right: 1px solid #eef2f5 !important;
  }
  .trust-strip-4 > *:last-child, .hero-trust-row > *:last-child { border-right: none !important; }
  .trust-strip-4 i, .hero-trust-row i { color: var(--brand-green) !important; font-size: 1.35rem !important; margin-bottom: 7px !important; display: block !important; }

  /* ─── 7. CARDS & GRIDS ──────────────────────────────────────── */
  .services-grid-3col, .services-grid, .moments-grid-6col,
  .process-steps-grid, .footer-grid-4col, .trust-features-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 11px !important;
  }
  .service-card-ditto, .svc-pill, .feature-card, .step-card {
    background: #fff !important;
    border: 1px solid #eaeef1 !important;
    border-radius: var(--r-card) !important;
    padding: 17px 14px !important;
    box-shadow: 0 3px 12px rgba(11, 31, 42,.04) !important;
    text-align: center !important;
    font-size: var(--fs-small) !important;
  }
  .service-card-ditto i, .svc-pill i, .feature-card i {
    color: var(--brand-green) !important;
    font-size: 1.7rem !important;
    margin-bottom: 9px !important;
    display: block !important;
  }
  .footer-grid-4col { grid-template-columns: 1fr !important; gap: 22px !important; }

  /* Icon-left feature card (Transit Insurance / GST Invoices / Fleet) */
  .trust-feature-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    text-align: left !important;
    background: #fff !important;
    border: 1px solid #eaeef1 !important;
    border-left: 3.5px solid var(--brand-orange) !important;
    border-radius: 13px !important;
    padding: 15px 14px !important;
    box-shadow: 0 3px 12px rgba(11, 31, 42,.04) !important;
  }
  .trust-features-list { grid-template-columns: 1fr !important; gap: 11px !important; }
  .trust-icon-box {
    flex: 0 0 42px !important; width: 42px !important; height: 42px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: var(--brand-green-soft) !important;
    border-radius: 11px !important;
    color: var(--brand-green) !important;
    font-size: 1.15rem !important;
  }
  .trust-feature-content h3, .trust-feature-content h4 { font-size: var(--fs-h4) !important; margin: 0 0 4px !important; }
  .trust-feature-content p { font-size: var(--fs-small) !important; color: #62727f !important; margin: 0 !important; }

  /* ─── 8. DARK HERO CARD (service pages) ─────────────────────── */
  .hero-card-farmers-dog, .area-hero {
    background: linear-gradient(150deg, var(--brand-navy) 0%, var(--brand-navy-soft) 100%) !important;
    border-radius: 20px !important;
    padding: clamp(24px, 6.5vw, 40px) clamp(18px, 5vw, 30px) !important;
    margin: 14px var(--sp-gutter) !important;
    color: #fff !important;
    text-align: left !important;
  }
  .area-hero h1, .hero-card-farmers-dog h1 { color: #fff !important; }
  .area-hero p,  .hero-card-farmers-dog p  { color: rgba(255,255,255,.82) !important; font-size: var(--fs-body) !important; }
  .area-hero .cta-call, .area-hero .cta-wa { background: var(--brand-orange) !important; color: #fff !important; }

  /* Stat row inside dark hero — 4 across, divided */
  .area-hero > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    margin: 22px 0 20px !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    padding: 16px 0 !important;
  }
  .area-hero > div:last-child > div {
    text-align: center !important;
    border-right: 1px solid rgba(255,255,255,.12) !important;
    padding: 0 3px !important;
  }
  .area-hero > div:last-child > div:last-child { border-right: none !important; }
  .area-hero > div:last-child > div > div:first-child { font-size: clamp(1rem,4.4vw,1.35rem) !important; color: #ffd24a !important; }
  .area-hero > div:last-child > div > div:last-child  { font-size: var(--fs-tiny) !important; line-height: 1.25 !important; }

  /* ─── 9. PROCESS STEPS (2x2, orange STEP badge) ─────────────── */
  .process-steps-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 11px !important; }
  .step-card, .process-step {
    background: #fff !important;
    border: 1px solid #eaeef1 !important;
    border-radius: var(--r-card) !important;
    padding: 16px 13px !important;
    text-align: left !important;
  }
  .step-badge, .step-number {
    display: inline-block !important;
    background: var(--brand-orange) !important;
    color: #fff !important;
    font-size: var(--fs-tiny) !important;
    font-weight: 800 !important;
    padding: 5px 13px !important;
    border-radius: var(--r-pill) !important;
    margin-bottom: 10px !important;
  }
  .dark-process-wrapper { padding: var(--sp-section) var(--sp-gutter) !important; border-radius: 20px !important; }

  /* ─── 10. PRICING TABLE ─────────────────────────────────────── */
  table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
          border: 1px solid #e7ebee !important; border-radius: 13px !important; overflow: hidden !important; }
  thead th {
    background: var(--brand-navy) !important; color: #fff !important;
    font-size: var(--fs-small) !important; font-weight: 700 !important;
    padding: 13px 12px !important; text-align: left !important;
  }
  tbody td { padding: 13px 12px !important; font-size: var(--fs-small) !important; border-top: 1px solid #eef1f4 !important; }
  tbody tr:nth-child(even) { background: #fafbfc !important; }
  tbody td:last-child { color: var(--brand-orange) !important; font-weight: 800 !important; text-align: right !important; white-space: nowrap !important; }

  /* ─── 11. FAQ ACCORDION ─────────────────────────────────────── */
  .faq-item, .faq-accordion-item {
    background: #fff !important;
    border: 1px solid #e9edf1 !important;
    border-radius: 13px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }
  .faq-q, .faq-question {
    background: #fff !important;
    font-size: var(--fs-small) !important;
    font-weight: 700 !important;
    color: #12202c !important;
    padding: 15px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 52px !important;
  }
  .faq-a, .faq-answer {
    font-size: var(--fs-small) !important;
    color: #5d6d7b !important;
    line-height: 1.68 !important;
    padding: 0 16px 15px !important;
    border-top: none !important;
  }

  /* ─── 12. REVIEW / QUOTE CARD ───────────────────────────────── */
  .review-box, .quote-card-glassmorphic {
    background: #fff !important;
    border: 1px solid #eaeef1 !important;
    border-left: 3.5px solid var(--brand-orange) !important;
    border-radius: 13px !important;
    padding: 16px 16px !important;
  }

  /* Instant-estimate green CTA card */
  .estimate-cta-card {
    background: var(--brand-green) !important;
    color: #fff !important;
    border-radius: var(--r-card) !important;
    padding: 17px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 13px !important;
  }
  .estimate-cta-card .btn { background: #fff !important; color: var(--brand-green) !important; min-height: 44px !important; padding: 11px 18px !important; }

  /* ─── 13. IMAGES ────────────────────────────────────────────── */
  img { max-width: 100% !important; height: auto !important; }
  .logo-brand img, .logo-img { height: clamp(46px, 13.5vw, 72px) !important; }

  /* ─── 14. FOOTER ────────────────────────────────────────────── */
  footer { padding: var(--sp-section) var(--sp-gutter) calc(var(--bottombar-h) + 24px) !important; font-size: var(--fs-small) !important; }
  footer h4 { font-size: var(--fs-h4) !important; margin-bottom: 11px !important; }
  footer a, footer li { font-size: var(--fs-small) !important; line-height: 2 !important; }

  /* ─── 15. HIDE THE OLD FLOATING WHATSAPP BUBBLE ─────────────── */
  a[href*="wa.me"][style*="position:fixed"],
  a[href*="wa.me"][style*="position: fixed"] { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   STICKY BOTTOM CTA BAR — Call Now (green) + WhatsApp Us (orange)
   Present on every page. Mobile only.
   ══════════════════════════════════════════════════════════════ */
.mobile-bottom-bar { display: none; }

@media (max-width: 991px) {
  .mobile-bottom-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0 !important;
    height: var(--bottombar-h) !important;
    z-index: 9999 !important;
    box-shadow: 0 -3px 18px rgba(11, 31, 42,.14) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .mobile-bottom-bar a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    font-size: var(--fs-btn) !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-decoration: none !important;
    height: 100% !important;
    letter-spacing: .01em !important;
  }
  .mobile-bottom-bar .mbb-call { background: var(--brand-green) !important; }
  .mobile-bottom-bar .mbb-wa   { background: var(--brand-orange) !important; }
  .mobile-bottom-bar a i { font-size: 1.1rem !important; }
  .mobile-bottom-bar a:active { filter: brightness(.93); }
}

/* ── Very small phones (<= 360px) ── */
@media (max-width: 360px) {
  .services-grid-3col, .services-grid, .process-steps-grid { grid-template-columns: 1fr !important; }
  .hero-buttons-row, .farmers-dog-btn-group, .area-cta-bar { grid-template-columns: 1fr !important; }
  .trust-strip-4, .hero-trust-row { grid-template-columns: repeat(2, 1fr) !important; gap: 13px 0 !important; }
  .trust-strip-4 > *:nth-child(2), .hero-trust-row > *:nth-child(2) { border-right: none !important; }
  .announcement-contact a { font-size: 0.64rem !important; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §16 — LEGACY PAGE-TEMPLATE CLASSES
   Older locality / service / blog templates carry their own inline <style>.
   These rules bring them onto the same mobile design system.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* Service-page hero (svc-hero) + blog hero — match the dark hero card */
  .svc-hero, .blog-hero, .cta-section, .cta-banner {
    background: linear-gradient(150deg, var(--brand-navy) 0%, var(--brand-navy-soft) 100%) !important;
    border-radius: 20px !important;
    margin: 14px var(--sp-gutter) !important;
    padding: clamp(24px, 6.5vw, 40px) clamp(18px, 5vw, 28px) !important;
    color: #fff !important;
    text-align: left !important;
  }
  .svc-hero h1, .blog-hero h1, .cta-section h2, .cta-banner h2 { color: #fff !important; }
  .svc-hero p,  .blog-hero p,  .cta-section p,  .cta-banner p  {
    color: rgba(255,255,255,.82) !important; font-size: var(--fs-body) !important;
  }
  .svc-content, .blog-container {
    padding: var(--sp-section) var(--sp-gutter) !important;
    max-width: 100% !important;
  }

  /* Eyebrow / label pills */
  .label, .meta, .tag {
    font-size: var(--fs-tiny) !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
  }
  .tag {
    display: inline-block !important;
    background: var(--brand-orange) !important;
    color: #fff !important;
    padding: 6px 15px !important;
    border-radius: var(--r-pill) !important;
  }

  /* Buttons */
  .cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 52px !important;
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: var(--fs-btn) !important;
    font-weight: 700 !important;
    border-radius: var(--r-pill) !important;
    background: var(--brand-orange) !important;
    color: #fff !important;
    text-decoration: none !important;
    margin: 6px 0 !important;
  }

  /* Card grids */
  .service-card, .stats > * , .checklist li {
    background: #fff !important;
    border: 1px solid #eaeef1 !important;
    border-radius: var(--r-card) !important;
    padding: 16px 14px !important;
    font-size: var(--fs-small) !important;
  }
  .stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    text-align: center !important;
  }
  .service-card .icon, .icon { color: var(--brand-green) !important; font-size: 1.7rem !important; margin-bottom: 8px !important; }

  /* Rate list rows */
  .rate-box {
    border: 1px solid #e7ebee !important;
    border-radius: 13px !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  .rate-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 13px 14px !important;
    font-size: var(--fs-small) !important;
    border-top: 1px solid #eef1f4 !important;
  }
  .rate-row:first-child { border-top: none !important; }
  .rate-row > *:last-child { color: var(--brand-orange) !important; font-weight: 800 !important; white-space: nowrap !important; }

  /* Testimonial */
  .testimonial {
    background: #fff !important;
    border: 1px solid #eaeef1 !important;
    border-left: 3.5px solid var(--brand-orange) !important;
    border-radius: 13px !important;
    padding: 16px !important;
    font-size: var(--fs-small) !important;
  }
  .testimonial .name { font-weight: 700 !important; color: #12202c !important; font-size: var(--fs-small) !important; }

  /* Nearby area pills */
  .areas-nearby { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .area-pill {
    background: var(--brand-green-soft) !important;
    color: var(--brand-green) !important;
    font-size: var(--fs-tiny) !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    border-radius: var(--r-pill) !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Legacy floating WhatsApp bubble — replaced by the sticky bottom bar */
  .whatsapp-float { display: none !important; }

  /* Homepage "Areas We Serve" cards */
  .areas-link-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .area-link-card  { min-height: 58px !important; justify-content: center !important; }
  .area-link-name  { font-size: var(--fs-small) !important; }
  .area-link-pin   { font-size: var(--fs-tiny) !important; }
}

@media (max-width: 360px) {
  .stats { grid-template-columns: repeat(2, 1fr) !important; }
  .areas-link-grid { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §17 — HOMEPAGE MOBILE, MATCHED TO APPROVED MOCKUP  (v901)
   Green announcement · white contact strip · image hero · trust strip ·
   estimate CTA · services grid.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── A. ANNOUNCEMENT: green band, then full-bleed white contact strip ── */
  .top-announcement-bar {
    background: var(--brand-green) !important;
    padding: 0 !important;
    position: static !important;
  }
  .announcement-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .announcement-text {
    background: var(--brand-green) !important;
    color: #fff !important;
    font-size: clamp(.72rem, 3.05vw, .92rem) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    padding: 10px var(--sp-gutter) !important;
  }
  .announcement-contact {
    position: static !important;
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #eef1f4 !important;
    padding: 11px var(--sp-gutter) !important;
    width: 100% !important;
  }
  .announcement-contact a {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: clamp(.66rem, 2.85vw, .86rem) !important;
    font-weight: 600 !important;
    color: #2f4356 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    min-height: 26px !important;
  }
  .announcement-contact a:first-child { border-right: 1px solid #e6eaee !important; }
  .announcement-contact a i { color: var(--brand-green) !important; font-size: .95em !important; }
  .main-header { margin-top: 0 !important; }   /* strip is in normal flow now */

  /* ── B. LOGO — noticeably larger, matches mockup proportion ── */
  .header-container { height: clamp(70px, 18.5vw, 96px) !important; }
  .logo-brand img, .logo img, .logo-img {
    height: clamp(52px, 15.5vw, 86px) !important;
    max-height: none !important;
    max-width: 66vw !important;
  }
  .mobile-toggle {
    width: clamp(44px, 12vw, 56px) !important;
    height: clamp(44px, 12vw, 56px) !important;
    min-width: clamp(44px, 12vw, 56px) !important;
    flex-basis: clamp(44px, 12vw, 56px) !important;
    border-radius: 13px !important;
  }

  /* ── C. HERO — keep the photo, light wash so dark text reads ── */
  .hero-card-container {
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: clamp(20px, 5.5vw, 34px) var(--sp-gutter) clamp(24px, 6vw, 36px) !important;
    background:
      linear-gradient(180deg, rgba(243,248,242,.93) 0%, rgba(246,250,245,.88) 55%, rgba(255,255,255,.97) 100%),
      url('assets/hero_boxes_bg.webp') right center/cover no-repeat !important;
    display: block !important;
    align-items: initial !important;
  }
  .hero-card-container > .container,
  .container > .hero-card-container { padding: 0 !important; }
  .hero-grid-split {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  .hero-left-box { max-width: 100% !important; }

  .hero-trust-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    border: 1px solid #dde6df !important;
    color: #12202c !important;
    font-size: clamp(.72rem, 3vw, .9rem) !important;
    font-weight: 600 !important;
    padding: 8px 15px !important;
    border-radius: var(--r-pill) !important;
    box-shadow: 0 2px 8px rgba(11, 31, 42,.05) !important;
    margin-bottom: 15px !important;
  }
  .hero-trust-badge i { color: var(--brand-green) !important; font-size: 1.02em !important; }

  .hero-main-title {
    color: #0d1b26 !important;
    font-size: clamp(1.85rem, 8.6vw, 3.1rem) !important;
    line-height: 1.13 !important;
    letter-spacing: -.03em !important;
    margin-bottom: 13px !important;
  }
  .hero-main-title span { color: var(--brand-green) !important; }
  .hero-sub-text {
    color: #46586a !important;
    font-size: clamp(.93rem, 3.8vw, 1.08rem) !important;
    line-height: 1.6 !important;
    max-width: 30ch !important;
    margin-bottom: 20px !important;
  }

  /* Buttons side by side, exactly as the mockup */
  .hero-buttons-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 11px !important;
    width: 100% !important;
  }
  .btn-pill-dark, .btn-call-circle {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 54px !important;
    padding: 13px 16px !important;
    border-radius: var(--r-pill) !important;
    font-size: clamp(.86rem, 3.5vw, 1rem) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .btn-pill-dark {
    background: var(--brand-green) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 7px 18px rgba(26,86,50,.26) !important;
  }
  .btn-call-circle {
    background: #fff !important;
    color: #0d1b26 !important;
    border: 1.8px solid #d9e2dc !important;
  }
  .icon-circle-orange {
    width: 32px !important; height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 50% !important;
    background: var(--brand-green) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .82rem !important;
  }

  /* ── D. 4-ICON TRUST STRIP ── */
  .hero-trust-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid #e9eef0 !important;
    border-radius: 15px !important;
    padding: 17px 4px !important;
    margin-top: 20px !important;
    box-shadow: 0 4px 16px rgba(11, 31, 42,.055) !important;
  }
  .hero-trust-row > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 0 3px !important;
    border-right: 1px solid #eef2f4 !important;
  }
  .hero-trust-row > div:last-child { border-right: none !important; }
  .hero-trust-row i {
    color: var(--brand-green) !important;
    font-size: clamp(1.25rem, 5.4vw, 1.65rem) !important;
  }
  .hero-trust-row span {
    font-size: clamp(.68rem, 2.9vw, .86rem) !important;
    font-weight: 700 !important;
    color: #16242f !important;
    line-height: 1.28 !important;
  }

  /* ── E. GREEN INSTANT-ESTIMATE CTA ── */
  .estimate-cta-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: var(--brand-green) !important;
    border-radius: 15px !important;
    padding: 15px 15px !important;
    margin-top: 13px !important;
    box-shadow: 0 8px 20px rgba(26,86,50,.2) !important;
  }
  .estimate-cta-left { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; }
  .estimate-cta-icon {
    width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.94) !important;
    color: var(--brand-green) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 1.15rem !important;
  }
  .estimate-cta-text {
    color: #fff !important;
    font-size: clamp(.78rem, 3.25vw, .98rem) !important;
    font-weight: 600 !important;
    line-height: 1.34 !important;
  }
  .estimate-cta-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 7px !important;
    background: #fff !important;
    color: var(--brand-green) !important;
    font-size: clamp(.78rem, 3.2vw, .95rem) !important;
    font-weight: 700 !important;
    padding: 12px 17px !important;
    border-radius: var(--r-pill) !important;
    text-decoration: none !important;
    min-height: 46px !important;
    white-space: nowrap !important;
  }

  /* Big quote form is redundant on mobile — the CTA above opens the modal */
  .quote-card-glassmorphic { display: none !important; }

  /* ── F. "WHAT WE DO / OUR MOVING SERVICES" ── */
  .svc-head { text-align: center !important; margin-bottom: 20px !important; }
  .svc-eyebrow {
    display: block !important;
    color: var(--brand-green) !important;
    font-size: clamp(.7rem, 2.9vw, .85rem) !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    margin-bottom: 7px !important;
  }
  .svc-title {
    font-size: clamp(1.5rem, 6.4vw, 2.3rem) !important;
    font-weight: 800 !important;
    color: #0d1b26 !important;
    letter-spacing: -.025em !important;
    margin: 0 0 10px !important;
  }
  .svc-rule { display: block !important; width: 62px !important; height: 3px !important; background: var(--brand-green) !important; border-radius: 3px !important; margin: 0 auto !important; }

  .home-services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }
  /* Mobile: Show only first 4 service cards, hide 5th onwards until expanded */
  .home-services-grid > .home-svc-card:nth-child(n+5) {
    display: none !important;
  }
  .home-services-grid.expanded > .home-svc-card:nth-child(n+5) {
    display: flex !important;
  }

  .svc-view-more-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 18px !important;
    width: 100% !important;
  }

  .btn-svc-view-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: var(--brand-green, #1a5632) !important;
    border: 2px solid var(--brand-green, #1a5632) !important;
    border-radius: 30px !important;
    padding: 10px 24px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(26, 86, 50, 0.08) !important;
    transition: all 0.25s ease !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .btn-svc-view-more:hover,
  .btn-svc-view-more:active {
    background: var(--brand-green, #1a5632) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(26, 86, 50, 0.2) !important;
  }

  .btn-svc-view-more i {
    font-size: 0.8rem !important;
    transition: transform 0.25s ease !important;
  }

  .home-svc-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    background: #fff !important;
    border: 1px solid #e9eef0 !important;
    border-radius: 14px !important;
    padding: 15px 6px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 3px 12px rgba(11, 31, 42,.045) !important;
    min-height: 104px !important;
  }
  .home-svc-card i { color: var(--brand-green) !important; font-size: clamp(1.35rem, 5.6vw, 1.85rem) !important; }
  .home-svc-card span {
    font-size: clamp(.65rem, 2.75vw, .84rem) !important;
    font-weight: 700 !important;
    color: #16242f !important;
    line-height: 1.28 !important;
  }
}

/* Narrow phones — 2-up grids so nothing is cramped */
@media (max-width: 430px) {
  .home-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 359px) {
  .hero-trust-row { grid-template-columns: repeat(2, 1fr) !important; row-gap: 15px !important; }
  .hero-trust-row > div:nth-child(2) { border-right: none !important; }
  .estimate-cta-card { flex-direction: column !important; align-items: stretch !important; }
  .estimate-cta-btn { width: 100% !important; }
  .hero-buttons-row { flex-direction: column !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §18 — SERVICE PAGE HERO, MATCHED TO APPROVED MOCKUP  (v902)
   Dark-green photo hero · orange badge · orange/white button pair ·
   4-icon trust strip · instant-estimate CTA.
   ══════════════════════════════════════════════════════════════════════════ */

/* Desktop keeps the original full-bleed dark banner */
.svc-hero-banner {
  background: var(--bg-dark);
  color: #fff;
  padding: 75px 0;
  text-align: center;
  position: relative;
}

@media (max-width: 991px) {

  .svc-hero-banner {
    position: relative !important;
    margin: 12px var(--sp-gutter) 0 !important;
    padding: clamp(24px, 6.2vw, 40px) clamp(18px, 5vw, 30px) clamp(26px, 6.5vw, 42px) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    text-align: left !important;
    background:
      linear-gradient(158deg, rgba(11,42,26,.95) 0%, rgba(14,54,33,.90) 48%, rgba(9,34,21,.95) 100%),
      url('assets/hero_moving_truck.webp') center/cover no-repeat !important;
  }
  .svc-hero-banner > .container { padding: 0 !important; max-width: 100% !important; }

  /* Orange pill badge */
  .svc-hero-badge, .svc-hero-banner .about-badge-small {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--brand-orange) !important;
    color: #fff !important;
    font-size: clamp(.76rem, 3.2vw, .95rem) !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    border-radius: var(--r-pill) !important;
    margin-bottom: 15px !important;
    box-shadow: 0 5px 14px rgba(244,96,15,.3) !important;
  }

  /* Headline — force white so it can never go dark-on-dark */
  .svc-hero-title, .svc-hero-banner h1 {
    color: #fff !important;
    font-size: clamp(1.95rem, 8.8vw, 3rem) !important;
    line-height: 1.13 !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    margin: 0 0 13px !important;
    text-align: left !important;
  }
  .svc-hero-title span, .svc-hero-banner h1 span { color: var(--brand-orange) !important; }

  .svc-hero-lead, .svc-hero-banner p {
    color: rgba(255,255,255,.86) !important;
    font-size: clamp(.9rem, 3.7vw, 1.06rem) !important;
    line-height: 1.6 !important;
    margin: 0 0 20px !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  /* Button pair — orange primary + white secondary, side by side */
  .svc-hero-btns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    margin-top: 0 !important;
    width: 100% !important;
  }
  .svc-hero-btns > a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    min-height: 60px !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
    font-size: clamp(.78rem, 3.15vw, .95rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
  }
  .svc-hero-btns > a:first-child {
    background: var(--brand-orange) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 7px 18px rgba(244,96,15,.32) !important;
  }
  .svc-hero-btns > a:last-child {
    background: #fff !important;
    color: #12202c !important;
    border: none !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.16) !important;
  }
  .svc-hero-btns > a span { display: inline !important; }

  /* ── 4-icon trust strip under the hero ── */
  .svc-trust-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid #e9eef0 !important;
    border-radius: 15px !important;
    padding: 17px 4px !important;
    margin-top: 14px !important;
    box-shadow: 0 4px 16px rgba(11, 31, 42,.055) !important;
  }
  .svc-trust-row > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 0 3px !important;
    border-right: 1px solid #eef2f4 !important;
  }
  .svc-trust-row > div:last-child { border-right: none !important; }
  .svc-trust-row i { color: var(--brand-green) !important; font-size: clamp(1.25rem, 5.4vw, 1.65rem) !important; }
  .svc-trust-row span {
    font-size: clamp(.66rem, 2.85vw, .84rem) !important;
    font-weight: 700 !important;
    color: #16242f !important;
    line-height: 1.28 !important;
  }

  .svc-estimate { margin-top: 13px !important; }

  /* ── Overview / content blocks: stack the 2-col grids ── */
  .svc-hero-banner ~ section [style*="grid-template-columns: 1.1fr 0.9fr"],
  section [style*="grid-template-columns: 1.1fr 0.9fr"],
  section [style*="grid-template-columns: 0.9fr 1.1fr"],
  section [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* the small 2-up feature boxes stay 1-col for readability */
  section [style*="grid-template-columns: 1fr 1fr"] > div { min-width: 0 !important; }
}

@media (max-width: 400px) {
  .svc-hero-btns { flex-direction: column !important; }
  .svc-trust-row { grid-template-columns: repeat(2, 1fr) !important; row-gap: 15px !important; }
  .svc-trust-row > div:nth-child(2) { border-right: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §19 — PAGE HEROES · STEPS · PRICING · WHY-US · FAQ   (v903)
   The canonical mobile pattern library. All future sections should reuse
   these classes: .page-hero-banner, .step-card/.step-badge, .rate-table,
   .why-grid, .faq-item.
   ══════════════════════════════════════════════════════════════════════════ */

/* Desktop keeps the original full-bleed banner */
.page-hero-banner {
  background: var(--bg-dark);
  color: #fff;
  padding: 60px 0;
  text-align: center;
}
/* Guard: heading can never inherit the dark colour on a dark banner */
.page-hero-banner h1,
.page-hero-banner .page-hero-title,
.svc-hero-banner h1,
.svc-hero-banner .svc-hero-title { color: #fff; }

@media (max-width: 991px) {

  /* ── A. PAGE HERO — green photo card, no dead space ── */
  .page-hero-banner {
    margin: 12px var(--sp-gutter) 0 !important;
    padding: clamp(22px, 6vw, 38px) clamp(18px, 5vw, 28px) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    text-align: center !important;
    background:
      linear-gradient(158deg, rgba(11,42,26,.95) 0%, rgba(14,54,33,.90) 50%, rgba(9,34,21,.95) 100%),
      url('assets/hero_moving_truck.webp') center/cover no-repeat !important;
  }
  .page-hero-banner > .container { padding: 0 !important; max-width: 100% !important; }

  .page-hero-badge, .page-hero-banner .about-badge-small {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--brand-orange) !important;
    color: #fff !important;
    font-size: clamp(.74rem, 3.1vw, .92rem) !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    border-radius: var(--r-pill) !important;
    margin-bottom: 13px !important;
    box-shadow: 0 5px 14px rgba(244,96,15,.3) !important;
  }

  .page-hero-title, .page-hero-banner h1 {
    color: #fff !important;
    font-size: clamp(1.6rem, 7.2vw, 2.5rem) !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    letter-spacing: -.028em !important;
    margin: 0 0 11px !important;
  }
  .page-hero-title span, .page-hero-banner h1 span { color: var(--brand-orange) !important; }

  .page-hero-lead, .page-hero-banner p {
    color: rgba(255,255,255,.85) !important;
    font-size: clamp(.88rem, 3.6vw, 1.04rem) !important;
    line-height: 1.58 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  /* 3-icon trust strip inside the hero (About page) */
  .page-hero-trust {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    margin-top: 20px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
  }
  .page-hero-trust > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 0 4px !important;
    border-right: 1px solid rgba(255,255,255,.16) !important;
  }
  .page-hero-trust > div:last-child { border-right: none !important; }
  .page-hero-trust i { color: #7fd6a4 !important; font-size: clamp(1.2rem, 5.2vw, 1.6rem) !important; }
  .page-hero-trust span {
    color: #fff !important;
    font-size: clamp(.66rem, 2.85vw, .82rem) !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
  }

  /* ── B. PROCESS STEPS — 2 x 2 ── */
  .process-steps-2x2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 11px !important;
    flex-direction: unset !important;
  }
  .step-card {
    background: #fff !important;
    border: 1px solid #e9eef0 !important;
    border-radius: 15px !important;
    padding: 15px 13px !important;
    box-shadow: 0 3px 12px rgba(11, 31, 42,.045) !important;
    text-align: left !important;
  }
  .step-badge {
    display: inline-block !important;
    background: var(--brand-orange) !important;
    color: #fff !important;
    font-size: clamp(.66rem, 2.8vw, .8rem) !important;
    font-weight: 800 !important;
    padding: 5px 13px !important;
    border-radius: var(--r-pill) !important;
    margin-bottom: 9px !important;
    letter-spacing: .02em !important;
  }
  .step-card h3 {
    font-size: clamp(.88rem, 3.6vw, 1.08rem) !important;
    font-weight: 800 !important;
    color: #0d1b26 !important;
    margin: 0 0 7px !important;
    line-height: 1.28 !important;
  }
  .step-card p {
    font-size: clamp(.74rem, 3vw, .9rem) !important;
    color: #5d6d7b !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  /* ── C. PRICING TABLE — green header, orange figures ── */
  table, .rate-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e5eaed !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 3px 14px rgba(11, 31, 42,.05) !important;
  }
  thead th {
    background: var(--brand-green) !important;
    color: #fff !important;
    font-size: clamp(.76rem, 3.1vw, .95rem) !important;
    font-weight: 700 !important;
    padding: 14px 13px !important;
    text-align: left !important;
    border: none !important;
  }
  thead th:last-child { text-align: right !important; }
  tbody td {
    padding: 14px 13px !important;
    font-size: clamp(.76rem, 3.1vw, .93rem) !important;
    font-weight: 600 !important;
    color: #16242f !important;
    border-top: 1px solid #eef1f4 !important;
    border-left: none !important; border-right: none !important;
  }
  tbody td:last-child {
    color: var(--brand-orange) !important;
    font-weight: 800 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  tbody tr:nth-child(even) td { background: #fafbfc !important; }

  /* "Note:" helper box under a rate table */
  .rate-note, .table-note {
    background: #f5f7f8 !important;
    border-radius: 12px !important;
    padding: 13px 15px !important;
    margin-top: 13px !important;
    font-size: clamp(.72rem, 2.95vw, .87rem) !important;
    color: #5d6d7b !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }

  /* ── D. WHY CHOOSE US — orange eyebrow + centred head + 3 cards ── */
  .why-eyebrow, .section-eyebrow {
    display: block !important;
    text-align: center !important;
    color: var(--brand-orange) !important;
    font-size: clamp(.74rem, 3vw, .9rem) !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }
  .why-grid, .why-choose-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .why-card {
    background: #fff !important;
    border: 1px solid #e9eef0 !important;
    border-radius: 15px !important;
    padding: 16px 11px !important;
    text-align: center !important;
    box-shadow: 0 3px 12px rgba(11, 31, 42,.045) !important;
  }
  .why-card .why-icon {
    width: 46px !important; height: 46px !important;
    margin: 0 auto 10px !important;
    border-radius: 13px !important;
    background: var(--brand-green-soft) !important;
    color: var(--brand-green) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 1.25rem !important;
  }
  .why-card h3, .why-card h4 {
    font-size: clamp(.78rem, 3.15vw, .95rem) !important;
    font-weight: 800 !important;
    color: #0d1b26 !important;
    margin: 0 0 7px !important;
    line-height: 1.28 !important;
  }
  .why-card p {
    font-size: clamp(.7rem, 2.85vw, .85rem) !important;
    color: #5d6d7b !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

  /* ── E. FAQ ── */
  .faq-item, .faq-accordion-item {
    background: #fff !important;
    border: 1px solid #e9eef1 !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 9px rgba(11, 31, 42,.035) !important;
  }
  .faq-q, .faq-question {
    font-size: clamp(.8rem, 3.25vw, .96rem) !important;
    font-weight: 700 !important;
    color: #0d1b26 !important;
    padding: 15px 16px !important;
    min-height: 54px !important;
    line-height: 1.4 !important;
  }
  .faq-a, .faq-answer {
    font-size: clamp(.76rem, 3.05vw, .9rem) !important;
    color: #5d6d7b !important;
    line-height: 1.65 !important;
    padding: 0 16px 15px !important;
  }

  /* Centred section heading used across these pages */
  .section-head-center { text-align: center !important; margin-bottom: 18px !important; }
  .section-head-center h2 {
    font-size: clamp(1.35rem, 5.9vw, 2.1rem) !important;
    font-weight: 800 !important;
    color: #0d1b26 !important;
    letter-spacing: -.025em !important;
    line-height: 1.25 !important;
    margin: 0 0 9px !important;
  }
  .section-head-center p {
    font-size: clamp(.84rem, 3.4vw, 1rem) !important;
    color: #5d6d7b !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }
}

/* Narrow phones */
@media (max-width: 400px) {
  .process-steps-2x2 { grid-template-columns: 1fr !important; }
  .page-hero-trust   { grid-template-columns: repeat(3, 1fr) !important; }
  .why-grid, .why-choose-grid { grid-template-columns: 1fr !important; }
  thead th, tbody td { padding: 12px 10px !important; }
}

/* Rate-table header row (was an inline dark bg, now brand green) */
.rate-head { background: var(--brand-green); color: #fff; }
.rate-head th { background: var(--brand-green); color: #fff; }
@media (max-width: 991px) {
  .rate-head, .rate-head th { background: var(--brand-green) !important; color: #fff !important; }
  /* tables scroll rather than squash when they have 3+ columns */
  .rate-table { display: table !important; table-layout: fixed !important; }
  .rate-table th, .rate-table td { word-break: break-word !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §20 — GLOBAL MOBILE HARDENING  (v904)
   Fixes: dark-on-dark text · horizontal overflow · over-tall cards ·
   badge overlap · scrollable wide content. Applies to EVERY page/section.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. DARK SECTIONS — text must always be readable (all breakpoints) ── */
[style*="var(--bg-dark)"],
[style*="background: #0B1F2A"],
[style*="background:#0B1F2A"],
.page-hero-banner, .svc-hero-banner { color: #fff; }

[style*="var(--bg-dark)"] h1, [style*="var(--bg-dark)"] h2,
[style*="var(--bg-dark)"] h3, [style*="var(--bg-dark)"] h4,
[style*="background: #0B1F2A"] h1, [style*="background: #0B1F2A"] h2,
[style*="background: #0B1F2A"] h3, [style*="background: #0B1F2A"] h4,
.page-hero-banner h1, .page-hero-banner h2, .page-hero-banner h3,
.svc-hero-banner  h1, .svc-hero-banner  h2, .svc-hero-banner  h3 {
  color: #ffffff !important;
}
[style*="var(--bg-dark)"] p, [style*="var(--bg-dark)"] li,
[style*="background: #0B1F2A"] p,
.page-hero-banner p, .svc-hero-banner p {
  color: rgba(255,255,255,.88) !important;
}

@media (max-width: 991px) {

  /* ── B. KILL ALL HORIZONTAL OVERFLOW ── */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  section, .container, .section-padding, div[class], div[style] { max-width: 100% !important; }

  /* Any inline multi-column grid collapses to 2 (or 1 on tiny screens) */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(auto-fit"],
  [style*="grid-template-columns:repeat(auto-fit"],
  [style*="grid-template-columns: repeat(auto-fill"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1.2fr 0.8fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* Flex rows that would push off-screen wrap instead */
  [style*="display: flex"][style*="justify-content: center"],
  [style*="display:flex"][style*="justify-content:center"] {
    flex-wrap: wrap !important;
  }
  [style*="display: flex"] > a, [style*="display:flex"] > a { max-width: 100% !important; }

  /* ── C. WIDE CONTENT → HORIZONTALLY SCROLLABLE ── */
  .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 14px !important;
    margin: 0 0 4px !important;
    /* subtle edge fade hints there is more to the right */
    -webkit-mask-image: linear-gradient(to right, #000 88%, rgba(0,0,0,.55) 100%);
            mask-image: linear-gradient(to right, #000 88%, rgba(0,0,0,.55) 100%);
  }
  .table-scroll table, .table-scroll .rate-table {
    min-width: 520px !important;
    width: max-content !important;
    table-layout: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  .table-scroll::after {
    content: "→ swipe";
    display: block;
    font-size: .68rem; color: #9aa7b2; text-align: right;
    padding: 5px 4px 0 0;
  }
  .table-scroll th, .table-scroll td { white-space: nowrap !important; }

  /* Generic horizontal scroller for any wide card row */
  .scroll-row {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 6px !important;
  }
  .scroll-row > * {
    flex: 0 0 46% !important;
    scroll-snap-align: start !important;
  }

  /* ── D. CARDS — shorter, tighter, 9:16-ish two-up ── */
  .why-card, .step-card, .service-card, .service-card-ditto,
  .home-svc-card, .feature-card, .svc-pill {
    padding: 13px 11px !important;
    border-radius: 14px !important;
  }
  .why-card h3, .why-card h4, .step-card h3,
  .service-card h3, .service-card h4 {
    font-size: clamp(.8rem, 3.2vw, .96rem) !important;
    line-height: 1.25 !important;
    margin: 0 0 6px !important;
  }
  .why-card p, .step-card p, .service-card p {
    font-size: clamp(.7rem, 2.8vw, .84rem) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  /* Clamp long card copy to 5 lines; JS adds a Read more toggle */
  .clamp-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  .clamp-text.expanded {
    display: block !important;
    -webkit-line-clamp: unset;
    overflow: visible !important;
  }
  .read-more-btn {
    display: inline-block !important;
    margin-top: 7px !important;
    background: none !important;
    border: none !important;
    padding: 4px 0 !important;
    color: var(--brand-orange) !important;
    font-size: clamp(.7rem, 2.85vw, .84rem) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    min-height: 0 !important;
  }
  .see-more-btn {
    display: block !important;
    width: 100% !important;
    margin: 12px auto 0 !important;
    background: #fff !important;
    border: 1.6px solid var(--brand-green) !important;
    color: var(--brand-green) !important;
    font-size: clamp(.82rem, 3.3vw, .95rem) !important;
    font-weight: 700 !important;
    padding: 12px 18px !important;
    border-radius: var(--r-pill) !important;
    min-height: 48px !important;
    cursor: pointer !important;
  }
  .is-hidden-extra { display: none !important; }

  /* ── E. FLOATING BADGES — no more overlap/clipping ── */
  .floating-badge-orange-circle, .badge-badge-15k {
    position: absolute !important;
    width: auto !important;
    height: auto !important;
    max-width: 60% !important;
    border-radius: 14px !important;
    background: var(--brand-orange) !important;
    color: #fff !important;
    padding: 9px 13px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1px !important;
    box-shadow: 0 8px 20px rgba(244,96,15,.34) !important;
    border: 2px solid #fff !important;
    line-height: 1.15 !important;
  }
  .floating-badge-orange-circle { left: 10px !important; bottom: 10px !important; right: auto !important; top: auto !important; }
  .badge-badge-15k             { left: 10px !important; bottom: 10px !important; right: auto !important; top: auto !important; }
  .floating-badge-orange-circle h3, .badge-badge-15k h3 {
    font-size: clamp(1rem, 4.4vw, 1.35rem) !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }
  .floating-badge-orange-circle p, .badge-badge-15k p {
    font-size: clamp(.6rem, 2.5vw, .74rem) !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  .visual-left-photo, .trust-photo-right { position: relative !important; overflow: hidden !important; border-radius: 15px !important; }
  .visual-left-photo img, .trust-photo-right img {
    width: 100% !important; height: auto !important; display: block !important; border-radius: 15px !important;
  }

  /* ── F. GALLERY — no giant gaps ── */
  .moments-grid-6col, .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 9px !important;
    align-items: start !important;
  }
  .moments-grid-6col > *, .gallery-grid > * { margin: 0 !important; height: auto !important; }
  .moments-grid-6col img, .gallery-grid img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 11px !important;
    display: block !important;
  }

  /* ── G. DARK CTA SECTIONS — buttons stack, never clip ── */
  [style*="var(--bg-dark)"] .container > div[style*="display: flex"],
  [style*="var(--bg-dark)"] div[style*="display: flex"][style*="gap"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 11px !important;
  }
  [style*="var(--bg-dark)"] a.btn-pill-orange,
  [style*="var(--bg-dark)"] a.btn-pill-dark {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    font-size: clamp(.86rem, 3.5vw, 1rem) !important;
    white-space: normal !important;
    text-align: center !important;
  }
  [style*="var(--bg-dark)"] h2 {
    font-size: clamp(1.4rem, 6vw, 2.1rem) !important;
    line-height: 1.22 !important;
  }
  [style*="var(--bg-dark)"] .about-badge-small {
    background: var(--brand-orange) !important;
    color: #fff !important;
  }

  /* ── H. LONG WORDS / URLS never push layout ── */
  h1, h2, h3, h4, p, li, a, span, td, th { overflow-wrap: anywhere !important; }
}

@media (max-width: 400px) {
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .moments-grid-6col, .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .scroll-row > * { flex: 0 0 72% !important; }
}

/* Hide the swipe hint on tables that fit */
.table-scroll.no-swipe-hint::after { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   §21 — FINAL MOBILE FIXES  (v904)
   Pill overflow · dropdown click-toggle · gallery gaps · footer −40% ·
   header overlap. Applies to every page.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── A. PILL BUTTONS MUST WRAP (city/route grids overflowed) ───────── */
  /* nowrap belongs to the hero pair only, never to grid pills */
  .btn-pill-dark, .btn-pill-orange, .btn-call-circle {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 12px 14px !important;
    font-size: clamp(.76rem, 3.1vw, .93rem) !important;
    line-height: 1.3 !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero-buttons-row .btn-pill-dark,
  .hero-buttons-row .btn-call-circle { white-space: nowrap !important; }

  /* Route/city pill grids: 2-up, equal height, no clipping */
  [style*="grid-template-columns: repeat(3, 1fr)"] > .btn-pill-dark,
  [style*="grid-template-columns: repeat(3, 1fr)"] > .btn-pill-orange {
    width: 100% !important;
  }

  /* ── B. DROPDOWN: CLICK TO OPEN, CLICK TO CLOSE ───────────────────── */
  /* (previous rule forced every submenu permanently open) */
  .nav-menu.active .dropdown-menu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px 0 6px 10px !important;
    margin: 0 !important;
    background: #fafbfc !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
  }
  .nav-menu.active .nav-dropdown.active > .dropdown-menu {
    display: block !important;
    animation: ehpm-slide .18s ease both;
  }
  .nav-menu.active .dropdown-toggle {
    justify-content: space-between !important;
    cursor: pointer !important;
  }
  .nav-menu.active .dropdown-toggle i.fa-chevron-down {
    transition: transform .2s ease !important;
    margin-left: auto !important;
  }
  .nav-menu.active .nav-dropdown.active > .dropdown-toggle i.fa-chevron-down {
    transform: rotate(180deg) !important;
  }
  .nav-menu.active .nav-dropdown.active > .dropdown-toggle {
    color: var(--brand-orange) !important;
    background: var(--brand-orange-soft) !important;
  }
  @keyframes ehpm-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── C. GALLERY — remove the huge vertical gaps ───────────────────── */
  .moments-grid-6col, .gallery-grid,
  [class*="gallery"][style*="grid"], [id*="gallery"] [style*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 9px !important;
    align-items: start !important;
    align-content: start !important;
    grid-auto-rows: auto !important;
  }
  .moments-grid-6col > *, .gallery-grid > * {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }
  .moments-grid-6col img, .gallery-grid img,
  #gallery img, [id*="gallery"] img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 11px !important;
    display: block !important;
    margin: 0 !important;
    height: auto !important;
  }

  /* ── D. FOOTER — roughly 40% shorter ──────────────────────────────── */
  footer {
    padding: 26px var(--sp-gutter) calc(var(--bottombar-h) + 14px) !important;
    font-size: clamp(.74rem, 3vw, .86rem) !important;
    line-height: 1.5 !important;
  }
  .footer-grid-4col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 12px !important;
  }
  footer .footer-col:first-child { grid-column: 1 / -1 !important; }
  footer h4 {
    font-size: clamp(.82rem, 3.3vw, .95rem) !important;
    margin: 0 0 7px !important;
  }
  footer ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
  footer li { margin: 0 !important; line-height: 1.75 !important; }
  footer a, footer li, footer p {
    font-size: clamp(.73rem, 2.95vw, .85rem) !important;
    line-height: 1.75 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  footer p { margin-bottom: 8px !important; }
  /* the oversized white logo card */
  footer img, footer .footer-logo, footer .footer-logo-card {
    max-width: 168px !important;
    height: auto !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    margin: 0 0 10px !important;
  }
  footer .footer-col { margin: 0 !important; }
  footer hr, footer .footer-divider { margin: 12px 0 !important; }
  footer .footer-bottom, footer .copyright { padding-top: 10px !important; margin-top: 10px !important; }

  /* ── E. HEADER — no overlap on blog/legacy templates ──────────────── */
  .main-header .container,
  .main-header .header-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  /* legacy headers put phone + quote inline — hide on mobile, the sticky
     bottom bar already provides Call + WhatsApp */
  .main-header .header-phone,
  .main-header .header-cta,
  .main-header a[href^="tel:"],
  .main-header .btn-pill-orange { display: none !important; }
  .main-header nav { flex: 0 0 auto !important; margin-left: auto !important; }
  .main-header .logo, .main-header .logo-brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── F. CATCH-ALL: nothing may exceed the viewport ─────────────────── */
  section, div, a, img, table, ul, ol, p, h1, h2, h3 { max-width: 100% !important; }
  .container > * { max-width: 100% !important; }
}

@media (max-width: 400px) {
  .footer-grid-4col { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §22 — LOGO SIZE +150%  (v905)
   Header grows to match so nothing clips or overlaps.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .header-container {
    height: clamp(72px, 20vw, 112px) !important;
    padding: 0 var(--sp-gutter) !important;
  }
  .logo-brand img, .logo img, .logo-img {
    height: clamp(58px, 17vw, 96px) !important;
    max-height: none !important;
    width: auto !important;
    max-width: 70vw !important;
    object-fit: contain !important;
  }
  .logo-brand, .main-header .logo {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 72vw !important;
  }
  /* keep the burger visually balanced against the logo */
  .mobile-toggle {
    width: clamp(44px, 12vw, 54px) !important;
    height: clamp(44px, 12vw, 54px) !important;
    min-width: clamp(44px, 12vw, 54px) !important;
    flex-basis: clamp(44px, 12vw, 54px) !important;
    font-size: clamp(1.1rem, 4vw, 1.35rem) !important;
  }
  /* dropdown panel follows the header */
  .nav-menu.active { top: calc(100% + 6px) !important; }
}




/* ── §23 — Footer social icons + newly clickable cards (v905) ────────── */
.footer-social {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 14px 0 4px;
  flex-wrap: wrap;
}
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.footer-social a:hover { background: var(--brand-orange); transform: translateY(-2px); }

/* Service pills are links now — keep them looking identical, add affordance */
a.svc-pill { text-decoration: none !important; display: block; transition: all .2s ease; }
a.svc-pill:hover { border-color: var(--brand-orange); transform: translateY(-2px); }

/* Trust-strip tiles are links now */
.svc-trust-row a, .hero-trust-row a, .page-hero-trust a {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-decoration: none; color: inherit; width: 100%;
}

@media (max-width: 991px) {
  .footer-social { padding: 12px 0 2px !important; gap: 9px !important; }
  .footer-social a { width: 42px !important; height: 42px !important; font-size: .98rem !important; }
  a.svc-pill { min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §24 — LOGO -25% OPTIMIZATION FOR MOBILE SITE (ONLY MOBILE)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .header-container {
    height: clamp(105px, 31vw, 175px) !important;
    padding: 0 var(--sp-gutter) !important;
  }
  .logo-brand img, .logo img, .logo-img {
    height: clamp(90px, 26vw, 145px) !important;
    max-height: none !important;
    width: auto !important;
    max-width: 72vw !important;
    object-fit: contain !important;
  }
  .logo-brand, .main-header .logo { max-width: 74vw !important; }
  .mobile-toggle {
    width: clamp(46px, 12vw, 56px) !important;
    height: clamp(46px, 12vw, 56px) !important;
    min-width: clamp(46px, 12vw, 56px) !important;
    flex-basis: clamp(46px, 12vw, 56px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP SITE STYLING (>= 992px) — Clean, Unwrapped, Proportional
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  /* Header Container */
  .header-container {
    height: 95px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 var(--sp-gutter, 24px) !important;
  }

  /* Brand Logo */
  .logo-brand {
    display: inline-flex !important;
    align-items: center !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }
  .logo-brand img, .logo img, .logo-img {
    height: 75px !important;
    max-height: 80px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
  }

  /* Navigation Menu Horizontal Bar */
  .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 24px !important;
    margin: 0 !important;
    align-items: center !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .nav-menu > li {
    width: auto !important;
    border-bottom: none !important;
    position: relative !important;
    white-space: nowrap !important;
  }

  /* Nav Links */
  .nav-link {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    padding: 8px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: auto !important;
    border-radius: 6px !important;
    background: transparent !important;
    transition: color 0.2s ease !important;
  }
  .nav-link:hover, .nav-link.active {
    color: var(--brand-orange, #f4600f) !important;
    background: transparent !important;
  }
  .nav-link i.fa-chevron-down {
    font-size: 0.72rem !important;
    margin-left: 3px !important;
    display: inline-block !important;
    transition: transform 0.2s ease !important;
  }

  /* Desktop Dropdown Menu */
  .nav-dropdown {
    position: relative !important;
  }
  .dropdown-menu,
  .nav-dropdown > .dropdown-menu,
  .nav-menu .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 250px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(11, 31, 42, 0.14) !important;
    border: 1px solid #D9DED9 !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease !important;
    z-index: 1000 !important;
    display: block !important;
  }
  .nav-dropdown:hover > .dropdown-menu,
  .nav-dropdown.active > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  /* Dropdown items */
  .dropdown-item {
    display: flex !important;
    align-items: center !important;
    padding: 9px 18px !important;
    color: #102F3A !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
  }
  .dropdown-item:hover {
    background: var(--brand-orange-soft, #fff1e8) !important;
    color: var(--brand-orange, #f4600f) !important;
    padding-left: 22px !important;
  }

  /* Free Quote Button */
  .header-container .btn-pill-orange {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    padding: 11px 24px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border-radius: 999px !important;
    background: var(--brand-orange, #f4600f) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(244, 96, 15, 0.3) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  .header-container .btn-pill-orange:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(244, 96, 15, 0.4) !important;
  }

  /* Hide Mobile Toggle Button on Desktop */
  .mobile-toggle {
    display: none !important;
  }

  /* Section Headings on Desktop */
  .svc-head {
    text-align: center !important;
    margin-bottom: 36px !important;
  }
  .svc-eyebrow {
    display: inline-block !important;
    color: var(--brand-green, #1a5632) !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
  }
  .svc-title {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: #0B1F2A !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 12px !important;
  }
  .svc-rule {
    display: block !important;
    width: 64px !important;
    height: 4px !important;
    background: var(--brand-green, #1a5632) !important;
    border-radius: 4px !important;
    margin: 0 auto !important;
  }

  /* Desktop Home Services Grid — Show 8 items (2 rows of 4 cards), hide 9th onwards until expanded */
  .home-services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin-top: 30px !important;
  }
  .home-services-grid > .home-svc-card:nth-child(-n+8) {
    display: flex !important;
  }
  .home-services-grid > .home-svc-card:nth-child(n+9) {
    display: none !important;
  }
  .home-services-grid.expanded > .home-svc-card:nth-child(n+9) {
    display: flex !important;
    animation: fadeInSvcCard 0.35s ease forwards !important;
  }

  @keyframes fadeInSvcCard {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .svc-view-more-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 36px !important;
    width: 100% !important;
  }

  /* Premium View More Button for Desktop */
  .btn-svc-view-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: linear-gradient(135deg, #176B5B 0%, #176B5B 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50px !important;
    padding: 14px 36px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(11, 123, 62, 0.28) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
  }
  .btn-svc-view-more:hover {
    transform: translateY(-3px) scale(1.02) !important;
    background: linear-gradient(135deg, #166534 0%, #176B5B 100%) !important;
    box-shadow: 0 12px 32px rgba(11, 123, 62, 0.38) !important;
  }
  .btn-svc-view-more:active {
    transform: translateY(-1px) scale(0.99) !important;
  }
  .btn-svc-view-more i {
    font-size: 0.85rem !important;
    transition: transform 0.3s ease !important;
  }

  /* Individual Service Card */
  .home-svc-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    background: #ffffff !important;
    border: 1px solid #D9DED9 !important;
    border-radius: 16px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(11, 31, 42, 0.04) !important;
    transition: all 0.25s ease !important;
    min-height: 140px !important;
  }
  .home-svc-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--brand-orange, #f4600f) !important;
    box-shadow: 0 14px 32px rgba(244, 96, 15, 0.14) !important;
  }
  .home-svc-card i {
    color: var(--brand-green, #1a5632) !important;
    font-size: 2.2rem !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
  }
  .home-svc-card:hover i {
    color: var(--brand-orange, #f4600f) !important;
    transform: scale(1.12) !important;
  }
  .home-svc-card span {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #102F3A !important;
    line-height: 1.35 !important;
    display: block !important;
  }
  .home-svc-card span br {
    display: block !important;
  }

  /* ── Desktop Trust Strips & Hero Components ── */
  .page-hero-banner, .svc-hero-banner {
    padding: 60px 20px 48px !important;
    text-align: center !important;
    background: linear-gradient(135deg, #0b1520 0%, #16293a 100%) !important;
  }
  .page-hero-title, .svc-hero-title {
    font-size: clamp(2.5rem, 3.8vw, 3.4rem) !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 12px 0 16px !important;
    line-height: 1.18 !important;
  }
  .page-hero-lead, .svc-hero-lead {
    color: #D9DED9 !important;
    font-size: 1.15rem !important;
    max-width: 760px !important;
    margin: 0 auto 28px !important;
    line-height: 1.6 !important;
  }
  .svc-hero-btns {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
  }

  /* 3-item Trust Strip in Banner (e.g. about.html) */
  .page-hero-trust {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 860px !important;
    margin: 36px auto 0 !important;
  }
  .page-hero-trust a, .page-hero-trust > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px !important;
    padding: 18px 16px !important;
    transition: all 0.25s ease !important;
  }
  .page-hero-trust a:hover, .page-hero-trust > div:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    transform: translateY(-3px) !important;
  }
  .page-hero-trust i {
    font-size: 1.85rem !important;
    color: #f4600f !important;
    margin-bottom: 8px !important;
  }
  .page-hero-trust span {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    display: block !important;
  }

  /* 4-item Service Trust Strip on White Section (e.g. house-shifting.html) */
  .svc-trust-row, .hero-trust-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 36px auto !important;
    max-width: 1100px !important;
  }
  .svc-trust-row a, .svc-trust-row > div,
  .hero-trust-row a, .hero-trust-row > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1px solid #D9DED9 !important;
    border-radius: 14px !important;
    padding: 22px 16px !important;
    box-shadow: 0 4px 16px rgba(11, 31, 42, 0.04) !important;
    transition: all 0.25s ease !important;
  }
  .svc-trust-row a:hover, .hero-trust-row a:hover {
    transform: translateY(-4px) !important;
    border-color: #f4600f !important;
    box-shadow: 0 10px 24px rgba(244, 96, 15, 0.12) !important;
  }
  .svc-trust-row i, .hero-trust-row i {
    font-size: 2rem !important;
    color: #1a5632 !important;
    margin-bottom: 10px !important;
    transition: color 0.25s ease !important;
  }
  .svc-trust-row a:hover i, .hero-trust-row a:hover i {
    color: #f4600f !important;
  }
  .svc-trust-row span, .hero-trust-row span {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0B1F2A !important;
    line-height: 1.3 !important;
    display: block !important;
  }

  /* Estimate CTA Banner Box */
  .estimate-cta-card, .svc-estimate {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg, #0b1520 0%, #16293a 100%) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 18px !important;
    padding: 24px 36px !important;
    margin: 40px auto !important;
    max-width: 1100px !important;
    box-shadow: 0 12px 36px rgba(11, 31, 42, 0.18) !important;
  }
  .estimate-cta-left {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
  }
  .estimate-cta-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 14px !important;
    background: rgba(244, 96, 15, 0.18) !important;
    color: #f4600f !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.7rem !important;
  }
  .estimate-cta-text {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
  }
  .estimate-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 30px !important;
    background: #f4600f !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 16px rgba(244, 96, 15, 0.35) !important;
    transition: all 0.25s ease !important;
  }
  .estimate-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(244, 96, 15, 0.45) !important;
  }

  /* Areas Grid on Desktop (cities.html & location pages) */
  .areas-link-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 24px !important;
  }
  a.area-pill, .area-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    background: #ffffff !important;
    border: 1px solid #D9DED9 !important;
    border-radius: 12px !important;
    color: #102F3A !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }
  a.area-pill:hover {
    border-color: #f4600f !important;
    color: #f4600f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(244, 96, 15, 0.1) !important;
  /* Desktop Gallery Moments Grid (Exclusively 3 Cards Per Row on Desktop) */
  .moments-grid-6col,
  .gallery-grid,
  .moments-grid,
  div[class*="moments-grid"],
  div[class*="gallery-grid"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }

  .moment-card-photo {
    height: 260px !important;
  }
}

/* Footer credit line now has a single item — centre it */
.footer-bottom-ditto {
  justify-content: center !important;
  text-align: center !important;
}

/* ── Ultra-Premium Circular Floating Back-to-Top Button ── */
#scrollTopBtn {
  position: fixed !important;
  bottom: 25px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #176B5B 0%, #0B1F2A 100%) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 24px rgba(11, 123, 62, 0.45), 0 2px 8px rgba(0, 0, 0, 0.22) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 999999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

#scrollTopBtn svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
  stroke-width: 3 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  transition: transform 0.2s ease;
}

#scrollTopBtn:hover {
  background: linear-gradient(135deg, #2A8C75 0%, #176B5B 100%) !important;
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.5), 0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

#scrollTopBtn:hover svg {
  transform: translateY(-2px);
}

#scrollTopBtn:active {
  transform: translateY(0) scale(0.95) !important;
}

@media (max-width: 991px) {
  #scrollTopBtn {
    bottom: calc(var(--bottombar-h, 62px) + env(safe-area-inset-bottom, 0px) + 5px) !important;
    right: 14px !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  #scrollTopBtn svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ── Mobile 9:16 Optimized Portrait Footer Layout (2-Column Items) ── */
@media (max-width: 768px) {
  footer, .site-footer-ditto {
    padding: 16px 14px calc(var(--bottombar-h, 62px) + 10px) !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  footer .footer-grid-4col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 10px !important;
    align-items: start !important;
  }

  /* First child (Brand info card) spans full width */
  footer .footer-grid-4col > div:first-child,
  footer .footer-col:first-child {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    width: 100% !important;
  }

  footer img, footer .footer-logo, footer .footer-logo-card {
    max-width: 196px !important;
    max-height: 88px !important;
    height: auto !important;
    padding: 8px 16px !important;
    border-radius: 12px !important;
    margin: 0 auto 10px !important;
    display: block !important;
  }

  footer p {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    margin: 0 auto 6px !important;
    max-width: 320px !important;
    color: #D9DED9 !important;
    text-align: center !important;
  }

  footer .footer-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    margin: 0 !important;
  }

  footer h4 {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    margin: 0 0 6px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-bottom: 3px !important;
    width: 100% !important;
  }

  /* 2-Column Grid inside each section's list items! */
  footer .footer-col ul,
  footer ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px 6px !important;
    width: 100% !important;
    text-align: left !important;
  }

  footer .footer-col li,
  footer li {
    margin: 0 !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  footer .footer-col a,
  footer a {
    font-size: 0.73rem !important;
    line-height: 1.35 !important;
    color: #D9DED9 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 1px 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  footer .footer-social {
    padding: 10px 0 4px !important;
    gap: 10px !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  footer .footer-social a,
  .footer-social a {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  footer .footer-social a i,
  .footer-social a i {
    display: inline-block !important;
    font-size: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  footer .footer-bottom-ditto, footer .copyright {
    padding-top: 8px !important;
    margin-top: 8px !important;
    font-size: 0.70rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    text-align: center !important;
    width: 100% !important;
    color: #94a3b8 !important;
  }
}

/* ── Areas Link Grid 6-Card Limit & View More Button ── */
.areas-link-grid.collapsed .area-link-card:nth-child(n+7) {
  display: none !important;
}

.areas-view-more-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  background: linear-gradient(135deg, #176B5B 0%, #0B1F2A 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(11, 123, 62, 0.35) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.areas-view-more-btn:hover {
  background: linear-gradient(135deg, #2A8C75 0%, #176B5B 100%) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 26px rgba(249, 115, 22, 0.45) !important;
}

.areas-view-more-btn:active {
  transform: translateY(0) scale(0.97) !important;
}

/* ── Equal Height Form Inputs & Select Dropdowns ── */
#main-contact-form input,
#main-contact-form select,
#main-contact-form input[type="date"],
#contact-page-form input,
#contact-page-form select,
form#main-contact-form input,
form#main-contact-form select,
form#main-contact-form input[type="date"],
.form-input-white,
.form-input-dark {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  line-height: 38px !important;
  padding: 0 10px !important;
  font-size: 0.82rem !important;
  font-family: inherit !important;
  border-radius: 10px !important;
  border: 1.5px solid #D9DED9 !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

form#main-contact-form select,
#main-contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px 12px !important;
  padding-right: 26px !important;
}

/* ── Locality Pill Badges (Clickable Links) ── */
.locality-pill-badge,
a.locality-pill-badge {
  background: var(--bg-light, #F1EFE8) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--text-dark, #0B1F2A) !important;
  text-decoration: none !important;
  display: inline-block !important;
  border: 1px solid #D9DED9 !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

.locality-pill-badge:hover,
a.locality-pill-badge:hover {
  background: linear-gradient(135deg, #176B5B 0%, #0B1F2A 100%) !important;
  color: #ffffff !important;
  border-color: #176B5B !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(11, 123, 62, 0.28) !important;
}

.locality-pill-badge:active,
a.locality-pill-badge:active {
  transform: translateY(0) scale(0.96) !important;
}

/* ── Ultra-Premium Mobile Scroll Reveal & Touch Feedback Micro-Interactions ── */
html {
  scroll-behavior: smooth !important;
  -webkit-tap-highlight-color: transparent !important;
}

.mobile-reveal-item,
.reveal-up {
  opacity: 0 !important;
  transform: translateY(28px) scale(0.97) !important;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

.reveal-scale {
  opacity: 0 !important;
  transform: scale(0.92) !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

.mobile-reveal-item.active,
.reveal-up.active,
.reveal-scale.active {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Native App Tactile Touch Feedback */
button,
a,
.service-card-v2,
.area-link-card,
.locality-pill-badge,
.review-card-modern,
.faq-header-dhaka,
.btn-pill-orange,
.btn-pill-dark,
.btn-submit-orange,
.btn-call-circle {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, background-color 0.2s ease, color 0.2s ease !important;
}

button:active,
a:active,
.service-card-v2:active,
.area-link-card:active,
.locality-pill-badge:active,
.review-card-modern:active,
.faq-header-dhaka:active {
  transform: scale(0.96) translateY(1px) !important;
}

@media (hover: hover) and (pointer: fine) {
  .service-card-v2:hover,
  .review-card-modern:hover,
  .area-link-card:hover {
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow: 0 16px 36px rgba(11, 123, 62, 0.16) !important;
  }
}

/* ══ GLASS DOCK & UN-CROPPED MOBILE NAV DRAWER SYSTEM ══ */
.mobile-bottom-bar {
    position: fixed !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100% - 20px) !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    background: rgba(11, 31, 42, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 14px 40px -6px rgba(11, 31, 42, 0.45), 0 4px 18px rgba(23, 107, 91, 0.25) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 6px !important;
    z-index: 99999 !important;
    border-radius: 36px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-top: 1.5px solid rgba(201, 164, 92, 0.4) !important;
    box-sizing: border-box !important;
}

.mobile-bar-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    gap: 5px !important;
    padding: 8px 6px !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.mobile-bar-item span {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mobile-bar-icon-circle.green-soft {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: rgba(23, 107, 91, 0.25) !important;
    color: #C9A45C !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(201, 164, 92, 0.3) !important;
    flex-shrink: 0 !important;
}

.mobile-bar-icon-circle.green-soft svg {
    width: 13px !important;
    height: 13px !important;
}

.mobile-bar-item.center-wa {
    background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    padding: 9px 6px !important;
    border-radius: 30px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
    transform: scale(1.03) !important;
}

.mobile-bar-wa-elevated {
    width: 22px !important;
    height: 22px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.mobile-bar-wa-elevated svg {
    width: 15px !important;
    height: 15px !important;
}

@media (max-width: 380px) {
    .mobile-bottom-bar {
        left: 6px !important;
        right: 6px !important;
        width: calc(100% - 12px) !important;
        padding: 4px 4px !important;
        gap: 3px !important;
    }
    .mobile-bar-item {
        padding: 7px 4px !important;
        gap: 4px !important;
    }
    .mobile-bar-item span {
        font-size: 10px !important;
    }
    .mobile-bar-icon-circle.green-soft {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ══ DESKTOP VERTICAL FLOATING CIRCULAR DOCK (>= 992px) ══ */
@media (min-width: 992px) {
  .mobile-bottom-bar {
    position: fixed !important;
    right: 24px !important;
    bottom: 36px !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-end !important;
    padding: 0 !important;
    z-index: 99999 !important;
  }

  .mobile-bar-item {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: #0B1F2A !important;
    box-shadow: 0 8px 24px rgba(11, 31, 42, 0.35) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    padding: 0 !important;
    text-decoration: none !important;
  }

  .mobile-bar-item:hover {
    transform: scale(1.12) translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(11, 31, 42, 0.45) !important;
  }

  .mobile-bar-item span {
    position: absolute !important;
    right: 64px !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(10px) !important;
    background: rgba(11, 31, 42, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #ffffff !important;
    padding: 7px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }

  .mobile-bar-item:hover span {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
  }

  .mobile-bar-icon-circle.green-soft {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    color: #C9A45C !important;
  }

  .mobile-bar-icon-circle.green-soft svg {
    width: 22px !important;
    height: 22px !important;
  }

  .mobile-bar-item.center-wa {
    background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    transform: none !important;
  }

  .mobile-bar-item.center-wa:hover {
    transform: scale(1.12) translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.7) !important;
  }

  .mobile-bar-wa-elevated {
    width: 100% !important;
    height: 100% !important;
  }

  .mobile-bar-wa-elevated svg {
    width: 24px !important;
    height: 24px !important;
  }

  .mobile-bar-item.quote-btn-item {
    background: linear-gradient(135deg, #176B5B 0%, #102F3A 100%) !important;
    box-shadow: 0 8px 24px rgba(23, 107, 91, 0.45) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  }
}



/* ══════════════════════════════════════════════════════════════════════════
   EXECUTIVE ACTION BUTTONS & DOCK SYSTEM (ZERO OVERLAPPING & PERFECT 10px GAP)
   ══════════════════════════════════════════════════════════════════════════ */

/* Suppress all legacy duplicate floating bars across the entire site */
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
}

/* ── 1. DESKTOP VIEW (>= 992px): VERTICAL CIRCULAR DOCK ON RIGHT SIDE WITH 10px GAP ── */
@media (min-width: 992px) {
    .mobile-bottom-bar {
        position: fixed !important;
        right: 24px !important;
        bottom: 80px !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-end !important;
        padding: 0 !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        background: #0B1F2A !important;
        box-shadow: 0 8px 24px rgba(11, 31, 42, 0.35) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        padding: 0 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    .mobile-bar-item:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 30px rgba(11, 31, 42, 0.45) !important;
    }

    .mobile-bar-item span {
        position: absolute !important;
        right: 62px !important;
        top: 50% !important;
        transform: translateY(-50%) translateX(10px) !important;
        background: rgba(11, 31, 42, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: #ffffff !important;
        padding: 7px 15px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .mobile-bar-item:hover span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) translateX(0) !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
        transform: none !important;
    }

    .mobile-bar-item.center-wa:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 32px rgba(37, 211, 102, 0.7) !important;
    }

    .mobile-bar-wa-elevated {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 24px !important;
        height: 24px !important;
    }

    .mobile-bar-item.quote-btn-item {
        background: linear-gradient(135deg, #176B5B 0%, #102F3A 100%) !important;
        box-shadow: 0 8px 24px rgba(23, 107, 91, 0.45) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    }

    /* Scroll To Top Button on Desktop - Positioned in exact 10px vertical sequence below Quote button */
    #scrollTopBtn,
    .scroll-top,
    .back-to-top {
        position: fixed !important;
        right: 24px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: #102F3A !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 8px 24px rgba(11, 86, 47, 0.45) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 99998 !important;
        transition: all 0.25s ease !important;
        cursor: pointer !important;
    }

    #scrollTopBtn:hover,
    .scroll-top:hover,
    .back-to-top:hover {
        background: #102F3A !important;
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 30px rgba(11, 86, 47, 0.6) !important;
    }
}

/* ── 2. MOBILE VIEW (< 991px): STATIC NON-SCROLLABLE BOTTOM BAR WITH ZERO OVERLAPPING ── */
@media (max-width: 991px) {
    body {
        padding-bottom: 64px !important;
    }

    .mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 58px !important;
        margin: 0 !important;
        background: #0B1F2A !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 -4px 20px rgba(11, 31, 42, 0.35) !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        align-items: center !important;
        justify-items: center !important;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) 6px !important;
        z-index: 99999 !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: 2px solid #C9A45C !important;
        box-sizing: border-box !important;
    }

    .mobile-bar-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        gap: 6px !important;
        padding: 6px 4px !important;
        border-radius: 20px !important;
        background: transparent !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-bar-item span {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        pointer-events: auto !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background: rgba(23, 107, 91, 0.25) !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(201, 164, 92, 0.3) !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 13px !important;
        height: 13px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45) !important;
        padding: 6px 10px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        transform: none !important;
        height: 42px !important;
    }

    .mobile-bar-wa-elevated {
        width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Scroll To Top Button on Mobile - Shifted above bottom bar so zero overlap */
    #scrollTopBtn,
    .scroll-top,
    .back-to-top {
        position: fixed !important;
        right: 14px !important;
        bottom: 70px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(11, 31, 42, 0.9) !important;
        color: #C9A45C !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
        z-index: 99998 !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   EXECUTIVE 1 HORIZONTAL ROW ACTION BAR (NO LINE-BREAKS, ZERO OVERLAPPING)
   ══════════════════════════════════════════════════════════════════════════ */

/* Suppress all legacy duplicate floating bars across the entire site */
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
}

/* ── 1. DESKTOP VIEW (>= 992px): VERTICAL CIRCULAR DOCK ON RIGHT SIDE WITH 10px GAP ── */
@media (min-width: 992px) {
    .mobile-bottom-bar {
        position: fixed !important;
        right: 24px !important;
        bottom: 80px !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-end !important;
        padding: 0 !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        background: #0B1F2A !important;
        box-shadow: 0 8px 24px rgba(11, 31, 42, 0.35) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        padding: 0 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        flex: 0 0 50px !important;
        max-width: 50px !important;
    }

    .mobile-bar-item:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 30px rgba(11, 31, 42, 0.45) !important;
    }

    .mobile-bar-item span {
        position: absolute !important;
        right: 62px !important;
        top: 50% !important;
        transform: translateY(-50%) translateX(10px) !important;
        background: rgba(11, 31, 42, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: #ffffff !important;
        padding: 7px 15px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .mobile-bar-item:hover span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) translateX(0) !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
        transform: none !important;
    }

    .mobile-bar-item.center-wa:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 32px rgba(37, 211, 102, 0.7) !important;
    }

    .mobile-bar-wa-elevated {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 24px !important;
        height: 24px !important;
    }

    .mobile-bar-item.quote-btn-item {
        background: linear-gradient(135deg, #176B5B 0%, #102F3A 100%) !important;
        box-shadow: 0 8px 24px rgba(23, 107, 91, 0.45) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 24px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: #102F3A !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 8px 24px rgba(11, 86, 47, 0.45) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 99998 !important;
        transition: all 0.25s ease !important;
        cursor: pointer !important;
    }
}

/* ── 2. MOBILE VIEW (< 991px): STRICT 1 HORIZONTAL ROW SIDE-BY-SIDE ── */
@media (max-width: 991px) {
    body {
        padding-bottom: 64px !important;
    }

    .mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 58px !important;
        margin: 0 !important;
        background: #0B1F2A !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 -4px 20px rgba(11, 31, 42, 0.4) !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* STRICT: FORCE 1 SINGLE HORIZONTAL ROW */
        align-items: center !important;
        justify-content: space-around !important;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) 6px !important;
        z-index: 99999 !important;
        border: none !important;
        border-top: 2px solid #C9A45C !important;
        box-sizing: border-box !important;
    }

    .mobile-bar-item {
        flex: 1 1 33.333% !important; /* STRICT: 3 EQUAL COLUMNS */
        max-width: 33.333% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        gap: 4px !important;
        padding: 6px 2px !important;
        border-radius: 20px !important;
        background: transparent !important;
        height: 44px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .mobile-bar-item span {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        pointer-events: auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: rgba(23, 107, 91, 0.25) !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(201, 164, 92, 0.3) !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 12px !important;
        height: 12px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45) !important;
        padding: 6px 6px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        transform: none !important;
        height: 42px !important;
        flex: 1 1 33.333% !important;
        max-width: 33.333% !important;
    }

    .mobile-bar-wa-elevated {
        width: 18px !important;
        height: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 15px !important;
        height: 15px !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 14px !important;
        bottom: 70px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(11, 31, 42, 0.9) !important;
        color: #C9A45C !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
        z-index: 99998 !important;
    }

    @media (max-width: 360px) {
        .mobile-bar-item span {
            font-size: 10px !important;
        }
        .mobile-bar-item {
            gap: 2px !important;
        }
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   EXECUTIVE 2-BUTTON (50/50 CALL & WHATSAPP) ACTION DOCK SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/* Suppress all legacy duplicate floating bars across the entire site */
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
}

/* ── 1. DESKTOP VIEW (>= 992px): VERTICAL CIRCULAR DOCK ON RIGHT SIDE WITH 10px GAP ── */
@media (min-width: 992px) {
    .mobile-bottom-bar {
        position: fixed !important;
        right: 24px !important;
        bottom: 80px !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-end !important;
        padding: 0 !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        background: #0B1F2A !important;
        box-shadow: 0 8px 24px rgba(11, 31, 42, 0.35) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        padding: 0 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        flex: 0 0 50px !important;
        max-width: 50px !important;
    }

    .mobile-bar-item:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 30px rgba(11, 31, 42, 0.45) !important;
    }

    .mobile-bar-item span {
        position: absolute !important;
        right: 62px !important;
        top: 50% !important;
        transform: translateY(-50%) translateX(10px) !important;
        background: rgba(11, 31, 42, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: #ffffff !important;
        padding: 7px 15px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .mobile-bar-item:hover span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) translateX(0) !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
        transform: none !important;
    }

    .mobile-bar-item.center-wa:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 32px rgba(37, 211, 102, 0.7) !important;
    }

    .mobile-bar-wa-elevated {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 24px !important;
        height: 24px !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 24px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: #102F3A !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 8px 24px rgba(11, 86, 47, 0.45) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 99998 !important;
        transition: all 0.25s ease !important;
        cursor: pointer !important;
    }
}

/* ── 2. MOBILE VIEW (< 991px): DUAL 50/50 SPLIT BUTTONS FOR CALL & WHATSAPP ONLY ── */
@media (max-width: 991px) {
    body {
        padding-bottom: 64px !important;
    }

    .mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 60px !important;
        margin: 0 !important;
        background: #0B1F2A !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 -4px 20px rgba(11, 31, 42, 0.45) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 50/50 DUAL BUTTON SPLIT */
        gap: 8px !important;
        align-items: center !important;
        justify-items: center !important;
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)) 10px !important;
        z-index: 99999 !important;
        border: none !important;
        border-top: 2px solid #C9A45C !important;
        box-sizing: border-box !important;
    }

    .mobile-bar-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        border-radius: 26px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        width: 100% !important;
        height: 44px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        transition: all 0.2s ease !important;
        max-width: 100% !important;
        flex: 1 1 50% !important;
    }

    .mobile-bar-item span {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        letter-spacing: 0.2px !important;
        pointer-events: auto !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        background: rgba(23, 107, 91, 0.3) !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 14px !important;
        height: 14px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5) !important;
        padding: 10px 14px !important;
        border-radius: 26px !important;
        border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
        transform: none !important;
        height: 44px !important;
        max-width: 100% !important;
    }

    .mobile-bar-wa-elevated {
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 18px !important;
        height: 18px !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 14px !important;
        bottom: 70px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(11, 31, 42, 0.9) !important;
        color: #C9A45C !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
        z-index: 99998 !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   COMPLETELY REMOVED & HIDDEN BOTTOM ACTION BARS
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-bottom-bar,
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

body {
    padding-bottom: 0 !important;
}




/* ══════════════════════════════════════════════════════════════════════════
   RESTORED EXECUTIVE 2-BUTTON (50/50 CALL & WHATSAPP) ACTION DOCK SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/* Suppress all legacy duplicate floating bars across the entire site */
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
}

/* ── 1. DESKTOP VIEW (>= 992px): VERTICAL CIRCULAR DOCK ON RIGHT SIDE WITH 10px GAP ── */
@media (min-width: 992px) {
    .mobile-bottom-bar {
        position: fixed !important;
        right: 24px !important;
        bottom: 80px !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-end !important;
        padding: 0 !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        background: #0B1F2A !important;
        box-shadow: 0 8px 24px rgba(11, 31, 42, 0.35) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        padding: 0 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        flex: 0 0 50px !important;
        max-width: 50px !important;
    }

    .mobile-bar-item:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 30px rgba(11, 31, 42, 0.45) !important;
    }

    .mobile-bar-item span {
        position: absolute !important;
        right: 62px !important;
        top: 50% !important;
        transform: translateY(-50%) translateX(10px) !important;
        background: rgba(11, 31, 42, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: #ffffff !important;
        padding: 7px 15px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .mobile-bar-item:hover span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) translateX(0) !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
        transform: none !important;
    }

    .mobile-bar-item.center-wa:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 32px rgba(37, 211, 102, 0.7) !important;
    }

    .mobile-bar-wa-elevated {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 24px !important;
        height: 24px !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 24px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: #102F3A !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 8px 24px rgba(11, 86, 47, 0.45) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 99998 !important;
        transition: all 0.25s ease !important;
        cursor: pointer !important;
    }
}

/* ── 2. MOBILE VIEW (< 991px): DUAL 50/50 SPLIT BUTTONS FOR CALL & WHATSAPP ONLY ── */
@media (max-width: 991px) {
    body {
        padding-bottom: 64px !important;
    }

    .mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 60px !important;
        margin: 0 !important;
        background: #0B1F2A !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 -4px 20px rgba(11, 31, 42, 0.45) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 50/50 DUAL BUTTON SPLIT */
        gap: 8px !important;
        align-items: center !important;
        justify-items: center !important;
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)) 10px !important;
        z-index: 99999 !important;
        border: none !important;
        border-top: 2px solid #C9A45C !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        border-radius: 26px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        width: 100% !important;
        height: 44px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        transition: all 0.2s ease !important;
        max-width: 100% !important;
        flex: 1 1 50% !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item span {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        letter-spacing: 0.2px !important;
        pointer-events: auto !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        background: rgba(23, 107, 91, 0.3) !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 14px !important;
        height: 14px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5) !important;
        padding: 10px 14px !important;
        border-radius: 26px !important;
        border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
        transform: none !important;
        height: 44px !important;
        max-width: 100% !important;
    }

    .mobile-bar-wa-elevated {
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 18px !important;
        height: 18px !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 14px !important;
        bottom: 70px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(11, 31, 42, 0.9) !important;
        color: #C9A45C !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
        z-index: 99998 !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   COMPLETELY REMOVED UNDER-FOOTER SECTIONS & BOTTOM ACTION BARS
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-bottom-bar,
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

body {
    padding-bottom: 0 !important;
}




/* ══════════════════════════════════════════════════════════════════════════
   NON-SCROLLABLE FIXED MOBILE BOTTOM ACTION BAR (CALL & WHATSAPP ONLY)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    body {
        padding-bottom: 66px !important;
    }

    .fixed-mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 60px !important;
        background: #0B1F2A !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 -4px 20px rgba(11, 31, 42, 0.5) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 12px !important;
        z-index: 999999 !important;
        border-top: 2px solid #C9A45C !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .fixed-bar-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        height: 44px !important;
        border-radius: 24px !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        box-sizing: border-box !important;
        transition: transform 0.2s ease !important;
    }

    .fixed-bar-btn.call-btn {
        background: linear-gradient(135deg, #176B5B 0%, #102F3A 100%) !important;
        border: 1.5px solid rgba(201, 164, 92, 0.4) !important;
        box-shadow: 0 4px 14px rgba(23, 107, 91, 0.4) !important;
    }

    .fixed-bar-btn.wa-btn {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
        box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5) !important;
    }

    .fixed-bar-btn svg {
        flex-shrink: 0 !important;
    }

    .fixed-bar-btn span {
        white-space: nowrap !important;
        letter-spacing: 0.3px !important;
    }
}

@media (min-width: 992px) {
    .fixed-mobile-bottom-bar {
        display: none !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   ENQUIRY POPUP MODAL 10px+ BOTTOM CLEARANCE ABOVE QUICK ACTION BAR
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    #ehpmEnq {
        padding: 12px 12px calc(60px + 16px + env(safe-area-inset-bottom, 0px)) 12px !important;
    }
    
    #ehpmEnq .ehpm-box {
        max-height: calc(100dvh - 88px) !important;
        margin-bottom: 0 !important;
    }

    #ehpmEnq .ehpm-note {
        padding-bottom: 8px !important;
        margin-bottom: 4px !important;
    }

    .modal-dialog,
    #quoteModal .modal-dialog,
    .quote-modal-dialog {
        margin-bottom: calc(60px + 16px) !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   STRICT WCAG TEXT CONTRAST & ANTI-BLENDING PROTECTION SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. LIGHT SURFACE TEXT ISOLATION ── */
body, main, section, .section, .light-bg, .card, .service-card, .testimonial-card, 
.faq-card, .feature-card, .area-link-card, .pricing-card, .bg-white, .bg-light {
    color: #17232A !important;
}

body h1, body h2, body h3, body h4, body h5, body h6,
.section h1, .section h2, .section h3, .section h4, .section h5, .section h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.service-card h1, .service-card h2, .service-card h3, .service-card h4,
.testimonial-card h1, .testimonial-card h2, .testimonial-card h3,
.faq-header-dhaka, .faq-header, .faq-question {
    color: #17232A !important;
    text-shadow: none !important;
}

p, li, .desc, .text-content, .card-body p, .faq-body p, .faq-answer {
    color: #17232A;
}

.text-muted, .subtitle, .meta, .date, .blog-date, .author, .faq-body, .service-desc {
    color: #66747A !important;
}

/* ── 2. DARK SURFACE TEXT ISOLATION (HERO, FOOTER, DRAWER, DARK CARDS) ── */
footer, .footer, .footer-ditto, .hero, .hero-ditto, .hero-section, .hero-overlay, 
.dark-section, .bg-dark, .mobile-nav-drawer, .drawer-header, .drawer-body, 
.drawer-footer, .nav-drawer, .header-dark {
    background-color: #0B1F2A !important;
    color: #FFFFFF !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.hero-title, .hero-heading, .dark-section h1, .dark-section h2, .dark-section h3,
.mobile-nav-drawer h1, .mobile-nav-drawer h2, .mobile-nav-drawer h3, .mobile-nav-drawer h4 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

footer p, footer li, footer span, footer td,
.hero p, .hero li, .hero span, .hero-subtitle, .hero-description,
.dark-section p, .dark-section li, .dark-section span,
.drawer-body p, .drawer-body li, .drawer-body a, .drawer-body span {
    color: #F1EFE8 !important;
}

footer .footer-desc, footer .copyright, .hero-lead, .dark-section .subtitle {
    color: #CBD4D1 !important;
}

footer a, .footer a {
    color: #F1EFE8 !important;
}

footer a:hover, .footer a:hover, .drawer-body a:hover {
    color: #C9A45C !important;
}

/* ── 3. BUTTON CONTRAST PROTECTION ── */
.btn-primary, .cta-btn, .btn-submit, button[type="submit"], .hero-cta, .quote-btn {
    background: linear-gradient(135deg, #176B5B 0%, #2A8C75 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn-primary *, .cta-btn *, .btn-submit * {
    color: #FFFFFF !important;
}

.btn-gold, .badge-gold, .accent-gold, .gold-pill {
    background: linear-gradient(135deg, #C9A45C 0%, #E2C98A 100%) !important;
    color: #0B1F2A !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

.btn-gold *, .badge-gold *, .accent-gold * {
    color: #0B1F2A !important;
}

.btn-secondary, .btn-outline {
    background: transparent !important;
    border: 1.5px solid #176B5B !important;
    color: #176B5B !important;
    font-weight: 700 !important;
}

.btn-secondary:hover, .btn-outline:hover {
    background: #176B5B !important;
    color: #FFFFFF !important;
}

/* ── 4. FORM CONTROL CONTRAST ── */
input, select, textarea, .form-control {
    background-color: #FFFFFF !important;
    color: #17232A !important;
    border: 1.5px solid #D9DED9 !important;
    font-weight: 500 !important;
}

input::placeholder, textarea::placeholder {
    color: #66747A !important;
    opacity: 1 !important;
}

input:focus, select:focus, textarea:focus {
    border-color: #176B5B !important;
    background-color: #FFFFFF !important;
    color: #17232A !important;
    box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.18) !important;
}

/* ── 5. RATING STARS & BADGES ── */
.star, .stars, .rating-stars, .fa-star, .star-rating {
    color: #C9A45C !important;
}

.badge-primary, .service-badge, .tag-primary {
    background-color: #176B5B !important;
    color: #FFFFFF !important;
}

/* ── 6. HEADER & MOBILE DRAWER NAVIGATION ── */
.header-ditto, .main-header, header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #D9DED9 !important;
}

.header-ditto a, .main-header a, header a {
    color: #17232A !important;
}

.header-ditto a:hover, .main-header a:hover, header a:hover,
.nav-link.active, .nav-menu a.active {
    color: #176B5B !important;
}

/* Drawer Menu Items */
.drawer-nav-item, .drawer-menu a, .mobile-nav-link {
    color: #F1EFE8 !important;
}

.drawer-nav-item:hover, .drawer-menu a:hover, .mobile-nav-link:hover,
.drawer-nav-item.active, .drawer-menu a.active {
    color: #C9A45C !important;
}




/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP COMPREHENSIVE TEXT READABILITY & CONTRAST PROTECTION (>= 992px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* 1. HERO TEXT OVER BACKGROUND IMAGES & BANNERS */
    .hero, .hero-section, .hero-ditto, .banner, .page-header {
        position: relative !important;
    }
    
    .hero::before, .hero-section::before, .banner::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(135deg, rgba(11, 31, 42, 0.88) 0%, rgba(16, 47, 58, 0.72) 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .hero-content, .hero-text, .hero-title, .hero-subtitle, .hero-cta,
    .banner-content, .page-header-content {
        position: relative !important;
        z-index: 2 !important;
    }

    .hero h1, .hero h2, .hero h3, .hero-title, .banner h1 {
        color: #FFFFFF !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
        font-weight: 900 !important;
    }

    .hero p, .hero li, .hero span, .hero-subtitle, .banner p {
        color: #F1EFE8 !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
    }

    /* 2. DESKTOP NAVBAR & HEADER CONTRAST */
    header, .main-header, .header-ditto {
        background: #FFFFFF !important;
        border-bottom: 1px solid #D9DED9 !important;
        box-shadow: 0 4px 20px rgba(11, 31, 42, 0.05) !important;
    }

    .nav-link, .nav-menu a, .header-link {
        color: #17232A !important;
        font-weight: 700 !important;
        transition: color 0.2s ease !important;
    }

    .nav-link:hover, .nav-menu a:hover, .header-link:hover {
        color: #176B5B !important;
    }

    .nav-link.active, .nav-menu a.active {
        color: #176B5B !important;
        border-bottom: 2px solid #C9A45C !important;
    }

    /* 3. LIGHT SECTION & CARD TEXT ISOLATION */
    .section, section, .card, .service-card, .testimonial-card, 
    .faq-card, .feature-card, .area-link-card, .pricing-card {
        color: #17232A !important;
    }

    .section h1, .section h2, .section h3, .section h4,
    .card h1, .card h2, .card h3, .card h4,
    .service-card h2, .service-card h3, .testimonial-card h3,
    .faq-header-dhaka, .faq-question {
        color: #17232A !important;
        font-weight: 800 !important;
    }

    .card p, .service-card p, .testimonial-card p, .faq-body p {
        color: #17232A !important;
    }

    .card-meta, .service-desc, .testimonial-author, .text-muted, .breadcrumb {
        color: #66747A !important;
    }

    .breadcrumb a {
        color: #176B5B !important;
    }

    .breadcrumb a:hover {
        color: #2A8C75 !important;
    }

    /* 4. DARK SECTIONS & FOOTER CONTRAST */
    footer, .footer, .footer-ditto, .dark-section, .bg-dark {
        background-color: #0B1F2A !important;
        color: #FFFFFF !important;
    }

    footer h1, footer h2, footer h3, footer h4, footer h5,
    .dark-section h1, .dark-section h2, .dark-section h3 {
        color: #FFFFFF !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    }

    footer p, footer li, footer span, footer td,
    .dark-section p, .dark-section span {
        color: #F1EFE8 !important;
    }

    footer a, .footer a {
        color: #F1EFE8 !important;
    }

    footer a:hover, .footer a:hover {
        color: #C9A45C !important;
    }

    footer .copyright, footer .footer-bottom {
        color: #CBD4D1 !important;
    }

    /* 5. FORM LABELS & INPUT CONTRAST */
    form label, .form-group label {
        color: #17232A !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
    }

    input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea {
        background-color: #FFFFFF !important;
        color: #17232A !important;
        border: 1.5px solid #D9DED9 !important;
        font-weight: 600 !important;
    }

    input::placeholder, textarea::placeholder {
        color: #66747A !important;
        opacity: 1 !important;
    }

    input:focus, select:focus, textarea:focus {
        border-color: #176B5B !important;
        background-color: #FFFFFF !important;
        color: #17232A !important;
        box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.18) !important;
    }

    /* 6. BUTTON CONTRAST PROTECTION */
    .btn-primary, .cta-btn, .btn-submit, button[type="submit"] {
        background: linear-gradient(135deg, #176B5B 0%, #2A8C75 100%) !important;
        color: #FFFFFF !important;
        font-weight: 800 !important;
        border: none !important;
        box-shadow: 0 4px 16px rgba(23, 107, 91, 0.35) !important;
    }

    .btn-gold, .badge-gold, .gold-pill {
        background: linear-gradient(135deg, #C9A45C 0%, #E2C98A 100%) !important;
        color: #0B1F2A !important;
        font-weight: 800 !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   MASTER HIGH-CONTRAST ANTI-BLENDING PROTECTION SYSTEM (ALL DEVICES & PAGES)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DARK SECTIONS, HERO & CONTACT CONTAINER TEXT PROTECTION ── */
.hero, .hero-section, .hero-ditto, .dark-section, .bg-dark, .contact-section, 
.cta-section, .booking-section, footer, .footer, .footer-ditto, .mobile-nav-drawer {
    background-color: #0B1F2A !important;
    color: #FFFFFF !important;
}

.hero h1, .hero h2, .hero h3, .hero h4,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4,
.hero-ditto h1, .hero-ditto h2, .hero-ditto h3, .hero-ditto h4,
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4,
.contact-section h1, .contact-section h2, .contact-section h3, .contact-section h4,
.cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4,
.booking-section h1, .booking-section h2, .booking-section h3,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
footer h1, footer h2, footer h3, footer h4,
#hero-heading, .hero-title, .section-title-dark {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

/* Green/Gold highlight text inside dark headings */
.hero h1 span, .hero h2 span, .hero h3 span,
.hero-section h1 span, .hero-section h2 span,
.dark-section h1 span, .dark-section h2 span,
.contact-section h1 span, .contact-section h2 span {
    color: #4ADE80 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.hero p, .hero li, .hero label,
.hero-section p, .hero-section li, .hero-section label,
.dark-section p, .dark-section li, .dark-section label,
.contact-section p, .contact-section li, .contact-section label,
.cta-section p, .cta-section li, .cta-section label,
.bg-dark p, .bg-dark li, .bg-dark label,
.trust-points span, .feature-list li, .check-list li {
    color: #F1EFE8 !important;
}

.trust-points i, .feature-list i, .check-list i, .trust-badge i, .check-icon {
    color: #C9A45C !important;
}

/* ── 2. BUTTON CONTRAST ISOLATION (ZERO BLENDING) ── */
/* Primary Buttons */
.btn-primary, .hero-cta, .cta-btn, .btn-submit, button[type="submit"], .btn-emerald {
    background: linear-gradient(135deg, #176B5B 0%, #2A8C75 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(23, 107, 91, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-primary *, .hero-cta *, .cta-btn *, .btn-submit * {
    color: #FFFFFF !important;
}

/* Dark Navy Buttons */
.btn-dark, .btn-navy {
    background: #102F3A !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 800 !important;
}

.btn-dark *, .btn-navy * {
    color: #FFFFFF !important;
}

/* Outline / Secondary Buttons on Light Surfaces */
.btn-outline, .btn-secondary, a.btn-outline, button.btn-outline {
    background: #FFFFFF !important;
    border: 1.5px solid #176B5B !important;
    color: #176B5B !important;
    font-weight: 800 !important;
}

.btn-outline *, .btn-secondary * {
    color: #176B5B !important;
}

/* Outline Buttons inside Dark Containers */
.hero .btn-outline, .dark-section .btn-outline, .bg-dark .btn-outline, 
.contact-section .btn-outline, .hero-ditto .btn-outline {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1.5px solid #FFFFFF !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    backdrop-filter: blur(8px) !important;
}

.hero .btn-outline *, .dark-section .btn-outline *, .contact-section .btn-outline * {
    color: #FFFFFF !important;
}

/* Gold Pill Buttons */
.btn-gold, .gold-pill, .badge-gold {
    background: linear-gradient(135deg, #C9A45C 0%, #E2C98A 100%) !important;
    color: #0B1F2A !important;
    font-weight: 800 !important;
    border: none !important;
}

.btn-gold *, .gold-pill *, .badge-gold * {
    color: #0B1F2A !important;
}

/* ── 3. LIGHT SECTION & CARD TEXT PROTECTION ── */
.section-light, .card, .service-card, .testimonial-card, .about-section, .faq-section {
    background-color: #FFFFFF !important;
    color: #17232A !important;
}

.card h1, .card h2, .card h3, .card h4,
.service-card h1, .service-card h2, .service-card h3, .service-card h4,
.testimonial-card h1, .testimonial-card h2, .testimonial-card h3,
.about-section h1, .about-section h2, .about-section h3,
.faq-section h1, .faq-section h2, .faq-section h3 {
    color: #17232A !important;
    font-weight: 800 !important;
}

.card p, .card li, .service-card p, .testimonial-card p, .about-section p {
    color: #17232A !important;
}

.card-meta, .service-desc, .text-muted {
    color: #66747A !important;
}

/* ── 4. FORM INPUTS CONTRAST ── */
input, select, textarea, .form-control {
    background-color: #FFFFFF !important;
    color: #17232A !important;
    border: 1.5px solid #D9DED9 !important;
    font-weight: 600 !important;
}

input::placeholder, textarea::placeholder {
    color: #66747A !important;
    opacity: 1 !important;
}

input:focus, select:focus, textarea:focus {
    border-color: #176B5B !important;
    background-color: #FFFFFF !important;
    color: #17232A !important;
    box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.18) !important;
}




/* ══════════════════════════════════════════════════════════════════════════
   UNIVERSAL ABSOLUTE ANTI-BLENDING LIGHT TEXT FOR ALL DARK SURFACES
   ══════════════════════════════════════════════════════════════════════════ */

/* Target ALL elements inside ANY dark container or section */
.hero *, .hero-section *, .hero-ditto *, .dark-section *, .bg-dark *, 
.contact-section *, .cta-section *, .booking-section *, footer *, .footer *, 
.footer-ditto *, .mobile-nav-drawer *, [class*="dark"] *, [style*="background:#0B1F2A"] *, 
[style*="background: #0B1F2A"] *, [style*="background-color:#0B1F2A"] *, [style*="background-color: #0B1F2A"] * {
    color: #F1EFE8 !important;
}

/* Enforce Pure White (#FFFFFF) on all headings, titles, links, and bold text inside dark containers */
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4,
.hero-ditto h1, .hero-ditto h2, .hero-ditto h3, .hero-ditto h4,
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4,
.contact-section h1, .contact-section h2, .contact-section h3, .contact-section h4,
.cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4,
.booking-section h1, .booking-section h2, .booking-section h3,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
footer h1, footer h2, footer h3, footer h4,
[class*="dark"] h1, [class*="dark"] h2, [class*="dark"] h3, [class*="dark"] h4,
.hero strong, .dark-section strong, .contact-section strong, .cta-section strong,
.hero b, .dark-section b, .contact-section b, .cta-section b,
.hero a, .dark-section a, .contact-section a, .cta-section a, footer a {
    color: #FFFFFF !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Green & Gold Highlights on Dark Surfaces */
.hero h1 span, .hero h2 span, .hero h3 span,
.hero-section h1 span, .hero-section h2 span,
.dark-section h1 span, .dark-section h2 span,
.contact-section h1 span, .contact-section h2 span,
.highlight-green, .accent-emerald {
    color: #4ADE80 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

.hero h1 span.gold, .hero h2 span.gold, .dark-section span.gold, .accent-gold {
    color: #C9A45C !important;
}

/* Buttons inside dark sections MUST have crisp contrasting text */
.hero .btn-primary, .dark-section .btn-primary, .contact-section .btn-primary, .cta-section .btn-primary,
.hero .btn-submit, .dark-section .btn-submit, .contact-section .btn-submit {
    background: linear-gradient(135deg, #176B5B 0%, #2A8C75 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border: none !important;
}

.hero .btn-primary *, .dark-section .btn-primary *, .contact-section .btn-primary * {
    color: #FFFFFF !important;
}

.hero .btn-outline, .dark-section .btn-outline, .contact-section .btn-outline, .cta-section .btn-outline {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1.5px solid #FFFFFF !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

.hero .btn-outline *, .dark-section .btn-outline *, .contact-section .btn-outline * {
    color: #FFFFFF !important;
}

.hero .btn-gold, .dark-section .btn-gold, .contact-section .btn-gold, .cta-section .btn-gold {
    background: linear-gradient(135deg, #C9A45C 0%, #E2C98A 100%) !important;
    color: #0B1F2A !important;
    font-weight: 800 !important;
}

.hero .btn-gold *, .dark-section .btn-gold *, .contact-section .btn-gold * {
    color: #0B1F2A !important;
}