/* Self-hosted Montserrat (latin subset, woff2 from Google Fonts 2026-08-05,
   font-display swap) — replaces the render-blocking fonts.googleapis.com CSS.
   No italic faces on purpose (PageSpeed 2026-08-11): the browser synthesizes
   obliques from these uprights, which for Montserrat is visually near-identical
   and saves ~80 KB of high-priority font bytes competing with the hero image. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Maid Brigade of Maryland — approved 2026 visual system
   Source of truth: design_handoff_maidbrigade_md/ (.dc.html prototypes + docs/DESIGN-HANDOFF-FINAL.md)

   COLORS
   - Deep blue  #005E82  headings, outline buttons
   - Teal       #118FB4  primary CTA, footer, bands, eyebrows
   - Navy       #243056  body text
   - Light blue #DEE8EF  cards, tints
   - Steel      #BED3E2  secondary buttons
   - Aqua       #9BD8D9  gradient bands
   - Coral      #F26F63  decor sparkles, blog chips
   - Green      #83BF4F  leaf icon
   - Dark       #404040  legal bar, muted
   - Orange     #F49D1E  stars, contact icons, fills/badges/rings (navy text on it)

   ROUND 2 — WARMTH (2026-08-21, docs/ROUND2-HANDOFF.md; pixel refs in docs/design-refs/round2/)
   - Cream      #FBF7F0  page ground (body) and alternating sections
   - Peach      #FCE3BC  warm band gradient start (peach → cream replaces aqua → white)
   - Warm line  #E8DCC8  hairlines/borders on cream
   - Orange a11y #B8690A eyebrows and any orange TEXT (handoff said #D9820A — fails AA, see :root)
   Eyebrows are orange site-wide; dot-grids and the 30+ header badge are gone.

   TYPE — Montserrat 400 / 600 / 700 / 700-italic
   Desktop: h1 40/1.3 · h2 34/1.3 · h3 30 or 24 · eyebrow 24 bold-italic teal · body 16/1.6
   Mobile:  h1 25 · h2 24–25 · eyebrow 18 · body 13/1.6

   RADII 60 pills · 50 form cards · 30 images/office cards/header · 32 blog cards ·
         20 team cards/mobile images · 15 buttons · 10 small cards */

:root {
  --deep-blue: #005E82;
  --teal: #118FB4;
  --teal-a11y: #0D7999;   /* 4.99:1 with white — for teal surfaces/text carrying body copy */
  --gray-text: #6B6B6B;   /* 5.33:1 on white — for small gray text */
  --navy: #243056;
  --cloud: #DEE8EF;
  --steel: #BED3E2;
  --aqua: #9BD8D9;
  --coral: #F26F63;
  --leaf: #83BF4F;
  --leaf-dark: #699635;
  --charcoal: #404040;
  --orange: #F49D1E;
  --orange-a11y: #B8690A; /* orange TEXT (eyebrows, h3 labels — all ≥18.66px bold). The handoff's #D9820A
                             measures only 2.75:1 on cream / 2.94:1 on white — below even the 3:1
                             large-text floor. #B8690A: 3.9 cream · 4.15 white · 3.3 cloud/peach. */
  --cream: #FBF7F0;
  --peach: #FCE3BC;
  --warm-line: #E8DCC8;
  --ink: #00151F;
  --gray: #7F7F7F;
  --placeholder: #767676;
  --white: #FFFFFF;
  --line: #DEE8EF;

  /* Legacy aliases (older page bodies reference these) */
  --dark-teal: var(--deep-blue);
  --light-teal: var(--teal);
  --pale-blue: var(--steel);
  --off-white: var(--white);
  --sunshine: var(--orange);
  --fern: var(--leaf);

  --shadow-pill: 0 4px 4px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-big: 0 0 10px rgba(0, 0, 0, 0.25);
  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-photo: 0 4px 14px rgba(0, 0, 0, 0.18);
  --shadow: 0 2px 12px rgba(0, 94, 130, 0.08);
  --shadow-hover: 0 4px 20px rgba(0, 94, 130, 0.18);

  --radius: 10px;
  --radius-btn: 15px;
  --radius-lg: 20px;
  --radius-img: 30px;
  --radius-pill: 60px;

  --max: 1250px;                       /* 1440 design width − 2×95px gutter */
  --pad: clamp(20px, 6.6vw, 95px);     /* 95px desktop gutter, 20px mobile */

  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: var(--font-body);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--navy);
  background: var(--cream);           /* round 2: cream page ground */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a {
  color: var(--deep-blue);
  text-decoration: none;
}
a:hover { color: var(--teal-a11y); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--deep-blue);
  line-height: 1.3;
  margin-top: 0;
}
h1 { font-weight: 700; font-size: clamp(25px, 3.5vw, 40px); }
h2 { font-weight: 700; font-size: clamp(24px, 3vw, 34px); margin-top: 2.5rem; }
h3 { font-weight: 700; font-size: clamp(20px, 2.2vw, 24px); margin-top: 1.75rem; }
h4 { font-weight: 700; font-style: italic; font-size: 1.25rem; margin-top: 1.5rem; color: var(--navy); }
h5 { font-weight: 700; font-size: 1.125rem; }
h6 { font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }

p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.5rem; }
li { margin-bottom: 0.4rem; }

hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }

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

/* ============ Eyebrow — bold-italic ORANGE (round 2). --orange-a11y #B8690A
   holds AA on cream/white; never use #F49D1E for text. ============ */
.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.1;
  color: var(--orange-a11y);
  margin-bottom: 0.75rem;
}

.lead, .lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  margin-bottom: 1.5rem;
  max-width: 60ch;
}

/* ============ Header ============ */
.header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  border-radius: 0 0 30px 30px;
  margin-bottom: -30px;                /* heroes slide up behind the rounded corners */
  box-shadow: var(--shadow-header);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 22px var(--pad);
  max-width: 1440px;
  margin: 0 auto;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 64px; width: auto; display: block; }

.nav { display: flex; align-items: center; }
.nav-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: clamp(20px, 2.9vw, 42px);
  align-items: center;
}
.nav-list a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}
.nav-list a:hover,
.nav-list a[aria-current] { color: var(--teal-a11y); }

.nav-cta,
.btn-quote {
  background: var(--teal-a11y); /* white text on --teal was 4.03:1 (WCAG AA fail) */
  color: var(--white) !important;
  border-radius: var(--radius-btn);
  padding: 15px 22px;
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
}
.nav-cta:hover,
.btn-quote:hover { background: var(--deep-blue); color: var(--white) !important; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--navy);
}
.nav-toggle svg { display: block; }

/* ============ Mobile drawer ============ */
.drawer-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(36, 48, 86, 0.45);
}
.drawer {
  display: none;
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 200;
  width: min(412px, 100%);
  background: var(--white);
  flex-direction: column;
  overflow-y: auto;
}
body.menu-open .drawer { display: flex; }
body.menu-open .drawer-scrim { display: block; }
body.menu-open { overflow: hidden; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px;
  border-bottom: 1px solid var(--cloud);
}
.drawer-head img { height: 40px; width: auto; }
.drawer-close {
  border: none;
  background: var(--cloud);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}
.drawer-nav { display: flex; flex-direction: column; padding: 12px 0; }
.drawer-nav a {
  padding: 16px 24px;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid var(--cloud);
  text-decoration: none;
}
.drawer-nav a[aria-current] { color: var(--teal-a11y); font-weight: 700; }
.drawer-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 34px;
  margin-top: auto;
  background: linear-gradient(180deg, var(--white) 0%, var(--peach) 100%);
}
.drawer-panel .btn-quote { text-align: center; padding: 16px; }

@media (max-width: 900px) {
  .logo img { height: 36px; }
  .header-inner { padding: 14px 16px; gap: 8px; }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; padding: 4px; }
  .header-cta { padding: 9px 12px; font-size: 13px; border-radius: 12px; white-space: nowrap; }
}
/* Smallest phones: logo + CTA + hamburger can't share one row (header was forcing
   horizontal page scroll). The hero button and the drawer both carry the quote CTA. */
