/* ═══════════════════════════════════════════════════════════════════════════
   PRESTIGE ROOFING & CONSTRUCTION — site.css
   One file. Tokens first, then base, layout, components, page patterns.

   Gestalt, and where each principle lives in this file:
   PROXIMITY      --space-tight / related / group / block / section are the only
                  gaps used in layout. Distance carries the hierarchy.
   SIMILARITY     One treatment per role: .row-link, .chip, .btn variants.
   COMMON REGION  .region-* surfaces and .panel declare groups — never ad-hoc fills.
   CONTINUITY     12-col grid, one 4px baseline, the timeline rail, left-aligned text.
   CLOSURE        Groups read from whitespace + alignment before any border.
   FIGURE/GROUND  Bright gold is reserved for the one primary action per view.
   COMMON FATE    One easing curve, three durations; hover on a county row
                  lights its shape on the map.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  /* type */
  --font-head: "Montserrat", "Arial Black", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: .8125rem;   /* 13 */
  --text-sm: .9375rem;   /* 15 */
  --text-base: 1.0625rem;/* 17 */
  --text-lead: 1.1875rem;/* 19 */
  --text-h4: 1.0625rem;
  --text-h3: 1.25rem;
  --text-h2: clamp(1.625rem, 1.1rem + 1.9vw, 2.375rem);
  --text-h1: clamp(2.125rem, 1.25rem + 3.4vw, 3.5rem);
  --leading-head: 1.1;
  --leading-body: 1.65;

  /* colour — taken from the logo: navy #0E345F and brass #BA9B5B,
     with the live site's bright gold kept for the one primary action */
  --navy: #0e345f;          /* logo navy */
  --navy-deep: #0a2546;     /* dark surfaces */
  --navy-tint: #e8edf4;
  --brass: #ba9b5b;         /* logo gold */
  --ink: #0d2a4c;           /* headings: navy, not black */
  --text: #2d3646;
  --muted: #5a6475;
  --line: #e4e1d9;
  --line-strong: #cfc8b8;
  --paper: #ffffff;
  --sand: #f7f5f0;
  --sand-2: #efebe2;
  --gold: #ba9b5b;          /* brand brass, from the logo */
  --gold-bright: #f9c957;   /* primary action only */
  --gold-hover: #f2bb36;
  --gold-ink: #7f6125;      /* gold as text on light: 5.6:1 */
  --night: var(--navy-deep);
  --night-2: var(--navy);
  --night-text: #c6d1e0;
  --night-line: #1f4170;
  --alert: #b42318;
  --focus: #2a62c9;

  /* space — 4px baseline, semantic names */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --space-tight: var(--space-2);
  --space-related: var(--space-4);
  --space-group: var(--space-8);
  --space-block: var(--space-12);
  --space-section: clamp(var(--space-16), 7vw, var(--space-24));

  /* grid */
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);

  /* shape + depth */
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --shadow-float: 0 14px 36px rgba(10, 37, 70, .16), 0 2px 6px rgba(10, 37, 70, .07);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 140ms; --base: 220ms;

  /* targets */
  --tap: 44px; --tap-primary: 52px;
  --header-h: 64px;
  --bar-h: 64px;
}
@media (min-width: 1024px) { :root { --header-h: 76px; } }
@media (prefers-reduced-motion: reduce) { :root { --fast: 0ms; --base: 0ms; } }

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 var(--text-base)/var(--leading-body) var(--font-body);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
@media (max-width: 1023px) { body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); } }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-head); font-weight: 800; color: var(--ink);
  line-height: var(--leading-head); letter-spacing: -.02em; margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); letter-spacing: -.03em; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: -.01em; }
h4 { font-size: var(--text-h4); letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--space-related); }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
strong { font-weight: 600; color: var(--ink); }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.region-night :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-bright); }
.skip { position: absolute; left: var(--space-4); top: var(--space-2); z-index: 100;
  transform: translateY(-200%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); }
.skip:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-block); }
.region-sand { background: var(--sand); }
.region-night { background: var(--night); color: var(--night-text); }
.region-night h2, .region-night h3 { color: #fff; }
.grid { display: grid; gap: var(--space-group); }
.grid > * { min-width: 0; }
@media (min-width: 900px) {
  .grid--7-5 { grid-template-columns: 7fr 5fr; gap: var(--space-block); }
  .grid--5-7 { grid-template-columns: 5fr 7fr; gap: var(--space-block); }
  .grid--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-block); }
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.measure { max-width: 68ch; }
.stack > * + * { margin-top: var(--space-related); }
.stack-group > * + * { margin-top: var(--space-group); }
.section-head { max-width: 62ch; margin-bottom: var(--space-group); }
.section-head p { margin-top: var(--space-tight); color: var(--muted); font-size: var(--text-lead); }
.lead { font-size: var(--text-lead); color: var(--text); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap-primary); padding: 0 22px; border-radius: var(--radius-sm);
  font: 600 var(--text-base)/1 var(--font-body); text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--gold-bright); color: var(--ink); }
.btn--primary:hover { background: var(--gold-hover); text-decoration: none; }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); text-decoration: none; }
.region-night .btn--ghost, .site-footer .btn--ghost { border-color: #3a5a85; color: #fff; }
.region-night .btn--ghost:hover, .site-footer .btn--ghost:hover { border-color: #fff; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid transparent; transition: border-color var(--base) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
@supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(10px); } }
.header-row { height: var(--header-h); display: flex; align-items: center; gap: var(--space-6); }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1; margin-right: auto; }
.brand-name { font: 800 1.25rem/1 var(--font-head); color: var(--ink); letter-spacing: -.02em; }
.brand-name span { color: var(--gold-ink); }
.brand-sub { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-top: 4px; }
.header-phone { display: none; font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-phone:hover { text-decoration: underline; }
.header-cta { display: none; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff;
  font: 600 var(--text-sm)/1 var(--font-body); color: var(--ink); cursor: pointer;
}
.menu-toggle svg { width: 18px; height: 18px; }
.menu-toggle .i-close, .menu-open .menu-toggle .i-open { display: none; }
.menu-open .menu-toggle .i-close { display: block; }

/* nav: ONE element, laid out inline on desktop, as a sheet on mobile */
.site-nav { display: none; }
.nav-list { list-style: none; }
.nav-item > a, .nav-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  min-height: var(--tap); padding: 0 12px; border: 0; background: none; border-radius: var(--radius-sm);
  font: 500 var(--text-base)/1 var(--font-body); color: var(--ink); text-decoration: none; cursor: pointer;
}
.nav-trigger svg { width: 16px; height: 16px; transition: transform var(--base) var(--ease); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panel[hidden] { display: none; }
.nav-panel ul { list-style: none; }
.nav-panel a { display: flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink); }
.nav-panel a:hover { background: var(--sand); }
.nav-panel .nav-all { font-weight: 600; color: var(--gold-ink); }

@media (max-width: 1023px) {
  body.menu-open { overflow: hidden; }
  /* backdrop-filter makes the header the containing block for fixed children,
     which clipped the sheet to 64px — drop it while the menu is open */
  .menu-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .menu-open .site-nav {
    display: block; position: fixed; inset: var(--header-h) 0 0 0; background: #fff; overflow-y: auto;
    padding: var(--space-4) var(--gutter) calc(var(--bar-h) + 32px); border-top: 1px solid var(--line);
  }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-item > a, .nav-trigger { min-height: 56px; padding: 0 4px; font-size: 1.0625rem; font-weight: 600; }
  .nav-panel { padding: 0 0 var(--space-3); }
  .nav-panel a { padding: 0 4px 0 16px; color: var(--text); }
}
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .header-phone, .header-cta { display: inline-flex; }
  .header-cta { min-height: 46px; padding: 0 18px; font-size: var(--text-sm); }
  .site-nav { display: block; }
  .nav-list { display: flex; align-items: center; gap: 2px; }
  .nav-item { position: relative; }
  .nav-item > a, .nav-trigger { width: auto; font-size: var(--text-sm); font-weight: 500; }
  .nav-item > a:hover, .nav-trigger:hover { background: var(--sand); }
  .nav-panel {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; padding: var(--space-2);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float);
  }
  .nav-panel a { font-size: var(--text-sm); }
  .nav-panel .nav-all { border-top: 1px solid var(--line); margin-top: var(--space-1); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
}

/* ── mobile action bar ──────────────────────────────────────────────────── */
.action-bar {
  position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--night); border-top: 1px solid var(--night-line);
}
.action-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #fff; text-decoration: none; font: 600 12px/1 var(--font-body); letter-spacing: .01em;
}
.action-bar a + a { border-left: 1px solid var(--night-line); }
.action-bar svg { width: 22px; height: 22px; }
.action-bar .is-primary { background: var(--gold-bright); color: var(--ink); }
@media (min-width: 1024px) { .action-bar { display: none; } }

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--text-xs); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; display: inline-block; padding: 4px 0; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* ── page header (inner pages) ──────────────────────────────────────────── */
.page-head { background: var(--sand); padding-block: var(--space-group) var(--space-block); border-bottom: 1px solid var(--line); }
.page-head h1 { margin-top: var(--space-related); max-width: 22ch; }
.page-head .lead { margin-top: var(--space-related); }
.page-head .btn-row { margin-top: var(--space-group); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-6);
  list-style: none; font-size: var(--text-sm); color: var(--muted); }
.facts li { display: flex; align-items: center; gap: 8px; }
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--gold); flex: none; }

/* ── home hero ──────────────────────────────────────────────────────────── */
.hero { padding-block: var(--space-block) var(--space-section); }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: var(--space-6); }
.hero .btn-row { margin-top: var(--space-group); }
/* on phones the sticky bar already carries Call + Estimate: the chooser moves up */
@media (max-width: 1023px) { .hero .btn-row, .page-head .btn-row { display: none; } .hero { padding-top: var(--space-group); } }
.chooser { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 1px 0 var(--line); align-self: start; }
.chooser-head { padding: var(--space-6) var(--space-6) var(--space-3); }
.chooser-head h2 { font-size: var(--text-h3); }
.chooser-head p { color: var(--muted); font-size: var(--text-sm); margin-top: 4px; }
.chooser ul { list-style: none; }
.chooser-foot { background: var(--sand); padding: var(--space-4) var(--space-6); font-size: var(--text-sm); border-top: 1px solid var(--line); }

