/* ============================================================
   Clearview Surface Solutions | site.css
   Polished-trustworthy-neighbor register. Light-dominant.

   Built from scratch in Phase 1.5, not derived from the AAC
   chassis. Follows home-service-site skill: Geist + Inter +
   Roboto Slab numerals, no atmospheric backgrounds, neutral
   borders only, sans-only headlines.

   Section index:
     1.  Tokens
     2.  Reset + base
     3.  Typography
     4.  Layout primitives
     5.  Sections + dividers (P23 curve)
     6.  Topbar (utility strip)
     7.  Header (P3 phone-first sticky)
     8.  Buttons
     9.  Hero (P22 form-as-CTA)
     10. Trust strip (slab numerals)
     11. Pillar grid (two-card)
     12. Service grid (image-led cards)
     13. Heritage band (P14)
     14. Process / commitment list (P15)
     15. Multi-source rating widget (P20)
     16. Before/after band (P10) -- hidden until Phase 5
     17. Late-page dark band (P7)
     18. Final CTA
     19. Footer
     20. Forms
     21. Service hub + service+location pages
     22. Page placeholders (About, FAQ, Projects, Reviews, ThankYou)
     23. Reveal animations
     24. Mobile breakpoints
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  /* Surface */
  --bone:        #f4f0e8;   /* warm primary surface */
  --bone-deep:   #ebe5d6;   /* slightly deeper bone for hover/rule lines */
  --paper:       #fbf8f2;   /* card / form surface */
  --white:       #ffffff;

  /* Ink (text + dark surfaces) */
  --ink:         #1a2747;   /* deep navy primary text + dark backgrounds */
  --ink-deep:    #0d1730;   /* deepest navy for hero dark-band */
  --ink-700:     #3b4663;   /* secondary text */
  --ink-500:     #6a7491;   /* tertiary text + captions */
  --ink-300:     #a8aec0;   /* muted text + placeholders */

  /* Brand: USAF blue, primary brand color */
  --brand:       #003594;
  --brand-deep:  #001f5c;
  --brand-soft:  #1e4d8c;

  /* Action = brand blue. CTA chrome leans into the USAF veteran-owned
     identity; consolidates the page on a two-color story (blue + gold)
     instead of fighting blue with red. */
  --action:      #003594;
  --action-deep: #001f5c;
  --action-soft: #1e4d8c;

  /* Gold accent: USAF official gold. Used for veteran/credential moments,
     star ratings, and one trust-strip cell. Bright but not pervasive. */
  --gold:        #ffc72c;
  --gold-deep:   #d6a020;
  --gold-soft:   #ffd35a;

  /* Status */
  --good:        #2f8a4d;   /* open status, success */
  --warn:        #c08400;
  --danger:      #b3261e;

  /* Borders: neutrals only, never brand-tinted (skill rule) */
  --bord-soft:   rgba(26, 39, 71, 0.10);
  --bord:        rgba(26, 39, 71, 0.18);
  --bord-strong: rgba(26, 39, 71, 0.32);
  --bord-on-dark: rgba(255, 255, 255, 0.14);

  /* Shadows: restrained, real depth, no drama */
  --shadow-sm:  0 1px 2px rgba(13, 23, 48, 0.06);
  --shadow-md:  0 4px 14px rgba(13, 23, 48, 0.08);
  --shadow-lg:  0 12px 36px rgba(13, 23, 48, 0.12);

  /* Geometry */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  14px;

  /* Spacing scale */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* Container */
  --wrap-max: 1240px;
  --wrap-pad: 24px;

  /* Type */
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-slab:    "Roboto Slab", Georgia, serif;
}

/* ---------- 2. Reset + base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }

button { font: inherit; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

p { margin: 0 0 var(--s-5) 0; }
p:last-child { margin-bottom: 0; }

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  z-index: 1000;
}

/* Focus rings, brand for visible focus */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- 3. Typography ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin: 0 0 var(--s-4) 0;
}

.eyebrow .bar {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--brand);
}

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.eyebrow--on-dark { color: rgba(255, 255, 255, 0.74); }
.eyebrow--on-dark .bar { background: var(--gold-soft); }

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0;
}

.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.018em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.012em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.006em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--ink-700);
}

.muted { color: var(--ink-500); }

.num-slab {
  font-family: var(--font-slab);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ---------- 4. Layout primitives ---------- */

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.wrap--narrow {
  max-width: 920px;
}

/* ---------- 5. Sections + dividers (P23 curved transitions) ---------- */

.section {
  position: relative;
  padding: var(--s-11) 0;
  background: var(--bone);
}

.section--paper { background: var(--paper); }
.section--bone-deep { background: var(--bone-deep); }

.section--dark {
  background: var(--ink);
  color: var(--paper);
}
.section--dark .h1,
.section--dark .h2,
.section--dark .h3 { color: var(--paper); }
.section--dark .lede,
.section--dark .muted { color: rgba(255, 255, 255, 0.78); }

.section--tight  { padding: var(--s-9) 0; }
.section--snug   { padding: var(--s-10) 0; }

/* Section header (eyebrow + headline + lede) */
.sec-head {
  max-width: 760px;
  margin: 0 0 var(--s-9) 0;
}

.sec-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.sec-head .h2 { margin-bottom: var(--s-4); }
.sec-head .lede { max-width: 640px; }
.sec-head--center .lede { margin-left: auto; margin-right: auto; }

/* Curved SVG divider (P23). Asymmetric scoop between sections.
   Stacks at the TOP of a section; the SVG fill matches the section
   ABOVE the curve. Polished-trustworthy signature move. */
.curve {
  display: block;
  width: 100%;
  height: 64px;
  line-height: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}
.curve svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hero-to-trust curve: deep navy scoop above the paper trust strip. */
.curve--hero-to-paper svg path { fill: #08122a; }

/* Generic bone-to-paper / paper-to-bone curves */
.curve--bone-to-paper svg path { fill: var(--bone); }
.curve--paper-to-bone svg path { fill: var(--paper); }
.curve--bone-to-bonedeep svg path { fill: var(--bone); }
.curve--bonedeep-to-bone svg path { fill: var(--bone-deep); }
.curve--paper-to-bonedeep svg path { fill: var(--paper); }

/* ---------- 6. Topbar (utility strip) ---------- */

.topbar {
  background: var(--ink-deep);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid var(--bord-on-dark);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: 10px var(--wrap-pad);
  flex-wrap: wrap;
}

.topbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.topbar__chip svg { opacity: 0.78; }

.topbar__chip--phone {
  margin-left: auto;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.topbar__chip--phone:hover {
  text-decoration: none;
  color: var(--gold-soft);
}

.topbar__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.78);
}

.topbar__open::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(47, 138, 77, 0.22);
}