@media (max-width: 400px) {
  .header-cta { display: none; }
}

/* ============ Buttons & pills ============ */
.btn {
  display: inline-block;
  border-radius: var(--radius-btn);
  padding: 15px 22px;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--teal-a11y); color: var(--white); } /* a11y: was --teal, 4.03:1 */
.btn-primary:hover { background: var(--deep-blue); color: var(--white); }
.btn-secondary {
  background: transparent;
  color: var(--deep-blue);
  border: 1px solid var(--deep-blue);
  padding: 14px 22px;
}
.btn-secondary:hover { background: var(--cloud); color: var(--deep-blue); }
.btn-steel { background: var(--steel); color: var(--navy); }
.btn-steel:hover { background: var(--teal-a11y); color: var(--white); }
.btn-ghost { background: transparent; color: var(--deep-blue); text-decoration: underline; padding-left: 0; padding-right: 0; font-style: normal; }

.btn-small,
.card .btn {
  border: 1px solid var(--deep-blue);
  background: transparent;
  color: var(--deep-blue);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
}
.btn-small:hover,
.card .btn:hover { background: var(--deep-blue); color: var(--white); }

.pill {
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 15px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  box-shadow: var(--shadow-pill);
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
}
.pill:hover { color: var(--deep-blue); box-shadow: var(--shadow-card); }
@media (max-width: 900px) { .pill { padding: 13px 20px; font-size: 14px; } }

/* ============ Sections ============ */
section { padding: clamp(50px, 7vw, 80px) var(--pad); }
.section { padding: clamp(50px, 7vw, 80px) var(--pad); }
.section.alt, .section-alt { background: var(--white); }   /* round 2: white blocks alternate with the cream body */
.section-cream { background: var(--cream); }
.section-inner { max-width: var(--max); margin: 0 auto; }

.section-header { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; }
.section-header h2 { margin-top: 0; }

.band-teal { background: var(--teal-a11y); }
.band-teal h2, .band-teal h3 { color: var(--white); }
.band-teal p { color: var(--white); }
.band-deep { background: var(--deep-blue); }
.band-deep h2, .band-deep h3, .band-deep p { color: var(--white); }
.band-aqua { background: linear-gradient(90deg, var(--peach) 0%, var(--cream) 100%); }   /* round 2: peach → cream (was aqua → white) */
@media (max-width: 900px) { .band-aqua { background: linear-gradient(180deg, var(--peach) 0%, var(--cream) 100%); } }

.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ============ Decor ============ */
/* .dot-grid removed site-wide (round 2, Rachel-confirmed). */
.sparkle {
  position: absolute;
  width: 78px;
  height: 78px;
  opacity: 0.5;
  pointer-events: none;
}
.hearts-watermark {
  position: absolute;
  opacity: 0.1;
  pointer-events: none;
}
.accent-dot { position: absolute; border-radius: 50%; }
@media (max-width: 900px) {
  .sparkle { width: 60px; height: 60px; }
}

/* ============ Homepage hero ============ */
.hero {
  position: relative;
  padding: 76px var(--pad) 90px;
  overflow: hidden;
  background: var(--cream);
}
.hero-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 620px);
  gap: 40px;
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 21px; align-items: flex-start; max-width: 625px; }
.hero-copy .eyebrow { margin-bottom: 0; }
.hero-copy h1 { margin: 0; }
.hero-copy .lead { margin: 0; }
.hero-trust { margin: 6px 0 0; font-size: 13px; color: var(--navy); }
.stars { color: var(--orange); letter-spacing: 2px; }

.circle-photo-wrap { position: relative; }
.circle-photo-wrap .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(127, 127, 127, 0.38);
}
.circle-photo {
  border-radius: 50%;
  object-fit: cover;
  background: var(--cloud);
}
.hero-photo { width: 100%; max-width: 620px; aspect-ratio: 1; justify-self: end; }
.hero-photo .circle-photo { position: absolute; inset: 3.2%; width: 93.6%; height: 93.6%; }

@media (max-width: 900px) {
  .hero {
    padding: 55px 20px 50px;
    background: var(--cream);
    text-align: center;
  }
  .hero-inner { grid-template-columns: 1fr; gap: 26px; }
  .hero-copy { align-items: center; gap: 10px; }
  .hero-photo { max-width: 316px; margin: 0 auto; justify-self: center; }
}

/* ============ Services trio ============ */
.svc-trio {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: center;
  gap: clamp(40px, 8vw, 115px);
  margin-top: 65px;
}
.svc-card { position: relative; }
.svc-icon {
  position: absolute;
  left: 22px;
  top: -65px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--cloud);
  box-shadow: inset 0 -4px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.svc-icon img, .svc-icon svg { width: 90px; height: 90px; object-fit: contain; }
.svc-body {
  background: var(--cloud);
  border-radius: var(--radius);
  padding: 90px 36px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  min-height: 250px;
  height: 100%;
}
.svc-body h3 { margin: 0; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; }
.svc-body p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink); }
.svc-body .btn-small { margin-top: auto; }
@media (max-width: 900px) {
  .svc-trio { grid-template-columns: 1fr; gap: 96px; margin-top: 56px; }
  .svc-icon { left: 20px; top: -56px; width: 112px; height: 112px; }
  .svc-icon img, .svc-icon svg { width: 76px; height: 76px; }
  .svc-body { padding: 74px 28px 32px; min-height: 0; }
  .svc-body p { font-size: 13px; line-height: 1.5; }
}

