/* ==========================================================================
   BBN site.css — Vivid (Full Spectrum) design system implementation
   Re-implemented from DESIGN-README.md + DESIGN.md (do NOT copy .dc.html code).
   Structure: reset · base · layout primitives · nav · footer · buttons ·
   forms · components · hero · sections · utilities · responsive · motion.
   Note: tokens.css is linked BEFORE this file in _Layout (both cache-busted),
   so no @import here — that let the browser serve a stale, un-versioned tokens.css.
   ========================================================================== */

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video { max-width:100%; display:block; height:auto; }
a { color:var(--accent-text); text-decoration:none; }
button { font-family:inherit; }
h1,h2,h3,h4 { font-family:var(--f-head); margin:0 0 .5em; color:var(--text); }
p { margin:0 0 1.1em; }
ul,ol { margin:0 0 1.1em; padding-left:1.2em; }
:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.acc-gold :focus-visible, body.acc-gold :focus-visible { outline-color:var(--gold); }

/* ---------- type scale ---------- */
h1,.h1 { font-weight:800; font-size:clamp(40px,6.5vw,80px); line-height:1.05; letter-spacing:-.03em; }
h2,.h2 { font-weight:700; font-size:clamp(28px,3.5vw,46px); line-height:1.1; letter-spacing:-.025em; }
h3,.h3 { font-weight:600; font-size:clamp(19px,2vw,23px); line-height:1.2; letter-spacing:-.015em; }
.lead { font-size:clamp(17px,1.6vw,20px); color:var(--text); font-weight:300; }
.label {
  font-family:var(--f-body); font-weight:600; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-text); margin:0 0 14px; display:block;
}
.stat-num { font-family:var(--f-head); font-weight:800; font-size:clamp(38px,5vw,60px);
  line-height:1; letter-spacing:-.03em; color:var(--accent); }
.muted { color:var(--muted); }
.text-accent { color:var(--accent-text); }

/* ---------- skip link ---------- */
.skip-link {
  position:absolute; left:-999px; top:0; z-index:1000; background:var(--blue); color:#fff;
  padding:12px 20px; font-family:var(--f-head); font-weight:700; border-radius:0 0 2px 0;
}
.skip-link:focus { left:0; }

/* ---------- layout primitives ---------- */
.container { max-width:var(--container); margin:0 auto; padding:0 var(--pad); width:100%; }
/* Every content section carries a hairline top divider so ANY two adjacent sections read as
   separate — even plain-on-plain or bg2-on-bg2, whose near-identical colors don't separate alone.
   This is the systemic fix for the "big vertical gap / void" between same-background sections.
   (Heroes are .hero, not .section, so they never get a top line.) */
.section, .section--tight { padding:80px 0; border-top:1px solid var(--bdr); }
.section--tight { padding:52px 0; }
.section--bg2 { background:var(--bg2); }
.section--bg3 { background:var(--bg3); }
/* opt-out for sections meant to flow into the previous one with no divider */
.section--seamless { border-top:0 !important; }

/* hairline grid: 1px gaps via wrapper bg; children own their backgrounds */
.hairline-grid { display:grid; gap:1px; background:var(--bdr); border:1px solid var(--bdr); }
.hairline-grid > * { background:var(--bg2); }

/* tinted card — the system's core motif */
.tinted-card {
  background:rgba(var(--accent-rgb),.07);
  border-top:2px solid var(--accent);
  padding:28px 26px;
  transition:background .2s ease;
}
.tinted-card h3 { color:var(--text); }

/* Interactive hover ONLY for cards that are links (a clear clickability signal).
   Static info cards stay calm — no misleading hover. */
a.tinted-card, a.feature-card, a.trust-cell, a.step-card {
  transition:transform .22s cubic-bezier(.4,0,.2,1), background .22s ease, border-color .22s ease;
}
a.tinted-card:hover, a.feature-card:hover { background:rgba(var(--accent-rgb),.14); }
a.trust-cell:hover, a.step-card:hover { background:rgba(var(--accent-rgb),.10); }
a.tinted-card:hover .text-accent, a.feature-card:hover .text-accent { color:var(--accent-text); }
@media (prefers-reduced-motion:no-preference){
  a.tinted-card:hover, a.feature-card:hover, a.trust-cell:hover, a.step-card:hover { transform:translateY(-4px); }
}

/* section header (label + H2 pattern) */
.section-header { max-width:760px; margin:0 0 44px; }
.section-header.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-header p { color:var(--muted); margin-top:10px; }

