/* ============================================================================
   SHARED FOOTER — premium dark/gold (master design, used on EVERY page).
   Scoped to .footer / .footer-cta so it applies regardless of the page's body
   theme. Loaded LAST so it is the single source of truth for the footer look.
   Footer-only — does not affect any other section of any page.
   ============================================================================ */
:root{
  --fd-gold:#FACC15; --fd-gold-deep:#D4A50F;
  --fd-line:rgba(250,204,21,0.18); --fd-line-strong:rgba(250,204,21,0.40);
  --fd-text:rgba(255,255,255,0.78);
}

/* ---- Footer shell ---- */
.footer{
  background:linear-gradient(180deg,rgba(10,10,12,0.97) 0%,rgba(6,6,8,0.99) 100%) !important;
  border-top:1px solid var(--fd-line);
  color:var(--fd-text);
}
.footer .top{ border-bottom:1px solid rgba(255,255,255,0.08) !important; }

/* ---- CTA box at the top of the footer ---- */
.footer .footer-cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(30,27,20,0.65) 0%, rgba(16,15,13,0.72) 100%) !important;
  border:1px solid var(--fd-line) !important;
  border-radius:22px;
  padding:clamp(22px,3vw,34px) clamp(24px,4vw,40px);
  margin-bottom:clamp(34px,4.5vw,52px);
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.footer .footer-cta-text h3{
  font-family:'Fraunces',Georgia,serif; font-weight:500;
  font-size:clamp(20px,2.2vw,29px); line-height:1.18; letter-spacing:-0.01em;
  color:#fff !important; margin:0 0 6px;
}
.footer .footer-cta-text p{ margin:0; color:rgba(255,255,255,0.72) !important; font-size:clamp(14px,1.1vw,16px); line-height:1.5; }
.footer .footer-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }
.footer .footer-cta-call,
.footer .footer-cta-quote{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:54px; padding:14px 28px; border-radius:999px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:0.95rem;
  text-decoration:none; white-space:nowrap; box-sizing:border-box;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.footer .footer-cta-call{ background:var(--fd-gold) !important; color:#0B0B0C !important; box-shadow:0 10px 26px rgba(250,204,21,0.28); border:1px solid var(--fd-gold); }
.footer .footer-cta-call:hover{ background:#FFD63B !important; transform:translateY(-2px); }
.footer .footer-cta-quote{ background:rgba(255,255,255,0.05) !important; color:#fff !important; border:1px solid var(--fd-line-strong); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.footer .footer-cta-quote:hover{ background:var(--fd-gold) !important; color:#0B0B0C !important; border-color:var(--fd-gold); transform:translateY(-2px); }

/* ---- Brand column ---- */
.footer .brand-col img{ background:#F6F2EA; padding:14px 16px; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.footer .brand-col .contact a,
.footer .brand-col .contact span{ color:rgba(255,255,255,0.78) !important; }
.footer .brand-col .contact a:hover{ color:var(--fd-gold) !important; }
.footer .footer-call-btn{ display:inline-flex; align-items:center; gap:8px; width:fit-content; margin-top:14px; padding:13px 22px; border-radius:999px; font-weight:700; font-size:0.9rem; text-decoration:none; background:var(--fd-gold) !important; color:#0B0B0C !important; }
.footer .footer-call-btn:hover{ background:#FFD63B !important; color:#0B0B0C !important; }

/* ---- Map frame ---- */
.footer .brand-col .footer-map{ border:1px solid var(--fd-line) !important; background:#111 !important; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.footer .brand-col .footer-map iframe{ filter:grayscale(0.2) brightness(0.9); }
.footer .brand-col .footer-map .footer-map-cta{ background:rgba(10,10,12,0.85) !important; color:#fff !important; border:1px solid var(--fd-line) !important; }
.footer .brand-col .footer-map .footer-map-cta:hover{ background:var(--fd-gold) !important; color:#0B0B0C !important; border-color:var(--fd-gold) !important; }

/* ---- Column headings + links ---- */
.footer h5{ color:var(--fd-gold) !important; }
.footer ul a,
.footer ul span{ color:rgba(255,255,255,0.74) !important; }
.footer ul a:hover{ color:var(--fd-gold) !important; }
.footer .footer-cities-2col li a strong{ color:var(--fd-gold) !important; }

/* ---- Credentials chips ---- */
.footer .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.footer .chip{ color:rgba(255,255,255,0.82) !important; background:rgba(255,255,255,0.05) !important; border:1px solid var(--fd-line) !important; }

/* ---- Bottom bar ---- */
.footer .bottom{ color:rgba(255,255,255,0.55) !important; border-top:1px solid rgba(255,255,255,0.08); }
.footer .bottom .links a{ color:rgba(255,255,255,0.70) !important; }
.footer .bottom .links a:hover{ color:var(--fd-gold) !important; }

/* ---- Mobile ---- */
@media (max-width:640px){
  .footer .footer-cta{ flex-direction:column; align-items:stretch; text-align:center; border-radius:18px; }
  .footer .footer-cta-actions{ flex-direction:column; width:100%; }
  .footer .footer-cta-call,
  .footer .footer-cta-quote{ width:100%; }
}

/* ---- Compact phone footer (≤540px) — much shorter, all links + contact kept.
   Loaded last so it wins over each page's footer layout; mobile-only, so the
   desktop footer is untouched. ---- */
@media (max-width:540px){
  /* shell: trim the oversized top padding; add bottom room so the sticky bottom
     Call CTA never covers the last footer links */
  .footer{ padding-top:34px !important; padding-bottom:96px !important; }

  /* top CTA banner — compact (still present, just tighter) */
  .footer .footer-cta{ padding:18px !important; margin-bottom:24px !important; gap:14px !important; }
  .footer .footer-cta-text h3{ font-size:18px !important; margin-bottom:4px !important; }
  .footer .footer-cta-text p{ font-size:13px !important; }
  .footer .footer-cta-call,
  .footer .footer-cta-quote{ min-height:46px !important; padding:12px 20px !important; font-size:0.9rem !important; }

  /* tighter stacked columns + headings */
  .footer .top{ gap:24px !important; padding-bottom:22px !important; }
  .footer h5{ margin-bottom:10px !important; }

  /* brand: smaller logo, tight contact block */
  .footer .brand-col img{ width:auto !important; height:54px !important; padding:8px 12px !important; border-radius:12px !important; }
  .footer .brand-col .contact{ gap:3px !important; margin-top:10px !important; }

  /* "Open in Google Maps" pill — compact (the map iframe is already hidden on mobile) */
  .footer .brand-col .footer-map{ margin-top:10px !important; }
  .footer .brand-col .footer-map .footer-map-cta{ padding:9px 14px !important; font-size:0.8rem !important; }

  /* the footer's own Call Now is redundant on mobile (sticky bottom Call CTA covers it) */
  .footer .footer-call-btn{ display:none !important; }

  /* Services + Dedicated City Pages → tight 2-column grids: every link kept,
     roughly half the height */
  .footer .top ul{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:9px 14px !important; margin:0 !important; padding:0 !important; }
  .footer .top ul li{ padding:0 !important; margin:0 !important; }
  .footer .top ul a,
  .footer .top ul span{ font-size:0.82rem !important; line-height:1.3 !important; }

  /* credentials + bottom bar a touch tighter */
  .footer .chips{ gap:6px !important; }
  .footer .chip{ font-size:0.72rem !important; padding:5px 10px !important; }
  .footer .bottom{ padding-top:16px !important; }
}

/* ============================================================================
   MOBILE STICKY CALL BAR — shared on every page, mobile only.
   Hidden on desktop. Sits above content (z-index 90, below mobile-nav 100).
   Force-visible: the markup carries `class="mobile-call-bar show"` so it
   appears immediately without depending on any per-page JS.
   ============================================================================ */
.mobile-call-bar{
  position:fixed; bottom:0; left:0; right:0;
  z-index:90;
  display:none;                            /* shown on mobile via @media below */
  flex-direction:column;
  background:var(--ink,#0B0B0C);
  border-top:1px solid rgba(255,255,255,0.08);
  box-shadow:0 -8px 32px rgba(0,0,0,0.4);
  padding:0 clamp(16px,5vw,24px);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(0) !important;      /* always visible — overrides slide-in */
}
.mobile-call-bar .bar-microcopy{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; font-size:11px; letter-spacing:0.06em;
  color:rgba(255,255,255,0.7);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.mobile-call-bar .bar-microcopy .stars{ color:var(--goat-yellow,#FACC15); letter-spacing:1px; }
.mobile-call-bar .bar-actions{ display:flex; gap:8px; padding:10px 0 12px; }
.mobile-call-bar a.call{
  flex:1 1 70%;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px; font-size:1rem; font-weight:700; letter-spacing:-0.01em;
  border-radius:999px;
  background:var(--goat-yellow,#FACC15) !important; color:var(--ink,#0B0B0C) !important;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(250,204,21,0.30);
}
.mobile-call-bar a.call::before{ display:none !important; }  /* disable any pulse */
.mobile-call-bar a.quote{
  flex:0 0 auto;
  padding:16px 18px; font-size:0.875rem; font-weight:600;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  color:var(--bone,#F7F4EE) !important; background:transparent !important;
  text-decoration:none;
}
/* Show on mobile + reserve space at the bottom so content isn't covered */
@media (max-width:720px){
  .mobile-call-bar{ display:flex !important; }
  body{ padding-bottom:calc(124px + env(safe-area-inset-bottom)) !important; }
  /* Hide any legacy/redundant bar so only ONE sticky CTA is visible */
  .mobile-bar{ display:none !important; }
}
/* Never on desktop */
@media (min-width:721px){ .mobile-call-bar{ display:none !important; } }

/* ============================================================================
   LAZY GOOGLE MAPS — placeholder + click-to-load.
   Every .embed-map and .footer-map starts with an <iframe data-src="…">
   (no src), so the browser does NOT fetch the heavy Maps JS on page load.
   The wrapper shows a clean dark/gold skeleton until JS swaps data-src → src
   when the wrapper approaches the viewport (or the user taps it).
   The "Open in Google Maps" pill always works because it's a normal <a target="_blank">
   layered above the iframe with a higher z-index.
   ============================================================================ */
.embed-map, .footer-map { position: relative; overflow: hidden; }

/* Skeleton — premium dark/gold gradient + subtle accent. Pure CSS, no HTTP. */
.embed-map::before, .footer-map::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(250,204,21,0.10) 0%, transparent 55%),
    linear-gradient(135deg, #1a1a1d 0%, #0e0e10 100%);
  pointer-events: none;
  transition: opacity 320ms ease;
  z-index: 1;
}
/* Map-pin caption + label, same fade-out behavior. */
.embed-map::after, .footer-map::after {
  content: "Map · 552 Victory Rd, Quincy";
  position: absolute; inset: auto 0 0 0; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em; text-transform: uppercase;
  pointer-events: none;
  transition: opacity 320ms ease;
  z-index: 2;
}
/* Skeleton stays visible underneath — Google Maps renders on top of it.
   Intentionally NO fade-out: in the rare case the iframe fails to load,
   the premium skeleton remains visible instead of a blank white rectangle. */

/* Iframe sits ABOVE the skeleton so once Google Maps renders, the real map
   naturally covers the placeholder. If the iframe fails to load (e.g. blocked
   in a preview sandbox), the skeleton remains visible behind it. */
.embed-map iframe, .footer-map iframe {
  position: relative; z-index: 3;
  opacity: 0; transition: opacity 320ms ease;
  background: transparent;
}
.embed-map.cg-map-loaded iframe,
.footer-map.cg-map-loaded iframe { opacity: 1; }

/* The "Open in Google Maps" pill sits ABOVE the iframe + skeleton so it's
   always tappable, even before the map loads. */
.embed-map .map-open-pill,
.footer-map .footer-map-cta { z-index: 4; }


/* ============================================================================
   GLOBAL MOBILE-MENU SCROLL FIX — applies on every page (this stylesheet loads
   on all pages). The full-screen hamburger menu (.mobile-nav) must scroll
   INTERNALLY so the expanded Services / Cities accordions are fully reachable
   and the last item clears the sticky bottom CTA + the iOS home indicator.
   The homepage panel had NO overflow at all (couldn't scroll); service pages
   had overflow:auto but lacked the iOS touch-scroll hints. !important so this
   single rule wins over both the homepage's inline copy and the service-page
   inline copy. Functionality only — no design/markup/copy change.
   ============================================================================ */
.mobile-nav{
  overflow-y: auto !important;             /* scroll the panel itself */
  overflow-x: hidden !important;           /* never sideways */
  -webkit-overflow-scrolling: touch;       /* momentum scroll on iOS Safari */
  overscroll-behavior: contain;            /* don't bleed scroll to the locked body */
  /* clear the home indicator / browser chrome so the final item stays tappable
     (the sticky Call bar is hidden while the menu is open — see below) */
  padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
}
/* Let the Call/Quote block flow right after the nav list instead of being
   pushed to the bottom with margin-top:auto — the auto-margin can leave the
   expanded list clipped/unreachable inside a scroll container on Safari. */
.mobile-nav .ctas{ margin-top: clamp(20px, 4vw, 32px) !important; }

/* The sticky bottom Call CTA must never overlap or capture taps over the open
   menu. mobilenav.js toggles body.nav-open while the menu is open. */
body.nav-open .mobile-call-bar{ display: none !important; }

/* ============================================================================
   DESKTOP dropdown controller (Services / Cities mega-menus).
   mobilenav.js adds .is-open to a .nav-dropdown while the cursor is anywhere
   within the combined hit-area of the nav item + its panel (which includes the
   small gap between them), and also on click. It removes .is-open after a short
   delay once the cursor leaves that area (or on outside-click / Escape). This
   rule mirrors the panel's existing desktop :hover end-state exactly, so the
   look and position are identical — it only changes WHEN the panel is shown.
   Desktop only (>=1025px); the mobile hamburger menu is unaffected.
   ============================================================================ */
@media (min-width: 1025px){
  /* Close the empty dead-zone: connect the panel to the nav bar so the cursor
     never crosses blank space between the nav item and the panel. (The panel's
     top tucks into the nav bar's transparent lower padding — the visible look is
     effectively unchanged.) Higher specificity than the header-global margin. */
  body .nav .nav-dropdown .dropdown-menu{ margin-top: 0 !important; }

  .nav .nav-dropdown.is-open .dropdown-menu{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) !important;
  }
}