/* =====================================================================
   P.J. Pappas — LIGHT premium landscaping theme.
   ~70% warm white / pale sage. Structure in evergreen (topbar, footer,
   photo-hero scrim). Accents: GREEN (eyebrows, icons, marks, dots, step
   numbers, nav hover). RED reserved for CTAs, links, and emphasis only.
   Charcoal-green headings + body. Fonts: Montserrat (headings) / Inter (body).
   ===================================================================== */

/* Google Fonts are loaded via aq_site_config.fonts.googleCss in the document
   head (with preconnect), so no render-blocking @import here. */

/* Size-matched stand-ins shown while the web fonts download (display=swap).
   Arial scaled to Montserrat's / Inter's width + line metrics, so text doesn't
   re-flow (layout shift) when the real font swaps in. Values measured from the
   Google Fonts files with fontTools (letter-frequency average width). */
@font-face { font-family: 'Montserrat Fallback'; font-weight: 100 599; src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 114.51%; ascent-override: 84.54%; descent-override: 21.92%; line-gap-override: 0%; }
@font-face { font-family: 'Montserrat Fallback'; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  size-adjust: 111.17%; ascent-override: 87.07%; descent-override: 22.58%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 100 599; src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 107.48%; ascent-override: 90.14%; descent-override: 22.44%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  size-adjust: 102.35%; ascent-override: 94.65%; descent-override: 23.57%; line-gap-override: 0%; }

:root {
  --font-head: 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* light neutrals */
  --bg:        #FFFFFF;   /* white — page base */
  --bg-2:      #F5F5F5;   /* light gray — alternating sections */
  --deep:      #141414;   /* near-black — topbar / header / footer / dark structure */
  --surface:   #FFFFFF;   /* cards */
  --surface-2: #F6F6F6;   /* raised / inputs */
  --line:      rgba(0,0,0,.12);
  --line-2:    rgba(0,0,0,.18);
  --head:      #141414;   /* near-black — headings + strong text */
  --body:      #3F3F3F;   /* body copy */
  --muted:     #737373;   /* meta / secondary */

  /* red — primary accent + action + brand */
  --red:        #CB2116;
  --red-bright: #CB2116;  /* links / emphasis on light */
  --red-deep:   #A81B12;
  --red-soft:   rgba(203,33,22,.10);

  /* accents (formerly green) now resolve to the brand red */
  --green:        #CB2116;  /* eyebrows / icons / marks / dots / step nums / nav hover */
  --green-bright: #CB2116;
  --green-deep:   #141414;  /* dark structure */
  --green-soft:   rgba(203,33,22,.10);
  --sage:         #CB2116;  /* brand red — accents on dark structure (no pink) */

  --gold: #E0A100;         /* review stars */

  --shell:     1440px;
  --hero-inner: 820px;     /* global hero copy width — keep wide enough to avoid orphaned words */
  /* Sticky-offset parts. Anything that pins below the sticky header should use
     --sticky-top, never a bare pixel value: the WP admin bar shifts the header
     down 32px for logged-in users, so a hardcoded offset lands BEHIND it. */
  --header-h:   75px;      /* .site-header height at desktop */
  --sticky-gap: 1.75rem;   /* breathing room below the header */
  --sticky-top: calc(var(--header-h) + var(--sticky-gap));
  --radius:    12px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 14px rgba(0,0,0,.06);
  --shadow-md: 0 18px 44px -20px rgba(0,0,0,.16);
  --shadow-lg: 0 40px 80px -34px rgba(0,0,0,.20);
  --ease:      cubic-bezier(.22,1,.36,1);

  --fs-hero:   clamp(2.4rem, 5.2vw, 4.15rem);
  --fs-h2:     clamp(1.9rem, 3.2vw, 2.85rem);
  --fs-lead:   clamp(1.05rem, 1.5vw, 1.2rem);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-head); color: var(--head); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.shell--narrow { max-width: 820px; }

/* long-form copy (legal / policy pages) */
.prose-sec { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.prose { font-size: 1.02rem; line-height: 1.75; color: var(--body); }
.prose > *:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-head); font-size: 1.28rem; font-weight: 700; color: var(--head); margin: 2.2rem 0 .6rem; }
.prose h4 { font-family: var(--font-head); font-size: 1.08rem; font-weight: 700; margin: 1.6rem 0 .5rem; }
.prose p { margin: 0 0 1.05rem; }
/* restore markers — the global reset sets ul,ol { list-style: none } */
.prose ul { margin: 0 0 1.15rem; padding-left: 1.35rem; list-style: disc; }
.prose ol { margin: 0 0 1.15rem; padding-left: 1.5rem; list-style: decimal; }
.prose li { margin: 0 0 .45rem; display: list-item; }
.prose li::marker { color: var(--red); }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--head); }
.prose .prose__updated { font-size: .92rem; color: var(--muted); font-style: italic; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--deep); color: #fff; padding: .6rem 1rem; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; line-height: 1;
  padding: .85rem 1.4rem; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), background .18s, box-shadow .18s, color .18s, border-color .18s;
  white-space: nowrap;
}
.btn span[aria-hidden] { transition: transform .18s var(--ease); }
.btn:hover span[aria-hidden] { transform: translateX(3px); }
.btn--lg { padding: 1.05rem 1.7rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--action { background: var(--red); color: #fff; box-shadow: 0 10px 26px -12px rgba(200,50,50,.5); }
.btn--action:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(200,50,50,.55); }

.btn--outline { background: transparent; color: var(--head); border-color: var(--line-2); }
.btn--outline:hover { border-color: var(--green); color: var(--green); }

.btn--ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.btn--ghost-light:hover { background: #fff; color: var(--deep); border-color: #fff; }

/* eyebrows are GREEN (the landscaping accent) everywhere on light */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); margin: 0 0 1rem;
}
/* Prefix is a star icon (masked SVG) so it inherits each context's color:
 * white on the dark hero/showcase pills, red on light-section eyebrows. */