/* ---------- buttons ---------- */
.btn {
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:var(--f-head); font-weight:700; font-size:15px; letter-spacing:.01em;
  padding:14px 26px; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; text-align:center; line-height:1; will-change:transform;
  transition:background-position .5s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.34,1.4,.5,1), filter .2s ease, color .25s ease, border-color .25s ease;
}
/* subtle crisp sheen that sweeps once on hover (flourish, not the main effect) */
.btn::before {
  content:''; position:absolute; top:0; bottom:0; left:-140%; width:45%; z-index:2;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-22deg); pointer-events:none;
}
/* living gradient — a lighter band that lives in the button and slides across on hover */
.btn--primary {
  background:linear-gradient(120deg, var(--accent) 0%, var(--accent-d) 50%, var(--accent) 100%);
  background-size:200% 100%; background-position:0 0; color:#fff;
}
.btn--gold {
  background:linear-gradient(120deg, var(--gold) 0%, var(--gold-d) 50%, var(--gold) 100%);
  background-size:200% 100%; background-position:0 0; color:#0b0b0b;
}
.btn--gold::before { background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); }
/* ghost: accent wipes in from the left */
.btn--ghost { background:transparent; border-color:var(--accent); color:var(--accent-text); }
.btn--ghost::after {
  content:''; position:absolute; inset:0; z-index:-1; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.btn--ghost:hover { color:#fff; border-color:var(--accent); }
@media (prefers-reduced-motion:no-preference){
  .btn--primary:hover, .btn--gold:hover {
    background-position:100% 0; transform:translateY(-1px); filter:brightness(1.04);
  }
  .btn--ghost:hover { transform:translateY(-1px); }
  .btn:active { transform:translateY(0); }
  .btn--ghost:hover::after { transform:scaleX(1); }
  .btn:hover::before { animation:btn-sheen .6s ease; }
}
@keyframes btn-sheen { from { left:-140%; } to { left:170%; } }
@media (prefers-reduced-motion:reduce){
  .btn--ghost:hover { background:var(--accent); color:#fff; }
}
.btn--lg { padding:16px 32px; font-size:16px; }
.btn--block { width:100%; }

/* ---------- SiteNav ---------- */
.nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:900;
  background:rgba(9,10,15,.62); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--bdr);
}
.nav__inner { max-width:var(--container); margin:0 auto; padding:0 var(--pad);
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav__brand { display:flex; align-items:center; gap:10px; font-family:var(--f-head);
  font-weight:800; font-size:21px; color:var(--text); letter-spacing:-.02em; white-space:nowrap; }
.nav__brand img { height:30px; width:auto; }
.nav__brand .dot { color:var(--blue); }
.nav__links { display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav__links a { position:relative; font-family:var(--f-body); font-weight:400; font-size:14px; color:var(--muted);
  transition:color .18s ease; }
.nav__links a::after { content:''; position:absolute; left:0; right:0; bottom:-7px; height:2px;
  background:linear-gradient(90deg, var(--blue), var(--ind)); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .24s cubic-bezier(.4,0,.2,1); }
.nav__links a:hover, .nav__links a.is-active { color:var(--text); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform:scaleX(1); }
.nav__right { display:flex; align-items:center; gap:20px; }
/* Nav CTA stays brand-blue on every page regardless of section accent. */
.nav .btn--primary, .nav__drawer .btn--primary { background:var(--blue); color:#fff; }
/* WCAG AA: white button text on base --teal (4.09:1) / --orange (3.96:1) fails; deepen the primary
   button ground to the darker accent shade on those two accents (teal-d ~6.2:1, orange-d ~5.6:1).
   Scoped to <main> so the blue nav/drawer button is untouched. */
body.acc-teal main .btn--primary, body.acc-orange main .btn--primary {
  background:linear-gradient(120deg, var(--accent-d) 0%, var(--accent-d) 50%, var(--accent-d) 100%);
}
@media (prefers-reduced-motion:no-preference){
  .nav .btn--primary:hover, .nav__drawer .btn--primary:hover {
    background:var(--blue-d); transform:translateY(-2px); box-shadow:0 8px 28px rgba(53,104,196,.45); }
}
.nav__phone { text-align:right; line-height:1.25; }
.nav__phone a { font-family:var(--f-head); font-weight:700; font-size:15px; color:var(--text); white-space:nowrap; }
.nav__phone span { display:block; font-size:11px; color:var(--muted); }
.nav__toggle { display:none; background:none; border:0; color:var(--text); padding:8px; cursor:pointer; }
.nav__toggle svg { width:26px; height:26px; }
/* mobile drawer */
.nav__drawer { display:none; }

/* ---------- footer ---------- */
.footer { background:var(--bg2); border-top:1px solid var(--bdr); padding:64px 0 28px; margin-top:0; }
.footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1fr; gap:40px; }
.footer h4 { font-family:var(--f-head); font-weight:700; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text); margin:0 0 18px; }
.footer ul { list-style:none; margin:0; padding:0; }
/* 10px of margin ON TOP of an inline-block's line box left the link lists looking unrelated to each
   other. line-height:1 on the li removes the leftover baseline gap the inline-block adds; the 4px
   margin keeps clearance for the hover underline, which sits 5px below the text. */
.footer li { margin-bottom:4px; line-height:1; }
.footer a { position:relative; display:inline-block; color:var(--muted); font-size:14px;
  line-height:1.5; transition:color .18s ease; }
.footer a::after { content:''; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:linear-gradient(90deg, var(--blue), var(--ind)); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .24s cubic-bezier(.4,0,.2,1); }
.footer a:hover { color:var(--text); }
.footer a:hover::after { transform:scaleX(1); }
.footer__brand .nav__brand { margin-bottom:16px; }
.footer__nap { color:var(--muted); font-size:14px; line-height:1.8; }
.footer__nap strong { color:var(--text); font-weight:600; display:block; margin-bottom:6px; }
.footer__bottom { border-top:1px solid var(--bdr); margin-top:48px; padding-top:24px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--muted); font-size:13px; }
.footer__bottom a { color:var(--muted); }
.footer__social { display:flex; gap:14px; }

/* ---------- forms / LeadConnector container ---------- */
.form-shell {
  background:rgba(255,255,255,.04); border:1px solid var(--bdr2); border-radius:var(--radius);
  padding:26px;
}
.form-shell iframe { width:100%; border:0; display:block; min-height:560px; }
.form-fallback { display:flex; flex-direction:column; gap:14px; }
.form-fallback input, .form-fallback textarea {
  background:var(--bg); border:1px solid var(--bdr2); color:var(--text); border-radius:var(--radius);
  padding:13px 15px; font-family:var(--f-body); font-size:15px;
}
.form-fallback input::placeholder, .form-fallback textarea::placeholder { color:rgba(226,228,238,.55); }
/* real, visible field labels (a11y: inputs must have an associated label, not just a placeholder) */
.form-fallback label.fld { display:flex; flex-direction:column; gap:6px; font-family:var(--f-body);
  font-weight:500; font-size:13px; letter-spacing:.02em; color:var(--muted); }
.form-fallback label.fld .fld__opt { color:var(--muted); font-weight:400; opacity:.85; }
/* required marker — aria-hidden on the span, since `required` already conveys this to assistive tech */
/* label.fld is a COLUMN flex container, so a bare text node + a sibling span become separate flex items
   and the asterisk drops onto its own line. Wrapping the text keeps it on one line beside the label. */
.form-fallback label.fld .fld__name { display:inline; }
.form-fallback label.fld .fld__req { color:var(--accent); font-weight:600; }

/* Contact-page aside inside the quote CTA's left column */
.cta-aside { margin-top:26px; display:flex; flex-direction:column; gap:22px; }
.cta-aside__block h3 { font-family:var(--f-head); font-size:15px; margin:0 0 8px; color:var(--text); }
.cta-aside__phones { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-wrap:wrap; gap:18px 28px; }
.cta-aside__phones li { display:flex; flex-direction:column; gap:1px; }
.cta-aside__state { font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.cta-aside__phones a { font-family:var(--f-head); font-weight:700; font-size:19px; color:var(--text); }
.cta-aside__phones a:hover { color:var(--blue); }
.form-fallback input:focus, .form-fallback textarea:focus { outline:none; border-color:var(--accent); }
/* the state selector routes the lead to the right HighLevel account — style it like the text inputs */
.form-fallback select {
  background:var(--bg); border:1px solid var(--bdr2); color:var(--text); border-radius:var(--radius);
  padding:13px 15px; font-family:var(--f-body); font-size:15px; width:100%;
}
.form-fallback select:focus { outline:none; border-color:var(--accent); }
/* City + ZIP share a row; they stack on narrow screens rather than squeezing */
.form-fallback .fld-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:420px) { .form-fallback .fld-row { grid-template-columns:1fr; } }
/* Consent opt-ins: small print, but the checkbox itself stays a comfortable target */
.form-fallback .fld-consent { display:flex; flex-direction:column; gap:10px; margin-top:2px; }
.form-fallback .fld-consent label { display:grid; grid-template-columns:auto 1fr; gap:9px;
  align-items:start; font-family:var(--f-body); font-size:12px; line-height:1.5; color:var(--muted); cursor:pointer; }
.form-fallback .fld-consent input[type=checkbox] { width:16px; height:16px; margin-top:2px; accent-color:var(--accent); padding:0; }

/* ---------- LED spectrum strip ---------- */
.led-strip { display:flex; height:6px; width:100%; }
.led-strip > span { flex:1; }
.led-caption { text-align:center; color:var(--muted); font-size:13px; letter-spacing:.05em;
  padding:16px 0 0; }

/* ---------- trust strip ---------- */
.trust-strip { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-cell { display:block; padding:34px 26px; background:var(--bg2);
  border-top:2px solid var(--accent); transition:background .2s ease; }
.trust-cell .stat-num { font-size:clamp(30px,3.6vw,42px); }
.trust-cell h3 { font-size:17px; margin:.4em 0 .2em; }
.trust-cell p { color:var(--muted); font-size:13.5px; margin:0; }

/* ---------- FAQ accordion (details/summary — answers in DOM) ---------- */
.faq { width:100%; max-width:840px; margin-left:auto; margin-right:auto; }
.faq details { border:1px solid var(--bdr); border-radius:var(--radius); margin-bottom:12px;
  background:var(--bg2); transition:border-color .2s ease, background .2s ease; }
.faq details[open] { border-color:var(--accent); background:rgba(var(--accent-rgb),.07); }
.faq summary { list-style:none; cursor:pointer; padding:20px 24px; display:flex;
  justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--f-head); font-weight:600; font-size:17px; color:var(--text); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-family:var(--f-head); font-weight:700; font-size:24px;
  color:var(--accent); line-height:1; flex:none; }
.faq details[open] summary::after { content:'\2212'; }
.faq__a { padding:0 24px 22px; color:var(--muted); }
.faq__a p:last-child { margin-bottom:0; }

/* ---------- review card ---------- */
.review-card { background:var(--bg2); border-top:2px solid var(--blue); padding:26px 24px;
  display:flex; flex-direction:column; gap:12px; height:100%;
  margin:0; /* reset the default <figure> margin (1em 40px) that was padding cards apart */ }
.review-card.rc-teal { border-top-color:var(--teal); }
.review-card.rc-rose { border-top-color:var(--rose); }
.review-card__stars { color:var(--gold); letter-spacing:2px; font-size:15px; }
/* override the generic blockquote box — review quotes are plain italic text */
.review-card__quote { color:var(--muted); font-style:italic; margin:0; padding:0;
  border:0; background:none; font-family:var(--f-body); font-size:15.5px; line-height:1.7; }
.review-card__name { color:var(--text); font-weight:600; font-family:var(--f-head); }
.review-card__meta { color:var(--muted); font-size:12px; }
.review-card__meta a { color:var(--muted); }
.review-card__meta a:hover { color:var(--text); }

/* ---------- city link grid ---------- */
.city-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--bdr);
  border:1px solid var(--bdr); }