/* ============ Reviews band ============ */
.reviews-band { padding: 65px var(--pad); }
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: var(--max);
  margin: 0 auto;
}
.review-office { display: flex; align-items: center; gap: 40px; }
.review-office .circle-photo-wrap { width: 240px; height: 240px; flex-shrink: 0; }
.review-office .circle-photo-wrap .ring { inset: -12px; border-color: var(--white); }
.review-office .circle-photo { width: 240px; height: 240px; }
.review-office-name { font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--white); }
.review-rating { font-weight: 700; font-style: italic; font-size: 16px; color: var(--white); }
/* TEMP (2026-08-04): manual Google ratings until the Places API wiring lands */
.review-rating strong { font-size: 18px; }
.review-rating .star-row { letter-spacing: 2px; }
.star-partial { display: inline-block; letter-spacing: normal; background: linear-gradient(90deg, var(--white) var(--fill, 80%), rgba(255, 255, 255, 0.35) var(--fill, 80%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.star-fill-80 { --fill: 80%; }
.star-fill-70 { --fill: 70%; }
.review-google-link { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* beat the global a:hover teal, which would vanish into the teal band */
a.review-google-link:hover, a.review-google-link:focus-visible { color: var(--white); text-decoration-thickness: 2px; }
.review-office p { margin: 0; font-size: 16px; line-height: 1.6; }
.review-office-copy { display: flex; flex-direction: column; gap: 14px; }

.review-feed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: var(--max);
  margin: 45px auto 0;
}
.quote {
  background: var(--white);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pill);
}
.quote blockquote { font-style: italic; margin: 0 0 0.5rem; color: var(--navy); font-size: 15px; }
.quote cite { color: var(--gray-text); font-style: normal; font-size: 0.85rem; }

.testimonial-card {
  max-width: var(--max);
  margin: 45px auto 0;
  background: var(--white);
  border-radius: var(--radius-img);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  padding: 24px;
  overflow: hidden;
}
.testimonial-card iframe { border: none; min-height: 400px; width: 100%; display: block; }

/* Two-source labels: "On Google" / "Shared with our teams" */
.reviews-intro { max-width: 760px; margin: 0 auto 45px; text-align: center; font-size: 18px; line-height: 1.6; color: var(--white); }
.review-source-row { display: flex; align-items: center; gap: 14px; max-width: var(--max); margin: 0 auto 28px; }
.review-source-row svg { flex-shrink: 0; }
.review-source-label { font-weight: 700; font-style: italic; font-size: 24px; color: var(--white); white-space: nowrap; }
.review-source-rule { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.35); }
.review-source-note { max-width: var(--max); margin: 0 auto 20px; font-size: 18px; line-height: 1.6; color: var(--white); }

@media (max-width: 900px) {
  .reviews-band { padding: 45px 20px; }
  .reviews-grid { grid-template-columns: 1fr; gap: 40px; }
  .review-office { flex-direction: column; text-align: center; gap: 18px; }
  .review-office .circle-photo-wrap { width: 170px; height: 170px; }
  .review-office .circle-photo { width: 170px; height: 170px; }
  .review-office .circle-photo-wrap .ring { inset: -9px; }
  .review-office-name { font-size: 20px; }
  .review-office p { font-size: 13px; line-height: 1.7; }
  .testimonial-card { border-radius: var(--radius-lg); padding: 14px; }
  .reviews-intro { font-size: 15px; line-height: 1.7; }
  .review-source-row svg { width: 20px; height: 20px; }
  .review-source-label { font-size: 18px; }
  .review-source-note { font-size: 15px; line-height: 1.6; }
}

/* ============ Split section (Live Life) ============ */
.split {
  display: grid;
  grid-template-columns: minmax(320px, 560px) 1fr;
  gap: clamp(40px, 8.6vw, 125px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
}
.split-photos { position: relative; aspect-ratio: 560 / 416; }
.split-photos .photo-main {
  width: 89.6%;
  height: 91.8%;
  border-radius: var(--radius-img);
  object-fit: cover;
}
.split-photos .photo-overlay {
  position: absolute;
  left: 60.8%;
  top: 21.8%;
  width: 38.5%;
  height: 78.1%;
  border-radius: var(--radius-img);
  object-fit: cover;
  box-shadow: var(--shadow-photo);
}
.split-copy { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; max-width: 625px; }
.split-copy h2 { margin: 0; }
.split-copy p { margin: 0; max-width: 560px; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .split-photos { aspect-ratio: auto; }
  .split-photos .photo-main { width: 100%; height: auto; border-radius: var(--radius-lg); }
  .split-photos .photo-overlay { display: none; }
  .split-copy { align-items: center; }
}

/* ============ Trust section ============ */
.trust-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 500px);
  gap: 50px;
  align-items: center;
}
@media (max-width: 900px) { .trust-split { grid-template-columns: 1fr; gap: 28px; text-align: center; } }
.trust-cols { display: flex; gap: 36px; }
.trust-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 25px; }
.trust-col .trust-title { font-weight: 700; font-style: italic; font-size: clamp(18px, 1.7vw, 24px); line-height: 1; color: var(--charcoal); }
.trust-col p { margin: 0; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.35; color: var(--charcoal); }
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 44px; }
.mini-stats .ms { display: flex; flex-direction: column; gap: 5px; }
.mini-stats .ms-num { font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); line-height: 1; color: #118FB4; }
.mini-stats .ms-label { font-size: 14px; font-style: italic; line-height: 1.3; color: var(--charcoal); }
.trust-photos { position: relative; aspect-ratio: 500 / 540; }
.trust-photos .photo-top {
  position: absolute;
  right: 0;
  top: 0;
  width: 76%;
  height: 53.7%;
  border-radius: var(--radius-img);
  object-fit: cover;
}
.trust-photos .photo-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 68%;
  height: 50%;
  border-radius: var(--radius-img);
  object-fit: cover;
  box-shadow: var(--shadow-photo);
}
@media (max-width: 900px) {
  .trust-cols { flex-direction: column; gap: 20px; text-align: center; }
  .trust-col { gap: 8px; }
  .trust-photos { aspect-ratio: auto; }
  .trust-photos .photo-top { position: static; width: 100%; height: auto; border-radius: var(--radius-lg); }
  .trust-photos .photo-bottom { display: none; }
}

/* ============ CTA band ============ */
.cta-band { position: relative; overflow: hidden; padding: 70px var(--pad); }
.cta-band-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 480px);
  gap: 60px;
  align-items: center;
}
.cta-band h2 { margin: 0; color: var(--navy); font-size: clamp(28px, 2.8vw, 40px); }
.cta-band p { margin: 0; max-width: 620px; color: var(--navy); }
.cta-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.cta-pills { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.cta-photo { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; justify-self: end; }
.cta-photo .ring { position: absolute; inset: -14px; border-radius: 50%; border: 1px solid var(--white); }
.cta-photo .circle-photo { width: 100%; height: 100%; }
@media (max-width: 900px) {
  .cta-band { padding: 55px 20px; }
  .cta-band-inner { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .cta-copy { align-items: center; }
  .cta-pills { flex-direction: column; }
  .cta-photo { display: none; }
}

/* ============ Content-page template (service pages & content pages) ============ */
.page-hero {
  position: relative;
  height: 480px;
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.page-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  padding: 0 var(--pad);
}
.page-hero-copy .eyebrow { color: var(--white); margin-bottom: 0; }
.page-hero-copy h1 { margin: 0; color: var(--white); }
@media (max-width: 900px) { .page-hero { height: 280px; } }

/* Screen-reader-only utility: content for AT/SEO without visual rendering. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lead-center { margin-left: auto; margin-right: auto; text-align: center; }
/* Feature lead (services index, Rachel 2026-08-30): statement block at the
   tile-grid width — larger type keeps the measure workable (~3 lines). */
.lead-feature {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.75;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Video variant (services index): background video dimmed toward navy so the
   white copy stays readable; the ::after scrim above adds the same 0.35 black
   layer the photo heroes use. Poster fills in for reduced-motion / no video. */
.page-hero-video { height: 560px; background: var(--navy); }
.page-hero-video .eyebrow { font-size: clamp(36px, 3.4vw, 48px); }  /* 2x: the h1 itself carries the eyebrow style; the <title> tag carries SEO */
.page-hero-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
@media (max-width: 900px) { .page-hero-video { height: 400px; } }
@media (prefers-reduced-motion: reduce) {
  .page-hero-video { background: var(--navy) url("../images/services-hero-poster.webp") center / cover no-repeat; }
  .page-hero-video > video { display: none; }
}

.alt-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 544px);
  gap: clamp(30px, 5.5vw, 80px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
}
.alt-split.flip { grid-template-columns: minmax(300px, 464px) minmax(0, 1fr); }
.alt-split h2 {
  margin: 0 0 20px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.5;
  color: var(--navy);
}
.alt-split p { margin: 0 0 1rem; line-height: 2.2; }
.alt-split p:last-child { margin-bottom: 0; }
.alt-split ul { line-height: 2; }
.alt-split-photo { position: relative; }
.photo-stat { margin: 14px 0 0; text-align: center; font-style: italic; font-size: 16px; color: var(--charcoal); }
.photo-stat strong { font-style: normal; font-size: 21px; color: #118FB4; }
.alt-split-photo > img {
  width: 100%;
  border-radius: var(--radius-img);
  object-fit: cover;
}
.deco-circle {
  position: absolute;
  width: 150px;
  height: 150px;
  opacity: 0.15;
  border-radius: 50%;
  border: 2px solid var(--teal);
  pointer-events: none;
}
.deco-circle.coral { border-color: var(--coral); }
@media (max-width: 900px) {
  .alt-split, .alt-split.flip { grid-template-columns: 1fr; gap: 22px; }
  .alt-split p { line-height: 1.7; }
  .alt-split-photo > img { border-radius: var(--radius-lg); }
  .alt-split.flip .alt-split-photo { order: -1; }
  /* homepage team section: lead with text on mobile so the hero and team photos don't stack */
  .alt-split.meet-team .alt-split-photo { order: 1; }
  .deco-circle { display: none; }
}

.gradient-band {
  background: linear-gradient(90deg, var(--peach) 0%, var(--cream) 100%);
  padding: 51px var(--pad);
}
.gradient-band h2, .gradient-band h3 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.5;
  color: var(--navy);
}
.gradient-band p { margin: 0; max-width: var(--max); line-height: 2.2; color: var(--navy); }
.gradient-band .band-inner { max-width: var(--max); margin: 0 auto; }
@media (max-width: 900px) {
  .gradient-band { background: linear-gradient(180deg, var(--peach) 0%, var(--cream) 100%); padding: 40px 20px; }
  .gradient-band p { line-height: 1.7; }
}

.leaf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.leaf-grid li {
  position: relative;
  padding-left: 36px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}
.leaf-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  background-color: var(--leaf);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M82 18 C60 16 38 20 28 34 C20 45 20 60 28 68 C30 56 36 44 48 36 C38 46 30 60 30 74 C40 80 56 80 66 70 C78 58 84 36 82 18 Z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M82 18 C60 16 38 20 28 34 C20 45 20 60 28 68 C30 56 36 44 48 36 C38 46 30 60 30 74 C40 80 56 80 66 70 C78 58 84 36 82 18 Z"/></svg>') center / contain no-repeat;
}
@media (max-width: 700px) { .leaf-grid { grid-template-columns: 1fr; } }

/* ============ Location pages ============ */
.loc-hero {
  position: relative;
  padding: 60px var(--pad) 80px;
  overflow: hidden;
}
.loc-hero-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 520px);
  gap: 60px;
  align-items: center;
}
.loc-hero-copy { display: flex; flex-direction: column; gap: 21px; align-items: flex-start; }
.loc-hero-copy .eyebrow { margin-bottom: 0; }
.loc-hero-copy h1 { margin: 0; font-size: clamp(25px, 3.2vw, 38px); }
.loc-hero-copy p { margin: 0; max-width: 580px; }
.loc-photo { width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: end; }
.loc-photo .circle-photo { position: absolute; inset: 3.5%; width: 93%; height: 93%; }
@media (max-width: 900px) {
  .loc-hero { padding: 40px 20px 50px; text-align: center; }
  .loc-hero-inner { grid-template-columns: 1fr; gap: 26px; }
  .loc-hero-copy { align-items: center; }
  .loc-photo { max-width: 316px; margin: 0 auto; justify-self: center; }
}