/* ---------- 7. Header (P3 phone-first sticky) ---------- */

.head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 240, 232, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--bord-soft);
}

.head__inner {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  padding: var(--s-4) var(--wrap-pad);
}

.head__brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  line-height: 0;
}

.head__brand:hover { text-decoration: none; }

.head__logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 240px;
}

/* When the mobile drawer opens, the header background flips to navy
   (mobilenav.css). David's logo PNG is a dark-on-transparent design; on
   a dark background it disappears. CSS filter forces it to solid white
   silhouette so it stays readable, no extra asset needed. */
body.mnav-open .head__logo {
  filter: brightness(0) invert(1);
  transition: filter 200ms ease;
}

.head__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.head__nav a {
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}

.head__nav a:hover {
  text-decoration: none;
  border-bottom-color: var(--brand);
  color: var(--ink);
}

.head__ctas {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

.head__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  border-radius: var(--radius-sm);
}

.head__phone:hover {
  text-decoration: none;
  color: var(--brand);
}

.head__phone svg { color: var(--brand); }

.head__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--bord-soft);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.head__rating .num { font-weight: 800; }
.head__rating .star {
  width: 12px;
  height: 12px;
  color: var(--gold);
}

/* Mobile-only toggle (header hamburger) */
.mnav-toggle--mobile-only { display: none; }

/* ---------- 8. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.005em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--action);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--action-deep);
  color: var(--white);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--bord-strong);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: rgba(26, 39, 71, 0.04);
}

.btn--brand {
  background: var(--brand);
  color: var(--white);
}
.btn--brand:hover {
  background: var(--brand-deep);
  color: var(--white);
}

.btn--on-dark {
  background: rgba(255, 255, 255, 0.10);
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn--lg { padding: 16px 26px; font-size: 16px; }
.btn--full { width: 100%; }

/* ---------- 9. Hero (P22 form-as-CTA) ---------- */

.hero {
  position: relative;
  background: var(--bone);
  padding: var(--s-10) 0 var(--s-11);
  overflow: hidden;
  isolation: isolate;
}

/* Hero background photo: real install shot with a deep-navy gradient
   tinted heavier on the text-column side (where light type needs
   contrast) and lighter on the form side (where the photo can show
   through behind the white form card). The Thelen-style full-bleed
   photo hero, dialed to polished-trustworthy register. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('/assets/clearview/garage-wide.webp');
  background-size: cover;
  background-position: center 70%;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(8, 18, 42, 0.92) 0%,
      rgba(10, 20, 48, 0.82) 35%,
      rgba(13, 24, 56, 0.58) 65%,
      rgba(13, 24, 56, 0.32) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.30) 100%
    );
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-10);
  align-items: start;
  position: relative;
}

.hero__copy {
  padding-top: var(--s-5);
}

.hero__h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 64px);
  letter-spacing: -0.022em;
  line-height: 1.02;
  color: var(--paper);
  margin: var(--s-4) 0 var(--s-6);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.hero__h1 em {
  font-style: normal;
  color: var(--gold-soft);
}

.hero__sub {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--s-7);
  max-width: 540px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.20);
}

/* Hero eyebrow on photo background: light text + gold bar */
.hero__copy .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}
.hero__copy .eyebrow .bar {
  background: var(--gold);
}

/* Light hero variant: bone background, dark text. For pages that use
   the P22 form-as-CTA pattern but don't need the dark photo hero
   (Contact, etc.) Overrides every white-on-dark default back to ink. */
.hero--light { background: var(--bone); }
.hero--light .hero__bg { display: none; }
.hero--light .hero__h1 { color: var(--ink); text-shadow: none; }
.hero--light .hero__h1 em { color: var(--brand); }
.hero--light .hero__sub { color: var(--ink-700); text-shadow: none; }
.hero--light .hero__copy .eyebrow { color: var(--ink-700); }
.hero--light .hero__copy .eyebrow .bar { background: var(--brand); }
.hero--light .hero__assure { color: var(--ink-500); }
.hero--light .hero__assure svg { color: var(--good); }

/* "Get a free quote" anchor-scroll CTA: redundant on desktop where the form
   sits side-by-side with the copy, real on mobile where the form is below
   the fold. Hidden on desktop, shown in the mobile breakpoint below. */
.hero__cta--scroll { display: none; }

.hero__ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.hero__assure {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}

.hero__assure li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero__assure svg { color: var(--gold); }

/* Hero lead form card */
.hero__form {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.24),
    0 4px 12px rgba(0, 0, 0, 0.14);
  padding: var(--s-7) var(--s-7) var(--s-6);
  position: relative;
}

.hero__form-tag {
  position: absolute;
  top: -14px;
  left: var(--s-7);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

.hero__form-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: var(--s-2) 0 var(--s-2);
}

.hero__form-sub {
  font-size: 14px;
  color: var(--ink-500);
  margin: 0 0 var(--s-5);
}

/* ---------- 10. Trust strip (slab numerals) ---------- */

.trust {
  background: var(--paper);
  padding: var(--s-10) 0 var(--s-9);
  border-bottom: 1px solid var(--bord-soft);
  position: relative;
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-8);
  align-items: end;
}

.trust__cell {
  position: relative;
  padding-left: var(--s-7);
}

.trust__cell:first-child { padding-left: 0; }

.trust__cell + .trust__cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bord) 18%,
    var(--bord) 82%,
    transparent 100%
  );
}

