/* ══════════ GROUNDWORKS PAVERS & TURF ══════════
   Deep forest green + lime pulled from Owen's mark; thin spatial glass header
   at ~40% opacity over the hero reel, solidifying on scroll.
   Type: Space Grotesk (display) / DM Sans (body). Accents ≥4.5:1 on their grounds. */

:root{
  --navy:#153f68; --navy-2:#0d2c4e; --steel:#3c74a6; --sky:#54d8f0;
  --ink:#0c1723; --txt:#33424f; --mut:#5d6d79;
  --paper:#ffffff; --surface:#f7efdd; --line:rgba(12,23,35,.12);
  --glass:rgba(255,255,255,.4);           /* the 40% spatial glass */
  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --body:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--body);font-size:16.5px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
/* height:auto is load-bearing. Every <img> carries width/height attributes (good
   — they reserve space and stop layout shift), but with only max-width:100% the
   width shrinks to the column while the height stays pinned at the attribute
   value. A 1600x900 photo then rendered 548x900 — squashed into portrait. Rules
   that genuinely want a fixed height (.svc-hero-img, .gal img, .hero-vid) are
   class selectors and still win. */
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--steel)}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0 0 14px;letter-spacing:-.015em}
h2{font-size:clamp(28px,4vw,40px);font-weight:800}
h3{font-size:20px;font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding:72px 22px}
.eyebrow{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--steel);margin:0 0 10px}
.eyebrow.light{color:var(--sky)}

/* ── header ─────────────────────────────────────────────────────── */
.bar{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  width:min(1220px,calc(100% - 28px));
  display:flex;align-items:center;gap:18px;padding:10px 16px;
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.5);border-radius:4px;   /* thin SQUARE spatial bar */
  transition:background .35s,border-color .35s,box-shadow .35s;
}
.bar.solid{
  background:rgba(11,37,69,.96);border-color:rgba(255,255,255,.08);
  box-shadow:0 12px 34px -14px rgba(11,37,69,.55);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:38px;height:26px}