.stats-strip {
  background: var(--deep-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 45px var(--pad);
  gap: 0;
}
.stats-strip .stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  padding: 0 clamp(24px, 3.5vw, 50px);
}
.stats-strip .stat-num { font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; color: var(--white); }
.stats-strip .stat-label { font-weight: 400; font-style: italic; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.4; color: var(--white); }
.stats-strip .stat-divider { width: 1px; height: 80px; background: var(--white); }
@media (max-width: 900px) {
  .stats-strip { flex-direction: column; gap: 24px; padding: 35px 20px; }
  .stats-strip .stat-divider { width: 80px; height: 1px; }
}

.leaf-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.leaf-list li { position: relative; padding-left: 34px; margin: 0; font-size: 16px; line-height: 1.5; }
.leaf-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  background-color: var(--leaf);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M82 18 C60 16 38 20 28 34 C20 45 20 60 28 68 C30 56 36 44 48 36 C38 46 30 60 30 74 C40 80 56 80 66 70 C78 58 84 36 82 18 Z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M82 18 C60 16 38 20 28 34 C20 45 20 60 28 68 C30 56 36 44 48 36 C38 46 30 60 30 74 C40 80 56 80 66 70 C78 58 84 36 82 18 Z"/></svg>') center / contain no-repeat;
}

.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: var(--max); margin: 0 auto; }
.tile-grid a, .tile-grid article {
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: box-shadow 0.15s ease;
  border: none;
}
.tile-grid a:hover, .tile-grid article:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
.tile-grid .tile-title, .tile-grid h3 { font-weight: 700; font-size: 19px; color: var(--deep-blue); margin: 0; }
.tile-grid h3 a { padding: 0; background: none; }
.tile-grid p, .tile-grid .tile-desc { font-size: 15px; line-height: 1.5; color: var(--navy); margin: 0; }
@media (max-width: 900px) { .tile-grid { grid-template-columns: 1fr; } }

.link-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px; max-width: var(--max); margin: 0 auto; }
.link-cols .link-col { display: flex; flex-direction: column; gap: 16px; }
.link-col-title { font-weight: 700; font-style: italic; font-size: 22px; color: var(--charcoal); }
.link-col-links { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.link-col-links.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
@media (max-width: 900px) { .link-cols { grid-template-columns: 1fr; gap: 28px; } }

/* ============ Service-area pages ============ */
.sa-hero {
  position: relative;
  background: linear-gradient(90deg, var(--cloud) 0%, var(--white) 100%);
  padding: 60px var(--pad);
  overflow: hidden;
}
.sa-hero-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  gap: clamp(30px, 4.8vw, 70px);
  align-items: center;
}
.sa-hero-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.sa-hero-copy .eyebrow { font-size: clamp(16px, 1.4vw, 20px); margin-bottom: 0; }
.sa-hero-copy h1 { margin: 0; }
.sa-hero-copy p { margin: 0; }
.sa-photo-pair { position: relative; aspect-ratio: 440 / 400; }
.sa-photo-pair .photo-main {
  width: 86.4%;
  height: 82.5%;
  border-radius: var(--radius-img);
  object-fit: cover;
}
.sa-photo-pair .photo-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38.6%;
  height: 60%;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  background: var(--cloud);
}
@media (max-width: 900px) {
  .sa-hero { background: linear-gradient(180deg, var(--cloud) 0%, var(--white) 100%); padding: 40px 20px; text-align: center; }
  .sa-hero-inner { grid-template-columns: 1fr; }
  .sa-hero-copy { align-items: center; }
  .sa-photo-pair { max-width: 340px; margin: 0 auto; }
}

.sa-aside { display: flex; flex-direction: column; gap: 24px; }
.sa-card-facts {
  background: var(--cloud);
  border-radius: var(--radius-img);
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sa-card-office {
  background: var(--white);
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-big);
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sa-card-facts h3, .sa-card-office h3 { margin: 0; font-size: 22px; }
.sa-card-facts ul, .sa-card-office ul { list-style: none; padding: 0; margin: 0; }
.sa-card-facts li, .sa-card-office li { margin: 0 0 4px; font-size: 15px; line-height: 1.7; }

.cta-strip {
  background: linear-gradient(90deg, var(--peach) 0%, var(--cream) 100%);
  padding: 60px var(--pad);
}
.cta-strip-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-strip h2 { margin: 0 0 12px; color: var(--navy); }
.cta-strip p { margin: 0; }
@media (max-width: 900px) {
  .cta-strip { background: linear-gradient(180deg, var(--peach) 0%, var(--cream) 100%); padding: 45px 20px; }
  .cta-strip-inner { flex-direction: column; text-align: center; }
}

/* ============ Grid / Cards ============ */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section-alt .card, .band-teal .card { box-shadow: none; }
section > .section-inner > .grid .card,
.card { border: 1px solid var(--line); }
.card:hover { box-shadow: var(--shadow); }
.card h3 { margin: 0; font-size: clamp(19px, 1.7vw, 24px); }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--teal-a11y); }
.card p { margin: 0; color: var(--navy); font-size: 0.95rem; }
.card .card-link,
.card a.link { color: var(--deep-blue); font-weight: 600; text-decoration: none; font-size: 14px; margin-top: auto; }
.card a.link::after, .card .card-link::after { content: " \2192"; }

.icon-tile {
  width: 64px; height: 64px;
  background: var(--cloud);
  color: var(--deep-blue);
  border-radius: 50%;
  box-shadow: inset 0 -4px 4px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

/* ============ Stats band ============ */
.stats-band { background: var(--deep-blue); color: var(--white); padding: 2.5rem var(--pad); }
.stats-band .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
  max-width: var(--max);
  margin: 0 auto;
}
@media (max-width: 700px) { .stats-band .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat-num { font-weight: 700; font-size: 2rem; color: var(--white); letter-spacing: -0.02em; }
.stat-label { font-size: 0.85rem; color: var(--steel); }

/* ============ Callout / Facts ============ */
.callout {
  background: var(--cloud);
  border-left: 4px solid var(--teal);
  padding: 1.5rem;
  border-radius: var(--radius);
  margin: 2rem 0;
}
.callout h3 { margin-top: 0; }

.note {
  background: var(--cloud);
  border-left: 4px solid var(--orange);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  margin: 1.25rem 0;
  font-size: 0.95rem;
  color: var(--navy);
}

.facts {
  background: var(--deep-blue);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  color: var(--white);
}
.facts h3, .facts h4 { margin-top: 0; color: var(--white); font-style: normal; }
.facts ul { list-style: none; padding: 0; }
.facts li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.95rem;
}
.facts li:last-child { border-bottom: none; }
.facts li strong { color: var(--white); font-weight: 700; }