.trust__num {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-slab);
  font-weight: 900;
  font-size: clamp(58px, 6.8vw, 92px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: var(--ink);
}

/* Gold-accent variant: used on one trust cell to call out the most
   credibility-loaded number on the page. USAF gold, restrained. */
.trust__cell--gold .trust__num { color: var(--gold-deep); }
.trust__cell--gold .trust__unit { color: var(--gold-deep); }
.trust__cell--gold .trust__lbl {
  color: var(--ink);
}
.trust__cell--gold .trust__lbl::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--gold);
  margin-right: 8px;
  vertical-align: middle;
}

.trust__unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.05em;
  color: var(--brand);
  text-transform: uppercase;
}

.trust__lbl {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-top: var(--s-4);
}

.trust__sub {
  display: block;
  font-size: 13px;
  color: var(--ink-500);
  margin-top: 4px;
  letter-spacing: 0.01em;
}

/* ---------- 11. Pillar grid (two-card) ---------- */

.pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
}

.pillar {
  background: var(--paper);
  border: 1px solid var(--bord-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.pillar:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pillar__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}

.pillar__tag::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--brand);
}

.pillar__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 32px);
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

.pillar__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}

.pillar__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin: 0;
}

.pillar__list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pillar__list li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

.pillar__cta {
  margin-top: var(--s-4);
  align-self: flex-start;
}

/* ---------- 12. Service grid (image-led cards on pillar hubs) ---------- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--s-6);
}

.svc-card {
  background: var(--paper);
  border: 1px solid var(--bord-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 160ms ease, transform 160ms ease;
  color: var(--ink);
}

.svc-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.svc-card__photo {
  aspect-ratio: 16 / 10;
  background: var(--ink-deep);
  background-size: cover;
  background-position: center;
}

.svc-card__body {
  padding: var(--s-5) var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.svc-card__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.006em;
  color: var(--ink);
}

.svc-card__sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-700);
  flex: 1;
}

.svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--brand);
  margin-top: var(--s-2);
}

.svc-card__more::after {
  content: "→";
  font-weight: 700;
  transition: transform 120ms ease;
}

.svc-card:hover .svc-card__more::after { transform: translateX(3px); }

/* ---------- 12b. Service list (type-led, no cards) for landing band ----------
   Pattern intent per home-service-site skill section 13: no boxy SaaS-style
   feature card grids. This is a type-led catalog: service name + brief on
   each row, separated by thin neutral rules. Two columns on desktop, one on
   mobile. The whole row is the clickable link. */

.services-group + .services-group { margin-top: var(--s-10); }

.services-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-6);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-3);
  flex-wrap: wrap;
}

.services-group__head::before {
  content: "";
  display: block;
  position: absolute;
}

.services-group__lead { max-width: 640px; }

.services-group__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 6px;
}

.services-group__sub {
  font-size: 15px;
  color: var(--ink-700);
  margin: 0;
  line-height: 1.55;
}

.services-group__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--brand);
  white-space: nowrap;
}

.services-group__all:hover { text-decoration: none; color: var(--brand-deep); }
.services-group__all::after { content: "→"; transition: transform 120ms ease; }
.services-group__all:hover::after { transform: translateX(3px); }

.svc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-10);
  border-top: 1px solid var(--bord);
}

.svc-list__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0 var(--s-4);
  border-bottom: 1px solid var(--bord-soft);
  color: var(--ink);
  transition: color 120ms ease, transform 160ms ease;
}

.svc-list__item:hover {
  text-decoration: none;
  color: var(--brand);
  transform: translateX(4px);
}

.svc-list__photo {
  width: 96px;
  height: 96px;
  background-size: cover;
  background-position: center;
  background-color: var(--bone-deep);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Placeholder treatment for services where we don't have a photo yet.
   The bone-deep block + brand-color initial reads as intentional
   typographic placeholder rather than broken image. Phase 5 replaces. */
.svc-list__photo--placeholder {
  background: linear-gradient(135deg, var(--bone-deep) 0%, var(--paper-dim, #c9c5b8) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-family: var(--font-slab);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.04em;
  line-height: 1;
}

.svc-list__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.svc-list__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.svc-list__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: inherit;
}

.svc-list__arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--brand);
  transition: transform 160ms ease;
  flex-shrink: 0;
}

.svc-list__item:hover .svc-list__arrow { transform: translateX(4px); }

.svc-list__sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
}

/* ---------- 13. Heritage band (P14) ---------- */

.heritage {
  background: var(--bone-deep);
  padding: var(--s-11) 0;
}

.heritage__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-9);
}
/* Heritage text band sits centered below the video at a comfortable
   reading width. Text-align stays left so the signature reads
   naturally; only the band itself is centered. */
.heritage__body {
  max-width: 760px;
  width: 100%;
}

.heritage__portrait {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--paper) center / cover no-repeat;
  border: 1px solid var(--bord-soft);
  position: relative;
  justify-self: center;
}

/* P21 photo-as-stamp decal: used when a real portrait photo is in place */
.heritage__portrait::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed var(--bord-strong);
  opacity: 0.55;
}

.heritage__portrait--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: 64px;
  color: var(--ink-300);
  letter-spacing: -0.02em;
}

/* Heritage media: owner-on-site brand video. Replaced the typographic
   CV seal that originally occupied this slot once David provided real
   footage of himself in front of his branded trailer. The video sits
   inside a 16:9 frame with a dashed outline echoing the seal stamp
   detail above (.heritage__portrait::after) so the visual register
   stays consistent across the section. */
.heritage__media {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  /* No max-width: the video spans the full wrap so it reads as the
     section's hero. At max wrap that is roughly 1192px x 670px. */
}
.heritage__media::after {
  content: "";
  position: absolute;
  top: -14px;
  left: -14px;
  right: -14px;
  bottom: 36px; /* clear the caption so the stamp wraps just the video */
  border-radius: calc(var(--radius) + 8px);
  border: 1px dashed var(--bord-strong);
  opacity: 0.5;
  pointer-events: none;
}
.heritage__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 8px 28px rgba(8, 15, 36, 0.18), 0 2px 6px rgba(8, 15, 36, 0.08);
}
.heritage__video-el {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--ink);
}
.heritage__media-caption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  text-align: center;
  margin-top: var(--s-2);
}