.city-grid a { padding:18px 20px; background:var(--bg2); color:var(--muted); font-size:14px;
  font-weight:400; transition:all .18s ease; }
.city-grid a:hover { background:rgba(53,104,196,.1); color:var(--text); box-shadow:inset 0 0 0 1px var(--blue); }

/* nearby-city rows */
.nearby-list { list-style:none; margin:0; padding:0; max-width:640px; }
.nearby-list li { border-bottom:1px solid var(--bdr); }
.nearby-list a { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:16px 2px; color:var(--muted); transition:color .18s ease; }
.nearby-list a:hover { color:var(--text); }
.nearby-list .arrow { color:var(--accent-text); font-size:13px; white-space:nowrap; }

/* ---------- breadcrumb ---------- */
.breadcrumb { font-size:13px; color:var(--muted); padding:14px 0 0; }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--text); }
.breadcrumb li:not(:last-child)::after { content:'\203A'; margin-left:8px; color:var(--dim); }

/* ---------- photo tint overlays ---------- */
.photo { position:relative; overflow:hidden; border-radius:var(--radius); background:var(--bg3); }
.photo img { width:100%; height:100%; object-fit:cover; }
.photo::after { content:''; position:absolute; inset:0; pointer-events:none; }
.tint-christmas::after { background:linear-gradient(0deg, rgba(196,53,53,.22), transparent 55%); }
.tint-everyday::after  { background:linear-gradient(0deg, rgba(198,156,58,.20), transparent 55%); }
.tint-fourth::after    { background:linear-gradient(0deg, rgba(53,104,196,.22), transparent 55%); }
.tint-halloween::after { background:linear-gradient(0deg, rgba(196,104,26,.22), transparent 45%),
                                    linear-gradient(0deg, rgba(139,48,196,.14), transparent 60%); }