.eyebrow::before {
  content: ""; width: 14px; height: 14px; flex: none; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.88L12 17.77 5.82 21l1.18-6.88-5-4.87 6.91-1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.88L12 17.77 5.82 21l1.18-6.88-5-4.87 6.91-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.eyebrow--center { display: flex; justify-content: center; }
.eyebrow--center::before { display: none; }
/* On a dark hero photo, thin red text fails contrast. Render the eyebrow as a
 * solid red pill with white text instead (same red-pill language as .work__tag)
 * so it stays legible over any photo and passes contrast. */
.eyebrow--onDark {
  color: #fff; background: var(--red);
  padding: .42rem .8rem; border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.55);
}
.eyebrow--onDark::before { background: #fff; opacity: .9; }

/* --------------------------------------------------------------- topbar (evergreen) */
.topbar { background: var(--deep); color: #C9C9C9; font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 1rem; }
.topbar__msg { letter-spacing: .02em; }
.topbar__msg i { color: var(--sage); margin: 0 .35rem; font-style: normal; }
.topbar__call { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-weight: 600; }
.topbar__call:hover { color: var(--sage); }
.topbar__call svg { color: var(--sage); }

/* --------------------------------------------------------------- header (light glass) */
.site-header { position: sticky; top: 0; z-index: 100; background: #000; border-bottom: 1px solid rgba(255,255,255,.08); transition: box-shadow .25s, border-color .25s, background .25s; }
.site-header.is-solid { background: #000; box-shadow: 0 10px 30px -20px rgba(0,0,0,.6); border-bottom-color: rgba(255,255,255,.1); }
.header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 1.25rem; }

.brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
.brand__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--red); color: #fff; flex: none; }
.brand__wordmark { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.28rem; color: #fff; letter-spacing: -0.02em; }
.brand__sub { font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: .28rem; }
.brand__sub i { color: var(--green); font-style: normal; }
.brand__logo { display: block; height: 30px; width: auto; aspect-ratio: 2550 / 283; flex: none; }
/* footer sits on evergreen → knock the red wordmark out to clean white */
.footer .brand__logo { height: 34px; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { font-weight: 500; font-size: .95rem; color: rgba(255,255,255,.85); position: relative; padding: .3rem 0; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--green); border-radius: 2px; transition: width .22s var(--ease); }
.nav a:hover { color: var(--green); }
.nav a:hover::after { width: 100%; }
/* active page: persistent underline + highlighted label on the current nav item */
.nav a.is-active, .nav__top--btn.is-active { color: var(--green); }
.nav a.is-active::after, .nav__item--mega.is-active .nav__top--btn::after { width: 100%; }
/* active item inside an open mega panel */
.mega__link.is-active { background: rgba(203,33,22,.10); border-radius: 12px; }
.mega__link.is-active .mega__label { color: var(--red); }
/* mobile nav active */
.m-acc__link.is-active, .mobile-nav > a.is-active { color: var(--red); font-weight: 700; }

/* --- mega menu (desktop) --------------------------------------------------
   A two-column panel: an icon+title+description link list beside a branded
   featured card. Dark to match the header, red accent, restrained motion. */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__top { display: inline-flex; align-items: center; gap: .32rem; }
/* Home nav item: house icon instead of a text label */
.nav__top--home { padding: .1rem 0; }
.nav__top--home .nav__home-ico { display: block; }
.m-nav--home { display: inline-flex; align-items: center; gap: .5rem; }
/* mega parents are <button>s (open the panel, no navigation) — match link styling */
.nav__top--btn { appearance: none; background: none; border: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 500; font-size: .95rem; color: rgba(255,255,255,.85);
  padding: .3rem 0; white-space: nowrap; position: relative; }
.nav__top--btn::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--green); border-radius: 2px; transition: width .22s var(--ease); }
.nav__top--btn:hover { color: var(--green); }
.nav__item--mega:hover .nav__top--btn::after,
.nav__top--btn[aria-expanded="true"]::after { width: 100%; }
.nav__caret { transition: transform .25s var(--ease); opacity: .75; }
.nav__item--mega:hover .nav__caret,
.nav__item--mega:focus-within .nav__caret,
.nav__top[aria-expanded="true"] .nav__caret { transform: rotate(180deg); color: var(--green); opacity: 1; }

/* Full-width panel: drops edge-to-edge below the header (anchored to the
   sticky .site-header), dark bar with a red top seam, no rounded corners.
   Content is constrained + centered to the header width via .mega__inner. */
.nav__item--mega { position: static; } /* anchor the panel to the full-width header, not the item */
.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 120;
  transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
  background: linear-gradient(180deg, #141517 0%, #0b0c0d 100%);
  border-top: 2px solid var(--red);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 34px 60px -26px rgba(0,0,0,.85);
}
/* Hover bridge: a full-width transparent strip directly above the panel so the
   cursor can cross the ~20px gap below the nav link — including diagonally —
   without the menu flickering shut. pointer-events is inherited from .mega, so
   the bridge is completely inert while the panel is closed (none) and only
   catches the mouse while it's open (auto). */
.mega::before {
  /* invisible hover bridge across the gap between the nav item and the panel.
     Slightly taller than the measured 27px gap so no 1px sliver can drop :hover. */
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 30px;
}
.nav__item--mega:hover .mega,
.nav__item--mega:focus-within .mega,
.nav__top[aria-expanded="true"] + .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s;
}
.mega__inner {
  position: relative; display: grid; grid-template-columns: 1.5fr .82fr; gap: 2.75rem;
  width: 100%; max-width: var(--shell); margin: 0 auto;
  padding: 1.75rem clamp(1.15rem, 4vw, 2.5rem) 1.9rem;
}
.mega--nofeat .mega__inner { grid-template-columns: 1fr; }