/* Legacy seal styles retained for any future page that wants the
   typographic monogram treatment (e.g. a thank-you page or About
   hero variation). Not currently rendered. */
.heritage__seal {
  width: 240px;
  height: 240px;
  justify-self: center;
  color: var(--ink);
}

.heritage__seal svg {
  width: 100%;
  height: 100%;
  display: block;
}

.heritage__body .h2 { margin-bottom: var(--s-5); }

.heritage__quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 var(--s-5);
}

.heritage__sig {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-display);
  margin-top: var(--s-6);
}

.heritage__sig-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.heritage__sig-role {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ---------- 14. Process / commitment list (P15 big-type) ---------- */

.process-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bord);
}

.process-step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-7);
  align-items: start;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--bord-soft);
}

.process-step__num {
  font-family: var(--font-slab);
  font-weight: 900;
  font-size: clamp(48px, 4.6vw, 68px);
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: -0.035em;
  padding-top: 4px;
}

.process-step__body { display: flex; flex-direction: column; gap: var(--s-3); }

.process-step__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}

.process-step__copy {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-700);
}

/* ---------- 15. Multi-source rating widget (P20) ---------- */

.ratings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s-5);
}

.rating-card {
  background: var(--paper);
  border: 1px solid var(--bord-soft);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.rating-card__src {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.rating-card__score {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.rating-card__num {
  font-family: var(--font-slab);
  font-weight: 900;
  font-size: clamp(40px, 4vw, 52px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.rating-card__max {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-500);
}

.rating-card__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold);
}

.rating-card__meta {
  font-size: 13px;
  color: var(--ink-500);
}

/* Reviews page: 4-up multi-source rating grid (extends the rating-card pattern) */
.ratings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
}
@media (max-width: 1024px) { .ratings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .ratings-grid { grid-template-columns: 1fr; } }

.ratings-grid .rating-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color 140ms ease, transform 140ms ease;
}
.ratings-grid .rating-card:hover {
  border-color: var(--ink-500);
  transform: translateY(-1px);
}

.rating-card__mark {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--paper);
  background: var(--ink);
}
.rating-card__mark--google { background: #4285F4; }
.rating-card__mark--bbb    { background: #00457C; font-size: 15px; }
.rating-card__mark--angi   { background: #A22F26; }
.rating-card__mark--yelp   { background: #D32323; }

.ratings-grid .rating-card__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  display: block;
}

.rating-card__count {
  font-size: 13px;
  color: var(--ink-500);
}

.rating-card__bbb-yr {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  text-transform: uppercase;
}

.rating-card__cta {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--brand);
  letter-spacing: 0.01em;
}

/* ---------- 16. Before/after band (P10) -- hidden until Phase 5 ---------- */

.beforeafter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--s-6);
}

.ba-card {
  background: var(--paper);
  border: 1px solid var(--bord-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.ba-card__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ba-card__img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bone-deep);
}

.ba-card__caption {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

/* ---------- 17. Late-page dark band (P7) ---------- */

.scrollband {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-11) 0;
  position: relative;
}

.scrollband__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-9);
  align-items: center;
}

.scrollband .h2 { color: var(--paper); margin-bottom: var(--s-4); }

.scrollband__sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: var(--s-6);
}

.scrollband__ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.scrollband__phone {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--bord-on-dark);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  color: var(--paper);
}

.scrollband__phone-lbl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.scrollband__phone-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.01em;
  color: var(--paper);
}

.scrollband__phone-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

/* ---------- 18. Final CTA ---------- */

.finalcta {
  background: var(--ink-deep);
  color: var(--paper);
  padding: var(--s-11) 0;
}

.finalcta__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--s-9);
  align-items: center;
}

.finalcta .h2 { color: var(--paper); margin-bottom: var(--s-4); }
.finalcta__sub { color: rgba(255, 255, 255, 0.78); font-size: 17px; margin-bottom: var(--s-6); }

/* ---------- 19. Footer ---------- */

.foot {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  padding: var(--s-11) 0 var(--s-7);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-8);
  padding-bottom: var(--s-9);
  border-bottom: 1px solid var(--bord-on-dark);
}

.foot__logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 0 var(--s-4);
  background: var(--paper);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
}

.foot__tag {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 var(--s-4);
  letter-spacing: 0.04em;
}

.foot__pitch { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }

.foot__col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 var(--s-4);
}

.foot__col h4.foot__h-tight { margin-top: var(--s-6); }

.foot__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

.foot__col a { color: rgba(255, 255, 255, 0.82); }
.foot__col a:hover { color: var(--paper); text-decoration: underline; }

.foot__contact {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

.foot__contact a { color: rgba(255, 255, 255, 0.92); }
.foot__contact strong { color: var(--paper); font-weight: 700; }

.foot__hours {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

.foot__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
}
.foot__social li { margin: 0; }
.foot__social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.foot__social a:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.36);
  color: var(--paper);
  text-decoration: none;
}
.foot__social svg { flex-shrink: 0; }

.foot__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-top: var(--s-6);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.58);
}

.foot__legal {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
  margin-top: var(--s-3);
}

.foot__legal a { color: inherit; }
.foot__legal a:hover { color: rgba(255, 255, 255, 0.78); }

/* ---------- 20. Forms ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--s-4);
}

.field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.field input,
.field textarea,
.field select {
  font: inherit;
  background: var(--white);
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: var(--radius-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  width: 100%;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-300); }

.field input:hover,
.field textarea:hover { border-color: var(--bord-strong); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0, 53, 148, 0.14);
}

.field textarea { resize: vertical; min-height: 96px; }

.form__legal {
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.4;
  margin-top: var(--s-4);
}

/* ---------- 21. Service hub + service+location pages ---------- */

.svc-hero {
  background: var(--bone);
  padding: var(--s-10) 0 var(--s-11);
}