/* ---------- hero ---------- */
.hero { padding:calc(var(--nav-h) + 64px) 0 72px; }
.hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1 { margin-bottom:20px; }
.hero__accent { background:linear-gradient(90deg,#3568C4,#5B4ACA);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__body { max-width:520px; margin-bottom:28px; }
.hero__cta { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero__stats { display:flex; gap:36px; flex-wrap:wrap; border-top:1px solid rgba(53,104,196,.25);
  padding-top:24px; }
.hero__stats .stat-num { font-size:clamp(28px,3.4vw,40px); }
.hero__stats small { display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
.hero__media { position:relative; }
.hero__media .photo { aspect-ratio:4/5; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.hero__states { display:inline-flex; gap:10px; align-items:center; color:var(--muted);
  font-size:13px; margin-bottom:18px; letter-spacing:.02em; }
.hero__states b { color:var(--text); font-weight:600; }

/* ---------- full-bleed video hero (used when site.json heroVideoUrl is set) ---------- */
.hero--video { position:relative; padding:0; min-height:min(92vh,820px); display:flex; align-items:center;
  overflow:hidden; border-bottom:1px solid var(--bdr); }
.hero--video__bg { position:absolute; inset:0; z-index:0; }
.hero--video__bg video, .hero--video__bg img { width:100%; height:100%; object-fit:cover; }
.hero--video__scrim { position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(9,10,15,.95) 0%, rgba(9,10,15,.88) 28%, rgba(9,10,15,.45) 60%, rgba(9,10,15,.06) 100%),
             linear-gradient(0deg, rgba(9,10,15,.55) 0%, transparent 32%); }
.hero--video .container { position:relative; z-index:2; padding-top:calc(var(--nav-h) + 36px); padding-bottom:44px; }
.hero--video .hero__body { max-width:540px; }
.hero--video__inner { max-width:740px; }
/* keep the headline proportionate on the video hero (no balancing photo on the right) */
.hero--video h1 { font-size:clamp(36px,4.6vw,62px); }
@media (max-width:768px){
  .hero--video { min-height:auto; }
  .hero--video__scrim { background:linear-gradient(0deg, rgba(9,10,15,.92) 8%, rgba(9,10,15,.72) 60%, rgba(9,10,15,.5) 100%); }
}

/* ---------- generic split / cards grids ---------- */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }

/* process step card */
.step-card { background:var(--bg2); border-top:2px solid var(--accent); padding:30px 26px; height:100%; }
.step-card .num { font-family:var(--f-head); font-weight:800; font-size:42px; color:var(--accent);
  line-height:1; opacity:.9; }
.step-card h3 { margin:14px 0 8px; }
.step-card p { color:var(--muted); margin:0; font-size:15px; }

/* feature card (service/product) */
.feature-card { background:rgba(var(--accent-rgb),.07); border-top:2px solid var(--accent);
  padding:28px 26px; transition:background .2s ease; }
.feature-card h3 { margin-bottom:8px; }
.feature-card p { color:var(--muted); margin:0; font-size:15px; }

/* draft / dev banners */
.draft-banner { background:rgba(196,104,26,.12); border:1px solid var(--orange); color:#E7C9A6;
  padding:12px 18px; border-radius:var(--radius); font-size:14px; display:flex; gap:14px;
  align-items:center; justify-content:space-between; margin:0 0 32px; }
.draft-banner button { background:none; border:0; color:#E7C9A6; cursor:pointer; font-size:18px; line-height:1; }
.dev-ribbon { position:fixed; bottom:0; left:0; right:0; z-index:950; background:var(--blue);
  color:#fff; text-align:center; font-family:var(--f-head); font-weight:700; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; padding:6px; }

/* comparison table */
.cmp { width:100%; border-collapse:collapse; font-size:15px; }
.cmp th, .cmp td { text-align:left; padding:16px 18px; border-bottom:1px solid var(--bdr); }
.cmp thead th { font-family:var(--f-head); font-weight:700; color:var(--text); font-size:14px;
  letter-spacing:.02em; }
.cmp td { color:var(--muted); }
.cmp .col-bbn { background:rgba(var(--accent-rgb),.07); color:var(--text); }
.cmp .hl-gold { color:#D4B45E; font-weight:600; }
.cmp .hl-blue { color:#7AA5E8; font-weight:600; }

/* pricing cards */
.price-card { background:var(--bg2); border-top:2px solid var(--accent); padding:32px 28px;
  display:flex; flex-direction:column; }
.price-card.is-featured { background:rgba(var(--accent-rgb),.09); box-shadow:0 0 0 1px var(--accent); }
.price-card .tier { font-family:var(--f-body); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; font-size:11px; color:var(--accent-text); }
.price-card .amount { font-family:var(--f-head); font-weight:800; font-size:clamp(34px,4vw,46px);
  color:var(--text); letter-spacing:-.02em; margin:10px 0 6px; }
.price-card ul { list-style:none; padding:0; margin:16px 0 24px; }
.price-card li { color:var(--muted); padding:8px 0; border-bottom:1px solid var(--bdr); font-size:14.5px; }
.price-card .btn { margin-top:auto; }
.badge { display:inline-block; font-family:var(--f-body); font-weight:600; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius);
  background:rgba(var(--accent-rgb),.15); color:var(--accent-text); }

/* gallery */
.gallery-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.gallery-filters button { background:none; border:0; color:var(--muted); font-family:var(--f-head);
  font-weight:600; font-size:14px; padding:8px 4px; cursor:pointer; border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease; }
.gallery-filters button.is-active, .gallery-filters button:hover { color:var(--text); border-color:var(--purple); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; grid-auto-rows:1fr; }
.gallery-grid .photo { aspect-ratio:3/2; }
.gallery-grid .span2 { grid-row:span 2; }
.gallery-grid .span2 .photo { aspect-ratio:3/4; height:100%; }
.gallery-item__label { position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--f-head);
  font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.6); pointer-events:none; }

/* clickable gallery photos → lightbox */
.photo.is-zoomable { cursor:zoom-in; }
.photo.is-zoomable img { transition:transform .45s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion:no-preference){
  .photo.is-zoomable:hover img { transform:scale(1.06); }
}
.photo.is-zoomable:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }

/* lightbox overlay */
.lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:rgba(5,6,10,.93); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:6vh 5vw; }
.lightbox.is-open { display:flex; animation:lb-fade .2s ease; }
@keyframes lb-fade { from { opacity:0; } to { opacity:1; } }
.lightbox__fig { margin:0; max-width:min(1120px,92vw); display:flex; flex-direction:column; gap:14px; align-items:center; }
.lightbox__fig img { max-width:100%; max-height:82vh; object-fit:contain; border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox__fig figcaption { color:var(--muted); font-size:14px; text-align:center; max-width:70ch; }
.lightbox__close { position:absolute; top:16px; right:22px; background:none; border:0; color:#fff;
  font-size:36px; line-height:1; cursor:pointer; opacity:.75; transition:opacity .2s; }
.lightbox__close:hover { opacity:1; }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08);
  border:1px solid var(--bdr2); color:#fff; width:52px; height:52px; border-radius:50%; font-size:30px;
  line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s; }
.lightbox__nav:hover { background:rgba(255,255,255,.16); }
.lightbox__prev { left:22px; }
.lightbox__next { right:22px; }
@media (max-width:640px){
  .lightbox__nav { width:42px; height:42px; font-size:24px; }
  .lightbox__prev { left:8px; } .lightbox__next { right:8px; }
  .lightbox__close { top:10px; right:14px; }
}

/* before/after toggle */
.ba-toggle { display:inline-flex; border:1px solid var(--bdr2); border-radius:var(--radius);
  overflow:hidden; margin-bottom:18px; }
.ba-toggle button { background:transparent; border:0; color:var(--muted); font-family:var(--f-head);
  font-weight:600; font-size:14px; padding:9px 22px; cursor:pointer; transition:all .18s ease; }
.ba-toggle button.is-active { background:var(--accent); color:#fff; }
.ba-stage .photo { display:none; }
.ba-stage .photo.is-shown { display:block; }

/* stats panel (about) */
.stat-panel { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bdr);
  border:1px solid var(--bdr); }
.stat-panel > div { background:var(--bg2); padding:28px 24px; border-left:3px solid var(--accent); }
.stat-panel .stat-num { display:block; }
.stat-panel small { color:var(--muted); font-size:13px; }
.stat-panel .st-gold { border-left-color:var(--gold); }
.stat-panel .st-gold .stat-num { color:var(--gold); }
.stat-panel .st-teal { border-left-color:var(--teal); }
.stat-panel .st-teal .stat-num { color:var(--teal); }

/* blockquote */
blockquote { border-left:3px solid var(--ind); background:rgba(91,74,202,.06);
  margin:24px 0; padding:20px 26px; color:var(--text); font-style:italic; }

/* blog */
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post-card { background:var(--bg2); border:1px solid var(--bdr); display:flex; flex-direction:column;
  transition:border-color .2s ease; }
.post-card:hover { border-color:var(--accent); }
.post-card__body { padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card h3 { margin:0; font-size:19px; }
.post-card p { color:var(--muted); font-size:14.5px; margin:0; }
.cat-badge { align-self:flex-start; font-family:var(--f-body); font-weight:600; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius); }
/* lightened accent-text values (raw --orange/--teal/--blue as 11px text fail AA on the tint) */
.cat-comparison { background:rgba(196,104,26,.14); color:#E39A5E; }
.cat-howto { background:rgba(14,142,114,.14); color:#35C6A6; }
.cat-local { background:rgba(53,104,196,.14); color:#7AA5E8; }
.article { max-width:680px; margin:0 auto; }
.article h2 { margin-top:1.6em; scroll-margin-top:90px; }
.article img { border-radius:var(--radius); margin:1.5em 0; }
.article table { width:100%; border-collapse:collapse; font-size:15px; margin:1.5em 0; display:block; overflow-x:auto; }
.article th, .article td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--bdr); }
.article thead th { font-family:var(--f-head); font-weight:700; color:var(--text); font-size:14px; }
.article td { color:var(--muted); }
.article tbody tr:first-child td { color:var(--text); }
.article blockquote { margin:1.4em 0; }
.article a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.article ul, .article ol { color:var(--muted); }
.article li { margin-bottom:.4em; }
.article__layout { display:grid; grid-template-columns:1fr 260px; gap:56px; align-items:start;
  max-width:1040px; margin:0 auto; }
.article__aside { position:sticky; top:90px; font-size:14px; }
.article__aside h4 { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.toc { list-style:none; padding:0; margin:0 0 28px; }
.toc a { display:block; color:var(--muted); padding:5px 0; border-left:2px solid var(--bdr);
  padding-left:12px; transition:all .18s ease; }
.toc a:hover, .toc a.is-active { color:var(--text); border-left-color:var(--accent); }
.byline { display:flex; align-items:center; gap:14px; margin:20px 0 32px; color:var(--muted); font-size:14px; }
.byline img { width:46px; height:46px; border-radius:50%; object-fit:cover; }
.byline b { color:var(--text); }
.warranty-badge { background:rgba(198,156,58,.08); border:1px solid rgba(198,156,58,.4);
  border-radius:var(--radius); padding:16px; color:var(--gold); font-size:13.5px; margin-bottom:24px; }

/* warranty section bits */
.text-gold { color:var(--gold); }
.warranty-chip { position:absolute; left:16px; bottom:16px; z-index:2; font-family:var(--f-head);
  font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--gold); color:#0b0b0b; padding:8px 14px; border-radius:var(--radius); }
.check-list { list-style:none; padding:0; margin:0 0 28px; }
.check-list li { position:relative; padding:8px 0 8px 30px; color:var(--text); }
.check-list li::before { content:'\2713'; position:absolute; left:0; top:7px; color:var(--gold);
  font-family:var(--f-head); font-weight:800; font-size:16px; line-height:1; }

/* utilities */
.center { text-align:center; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack-sm > * + * { margin-top:12px; }
.stack-lg > * + * { margin-top:40px; }
.cta-inline { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.pill-row { display:flex; flex-wrap:wrap; gap:10px; }
.pill { border:1px solid var(--bdr2); border-radius:var(--radius); padding:7px 14px;
  color:var(--muted); font-size:13px; }

/* quote CTA */
.quote-cta { background:var(--bg2); border-top:1px solid var(--bdr); }
/* align-items:start so the copy column tops out with the form rather than floating mid-height once the
   photo lengthens it */
.quote-cta__grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.quote-cta__shot { margin:28px 0 0; }
.quote-cta__shot img { width:100%; height:auto; display:block; border-radius:var(--radius);
  border:1px solid var(--bdr2); }
.quote-cta__shot figcaption { margin-top:10px; font-family:var(--f-body); font-size:13px; color:var(--muted); }
.quote-cta__accents { list-style:none; padding:0; margin:22px 0 0; }
.quote-cta__accents li { display:flex; gap:12px; padding:9px 0; color:var(--muted); }
.quote-cta__accents li::before { content:''; width:8px; height:8px; margin-top:9px; flex:none;
  background:var(--accent); border-radius:1px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .city-grid { grid-template-columns:repeat(4,1fr); }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .trust-strip { grid-template-columns:repeat(2,1fr); }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .post-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  :root { --pad:22px; }
  .section { padding:60px 0; }
  .hero { padding:calc(var(--nav-h) + 36px) 0 48px; }
  .hero__grid, .split, .quote-cta__grid, .article__layout { grid-template-columns:1fr; gap:32px; }
  .article__aside { position:static; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr 1fr; gap:32px; }
  .stat-panel { grid-template-columns:1fr; }
  /* mobile nav */
  .nav__links, .nav__phone span, .nav__right .btn { display:none; }
  .nav__toggle { display:inline-flex; }
  .nav__drawer { display:block; position:fixed; top:var(--nav-h); left:0; right:0; z-index:899;
    background:rgba(9,10,15,.98); backdrop-filter:blur(16px); border-bottom:1px solid var(--bdr);
    transform:translateY(-120%); transition:transform .25s ease; padding:14px var(--pad) 22px; }
  .nav__drawer.is-open { transform:translateY(0); }
  .nav__drawer ul { list-style:none; margin:0 0 16px; padding:0; }
  .nav__drawer a { display:block; padding:13px 0; color:var(--text); font-family:var(--f-head);
    font-weight:600; border-bottom:1px solid var(--bdr); }
  .nav__drawer .btn { width:100%; }
}
@media (max-width:520px){
  .nav__brand { font-size:16px; gap:7px; }
  .nav__brand img { height:24px; }
  .nav__phone a { font-size:13px; }
  .nav__right { gap:12px; }
  .city-grid { grid-template-columns:repeat(2,1fr); }
  .trust-strip { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-grid .span2 { grid-row:span 1; }
  .post-grid, .footer__grid { grid-template-columns:1fr; }
  .hero__stats { gap:24px; }
}

/* ---------- mobile sticky CTA bar (nav CTA is hidden < 768px; keep Call + Quote reachable) ---------- */
.mobile-cta { display:none; }
@media (max-width:768px){
  .mobile-cta { display:grid; grid-template-columns:1fr 1fr; position:fixed; left:0; right:0; bottom:0;
    z-index:940; border-top:1px solid var(--bdr2); box-shadow:0 -6px 20px rgba(0,0,0,.45); }
  .mobile-cta a { display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 10px;
    font-family:var(--f-head); font-weight:700; font-size:15px; letter-spacing:.01em; }
  .mobile-cta__call { background:var(--bg3); color:var(--text); border-right:1px solid var(--bdr2); }
  .mobile-cta__quote { background:var(--blue); color:#fff; }  /* #fff on --blue = 5.3:1, clears AA */
  body { padding-bottom:58px; }   /* keep page content clear of the fixed bar */
  .dev-ribbon { display:none; }   /* avoid double bottom bars in preview */
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ── Territory coverage list ──────────────────────────────────────────────────────────────────
   Towns we serve that don't have their own page. Set as flowing text rather than a card grid on
   purpose: it's a coverage statement to scan (and to Ctrl+F for your own town), not more links to
   click. Centred and width-limited so a 21-town list still reads as prose. */
.coverage-list {
  max-width: 68ch;
  margin: 0 auto;
  text-align: center;
  line-height: 2;
  color: var(--ink-2);
}
.coverage-list span { white-space: nowrap; }

/* The #quote anchor targets the form itself so a visitor lands on the fields, not on the section
   heading with the form still below the fold. The offset clears the fixed nav — without it the form's
   first label sits underneath the header. */
.form-shell { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ---------- keep the footer clear of the chat bubble ----------
   The HighLevel bubble is fixed to the VIEWPORT bottom-right (58px tall, 20px up), so when you scroll
   to the end of the page it sits on top of whatever is in that corner — which was the Privacy/Terms
   row. Reserving that band as footer padding pushes the last row up out of it.
   Can't be solved by z-index: the widget renders in a shadow root at z-index 99999999.
   The bubble reaches 78px up from the page bottom (20px offset + 58px tall). 96px cleared it by only
   19px, and it casts a shadow beyond its box — 128px leaves a comfortable gap. */
.footer { padding-bottom: 128px; }

@media (max-width: 767px) {
  /* On mobile the bubble is lifted to 78px to clear the fixed CTA bar, so it occupies 78-136px from
     the bottom, and the 58px bar sits below that. Reserve the whole stack. */
  .footer { padding-bottom: 160px; }
}