.mega__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 1.25rem; align-content: start; }
.mega--nofeat .mega__links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nav .mega__link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  padding: .68rem .8rem; border-radius: 11px; color: #fff;
  transition: background .18s var(--ease);
}
.mega__link::after { display: none !important; } /* cancel the .nav a underline */
/* Group label inside a mega panel (e.g. New Customers / Existing Customers). */
.mega__group {
  grid-column: 1 / -1; margin: .55rem .2rem .1rem; padding-top: .1rem;
  font-family: var(--font-head); font-weight: 700; font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.mega__group:first-child { margin-top: 0; }
.mega__tile {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  color: var(--red); background: rgba(203,33,22,.12);
  border: 1px solid rgba(203,33,22,.22);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.mega__text { min-width: 0; }
.mega__label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .93rem; letter-spacing: -.01em; line-height: 1.25; }
.mega__desc { display: block; font-size: .78rem; color: rgba(255,255,255,.52); margin-top: .12rem; line-height: 1.35; }
.mega__arrow { color: var(--red); opacity: 0; transform: translateX(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.nav .mega__link:hover, .nav .mega__link:focus-visible { background: rgba(255,255,255,.055); color: #fff; }
.mega__link:hover .mega__tile, .mega__link:focus-visible .mega__tile {
  background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-1px);
}
.mega__link:hover .mega__arrow, .mega__link:focus-visible .mega__arrow { opacity: 1; transform: translateX(0); }

/* featured card */
.nav .mega__feature {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  gap: .45rem; padding: 1.4rem 1.5rem; border-radius: 12px; color: #fff; isolation: isolate;
  background: linear-gradient(150deg, rgba(203,33,22,.30) 0%, rgba(16,17,18,.4) 52%, rgba(12,13,14,.72) 100%), #101112;
  border: 1px solid rgba(203,33,22,.28);
}
.mega__feature::after { display: none !important; }
.mega__feature-glow {
  position: absolute; inset: auto -30% -55% -30%; height: 150px; z-index: -1;
  background: radial-gradient(60% 100% at 50% 100%, rgba(203,33,22,.5), transparent 70%);
  filter: blur(6px);
}
.mega__feature-eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #ff6a5a;
}
.mega__feature-title { font-family: var(--font-head); font-weight: 700; font-size: 1.18rem; line-height: 1.12; letter-spacing: -.02em; }
.mega__feature-text { font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.4; }
.mega__feature-cta {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem;
  font-weight: 700; font-size: .82rem; color: #fff;
}
.mega__feature-cta .mega__arrow { opacity: 1; transform: none; color: #fff; transition: transform .2s var(--ease); }
.mega__feature:hover .mega__feature-cta .mega__arrow { transform: translateX(4px); }
.mega__feature:hover { border-color: rgba(203,33,22,.4); }

@media (prefers-reduced-motion: reduce) {
  .mega, .mega__arrow, .mega__tile, .nav__caret { transition: none !important; }
}

.header__actions { display: flex; align-items: center; gap: 1rem; }
.header__actions .btn--action { padding-left: .95rem; padding-right: .95rem; }
.phone-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .95rem; color: #fff; white-space: nowrap; }
.phone-link svg { color: var(--red); }
.phone-link:hover { color: var(--red); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }

.mobile-nav { display: none; }

/* --------------------------------------------------------------- hero (full-bleed photo) */
/* No `isolation: isolate` here: an isolate context with the bg on a negative
   z-index made Chrome skip painting the hero photo on first render (it only
   appeared after a scroll/resize repaint — the "gray/empty hero" bug). Layered
   instead with plain positive z-indexes: bg (0) < scrim (1) < content (2). */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(560px, 84vh, 880px); color: #fff; }
/* translateZ(0)/will-change force the bg onto its own paint layer so the hero
   photo renders on FIRST paint. Without it, this negative-z-index layer inside
   the hero's isolate context stays unpainted (gray) until a scroll/resize
   repaint — the "broken/empty hero" bug. Static single-image heroes have no
   day/night animation to trigger that repaint, so they were the ones stuck. */
.hero__bg { position: absolute; left: 0; right: 0; top: -8%; height: 116%; z-index: 0; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__img--night { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero__img--night { animation: heroDayNight 18s ease-in-out infinite; }
}
@keyframes heroDayNight {
  0%, 36%  { opacity: 0; }
  50%, 86% { opacity: 1; }
  100%     { opacity: 0; }
}
/* Scrim exists only to keep the overlaid copy legible — it must never crush the
   photo to a flat gray box. Darkest behind the left-aligned text column, fading
   to fully transparent by ~78% so the hero image reads on the right. Paired with
   a text-shadow on the copy for legibility where the gradient is light. */
.hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(8,10,8,.80) 0%, rgba(8,10,8,.55) 30%, rgba(8,10,8,.20) 55%, rgba(8,10,8,0) 78%),
  linear-gradient(0deg, rgba(8,10,8,.55) 0%, rgba(8,10,8,0) 42%); }
.hero__inner { position: relative; z-index: 2; max-width: var(--hero-inner); padding-block: clamp(3rem, 8vw, 5.5rem); }
/* heading-only hero (e.g. /reviews/) — shorter banner, no empty space below the H1 */
.hero--bare { min-height: clamp(340px, 44vh, 480px); }
.hero--bare .hero__title { margin-bottom: 0; }
/* short hero (e.g. /contact/) — trims height so the form below is near the fold */
.hero--short { min-height: clamp(380px, 52vh, 540px); }
.hero__title { font-size: var(--fs-hero); font-weight: 700; color: #fff; margin: 0 0 1.35rem; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.hero__title .hl { color: var(--red); }        /* accent word — brand red (matches mockup) */
.hero__title .hl--green { color: var(--red); } /* accent word — brand red (matches mockup) */
.hero__lead { font-size: var(--fs-lead); color: rgba(255,255,255,.92); max-width: none; margin-bottom: 2rem; text-wrap: balance; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.1rem; }
.hero__trust { display: flex; flex-wrap: nowrap; gap: 1.4rem; }
.hero__trust li { display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 500; color: #fff; white-space: nowrap; }
.check { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--red); flex: none; position: relative; }
.check::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(0, -1px); }
/* hero checks sit on the photo → light */
.hero .check { background: rgba(255,255,255,.18); }
.hero .check::after { border-color: #fff; }

/* --------------------------------------------------------------- trust strip (white card floating over the hero) */
.strip { position: relative; z-index: 30; background: transparent; }
.strip__card { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: clamp(1rem, 2.5vw, 2rem); margin-top: -2.5rem; padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.strip__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
.strip__ico { display: grid; place-items: center; width: 40px; height: 40px; color: var(--red); }
.strip__ico svg { width: 26px; height: 26px; }
.strip__label { font-family: var(--font-head); font-weight: 700; font-size: .98rem; color: var(--head); line-height: 1.2; letter-spacing: -0.01em; }

/* --------------------------------------------------------------- section head */
.section-head { max-width: 62ch; margin: 0 auto clamp(2.2rem, 4vw, 3.2rem); text-align: center; }
.section-title { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 1rem; }
.section-sub { font-size: var(--fs-lead); color: var(--body); margin: 0 auto; }

section.services { padding: clamp(3.5rem, 7vw, 6rem) 0; }

/* --------------------------------------------------------------- service cards */
/* Services intro spans wider than the default 62ch measure to match the full-width card row. */
.services .section-head { max-width: 1080px; }
.services .section-sub { max-width: 68ch; margin-inline: auto; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--1 { grid-template-columns: minmax(0, 400px); justify-content: center; }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(203,33,22,.35); }
.card__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__img img { transform: scale(1.05); }
.card__body { padding: 1.5rem 1.5rem 1.7rem; }
.card__body h3 { font-size: 1.3rem; margin-bottom: .55rem; }
.card__body p { font-size: .95rem; margin-bottom: 1rem; color: var(--body); }
.card__more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; color: var(--red); }
.card__more i { transition: transform .18s var(--ease); font-style: normal; }
.card:hover .card__more i { transform: translateX(4px); }

/* --------------------------------------------------------------- split sections */
.split { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.split--tint { background: var(--bg-2); }
.split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__title { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 1.1rem; max-width: 16ch; }
.split__text > p { margin-bottom: 1.5rem; max-width: 52ch; color: var(--body); }
.split__text .btn { margin-top: .5rem; }

.split__media { position: relative; }
.photo-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3.1; border: 1px solid var(--line); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
.pill { position: absolute; bottom: -16px; left: 24px; background: var(--surface); color: var(--head); font-size: .8rem; font-weight: 600; padding: .6rem 1.05rem; border-radius: 999px; box-shadow: var(--shadow-md); border: 1px solid var(--line-2); display: inline-flex; align-items: center; gap: .5rem; }
.pill--green::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.split--reverse .pill { left: auto; right: 24px; }

.checks { display: grid; gap: .7rem; margin-bottom: 2rem; }
.checks li { display: flex; align-items: flex-start; gap: .7rem; font-weight: 500; color: var(--head); font-size: .98rem; }
.checks li::before {
  content: ""; flex: none; margin-top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
  background-size: 13px; background-repeat: no-repeat; background-position: center;
}

/* --------------------------------------------------------------- full-bleed image showcase (legacy; unused now that lighting is a split) */
.showcase { position: relative; isolation: isolate; overflow: hidden; color: #fff; display: flex; align-items: center; min-height: clamp(520px, 62vh, 720px); padding-block: clamp(3rem, 6vw, 4rem); }
.showcase__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.showcase__scrim { position: absolute; inset: 0; z-index: -1; }
.showcase__content { max-width: 560px; }
.showcase__title { font-size: var(--fs-h2); font-weight: 700; color: #fff; margin: 0 0 1.1rem; }
.showcase__content > p { color: rgba(255,255,255,.86); margin-bottom: 1.5rem; max-width: 48ch; }
.showcase .checks { margin-bottom: 2rem; }
.showcase .checks li { color: #fff; }
.showcase__cred { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.75); }
.showcase__cred::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.showcase--night { background: #0d0d0d; }
.showcase--night .showcase__scrim { background: linear-gradient(90deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.74) 32%, rgba(8,8,8,.42) 56%, rgba(8,8,8,.12) 82%, transparent 100%); }

/* --------------------------------------------------------------- process */
.process { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--bg-2); border-block: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 2.2rem); }
.step { text-align: center; padding: 0 .5rem; }
.step__num { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 1.1rem; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; box-shadow: 0 12px 26px -12px rgba(203,33,22,.5); }
.step h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.step p { font-size: .92rem; color: var(--body); margin: 0; }

/* --------------------------------------------------------------- reviews */
.reviews { padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: center; }
.review-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); margin-bottom: 2.5rem; text-align: left; }
.rcard { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.7rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.rcard__stars { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); margin-bottom: 1rem; }
.rcard__stars svg { flex: none; }
.rcard p { color: var(--head); font-size: 1rem; line-height: 1.6; margin-bottom: 1.3rem; flex: 1; }
.rcard footer { display: flex; flex-direction: column; gap: .15rem; }
.rcard cite { font-style: normal; font-weight: 700; color: var(--head); }
.rcard footer span { font-size: .85rem; color: var(--muted); }
.rcard footer span i { color: var(--green); font-style: normal; margin: 0 .3rem; }
.reviews__more { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--head); margin: .5rem 0 1.4rem; }
.reviews__link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--red); }
.reviews__link:hover { color: var(--red-deep); }