.proof-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.proof-list li {
  padding: 0.6rem 0 0.6rem 1.9rem;
  position: relative;
  color: var(--navy);
}
.proof-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 16px;
  height: 16px;
  background-color: var(--leaf);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M82 18 C60 16 38 20 28 34 C20 45 20 60 28 68 C30 56 36 44 48 36 C38 46 30 60 30 74 C40 80 56 80 66 70 C78 58 84 36 82 18 Z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M82 18 C60 16 38 20 28 34 C20 45 20 60 28 68 C30 56 36 44 48 36 C38 46 30 60 30 74 C40 80 56 80 66 70 C78 58 84 36 82 18 Z"/></svg>') center / contain no-repeat;
}

/* ============ FAQ accordion ============ */
.faq details,
details.faq {
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  background: var(--white);
  margin-bottom: 0.75rem;
}
.faq summary,
details.faq summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  color: var(--deep-blue);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker,
details.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
details.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--teal);
  font-weight: 400;
}
.faq details[open] summary::after,
details.faq[open] summary::after { content: "\2013"; }
.faq details[open],
details.faq[open] { border-color: var(--teal); }
.faq-a,
.faq details p,
details.faq p { margin-top: 0.75rem; color: var(--navy); }

/* ============ Breadcrumbs ============ */
.crumbs {
  font-size: 0.85rem;
  color: var(--gray-text);
  padding: 2.4rem var(--pad) 0.75rem;   /* clears the -30px header overlap */
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
}
.crumbs a { color: var(--gray-text); }
.crumbs a:hover { color: var(--deep-blue); }
.crumbs span[aria-current] { color: var(--deep-blue); font-weight: 700; }

/* ============ Forms ============ */
form {
  background: var(--white);
  border-radius: var(--radius-img);
  padding: 1.75rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
label { display: block; font-weight: 600; margin: 0.75rem 0 0.25rem; color: var(--navy); font-size: 0.95rem; }
input, select, textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--gray);
  border-radius: 0;
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  color: var(--navy);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--teal);
  border-color: var(--teal);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* ============ Tables ============ */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
th, td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--deep-blue); color: var(--white); font-weight: 700; }
tr:last-child td { border-bottom: none; }

/* ============ Footer ============ */
.footer { background: var(--teal-a11y); color: var(--white); }
.footer-inner { max-width: 1440px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  padding: 55px var(--pad) 45px;
}
.footer-brand { display: flex; flex-direction: column; gap: 20px; }
.footer-brand img { width: 300px; max-width: 100%; height: auto; }
.footer-brand p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--white); }
.footer-nap { display: flex; gap: clamp(20px, 3vw, 40px); flex-wrap: nowrap; }
.footer-nap p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--white); }
.footer-nap a { color: var(--white); text-decoration: underline; }
.footer-col { display: flex; flex-direction: column; gap: 24px; }
.footer-col-title {
  font-weight: 700;
  font-style: italic;
  font-size: 24px;
  line-height: 1;
  color: var(--white);
}
.footer-links { display: flex; flex-direction: column; gap: 14px; list-style: none; padding: 0; margin: 0; }
.footer-links a { font-size: 16px; color: var(--white); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; color: var(--white); }
.footer-links li { margin: 0; }

.footer-bottom {
  background: var(--charcoal);
  padding: 22px var(--pad);
  font-size: 15px;
  color: var(--white);
}
.footer-bottom-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom a { color: var(--white); text-decoration: underline; }
.footer-bottom a:hover { color: var(--steel); }
.footer-legal-links { display: flex; gap: clamp(16px, 2vw, 30px); flex-wrap: wrap; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px; }
  .footer-brand img { width: 240px; }
  .footer-col { gap: 12px; }
  .footer-col-title { font-size: 18px; }
  .footer-links { gap: 12px; }
  .footer-links a { font-size: 13px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding: 20px; font-size: 13px; }
}

/* ============ Trust badges row ============ */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding: 1.5rem 0;
  align-items: center;
}
.trust-row .badge {
  background: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill);
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  color: var(--deep-blue);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ============ City grid (locations hub) ============ */
.city-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 1.5rem;
}
@media (max-width: 800px) { .city-grid { grid-template-columns: 1fr; } }
.city-grid h3 {
  color: var(--deep-blue);
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--teal);
  font-style: normal;
}
.city-grid ul { list-style: none; padding: 0; margin: 0; columns: 1; }
.city-grid li { margin-bottom: 0.35rem; }
.city-grid a { color: var(--navy); text-decoration: none; font-size: 0.95rem; }
.city-grid a:hover { color: var(--deep-blue); text-decoration: underline; }

/* ============ Service-area hub city cards ============ */
.city-cards {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.9rem;
}
.city-cards a {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--navy);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.city-cards a:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.city-cards strong { color: var(--deep-blue); display: block; font-size: 1rem; }
.city-cards span { color: var(--navy); font-size: 0.88rem; display: block; margin-top: 0.15rem; }

.inline-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.inline-list a {
  background: var(--cloud);
  color: var(--deep-blue);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.inline-list a:hover { background: var(--deep-blue); color: var(--white); }

/* ============ Office card on location hubs ============ */
.office-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-img);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}
.office-card h3 { margin-top: 0; font-style: normal; }
.office-addr { font-weight: 700; color: var(--navy); margin-bottom: 0.3rem; }
.rating-line { color: var(--navy); }
.rating-line strong { color: var(--orange); font-size: 1.05rem; }