.svc-hero__inner { max-width: 920px; }

.svc-hero__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.8vw, 52px);
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-5);
}

.svc-hero__sub {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 0 var(--s-7);
  max-width: 720px;
}

.svc-hero__ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Local-context band on service+location pages */
.loc-context { background: var(--paper); padding: var(--s-10) 0; }
.loc-context__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-8);
  align-items: start;
}
.loc-context__intro { font-size: 17px; line-height: 1.65; color: var(--ink-700); }
.loc-context__h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: var(--s-6) 0 var(--s-3);
  color: var(--ink);
}
.loc-context__svcnote { font-size: 16px; line-height: 1.6; color: var(--ink-700); }
.loc-context__neighborhoods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.loc-context__neighborhoods li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.loc-context__neighborhoods li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.loc-facts {
  background: var(--bone-deep);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-6);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.loc-facts dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: var(--s-3);
}
.loc-facts dt:first-of-type { margin-top: 0; }
.loc-facts dd { margin: 4px 0 0 0; color: var(--ink-700); }
.loc-facts__list { font-size: 14px; color: var(--ink-700); }
.loc-facts__list li { margin-top: 2px; }
.loc-context__back { margin-top: var(--s-6); }
.loc-context__back a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--brand);
}

/* Packages grid on service hub */
.pkg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.pkg {
  background: var(--paper);
  border: 1px solid var(--bord-soft);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pkg--feature {
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.pkg__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: transparent;
  padding: 0;
  align-self: flex-start;
}
.pkg--feature .pkg__badge { color: var(--ink); }
.pkg--feature .pkg__badge::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--gold);
  margin-right: 8px;
  vertical-align: middle;
}
.pkg__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.pkg__tag { font-size: 14px; color: var(--ink-500); margin: 0; }
.pkg__body { font-size: 15px; line-height: 1.55; color: var(--ink-700); }
.pkg__list { font-size: 14px; color: var(--ink); }
.pkg__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  line-height: 1.5;
}
.pkg__list li::before {
  content: "✓";
  color: var(--good);
  font-weight: 800;
  flex-shrink: 0;
}
.pkg__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--bord-soft);
}

/* Why/edu comparison */
.svc-edu { background: var(--bone); padding: var(--s-10) 0; }
.why__compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-5);
  align-items: stretch;
  margin-top: var(--s-7);
}
.why__col {
  background: var(--paper);
  border: 1px solid var(--bord-soft);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.why__col--bad { background: var(--bone-deep); }
.why__col-head { margin-bottom: var(--s-4); }
.why__col-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.why__col--good .why__col-tag { color: var(--brand); }
.why__col-sub {
  display: block;
  font-size: 13px;
  color: var(--ink-500);
  margin-top: 2px;
}
.why__list { font-size: 15px; line-height: 1.5; color: var(--ink); }
.why__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}
.why__list li svg { margin-top: 4px; flex-shrink: 0; }
.why__col--bad svg { color: var(--danger); }
.why__col--good svg { color: var(--good); }
.why__divider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.why__divider-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-300);
  padding: 6px 10px;
  border: 1px solid var(--bord-soft);
  border-radius: 999px;
}
.why__foot {
  text-align: center;
  font-size: 14px;
  color: var(--ink-500);
  margin-top: var(--s-5);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Restore-vs-replace decision matrix (restoration services only) */
.restore-matrix { background: var(--bone); padding: var(--s-10) 0; }
.restore-matrix__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
  align-items: stretch;
}
@media (max-width: 960px) {
  .restore-matrix__grid { grid-template-columns: 1fr; }
}
.restore-col {
  background: var(--paper);
  border: 1px solid var(--bord-soft);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.restore-col--no { background: var(--bone-deep); }
.restore-col__head { margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--bord-soft); }
.restore-col__tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: block;
}
.restore-col--yes .restore-col__tag { color: var(--brand); }
.restore-col--maybe .restore-col__tag { color: var(--warn); }
.restore-col__sub {
  display: block;
  font-size: 13px;
  color: var(--ink-500);
  margin-top: 2px;
}
.restore-col__list { font-size: 15px; line-height: 1.45; color: var(--ink); }
.restore-col__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--s-3);
}
.restore-col__list li:first-child { margin-top: 0; }
.restore-col__list li svg { margin-top: 3px; flex-shrink: 0; }
.restore-col--yes svg { color: var(--good); }
.restore-col--maybe svg { color: var(--warn); }
.restore-col--no svg { color: var(--danger); }
.restore-col__list li strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.restore-col__list li span {
  display: block;
  font-size: 14px;
  color: var(--ink-500);
}
.restore-matrix__foot {
  text-align: center;
  font-size: 14px;
  color: var(--ink-500);
  margin-top: var(--s-6);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Pricing */
.pricing { background: var(--paper); padding: var(--s-10) 0; }
.price__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.price {
  background: var(--white);
  border: 1px solid var(--bord-soft);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.price--feature {
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.price__head { display: flex; flex-direction: column; gap: 4px; }
.price__badge {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.price__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.price__size { font-size: 13px; color: var(--ink-500); margin: 0; }
.price__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: var(--s-2);
}
.price__from { font-size: 13px; color: var(--ink-500); }
.price__num {
  font-family: var(--font-slab);
  font-weight: 900;
  font-size: 32px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.price__to { font-size: 13px; color: var(--ink-500); }
.price__list { font-size: 14px; color: var(--ink); }
.price__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  line-height: 1.5;
}
.price__list li::before {
  content: "✓";
  color: var(--good);
  font-weight: 800;
  flex-shrink: 0;
}
.price__cta { margin-top: auto; }
.price__foot {
  text-align: center;
  font-size: 14px;
  color: var(--ink-500);
  margin-top: var(--s-6);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Process on service pages */
.process { background: var(--bone); padding: var(--s-10) 0; }
.process__list { margin-top: var(--s-7); }

/* FAQ */
.faq { background: var(--paper); padding: var(--s-10) 0; }
.faq__list { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s-6); }
.faq__item {
  background: var(--white);
  border: 1px solid var(--bord-soft);
  border-radius: var(--radius);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-5) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__sign {
  width: 18px;
  height: 18px;
  position: relative;
  flex-shrink: 0;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: var(--brand);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease;
}
.faq__sign::before { width: 14px; height: 2px; }
.faq__sign::after  { width: 2px; height: 14px; }
.faq__item[open] .faq__sign::after { opacity: 0; }
.faq__a {
  padding: 0 var(--s-6) var(--s-5);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
}

/* Service-area sub-section on service+location */
.svc-area { background: var(--bone); padding: var(--s-10) 0; }
.svc-area--alt { background: var(--bone-deep); }
.svc-area__cities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 6px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-top: var(--s-5);
}
.svc-area__cities li { display: flex; align-items: center; gap: 8px; line-height: 1.6; }
.svc-area__cities li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.svc-area__cities a { color: var(--ink); }
.svc-area__cities a:hover { color: var(--brand); text-decoration: none; }

/* CTA on service pages */
.cta { background: var(--ink-deep); color: var(--paper); padding: var(--s-11) 0; }
.cta__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-9);
  align-items: start;
}
.cta__copy .h2 { color: var(--paper); margin-bottom: var(--s-4); }
.cta__sub { color: rgba(255, 255, 255, 0.78); font-size: 17px; margin-bottom: var(--s-6); }
.cta__phoneblock { margin-bottom: var(--s-6); }
.cta__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--bord-on-dark);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  color: var(--paper);
}
.cta__phone:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; }
.cta__phone svg { color: var(--gold-soft); }
.cta__phonenum {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--paper);
}
.cta__phonelbl {
  display: block;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.cta__list { font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.cta__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.cta__list li svg { color: var(--gold-soft); flex-shrink: 0; }

.cta__form {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-7);
}
.cta__form .field label { color: var(--ink-700); }
.cta__formhead { margin-bottom: var(--s-5); }
.cta__formtag {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-3);
}
.cta__formhead h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}
.cta__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.cta__field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.cta__field input,
.cta__field textarea {
  /* MOBILE OVERFLOW FIX 2026-07-26. Without width/min-width an input keeps its
     intrinsic ~20ch width and will not shrink, inflating the min-content width
     of its grid track. Measured 233px of horizontal overflow at 375px on every
     /services/ page before this. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font: inherit;
  background: var(--white);
  color: var(--ink);
  padding: 11px 14px;
  border: 1px solid var(--bord);
  border-radius: var(--radius-sm);
}
.cta__field input:focus,
.cta__field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 53, 148, 0.14);
}
.cta__field textarea { resize: vertical; min-height: 96px; }
.cta__field--row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); margin-bottom: var(--s-4); }
.cta__field--row > div { display: flex; flex-direction: column; gap: 6px; }
.cta__submit { width: 100%; margin-top: var(--s-3); }
.cta__legal { font-size: 12px; color: var(--ink-500); margin-top: var(--s-4); line-height: 1.45; }

/* SMS opt-in - rendered by the shared SmsConsentField component. */
.sms-consent { margin-top: var(--s-3); }
.sms-consent__row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 12px; line-height: 1.45; color: var(--ink-500); }
.sms-consent__checkbox { margin-top: 3px; flex-shrink: 0; cursor: pointer; }