/* the one reusable "row with a link" pattern — similarity across the site */
.row-link { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); transition: background var(--fast) var(--ease); }
.row-link:hover { background: var(--sand); }
.row-link h3 { font-size: var(--text-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.row-link h3 a { text-decoration: none; }
.row-link h3 a::after { content: ""; position: absolute; inset: 0; }   /* whole row clickable, anchor stays the phrase */
.row-link p { color: var(--muted); font-size: var(--text-sm); margin-top: 2px; }
.row-link .arrow { width: 20px; height: 20px; color: var(--gold-ink); transition: transform var(--fast) var(--ease); }
.row-link:hover .arrow { transform: translateX(3px); }
.row-link.is-urgent h3 a { color: var(--alert); }
.row-list { list-style: none; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.row-list > li:first-child .row-link { border-top: 0; }

/* chips: places and short services */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: #fff; text-decoration: none; font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.chip:hover { border-color: var(--ink); text-decoration: none; }
.chip small { color: var(--muted); font-weight: 400; margin-left: 6px; }

/* inline link row */
.inline-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-6); list-style: none; font-weight: 500; }
.inline-links a, .chooser-foot a, .related a { display: inline-block; padding-block: 6px; }

/* ── timeline ───────────────────────────────────────────────────────────── */
.timeline { list-style: none; display: grid; gap: var(--space-group); position: relative; }
.timeline li { position: relative; padding-left: 28px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--gold); }
.timeline::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.timeline .when { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--gold-ink); }
.timeline h3 { margin-top: 4px; }
.timeline p { margin-top: var(--space-tight); color: var(--muted); }
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(4, 1fr); }
  .timeline li { padding: 28px 0 0; }
  .timeline li::before { top: 0; left: 0; }
  .timeline::before { left: 6px; right: 6px; top: 5px; bottom: auto; width: auto; height: 2px; }
}

/* ── map + areas ────────────────────────────────────────────────────────── */
.nj-map { width: 100%; max-width: 300px; height: auto; margin-inline: auto; }
.areas-map { order: 2; }
@media (max-width: 899px) { .areas-map .nj-map { max-width: 200px; } }
@media (min-width: 900px) { .areas-map { order: 0; } }
.nj-map path { fill: var(--sand-2); stroke: #fff; stroke-width: 1; transition: fill var(--base) var(--ease); }
.nj-map path.is-served { fill: #b9c8dc; }
.nj-map path.is-core { fill: var(--navy); }
.nj-map path.is-lit { fill: var(--gold-bright); }
.nj-map .yard { fill: var(--gold-bright); }
.nj-map .yard-ring { fill: none; stroke: var(--gold-bright); stroke-width: 2; }
.nj-map text { font: 600 9px var(--font-body); fill: var(--ink); }
.map-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); font-size: var(--text-xs); color: var(--muted); justify-content: center; }
.map-key span { display: inline-flex; align-items: center; gap: 6px; }
.map-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.county-block { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.county-block:first-child { border-top: 0; padding-top: 0; }
.county-block h3 { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.county-block h3 a { text-decoration: none; display: inline-block; padding-block: 4px; }
.county-block h3 a:hover { text-decoration: underline; }
.county-block .meta { font: 500 var(--text-xs) var(--font-body); color: var(--muted); letter-spacing: 0; }
.county-block .chips { margin-top: var(--space-3); }

/* ── disclosure (details) ───────────────────────────────────────────────── */
.disclose { border-top: 1px solid var(--line); }
.disclose > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 56px; padding: var(--space-3) 0; font-weight: 600; color: var(--ink);
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary .chev { width: 18px; height: 18px; flex: none; transition: transform var(--base) var(--ease); color: var(--muted); }
.disclose[open] > summary .chev { transform: rotate(180deg); }
.disclose > .body { padding-bottom: var(--space-6); }
.disclose--more > summary { color: var(--gold-ink); justify-content: flex-start; gap: var(--space-2); border-top: 0; }

/* FAQ */
.faq { border-bottom: 1px solid var(--line); }
.faq .disclose > summary { font-family: var(--font-body); font-size: 1.0625rem; }
.faq .body { color: var(--text); max-width: 68ch; }
.faq .pending { color: var(--muted); font-style: italic; }

/* ── article (inner pages) ──────────────────────────────────────────────── */
.article > section { scroll-margin-top: calc(var(--header-h) + 16px); }
.article > section + section { margin-top: var(--space-block); }
.article h2 { margin-bottom: var(--space-related); }
.article h3 { margin: var(--space-group) 0 var(--space-tight); }
.article ul.ticks { list-style: none; margin-top: var(--space-related); }
.article ul.ticks li { position: relative; padding-left: 26px; }
.article ul.ticks li + li { margin-top: var(--space-tight); }
.article ul.ticks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px;
  border-left: 2.5px solid var(--gold-ink); border-bottom: 2.5px solid var(--gold-ink); transform: rotate(-45deg); }
.article ol.steps { margin-top: var(--space-related); padding-left: 1.25em; }
.article ol.steps li + li { margin-top: var(--space-tight); }
.article ol.steps li::marker { font-weight: 600; color: var(--gold-ink); }
/* proximity: a term sits tight to its own definition, further from the next term */
.article dl.drivers { margin-top: var(--space-related); }
.article dl.drivers dt { font-weight: 600; color: var(--ink); margin-top: var(--space-related); }
.article dl.drivers dt:first-child { margin-top: 0; }
.article dl.drivers dd { margin: 2px 0 0; }
.article ol + p, .article ul + p, .article dl + p { margin-top: var(--space-related); }
.callout { border-left: 3px solid var(--gold); background: var(--sand); padding: var(--space-4) var(--space-6); border-radius: 0 var(--radius) var(--radius) 0; margin-top: var(--space-related); }

/* on this page */
.toc { font-size: var(--text-sm); }
.toc ol { list-style: none; counter-reset: none; }
.toc a { display: block; padding: 8px 0 8px 14px; border-left: 2px solid var(--line); text-decoration: none; color: var(--muted); }
.toc a:hover { color: var(--ink); border-left-color: var(--gold); }
.toc-mobile { margin-top: var(--space-group); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--space-4); }
.toc-mobile > summary { border-top: 0; }
@media (min-width: 900px) { .toc-mobile { max-width: 520px; } }

/* aside */
.aside { display: none; }
@media (min-width: 900px) {
  .aside { display: block; }
  .aside-inner { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: var(--space-group); }
}
.panel { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); background: #fff; }
.panel h2, .panel h3 { font-size: var(--text-h3); }
.panel p { margin-top: var(--space-tight); color: var(--muted); font-size: var(--text-sm); }
.panel .btn { margin-top: var(--space-related); }
.panel .phone { display: block; margin-top: var(--space-3); text-align: center; font-weight: 600; text-decoration: none; }

/* related */
.related { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.related li { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.related .label { color: var(--muted); }
.related a { font-weight: 500; }
@media (max-width: 599px) { .related li { grid-template-columns: 1fr; gap: 2px; } }

/* service list on hub */
.svc-group + .svc-group { margin-top: var(--space-block); }
.svc-group > h2 { font-size: var(--text-h3); margin-bottom: var(--space-related); }

/* draft content slots — preview builds only, page is noindex */
.slot { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: var(--space-4) var(--space-6);
  background: repeating-linear-gradient(-45deg, #fff, #fff 10px, #fbfaf7 10px, #fbfaf7 20px); color: var(--muted); font-size: var(--text-sm); }
.slot strong { display: block; color: var(--ink); font-size: var(--text-xs); letter-spacing: .02em; margin-bottom: 4px; }
.draft-ribbon { background: #fff4d6; color: #5c4510; font-size: var(--text-xs); padding: 8px 0; border-bottom: 1px solid #f1dfa6; }

/* forms */
.form { display: grid; gap: var(--space-related); }
.field { display: grid; gap: 6px; }
.field label, .fieldset legend { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: var(--radius-sm);
  font: 400 var(--text-base)/1.4 var(--font-body); color: var(--ink); background: #fff;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.fieldset { border: 0; padding: 0; margin: 0; }
.options { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
@media (min-width: 600px) { .options { grid-template-columns: 1fr 1fr; } }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; }
.option span { display: flex; align-items: center; min-height: 50px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); font-weight: 500; }
.option input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--sand); }
.option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-step[hidden] { display: none; }
.form-note { font-size: var(--text-xs); color: var(--muted); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── cta band ───────────────────────────────────────────────────────────── */
.cta-band { display: grid; gap: var(--space-group); align-items: center; }
.cta-band p { margin-top: var(--space-tight); color: var(--muted); max-width: 52ch; }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; } }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--night); color: var(--night-text); padding-block: var(--space-block) var(--space-group); font-size: var(--text-sm); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:not(.btn) { display: inline-block; padding-block: 4px; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.footer-top { display: grid; gap: var(--space-group); padding-bottom: var(--space-group); border-bottom: 1px solid var(--night-line); }
@media (min-width: 900px) { .footer-top { grid-template-columns: 5fr 4fr 3fr; } }
.footer-brand .brand-name { color: #fff; font-size: 1.375rem; }
.footer-brand .brand-name span { color: var(--gold); }
.footer-nap { font-style: normal; margin-top: var(--space-related); line-height: 1.7; }
.footer-services { list-style: none; display: grid; gap: 0; }
.footer-services a, .footer-more li a { display: inline-block; padding: 5px 0; }
.footer-h { font: 600 var(--text-xs) var(--font-body); color: #93a3ba; margin-bottom: var(--space-3); letter-spacing: .02em; }
.footer-more { display: grid; gap: 0 var(--space-group); padding-top: var(--space-2); }
@media (min-width: 700px) { .footer-more { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-more { grid-template-columns: repeat(3, 1fr); } }
.footer-more .disclose { border-top-color: var(--night-line); }
.footer-more .disclose > summary { color: #fff; min-height: 52px; font-size: var(--text-sm); }
.footer-more .disclose > summary .chev { color: #93a3ba; }
.footer-more ul { list-style: none; columns: 2; column-gap: var(--space-6); }
.footer-more li { break-inside: avoid; }
.footer-more ul[data-truncate]:not(.is-expanded) li:nth-child(n+6) { display: none; }
.footer-more .more-btn { margin-top: 6px; background: none; border: 0; padding: 6px 0; color: var(--gold); font: 600 var(--text-sm) var(--font-body); cursor: pointer; min-height: 32px; }
.footer-more ul.is-expanded + .more-btn { display: none; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-group);
  padding-top: var(--space-6); border-top: 1px solid var(--night-line); color: #93a3ba; font-size: var(--text-xs); }

/* ═══ PHOTOGRAPHY ═══════════════════════════════════════════════════════════
   Figure/ground: text over a photo always sits on a scrim that guarantees
   contrast, darkest where the type is. Photos are content, never decoration
   behind body copy. */
.photo-bg { position: absolute; inset: 0; z-index: -2; }
.photo-bg img { width: 100%; height: 100%; object-fit: cover; }
.ph-badge { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(255,244,214,.95); color: #5c4510;
  font: 600 11px/1 var(--font-body); padding: 6px 8px; border-radius: 4px; pointer-events: none; }

/* hero over a photo */
.hero--photo { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-section); }
.hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8,30,58,.92) 0%, rgba(8,30,58,.78) 42%, rgba(8,30,58,.35) 75%, rgba(8,30,58,.2) 100%); }
.hero--photo h1 { color: #fff; }
.hero--photo .lead { color: rgba(255,255,255,.88); }
.hero--photo .facts { color: rgba(255,255,255,.78); }
.hero--photo .facts li::before { background: var(--gold-bright); }
.hero--photo .btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.hero--photo .btn--ghost:hover { border-color: #fff; }
.hero--photo .chooser { box-shadow: var(--shadow-float); border-color: transparent; }
@media (max-width: 899px) {
  .hero--photo { padding-top: var(--space-block); }
  .hero--photo::before { background: linear-gradient(180deg, rgba(8,30,58,.72) 0%, rgba(8,30,58,.88) 55%, rgba(8,30,58,.95) 100%); }
}

/* inner page head over a photo */
.page-head--photo { position: relative; isolation: isolate; overflow: hidden; background: var(--night); border-bottom: 0;
  padding-block: var(--space-block) var(--space-section); }
.page-head--photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8,30,58,.9) 0%, rgba(8,30,58,.7) 55%, rgba(8,30,58,.35) 100%); }
.page-head--photo h1 { color: #fff; }
.page-head--photo .lead { color: rgba(255,255,255,.88); }
.page-head--photo .facts { color: rgba(255,255,255,.78); }
.page-head--photo .crumbs ol, .page-head--photo .crumbs a { color: rgba(255,255,255,.72); }
.page-head--photo .crumbs [aria-current] { color: #fff; }
.page-head--photo .btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.page-head--photo .toc-mobile { background: rgba(255,255,255,.96); }

/* gallery — tiles share size, radius and caption treatment (similarity) */
.section-head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-related); max-width: none; }
.section-head--row > div { max-width: 62ch; }
.gallery { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); }
.tile { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--sand-2); aspect-ratio: 4 / 3; }
.tile picture, .tile img { width: 100%; height: 100%; }
.tile img { object-fit: cover; transition: transform var(--base) var(--ease); }
.tile:hover img { transform: scale(1.035); }
.tile figcaption { position: absolute; inset: auto 0 0 0; padding: 28px 14px 12px; color: #fff; font: 600 var(--text-sm)/1.3 var(--font-body);
  background: linear-gradient(180deg, transparent, rgba(8,30,58,.82)); pointer-events: none; }