/* ============ Hero variants for inner pages ============ */
.hero.compact { padding: 46px var(--pad) 60px; }
.hero-local {
  background: linear-gradient(135deg, var(--deep-blue) 0%, var(--teal) 100%);
  color: var(--white);
}
.hero-local h1, .hero-local h2, .hero-local h3 { color: var(--white); }
.hero-local .eyebrow { color: var(--aqua); }
.hero-local .lede, .hero-local .lead, .hero-local p { color: rgba(255, 255, 255, 0.92); }
.hero-local .btn-secondary { background: transparent; color: var(--white); border-color: var(--white); }
.hero-local .btn-secondary:hover { background: var(--white); color: var(--deep-blue); }
.hero-card {
  background: var(--white);
  border-radius: var(--radius-img);
  padding: 1.75rem;
  box-shadow: var(--shadow-big);
}
.hero-card h3 { margin-top: 0; }
.hero-card .trust { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0; font-size: 0.95rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ============ Blog ============ */
.blog-card h3 { font-size: 1.1rem; }
.chip {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  background: var(--teal-a11y);
}
.chip-coral { background: #C93E2B; }
.post-header {
  background: linear-gradient(135deg, var(--deep-blue) 0%, var(--teal) 100%);
  color: var(--white);
  padding: 4.5rem 0 2.5rem;
}
.post-header h1 { color: var(--white); }
.post-header .lede, .post-header .lead { color: rgba(255, 255, 255, 0.95); }
.post-header .eyebrow { color: var(--aqua); }
.post-header .eyebrow a { color: inherit; text-decoration: none; }
.post-body { padding: 2.5rem 0; }
.post-body ul, .post-body ol { padding-left: 1.25rem; }
.post-body li { margin-bottom: 0.35rem; }
.byline { color: var(--gray-text); font-size: 0.9rem; }
.related-posts { padding: 0 var(--pad) 2.5rem; }
.post-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.post-list a {
  display: block;
  background: var(--white);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  padding: 1rem;
  text-decoration: none;
}
.post-list strong { color: var(--deep-blue); display: block; margin-bottom: 0.3rem; }
.post-list span { color: var(--navy); font-size: 0.9rem; }

/* ============ Last updated stamp ============ */
.last-updated {
  color: var(--gray-text);
  font-size: 0.85rem;
  padding: 1rem var(--pad);
  text-align: center;
  background: var(--white);
}

/* ============ Skip link (visually hidden until focused) ============ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--white);
  color: var(--deep-blue);
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  box-shadow: var(--shadow-header);
}
.skip-link:focus { left: 0; }

/* ============ Utilities ============ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.small { font-size: 0.85rem; color: var(--charcoal); }
.hidden { display: none; }

/* Visible focus states (WCAG) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

/* ============ Contact card ============ */
.contact-card {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  background: var(--white);
  border-radius: 50px;
  box-shadow: var(--shadow-big);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 545px);
  gap: clamp(28px, 3.5vw, 48px);
  padding: clamp(28px, 4.2vw, 60px);
}
.contact-card h1 {
  color: var(--teal);
  font-size: clamp(25px, 2.5vw, 34px);
  margin: 0 0 1rem;
}
.contact-card-main h2 { font-size: clamp(22px, 2vw, 28px); }
.contact-card-maps { display: flex; flex-direction: column; gap: 20px; }
.contact-card-maps iframe { display: block; width: 100%; border: 0; border-radius: 30px; }
.contact-info-row {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 30px;
}
.contact-info-item { display: flex; gap: 15px; align-items: flex-start; }
.contact-info-item svg { width: 26px; height: 26px; flex-shrink: 0; }
.contact-info-item p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--teal); }
.contact-info-item strong { color: var(--deep-blue); }
@media (max-width: 1100px) { .contact-info-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .contact-card { grid-template-columns: 1fr; border-radius: 30px; } }
@media (max-width: 600px) { .contact-info-row { grid-template-columns: 1fr; } }

/* ============ Blog cards ============ */
.hero-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.8vw, 55px);
  margin-bottom: 2.5rem;
}
.blog-card32 {
  border: 1px solid var(--steel);
  border-radius: 32px;
  background: var(--white);
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.blog-card32:hover { box-shadow: var(--shadow); }
.blog-card32 .chip { align-self: flex-start; font-size: 15px; padding: 6px 14px; }
a.chip, a.chip:hover { color: var(--white); }
a.chip:hover { opacity: 0.88; }
.blog-card32 h3 { margin: 0; font-size: 18px; line-height: 1.5; }
.blog-card32 h3 a { color: var(--navy); text-decoration: none; }
.blog-card32 h3 a:hover { color: var(--teal); }
.blog-card32 p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--navy); }
.blog-card32 .read-more {
  margin-top: auto;
  align-self: flex-start;
  border-radius: 5px;
  background: var(--steel);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
  text-decoration: none;
}
.blog-card32 .read-more:hover { background: var(--teal-a11y); color: var(--white); }
@media (max-width: 1000px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

/* ============ About: team cards ============ */
.team-grid {
  display: flex;
  gap: clamp(30px, 4.8vw, 70px);   /* 3 × 367 + 2 × 70 fits the 1250 column */
  flex-wrap: wrap;
  max-width: var(--max);
  margin: 0 auto;
}
.team-card {
  width: 367px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.team-card-photo {
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: var(--cloud);
}
.team-card-photo img {
  width: 100%;
  height: 338px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.team-card-plate {
  border-radius: 0 0 30px 30px;
  background: var(--white);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  padding: 28px 32px;
  flex: 1;
}
.team-card-plate.solo { border-radius: var(--radius-lg); }
.team-card-name {
  font-weight: 700;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.2;
  color: var(--deep-blue);
}
.team-card-role {
  font-weight: 600;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.4;
  color: var(--charcoal);
}
.team-card-bio {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy);
  text-align: left;
}
@media (max-width: 900px) {
  .team-grid { gap: 34px; justify-content: center; }
  .team-card { width: 100%; max-width: 372px; }
  .team-card-photo img { height: 300px; }
  .team-card-plate { padding: 22px; }
}

/* ============ Text page template ============ */
/* Title band + 820px reading column for plain-content pages
   (privacy, terms, accessibility, sitemap, faqs, careers, reviews, gift cards) */
.title-band {
  background: linear-gradient(90deg, var(--cloud) 0%, var(--white) 100%);
  padding: clamp(35px, 4vw, 55px) 0;
}
.title-band .wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.title-band h1 { margin: 0; }
.title-band p { margin: 0; }
.title-band .small { font-size: 14px; color: var(--charcoal); }
.title-band .lead { max-width: none; line-height: 1.75; margin-bottom: 0; }
.text-page { padding: clamp(40px, 4.5vw, 60px) 0 clamp(60px, 6.5vw, 90px); }
.text-page p { line-height: 1.75; }
.text-page h2 { font-size: clamp(22px, 2vw, 26px); }
@media (max-width: 900px) {
  .title-band { background: linear-gradient(180deg, var(--cloud) 0%, var(--white) 100%); }
}

/* ============ Quote flow ============ */
.quote-hero {
  position: relative;
  background: linear-gradient(180deg, var(--cream) 0%, var(--peach) 100%);
  padding: 50px var(--pad) 100px;
  overflow: hidden;
}
.quote-hero-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 620px);
  gap: clamp(30px, 5.5vw, 80px);
  align-items: start;
}
.quote-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: flex-start;
  padding-top: 40px;
}
.quote-hero-copy .eyebrow { margin-bottom: 0; }
.quote-hero-copy h1, .quote-hero-copy p { margin: 0; }
.quote-phones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.quote-embed-card {
  background: var(--white);
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-big);
  padding: clamp(14px, 3vw, 40px);
  overflow: hidden;
}
.quote-embed-card iframe { border: none; width: 100%; display: block; }
@media (max-width: 900px) {
  .quote-hero { padding: 35px 20px 60px; }
  .quote-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .quote-hero-copy { padding-top: 0; }
  .quote-embed-card { border-radius: var(--radius-lg); }
}

.book-band-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  flex-wrap: wrap;
}
.book-band-inner h2 { margin: 0 0 12px; font-size: clamp(24px, 2.4vw, 30px); }
.book-band-inner p { margin: 0; }
.book-band-copy { max-width: 760px; }
.btn-book {
  flex-shrink: 0;
  background: var(--white);
  color: var(--deep-blue);
  border-radius: var(--radius-btn);
  padding: 15px 26px;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1;
  display: inline-block;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}
.btn-book:hover { background: var(--aqua); color: var(--deep-blue); }

.book-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
}
.book-head .eyebrow { margin-bottom: 0; }
.book-head h1, .book-head p { margin: 0; }
.quote-embed-card.book-card { position: relative; max-width: 1250px; margin: 0 auto; }
.book-phones {
  position: relative;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 40px auto 0;
  max-width: var(--max);
}
@media (max-width: 900px) { .book-phones { flex-direction: column; } }

/* ============ In the Community ============ */
.event-date {
  display: inline-block;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  color: var(--teal-a11y); /* a11y: was --teal, 4.03:1 */
}
.event-loc { display: block; font-size: 14px; color: var(--charcoal); }
.tile-grid .event-date { margin-bottom: 2px; }
.event-past-list { display: flex; flex-direction: column; gap: 24px; max-width: 1000px; margin-left: auto; margin-right: auto; }
.event-past {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 24px;
  align-items: center;
}
.event-past h3 { color: var(--deep-blue); }
.event-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.event-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 800px) { .event-past { grid-template-columns: 1fr; } }

/* ============ Utility topbar (2026-08-21 punch list #2/#7) ============
   Slim navy strip above the sticky header: both county phone numbers always
   visible (phone-first vertical) + Customer Portal for existing customers.
   Text-only — adds no render-blocking work; header stays the sticky element. */