.brand-word{font-family:var(--display);line-height:1;color:var(--navy);transition:color .35s}
.brand-word b{display:block;font-size:16px;font-weight:800;letter-spacing:.06em}
.brand-word i{display:block;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.42em}
.bar.solid .brand-word{color:#fff}
.menu{display:flex;gap:4px;margin-left:auto}
.menu a{
  font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;padding:9px 13px;border:1px solid transparent;border-radius:3px;
  transition:background .25s,color .25s,border-color .25s;
}
.menu a:hover{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.7)}
.bar.solid .menu a{color:#e8eef7}
.bar.solid .menu a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
.bar-right{display:flex;align-items:center;gap:14px}
.bbb{height:34px;width:auto;opacity:.75;mix-blend-mode:multiply;border-radius:3px;transition:opacity .35s,background .35s,padding .35s}
.bar.solid .bbb{opacity:1;mix-blend-mode:normal;background:#fff;padding:4px 6px}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:3px;
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border:0;cursor:pointer;transition:transform .2s,background .25s,box-shadow .25s;
}
.btn.lg{padding:15px 28px;font-size:14px}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-quote{background:var(--sky);color:#12365a;box-shadow:0 10px 26px -10px rgba(84,216,240,.65)}
.btn-quote:hover{background:#7fe0f2;transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.24)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--navy);margin:5px 0;transition:background .35s}
.bar.solid .burger span{background:#fff}
.mobile-menu[hidden]{display:none}
.mobile-menu{position:fixed;top:70px;left:14px;right:14px;z-index:59;display:flex;flex-direction:column;gap:8px;padding:16px;background:rgba(11,37,69,.97);border-radius:6px}
.mobile-menu a{color:#e8eef7;text-decoration:none;font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:14px;padding:12px 10px}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--navy)}
/* Path is absolute on purpose. CSS url() resolves against the STYLESHEET, so the
   old relative "assets/poster-hero.jpg" became /assets/poster-hero.jpg — a 404,
   since the file lives in /assets/img/. The hero sat on flat navy until the
   video decoded. */
.hero-media{position:absolute;inset:0;background:url("/assets/img/poster-hero.jpg") center/cover no-repeat var(--navy)}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.hero-vid.on{opacity:1}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,36,.62),rgba(6,18,36,.38) 45%,rgba(6,18,36,.72))}
.hero-inner{position:relative;z-index:2;text-align:center;padding:120px 22px 90px;max-width:900px}
.hero-eyebrow{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#bcd7f8;margin:0 0 18px}
.hero h1,.svc-hero h1{font-size:clamp(28px,4.6vw,48px);font-weight:800;color:#fff;margin-bottom:14px;line-height:1.16}
.hero h1 span,.svc-hero h1 span{color:var(--sky)}
.hero-sub{color:rgba(255,255,255,.92);max-width:640px;margin:0 auto 30px;font-size:clamp(16px,1.9vw,19px)}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-pause{
  position:absolute;right:22px;bottom:22px;z-index:3;width:44px;height:44px;border-radius:3px;
  background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.55);cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hero-pause svg{width:16px;height:16px;fill:#06213f}
.hero-pause .i-play{display:none}
.hero-pause.paused .i-pause{display:none}
.hero-pause.paused .i-play{display:block}

/* ── services ───────────────────────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:26px 22px;border-top:3px solid var(--steel)}
.svc p{margin:0;color:var(--txt);font-size:15px}

/* ── storm band ─────────────────────────────────────────────────── */
.storm{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;text-align:center}
.storm .wrap{padding:84px 22px}
.storm h2{color:#fff}
.storm-sub{color:rgba(255,255,255,.9);max-width:620px;margin:0 auto 28px}

/* ── work (scroll-reactive roofer) ──────────────────────────────── */
.work{text-align:center}
.work-video{max-width:900px;margin:26px auto 0;border-radius:8px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(11,37,69,.5)}
.work-video video{width:100%}
.work-cap{color:var(--mut);max-width:560px;margin:18px auto 0;font-size:15px}

/* ── locations ──────────────────────────────────────────────────── */
.loc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.loc{background:#fff;border:1px solid var(--line);border-radius:6px;padding:24px 22px}
.loc p{color:var(--txt);font-size:14.5px;margin:0 0 10px}
.loc a{font-family:var(--display);font-weight:700;color:var(--steel);text-decoration:none}
.loc a:hover{text-decoration:underline}

/* ── quote ──────────────────────────────────────────────────────── */
.quote{background:linear-gradient(160deg,var(--navy) 0%,#0e2f57 100%);color:#fff}
.quote .wrap{max-width:720px;padding:84px 22px}
.quote h2{color:#fff}
#quoteForm{margin-top:22px}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qf{margin-bottom:14px}
.qf label{display:block;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#bcd7f8;margin-bottom:7px}
.qf input,.qf textarea{
  width:100%;padding:13px 14px;font-family:var(--body);font-size:15.5px;color:var(--ink);
  background:#fff;border:1px solid rgba(255,255,255,.35);border-radius:4px;
}
.qf input:focus-visible,.qf textarea:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.q-ok{margin:16px 0 0;font-weight:600;color:#9fd6a8}
.q-fine{margin:18px 0 0;font-size:14px;color:rgba(255,255,255,.85)}
.q-fine a{color:var(--sky);font-weight:700}

/* ── footer + floating mark ─────────────────────────────────────── */
footer{background:#081a33;color:#93a7c4;font-size:13.5px}
.f-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:26px 22px}
.f-note a{color:#bcd7f8}
.float-mark{
  position:fixed;right:20px;bottom:20px;z-index:55;width:58px;height:46px;padding:9px 8px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 14px 34px -14px rgba(11,37,69,.5);
  opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s;
}
.float-mark.show{opacity:1;transform:none}
.float-mark svg{width:100%;height:100%}

/* ── responsive ─────────────────────────────────────────────────── */
@media(max-width:960px){
  .svc-grid,.loc-grid{grid-template-columns:1fr 1fr}
  .menu,.bar-right .btn{display:none}
  .bbb{height:28px}
  .burger{display:block}
}
@media(max-width:560px){
  .svc-grid,.loc-grid,.qrow{grid-template-columns:1fr}
  .bar{top:10px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){
  .hero-vid{transition:none}
  .float-mark{transition:none}
}

/* hero headline in the wordmark's own voice — same face and casing as the logo */
.wordmark-style{letter-spacing:.045em}

/* the hammering roofer corner charm (bottom-left) */
.hammer-corner{
  position:fixed;left:20px;bottom:20px;z-index:55;width:104px;height:104px;
  border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.85);
  box-shadow:0 16px 38px -14px rgba(11,37,69,.6);
  opacity:0;transform:translateY(14px) rotate(-2deg);transition:opacity .4s,transform .4s;
  pointer-events:none;
}
.hammer-corner.show{opacity:1;transform:none}
.hammer-corner video{width:100%;height:100%;object-fit:cover;object-position:38% 30%}
.hammer-corner[hidden]{display:none}
@media(max-width:560px){.hammer-corner{width:78px;height:78px;left:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.hammer-corner{display:none}}

/* ── service landing pages + clickable service cards + chat widget ─────── */
a.svc{display:block;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.svc:hover,a.svc:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px rgba(11,37,69,.14);border-top-color:var(--sky)}
a.svc .svc-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
a.svc .svc-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
a.svc:hover .svc-more{color:var(--sky)}
.svc-grid.three{grid-template-columns:repeat(3,1fr)}
.svc.static{border-top-color:var(--sky)}
.svc-hero{position:relative;min-height:72svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--navy)}
.svc-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-hero .hero-inner{padding-top:150px}
.qf select{width:100%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.25);border-radius:5px;color:#fff;padding:12px 14px;font:inherit}
.qf select:focus{outline:2px solid var(--sky);outline-offset:1px}
.qf select option{color:#0B2545;background:#fff}
.sr-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-chat-launch{position:fixed;right:20px;bottom:20px;z-index:60;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;background:var(--steel);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(11,37,69,.35)}
.sr-chat-launch svg{width:26px;height:26px}
.sr-chat-launch:hover{background:var(--sky)}
.sr-chat-launch:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.sr-chat-panel[hidden]{display:none}
.sr-chat-panel{position:fixed;right:20px;bottom:86px;z-index:61;width:min(340px,calc(100vw - 32px));height:440px;display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(11,37,69,.35);border:1px solid var(--line)}
.sr-chat-head{display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;padding:12px 14px;font-family:var(--display);font-weight:700;letter-spacing:.06em}
.sr-chat-x{background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.sr-chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:#f5f8fc}
.sr-msg{max-width:85%;padding:9px 12px;border-radius:10px;font-size:14px;line-height:1.45}
.sr-msg.ai{background:#fff;border:1px solid var(--line);align-self:flex-start}
.sr-msg.me{background:var(--steel);color:#fff;align-self:flex-end}
.sr-chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
.sr-chat-form input{flex:1;border:1px solid var(--line);border-radius:6px;padding:9px 11px;font:inherit;font-size:14px}
.sr-chat-form input:focus{outline:2px solid var(--sky)}
.sr-chat-form button{border:0;border-radius:6px;background:var(--navy);color:#fff;padding:0 16px;font:inherit;font-weight:600;cursor:pointer}
.sr-chat-form button:hover{background:var(--steel)}
/* keep the floating icon mark clear of the chat launcher on the homepage */
.float-mark{bottom:92px}
@media (max-width:760px){.svc-grid.three{grid-template-columns:1fr}.sr-chat-panel{height:70svh}}
.svc-hero .hero-shade{background:linear-gradient(180deg,rgba(6,18,36,.68),rgba(6,18,36,.52) 45%,rgba(6,18,36,.76))}
.svc-hero h1,.svc-hero .hero-sub{text-shadow:0 2px 18px rgba(6,18,36,.55)}

/* footer team-login entry point (discreet, but findable) */
.f-note{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
.f-note a{color:#bcd7f8}
.f-login{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid rgba(188,215,248,.32);border-radius:4px;text-decoration:none;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .22s,border-color .22s}
.f-login:hover,.f-login:focus-visible{background:rgba(188,215,248,.13);border-color:rgba(188,215,248,.6)}
.f-login svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-sep{opacity:.5}

/* Hero bottom melts into the white section below instead of ending on a hard
   edge. Sits above the video (auto z-index) but under .hero-inner (z-index 2)
   so it never washes out the headline or the CTAs. */
.hero::after,.svc-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:26vh;max-height:220px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 45%,rgba(255,255,255,.72) 72%,var(--paper) 93%,var(--paper) 100%);
  pointer-events:none;z-index:1;
}
/* the dark scrim used to deepen toward the bottom, which greyed out the middle
   of the white fade — let it lift instead so the dissolve reads clean */
.hero .hero-shade{background:linear-gradient(180deg,rgba(6,18,36,.62),rgba(6,18,36,.4) 48%,rgba(6,18,36,.34) 78%,rgba(6,18,36,.12) 100%)}

/* Header nav on the solid navy bar (always solid on the service pages) reads
   dim at #e8eef7 — go pure white so the links carry the same weight as the
   wordmark. Also fixes the dropdown's Free Quote button, where the generic
   `.mobile-menu a` rule was beating `.btn-quote` and leaving near-white text
   on the sky-blue fill (~1.9:1, unreadable). */
.bar.solid .menu a{color:#fff}
.bar.solid .menu a:hover{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}
.bar.solid .menu a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.mobile-menu a{color:#fff}
.mobile-menu a.btn-quote{color:#06213f}
/* same specificity trap as .btn-quote above, missed for the call button: the
   generic `.mobile-menu a{color:#fff}` beat `.btn-call{color:navy}` — white
   text on the white button = the number invisible, "just a white box" on
   iPhone. Pin the ink (and its phone icon) back on. */
.mobile-menu a.btn-call{color:var(--navy)}
.mobile-menu a.btn-call svg{stroke:var(--navy)}

/* ── homepage header: blend into the hero video ──────────────────────
   The base .bar is 40% WHITE glass with navy text — correct on the white
   service pages, but over the dark video hero it read as an opaque white slab
   sitting on top of the footage instead of floating in it. Un-scrolled on the
   homepage the bar goes glass-clear with white type; app.js adds .solid past
   40px, which still wins because it is the later/more specific rule. */
body.home .bar:not(.solid){
  background:linear-gradient(180deg,rgba(6,18,36,.30),rgba(6,18,36,.10));
  border-color:rgba(255,255,255,.26);
  box-shadow:none;
}
body.home .bar:not(.solid) .brand-word,
body.home .bar:not(.solid) .menu a{color:#fff;text-shadow:0 1px 12px rgba(6,18,36,.45)}
body.home .bar:not(.solid) .menu a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
body.home .bar:not(.solid) .menu a[aria-current="page"]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
body.home .bar:not(.solid) .burger span{background:#fff}
body.home .bar:not(.solid) .btn-call{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.home .bar:not(.solid) .btn-call:hover{background:var(--sky);color:#12365a;border-color:transparent}

/* ══════════ deep-content section library ══════════ */
.sec-sub{color:var(--txt);max-width:660px;margin:0 0 6px;font-size:16.5px}
.sec-note{color:var(--mut);font-size:14.5px;margin-top:22px;max-width:720px}
.sec-note a{font-weight:600}

/* trust strip under the hero */
.trust-strip{background:var(--surface);border-bottom:1px solid var(--line)}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:26px 22px}
.trust-item{display:flex;align-items:flex-start;gap:11px}
.trust-item svg{width:22px;height:22px;flex:0 0 22px;margin-top:2px;fill:none;stroke:var(--steel);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trust-item b{display:block;font-family:var(--display);font-size:14.5px;color:var(--ink)}
.trust-item span{display:block;color:var(--mut);font-size:13.5px;line-height:1.45}

/* numbered process ladder */
.steps{list-style:none;counter-reset:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.step{display:flex;gap:18px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--steel);border-radius:6px;padding:22px 24px}
.step-n{flex:0 0 38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:16px}
.step h3{margin:0 0 6px;font-size:18px}
.step p{margin:0;color:var(--txt);font-size:15px}

/* checklists */
.checks{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 26px}
.checks li{display:flex;gap:11px;align-items:flex-start;color:var(--txt);font-size:15.5px}
.checks svg{width:20px;height:20px;flex:0 0 20px;margin-top:3px;fill:none;stroke:var(--steel);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.checklist.warn .checks svg{stroke:#c2410c}
.check-cta{margin-top:24px;font-weight:600;color:var(--ink)}

/* FAQ */
.faq-list{margin-top:28px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 4px;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--steel)}
.faq-item summary:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:3px}
.faq-item summary svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:var(--steel);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-a{padding:0 4px 20px}
.faq-a p{margin:0;color:var(--txt);max-width:820px}

/* alternating feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:38px}
.frow.flip .frow-text{order:2}
.frow-text h3{font-size:23px}
.frow-text p{color:var(--txt);margin:0}
/* Feature-row art mixes 16:9 and square source photos. Left to their intrinsic
   ratios the alternating rows jump around, so pin one ratio and cover-crop. */
.frow-media img,.frow-media video{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;box-shadow:0 24px 56px -28px rgba(11,37,69,.55)}
.mini-list{margin:14px 0 0;padding-left:20px;color:var(--txt);font-size:15px}
.mini-list li{margin-bottom:6px}

/* comparison table */
.table-scroll{overflow-x:auto;margin-top:28px;border:1px solid var(--line);border-radius:8px}
.table-scroll:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.compare table{width:100%;border-collapse:collapse;min-width:560px;background:#fff}
.compare th,.compare td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px;color:var(--txt);vertical-align:top}
.compare thead th{background:var(--navy);color:#fff;font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.compare tbody th{font-family:var(--display);color:var(--ink);font-weight:700;background:var(--surface);width:1%;white-space:nowrap}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}

/* mid-page CTA band */
.cta-band{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;text-align:center}
.cta-band .wrap{padding:70px 22px}
.cta-band h2{color:#fff}
.cta-band .sec-sub{color:rgba(255,255,255,.9);margin:0 auto 26px;max-width:620px}

/* two-col card grid variant */
.svc-grid.two{grid-template-columns:1fr 1fr}
.q-sub{color:rgba(255,255,255,.9);max-width:620px;margin:0 0 24px}

/* sticky mobile call bar — thumb-reachable path to a phone call, the
   dominant conversion action for roofing on mobile */
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(11,37,69,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12)}
  .callbar .btn{justify-content:center;padding:13px 10px;font-size:13.5px}
  body{padding-bottom:88px}
  .sr-chat-launch{bottom:98px}
  .sr-chat-panel{bottom:162px}
  .hammer-corner{bottom:98px;width:78px;height:78px}
  .float-mark{bottom:170px}
  .trust-in{grid-template-columns:1fr 1fr;gap:16px}
  .checks{grid-template-columns:1fr}
  .frow,.frow.flip .frow-text{grid-template-columns:1fr;order:0}
  .frow{gap:20px}
  .step{flex-direction:column;gap:12px}
  .svc-grid.two{grid-template-columns:1fr}
}
@media (max-width:1000px) and (min-width:761px){
  .trust-in{grid-template-columns:1fr 1fr}
}

/* skip link + richer footer */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--navy);padding:12px 18px;font-weight:700;border-radius:0 0 6px 0}
.skip:focus{left:0}
.f-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:34px;padding:52px 22px 30px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-col h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.f-col a{color:#93a7c4;text-decoration:none;font-size:14px}
.f-col a:hover{color:#fff;text-decoration:underline}
.f-brand{margin-bottom:14px}
.f-brand .brand-word{color:#fff}
.f-blurb{color:#93a7c4;font-size:14px;max-width:330px;margin:0}
/* Social/profile pills. They sit under the "Get in touch" list, so they get a
   card treatment rather than inheriting the plain link styling above — these
   leave the site and shouldn't read as more nav. */
.f-social{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.f-social a{display:inline-flex;align-items:center;gap:8px;padding:8px 13px 8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.05);color:#cfe0f5;font-size:13px;font-weight:600;line-height:1;transition:background .18s,border-color .18s,transform .18s}
.f-social a:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3);color:#fff;text-decoration:none;transform:translateY(-1px)}
.f-social svg{width:17px;height:17px;flex:0 0 17px;fill:currentColor}
/* the Google G keeps its own four colours — never let currentColor flatten it */
.f-social svg.g-mark{fill:none}
@media (max-width:900px){.f-cols{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:560px){.f-cols{grid-template-columns:1fr}}

/* deductible / regulator callout — deliberately NOT styled as a blockquote:
   this is our plain-language summary, not a quotation from the statute */
.deduct-body{color:var(--txt);max-width:800px;font-size:16.5px}

/* locations page office cards */
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.office{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--steel);border-radius:6px;padding:26px 24px}
.office h3{margin-bottom:8px}
.office-addr{color:var(--txt);font-size:14.5px;margin:0 0 12px}
.office-tel{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:18px;color:var(--steel);text-decoration:none;margin-bottom:14px}
.office-tel:hover{color:var(--navy);text-decoration:underline}
.office-tel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.office-blurb{color:var(--txt);font-size:15px;margin:0 0 12px}
.office-areas{color:var(--mut);font-size:13.5px;margin:0;line-height:1.6}
.office-areas b{color:var(--ink)}
@media (max-width:820px){.office-grid{grid-template-columns:1fr}}

/* post-submit confirmation panel — replaces the form entirely */
.q-done{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:32px 30px;max-width:640px}
.q-done h3{color:#fff;font-size:24px;margin-bottom:12px}
.q-done p{color:rgba(255,255,255,.92);margin:0 0 14px}
.q-done-next{margin-top:20px!important;color:#fff!important}
.q-done-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.q-done-fine{color:rgba(255,255,255,.7)!important;font-size:14px;margin:0!important}

/* statute / regulator callout (no fabricated quotations — plain guidance) */
.statute{margin:26px 0 0;padding:22px 26px;background:var(--surface);border-left:4px solid var(--steel);border-radius:0 6px 6px 0;max-width:820px}
.statute-lead{margin:0 0 10px;font-size:16px;color:var(--ink);font-weight:600}
.statute-cite{margin:0;font-size:13.5px;color:var(--mut);line-height:1.6}
.statute-cite a{color:var(--steel)}
/* form additions */
.qf .opt{font-weight:400;opacity:.7;text-transform:none;letter-spacing:0}
.qf-hint{display:block;margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.5}
.q-consent{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.6;max-width:640px;margin:0 0 18px}
/* footer legal disclaimer */
.f-legal{padding:0 22px 30px}
.f-legal p{margin:0;font-size:12.5px;color:#7e93b2;line-height:1.65;max-width:900px}

/* ---- Header fix 2026-08-03 (Anthony, edited live) ----
   Pulled back into source 8/04. It only existed in the deployed style.css and
   the next ./deploy.sh would have overwritten it. Keep it here. */
.menu a{white-space:nowrap;padding:9px 11px}
.btn{white-space:nowrap}
.bar{gap:14px;flex-wrap:nowrap}
.menu{gap:2px;flex-wrap:nowrap}
.bar-right{flex-shrink:0}
@media (max-width:1180px){.menu a{padding:9px 8px;font-size:12px;letter-spacing:.05em}.bbb{height:28px}}
@media (max-width:1060px){.bbb{display:none}}

/* ══════════ Groundworks-specific ══════════ */
.brand-logo{width:42px;height:42px;object-fit:contain;border-radius:6px}
.brand-word i{letter-spacing:.28em;font-size:9px}
/* gallery grid */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.gal{margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .4s ease}
.gal:hover img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.gal img{transition:none}.gal:hover img{transform:none}}
@media (max-width:900px){.gal-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gal-grid{grid-template-columns:1fr}}

/* ══════════ call CTAs — the phone ringing is the conversion ══════════ */
.btn-call{background:#fff;color:var(--navy);border:1px solid rgba(255,255,255,.55)}
.btn-call:hover{background:var(--sky);color:#12365a;border-color:transparent}
.bar.solid .btn-call{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.bar.solid .btn-call:hover{background:var(--sky);color:#12365a}
.btn-call svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cta-band .btn-call{background:#fff;color:var(--navy);border:0}
.cta-band .btn-call:hover{background:var(--sky);color:#12365a}

/* sticky bar: number is the hero of the bar, not the word "call" */
.callbar-call{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 14px!important}
.callbar-call span{display:flex;flex-direction:column;line-height:1.15}
.callbar-call b{font-size:11px;font-weight:700;letter-spacing:.04em;opacity:.75;text-transform:none}
.callbar-call i{font-style:normal;font-size:15px;font-weight:800;letter-spacing:.01em}

/* the full call band */
.call-band{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;text-align:center}
.call-band .wrap{padding:64px 22px}
.call-band h2{color:#fff}
.call-band .sec-sub{color:rgba(255,255,255,.9);max-width:600px;margin:0 auto 26px}
.call-big{display:inline-flex;align-items:center;gap:14px;background:var(--sky);color:#12365a;text-decoration:none;
  padding:18px 34px;border-radius:8px;font-family:var(--display);font-weight:800;
  font-size:clamp(24px,4.4vw,34px);letter-spacing:-.01em;
  box-shadow:0 16px 40px -14px rgba(84,216,240,.65);transition:transform .18s ease,box-shadow .18s ease}
.call-big:hover,.call-big:focus-visible{transform:translateY(-2px);box-shadow:0 22px 52px -16px rgba(84,216,240,.8)}
.call-big:focus-visible{outline:3px solid #fff;outline-offset:3px}
.call-big svg{width:26px;height:26px;flex:0 0 26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.call-fine{margin:18px 0 0;font-size:14.5px;color:rgba(255,255,255,.82)}
.call-fine a{color:var(--sky)}
@media (max-width:560px){
  .call-big{width:100%;justify-content:center;padding:16px 18px}
  .bar-right .btn-call{display:none}   /* sticky bar covers mobile */
}

/* [hidden] is only a display:none DEFAULT — any later display rule beats it.
   .bk-load sets display:flex, so the "Checking availability…" spinner stayed on
   screen after the picker loaded, under the loaded UI. Same failure that once
   left the chat panel open on load and the mobile menu showing on desktop, so
   this is enforced once, globally, rather than per component. */
[hidden]{display:none!important}

/* Anchor targets clear the fixed header — jumping to #book from the nav used to
   land with the section heading tucked behind the bar. */
.quote{scroll-margin-top:96px}

/* ── automatic booking form (no time picker) ─────────────────────────
   The dark quote panel IS the booking flow now. q-next is the honesty line —
   it names the exact arrival window a submit will claim, fetched live. */
.q-next{background:rgba(84,216,240,.12);border:1px solid rgba(84,216,240,.35);color:#cdeef8;
  padding:12px 15px;border-radius:6px;font-size:14.5px;line-height:1.5;margin:4px 0 2px}
.q-next b{color:var(--sky)}
.q-err{background:rgba(255,86,86,.14);border:1px solid rgba(255,120,120,.45);color:#ffdada;
  padding:11px 14px;border-radius:6px;margin-top:14px;font-size:14.5px}
.q-booked{text-align:center;padding:26px 0 6px}
.q-booked svg{width:52px;height:52px;margin:0 auto 14px;display:block;fill:none;stroke:var(--sky);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.q-booked h3{font-family:var(--display);font-size:27px;margin:0 0 10px;color:#fff}
.q-when{font-size:19px;font-weight:600;color:var(--sky);margin:0 0 6px}
.q-ref{color:#cfe0ef;font-size:14.5px;margin:0 0 4px;letter-spacing:.04em}
.q-booked .q-note{color:#a3b8cb;font-size:13.5px;margin:12px 0 0;line-height:1.5}
.q-booked .q-note a{color:var(--sky);font-weight:600}
@media (max-width:560px){.q-booked h3{font-size:23px}}

/* ══════════ estimate mascot ══════════
   5-frame sprite (620x199, 124px cells): 4-frame WALK CYCLE (contact-R,
   passing, contact-L, passing — the legs genuinely scissor and pass, the 2-frame
   version read as a shuffle) + landing pose (finger down at the button, FREE!!!
   sign held up, eyes on the viewer). Frames share one feet baseline; the sign
   pose is scaled by feet-to-crown landmarks so body height matches exactly.
   Hero timeline: pop → walk (legs cycling, per-step bounce, slight forward
   lean) → land centred over the button. Once the hero scrolls away, the DOCK
   version jumps into the bottom-left corner, a bit bigger, sign up — a fixed
   tap-to-book button. Sprite + steps() over alpha-video: WebM alpha does not
   play in Safari. */
.est-btn{position:relative}
.est-guy{
  --gc:84px;                                   /* displayed cell width */
  position:absolute;left:-6%;bottom:calc(100% - 5px);z-index:3;
  width:var(--gc);height:calc(var(--gc)*199/124);
  background:url("/assets/img/gw-guy-sprite.png?v=3") no-repeat 0 0;
  background-size:calc(var(--gc)*5) calc(var(--gc)*199/124);
  opacity:0;pointer-events:none;
  transform-origin:50% 100%;                   /* lean + bounce pivot at the feet */
}
.est-btn.play .est-guy{
  animation:
    guyPop  .45s ease-out both,
    guyMove 2.4s .45s ease-in-out forwards,
    guyStep .48s .45s linear 5 both,
    guyBob  .24s .45s linear 10 both,
    guyLand .45s 2.85s ease-out forwards;
}
/* pop out from behind the button */
@keyframes guyPop{
  0%{opacity:0;transform:translateY(46%) scale(.6)}
  70%{opacity:1;transform:translateY(-6%) scale(1.04)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
/* stroll across the button's width, landing centred over it */
@keyframes guyMove{from{left:-6%}to{left:58%}}
/* REAL leg cycle: contact-R → passing → contact-L → passing, held in quarters */
@keyframes guyStep{
  0%,24.9%{background-position-x:0}
  25%,49.9%{background-position-x:calc(var(--gc)*-1)}
  50%,74.9%{background-position-x:calc(var(--gc)*-2)}
  75%,100%{background-position-x:calc(var(--gc)*-3)}
}
/* one push-off bounce per step, with a slight constant forward lean */
@keyframes guyBob{
  0%,100%{transform:translateY(0) rotate(6deg)}
  50%{transform:translateY(-5%) rotate(4.5deg)}
}
/* arrive: straighten up, face the camera, finger down at the button, sign up */
@keyframes guyLand{
  0%{background-position-x:calc(var(--gc)*-4);transform:translateY(-8%) rotate(3deg) scale(1.05)}
  60%{transform:translateY(2%) rotate(0deg) scale(.99)}
  100%{background-position-x:calc(var(--gc)*-4);transform:translateY(0) rotate(0deg) scale(1);opacity:1}
}
/* reduced motion (or no JS observer): stand still, sign up, already pointing */
.est-btn.still .est-guy{opacity:1;left:58%;background-position-x:calc(var(--gc)*-4)}
@media(prefers-reduced-motion:reduce){
  .est-btn.play .est-guy{animation:none;opacity:1;left:58%;background-position-x:calc(var(--gc)*-4)}
}
@media(max-width:560px){.est-guy{--gc:64px;bottom:calc(100% - 4px)}}

/* ── idle show: hop to the phone button → dance waving the sign → the
   lay-down "draw me" pose repping the FREE!!! sign like a dumbbell ──
   Second sheet (gw-guy-idle.png, 640x187, 160px cells): danceA · danceB ·
   lay-lift-up · lay-lift-down. JS measures the hop target (the phone button —
   BELOW on stacked mobile, BESIDE on desktop) into --hx/--hy, so one animation
   works on both layouts. --gi is derived so his sign-up dance silhouette is the
   same on-screen height as the landing pose he hops out of (cell maths in the
   sprite build script). */
.est-btn.hopped .est-guy{transform:translate(var(--hx,0),var(--hy,0));opacity:1;background-position-x:calc(var(--gc)*-4)}
.est-btn.hop .est-guy{animation:hopArc .7s cubic-bezier(.3,.7,.4,1) forwards;background-position-x:calc(var(--gc)*-4)}
@keyframes hopArc{
  0%{transform:translate(0,0)}
  45%{transform:translate(calc(var(--hx)*.5),calc(var(--hy)*.5 - 74px)) rotate(-5deg)}
  82%{transform:translate(var(--hx),var(--hy)) scale(1.06,.9)}
  100%{transform:translate(var(--hx),var(--hy)) scale(1)}
}
.est-btn.dance .est-guy,.est-btn.lift .est-guy{
  --gi:115px;
  opacity:1;
  width:var(--gi);height:calc(var(--gi)*187/160);
  background-image:url("/assets/img/gw-guy-idle.png?v=1");
  background-size:calc(var(--gi)*4) calc(var(--gi)*187/160);
}
.est-btn.dance .est-guy{
  animation:danceFrames .5s steps(1,end) 6 both, danceMove 1s ease-in-out 3 both;
}
@keyframes danceFrames{
  0%,49.9%{background-position-x:0}
  50%,100%{background-position-x:calc(var(--gi)*-1)}
}
@keyframes danceMove{
  0%,100%{transform:translate(var(--hx),var(--hy)) rotate(0)}
  25%{transform:translate(calc(var(--hx) - 12px),var(--hy)) rotate(-4deg)}
  75%{transform:translate(calc(var(--hx) + 12px),var(--hy)) rotate(4deg)}
}
.est-btn.lift .est-guy{
  animation:liftFrames 1.1s steps(1,end) infinite;
}
@keyframes liftFrames{
  0%,49.9%{background-position-x:calc(var(--gi)*-2)}
  50%,100%{background-position-x:calc(var(--gi)*-3)}
}
@media(max-width:560px){.est-btn.dance .est-guy,.est-btn.lift .est-guy{--gi:88px}}
@media(prefers-reduced-motion:reduce){
  .est-btn.hop .est-guy,.est-btn.dance .est-guy,.est-btn.lift .est-guy{animation:none}
}

/* ── corner dock: where he lands after "jumping down" when you scroll ── */
.est-dock{
  position:fixed;left:14px;bottom:18px;z-index:80;
  background:none;border:0;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.est-dock[hidden]{display:none}
/* The dock guy carries his own prop: a dumbbell whose plates are wooden signs
   reading "Book" (left) and "me" (right). Two frames — bar at the waist, bar
   curled to the chin — stepped on a loop, so he is genuinely REPPING the
   Book-me dumbbell in the corner, not just bobbing. Dedicated sheet
   (600x344, 300px cells), separate from the walk sheet because the barbell
   silhouette is wider than any walking cell. */
.est-dock .est-guy{
  --gw:150px;                                  /* "a bit bigger" than the hero guy */
  position:static;display:block;opacity:1;pointer-events:none;
  width:var(--gw);height:calc(var(--gw)*344/300);
  background:url("/assets/img/gw-guy-dock.png?v=2") no-repeat 0 bottom;
  background-size:calc(var(--gw)*2) calc(var(--gw)*344/300);
  animation:dockLift 1.15s steps(1,end) infinite;
}
@keyframes dockLift{
  0%,49.9%{background-position-x:0}
  50%,100%{background-position-x:calc(var(--gw)*-1)}
}
@keyframes dockJump{
  0%{transform:translateY(-140vh) scale(1);opacity:0}
  55%{opacity:1;transform:translateY(0) scale(1.06,.88)}
  75%{transform:translateY(-7%) scale(.97,1.05)}
  100%{transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .est-dock.drop .est-guy,.est-dock .est-guy{animation:none}
}
/* never cover the wizard, and sit above the mobile call bar, smaller */
html.wiz-open .est-dock{display:none}
@media(max-width:760px){
  .est-dock{left:10px;bottom:calc(84px + env(safe-area-inset-bottom))}
  .est-dock .est-guy{--gw:116px}
}

/* launcher band at the page bottom */
.q-launch{text-align:center;padding:6px 0 2px}
.q-launch .est-btn{margin:26px auto 0}
.q-launch .q-fine{margin-top:18px}

/* ══════════ estimate wizard ══════════
   Full-screen sheet on phones, centered card on desktop. One step visible at a
   time — the modal never scrolls more than its own content. Inputs are 17px:
   anything under 16px makes iOS zoom the page on focus and stay zoomed. */
html.wiz-open{overflow:hidden}
.wiz{position:fixed;inset:0;z-index:200}
.wiz-backdrop{position:absolute;inset:0;background:rgba(9,17,13,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.wiz-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,calc(100% - 24px));max-height:calc(100svh - 32px);
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-2) 0%,#16342a 100%);color:#fff;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
}
@media(max-width:560px){
  .wiz-card{left:0;top:auto;bottom:0;transform:none;width:100%;max-height:96svh;
    border-radius:16px 16px 0 0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom)}
}
.wiz-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 4px}
.wiz-dots{display:flex;gap:7px}
.wiz-dots i{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.16)}
.wiz-dots i.on{background:var(--sky)}
.wiz-x{background:none;border:0;color:#cfe0ef;cursor:pointer;padding:10px;margin:-6px -6px 0 0;border-radius:8px}
.wiz-x:hover{background:rgba(255,255,255,.1)}
.wiz-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.wiz-body{padding:8px 20px 22px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.wiz-q{font-family:var(--display);font-size:23px;font-weight:800;color:#fff;margin:6px 0 14px;line-height:1.2}
.wiz-sub{color:#a3b8cb;font-size:14.5px;margin:-6px 0 14px;line-height:1.5}
.wiz-chips{display:flex;flex-direction:column;gap:10px}
/* call-time quick picks: a compact horizontal row that fills the input below */
.wiz-chips-mini{flex-direction:row;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.wiz-chips-mini .wiz-chip{min-height:40px;padding:8px 14px;font-size:14.5px;flex:none}
.wiz-chip{
  min-height:54px;padding:13px 16px;border-radius:9px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;
  font-family:var(--display);font-size:16px;font-weight:600;transition:background .15s,border-color .15s;
}
.wiz-chip:hover{background:rgba(255,255,255,.15)}
.wiz-chip:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.wiz-chip.on{background:var(--sky);border-color:var(--sky);color:#12365a;font-weight:800}
.wiz-field{margin-bottom:14px}
.wiz-field label{display:block;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#bcd7c4;margin-bottom:7px}
.wiz-field input,.wiz-field textarea{
  width:100%;padding:14px 15px;border-radius:9px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.09);color:#fff;font-size:17px;font-family:var(--body);
}
.wiz-field input:focus-visible,.wiz-field textarea:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.wiz-hint{display:block;color:#93ab99;font-size:12.5px;margin-top:5px}
.wiz-next{width:100%;justify-content:center;margin-top:6px;min-height:52px}
.wiz-next-slot{background:rgba(84,216,240,.12);border:1px solid rgba(84,216,240,.35);color:#cdeef8;
  padding:11px 14px;border-radius:8px;font-size:14px;line-height:1.5;margin:12px 0 0}
.wiz-next-slot b{color:var(--sky)}
.wiz-consent{color:#8fa896;font-size:11.5px;line-height:1.5;margin:14px 0 12px}
.wiz-err{background:rgba(255,86,86,.14);border:1px solid rgba(255,120,120,.45);color:#ffdada;
  padding:11px 14px;border-radius:8px;margin-top:12px;font-size:14.5px}
.wiz-photo-add{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 16px;cursor:pointer;
  border:1.5px dashed rgba(255,255,255,.35);border-radius:10px;color:#d5e3ee;
  font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:12px;
}
.wiz-photo-add:hover{border-color:var(--sky);color:#fff}
.wiz-photo-add svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wiz-thumbs{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.wiz-thumb{position:relative;width:76px;height:76px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.25)}
.wiz-thumb img{width:100%;height:100%;object-fit:cover}
.wiz-thumb button{
  position:absolute;top:2px;right:2px;width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(9,17,13,.8);color:#fff;font-size:15px;line-height:1;display:grid;place-items:center;
}
.wiz-foot{display:flex;align-items:center;justify-content:space-between;padding:0 20px 18px;gap:12px}
.wiz-back{background:none;border:0;color:#cfe0ef;font-family:var(--display);font-weight:600;font-size:14px;cursor:pointer;padding:10px 6px;min-height:44px}
.wiz-back:hover{color:#fff}
.wiz-call{color:#a3b8cb;font-size:13.5px;text-decoration:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.wiz-call:hover{color:var(--sky)}
.wiz-done{text-align:center;padding:18px 0 8px}
.wiz-tick{width:52px;height:52px;margin:0 auto 12px;display:block;fill:none;stroke:var(--sky);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wiz-when{font-size:19px;font-weight:600;color:var(--sky);margin:0 0 6px}
.wiz-ref{color:#cfe0ef;font-size:14.5px;margin:0 0 4px;letter-spacing:.04em}
/* the hidden file input can never be focused directly, but 16px keeps every
   input on the page above the iOS zoom threshold with zero exceptions to audit */
.wiz-photo-add input{font-size:16px}
/* Mobile headroom for the mascot: the raised FREE!!! sign was overlapping the
   hero sub-copy on phones. Extra air above the CTA row keeps every word
   readable while he stands there holding the sign. */
@media(max-width:560px){
  .hero .hero-sub{margin-bottom:104px}
}

/* ── city + guide pages (SEO build 2026-08-04) ─────────────────────── */
.bc{padding:18px 20px 0;font-size:13.5px;color:var(--mut)}
.bc a{color:var(--steel);text-decoration:none}
.bc a:hover{text-decoration:underline}
.bc span[aria-hidden]{margin:0 6px;opacity:.5}
.bc span[aria-current]{color:var(--txt);font-weight:600}
.prose-sec .prose-p{max-width:760px;margin:0 0 18px;font-size:16.5px;line-height:1.75;color:var(--txt)}
.linkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.lg-col h3{font-family:var(--display);font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt);margin:0 0 10px}
.lg-col ul{list-style:none;margin:0;padding:0}
.lg-col li{margin:0 0 8px}
.lg-col a{color:var(--steel);text-decoration:none;font-size:15px}
.lg-col a:hover{text-decoration:underline}
@media(max-width:760px){.linkgrid{grid-template-columns:1fr}}

/* ── portfolio categories (gallery page) ── */
.pf-cats{display:flex;gap:12px;margin:26px 0 6px;flex-wrap:wrap}
.pf-cat{
  flex:1 1 220px;min-height:64px;padding:16px 22px;border-radius:9px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);color:var(--ink);
  font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,border-color .2s;
}
.pf-cat span{font-size:13px;font-weight:700;background:rgba(12,23,35,.08);border-radius:12px;padding:2px 10px;color:var(--mut)}
.pf-cat:hover{border-color:var(--steel)}
.pf-cat:focus-visible{outline:3px solid var(--steel);outline-offset:2px}
.pf-cat.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pf-cat.on span{background:var(--sky);color:#12365a}
.gal{position:relative}
.gal-cap{position:absolute;top:10px;left:10px;right:10px;margin:0;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.gal-tag,.gal-type{
  font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:5px;
}
.gal-tag{background:rgba(19,32,25,.88);color:#fff}
.gal-type{background:rgba(84,216,240,.92);color:#12365a}
/* "Click to see before & after" — it is an invitation, not a caption, so it
   gets the brand accent to read as tappable. Same shape as the other chips. */
.gal-tag-ba{background:var(--sky);color:#12365a}

/* ── infinite proof marquee (homepage reviews+jobs, service-page strips) ── */
.mq-sec{padding:64px 0 0}
/* Real horizontal scroller. site.js drifts scrollLeft and wraps at the halfway
   point, so the loop is seamless AND the strip stays draggable/swipeable.
   The scrollbar is hidden because the drift would make it twitch constantly —
   the "drag or swipe" hint below the strip is what advertises the affordance. */
.mq{overflow-x:auto;overflow-y:hidden;padding:26px 0 14px;cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch}
.mq::-webkit-scrollbar{display:none}
.mq.grabbing{cursor:grabbing}
.mq:focus-visible{outline:3px solid var(--steel);outline-offset:-3px}
.mq-track{display:flex;width:max-content}
.mq-half{display:flex;gap:16px;padding-right:16px;align-items:stretch}
.mq-hint{
  margin:2px 0 0;text-align:center;font-size:12px;color:var(--mut);
  /* the strip is obvious on touch; this line is mostly for mouse users */
}
@media(prefers-reduced-motion:reduce){ .mq-hint{color:var(--ink)} }
.mq-card{position:relative;margin:0;padding:0;width:310px;height:224px;flex:none;
  border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface);
  cursor:zoom-in;display:block;text-align:left;transition:transform .25s,border-color .25s}
.mq-card:hover{transform:translateY(-3px);border-color:var(--steel)}
.mq-card:focus-visible{outline:3px solid var(--steel);outline-offset:2px}
.mq-card img{width:100%;height:100%;object-fit:cover;display:block}
.mq-chips{position:absolute;top:8px;left:8px;display:flex;gap:6px}
.mq-rev{
  width:340px;height:224px;flex:none;border-radius:12px;border:1px solid var(--line);
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:18px 20px;display:flex;flex-direction:column;
}
.mq-stars{display:flex;gap:3px;margin-bottom:10px}
.mq-stars svg{width:15px;height:15px;fill:var(--sky);stroke:var(--navy);stroke-width:1.2}
.mq-rev blockquote{margin:0;font-size:14px;line-height:1.5;color:var(--txt);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.mq-who{margin:auto 0 0;padding-top:10px;font-family:var(--display);font-size:13px;font-weight:700;color:var(--ink)}
.mq-who span{color:var(--mut);font-weight:500}
@media(max-width:560px){
  .mq-card{width:248px;height:200px}
  .mq-rev{width:300px;height:200px;padding:14px 16px}
  .mq-rev blockquote{-webkit-line-clamp:5;font-size:13.5px}
}

/* ══════════ AI driveway preview (before/after slider) ══════════ */
.ba{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ba-modes{display:flex;gap:10px;margin:22px 0 14px;flex-wrap:wrap}
.ba-mode{
  min-height:46px;padding:11px 22px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.6);border:1.5px solid var(--line);color:var(--ink);
  font-family:var(--display);font-size:15px;font-weight:700;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s;
}
.ba-mode:hover{border-color:var(--steel)}
.ba-mode:focus-visible{outline:3px solid var(--steel);outline-offset:2px}
.ba-mode.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ba-frame{
  position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 30px 70px -30px rgba(12,23,35,.45);max-width:980px;
  /* the mascot needs somewhere to stand — the frame is his stage */
}
.ba-frame img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
.ba-clip{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.ba-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.5);pointer-events:none}
.ba-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2b26' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6l-5 6 5 6M16 6l5 6-5 6'/%3E%3C/svg%3E");
  background-size:22px;background-position:center;background-repeat:no-repeat;
}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  touch-action:none;
}
.ba-lab{
  position:absolute;bottom:12px;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(19,32,25,.82);
  padding:6px 12px;border-radius:5px;pointer-events:none;
}
.ba-lab-b{left:12px}
.ba-lab-a{right:12px}
.ba-busy{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(19,32,25,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:#fff;font-family:var(--display);font-weight:600;font-size:16px;z-index:4;
}
.ba-busy[hidden]{display:none}
.ba-actions{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.ba-err{background:rgba(200,60,60,.12);border:1px solid rgba(200,60,60,.4);color:#8c2f2f;
  padding:11px 14px;border-radius:8px;margin-top:14px;font-size:14.5px;max-width:640px}
.ba-fine{color:var(--mut);font-size:13px;margin-top:14px;max-width:640px}

/* the mascot perched on the slider frame, pointing down at it */
.ba-guy{
  --gc:72px;
  position:absolute;top:calc(-1 * var(--gc)*199/124 + 8px);left:50%;transform:translateX(-50%);z-index:5;
  width:var(--gc);height:calc(var(--gc)*199/124);
  background:url("/assets/img/gw-guy-sprite.png?v=3") no-repeat 0 0;
  background-size:calc(var(--gc)*5) calc(var(--gc)*199/124);
  background-position-x:calc(var(--gc)*-4);
  opacity:0;pointer-events:none;
}
.ba{overflow:visible}
.ba .ba-frame{overflow:visible}
.ba .ba-frame > img,.ba .ba-clip{border-radius:12px}
.ba.star .ba-guy{animation:baPerch .6s cubic-bezier(.25,.9,.35,1.25) both}
@keyframes baPerch{
  0%{opacity:0;transform:translateX(-50%) translateY(-120px) scale(.85)}
  60%{opacity:1;transform:translateX(-50%) translateY(4px) scale(1.05,.92)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){.ba.star .ba-guy{animation:none;opacity:1}}
@media(max-width:560px){.ba-guy{--gc:56px}.ba-knob{width:52px;height:52px}}

/* ══════════ coverage map (service areas) ══════════
   The paver-framed Space Coast map — SVG lives in src/area-map-svg.mjs.
   Text sits on paint-order white halos so labels stay readable over land,
   water and roads at any size. */
.am-map{width:100%;max-width:560px;margin:30px auto 0}
.am-map svg{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 44px rgba(19,32,25,.16)) drop-shadow(0 4px 12px rgba(19,32,25,.10))}
.am-hl{fill:rgba(255,255,255,.30)}
.am-sh{fill:rgba(19,32,25,.26)}
.am-ed{fill:none;stroke:rgba(63,68,65,.16);stroke-width:1}
.am-edl{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.am-dot{fill:#0d2c4e;stroke:#fff;stroke-width:1.3}
.am-dot2{fill:#0d2c4e;stroke:#fff;stroke-width:1.2}
.am-ct{font:700 10.5px var(--body);fill:var(--ink);paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:2.8px;stroke-linejoin:round}
.am-ct2{font:500 9.5px var(--body);fill:var(--txt);paint-order:stroke;stroke:rgba(255,255,255,.88);stroke-width:2.5px;stroke-linejoin:round}
.am-hq{font:800 11px var(--display);letter-spacing:.5px;fill:var(--ink);paint-order:stroke;stroke:rgba(255,255,255,.92);stroke-width:3px;stroke-linejoin:round}
.am-orl{font:800 11.5px var(--display);letter-spacing:.4px;fill:var(--ink);paint-order:stroke;stroke:rgba(255,255,255,.92);stroke-width:3px;stroke-linejoin:round}
.am-rd{font:700 7.5px var(--body);fill:#51665c;paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:2.2px;stroke-linejoin:round}
.am-geo{font:700 7.5px var(--body);letter-spacing:1.6px;fill:#4f7f96;opacity:.85}
.am-geo2{font-size:6.5px;letter-spacing:1px}
.am-ocean-t{font:700 9.5px var(--display);letter-spacing:3.5px;fill:#5b8aa2;opacity:.8}
.am-chip-t{font:700 9px var(--display);letter-spacing:1.2px;fill:#0d2c4e}
.am-ring-t{font:700 8px var(--display);letter-spacing:.8px;fill:#3c5648}
.am-scale-t{font:700 7.5px var(--body);letter-spacing:.6px;fill:var(--txt)}
.am-n{font:800 8.5px var(--display);fill:#0d2c4e;paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:2.2px;stroke-linejoin:round}
.am-gr{stroke:#93ac89;stroke-width:.9;stroke-linecap:round;fill:none;opacity:.7}
.am-pm{stroke:#6f8f6f;stroke-width:1;stroke-linecap:round;fill:none;opacity:.75}
.am-wave{stroke:#7fb0c4;stroke-width:1.1;stroke-linecap:round;fill:none;opacity:.75}
.am-anc{stroke:#46788c;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.55}
.am-lag{fill:url(#gLag);stroke:rgba(127,168,184,.55);stroke-width:.8}
.am-rdc{fill:none;stroke:rgba(255,255,255,.65);stroke-width:3.2;stroke-linecap:round}
.am-rda{fill:none;stroke:#75877c;stroke-width:1.5;stroke-linecap:round}
.am-rdb{fill:none;stroke:#8fa096;stroke-width:1.1;stroke-linecap:round}
.am-ring{fill:none;stroke:var(--steel);stroke-width:1.3;stroke-dasharray:7 5;opacity:.75}
.am-pulse{transform-box:fill-box;transform-origin:center;animation:amPulse 2.4s ease-out infinite}
@keyframes amPulse{0%{transform:scale(.55);opacity:.9}70%{transform:scale(1.8);opacity:0}100%{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.am-pulse{animation:none;opacity:0}}
.am-note{color:var(--txt);font-size:16px;margin-top:22px;max-width:640px;text-align:center;margin-left:auto;margin-right:auto}


/* ══════════ lightbox (marquee + gallery) ══════════
   One dialog for the whole site. Opened by any [data-full]; site.js fills it. */
.gal-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal-open img{display:block;width:100%;height:100%;object-fit:cover}
.lb[hidden]{display:none!important}
.lb{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:22px;
  background:rgba(12,20,16,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:lbIn .18s ease-out;
}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-fig{margin:0;max-width:min(1100px,94vw);max-height:88vh;display:flex;flex-direction:column;gap:10px}
.lb-fig img{
  max-width:100%;max-height:78vh;width:auto;height:auto;display:block;margin:0 auto;
  border-radius:12px;box-shadow:0 26px 70px -24px rgba(0,0,0,.85);background:#0a2440;
}
.lb-cap{margin:0;text-align:center;color:#e8f0f6;font-family:var(--display);font-size:15px;font-weight:700}
.lb-close{
  position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.42);color:#fff;
  font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.lb-close:hover{background:rgba(0,0,0,.66)}
.lb-close:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
@media(prefers-reduced-motion:reduce){ .lb{animation:none} }

/* ══════════ opened photo: before + after, side by side ══════════
   8/09 rev 3 (Anthony: "no sliders"). The drag control is gone. A paired photo
   opens as TWO pictures shown at once — side by side on a laptop, stacked on a
   phone. Both must fit the viewport without scrolling, which is what the vh
   budgets below are for: the lightbox has 22px padding, the caption and the
   Before/After labels take a fixed amount, and the rest is split between the
   two images.

   object-fit:CONTAIN, not cover — one of the pairs is portrait, and cover
   silently cropped the top and bottom off it inside a landscape frame. */
.lb-media{display:block;line-height:0;width:100%}

.lb-pair{
  display:grid;gap:14px;align-items:start;justify-items:center;
  grid-template-columns:1fr 1fr;                 /* laptop: two across */
  width:min(1180px, calc(100vw - 44px));margin:0 auto;
}
.lb-half{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center;width:100%}
.lb-half img{
  display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;
  border-radius:12px;background:#0a2440;box-shadow:0 20px 56px -22px rgba(0,0,0,.8);
}
.lb-half figcaption{line-height:1}
.lb-lab{
  display:inline-block;padding:5px 13px;border-radius:9999px;
  font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(255,255,255,.14);color:#fff;
}
.lb-lab-a{background:var(--sky);color:#12365a}

/* The mascot is centred on the opened photo, which is right for ONE picture and
   wrong for two — with a pair he lands in the gutter between them, on top of
   the Before label and the caption. Push him out to the left edge of the pair,
   where he still reads as lying on the bottom of the left-hand photo. */
.lb-media:has(.lb-pair) ~ .lb-guy{left:14%}
@media(max-width:700px){ .lb-media:has(.lb-pair) ~ .lb-guy{left:24%} }

/* Phone: stack them. 34vh each keeps both photos, both labels and the caption
   on screen together — the whole point of showing them side by side. */
@media(max-width:700px){
  .lb-pair{grid-template-columns:1fr;gap:10px;width:calc(100vw - 32px)}
  .lb-half img{max-height:34vh}
  .lb-lab{font-size:10px;padding:4px 11px}
}
/* Short landscape phones have even less height to give away. */
@media(max-height:520px) and (min-width:701px){
  .lb-half img{max-height:62vh}
}

/* ══════════ mascot on the lightbox ══════════
   He jumps onto the opened photo and lies along the bottom edge repping the
   FREE!!! sign. Cells 3 & 4 of the idle sheet (640x187, 4 cells) are the
   lay-down pump; alternating them with steps(1) is the whole animation. */
.lb-imgwrap{position:relative;display:block;line-height:0}
.lb-guy{
  --gc:104px;
  position:absolute;left:50%;bottom:-10px;z-index:6;
  width:var(--gc);height:calc(var(--gc)*187/160);
  background:url("/assets/img/gw-guy-idle.png?v=1") no-repeat 0 0;
  background-size:calc(var(--gc)*4) calc(var(--gc)*187/160);
  background-position-x:calc(var(--gc)*-2);   /* lay pose, arm up */
  pointer-events:none;opacity:0;
  transform:translateX(-50%);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));
}
/* .go is re-added by site.js on every open so the jump replays each time */
.lb-guy.go{
  animation:
    lbGuyJump .52s cubic-bezier(.2,.85,.3,1.35) both,
    lbGuyPump 1.1s steps(1) .52s infinite;
}
@keyframes lbGuyJump{
  0%{opacity:0;transform:translate(-50%,-46px) scale(.78) rotate(-8deg)}
  60%{opacity:1;transform:translate(-50%,6px) scale(1.04) rotate(2deg)}
  100%{opacity:1;transform:translate(-50%,0) scale(1) rotate(0)}
}
@keyframes lbGuyPump{
  0%,49.9%{background-position-x:calc(var(--gc)*-2)}
  50%,100%{background-position-x:calc(var(--gc)*-3)}
}
@media(max-width:560px){ .lb-guy{--gc:74px;bottom:-6px} }
/* he must never cover the close button or fight the caption on a short screen */
@media(max-height:520px){ .lb-guy{display:none} }
@media(prefers-reduced-motion:reduce){
  .lb-guy,.lb-guy.go{animation:none;opacity:1;transform:translateX(-50%)}
}

/* ══════════ legal pages + footer legal links ══════════
   Added 8/09 with /privacy-policy/ and /terms-of-service/. Deliberately plain:
   a legal page is read, not scanned, so it gets a single measure column and
   real line-height rather than the marketing type scale. */
.legal{max-width:74ch;padding:clamp(48px,7vw,86px) 0}
.legal h1{margin:6px 0 4px}
.legal-date{color:var(--muted);font-size:14px;margin:0 0 34px}
.legal h2{font-size:clamp(19px,2.1vw,23px);margin:34px 0 8px;line-height:1.25}
.legal p{margin:0;line-height:1.72;color:var(--ink)}
.legal p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.f-legal a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){ .f-in{flex-wrap:wrap;gap:8px} }

/* "What we'd build" — the right half of a CONCEPT pair. Deliberately a
   different colour from the lime "After" pill: After means a finished job that
   exists, this means a proposal that does not. They must never read the same. */
.lb-lab-c{background:#e8a13c;color:#2a1c08}

/* two-row Brevard wall: tighten the gap between the stacked scrollers so they
   read as one wall rather than two unrelated strips */
.mq-sec-2 .mq{padding:13px 0 7px}
.mq-sec-2 .mq + .mq{padding-top:0}
/* long gmail address must not blow out the footer column on a phone */
.f-col a[href^="mailto:"]{overflow-wrap:anywhere}

/* ══════════ service card banner ══════════
   Anthony: "an image example on each one… stylize it more like a banner, not
   too big or large, but not just square." So a WIDE letterbox strip across the
   top of the card — 3:1, which reads as a banner rather than a thumbnail, and
   is short enough that the card stays a card and the four still fit one row. */
.svc-ban{display:block;aspect-ratio:3/1;overflow:hidden;border-radius:9px;margin:0 0 14px;background:#0a2440}
.svc-ban img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.svc-img:hover .svc-ban img{transform:scale(1.05)}
/* on a phone the grid is one column, so the banner gets wider — shorten it
   further or it eats the fold */
@media(max-width:700px){ .svc-ban{aspect-ratio:16/6} }
@media(prefers-reduced-motion:reduce){ .svc-ban img{transition:none} .svc-img:hover .svc-ban img{transform:none} }

/* ═══════════ Brevard Plumbing additions on the Groundworks chassis ═══════════ */

/* Mascot: the Brevard Plumbing wrench guy (assets/img/bp-mascot.png, mflux +
   rembg 8/17). He perches on every Book button and mans the corner dock —
   overrides the gw sprite rules above wholesale (no sprite sheets here). */
.est-guy{
  display:inline-block!important;position:absolute;left:56%;bottom:calc(100% - 12px);
  width:54px;height:80px;opacity:1!important;
  background:url("/assets/img/bp-mascot.png?v=6") center bottom/contain no-repeat!important;
  animation:bpBob 3.4s ease-in-out infinite!important;pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
@keyframes bpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.lb-guy,.ba-guy{display:none!important}
.est-dock{
  position:fixed;left:14px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:80;
  width:92px;height:126px;border:0;cursor:pointer;background:none;padding:0;
  filter:drop-shadow(0 10px 18px rgba(6,33,63,.45));
  transition:transform .18s ease;
  animation:bpBob 3.4s ease-in-out infinite;
}
.est-dock:hover{transform:translateY(-4px) scale(1.05)}
.est-dock img{width:100%;height:100%;object-fit:contain}
.est-dock::after{
  content:"Book me!";position:absolute;top:-6px;right:-14px;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.04em;
  color:#06213f;background:#7fe0f2;border-radius:999px;padding:3px 9px;
  box-shadow:0 4px 10px rgba(6,33,63,.3);transform:rotate(6deg);
}
.est-dock.drop{animation:dockDrop .5s cubic-bezier(.2,.8,.3,1.2), bpBob 3.4s ease-in-out .5s infinite}
@keyframes dockDrop{from{transform:translateY(-26px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:760px){.est-dock{display:none}} /* the callbar owns mobile */

/* brand mark: inline SVG instead of the Groundworks PNG */
.brand-mark{width:40px;height:40px;flex:none}

/* offer cards (specials) — navy tiles with a chip tag, gw tokens */
.offer-grid{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.offer{position:relative;background:var(--navy);border-radius:18px;padding:26px 24px 24px;color:#fff;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.offer::after{content:"";position:absolute;right:-34px;top:-34px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(84,216,240,.35),transparent 70%)}
.offer h3{color:#fff;font-size:20px;font-family:var(--display)}
.offer p{color:rgba(255,255,255,.82);font-size:15px;flex:1 1 auto;margin:0}
.offer p.offer-tag{flex:0 0 auto;align-self:flex-start;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#06213f;background:#7fe0f2;border-radius:999px;padding:4px 12px}
.offer .btn{align-self:flex-start}
.offer p.offer-fine{flex:0 0 auto;font-size:12.5px;color:rgba(255,255,255,.55)}

/* referral disclosure line in the footer */
.f-disc{max-width:var(--wrap);margin:0 auto;padding:0 24px 30px}
.f-disc p{font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.45);max-width:940px;margin:0}

/* legal pages (privacy / terms) — gw css has none */
.legal-hero{background:linear-gradient(120deg,var(--navy),var(--navy-2));padding-top:74px}
.legal-hero .hero-inner{padding:64px 24px 44px;max-width:var(--wrap);margin:0 auto;text-align:left}
.legal-hero h1{color:#fff}
.legal-hero .hero-sub{color:rgba(255,255,255,.75)}
.legal-body{max-width:820px}
.legal-body h2{font-size:21px;margin-top:34px}
.legal-body p{color:var(--txt);margin-top:10px}

/* ═══════════ Burton-style pass (Anthony 8/17, ref burtonplumbingfl.com) ═══
   Warm cream ground, navy + GOLD, handwritten script eyebrows, gold icon
   medallions, angled bands, non-square cards, polaroid photo treatment. */

body{background:#faf3e2}

/* script eyebrows — the Burton signature */
.eyebrow{font-family:'Caveat',cursive;font-size:27px;font-weight:700;letter-spacing:.01em;text-transform:none;color:#3c74a6}
.eyebrow.light{color:#eccf83}

/* gold CTAs (logo + mascot keep their water-aqua) */
.btn-quote{background:linear-gradient(120deg,#efd084,#d9a940);color:#12365a;box-shadow:0 8px 22px rgba(217,169,64,.38)}
.btn-quote:hover{box-shadow:0 12px 28px rgba(217,169,64,.5)}
.wiz-chip.on{background:#efd084;border-color:#d9a940;color:#12365a}
.offer p.offer-tag{background:#efd084;color:#12365a}
.est-dock::after{background:#efd084;color:#12365a}

/* boxes aren't just squares */
.svc{border-radius:30px 10px 30px 10px;border:1px solid rgba(21,63,104,.10);box-shadow:0 10px 26px rgba(21,63,104,.08)}
.svc .svc-ban{border-radius:29px 9px 0 0;overflow:hidden}
.offer{border-radius:30px 10px 30px 10px}
.mq-card{border-radius:22px 8px 22px 8px;overflow:hidden}
.faq-item{border-radius:18px 6px 18px 6px}
.table-scroll{border-radius:22px 8px 22px 8px}

/* angled full-bleed bands (Burton's slanted panels) */
.cta-band,.call-band{clip-path:polygon(0 28px,100% 0,100% calc(100% - 28px),0 100%);padding-top:28px;padding-bottom:28px}
.quote{clip-path:polygon(0 28px,100% 0,100% 100%,0 100%);padding-top:28px}

/* gold medallion icons */
.trust-item svg{width:52px;height:52px;background:#f3dfa8;border-radius:50%;padding:12px;stroke:#12365a;box-shadow:0 4px 10px rgba(217,169,64,.3)}
.step-n{background:linear-gradient(135deg,#efd084,#d9a940);color:#12365a;box-shadow:0 6px 16px rgba(217,169,64,.35)}
.checks svg{background:#f3dfa8;stroke:#12365a}

/* polaroid photo treatment on feature rows */
.frow-media img,.frow-media video{border:10px solid #fff;border-radius:8px;box-shadow:0 16px 36px rgba(21,63,104,.18);transform:rotate(-1.6deg)}
.frow.flip .frow-media img,.frow.flip .frow-media video{transform:rotate(1.6deg)}

/* team band — navy, slanted, overlapping polaroids */
.team-band{background:linear-gradient(120deg,var(--navy),var(--navy-2));clip-path:polygon(0 30px,100% 0,100% calc(100% - 30px),0 100%);padding:30px 0}
.team-band .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.team-shots{position:relative;min-height:420px}
.team-shots img{position:absolute;width:62%;border:12px solid #fff;border-radius:8px;box-shadow:0 20px 44px rgba(0,0,0,.4)}
.team-shots img:first-child{left:0;top:6%;transform:rotate(-4deg);z-index:1}
.team-shots img:last-child{right:0;top:26%;transform:rotate(3.5deg);z-index:2}
.team-band h2{color:#fff}
.team-band .sec-sub{color:rgba(255,255,255,.85)}
.team-band .btn{margin-top:22px}
@media(max-width:860px){
  .team-band .wrap{grid-template-columns:1fr}
  .team-shots{min-height:340px;order:2}
}