.tile figcaption:empty { display: none; }
.tile-open { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: transparent; cursor: zoom-in; }
.tile-open:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: -3px; }
@media (min-width: 900px) {
  .gallery--feature { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; }
  .gallery--feature .tile { aspect-ratio: auto; }
  .gallery--feature .tile:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery--strip { grid-template-columns: repeat(4, 1fr); }
  .gallery--all { grid-template-columns: repeat(3, 1fr); }
}
.article .gallery--strip { grid-template-columns: repeat(2, 1fr); margin-bottom: var(--space-related); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.filters .chip { cursor: pointer; }
.filters .chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tile[hidden] { display: none; }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1200px, 96vw); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(10,10,12,.88); }
.lightbox figure { margin: 0; }
.lightbox img { max-width: 100%; max-height: 82vh; width: auto; margin-inline: auto; border-radius: var(--radius); }
.lightbox figcaption { color: #fff; text-align: center; margin-top: 12px; font-weight: 500; }
.lightbox button { position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14);
  color: #fff; font-size: 22px; cursor: pointer; }
.lightbox button:hover { background: rgba(255,255,255,.26); }
.lb-close { top: 16px; right: 16px; } .lb-prev { left: 16px; top: 50%; } .lb-next { right: 16px; top: 50%; }

/* CTA over a photo */
.cta-photo { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-section); color: #fff; }
.cta-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,30,58,.9), rgba(8,30,58,.55)); }
.cta-photo-inner { max-width: 560px; }
.cta-photo h2 { color: #fff; }
.cta-photo p { margin-top: var(--space-tight); color: rgba(255,255,255,.85); }
.cta-photo .btn-row { margin-top: var(--space-group); }
.cta-photo .btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }

/* ═══ HOMEPAGE ═══════════════════════════════════════════════════════════ */
.hero--home { padding-block: var(--space-block) var(--space-section); }
.hero--home .grid { align-items: center; }
.hero--home h1 { max-width: 13ch; font-size: clamp(2.375rem, 1.25rem + 4vw, 4rem); }
.hero .urgent { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--muted); }
.hero .urgent a { font-weight: 600; color: var(--alert); }
.hero--photo .urgent { color: rgba(255,255,255,.8); }
.hero--photo .urgent a { color: var(--gold-bright); }
.hero-form { box-shadow: var(--shadow-float); border-color: transparent; }
.hero-form h2 { font-size: var(--text-h3); }
/* phones: the form sits right under the copy and the sticky bar carries Call — no duplicate buttons */
@media (max-width: 1023px) { .hero--home .btn-row { display: none; } }

/* trust strip — four equal facts, one row (similarity + continuity) */
.trust { border-bottom: 1px solid var(--line); background: #fff; }
.trust ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); }
.trust li { padding: var(--space-6) var(--space-4); display: grid; gap: 2px; border-left: 1px solid var(--line); }
.trust li:nth-child(odd) { border-left: 0; }
.trust strong { font-family: var(--font-head); font-weight: 800; font-size: var(--text-base); letter-spacing: -.01em; }
.trust span { font-size: var(--text-sm); color: var(--muted); }
@media (min-width: 900px) { .trust ul { grid-template-columns: repeat(4, 1fr); } .trust li:nth-child(odd) { border-left: 1px solid var(--line); } .trust li:first-child { border-left: 0; padding-left: 0; } }

/* service cards */
.svc-cards { list-style: none; display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 600px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-cards { grid-template-columns: repeat(3, 1fr); } }
.svc-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--fast) var(--ease), box-shadow var(--base) var(--ease); }
.svc-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-float); }
.svc-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--sand-2); overflow: hidden; }
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--base) var(--ease); }
.svc-card:hover .svc-card-media img { transform: scale(1.04); }
.svc-card-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.svc-card h3 { font-size: var(--text-h3); }
.svc-card h3 a { text-decoration: none; }
.svc-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc-card p { color: var(--muted); font-size: var(--text-sm); flex: 1; }
.svc-card .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--text-sm); color: var(--gold-ink); margin-top: var(--space-2); }
.svc-card .more svg { width: 18px; height: 18px; transition: transform var(--fast) var(--ease); }
.svc-card:hover .more svg { transform: translateX(3px); }
.svc-card.is-urgent h3 a { color: var(--alert); }
.svc-card .ph-badge { z-index: 2; }
.svc-more { margin-top: var(--space-group); border-top: 0; }
.svc-more > .body { padding-top: var(--space-2); }

/* about */
.about { align-items: start; }
.about-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand-2); }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .about-media { aspect-ratio: 16 / 10; } }
.process-h { margin-top: var(--space-block); font-size: var(--text-h3); }
.steps-grid { list-style: none; display: grid; gap: var(--space-6); margin-top: var(--space-related); counter-reset: s; }
@media (min-width: 600px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
.steps-grid li { position: relative; padding-left: 44px; }
.steps-grid li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: var(--gold-bright); display: grid; place-items: center; font: 800 14px/1 var(--font-head); }
.steps-grid .when { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--gold-ink); }
.steps-grid h4 { margin-top: 2px; }
.steps-grid p { margin-top: 4px; color: var(--muted); font-size: var(--text-sm); }

/* phones: service cards become compact rows so six services don't cost six screens */
@media (max-width: 599px) {
  .svc-cards { gap: var(--space-3); }
  .svc-card { flex-direction: row; align-items: stretch; }
  .svc-card-media { aspect-ratio: auto; width: 104px; flex: none; }
  .svc-card-body { padding: var(--space-4); gap: 4px; }
  .svc-card h3 { font-size: var(--text-h4); }
  .svc-card .more, .svc-card .ph-badge { display: none; }
}
@media (max-width: 899px) { .trust li { padding: var(--space-4) var(--space-3); } .trust li:nth-child(n+3) { border-top: 1px solid var(--line); } .trust strong { font-size: var(--text-sm); } }

/* ═══ BRAND ═══════════════════════════════════════════════════════════════
   The logo leads: full mark in the header, reversed mark in the footer,
   its navy on every dark surface, its brass on every accent, and its house
   silhouette as the one decorative line on the site. */
.brand { margin-right: auto; display: block; line-height: 0; }
.brand img { height: 48px; width: auto; }
@media (min-width: 1024px) { .brand img { height: 60px; } }
.footer-logo { width: 112px; height: auto; }

.roofline { display: flex; align-items: flex-end; color: var(--brass); height: 40px; margin-top: -20px; pointer-events: none; }
.roofline span { flex: 1; border-bottom: 2px solid currentColor; margin-bottom: 4px; }
.roofline svg { width: 160px; height: 40px; flex: none; }
.site-footer { position: relative; padding-top: 0; }
.site-footer > .roofline { margin: 0 0 var(--space-block); transform: translateY(-20px); margin-bottom: calc(var(--space-block) - 20px); }
.cta-photo > .roofline { position: absolute; left: 0; right: 0; top: 24px; margin: 0; opacity: .9; }

/* headings and dark UI in navy */
.btn--ghost:hover { border-color: var(--navy); }
.chip:hover { border-color: var(--navy); }
.menu-toggle { color: var(--navy); }
.steps-grid li::before { background: var(--navy); }
.svc-card { border-top: 3px solid transparent; }
.svc-card:hover { border-top-color: var(--brass); }
.trust strong { color: var(--navy); }
.facts li::before { background: var(--brass); }