/* --------------------------------------------------------------- service area */
.areas { position: relative; overflow: hidden; padding: clamp(3.5rem, 7vw, 6rem) 0; background: #F4F5F6; border-top: 1px solid var(--line); }
.areas::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .16; background: url("../img/topo.svg") center / cover no-repeat; -webkit-mask-image: radial-gradient(130% 120% at 50% 40%, #000 45%, transparent 100%); mask-image: radial-gradient(130% 120% at 50% 40%, #000 45%, transparent 100%); }
.areas > .shell { position: relative; z-index: 1; }
.areas__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.areas__text > p { margin-bottom: 1.8rem; max-width: 50ch; color: var(--body); }

.areas__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(1.6rem, 3vw, 2.3rem); }
.areas__card-head { display: flex; align-items: center; gap: .9rem; padding-bottom: 1.3rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.areas__pin { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--red); color: #fff; flex: none; }
.areas__card-head b { display: block; font-family: var(--font-head); font-size: 1.15rem; color: var(--head); font-weight: 700; }
.areas__card-head span { font-size: .85rem; color: var(--muted); }
.areas__card-label { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.towns { display: flex; flex-wrap: wrap; gap: .5rem; }
.towns li { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .8rem; font-weight: 600; color: var(--head); font-size: .9rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; transition: border-color .18s var(--ease), color .18s var(--ease); }
.towns li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }
/* Linked town chips: whole pill is clickable, and only these show the red hover cue */
.towns li:has(a) { position: relative; cursor: pointer; }
.towns li a { color: inherit; text-decoration: none; }
.towns li a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.towns li:has(a):hover { border-color: var(--red); color: var(--red); }
.areas__note { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--body); }
.areas__note a { color: var(--red); font-weight: 600; }
.areas__note a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- CTA + form (solid red band — matches mockup) */
/* `clip` clips identically to `hidden` but does NOT create a scroll container,
   so the sticky right column below keeps working. `hidden` first as fallback. */
.cta { position: relative; overflow: hidden; overflow: clip; padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: #141414; color: #fff; }
/* red vignette for depth behind the grid */
.cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(90% 120% at 50% -10%, rgba(203,33,22,.22), transparent 62%),
  radial-gradient(70% 120% at 100% 110%, rgba(203,33,22,.14), transparent 60%),
  radial-gradient(60% 100% at 0% 100%, rgba(0,0,0,.45), transparent 60%); }
/* grid-trail: a faint red grid whose cells flash red under the cursor and fade
   out behind it, leaving a trail. site.js builds the cells (fine pointer +
   motion only); no JS / reduced motion = plain dark band with the faint grid. */
.cta__trail { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  background-image:
    linear-gradient(rgba(203,33,22,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203,33,22,.16) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center; }
.cta__cell { position: absolute; border-radius: 2px; background-color: rgba(203,33,22,0); }
.cta__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Forms always live in the LEFT column. DOM order stays text→form (so stacked
   mobile leads with the heading for context); order:-1 pulls the form left on
   the 2-col desktop layout. The mobile block below resets it. */
.cta__grid .cta__form-card { order: -1; }
/* The form column is far taller than the text column, so on the 2-col desktop
   layout the text sticks below the sticky header and stays in view while the
   form scrolls. align-self:start gives it travel room (the grid centers by
   default); the stacked breakpoint never sticks. */
/* Logged-in admins get the 32px WP admin bar, which pushes the sticky header down
   by the same amount, so the pinned column must clear 32px more for admins than
   for visitors. Only matters >=901px, where the admin bar is 32px (it grows to
   46px on narrow screens, below the breakpoint).
   NOTE: --sticky-top is RE-DECLARED here rather than composed from a --wp-bar-h
   part, because a var() nested inside a custom property resolves in the scope
   where that property is declared (:root) — setting a part on `body` is ignored. */
body.admin-bar { --sticky-top: calc(var(--header-h) + var(--sticky-gap) + 32px); }
@media (min-width: 901px) {
  .cta__grid .cta__text { position: sticky; top: var(--sticky-top); align-self: start; }
}
.cta .eyebrow { color: rgba(255,255,255,.92); }
.cta .eyebrow::before { background: rgba(255,255,255,.92); }
.cta .section-title { color: #fff; }
.cta__text > p { margin-bottom: 1.6rem; max-width: 46ch; color: rgba(255,255,255,.92); }
/* checks on the red band → white bubble + red tick, white label */
.cta .checks li { color: #fff; }
.cta .checks li::before { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23CB2116' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.cta__call { font-size: 1rem; color: #fff; }
.cta__call a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cta__call a:hover { text-decoration: none; }

/* CTA light variant — plain white background, no grid trail (contact form) */
.cta--light { background: #fff; color: var(--body); }
.cta--light::before { display: none; }
.cta--light .eyebrow { color: var(--green); }
.cta--light .eyebrow::before { background: var(--green); }
.cta--light .section-title { color: var(--head); }
.cta--light .cta__text > p:not(.eyebrow) { color: var(--body); }
.cta--light .checks li { color: var(--head); }
.cta--light .checks li::before {
  background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.cta--light .cta__call { color: var(--body); }
.cta--light .cta__call a { color: var(--red); }

/* CTA band variant — centered, buttons, no form (home) */
.cta--band { text-align: center; }
.cta__band { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.cta--band .eyebrow { justify-content: center; }
.cta--band .section-title { color: #fff; margin: 0 auto 1rem;
  font-size: clamp(1.55rem, 2.3vw, 2.1rem); line-height: 1.15; max-width: 32ch; text-wrap: balance; }
.cta__band-lead { color: rgba(255,255,255,.92); font-size: var(--fs-lead); max-width: 56ch; margin: 0 auto 2rem; }
.cta__band-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.btn--onRed { background: #fff; color: var(--red); box-shadow: 0 12px 26px -12px rgba(0,0,0,.35); }
.btn--onRed:hover { background: #fff; color: var(--red-deep); transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(0,0,0,.4); }
.btn--ghost-onRed { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost-onRed:hover { background: #fff; color: var(--red); border-color: #fff; }

.cta__form-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 3vw, 2.4rem); overflow: hidden; }
.cta__form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--red); }
.cta__form-head { margin-bottom: 1.35rem; }
.cta__form-title { font-family: var(--font-head, inherit); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.5rem); color: var(--head); margin: 0 0 .3rem; line-height: 1.2; }
.cta__form-sub { font-size: .92rem; color: var(--muted); margin: 0; }
.estimate-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--half { grid-column: span 1; }
.field:not(.field--half) { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: var(--head); letter-spacing: .01em; }
.field label span { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { font: inherit; font-size: .95rem; color: var(--head); background: var(--surface-2); border: 1.5px solid var(--line-2); border-radius: 11px; padding: .8rem .95rem; min-height: 48px; width: 100%; transition: border-color .18s, background .18s, box-shadow .18s; }
.field textarea { resize: vertical; min-height: 76px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(203,33,22,.18); }
/* service picker — multi-select checkbox cards */
.field__label { font-size: .82rem; font-weight: 600; color: var(--head); letter-spacing: .01em; }
.field__label span { color: var(--muted); font-weight: 400; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .15rem; }
.check-option { position: relative; display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem; min-height: 48px; border: 1.5px solid var(--line-2); border-radius: 11px; background: var(--surface-2); cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; }
.check-option:hover { border-color: var(--red); }
.check-option input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; opacity: 0; pointer-events: none; }
.check-option__box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.check-option__box::after { content: ""; width: 12px; height: 12px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s; }
.check-option__label { font-size: .92rem; font-weight: 500; color: var(--head); line-height: 1.25; }
.check-option input:checked ~ .check-option__box { background: var(--red); border-color: var(--red); }
.check-option input:checked ~ .check-option__box::after { opacity: 1; transform: scale(1); }
.check-option:has(input:checked) { border-color: var(--red); background: rgba(203,33,22,.06); box-shadow: inset 0 0 0 1px var(--red); }
.check-option input:focus-visible ~ .check-option__box { outline: 2px solid var(--red); outline-offset: 2px; }
.estimate-form .btn { grid-column: 1 / -1; margin-top: .3rem; }
/* The engine (aq-core) injects the admin-only "Fill with test data" button as the
   form's FIRST child. It belongs under the submit button, not above the first
   field — reorder it here (the form is a grid, so `order` moves it without
   touching engine markup). !important beats the engine's inline margins. */
.estimate-form > [data-aq-testfill] { order: 1; grid-column: 1 / -1; margin: .6rem 0 0 !important; }
.estimate-form > .estimate__fineprint,
.estimate-form > [data-estimate-success] { order: 2; }
/* split property-address block: street full-width, then city/state/zip 3-up */
.field--address .addr-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem .9rem; margin-top: .15rem; }
.addr-field { display: flex; flex-direction: column; gap: .4rem; }
.addr-field--street { grid-column: 1 / -1; }
.addr-field__label { font-size: .78rem; font-weight: 600; color: var(--head); letter-spacing: .01em; }
/* native select gets the same shell as inputs + a custom caret */
.field select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 16px; padding-right: 2.6rem; }
.field select:invalid { color: var(--muted); }
/* consent checkbox: reuse the check-option visual, top-aligned multi-line */
.field--consent { grid-column: 1 / -1; }
.check-option--consent { align-items: flex-start; min-height: 0; }
.check-option--consent .check-option__box { margin-top: 2px; }
.check-option--consent .check-option__label { font-weight: 400; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.estimate__fineprint { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); text-align: center; margin: 0; }
.estimate__success { grid-column: 1 / -1; background: var(--red); color: #fff; font-weight: 600; padding: 1rem 1.2rem; border-radius: 12px; text-align: center; margin: 0; }

/* ============================================================================
   Reference contact layout (.cta--ref) — pixel-matched to the GHL request-estimate
   page: 8/4 columns, white bordered form card with a paper-plane header, a grouped
   "Property Location" panel, radio/checkbox PILL groups, and a 3-card right sidebar
   (dark help card + amber policies + scrollable town chips). Scoped so the shared
   estimate form on every OTHER page is untouched.
   ========================================================================== */
.req { color: var(--red); font-weight: 700; }
.cta--ref .cta__grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.cta--ref .cta__grid .cta__form-card { order: -1; } /* form left, aside right (stays left-first when stacked) */

/* form card */
.cta--ref .cta__form-card { background: #fff; border: 2px solid rgba(203,33,22,.2); border-radius: 8px; padding: clamp(1.4rem, 3vw, 2.5rem); box-shadow: none; }
.cta--ref .cta__form-card::before { display: none; }
.cta__form-head--ref { border-bottom: 1px solid #e5e5e5; padding-bottom: 16px; margin-bottom: 24px; }
.cta--ref .cta__form-title { display: flex; align-items: center; gap: 10px; font-size: 24px; color: #111; margin: 0; }
.cta__form-ico { color: var(--red); display: inline-flex; }
.cta--ref .cta__form-sub { font-size: 14px; color: #737373; margin: .35rem 0 0; }

/* fields */
.cta--ref .estimate-form { gap: 24px; }
.cta--ref .field label, .cta--ref .field__label, .cta--ref .addr-field__label { font-size: 14px; font-weight: 700; color: #111; }
.cta--ref .field input, .cta--ref .field select, .cta--ref .field textarea { border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-size: 14px; min-height: 48px; padding: 8px 12px; }
.cta--ref .field textarea { min-height: 138px; }
/* grouped Property Location panel */
.cta--ref .field--address { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; gap: 1rem; }
.cta--ref .field--address > .field__label { font-size: 16px; }
.cta--ref .addr-field__label { font-weight: 600; }

/* radio pill groups (How did you hear / Timeframe) + checkbox services */
.cta--ref .field--pillgroup { gap: .4rem; }
.pill-grid { display: grid; gap: 7px; margin-top: .1rem; }
.pill-grid--2 { grid-template-columns: 1fr 1fr; }
.pill-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.pill-option { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; cursor: pointer; font-size: 14.5px; color: #111; transition: border-color .15s, background .15s; }
.pill-option:hover { border-color: var(--red); }
.pill-option input { appearance: auto; -webkit-appearance: auto; accent-color: var(--red); width: 16px; height: 16px; min-height: 0; flex: none; margin: 0; }
.pill-option__dot { display: none; }
.pill-option:has(input:checked) { border-color: var(--red); background: rgba(203,33,22,.06); }
.cta--ref .check-grid { gap: 12px; }
.cta--ref .check-option { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; }
.cta--ref .check-option__label { font-size: 15px; }

/* submit */
.cta--ref .estimate-form .btn { min-height: 56px; border-radius: 6px; font-size: 20px; font-weight: 700; margin-top: 8px; }

/* ---- right sidebar cards ---- */
.cta__aside { display: flex; flex-direction: column; gap: 32px; }
.side-card { border-radius: 8px; padding: 24px; }
.side-card__title { font-family: var(--font-head, inherit); font-weight: 700; margin: 0; }
.side-card--help { background: #0b0b0b; color: #fff; }
.side-card--help .side-card__title { font-size: 20px; color: #fff; }
.side-card--help .side-card__text { font-size: 14px; color: #d1d5db; margin: .55rem 0 1.1rem; line-height: 1.5; }
.side-phone { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; background: var(--red); color: #fff; border-radius: 12px; font-size: 20px; font-weight: 700; text-decoration: none; transition: background .18s, transform .18s; }
.side-phone:hover { background: var(--red-deep); transform: translateY(-1px); }
.side-addr { display: flex; gap: 10px; align-items: flex-start; margin-top: 1.1rem; }
.side-addr__pin { color: var(--red); flex: none; margin-top: 1px; }
.side-addr__lines { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; }
.side-addr__lines strong { color: #fff; font-weight: 700; }
.side-addr__lines span { color: #9ca3af; }
.side-card--policies { background: rgba(255,251,235,.6); border: 1px solid #fde68a; }
.side-card__title--warn { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #92400e; }
.side-card__title--warn::before { content: ""; width: 18px; height: 18px; flex: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.side-policies { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.side-policies li { position: relative; padding-left: 16px; font-size: 14px; color: #451a03; line-height: 1.5; }
.side-policies li::before { content: "•"; position: absolute; left: 0; color: #b45309; font-weight: 700; }
.side-card--towns { background: #fff; border: 1px solid #e5e7eb; }
.side-card--towns .side-card__title { font-size: 18px; color: #111; }
.side-card__sub { font-size: 14px; color: var(--muted); margin: .35rem 0 0; }
.side-towns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .8rem; }
.side-town { font-size: 12px; padding: 4px 10px; background: #f3f4f6; color: #374151; border-radius: 6px; white-space: nowrap; }
@media (max-width: 900px) {
  .cta--ref .cta__grid { grid-template-columns: 1fr; gap: 2rem; }
  .pill-grid--2, .pill-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cta--ref .field--address { padding: 16px; }
  .pill-grid--2, .pill-grid--3 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- customer center (tabbed) */
.cc { padding: clamp(2.5rem, 6vw, 5rem) 0; background: var(--bg-2); }
.cc__title { text-align: center; }
.cc__intro { max-width: 62ch; margin: .5rem auto 0; text-align: center; color: var(--body); font-size: var(--fs-lead); }
.cc__tabs { max-width: 1140px; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; }
.cc__tablist { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.cc__tab {
  font: inherit; font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  color: var(--head); background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: 999px; padding: .7rem 1.45rem; cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.cc__tab:hover { border-color: var(--red); color: var(--red); }
.cc__tab.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.cc__tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cc__panel { margin-top: 1.5rem; }
.cc__panel[hidden] { display: none; }
.cc__panel-inner {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: clamp(1.5rem, 3.5vw, 2.6rem);
}
.cc__panel-title { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; margin: 0 0 .8rem; color: var(--head); }
.cc__notice { color: var(--body); font-size: .96rem; line-height: 1.62; margin-bottom: 1.4rem; }
.cc__notice p { margin: 0 0 .7rem; }
.cc__notice p:last-child { margin-bottom: 0; }
.cc__notice strong { color: var(--head); }
.cc__embed { width: 100%; }
.cc__embed iframe { width: 100% !important; min-height: 900px; border: 0; display: block; }
.cc__panel-inner .estimate-form { margin: 0; }
/* no-JS: reveal every panel stacked so all content stays reachable */
@media (scripting: none) {
  .cc__panel[hidden] { display: block; }
  .cc__panel + .cc__panel { margin-top: 1.5rem; }
}

/* --------------------------------------------------------------- footer (evergreen) */
.footer { background: #111; color: #B5B5B5; padding: clamp(3rem, 5vw, 4.5rem) 0 0; border-top: 3px solid var(--red); }
/* Brand + the three link columns in one balanced band. Contact is its own full-width band below. */
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); padding-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.footer .brand__name { color: #fff; }
.footer .brand__mark { background: rgba(255,255,255,.12); color: #fff; }
.footer .brand__sub { color: rgba(255,255,255,.6); }
.footer .brand__sub i { color: var(--sage); }
.footer__brand > p { margin: 1.1rem 0 1.3rem; font-size: .92rem; max-width: 34ch; color: #B5B5B5; }
.footer__social { display: flex; gap: .7rem; }
.footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.08); color: #EDEDED; transition: background .2s, color .2s; }
.footer__social a:hover { background: var(--red); color: #fff; }
.footer__col h3 { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 1.1rem; letter-spacing: .02em; }
.footer__col a { display: block; font-size: .92rem; color: #B5B5B5; padding: .32rem 0; transition: color .18s; }
.footer__col a:hover { color: var(--sage); }
.footer__contact address { font-style: normal; display: flex; flex-direction: column; gap: .8rem; font-size: .92rem; color: #B5B5B5; }
.fc-row { display: flex; align-items: flex-start; gap: .65rem; padding: 0; }
.fc-ico { flex: none; display: inline-flex; color: var(--red); margin-top: 1px; }
.fc-ico svg { width: 17px; height: 17px; display: block; }
a.fc-row:hover { color: #fff; }
a.fc-row:hover .fc-ico { color: var(--red); }
/* Full-width contact band: two offices on the left, call / hours / estimate on the right */
.footer__contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 2.5rem; padding-block: clamp(1.4rem, 2.6vw, 1.9rem); border-top: 1px solid rgba(255,255,255,.12); }
.fc-locs { display: flex; flex-wrap: wrap; gap: 1.2rem 2.75rem; }
.fc-loc { display: flex; align-items: flex-start; gap: .7rem; }
.fc-loc .fc-ico { margin-top: 2px; }
.fc-loc-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.fc-loc-body b { color: #fff; font-size: .92rem; font-weight: 700; line-height: 1.25; }
.fc-loc-body > span { font-size: .86rem; color: #B5B5B5; line-height: 1.4; }
.fc-loc-body em { font-style: normal; font-size: .78rem; color: #8a9099; }
a.fc-loc:hover .fc-loc-body b { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.fc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.75rem; }
.fc-phone { display: inline-flex; align-items: center; gap: .55rem; }
.fc-phone-num { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: #fff; letter-spacing: -0.01em; }
.fc-phone:hover .fc-phone-num { color: var(--red); }
.fc-hours { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: #B5B5B5; }
.fc-cta { display: inline-flex; align-items: center; gap: .5rem; background: var(--red); color: #fff; font-weight: 700; font-size: .9rem; padding: .72rem 1.35rem; border-radius: 10px; transition: background .18s var(--ease); }
.fc-cta:hover { background: var(--red-deep); color: #fff; }
.footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.4rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .82rem; }
.footer__bar p { margin: 0; }
.footer__copyright a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.35); transition: color .18s; }
.footer__copyright a:hover { color: #fff; text-decoration-color: currentColor; }
.footer__legal { display: flex; gap: 1.3rem; }
.footer__legal a:hover { color: var(--sage); }

/* --------------------------------------------------------------- sticky mobile bar */
/* Retired 2026-08-05 (client): never displayed — the rule that switched it on at
   <=900px is gone, so it stays display:none at every width. Styles kept so the bar
   can be brought back by restoring that one rule. */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: .6rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .3s var(--ease); box-shadow: 0 -8px 24px -14px rgba(0,0,0,.3); }
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-weight: 600; font-size: .95rem; padding: .85rem; border-radius: 12px; }
.mobile-bar__call { border: 1.5px solid var(--line-2); color: var(--head); }
.mobile-bar__call svg { color: var(--green); }
.mobile-bar__cta { background: var(--red); color: #fff; }

/* --------------------------------------------------------------- reveals (JS on only) */
.js-ready [data-reveal],
.js-ready [data-reveal-stagger] > * { opacity: 0; transform: translateY(22px); will-change: transform, opacity; }

/* --------------------------------------------------------------- why choose */
.why { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--bg-2); border-block: 1px solid var(--line); }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.why--reverse .why__media { order: 2; }
.why__media { position: relative; }
.why__media .photo-card { aspect-ratio: 4 / 3.1; }
.why__stat { position: absolute; bottom: 18px; left: 18px; background: var(--red); color: #fff; border-radius: var(--radius-sm); padding: .9rem 1.25rem; box-shadow: var(--shadow-md); text-align: center; }
.why__stat b { display: block; font-family: var(--font-head); font-size: 2rem; font-weight: 700; line-height: 1; }
.why__stat span { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .05em; margin-top: .3rem; opacity: .95; }
.why--reverse .why__stat { left: auto; right: 18px; }
.why__title { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 1.1rem; max-width: 18ch; }
.why__text > p { margin-bottom: 1.6rem; max-width: 52ch; color: var(--body); }
.why .checks { grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; margin-bottom: 2rem; }
.why__text .btn { margin-top: .3rem; }

/* --------------------------------------------------------------- recent work gallery */
.work { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--bg-2); }
.work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.4rem); }
.work__item { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); border: 1px solid var(--line); background: var(--surface-2); }
.work__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.work__item:hover img { transform: scale(1.06); }
.work__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--sage); background: linear-gradient(135deg, var(--bg-2), var(--surface-2)); }
.work__ph svg { width: 46px; height: 46px; opacity: .85; }
.work__cap { position: absolute; inset: auto 0 0 0; display: block; padding: 1.6rem 1.15rem 1rem; background: linear-gradient(0deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.35) 60%, transparent 100%); color: #fff; }
.work__tag { display: inline-block; align-self: flex-start; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--red); padding: .3rem .6rem; border-radius: 999px; margin-bottom: .55rem; box-shadow: 0 4px 12px -4px rgba(0,0,0,.5); }
.work__cap b { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; display: block; }
.work__view { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .82rem; font-weight: 600; color: #fff; }
.work__view span[aria-hidden] { transition: transform .18s var(--ease); }
.work__item:hover .work__view span[aria-hidden] { transform: translateX(3px); }
.work__cta { display: flex; justify-content: center; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }

/* --------------------------------------------------------------- portfolio (full lightbox gallery) */
.portfolio { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem); background: var(--bg); }
.portfolio .section-head { max-width: 1080px; }
.portfolio .section-sub { max-width: 68ch; }
.portfolio__badge { margin-top: 1.4rem; }
.portfolio__badge img { width: clamp(120px, 14vw, 170px); height: auto; display: inline-block; }
/* Uniform square grid keeps the full portfolio easy to scan. */
.portfolio__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.4vw, 1.15rem); }
.portfolio__item {
  display: block; width: 100%; margin: 0;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2); cursor: zoom-in; position: relative;
  box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-appearance: none; appearance: none; font: inherit; color: inherit;
}
.portfolio__item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.portfolio__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.portfolio__item:hover img { transform: scale(1.05); }
.portfolio__item:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.portfolio__zoom {
  position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; display: grid; place-items: center;
  color: #fff; background: rgba(20,20,20,.55); border-radius: 50%; opacity: 0; transform: scale(.85);
  transition: opacity .25s var(--ease), transform .25s var(--ease); backdrop-filter: blur(3px);
}
.portfolio__item:hover .portfolio__zoom,
.portfolio__item:focus-visible .portfolio__zoom { opacity: 1; transform: scale(1); }
.portfolio__item.is-hidden { display: none; }
.portfolio__more { display: flex; justify-content: center; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.portfolio__more-count { opacity: .85; font-weight: 600; }

/* Lightbox — full-viewport photo viewer */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.lightbox.is-open { display: flex; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(8,8,8,.92); cursor: zoom-out; }
.lightbox__stage { position: relative; z-index: 1; margin: 0; max-width: min(1200px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.lightbox__img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); background: #151515; }
.lightbox__count { color: rgba(255,255,255,.75); font-size: .85rem; font-weight: 600; letter-spacing: .04em; }
.lightbox__btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.12); transition: background .2s var(--ease), transform .2s var(--ease); }
.lightbox__btn:hover { background: var(--red); transform: scale(1.06); }
.lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lightbox__close { top: clamp(.8rem, 2vw, 1.4rem); right: clamp(.8rem, 2vw, 1.4rem); }
.lightbox__prev { left: clamp(.5rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(.5rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
body.lightbox-open { overflow: hidden; }

/* --------------------------------------------------------------- videos (YouTube embeds) */
.videos { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--bg-2); border-block: 1px solid var(--line); }
.videos__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); }
.videos__grid--single { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
.video-card { margin: 0; }
.video-card__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: #0a0a0a; border: 1px solid var(--line); }
.video-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-card__cap { margin-top: .85rem; font-weight: 600; color: var(--head); font-size: .98rem; text-align: center; }

/* --------------------------------------------------------------- specials (coupon cards) */
.specials { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--bg); }
.specials__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.coupon {
  position: relative; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md);
}
.coupon__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.coupon__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coupon__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--red); color: #fff; padding: 1rem 1.4rem;
}
.coupon__tag { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.coupon__badge {
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.16); color: #fff; padding: .34rem .7rem; border-radius: 999px; white-space: nowrap;
}
/* perforated divider between the offer and the fine print */
.coupon__body { padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2rem); flex: 1; }
.coupon__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; color: var(--head); margin: 0; }
.coupon__desc { margin: .9rem 0 0; color: var(--body); font-size: 1.02rem; }
.coupon__cta { margin-top: 1.5rem; }
.coupon__terms {
  position: relative; margin: 0; padding: 1rem 1.4rem 1.2rem; font-size: .78rem; color: var(--muted); line-height: 1.5;
  border-top: 2px dashed var(--line-2);
}
/* ticket notches sitting on the perforation line */
.coupon__terms::before, .coupon__terms::after {
  content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
}
.coupon__terms::before { left: -11px; }
.coupon__terms::after { right: -11px; }

@media (max-width: 760px) {
  .videos__grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .specials__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* --------------------------------------------------------------- landscape lighting (dark) */
.lighting { background: #0a0a0a; color: #fff; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.lighting__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lighting__intro { max-width: 78ch; }
.lighting__title { font-size: var(--fs-h2); color: #fff; margin: 0 0 1rem; text-wrap: pretty; }
.lighting__intro p { color: rgba(255,255,255,.8); margin: 0; max-width: 56ch; }
.lighting__head .btn { flex: none; }
.lighting__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1rem, 2vw, 1.4rem); }
.lighting__feature { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 360px; background: #151515; border: 1px solid rgba(255,255,255,.08); }
.lighting__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lighting__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--sage); background: linear-gradient(135deg, #151515, #1f1f1f); }
.lighting__cap { position: absolute; inset: auto 0 0 0; padding: 1.7rem 1.5rem 1.4rem; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 60%, transparent 100%); }
.lighting__cap b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; }
.lighting__cap span { display: block; margin-top: .2rem; color: rgba(255,255,255,.72); font-size: .92rem; }
.lighting__cards { display: grid; grid-auto-rows: 1fr; gap: clamp(1rem, 2vw, 1.4rem); }
.lighting__card { background: #151515; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.lighting__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--red); color: #fff; margin-bottom: .9rem; }
.lighting__card b { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; margin-bottom: .35rem; }
.lighting__card p { color: rgba(255,255,255,.72); font-size: .92rem; margin: 0; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 2.25rem 1.5rem; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .nav, .phone-link { display: none; }
  .nav-toggle { display: flex; }
  .portfolio__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .mobile-nav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 0 clamp(1.15rem, 4vw, 2.5rem); max-height: 0; overflow: hidden; transition: max-height .3s var(--ease), padding .3s var(--ease); }
  .mobile-nav.is-open { max-height: min(82vh, 760px); overflow-y: auto; padding: 1rem clamp(1.15rem, 4vw, 2.5rem) 1.5rem; }
  .mobile-nav a { display: block; padding: .8rem 0; font-weight: 500; color: var(--head); border-bottom: 1px solid var(--line); }
  .mobile-nav a.btn { border: 0; color: #fff; margin-top: 1rem; padding: 1rem; }
  .mobile-nav__call { text-align: center; color: var(--green) !important; font-weight: 700 !important; border-bottom: 0 !important; }

  /* mobile accordion (items with a mega menu) */
  .m-acc { border-bottom: 1px solid var(--line); }
  .m-acc__btn {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: .8rem 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 500; color: var(--head); text-align: left;
  }
  .m-acc__btn .nav__caret { transition: transform .22s var(--ease); color: var(--green); }
  .m-acc__btn[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
  .m-acc__panel { overflow: hidden; max-height: 0; transition: max-height .28s var(--ease); }
  .m-acc__panel a { padding: .62rem 0; font-size: .95rem; color: rgba(20,20,20,.82); }
  .m-acc__panel a:last-child { border-bottom: 0; }
  .m-acc__all { font-weight: 700 !important; color: var(--green) !important; }
  .m-acc__group { padding: .7rem 0 .1rem !important; margin: 0; font-family: var(--font-head);
    font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); border: 0; }
  .m-acc__link { display: flex; align-items: center; gap: .7rem; }
  .m-acc__ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none;
    border-radius: 8px; color: var(--green); background: var(--red-soft); border: 1px solid rgba(203,33,22,.2); }
  .m-acc__ico .mega__ico { width: 17px; height: 17px; }
}

@media (max-width: 900px) {
  .header__actions .btn--action { display: none; }

  .hero { min-height: clamp(500px, 82vh, 720px); }
  .hero--bare { min-height: clamp(300px, 40vh, 400px); }
  .hero--short { min-height: clamp(320px, 48vh, 460px); }
  .hero__scrim { background: linear-gradient(180deg, rgba(8,10,8,.68) 0%, rgba(8,10,8,.40) 45%, rgba(8,10,8,.86) 100%); }
  .hero__trust { flex-wrap: wrap; gap: .55rem 1.25rem; }
  .brand__logo { height: 26px; }

  .strip__card { grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1rem; }
  .cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .split__grid, .areas__grid, .cta__grid, .why__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .cta__grid .cta__form-card { order: 0; } /* stacked: heading first, form after */
  .split--reverse .split__media, .why--reverse .why__media { order: -1; }
  .split__title, .why__title { max-width: none; }
  .why .checks { grid-template-columns: 1fr 1fr; }
  .work__grid { grid-template-columns: 1fr 1fr; }

  .showcase { min-height: auto; padding-block: clamp(3rem, 9vw, 4.5rem); }
  .showcase__content { max-width: none; }
  .showcase--night .showcase__scrim { background: linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.92) 100%); }

  .steps { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .review-cards { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }

  .lighting__head { flex-direction: column; align-items: flex-start; }
  .lighting__grid { grid-template-columns: 1fr; }
  .lighting__feature { min-height: 300px; }

  /* Sticky mobile call/estimate bar retired at the client's request — with the bar
     gone, the 62px of body padding that reserved space for it goes too. */

  .topbar__msg { font-size: .76rem; }
}

@media (max-width: 560px) {
  .strip__card { grid-template-columns: repeat(2, 1fr); margin-top: -1.5rem; }
  .steps { grid-template-columns: 1fr; }
  .towns { grid-template-columns: repeat(2, 1fr); }
  .why .checks { grid-template-columns: 1fr; }
  .work__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .portfolio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .estimate-form { grid-template-columns: 1fr; }
  .field--half { grid-column: 1 / -1; }
  .check-grid { grid-template-columns: 1fr; }
  .field--address .addr-grid { grid-template-columns: 1fr 1fr; }
  .addr-field--street { grid-column: 1 / -1; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  /* Footer keeps two columns on phones (was fully stacked): the two link lists sit
     side by side, while the brand block and the contact block — whose address needs
     the width to stay on one line — span the full row. */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.9rem 1.4rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__contact { flex-direction: column; align-items: flex-start; gap: 1.3rem; }
  .fc-locs { flex-direction: column; gap: 1rem; }
  .fc-meta { width: 100%; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
  .topbar__msg { display: none; }
  .topbar__inner { justify-content: center; }
}

/* Client hard rule: never surface the engine skip-to-content link */
.skip-to-content{display:none !important}

/* --------------------------------------------------------------- FAQ accordion */
.faq { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--bg-2); border-block: 1px solid var(--line); }
.faq__shell { max-width: 1080px; }
.faq .section-head { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.faq__list { display: flex; flex-direction: column; gap: .85rem; }
.faq__group { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--red); letter-spacing: -0.01em; margin: 1.7rem 0 .3rem; }
.faq__group:first-child { margin-top: 0; }
.faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.faq__item[open] { border-color: rgba(203,33,22,.35); box-shadow: var(--shadow-md); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1.15rem 1.35rem; font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; color: var(--head); line-height: 1.4; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: var(--radius); }
.faq__icon { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--red-soft); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; background: var(--red); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .25s var(--ease), opacity .2s var(--ease); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
.faq__a { padding: 0 1.35rem 1.25rem; color: var(--body); }
.faq__a p { margin: 0 0 .8rem; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.faq__cta { text-align: center; margin-top: clamp(1.8rem, 3.5vw, 2.5rem); }
@media (max-width: 640px) {
  .faq__q { padding: 1rem 1.05rem; font-size: 1rem; }
  .faq__a { padding: 0 1.05rem 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .faq__item, .faq__icon::before, .faq__icon::after { transition: none; } }

/* --------------------------------------------------------------- Service areas (redesign) */
.areas__head { max-width: 60ch; margin: 0 auto clamp(1.6rem, 3vw, 2.2rem); text-align: center; }
.areas__lead { font-size: var(--fs-lead); color: var(--body); margin-top: .9rem; }
.areas__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.2rem, 4vw, 3.2rem); margin: 0 auto clamp(2rem, 4vw, 3rem); padding: 0; }
.areas__stats li { text-align: center; }
.areas__stats b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--red); line-height: 1; letter-spacing: -0.02em; }
.areas__stats span { display: block; margin-top: .35rem; font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.areas__panel { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.2rem); align-items: stretch; max-width: 820px; margin: 0 auto; }
.areas--media .areas__panel { grid-template-columns: 1.05fr 1fr; max-width: none; }
.areas__media { position: relative; }
.areas--media .areas__media .photo-card { aspect-ratio: auto; height: 100%; min-height: 340px; }
.areas__badge { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.areas__badge b { display: block; font-family: var(--font-head); font-size: 1.02rem; color: var(--head); font-weight: 700; line-height: 1.15; }
.areas__badge span { font-size: .82rem; color: var(--muted); }
/* Business-location cards (Billerica HQ + Woburn office) — stacked in the left panel column */
.areas__locs { display: flex; flex-direction: column; justify-content: center; gap: clamp(1rem, 2vw, 1.4rem); }
.areas__loc { display: flex; align-items: flex-start; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(1.3rem, 2.4vw, 1.7rem); }
.areas__loc-body { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.areas__loc-body b { font-family: var(--font-head); font-size: 1.12rem; color: var(--head); font-weight: 700; line-height: 1.2; }
.areas__loc-addr { font-size: .92rem; color: var(--body); }
.areas__loc-note { font-size: .82rem; color: var(--muted); }
.areas__loc-arrow { margin-left: auto; align-self: center; color: var(--red); font-size: 1.2rem; flex: none; transition: transform .18s var(--ease); }
.areas__loc--link { text-decoration: none; transition: border-color .18s, box-shadow .18s; }
.areas__loc--link:hover { border-color: var(--red); box-shadow: var(--shadow-lg); }
.areas__loc--link:hover .areas__loc-arrow { transform: translateX(3px); }
.areas__card { display: flex; flex-direction: column; }
.areas__group + .areas__group { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.areas__card-label { display: flex; align-items: baseline; gap: .6rem; }
.areas__count { margin-left: auto; font-size: .7rem; font-weight: 600; letter-spacing: .1em; color: var(--muted); }
.areas__cta { align-self: flex-start; margin-top: 1.4rem; }
.areas__highlight { display: flex; align-items: flex-start; gap: 1.1rem; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.4rem, 3vw, 2.1rem); background: var(--red-soft); border: 1px solid rgba(203,33,22,.18); border-left: 4px solid var(--red); border-radius: var(--radius); }
.areas__highlight-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--red); color: #fff; flex: none; box-shadow: 0 10px 24px -12px rgba(203,33,22,.6); }
.areas__highlight h3 { font-family: var(--font-head); font-size: 1.18rem; font-weight: 700; color: var(--head); margin: 0 0 .35rem; }
.areas__highlight p { color: var(--body); margin: 0; max-width: 78ch; }
@media (max-width: 860px) {
  .areas--media .areas__panel { grid-template-columns: 1fr; }
  .areas--media .areas__media .photo-card { min-height: 260px; }
  .areas__highlight { flex-direction: column; gap: .8rem; }
}

/* ---- multi-step estimate wizard (est-multi) ---- */
/* Flex column so the engine-injected admin test-fill button can be ordered out of
   the way (order only works on flex/grid children; block layout let it overlap the
   progress bar). */
.est-multi { display: flex; flex-direction: column; }
.est-multi > [data-aq-testfill] { order: 9; position: static !important; width: 100%; margin: 1rem 0 0 !important; }
.est-multi .fprog { order: 0; margin: 0 0 1.15rem; }
.est-multi .fstep { order: 1; }
.est-multi .fprog__track { height: 6px; border-radius: 99px; background: var(--line-2, rgba(0,0,0,.12)); overflow: hidden; }
.est-multi .fprog__fill { display: block; height: 100%; width: 33.33%; background: var(--red); border-radius: 99px; transition: width .35s cubic-bezier(.4,0,.2,1); }
.est-multi .fprog__label { margin: .5rem 0 0; font-size: .82rem; color: var(--muted); }
.est-multi .fprog__label b { color: var(--head); }
.est-multi .fstep { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.est-multi .fstep[hidden] { display: none; }
.est-multi .fnav { grid-column: 1 / -1; margin-top: .5rem; }
.est-multi .fnav--split { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.est-multi .fnav--split .btn { margin: 0; flex: 0 1 auto; }
.est-multi .fnav--back { text-align: center; margin-top: .55rem; }
.est-multi .btn--ghost-red { background: transparent; color: var(--red); border: 1.5px solid rgba(203,33,22,.35); box-shadow: none; }
.est-multi .btn--ghost-red:hover { background: rgba(203,33,22,.06); border-color: var(--red); }
.est-multi #addrSearchBox { color-scheme: light; }
/* Self-rendered address autocomplete (input + our own prediction dropdown) */
.est-multi .addr-ac { position: relative; }
.est-multi #addrSearch { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line-2, #d7dbe0); border-radius: 11px; background: var(--surface-2, #f6f7f9); padding: .7rem .9rem; font: inherit; color: var(--head, #111); }
.est-multi #addrSearch::placeholder { color: #8a9099; }
.est-multi #addrSearch:focus { outline: none; border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(203,33,22,.12); }
.est-multi .addr-ac__list { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: .3rem; list-style: none; background: #fff; border: 1px solid var(--line-2, #d7dbe0); border-radius: 11px; box-shadow: 0 14px 34px rgba(0,0,0,.16); max-height: 264px; overflow-y: auto; }
.est-multi .addr-ac__item { padding: .55rem .7rem; border-radius: 8px; font-size: .92rem; line-height: 1.3; color: var(--head, #111); cursor: pointer; }
.est-multi .addr-ac__item:hover, .est-multi .addr-ac__item.is-active { background: rgba(203,33,22,.08); color: var(--red); }
.est-multi .cf-turnstile { grid-column: 1 / -1; margin: .2rem 0 .1rem; }

/* WP Rocket "lazy render" adds content-visibility:auto to the footer; while it is
   skipped, contrast checkers (Lighthouse/axe) misread its #111 background as white
   and flag every footer link. The footer is cheap to render — always draw it. */
.footer[data-wpr-lazyrender] { content-visibility: visible; }