.topbar { background: var(--navy); color: var(--white); font-size: 14px; }
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px var(--pad);
}
.topbar a { color: var(--white); text-decoration: none; font-weight: 600; white-space: nowrap; }
.topbar a:hover { color: var(--aqua); }
.topbar-phones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar-phones a { display: inline-flex; align-items: center; gap: 6px; }
.topbar-phones svg { color: var(--orange); flex-shrink: 0; }
.topbar-sep { color: var(--steel); }
.topbar-portal {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  font-size: 13px;
}
.topbar-portal:hover { background: var(--orange); border-color: var(--orange); color: var(--navy); }
@media (max-width: 720px) {
  .topbar-inner { justify-content: center; padding: 7px 10px; }
  .topbar { font-size: 13px; }
  .topbar-county { display: none; }   /* numbers still tappable, labels drop */
  .topbar-portal { display: none; }   /* portal lives in the drawer on mobile */
}

/* Heritage 30+ badge removed (round 2, Rachel-confirmed regression of the 2026-08-21 punch-list item). */

/* ============ Service trio photo medallions (2026-08-21 punch list #5) ============ */
.svc-icon.svc-photo { background: var(--white); box-shadow: var(--shadow-pill), inset 0 0 0 4px var(--white); overflow: hidden; }
.svc-icon.svc-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ============ Homepage review wall (2026-08-21 punch list #8) ============
   Filled by inject-reviews.cjs from live Google data; invisible until then. */
.review-feed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 1150px;
  margin: 40px auto 0;
}
.review-feed:empty { display: none; }
.review-feed .quote {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 26px;
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.review-feed .quote blockquote { margin: 0 0 14px; font-size: 15px; line-height: 1.55; }
.review-feed .quote cite { font-style: normal; font-size: 13px; font-weight: 700; color: var(--gray-text); }

/* ======================================================================
   ROUND 2 — WARMTH COMPONENTS (2026-08-22)
   Pixel refs: docs/design-refs/round2/*.dc.html · spec: docs/ROUND2-HANDOFF.md
   ====================================================================== */

/* ---- Google review wall (homepage teal band + /reviews/) ----
   Cards are rendered by scripts/inject-reviews.cjs from data/reviews.json at
   build time. The container is :empty (hidden) until live data lands. Never
   hand-write reviews into it. */
.review-wall-head { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; margin-bottom: 40px; }
.review-wall-head h2 { margin: 0; color: var(--white); }
.review-wall-agg { margin: 0; font-size: 18px; line-height: 1.6; color: var(--white); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.review-wall-agg svg { flex-shrink: 0; }
.review-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto;
}
.review-wall:empty { display: none; }
.review-wall:empty + .review-wall-links { margin-top: 0; }
.rw-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pill);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--navy);
}
.rw-head { display: flex; align-items: center; gap: 12px; }
.rw-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--white); font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--teal-a11y);
}
.rw-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.rw-avatar.c1 { background: #0D7999; } .rw-avatar.c2 { background: #B8690A; } .rw-avatar.c3 { background: #005E82; }
.rw-avatar.c4 { background: #699635; } .rw-avatar.c5 { background: #C93E2B; } .rw-avatar.c6 { background: #243056; }
.rw-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rw-name { font-weight: 700; font-size: 15px; color: var(--navy); }
.rw-date { font-size: 12px; color: var(--gray-text); }
.rw-g { margin-left: auto; flex-shrink: 0; }
.rw-stars { color: var(--orange); letter-spacing: 2px; font-size: 14px; line-height: 1; }
.rw-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--navy); }
.review-wall-links { display: flex; justify-content: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.review-wall-links a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.review-wall-links a:hover, .review-wall-links a:focus-visible { color: var(--white); text-decoration-thickness: 2px; }
/* cream-ground variant (/reviews/) */
.review-wall-cream .review-wall-head h2 { color: var(--deep-blue); }
.review-wall-cream .review-wall-agg { color: var(--navy); }
.review-wall-cream .rw-card { border: 1px solid var(--warm-line); box-shadow: 0 2px 12px rgba(0, 94, 130, 0.06); }
@media (max-width: 1000px) { .review-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .review-wall { grid-template-columns: 1fr; gap: 16px; }
  .review-wall-agg { font-size: 14px; }
  .review-wall-links { flex-direction: column; align-items: center; gap: 14px; }
}

/* ---- "Shared with our teams" CRM feedback (own white section) ---- */
.crm-section { background: var(--white); padding: 65px var(--pad); }
.crm-inner { max-width: var(--max); margin: 0 auto; }
.crm-source-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.crm-source-row svg { flex-shrink: 0; }
.crm-source-label { font-weight: 700; font-style: italic; font-size: 24px; color: var(--navy); white-space: nowrap; }
.crm-source-rule { flex: 1; height: 1px; background: var(--warm-line); }
.crm-note { margin: 0 0 20px; font-size: 18px; line-height: 1.6; color: var(--navy); }
.crm-card {
  background: var(--white);
  border: 1px solid var(--warm-line);
  border-radius: var(--radius-img);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 24px;
  overflow: hidden;
}
.crm-card iframe { border: none; min-height: 400px; width: 100%; display: block; }
@media (max-width: 900px) {
  .crm-section { padding: 45px 20px; }
  .crm-source-row svg { width: 20px; height: 20px; }
  .crm-source-label { font-size: 18px; }
  .crm-note { font-size: 15px; }
  .crm-card { border-radius: var(--radius-lg); padding: 14px; }
}

/* ---- Face wall (real headshots + pending slots; fills as photos arrive) ---- */
.face-wall { background: var(--white); padding: 70px var(--pad); }
.face-wall-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: 32px; align-items: center; }
.face-wall-head { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.face-wall-head .eyebrow { margin-bottom: 0; }
.face-wall-head h2 { margin: 0; }
.face-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 1000px; list-style: none; padding: 0; margin: 0; }
.face-row li { margin: 0; }
.face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--orange); background: var(--cloud); }
.face-slot {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--cream);
  border: 2px dashed var(--warm-line);
  display: flex; align-items: center; justify-content: center;
  color: #C9B891; font-size: 24px;
}
.face-wall-note { margin: 0; font-size: 14px; color: var(--gray-text); font-style: italic; text-align: center; }
@media (max-width: 900px) {
  .face-wall { padding: 45px 20px; }
  .face, .face-slot { width: 72px; height: 72px; }
  .face-row { gap: 12px; }
}

/* ---- Sticky mobile action bar (round 2, approved) ----
   Pure CSS, no JS, nothing above the fold → zero LCP cost. Rendered from
   base.njk on every page except /book-now/ (the booking iframe IS the CTA).
   Frederick pages set data-office="frederick" on <body> to dial that office. */
.action-bar { display: none; }
@media (max-width: 900px) {
  .action-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 150;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--white);
  }
  .action-bar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 10px;
    font-weight: 700; font-size: 15px; line-height: 1;
    text-decoration: none;
  }
  .action-bar a svg { flex-shrink: 0; }
  .action-bar .ab-call { background: var(--orange); color: var(--navy); }
  .action-bar .ab-quote { background: var(--teal-a11y); color: var(--white); font-style: italic; }
  .action-bar .ab-call:hover, .action-bar .ab-quote:hover { filter: brightness(0.95); }
  body.has-action-bar { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  body.has-action-bar .drawer { padding-bottom: 52px; }
}
@media (max-width: 640px) { .review-wall .rw-card:nth-child(n+4) { display: none; } .review-wall-agg svg { display: none; } }   /* stacked mobile wall = 3 cards (Mobile - Landing Page.dc.html) */

/* ---- Rating badge cards (/reviews/ hero; filled by inject-reviews.cjs target 8) ---- */
.rating-badges { display: flex; gap: 40px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.rating-badge {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--warm-line); border-radius: var(--radius-lg);
  padding: 18px 28px; text-align: left;
}
.rating-badge svg { flex-shrink: 0; }
.rating-badge .rb-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rating-badge .rb-num { font-weight: 700; font-size: 22px; color: var(--navy); line-height: 1.2; }
.rating-badge .rb-num .stars { font-size: 16px; }
.rating-badge .rb-sub { font-size: 13px; color: var(--gray-text); }
@media (max-width: 900px) { .rating-badges { gap: 14px; } .rating-badge { padding: 14px 20px; } }