/* navy section — map recoloured for a dark ground */
.region-brand { position: relative; }
.region-brand .section-head p, .region-brand .muted { color: var(--night-text); }
.region-brand .county-block { border-top-color: var(--night-line); }
.region-brand .county-block h3, .region-brand .county-block h3 a { color: #fff; }
.region-brand .county-block .meta { color: #93a3ba; }
.region-brand .chip { background: transparent; color: #fff; border-color: #3a5a85; }
.region-brand .chip:hover { border-color: var(--gold-bright); }
.region-brand .btn--ghost { color: #fff; border-color: #3a5a85; }
.region-brand .btn--ghost:hover { border-color: #fff; }
.region-brand .nj-map path { fill: #16406f; stroke: var(--navy-deep); }
.region-brand .nj-map path.is-served { fill: #6f86a6; }
.region-brand .nj-map path.is-core { fill: var(--brass); }
.region-brand .nj-map path.is-lit { fill: var(--gold-bright); }
.region-brand .nj-map text { fill: #fff; }
.region-brand .map-key { color: var(--night-text); }
.region-brand a { color: #fff; }
.map-key .k-core { background: var(--navy); } .map-key .k-served { background: #b9c8dc; }
.region-brand .map-key .k-core { background: var(--brass); } .region-brand .map-key .k-served { background: #6f86a6; }
/* the mark carries small type — give it room */
:root { --header-h: 72px; }
@media (min-width: 1024px) { :root { --header-h: 92px; } }
.brand img { height: 56px; }
@media (min-width: 1024px) { .brand img { height: 74px; } }
.site-header { border-bottom: 1px solid var(--line); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--navy) 0 50%, var(--brass) 50% 100%); }   /* the logo ring: half navy, half brass */
.hero-form, .aside .panel { border-top: 4px solid var(--brass); }
.panel h2 { color: var(--navy); }

/* two actions only: Call and Free estimate, side by side, label beside the icon */
.action-bar a { flex-direction: row; gap: 10px; font-size: 15px; }
.action-bar svg { width: 20px; height: 20px; }

/* WordPress: editor-only markers (never shown to visitors) */
.pr-badlink { background: #fde8e8; color: #9b1c1c; border-bottom: 1px dashed #9b1c1c; }
.pr-autolinks { margin-top: var(--space-4); }
.draft-ribbon a { color: inherit; text-decoration: underline; margin-left: 8px; }

/* Homepage hero without a photo: navy brand field, brass glow, the logo's roofline drawn large */
.hero--brand { background: var(--night); }
.hero--brand::before { background:
  radial-gradient(ellipse 60% 70% at 85% 30%, rgba(186,155,91,.18), transparent 70%),
  linear-gradient(160deg, #0E345F 0%, #0A2546 60%, #081E3A 100%); }
.hero-motif { position: absolute; inset: auto 0 0 0; height: clamp(72px, 14vw, 160px); z-index: -1; color: rgba(186,155,91,.45); pointer-events: none; }
.hero-motif svg { display: block; width: 100%; height: 100%; }
.hero--brand + .trust { border-top: 0; }

/* ═══ Homepage hero on phones (with a photo) ════════════════════════════════
   Stacked, not overlaid: the photo is shown clearly as a band at the top and
   fades into navy; the H1 and intro sit on solid navy below it. Figure/ground
   stays clean on a busy photo, and the photo is actually visible. */
@media (max-width: 899px) {
  .hero--home.hero--photo:not(.hero--brand) { background: var(--night); padding-top: 0; }
  .hero--home.hero--photo:not(.hero--brand) .photo-bg { position: relative; inset: auto; z-index: 0;
    height: clamp(220px, 62vw, 360px); margin-inline: 0; }
  .hero--home.hero--photo:not(.hero--brand) .photo-bg img { object-position: var(--hero-x, 50%) var(--hero-y, 62%); }
  .hero--home.hero--photo:not(.hero--brand)::before { inset: 0 0 auto 0; height: clamp(220px, 62vw, 360px); z-index: 1;
    background: linear-gradient(180deg, rgba(8,30,58,0) 45%, rgba(8,30,58,.55) 75%, var(--night) 100%); }
  .hero--home.hero--photo:not(.hero--brand) > .wrap { position: relative; z-index: 2; margin-top: calc(-1 * var(--space-12)); }
  .hero--home h1 { font-size: clamp(2rem, 1.2rem + 4vw, 2.5rem); max-width: 14ch; }
  .hero--home .lead { font-size: var(--text-base); line-height: 1.6; margin-top: var(--space-4); }
  .hero--home .urgent { margin-top: var(--space-4); }
  .hero--home .hero-form { margin-top: var(--space-2); }
}

/* ═══ Homepage value tiles ═══════════════════════════════════════════════════
   Desktop: one quiet row under the intro, brass rule above (common region).
   Phones: the intro paragraph steps back and the four numbers become a 2×2
   grid of tiles — scannable proof instead of a wall of text. */
.hero-stats { list-style: none; margin: var(--space-6) 0 0; padding: var(--space-4) 0 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); border-top: 1px solid rgba(186,155,91,.45); max-width: 620px; }
.hero-stats li { display: flex; flex-direction: column; gap: 2px; }
.hero-stats strong { font: 800 clamp(1.5rem, 1.1rem + 1.2vw, 2rem)/1 var(--font-head); color: var(--gold-bright); letter-spacing: -.02em; }
.hero-stats span { font-size: var(--text-xs); line-height: 1.35; color: rgba(255,255,255,.8); }
@media (max-width: 899px) {
  .hero--home .lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--space-3); border-top: 0; padding-top: 0; margin-top: var(--space-6); }
  .hero-stats li { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-top: 2px solid var(--brass);
    border-radius: var(--radius); padding: var(--space-4); gap: var(--space-1); }
  .hero-stats strong { font-size: 1.75rem; }
  .hero-stats span { font-size: var(--text-sm); }
}
/* certification logos */
.certs { padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.certs .wrap { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.certs-h { font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.certs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.cert-logo { height: 44px; width: auto; filter: grayscale(1); opacity: .8; transition: filter var(--base) var(--ease), opacity var(--base) var(--ease); }
.cert-logo:hover { filter: none; opacity: 1; }

/* ═══ Feature patterns, in Prestige's brand ══════════ */

/* utility bar — desktop only; quiet, navy-deep, scrolls away above the sticky header */
.utility { display: none; background: var(--night); color: rgba(255,255,255,.82); font-size: var(--text-xs); }
@media (min-width: 1024px) { .utility { display: block; } }
.utility .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: var(--space-6); }
.util-left, .util-right { display: flex; align-items: center; gap: var(--space-6); }
.utility a, .utility span { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.utility a:hover { color: #fff; }
.utility svg { width: 14px; height: 14px; flex: none; }
.utility .soc { width: 28px; height: 28px; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); }
.utility .soc:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.util-rating .stars { color: var(--gold-bright); display: inline-flex; gap: 1px; } .util-rating .stars svg { width: 12px; height: 12px; }
.util-right { gap: var(--space-2); } .util-rating { margin-right: var(--space-4); }

/* Google rating badge above the hero H1 (only when a rating is entered) */
.hero-rating, .inline-rating { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-size: var(--text-sm); }
.hero-rating { color: #fff; margin-bottom: var(--space-4); padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.hero-rating:hover { border-color: var(--gold-bright); }
.hero-rating .stars, .inline-rating .stars, .review .stars { display: inline-flex; gap: 2px; color: var(--gold-bright); }
.hero-rating .stars svg, .inline-rating .stars svg { width: 16px; height: 16px; }
.inline-rating { color: var(--ink); } .inline-rating strong { font-family: var(--font-head); }

/* section eyebrow (pill) + accent words in headings */
.eyebrow { display: inline-block; font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); border: 1px solid var(--brass); border-radius: 999px; padding: 6px 12px; margin-bottom: var(--space-3); }
.region-night .eyebrow, .region-brand .eyebrow { color: #fff; border-color: rgba(186,155,91,.7); }
h2 .accent { color: var(--brass-text); }   /* #9c7d3a: 3.9:1 on white, 3.3:1 on sand (large text) */
.region-night h2 .accent, .region-brand h2 .accent { color: var(--gold-bright); }

/* trust strip → icon cards that overlap the hero's lower edge (common region + figure/ground) */
.trust--cards { background: transparent; border-bottom: 0; position: relative; z-index: 3; }
.trust--cards ul { gap: var(--space-4); }
.trust--cards li { border: 1px solid var(--line) !important; border-top: 3px solid var(--brass) !important; border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-float); padding: var(--space-6) !important; grid-template-columns: auto 1fr; column-gap: var(--space-4); align-items: start; }
.trust--cards .ti { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--gold-bright); display: grid; place-items: center; }
.trust--cards .ti svg { width: 22px; height: 22px; }
.trust--cards strong, .trust--cards span:not(.ti) { grid-column: 2; }
@media (min-width: 900px) {
  .hero--home { padding-bottom: calc(var(--space-section) + var(--space-12)); }
  .trust--cards { margin-top: calc(-1 * var(--space-16)); }
  .trust--cards li:first-child { padding-left: var(--space-6) !important; }
}
@media (max-width: 899px) {
  .trust--cards { padding-block: var(--space-6); background: var(--sand, #f6f3ec); }
  .trust--cards ul { grid-template-columns: 1fr; gap: var(--space-3); }
  .trust--cards li { box-shadow: none; padding: var(--space-4) !important; }
}

/* trust bar on calls to action */
.trust-bar { list-style: none; margin: var(--space-6) 0 0; padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8);
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-float); width: fit-content; max-width: 100%; }
.trust-bar li, .trust-bar a { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 var(--text-sm)/1.2 var(--font-head); color: var(--navy); text-decoration: none; }
.trust-bar svg { width: 18px; height: 18px; color: var(--brass); }
.trust-bar .tb-rating svg { color: var(--gold-bright); }
.cta-band .trust-bar { grid-column: 1 / -1; margin-top: 0; }

/* reviews */
.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brass); border-radius: var(--radius); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.review .stars svg { width: 18px; height: 18px; }
.review blockquote { margin: 0; } .review blockquote p { font-size: var(--text-base); line-height: 1.6; color: var(--ink); }
.review .who { margin-top: auto; } .review .who strong { font-family: var(--font-head); color: var(--navy); }
.review .src { font-size: var(--text-xs); color: var(--muted); margin-top: 0; } .review .src a { color: inherit; }

/* hours in footer */
.footer-hours { display: flex; align-items: center; gap: 6px; margin-top: var(--space-3); } .footer-hours svg { width: 14px; height: 14px; }

/* desktop estimate side tab */
.side-tab { display: none; }
@media (min-width: 1100px) {
  .side-tab { display: block; position: fixed; right: 0; top: 50%; z-index: 40; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
    background: var(--gold-bright); color: var(--navy-deep, #0a2546); font: 700 var(--text-sm)/1 var(--font-head); letter-spacing: .02em;
    padding: var(--space-4) 10px; border-radius: 0 var(--radius) var(--radius) 0; text-decoration: none; box-shadow: var(--shadow-float); }
  .side-tab:hover { padding-right: 14px; }
}
.hero-rating strong, .util-rating strong { color: #fff; font-family: var(--font-head); }
@media (max-width: 899px) {
  .trust--cards ul { grid-template-columns: 1fr 1fr; }
  .trust--cards li { grid-template-columns: 1fr; row-gap: var(--space-2); padding: var(--space-4) var(--space-3) !important; }
  .trust--cards .ti { grid-row: auto; width: 36px; height: 36px; } .trust--cards .ti svg { width: 18px; height: 18px; }
  .trust--cards strong, .trust--cards span:not(.ti) { grid-column: 1; }
  .trust--cards span:not(.ti) { font-size: var(--text-xs); }
}
/* About without a photo: copy left, process steps right */
@media (min-width: 900px) { .about--solo { grid-template-columns: 6fr 6fr; } }
.about--solo .process-h { margin-top: 0; }
.trust--cards li { align-content: start; }
.section-head .eyebrow, .eyebrow { font-size: var(--text-xs) !important; color: var(--navy) !important; margin-top: 0 !important; }
.region-night .eyebrow, .region-brand .eyebrow, .region-night .section-head .eyebrow, .region-brand .section-head .eyebrow { color: #fff !important; }
.composed-note { font-size: var(--text-xs); color: var(--muted); border-left: 2px dashed var(--line-strong, #cfc8b8); padding-left: 8px; margin-top: var(--space-3); }

/* ═══ Footer v2 — four groups, towns behind one disclosure ═════════════════ */
.ft-grid { display: grid; gap: var(--space-6); padding-bottom: var(--space-group); }
@media (min-width: 900px) {
  .ft-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; }
}
.ft-logo-link { display: inline-block; padding: 0 !important; }
.ft-brand .footer-logo { width: 96px; height: auto; display: block; }
.ft-tag { margin-top: var(--space-4); color: var(--night-text); max-width: 32ch; line-height: 1.5; }
.ft-contact { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.ft-contact li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3); align-items: start; }
.ft-contact svg { width: 16px; height: 16px; color: var(--brass); margin-top: 3px; }
.ft-contact a, .ft-contact span { padding: 0 !important; overflow-wrap: anywhere; }
.ft-socials { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.site-footer .ft-soc { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--night-line); display: inline-grid !important; place-items: center; padding: 0 !important; color: #fff; }
.site-footer .ft-soc svg { width: 16px; height: 16px; }
.site-footer .ft-soc--text { width: auto; border-radius: 999px; padding: 0 14px !important; font-size: var(--text-xs); font-weight: 600; }
.site-footer .ft-soc:hover { border-color: var(--gold-bright); color: var(--gold-bright); text-decoration: none; }

/* link groups: headings on desktop, accordions on phones */
.ft-col { border-top: 1px solid var(--night-line); }
.ft-col > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer;
  font: 700 var(--text-sm)/1 var(--font-head); color: #fff; letter-spacing: .01em; }
.ft-col > summary::-webkit-details-marker { display: none; }
.ft-col > summary .chev { width: 18px; height: 18px; color: #93a3ba; transition: transform var(--base) var(--ease); }
.ft-col[open] > summary .chev { transform: rotate(180deg); }
.ft-col ul { list-style: none; margin: 0; padding: 0 0 var(--space-4); display: grid; gap: 0; }
.ft-col li a { display: inline-block; padding: 5px 0 !important; color: var(--night-text) !important; }
.ft-col li a:hover { color: #fff !important; }
.ft-sub { font: 700 var(--text-xs)/1 var(--font-head); color: #93a3ba; text-transform: uppercase; letter-spacing: .08em; margin: var(--space-2) 0 var(--space-2); }
.ft-all a { display: inline-flex !important; align-items: center; gap: 6px; color: var(--gold-bright) !important; font-weight: 600; }
.ft-all svg { width: 16px; height: 16px; }
@media (min-width: 900px) {
  .ft-col { border-top: 0; }
  .ft-col > summary { cursor: default; min-height: 0; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--brass); width: fit-content; }
  .ft-col > summary .chev { display: none; }
  .ft-col ul { padding-bottom: var(--space-2); }
}

/* estimate action, inside the footer's own common region */
.ft-action { display: grid; gap: var(--space-3); background: rgba(255,255,255,.04); border: 1px solid var(--night-line); border-top: 3px solid var(--brass);
  border-radius: var(--radius); padding: var(--space-6); }
.ft-action-h { font: 800 var(--text-base)/1.3 var(--font-head); color: #fff; margin-bottom: var(--space-2); }
.ft-action .btn { padding-inline: var(--space-4); }

/* all towns, behind one disclosure */
.ft-towns { border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.ft-towns > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; cursor: pointer;
  font: 700 var(--text-sm)/1 var(--font-head); color: #fff; }
.ft-towns > summary::-webkit-details-marker { display: none; }
.ft-towns > summary .chev { width: 18px; height: 18px; color: var(--gold-bright); transition: transform var(--base) var(--ease); }
.ft-towns[open] > summary .chev { transform: rotate(180deg); }
.ft-towns-grid { display: grid; gap: var(--space-6); padding: var(--space-2) 0 var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ft-towns-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ft-towns-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ft-county-h a { font: 700 var(--text-xs)/1 var(--font-head) !important; color: var(--gold-bright) !important; text-transform: uppercase; letter-spacing: .06em; }
.ft-county ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.ft-county li a { display: block; padding: 3px 0 !important; color: var(--night-text) !important; font-size: var(--text-xs); }
.ft-county li a:hover { color: #fff !important; }

/* legal row */
.ft-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-top: var(--space-6);
  font-size: var(--text-xs); color: #93a3ba; }
@media (max-width: 899px) { .site-footer { padding-bottom: calc(var(--space-group) + 64px); } }
/* footer v2 refinements */
.ft-contact a, .ft-contact span { overflow-wrap: normal; word-break: normal; }
@media (min-width: 900px) { .ft-grid { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); } }
/* towns: one balanced multi-column flow instead of one tall Bergen column */
.ft-towns-grid { display: block; columns: 2; column-gap: var(--space-8); }
@media (min-width: 700px) { .ft-towns-grid { columns: 3; } }
@media (min-width: 1024px) { .ft-towns-grid { columns: 5; } }
.ft-county { break-inside: auto; margin-bottom: var(--space-6); }
.ft-county-h { break-after: avoid; margin-bottom: var(--space-2); }
.ft-county ul { margin-top: 0; }
.ft-county li { break-inside: avoid; }
@media (max-width: 899px) {
  .ft-grid { gap: 0; }
  .ft-brand { margin-bottom: var(--space-6); }
  .ft-col:last-of-type { border-bottom: 1px solid var(--night-line); }
  .ft-action { margin-top: var(--space-6); }
  .ft-towns { margin-top: var(--space-6); }
}
/* statewide map: one colour for every county, gold on hover/highlight */
.region-brand .nj-map path.is-core { fill: var(--brass); stroke: var(--navy-deep); }
.nj-map path.is-core { fill: #8fa6c4; }
.region-brand .nj-map path.is-lit, .nj-map path.is-lit { fill: var(--gold-bright); }
/* service-area shared sections */
.steps-grid--area { margin-top: var(--space-4); }
.steps-grid--area h3 { font-size: var(--text-h4); margin-top: 2px; }
.materials { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 700px) { .materials { grid-template-columns: 1fr 1fr; } }
.materials li { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: var(--radius); padding: var(--space-4) var(--space-6); }
.materials h3 { font-size: var(--text-h4); color: var(--navy); }
.materials p { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--muted); }
.hub-more { max-width: 880px; } .hub-more > section + section { margin-top: var(--space-block); }
.tips { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.tips li { padding-left: var(--space-6); position: relative; }
.tips li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 2px; background: var(--brass); transform: rotate(45deg); }
.tips strong { color: var(--navy); }

/* ═══ Mobile: icon-led controls, small labels ══════════════════════════════ */
.lbl-m { display: none; }
@media (max-width: 1023px) {
  /* menu: the bare icon, no box, no word */
  .menu-toggle { border: 0; background: transparent; padding: 0; width: 44px; height: 44px; min-height: 44px; justify-content: center; border-radius: 50%; margin-right: -10px; }
  .menu-toggle .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .menu-toggle svg { width: 26px; height: 26px; stroke-width: 1.75; }
  .menu-toggle:active { background: var(--sand, #f6f3ec); }

  /* bottom bar: icon over a small label */
  .action-bar { --bar-h: 58px; }
  .action-bar a { flex-direction: column; gap: 4px; font: 600 11px/1 var(--font-body); letter-spacing: .03em; text-transform: uppercase; }
  .action-bar svg { width: 22px; height: 22px; stroke-width: 1.75; }

  /* in-page buttons: compact, icon first, short label */
  .btn { min-height: 46px; padding: 0 16px; font-size: var(--text-sm); gap: 8px; }
  .btn svg { width: 18px; height: 18px; }
  .btn--call .lbl-m { display: inline; } .btn--call .lbl-d { display: none; }
  .btn--primary[href*="free-roof-estimate"]::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%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' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E") center / contain no-repeat; }
  .cta-band .btn-row, .cta-photo .btn-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); }
  .ft-action { grid-template-columns: 1fr auto; align-items: center; }
  .ft-action .ft-action-h { grid-column: 1 / -1; }
  .ft-action .btn--block { width: auto; }
}

/* ── Contact page (v1.5.0): one region per way to reach us, form beside, map below ── */
.ct-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .ct-grid { grid-template-columns: 7fr 5fr; gap: var(--space-8); } }
.ct-reach h2 { margin-bottom: var(--space-4); }
.ct-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .ct-cards { grid-template-columns: 1fr 1fr; } }
.ct-card a { display: flex; gap: var(--space-3); align-items: flex-start; height: 100%; padding: var(--space-4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ct-card a:hover { border-color: var(--brass); box-shadow: 0 8px 24px rgba(14,52,95,.10); transform: translateY(-2px); }
.ct-card a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.ct-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--gold-bright); }
.ct-ic svg { width: 20px; height: 20px; }
.ct-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-l { font: 700 var(--text-xs)/1.2 var(--font-head, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.ct-v { font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.ct-n { font-size: var(--text-sm); color: var(--muted, #5b6472); }
.ct-hours, .ct-trust li { display: flex; gap: var(--space-2); align-items: center; }
.ct-hours { margin: var(--space-6) 0 0; color: var(--ink-2, #3d4757); }
.ct-hours svg, .ct-trust svg { flex: none; width: 18px; height: 18px; color: var(--brass); }
.ct-trust { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-sm); font-weight: 600; color: var(--navy); }
.ct-where { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .ct-where { grid-template-columns: 7fr 5fr; gap: var(--space-8); } }
.ct-map { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--sand-2); }
.ct-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.eyebrow-s { font: 700 var(--text-xs)/1 var(--font-head, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 var(--space-2); }
.ct-addr address { font-style: normal; font-size: var(--text-lg, 1.125rem); line-height: 1.5; color: var(--navy); font-weight: 600; margin-bottom: var(--space-4); }
.ct-addr .btn svg { width: 18px; height: 18px; }
.ct-bottom { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 900px) { .ct-bottom { grid-template-columns: 7fr 5fr; gap: var(--space-8); } }
@media (max-width: 899px) { .ct-map { aspect-ratio: 4 / 3; } }

/* ── Estimate popup (v1.6.0) — photo under a navy scrim, white fields, one gold action ── */
html.pm-lock { overflow: hidden; }
.pm { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; color: #fff; }
.pm:not([open]) { display: none; }
.pm[open] { display: grid; place-items: center; }
.pm::backdrop { background: rgba(6, 18, 36, .72); backdrop-filter: blur(3px); }
.pm-box { position: relative; width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(10,37,70,.86), rgba(10,37,70,.94)), var(--pm-bg, none) center / cover no-repeat, var(--navy-deep);
  box-shadow: 0 30px 80px rgba(0,0,0,.45); border-top: 4px solid var(--brass); animation: pm-in .22s ease-out; }
@keyframes pm-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pm-box { animation: none; } }
.pm-body { padding: var(--space-12) var(--space-8) var(--space-8); }
.pm-x { position: absolute; top: var(--space-3); right: var(--space-3); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08);
  color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s; z-index: 1; }
.pm-x:hover { background: rgba(255,255,255,.18); } .pm-x svg { width: 20px; height: 20px; }
.pm-x:focus-visible, .pm-form :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.pm-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font: 700 var(--text-xs)/1.2 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-bright); }
.pm-eyebrow svg { width: 16px; height: 16px; }
.pm h2 { color: #fff; font: 800 clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem)/1.1 var(--font-head); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.pm-lede { color: rgba(255,255,255,.82); margin: var(--space-3) 0 0; }
.pm-form { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.pm-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pm-form input:not([type=hidden]):not([type=checkbox]), .pm-form select, .pm-form textarea { width: 100%; min-height: 52px; padding: 0 var(--space-4); border: 2px solid transparent; border-radius: var(--radius);
  background: #f6f5f2; color: var(--ink, #1c2433); font: 400 1rem/1.4 var(--font-body); appearance: none; -webkit-appearance: none; transition: border-color .15s, background .15s; }
.pm-form textarea { padding: var(--space-3) var(--space-4); min-height: 96px; resize: vertical; }
.pm-form select { padding-right: var(--space-12); cursor: pointer;
  background: #f6f5f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e345f' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; }
.pm-form select:invalid { color: #6b7280; }
.pm-form ::placeholder { color: #6b7280; opacity: 1; }
.pm-form input:focus, .pm-form select:focus, .pm-form textarea:focus { background-color: #fff; border-color: var(--gold-bright); outline: 0; }
.pm-form .is-bad { border-color: #f87171 !important; background-color: #fff5f5; }
.pm-err { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: rgba(248,113,113,.16); color: #fecaca; font-size: var(--text-sm); }
.pm-go { min-height: 56px; margin-top: var(--space-2); font-size: 1.0625rem; gap: var(--space-3); }
.pm-go svg { width: 20px; height: 20px; transition: transform .15s; } .pm-go:hover svg { transform: translateX(3px); }
.pm-go.is-busy { opacity: .7; cursor: progress; } .pm-go.is-busy span::after { content: "…"; }
.pm-go::before { display: none !important; }   /* no doc icon here: the arrow is the cue */
.pm-or { margin: var(--space-1) 0 0; text-align: center; font-size: var(--text-sm); color: rgba(255,255,255,.75); }
.pm-or a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; }
.pm-or svg { width: 16px; height: 16px; color: var(--gold-bright); }
.pm-done { text-align: center; display: grid; justify-items: center; gap: var(--space-3); padding-block: var(--space-16) var(--space-12); }
.pm-done:focus { outline: 0; }
.pm-body[hidden], .pm-err[hidden] { display: none; }
.pm-check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-bright); color: var(--navy-deep); }
.pm-check svg { width: 32px; height: 32px; }
.pm-done .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); margin-top: var(--space-3); }
@media (max-width: 599px) {   /* phones: a full-height sheet, thumb-sized fields */
  .pm[open] { place-items: stretch; }
  .pm-box { width: 100%; max-height: 100vh; height: 100vh; max-height: 100dvh; height: 100dvh; border-radius: 0; animation-name: pm-up; }   /* vh first: iOS before 15.4 has no dvh */
  @keyframes pm-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .pm-body { padding: var(--space-16) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); }
  .pm h2 { font-size: 1.75rem; }
}

/* ── Privacy consent (v1.7.0): one quiet line above the send button; TaskFlow needs it ── */
.consent { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-2) var(--space-3); align-items: start; font-size: var(--text-xs); line-height: 1.45; color: var(--muted); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); cursor: pointer; }
.consent input:focus-visible { outline: 3px solid var(--focus, var(--gold-bright)); outline-offset: 2px; }
.consent--dark { color: rgba(255,255,255,.78); }
.consent--dark input { accent-color: var(--gold-bright); }
.pm-form .consent { margin-top: var(--space-1); }
.pm-form .consent.is-bad { color: #fecaca; background: none; border: 0; }
.pm-form .consent.is-bad input { outline: 2px solid #f87171; outline-offset: 2px; }

/* ── Service menus (v1.8.0): Roofing · Chimney · Other Services, each item with its one-line scope ── */
.nav-panel--svc a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-block: var(--space-2); }
.nav-panel--svc .nav-t { font-weight: 600; color: var(--ink); }
.nav-panel--svc .nav-sub { font-size: var(--text-xs); line-height: 1.35; color: var(--muted); }
.nav-panel--svc .nav-all { flex-direction: row; align-items: center; }
@media (min-width: 1024px) {
  .nav-panel--svc { min-width: 300px; }
  #panel-roof { min-width: 560px; }
  #panel-roof ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-2); }
  #panel-roof li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1023px) { .nav-panel--svc .nav-sub { display: none; } .nav-panel--svc .nav-all { justify-content: flex-start; } }   /* phones: names only, the sheet stays short */

/* header fit with 8 menu items: one line per label, logo never squeezed, phone collapses to an icon on narrow desktops */
.brand { flex: none; }
.nav-item > a, .nav-trigger { white-space: nowrap; }
.nav-trigger svg { flex: none; }
.header-phone { align-items: center; gap: 6px; }
.header-phone svg { width: 18px; height: 18px; flex: none; color: var(--brass); }
@media (min-width: 1024px) {
  .header-row { gap: var(--space-4); }
  .nav-list { gap: 0; }
  .nav-item > a, .nav-trigger { font-size: 14px; padding: 0 10px; gap: 4px; }
  .nav-trigger svg { width: 14px; height: 14px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-row { gap: var(--space-3); }
  .nav-item > a, .nav-trigger { font-size: 13.5px; padding: 0 6px; gap: 3px; }
  .header-cta { padding: 0 12px; font-size: 13px; }
}
/* Six menu items since v1.10: the full phone number fits at every desktop width (checked 1024–1440). */

/* ═══ Reviews (v1.10): multi-paragraph quotes, more-reviews disclosure ═══ */
.review blockquote p + p { margin-top: var(--space-2); }
.rv-more { margin-top: var(--space-6); }
.rv-more > summary { display: inline-flex; align-items: center; gap: var(--space-2); }
.rv-more > .body { padding-top: var(--space-4); }

/* v1.10.1: the rating in the top bar is a <p> when there's no Google profile link, so it needs its own spacing */
.util-rating { display: inline-flex; align-items: center; gap: 6px; margin-top: 0; margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE SYSTEM v1.11 — every inner page (service, county, town, guide, support)
   Same text, same order, same links as before; presentation only.
   FIGURE/GROUND  navy hero, one bright-gold action, white proof card
   COMMON REGION  one band per H2, alternating paper / sand surfaces
   PROXIMITY      heading column + content column; 16px inside a card, 24–48 between
   SIMILARITY     one card treatment for checks, labelled items, drivers, links, FAQs
   CONTINUITY     sticky section bar with progress; numbered bands; step timeline
   COMMON FATE    one reveal motion for everything entering the viewport
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --card: var(--sand); --card-line: var(--line); --band-pad: clamp(56px, 7vw, 104px); }

/* ── hero ── */
.page-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; border-bottom: 0;
  background: radial-gradient(ellipse 55% 80% at 88% 20%, rgba(186,155,91,.20), transparent 70%), linear-gradient(160deg, #0E345F 0%, #0A2546 62%, #081E3A 100%);
  padding-block: clamp(32px, 5vw, 64px) clamp(56px, 7vw, 96px); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 22px); }
.page-hero.page-head--photo { background: var(--night); }
.page-hero.page-head--photo::before { background: linear-gradient(90deg, rgba(8,30,58,.94) 0%, rgba(8,30,58,.82) 45%, rgba(8,30,58,.55) 100%); }
.page-hero > .roofline { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; opacity: .55; }
.ph-grid { position: relative; display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 1024px) { .page-hero.has-card .ph-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); } }
.page-hero .crumbs ol, .page-hero .crumbs a { color: rgba(255,255,255,.66); }
.page-hero .crumbs [aria-current] { color: #fff; }
.page-hero .crumbs li + li::before { color: rgba(255,255,255,.3); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-4); font: 600 var(--text-xs)/1 var(--font-body);
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright); }
.hero-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.page-hero h1 { color: #fff; max-width: 18ch; margin-top: var(--space-3); }
.page-hero .lead { color: rgba(255,255,255,.86); max-width: 58ch; margin-top: var(--space-4); }
.page-hero .btn-row { margin-top: var(--space-8); }
.page-hero .btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.page-hero .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.page-hero .facts { gap: var(--space-2); margin-top: var(--space-6); color: #fff; }
.page-hero .facts li { gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: var(--text-xs); font-weight: 500; }
.page-hero .facts li::before { display: none; }
.page-hero .facts svg { width: 15px; height: 15px; color: var(--gold-bright); flex: none; }

/* proof card */
.hero-card { background: #fff; color: var(--text); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: 0 24px 60px rgba(4,16,34,.35);
  border-top: 3px solid var(--brass); display: grid; gap: var(--space-4); }
.hc-rating { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); text-decoration: none; margin: 0; }
.hc-rating .stars { display: inline-flex; gap: 2px; color: var(--gold-bright); } .hc-rating .stars svg { width: 16px; height: 16px; }
.hc-rating strong { color: var(--ink); font-family: var(--font-head); }
.hc-quote { margin: 0; padding: var(--space-4); background: var(--sand); border-radius: var(--radius); }
.hc-quote .stars { display: none; }
.hc-quote blockquote { margin: 0; } .hc-quote blockquote p { font-size: var(--text-base); line-height: 1.55; color: var(--ink); }
.hc-quote blockquote p::before { content: "“"; } .hc-quote blockquote p::after { content: "”"; }
.hc-quote figcaption { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
.hc-list { list-style: none; display: grid; gap: var(--space-3); padding: 0; margin: 0; }
.hc-list li { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); align-items: center; font-size: var(--text-sm); color: var(--ink); font-weight: 500; }
.hc-list svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--navy-tint); color: var(--navy); }
.hc-map { background: #fff; border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: 0 24px 60px rgba(4,16,34,.35); color: var(--text); }
.hc-map figure { margin: 0; }
@media (max-width: 1023px) { .ph-card { display: none; } }

/* ── sticky section bar ── */
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .subnav { background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(10px); } }
.subnav ol { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.subnav ol::-webkit-scrollbar { display: none; }
.subnav a { display: flex; align-items: center; min-height: 52px; padding: 0 14px; font: 600 var(--text-sm)/1 var(--font-body); color: var(--muted); white-space: nowrap;
  text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--base) var(--ease), border-color var(--base) var(--ease); }
.subnav li:first-child a { padding-left: 0; }
.subnav a:hover { color: var(--ink); }
.subnav a.is-on { color: var(--ink); border-bottom-color: var(--navy); }   /* state indicator ≥3:1 (1.4.11) */
.subnav-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.subnav-bar i { display: block; height: 100%; background: var(--gold-bright); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ── bands ── */
.band { padding-block: var(--band-pad); scroll-margin-top: calc(var(--header-h) + 52px); }
.band--alt { background: var(--sand); --card: #fff; }
.band-in { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .band-in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); }
  .band-head { position: sticky; top: calc(var(--header-h) + 84px); align-self: start; }
}
.band-no { display: flex; align-items: center; gap: 12px; font: 800 var(--text-xs)/1 var(--font-head); letter-spacing: .14em; color: var(--gold-ink); }
.band-no::after { content: ""; width: 40px; height: 2px; background: var(--brass); }
.band-head h2 { margin-top: var(--space-4); max-width: 16ch; }
.band-help { margin-top: var(--space-6); padding: var(--space-4) var(--space-6); border-radius: var(--radius); background: var(--navy); color: #fff; display: grid; gap: 4px; }
.band-help p { color: rgba(255,255,255,.75); font-size: var(--text-sm); margin: 0; }
.band-help a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 800 var(--text-h3)/1.2 var(--font-head); text-decoration: none; }
.band-help svg { width: 18px; height: 18px; color: var(--gold-bright); }
.band-body { min-width: 0; max-width: 780px; }
.band-body > p:first-child { font-size: var(--text-lead); line-height: 1.6; color: var(--ink); }
.band-body p { max-width: 68ch; }
.band-body p + p, .band-body > * + p { margin-top: var(--space-4); }
.band-body > * + ul, .band-body > * + ol, .band-body > * + dl, .band-body > * + .slider, .band-body > * + .gallery, .band-body > * + .chips,
.band-body > * + .county-block, .band-body > * + .row-list, .band-body > * + .related, .band-body > * + .faq { margin-top: var(--space-6); }
.band-body h3 { margin: var(--space-8) 0 var(--space-3); }

/* checks → a two-column grid of soft cards */
.article .band ul.ticks { display: grid; gap: var(--space-3); list-style: none; padding: 0; }
@media (min-width: 640px) { .article .band ul.ticks { grid-template-columns: 1fr 1fr; } }
.article .band ul.ticks li { margin: 0; padding: 14px 16px 14px 48px; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); line-height: 1.45; color: var(--ink); }
.article .band ul.ticks li::before { left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 0; border-radius: 50%; transform: none;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9c957' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* "Label: text" lists and housing tips → cards */
.band ul.feat, .band ul.tips { display: grid; gap: var(--space-3); list-style: none; padding: 0; }
@media (min-width: 640px) { .band ul.feat, .band ul.tips { grid-template-columns: 1fr 1fr; } }
.band ul.feat li, .band ul.tips li { margin: 0; padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4); background: var(--card); border: 1px solid var(--card-line);
  border-left: 3px solid var(--brass); border-radius: var(--radius); line-height: 1.5; }
.band ul.feat li::before, .band ul.tips li::before { display: none; }
.band ul.feat strong, .band ul.tips strong { display: block; color: var(--ink); font-family: var(--font-head); font-size: var(--text-base); margin-bottom: 4px; }
.feat .sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* price drivers → numbered cards */
.article .band dl.drv-grid { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 640px) { .article .band dl.drv-grid { grid-template-columns: 1fr 1fr; } }
.drv { position: relative; padding: var(--space-6) var(--space-6) var(--space-6); background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); }
.drv-n { display: block; font: 800 var(--text-xs)/1 var(--font-head); letter-spacing: .1em; color: var(--gold-ink); margin-bottom: var(--space-3); }
.article .band dl.drv-grid dt { margin: 0; font: 800 var(--text-base)/1.3 var(--font-head); color: var(--ink); }
.article .band dl.drv-grid dd { margin: 6px 0 0; color: var(--text); font-size: var(--text-sm); line-height: 1.55; }
@media (max-width: 639px) {   /* many drivers: a swipeable row on phones */
  .article .band dl.drv-grid--many { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-3); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--space-2); scrollbar-width: none; }
  .drv-grid--many .drv { flex: 0 0 78%; scroll-snap-align: start; }
}

/* sliders: process steps + reviews */
.slider { position: relative; min-width: 0; }
.steps-track, .reviews-track { display: grid; grid-auto-flow: column; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  list-style: none; margin: 0; padding: 4px 2px var(--space-4); scrollbar-width: none; overscroll-behavior-x: contain; }
.steps-track::-webkit-scrollbar, .reviews-track::-webkit-scrollbar { display: none; }
.steps-track > li, .reviews-track > li { scroll-snap-align: start; }
.article .band ol.steps-track { counter-reset: st; padding-left: 2px; grid-auto-columns: minmax(250px, calc((100% - 2 * var(--space-4)) / 3)); }
@media (max-width: 639px) { .article .band ol.steps-track { grid-auto-columns: 82%; } }
.article .band ol.steps-track > li { counter-increment: st; position: relative; margin: 0; padding: 56px var(--space-6) var(--space-6); background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--radius); line-height: 1.55; font-size: var(--text-sm); }
.article .band ol.steps-track > li::marker { content: none; }
.article .band ol.steps-track > li::before { content: counter(st); position: absolute; left: var(--space-6); top: var(--space-6); width: 34px; height: 34px; margin-top: -6px;
  display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--gold-bright); font: 800 15px/1 var(--font-head); }
.article .band ol.steps-track > li::after { content: ""; position: absolute; left: calc(var(--space-6) + 44px); right: var(--space-6); top: calc(var(--space-6) + 11px); height: 2px;
  background: linear-gradient(90deg, var(--brass), transparent); opacity: .5; }
.article .band ol.steps-track > li strong { display: block; font: 800 var(--text-base)/1.3 var(--font-head); color: var(--ink); margin-bottom: 4px; }
.reviews-track { grid-auto-columns: minmax(280px, calc((100% - var(--space-4)) / 2)); }
@media (max-width: 639px) { .reviews-track { grid-auto-columns: 86%; } }
.reviews-track .review { height: 100%; }
.slider-nav { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.slider-nav[hidden] { display: none; }
.sl-btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), opacity var(--fast); }
.sl-btn:hover { border-color: var(--ink); } .sl-btn:disabled { opacity: .35; cursor: default; }
.sl-btn svg { width: 18px; height: 18px; } .sl-btn[data-dir="-1"] svg { transform: rotate(180deg); }
.sl-bar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.sl-bar i { display: block; height: 100%; width: 100%; background: var(--navy); transform-origin: 0 50%; transform: scaleX(var(--p, .2)); transition: transform var(--base) var(--ease); }
.rv-all { margin-bottom: var(--space-4); }

/* FAQ → card accordion */
.band--faq .faq { border: 0; display: grid; gap: var(--space-2); }
.band--faq .faq .disclose, .band--faq .faq .disclose--more > .disclose { border: 1px solid var(--card-line); background: var(--card); border-radius: var(--radius); padding: 0 var(--space-6); }
.band--faq .faq .disclose--more { border: 0; background: none; padding: 0; display: grid; gap: var(--space-2); }
.band--faq .faq .disclose--more > summary { padding: 0 var(--space-2); }
.band--faq .faq .disclose > summary { min-height: 64px; font-weight: 600; color: var(--ink); }
.band--faq .faq .disclose[open] { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(10,37,70,.06); }

/* Keep reading → link cards */
.band--links .related { display: grid; gap: var(--space-3); border: 0; }
@media (min-width: 640px) { .band--links .related { grid-template-columns: 1fr 1fr; } }
.band--links .related li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--space-4) var(--space-6); border: 1px solid var(--card-line);
  border-radius: var(--radius); background: var(--card); transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.band--links .related li:hover { border-color: var(--brass); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,37,70,.08); }
.band--links .related .label { font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.band--links .related .label:empty { display: none; }
.band--links .related a { font-weight: 600; color: var(--ink); text-decoration: none; padding: 0; }
.band--links .related a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.band--links .related a::before { content: "→"; float: right; margin-left: 8px; color: var(--brass); }
.see-work { margin-top: var(--space-6); color: var(--muted); font-size: var(--text-sm); }

/* lists of pages (county services, town services), town chips, county blocks */
.band .row-list { border: 0; background: none; display: grid; gap: var(--space-3); overflow: visible; }
@media (min-width: 640px) { .band .row-list { grid-template-columns: 1fr 1fr; } }
.band .row-list > li { border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card); }
.band .row-list .row-link { border-top: 0; padding: var(--space-4) var(--space-6); }
.band .county-block { padding: var(--space-6); border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card); }
.band .county-block + .county-block { margin-top: var(--space-3); }
.band .chips a.chip, .band .chips .chip { background: #fff; }
.band .disclose { border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card); padding: 0 var(--space-6); }
.band .disclose + .disclose { margin-top: var(--space-3); }

/* mid-page action strip */
.mid-cta { background: var(--navy); color: #fff; padding-block: var(--space-8); }
.mid-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.mid-cta p { margin: 0; color: rgba(255,255,255,.8); max-width: 60ch; }
.mid-cta strong { display: block; color: #fff; font: 800 var(--text-h3)/1.3 var(--font-head); margin-bottom: 4px; }
.mid-cta .btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
@media (max-width: 1023px) { .mid-cta .btn-row { display: flex; } }

/* ── reveal motion (only below the fold, only with JS, never with reduced motion) ── */
.rv { opacity: 0; transform: translateY(18px); }
.rv-on { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } .rv-on { transition: none; } .steps-track, .reviews-track, .subnav ol { scroll-behavior: auto; } }
.reviews.reviews-track { grid-template-columns: none; }
.reviews-track { grid-auto-columns: calc((100% - var(--space-4)) / 2); }
@media (max-width: 639px) { .reviews-track { grid-auto-columns: 86%; } }

/* hub pages (all services, guides): the same card grid for lists of pages */
.svc-group .row-list, .page-hero ~ .section .row-list { border: 0; background: none; display: grid; gap: var(--space-3); overflow: visible; }
@media (min-width: 640px) { .svc-group .row-list, .page-hero ~ .section .row-list { grid-template-columns: 1fr 1fr; } }
.svc-group .row-list > li, .page-hero ~ .section .row-list > li { border: 1px solid var(--line); border-radius: var(--radius); background: var(--sand);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.svc-group .row-list > li:hover, .page-hero ~ .section .row-list > li:hover, .band .row-list > li:hover { border-color: var(--brass); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,37,70,.08); }
.svc-group .row-list .row-link, .page-hero ~ .section .row-list .row-link { border-top: 0; padding: var(--space-4) var(--space-6); }
.svc-group + .svc-group { margin-top: var(--space-12); }
.svc-group > h2 { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-6); }
.svc-group > h2::before { content: ""; width: 28px; height: 2px; background: var(--brass); }

/* ═══ v1.11.1 accessibility (WCAG 2.2 AA) ═══ */
:root { --brass-text: #9c7d3a; --field-line: #8a8579; }   /* field-line 3.6:1 on white: inputs must be visible (1.4.11) */
.site-footer .btn--primary, .site-footer .btn--primary:hover, .site-footer a.btn--primary { color: var(--ink); }
/* the sticky section bar adds 52px under the header: keep focused and jumped-to elements clear of both (2.4.11) */
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 72px); }
/* reflow at 320px (1.4.10): the long email address may wrap anywhere; footer columns can shrink */
.site-footer .ft-grid > *, .ft-brand, .ft-contact, .ft-contact li { min-width: 0; }
.ft-contact a, .utility a { overflow-wrap: anywhere; }
@media (max-width: 359px) {
  .ft-action, .cta-band .btn-row, .cta-photo .btn-row { grid-template-columns: 1fr; }
  .ft-action .btn--block { width: 100%; }
  .btn { white-space: normal; text-align: center; }
}
.ft-action > * { min-width: 0; }

/* ═══ v1.12 surfaces: each section reads as its own region ═══════════════════
   paper (white) · sand (warm) · tint (cool blue) · night (navy). The order is set
   per page in pr_bands(): steps + projects on navy, price drivers on tint,
   the rest alternating, never the same surface twice in a row. */
.band--paper { background: #fff; --card: var(--sand); --card-line: var(--line); }
.band--sand  { background: var(--sand); --card: #fff; --card-line: var(--line); }
.band--tint  { background: #edf2f8; --card: #fff; --card-line: #d9e2ee; }
.band--night { --card: rgba(255,255,255,.06); --card-line: rgba(255,255,255,.14); color: rgba(255,255,255,.86);
  background: radial-gradient(ellipse 50% 70% at 100% 0%, rgba(186,155,91,.16), transparent 70%), linear-gradient(160deg, #0E345F 0%, #0A2546 70%); }
.band + .band, .band + .mid-cta, .mid-cta + .band { border-top: 0; }
.band--paper + .band--paper, .band--sand + .band--sand { border-top: 1px solid var(--line); }
.band--night h2, .band--night h3, .band--night strong, .band--night dt { color: #fff; }
.band--night .band-no { color: var(--gold-bright); }
.band--night .band-no::after { background: var(--gold-bright); opacity: .6; }
.band--night .band-body > p:first-child { color: #fff; }
.band--night p, .band--night li, .band--night dd { color: rgba(255,255,255,.84); }
.band--night a:not(.btn) { color: #fff; text-decoration-color: var(--gold-bright); }
.band--night :focus-visible { outline-color: var(--gold-bright); }
.article .band--night ol.steps-track > li { color: rgba(255,255,255,.84); }
.article .band--night ol.steps-track > li::before { background: var(--gold-bright); color: var(--ink); }
.article .band--night ol.steps-track > li::after { background: linear-gradient(90deg, var(--gold-bright), transparent); }
.band--night .sl-btn { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.band--night .sl-btn:hover { border-color: #fff; }
.band--night .sl-bar { background: rgba(255,255,255,.18); } .band--night .sl-bar i { background: var(--gold-bright); }
.band--tint .band-no { color: var(--navy); } .band--tint .band-no::after { background: var(--navy); opacity: .4; }

/* project showcase: a moving row of tall photo cards, edge to edge */
.band--work { padding-block: var(--band-pad); overflow: hidden; }
.work-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); margin-bottom: var(--space-8); }
.work-head h2 { margin-top: var(--space-4); max-width: 20ch; }
.work-head .band-no:empty { display: none; }
.work-intro { margin: 0; max-width: 44ch; color: rgba(255,255,255,.78); }
.work-all { order: 3; }
.band--work .work-all { border-color: rgba(255,255,255,.4); color: #fff; }
.band--work .work-all:hover { border-color: #fff; }
.marquee { position: relative; }
.mq-track { display: flex; gap: var(--space-4); padding: var(--space-2) var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.mq-track::-webkit-scrollbar { display: none; }
.marquee.is-moving .mq-track { overflow: visible; width: max-content; padding-inline: 0; animation: mq var(--mq-dur, 60s) linear infinite; }
.marquee.is-moving:hover .mq-track, .marquee.is-moving:focus-within .mq-track, .marquee.is-paused .mq-track { animation-play-state: paused; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--mq-shift, 50%))); } }
.work-card { position: relative; flex: 0 0 clamp(180px, 17vw, 244px); aspect-ratio: 3 / 4; margin: 0; border-radius: 18px; overflow: hidden; scroll-snap-align: start;
  background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(255,255,255,.1); transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.work-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.work-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 16px; color: #fff; font: 700 var(--text-sm)/1.3 var(--font-body);
  background: linear-gradient(transparent, rgba(4,16,34,.88)); pointer-events: none; }
.work-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--gold-bright), 0 18px 40px rgba(0,0,0,.35); }
.work-card:hover img { transform: scale(1.05); }
.work-card .tile-open { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; cursor: zoom-in; border-radius: inherit; }
.work-card .tile-open:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: -3px; }
.mq-pause { position: absolute; right: var(--gutter); bottom: calc(-1 * var(--space-12)); display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font: 600 var(--text-xs)/1 var(--font-body); cursor: pointer; }
.mq-pause:hover { border-color: #fff; }
.mq-i { width: 10px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.marquee.is-paused .mq-i { width: 0; height: 0; border-left: 9px solid currentColor; border-right: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.band--work .marquee { margin-bottom: var(--space-12); }
@media (prefers-reduced-motion: reduce) { .marquee.is-moving .mq-track { animation: none; } }
.article .band--night ol.steps-track > li strong, .band--night .drv dt, .band--night ul.feat strong, .band--night ul.tips strong { color: #fff; }
.band--sand { background: #f4f1e9; }

/* v1.12.4: popup on iPhones without <dialog> (iOS < 15.4) */
.pm.pm-poly[open] { position: fixed; inset: 0; z-index: 10000; background: rgba(6, 18, 36, .72); }

/* ═══ v1.13 Current Offers: coupon cards — gold header, service, one line, action, fine print ═══ */
.band--offers { padding-block: var(--band-pad); background: #f7f8fb; }
.offers-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-8); }
.offers-head .band-no { justify-content: center; }
.offers-head h2 { margin-top: var(--space-3); }
.offers-head p { margin-top: var(--space-3); color: var(--muted); }
.offers { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(var(--oc, 4), minmax(0, 1fr)); max-width: calc(var(--oc, 4) * 300px + (var(--oc, 4) - 1) * var(--space-6)); }
.offers--1 { --oc: 1; } .offers--2 { --oc: 2; } .offers--3 { --oc: 3; } .offers--4 { --oc: 4; }
@media (min-width: 640px) and (max-width: 1023px) { .offers--3, .offers--4 { --oc: 2; } }
.offer { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 10px 28px rgba(10,37,70,.08); transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease); }
.offer:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10,37,70,.14); }
.offer--lead { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass), 0 14px 34px rgba(10,37,70,.12); }
.offer-top { display: grid; justify-items: center; gap: 4px; padding: var(--space-8) var(--space-4) var(--space-6); background: var(--gold-bright); color: var(--navy-deep); text-align: center; }
.offer-big { font: 800 clamp(2.25rem, 1.8rem + 1.6vw, 2.75rem)/1 var(--font-head); letter-spacing: -.01em; }
.offer-small { font: 700 var(--text-xs)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.offer-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-6) var(--space-4); }
.offer-body h3 { margin: 0; font: 800 var(--text-h3)/1.25 var(--font-head); color: var(--ink); }
.offer-body > p:not(.offer-fine) { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.offer-btn { margin-top: auto; width: 100%; min-height: 48px; gap: var(--space-2); background: var(--navy-deep); color: #fff; border: 0; cursor: pointer;
  font: 700 var(--text-sm)/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.offer-body > p + .offer-btn { margin-top: var(--space-4); }
.offer-btn:hover { background: var(--navy); color: #fff; }
.offer-btn svg { width: 16px; height: 16px; transition: transform var(--fast) var(--ease); }
.offer-btn:hover svg { transform: translateX(3px); }
.offer-btn::before { display: none !important; }
.offer-fine { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--muted); }
@media (max-width: 639px) {   /* phones: a swipeable row of cards */
  .offers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-4); margin-inline: calc(var(--gutter) * -1); padding: var(--space-2) var(--gutter) var(--space-4); scrollbar-width: none; justify-content: flex-start; }
  .offers::-webkit-scrollbar { display: none; }
  .offer { flex: 0 0 80%; scroll-snap-align: center; }
  .offers--1 { justify-content: center; } .offers--1 .offer { flex-basis: 100%; }
}
/* the claimed offer, inside the popup */
.pm-offer { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: rgba(249,201,87,.14); border: 1px solid rgba(249,201,87,.5); color: #fff; font: 600 var(--text-sm)/1.2 var(--font-body); }
.pm-offer[hidden] { display: none; }
.pm-offer-k { padding: 4px 8px; border-radius: 999px; background: var(--gold-bright); color: var(--navy-deep); font: 800 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }

/* ═══ v1.14 — offices ════════════════════════════════════════════════════════
   The Old Bridge office page reuses the homepage system (hero, trust cards,
   service cards, offers, night bands). New pieces: the address line in the hero,
   the office card + map pair (common region: address, phone and map read as one
   unit), and one block per office in the footer (proximity: each address sits
   with its own number). */
.hero--office .crumbs { margin-bottom: var(--space-3); }
.hero--office .crumbs ol, .hero--office .crumbs a { color: rgba(255,255,255,.7); }
.hero--office .crumbs [aria-current] { color: #fff; }
.hero--office .crumbs li + li::before { color: rgba(255,255,255,.35); }
.hero--office .hero-eyebrow { margin-top: var(--space-2); }
.hero--office h1 { margin-top: var(--space-3); max-width: 16ch; }
.hero-office { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-weight: 600; color: #fff; }
.hero-office svg { width: 18px; height: 18px; color: var(--gold-bright); flex: none; }
.hero-office a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; padding-block: 4px; }
.hero-office a:hover { text-decoration-color: currentColor; }
.of-grid { align-items: start; gap: var(--space-8); }
.of-side { display: grid; gap: var(--space-4); }
.of-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brass); border-radius: var(--radius-lg); padding: var(--space-6); }
.of-card address { font-style: normal; font-size: var(--text-lg, 1.125rem); line-height: 1.5; color: var(--navy); margin-bottom: var(--space-3); }
.of-lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.of-lines li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-2); align-items: center; }
.of-lines svg { width: 18px; height: 18px; color: var(--gold-ink); }
.of-lines a { font-weight: 700; font-size: var(--text-lg, 1.125rem); color: var(--navy); padding-block: 6px; display: inline-block; }
.of-card .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.of-card .btn svg { width: 18px; height: 18px; }
.of-map { aspect-ratio: 16 / 10; }
.of-state { margin-top: var(--space-6); }
.of-state a { font-weight: 600; }
#process .steps-grid { margin-top: var(--space-6); }
#process p { color: rgba(255,255,255,.85); }
#local .tips { margin-top: var(--space-3); }
.ct-office { margin-top: var(--space-8); }
.ct-office .of-card { max-width: 520px; }
/* footer: one block per office */
.ft-offices { display: grid; gap: var(--space-5, 20px); margin-top: var(--space-4); }
.ft-office-h { font: 700 var(--text-xs)/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright); margin: 0; }
.ft-office .ft-contact { margin-top: var(--space-2); }
.ft-contact--shared { margin-top: var(--space-5, 20px); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,.12); }
@media (min-width: 600px) and (max-width: 1023px) { .ft-offices { grid-template-columns: 1fr 1fr; } }
.ft-more { margin-top: var(--space-2); }
.ft-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding-block: 8px; color: var(--gold-bright); font-weight: 600; font-size: var(--text-sm); }
.ft-more summary::-webkit-details-marker { display: none; }
.ft-more summary svg { width: 14px; height: 14px; transition: transform var(--fast) var(--ease); }
.ft-more[open] summary svg { transform: rotate(180deg); }
.ft-empty:empty { display: none; }
.of-more { margin-top: var(--space-4); border-top-color: rgba(255,255,255,.14); }
.region-night .of-more > summary { color: var(--gold-bright); }
.region-night .of-more > summary .chev { color: var(--gold-bright); }
.of-more > .body { padding-bottom: 0; }
#process .when { color: var(--gold-bright); }
#process .steps-grid h3 { color: #fff; }