/* Trust strip on service+location pages */
.trust-strip { background: var(--paper); padding: var(--s-9) 0; border-bottom: 1px solid var(--bord-soft); }
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}
.trust-strip__card { display: flex; flex-direction: column; gap: 4px; }
.trust-strip__numwrap { display: inline-flex; align-items: baseline; gap: 4px; }
.trust-strip__num {
  font-family: var(--font-slab);
  font-weight: 900;
  font-size: 44px;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.trust-strip__plus {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--brand);
}
.trust-strip__lbl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-top: 6px;
}
.trust-strip__sub { font-size: 12px; color: var(--ink-500); }

/* Sticky mobile CTA (service pages) */
.stickycall {
  display: none;
}

/* ---------- 22. Prose-block (About page body copy) ---------- */

.prose-block {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-700);
}

.prose-block p { margin: 0 0 var(--s-5); }
.prose-block p:last-child { margin-bottom: 0; }

.prose-block strong { color: var(--ink); font-weight: 600; }

/* ---------- 22a. Page placeholders (FAQ, Projects, Reviews, ThankYou) ---------- */

.placeholder-page {
  padding: var(--s-11) 0;
  background: var(--bone);
  min-height: 60vh;
}

.placeholder-page__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.018em;
  line-height: 1.06;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-5);
}

.placeholder-page__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 640px;
}

/* ThankYou reuse */
.leadmag__hero { padding: var(--s-11) 0; background: var(--bone); }
.leadmag__wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--wrap-pad); }
.leadmag__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin: 0 0 var(--s-3); }
.leadmag__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; color: var(--ink); margin: 0 0 var(--s-5); }
.leadmag__lede { font-size: 17px; color: var(--ink-700); line-height: 1.6; margin: 0 0 var(--s-7); }
.leadmag__legal { font-size: 14px; color: var(--ink-500); margin-top: var(--s-7); }

/* ---------- 22b. New content bands: before/after, testimonials, FAQ, service-area ---------- */

/* Before/after pair band (P10) */
.beforeafter-band { background: var(--bone); padding: var(--s-11) 0; }
.beforeafter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--s-6);
  margin-top: var(--s-7);
}
.ba-pair {
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ba-pair__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--bord);
  position: relative;
}
.ba-pair__half {
  position: relative;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: var(--bone-deep);
  cursor: zoom-in;
  transition: opacity 160ms ease;
}
.ba-pair__half:hover { opacity: 0.92; }
.ba-pair__half-label {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.ba-pair__caption {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ba-pair__where {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.ba-pair__what {
  font-size: 13px;
  color: var(--ink-500);
}

/* Testimonials band */
.testimonials { background: var(--paper); padding: var(--s-11) 0; }
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin-top: var(--s-7);
}
@media (max-width: 760px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}
.testimonial {
  background: var(--white);
  border: 1px solid var(--bord-soft);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
}

.testimonial__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.testimonial__avatar--gold { background: var(--gold-deep); color: var(--white); }

.testimonial__identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.testimonial__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.2;
}

.testimonial__meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.testimonial__source-mark {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
}

.testimonial__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold);
  flex-shrink: 0;
}

