/* ============================================================
   Golden Landscaping — shared site footer (dark, 4-column)
   Injected by footer.js on every page.
   ============================================================ */
/* Global guard: never allow the page itself to scroll sideways (off-canvas
   mobile drawer, wide media, etc.). overflow-x:clip clips without creating a
   scroll container, so position:sticky headers keep working; overflow-x:hidden
   is the fallback for older browsers. Loaded on every page. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}

/* ── Universal tap feedback (footer.css loads on every page — the one file
   guaranteed to reach all 98 pages, so this is the single place to fix it
   everywhere instead of patching every stylesheet separately) ──
   Two real, verified problems:
   1. Only `a, button, .btn, summary, [role=button]` had the browser's default
      translucent blue tap-highlight killed. Everything else — plain <div>
      wrappers, cards, the homepage's "Explore all services" photo tiles —
      still flashed it on tap, which LOOKS exactly like a working button even
      when nothing is clickable underneath. Verified: `.explore-img` computed
      to `rgba(200,145,43,.4)` before this, same as `.diff-item`, `.ba-card`,
      `.plan-card`, `header`, and most other cards site-wide.
   2. Plain links had NO :active state at all — .btn got one early on, nothing
      else did, so tapping a nav link, footer link, or service-list link gave
      zero visual confirmation before the page navigated. Low specificity here
      is deliberate: anything with its own more specific :active rule (e.g.
      .btn:active) keeps using that; this is only the fallback for links that
      had nothing. */
* { -webkit-tap-highlight-color: transparent; }
a:active, button:active, summary:active, [role="button"]:active {
  transition: transform .1s ease, opacity .1s ease;
  transform: scale(0.97);
  opacity: .8;
}
@media (prefers-reduced-motion: reduce) {
  a:active, button:active, summary:active, [role="button"]:active { transform: none; }
}
.ft{background:#073B1F;color:#B5AFA5;padding:62px 0 0;font-size:15px;line-height:1.5}
.ft .wrap{max-width:var(--wrap,1120px);margin:0 auto;padding:0 24px}
.ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;align-items:start}
.ft-col h3{color:#C8912B;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 20px}
.ft-col > a,.ft-links > a{display:block;color:#B5AFA5;text-decoration:none;margin-bottom:13px;transition:color .15s}
.ft-col > a:hover,.ft-links > a:hover{color:#fff}

/* Link columns are native <details> so they can collapse on phones (footer.js
   sets `open` for desktop widths at render time). Desktop must look and behave
   exactly as before: no marker, no pointer, not collapsible. */
.ft-acc > summary{list-style:none;cursor:default}
.ft-acc > summary::-webkit-details-marker{display:none}
.ft-acc > summary::marker{content:""}
.ft-acc > summary h3{display:inline-block}
.ft-contact p{margin:0 0 12px}
.ft-contact p.ft-biz{color:#fff;font-weight:600}
.ft-contact a{color:#B5AFA5;text-decoration:none}
.ft-contact a:hover{color:#fff}
.ft-map-link{display:inline-flex;align-items:center;gap:6px;color:#C8912B;font-weight:600;text-decoration:none;margin:6px 0 14px}
.ft-map-link:hover{color:#fff}
.ft-map{border-radius:12px;overflow:hidden;max-width:330px;border:1px solid rgba(255,255,255,.12)}
.ft-map iframe{display:block;width:100%;height:170px;border:0}
.ft-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:52px;padding:22px 0}
.ft-bottom .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px 22px;flex-wrap:wrap}
.ft-bottom small{color:rgba(255,255,255,.55);font-size:13px}
.ft-legal{display:flex;gap:18px;flex-wrap:wrap}
.ft-legal a{color:rgba(255,255,255,.6);font-size:13px;text-decoration:none}
.ft-legal a:hover{color:#fff}
.ft-reviews{display:flex;flex-wrap:wrap;gap:10px;order:-1;flex-basis:100%;margin-bottom:4px}
.ft-reviews a{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 13px;color:#fff;font-size:12.5px;font-weight:600;text-decoration:none;transition:background .2s}
.ft-reviews a:hover{background:rgba(255,255,255,.16)}
.ft-reviews a span{color:#F5A623;letter-spacing:1px}
@media(min-width:561px){.ft-reviews{order:0;flex-basis:auto;margin-bottom:0}}
.ft-social{display:flex;gap:12px}
.ft-social a{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);color:#D4CFC6;transition:background .2s,color .2s,transform .2s}
.ft-social a:hover{background:#C8912B;color:#23201B;transform:translateY(-2px)}
.ft-social svg{width:18px;height:18px}
@media(max-width:860px){
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-contact{grid-column:1 / -1}
}
@media(max-width:560px){
  .ft-grid{grid-template-columns:1fr;gap:34px}
  .ft-bottom .wrap{justify-content:flex-start}
  /* the embedded map is tall + heavy on phones — the "Open in Maps" link stays */
  .ft-map{display:none}
}

/* ── Phones: the three link columns become tappable disclosures ──
   39 stacked links made the footer 2.2 screens on every page. Every link is
   still in the DOM and crawlable; this only changes what's painted. */
@media(max-width:699px){
  .ft-grid{gap:0}
  .ft-col:has(.ft-acc){border-top:1px solid rgba(255,255,255,.1)}
  .ft-acc > summary{
    cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 0;                       /* 52px tall — clears the 44px tap target */
    -webkit-tap-highlight-color:transparent;
  }
  .ft-acc > summary h3{margin:0}
  /* Chevron, rotated when open. Built from borders so it costs no extra request. */
  .ft-acc > summary::after{
    content:"";flex:none;width:8px;height:8px;margin-left:12px;
    border-right:2px solid #C8912B;border-bottom:2px solid #C8912B;
    transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;
  }
  .ft-acc[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
  .ft-links{padding-bottom:8px}
  .ft-contact{padding-bottom:8px}
}
@media(prefers-reduced-motion:reduce){
  .ft-acc > summary::after{transition:none}
}