/* ---- Section source row on cream/white ("On Google" · rule) ---- */
.source-row { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.source-row svg { flex-shrink: 0; }
.source-row .source-label { font-weight: 700; font-style: italic; font-size: 24px; color: var(--navy); white-space: nowrap; }
.source-row .source-rule { flex: 1; height: 1px; background: var(--warm-line); }
@media (max-width: 900px) { .source-row .source-label { font-size: 18px; } .source-row svg { width: 20px; height: 20px; } }

/* ---- Centered hero for content pages (cream ground) ---- */
.hero-center { padding: 76px var(--pad) 50px; }
.hero-center-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.hero-center .eyebrow { margin-bottom: 0; }
.hero-center h1 { margin: 0; }
.hero-center p { margin: 0; max-width: 700px; }
@media (max-width: 900px) { .hero-center { padding: 45px 20px 30px; } }

/* ---- Simple centered peach CTA band ---- */
.cta-simple { padding: 60px var(--pad); }
.cta-simple-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.cta-simple h2 { margin: 0; color: var(--navy); }
.cta-simple p { margin: 0; max-width: 700px; color: var(--navy); }
.cta-simple .cta-pills { justify-content: center; }
.btn-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 900px) { .cta-simple { padding: 45px 20px; } .btn-row { flex-direction: column; } }

/* ---- Service template (Service Page Template (Recurring).dc.html) ---- */
.page-hero-copy .eyebrow { color: var(--peach); }            /* peach eyebrow on the photo hero */
.deco-circle { border-color: var(--orange); }
.lead-cta { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 4px; }
.lead-cta .pill { font-size: 15px; padding: 14px 20px; }
.alt-split .lead { font-size: 20px; line-height: 1.7; max-width: none; margin-bottom: 24px; }
.included-head { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; margin-bottom: 45px; }
.included-head .eyebrow { margin-bottom: 0; }
.included-head h2 { margin: 0; }
.included-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 60px; align-items: start; }
.included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; list-style: none; padding: 0; margin: 0; }
.inc-card {
  background: var(--cream); border: 1px solid var(--warm-line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 10px; margin: 0;
}
.inc-card .inc-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--deep-blue); line-height: 1.3; }
.inc-card .inc-title svg { flex-shrink: 0; }
.inc-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--navy); }
/* At-a-glance panel: navy, orange uppercase labels (restyles the existing .facts markup) */
.facts { background: var(--navy); border-radius: var(--radius-lg); padding: 32px; }
.facts h3, .facts h4 { font-size: 22px; margin-bottom: 6px; }
.facts li { display: flex; flex-direction: column; gap: 2px; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); font-size: 15px; }
.facts li:last-child { margin-bottom: 0; }
.facts li strong { font-size: 12px; font-weight: 600; color: var(--orange); text-transform: uppercase; letter-spacing: 0.05em; }
.facts li a { color: var(--white); text-decoration: underline; }
.facts p:last-child { margin: 16px 0 0; }
.freq-grid { gap: 40px; }
.freq-grid .card { border-color: var(--warm-line); padding: 32px; gap: 10px; }
.card-popular { position: relative; border: 2px solid var(--orange) !important; }
.popular-badge {
  position: absolute; top: -14px; left: 24px;
  background: var(--orange); color: var(--navy); font-weight: 700; font-size: 12px;
  letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius-pill); padding: 5px 14px;
}
/* FAQ + callout on the warm system */
.faq details, details.faq { background: var(--cream); border-color: var(--warm-line); padding: 16px 22px; }
.faq details[open], details.faq[open] { border-color: var(--orange); }
.faq summary::after, details.faq summary::after { color: var(--orange-a11y); }
.callout { background: var(--cream); border: 1px solid var(--warm-line); border-left-width: 1px; border-radius: var(--radius-lg); padding: 28px 32px; }
.callout h3 { font-size: 20px; margin-bottom: 10px; }
.callout p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.callout p:last-child { margin-bottom: 0; }
.callout-links { display: flex; gap: 24px; flex-wrap: wrap; }
.callout-links a { font-weight: 600; font-size: 15px; }
@media (max-width: 1000px) { .included-split { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px) {
  .included-grid { grid-template-columns: 1fr; }
  .alt-split .lead { font-size: 17px; }
  .freq-grid { gap: 28px; }
  .lead-cta { justify-content: center; }
}

/* ---- Location pages (Location - Rockville / Frederick.dc.html) ---- */
.btn-call {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: var(--navy);
  border-radius: var(--radius-pill); padding: 16px 26px;
  font-size: 19px; font-weight: 700; line-height: 1;
  box-shadow: var(--shadow-pill); text-decoration: none; white-space: nowrap;
}
.btn-call:hover { background: var(--orange-a11y); color: var(--navy); }
.loc-hero .hero-cta { align-items: center; }
.city-grid h3 { color: var(--orange-a11y); border-bottom-color: var(--warm-line); }
.office-split { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 60px; align-items: stretch; }
.office-col { display: flex; flex-direction: column; gap: 20px; }
.office-col > p { margin: 0; }
.office-card-warm {
  background: var(--cream); border: 1px solid var(--warm-line); border-radius: var(--radius-lg);
  padding: 32px; display: flex; flex-direction: column; gap: 14px; margin-top: auto;
}
.office-card-warm .rating-line { font-size: 15px; }
.btn-directions { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 17px; padding: 13px 20px; }
.office-media { display: flex; flex-direction: column; gap: 20px; }
.office-map { display: block; width: 100%; height: 380px; border: 1px solid var(--warm-line); border-radius: var(--radius-lg); background: var(--cloud); }
.office-photo { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-lg); }
.office-photo-slot {
  flex: 1; min-height: 150px; border-radius: var(--radius-lg);
  background: var(--cream); border: 2px dashed var(--warm-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-text); font-size: 14px; font-style: italic; text-align: center; padding: 20px;
}
@media (max-width: 1000px) { .office-split { grid-template-columns: 1fr; gap: 32px; } .office-map { height: 300px; } }
@media (max-width: 600px) { .btn-call { font-size: 16px; padding: 14px 20px; } .loc-hero .hero-cta { justify-content: center; } }
.tile-grid .card-link::after { content: none; }                      /* link text already carries its › */
.stats-strip .stat { padding: 0 clamp(14px, 1.8vw, 26px); }           /* 4 stats fit one row at 1440 */

/* ---- CRM iframe framing (Get a Quote / Book Now) ---- */
.quote-embed-card { padding: 0; border-radius: 50px; }
.crm-head {
  background: var(--navy); padding: 22px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.crm-head-text { display: flex; flex-direction: column; gap: 3px; }
.crm-head-title { font-weight: 700; font-style: italic; font-size: 20px; color: var(--white); line-height: 1.2; }
.crm-head-sub { font-size: 13px; color: var(--peach); }
.crm-head svg { flex-shrink: 0; }
.crm-body { padding: 24px 40px 16px; }
.crm-trust { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; padding: 0 40px 26px; }
.crm-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--gray-text); }
.crm-trust svg { flex-shrink: 0; }
@media (max-width: 900px) {
  .quote-embed-card { border-radius: 24px; }
  .crm-head { padding: 16px 20px; }
  .crm-head-title { font-size: 17px; }
  .crm-body { padding: 14px 14px 8px; }
  .crm-trust { gap: 12px 20px; padding: 0 20px 20px; }
}

/* ---- Town pages (Service Area - Gaithersburg.dc.html): warm facts card, phone-first hero ---- */
.sa-card-facts { background: var(--cream); border: 1px solid var(--warm-line); }
.sa-hero .hero-cta { align-items: center; }
@media (max-width: 900px) { .sa-hero .hero-cta { justify-content: center; } .cta-strip .btn-row { width: 100%; } }