.testimonial__stars svg {
  width: 14px;
  height: 14px;
}

.testimonial__quote {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
  flex: 1;
}
.testimonials__cta {
  margin-top: var(--s-7);
  text-align: center;
}

/* FAQ band on home */
.faq-band { background: var(--bone-deep); padding: var(--s-11) 0; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--s-7);
  border-top: 1px solid var(--bord);
}
.faq-list details {
  border-bottom: 1px solid var(--bord-soft);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.006em;
  color: var(--ink);
  transition: color 120ms ease;
}
.faq-list summary:hover { color: var(--brand); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--brand);
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list .faq-list__a {
  padding: 0 0 var(--s-5) 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 760px;
}

/* Service area band (P17) */
.servicearea { background: var(--paper); padding: var(--s-10) 0; }
.servicearea-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px var(--s-7);
  margin-top: var(--s-6);
}
@media (max-width: 1024px) {
  .servicearea-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .servicearea-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .servicearea-grid { grid-template-columns: 1fr; }
}
.servicearea-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.servicearea-grid li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.servicearea-grid li a {
  color: inherit;
  text-decoration: none;
  transition: color 120ms ease;
}
.servicearea-grid li a:hover { color: var(--brand); }

.servicearea__sublabel {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: var(--s-6) 0 var(--s-3);
}
.servicearea__sublabel--adjacent { margin-top: var(--s-7); }

.servicearea-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.servicearea-strip li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  padding: 5px 12px;
  background: var(--white);
  border: 1px solid var(--bord);
  border-radius: 999px;
  color: var(--ink-700);
}

.servicearea__note {
  font-size: 14px;
  color: var(--ink-500);
  margin-top: var(--s-6);
  text-align: center;
}
.servicearea__note a { color: var(--brand); }

/* ---------- 22c. Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 18, 42, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox--no-anim { transition: none; }

.lightbox__close {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

.lightbox__figure {
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  margin: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.lightbox__caption {
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  text-align: center;
}

/* ---------- 22b-tri. USAF values on the About page ---------- */

.usaf-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0;
}
@media (max-width: 900px) { .usaf-values { grid-template-columns: 1fr; } }

.usaf-value {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
}
.usaf-value__num {
  font-family: var(--font-slab);
  font-weight: 900;
  font-size: 28px;
  color: var(--brand);
  letter-spacing: 0.02em;
  line-height: 1;
}
.usaf-value__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin: 0;
}
.usaf-value__copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
}

/* ---------- 22b-bis. Credentials strip + marquee clients ---------- */

.credstrip {
  background: var(--paper);
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  padding: var(--s-7) 0;
}

/* CSS Grid replaces the old flex-wrap. Predictable layout across breakpoints:
   1280+: 4-up row, cells wide enough to keep all subtitles on a single line
   720-1280: 2x2 grid (no orphan)
   <720:   1-up stack, centered cells */
.credstrip__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
  align-items: center;
  justify-items: start;
  padding: 0 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 1280px) {
  .credstrip__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-7);
    justify-items: center;
    max-width: 720px;
  }
}
@media (max-width: 720px) {
  .credstrip__inner {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    justify-items: center;
    max-width: 380px;
  }
}

.credstrip__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 72px;
  text-decoration: none;
  color: inherit;
  width: 100%;
}
@media (max-width: 720px) {
  .credstrip__item { justify-content: flex-start; }
}
.credstrip__item--logo { transition: transform 160ms ease; }
.credstrip__item--logo:hover { transform: translateY(-2px); }

.credstrip__logo {
  height: 56px;
  width: auto;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}
/* HydroShield logo is wider (361x63 ratio); cap height so it sits next to
   the square Valence mark without dominating the strip. */
.credstrip__logo--hydro { height: 36px; max-width: 160px; }
.credstrip__icon { flex: 0 0 auto; }

.credstrip__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
}
.credstrip__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
}
.credstrip__sub {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-500);
  letter-spacing: 0.01em;
}
/* Dividers removed in grid layout; spacing alone does the work. Keep the
   class harmless if it lingers in markup. */
.credstrip__divider { display: none; }

/* Marquee past-clients list */
.marquee-clients {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0;
}
@media (max-width: 1024px) { .marquee-clients { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .marquee-clients { grid-template-columns: 1fr; } }

.marquee-clients__item {
  background: var(--paper);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 130px;
}
.marquee-clients__num {
  font-family: var(--font-slab);
  font-weight: 900;
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.marquee-clients__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.008em;
  line-height: 1.25;
}
.marquee-clients__loc {
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.45;
  margin-top: auto;
}

/* ---------- 22c-bis. Gallery page grids ---------- */

.gallery-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gallery-jump li { margin: 0; }
.gallery-jump a {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-700);
  text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease;
}
.gallery-jump a:hover {
  color: var(--ink);
  border-color: var(--ink-500);
}

.gallery-section { scroll-margin-top: 96px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
}
@media (max-width: 1100px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .gallery-grid { grid-template-columns: 1fr; } }

.gallery-item {
  margin: 0;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: zoom-in;
  transition: transform 160ms ease;
}
.gallery-item:hover { transform: translateY(-2px); }
.gallery-item picture,
.gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: var(--bone-deep);
}
.gallery-item__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4) var(--s-5);
}
.gallery-item__svc {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.gallery-item__loc {
  font-size: 13px;
  color: var(--ink-500);
}

/* ---------- 22c-tri. Service-area page city grid ---------- */

.city-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-7);
}
@media (max-width: 820px) { .city-grid { grid-template-columns: 1fr; } }

.city-card {
  background: var(--paper);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.city-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--bord-soft);
}
.city-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.012em;
}
.city-card__pop {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.city-card__lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}

.city-card__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--s-3);
  font-size: 13px;
  margin: 0;
}
.city-card__meta dt {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}
.city-card__meta dd {
  margin: 0;
  color: var(--ink-700);
  line-height: 1.5;
}

.city-card__nbhds-lbl,
.city-card__svcs-lbl {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--s-2);
}

.city-card__nbhds ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.city-card__nbhds li {
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-700);
}

.city-card__svcs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.city-card__svcs li { margin: 0; }
.city-card__svcs a {
  display: inline-flex;
  font-size: 14px;
  color: var(--ink-700);
  text-decoration: none;
  transition: color 120ms ease;
}
.city-card__svcs a::after {
  content: " →";
  color: var(--brand);
  margin-left: 6px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.city-card__svcs a:hover { color: var(--brand); }
.city-card__svcs a:hover::after { opacity: 1; }

.city-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
}
.city-strip li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--bord);
  border-radius: 999px;
  color: var(--ink-700);
}

/* ---------- 22d. FAQ page table of contents ---------- */

.hero__copy--wide { max-width: 760px; }

.faq-toc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) { .faq-toc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .faq-toc { grid-template-columns: 1fr; } }

.faq-toc li { margin: 0; }
.faq-toc a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--bord);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}
.faq-toc a:hover {
  border-color: var(--ink-500);
  transform: translateY(-1px);
}
.faq-toc__h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.3;
}
.faq-toc__count {
  font-size: 13px;
  color: var(--ink-500);
  letter-spacing: 0.01em;
}

/* FAQ page section anchors: account for sticky header offset on jump */
.faq-section { scroll-margin-top: 96px; }

/* ---------- 23. Reveal animations (paired with App.razor IntersectionObserver) ---------- */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero on first paint: subtle staggered fade-in for primary stack */
.hero__copy .eyebrow { animation: fadeUp 480ms ease both; animation-delay: 60ms; }
.hero__copy .hero__h1 { animation: fadeUp 600ms ease both; animation-delay: 140ms; }
.hero__copy .hero__sub { animation: fadeUp 600ms ease both; animation-delay: 240ms; }
.hero__copy .hero__ctas { animation: fadeUp 600ms ease both; animation-delay: 340ms; }
.hero__form { animation: fadeUp 700ms ease both; animation-delay: 220ms; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy .eyebrow,
  .hero__copy .hero__h1,
  .hero__copy .hero__sub,
  .hero__copy .hero__ctas,
  .hero__form,
  .js-reveal .reveal { animation: none; transition: none; opacity: 1; transform: none; }
}

/* ---------- 24. Mobile breakpoints ---------- */

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero__cta--scroll { display: inline-flex; }
  .finalcta__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .scrollband__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .heritage__inner { grid-template-columns: 1fr; text-align: center; gap: var(--s-7); }
  .heritage__quote { text-align: left; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .cta__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .loc-context__grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .head__inner { gap: var(--s-3); padding: var(--s-3) var(--wrap-pad); }
  .head__logo { height: 36px; max-width: 180px; }
  .head__nav { display: none; }
  .head__rating { display: none; }
  .head__phone { display: none; }
  .head__btn { display: none; }
  .mnav-toggle--mobile-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--bord);
    border-radius: var(--radius-sm);
    width: 44px;
    height: 44px;
    margin-left: auto;
  }
  .mnav-toggle__bars { display: inline-flex; flex-direction: column; gap: 4px; }
  .mnav-toggle__bars span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 1px;
  }

  /* Topbar on mobile: keep only city + phone, hide hours + badge chip */
  .topbar { font-size: 12px; }
  .topbar__inner { gap: var(--s-3); justify-content: space-between; flex-wrap: nowrap; padding: 8px var(--wrap-pad); }
  .topbar__chip--hours,
  .topbar__chip--badge { display: none; }
  .topbar__chip { white-space: nowrap; }
  .topbar__chip--phone { margin-left: 0; font-size: 13px; }

  .pillars { grid-template-columns: 1fr; }
  .svc-list { grid-template-columns: 1fr; column-gap: 0; }
  .svc-list__item { grid-template-columns: 72px 1fr; gap: var(--s-4); }
  .svc-list__photo { width: 72px; height: 72px; }
  .services-group__head { flex-direction: column; align-items: flex-start; }
  .trust__grid { grid-template-columns: 1fr 1fr; }
  .trust__cell + .trust__cell { border-left: none; padding-left: 0; }
  .trust-strip__inner { grid-template-columns: 1fr 1fr; }
  .why__compare { grid-template-columns: 1fr; }
  .why__divider { display: none; }

  .process-step { grid-template-columns: 1fr; gap: var(--s-3); }
  .process-step__num { font-size: 48px; }

  .foot__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .foot__col h4.foot__h-tight { margin-top: var(--s-5); }

  .field__row { grid-template-columns: 1fr; }

  /* Sticky mobile CTA bar on service-detail pages */
  .stickycall {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 70;
    background: var(--ink);
    color: var(--paper);
    border-top: 1px solid var(--bord-on-dark);
    padding: 8px 12px;
    gap: 8px;
  }
  .stickycall__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--paper);
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
  }
  .stickycall__btn--call { background: var(--action); }
  .stickycall__btn small {
    display: block;
    font-weight: 500;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
  }
}

@media (max-width: 480px) {
  .trust__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .trust__cell + .trust__cell { border-left: none; padding-left: 0; padding-top: var(--s-5); border-top: 1px solid var(--bord-soft); }
  .trust-strip__inner { grid-template-columns: 1fr; }
  .pkg__grid, .price__grid { grid-template-columns: 1fr; }
  .svc-area__cities { grid-template-columns: 1fr; }
  .loc-context__neighborhoods { grid-template-columns: 1fr; }
}

/* Footer column headings render as h2 now, not h4: they are top-level sections
   of the footer landmark, and an h4 after body h2 and h3 content is a skipped
   level on every page. This keeps the previous h4 sizing so the change is
   semantic only. */
.foot h2, .foot__col h2 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.6rem; }