@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..900;1,6..12,200..900&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   bath-harbor — extracted from bathtune-up.com + franchise.bathtune-up.com
   ---------------------------------------------------------------------------
   Every colour below was confirmed by render, not by declaration. The token
   architecture, spacing scale and responsive contract are ours; the palette,
   geometry and copy are theirs. See brand-spec.md for the evidence table and
   for the four places this kit deliberately diverges from the source.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ink + ground */
  --ink: #292929;
  --ink-muted: #5c5d60;
  --ink-quiet: #747874;
  --paper: #ffffff;
  --ground-1: #f1f2f2;
  --ground-2: #f8f8f8;
  --ground-3: #f3f3f3;
  --hero-floor: #000000;

  /* brand */
  --brand: #00609c;
  --brand-deep: #015779;
  --brand-ink: #016188;
  --slate: #4f5c7e;
  --alert-navy: #254061;

  /* signal */
  --accent: #ffcc00;
  --accent-gold: #de9312;

  /* links */
  --link: #0074bd;
  --link-navy: #374465;

  /* on dark grounds */
  --on-dark: #ffffff;

  /* borders, authored: the source's #d9d5d5 renders nowhere */
  --border: #dcdcdc;
  --border-soft: #e7e7e7;

  /* geometry — rendered radius census is 0px x100, 50% x13, 2px x9 */
  --radius: 2px;
  --radius-round: 50%;
  --shadow: 0 3px 6px rgba(0, 0, 0, .16);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, .15);

  /* motion — extracted: transition: all .15s linear */
  --t: .15s;
  --ease: linear;

  /* type */
  --font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --text-display: clamp(2rem, 1.15rem + 3.4vw, 3.125rem);
  --text-h2: clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem);
  --text-h3: clamp(1.3rem, 1.08rem + .95vw, 1.875rem);
  --text-h4: clamp(1.1rem, 1rem + .5vw, 1.5rem);
  --text-lede: clamp(1.0625rem, 1rem + .35vw, 1.2rem);
  --text-body: 1rem;
  --text-small: .875rem;

  /* rhythm */
  --gutter: 20px;
  --section: 88px;
  --section-sm: 56px;
  --section-lg: 120px;
  --maxw: 1200px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.28;
  overflow-wrap: break-word;
}
h1 { font-size: var(--text-display); line-height: 1.1; }
h2 { font-size: var(--text-h2); line-height: 1.32; }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .5em; }

/* ── layout ───────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section) 0; }
.section.tight { padding: var(--section-sm) 0; }
.section.alt { background: var(--ground-1); }
.section.alt-2 { background: var(--ground-2); }

.section-head { max-width: 800px; margin: 0 auto 2.5rem; text-align: center; }
.section-head p { color: var(--ink-muted); }

.lede { font-size: var(--text-lede); line-height: 1.55; color: var(--ink-muted); }
.lede-lg { font-size: var(--text-lede); line-height: 1.55; }
.fine { font-size: var(--text-small); color: var(--ink-muted); }
.center { text-align: center; }

/* Scaffolding copy this kit authors rather than transcribes. Declared in the
   markup so verbatim-audit.py can skip it and a reader can see the exemption
   where it is used. */
.kit-note {
  font-size: var(--text-small);
  color: var(--ink-muted);
  background: var(--ground-1);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ── buttons ──────────────────────────────────────────────────────────────
   Extracted geometry: every button on the source is a 2px-radius rectangle
   with a 3px border, 48–60px tall, weight 800, transition all .15s linear.
   Nothing on this site is a pill (rendered pill count: 0).
   ───────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 12px 28px;
  border: 3px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.btn-sm { min-height: 42px; padding: 8px 18px; font-size: .8125rem; }

/* the primary CTA is an OUTLINE button: white fill, 3px accent, ink label */
.btn-accent { background: var(--paper); border-color: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.btn-navy { background: var(--brand); border-color: var(--brand-deep); color: var(--on-dark); }
.btn-navy:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--on-dark); }

.btn-outline { background: var(--paper); border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand); border-color: var(--brand); color: var(--on-dark); }

/* DIVERGENCE (logged in brand-spec.md, transcribe-don't-clone):
   the source paints .btn-callout white-on-#de9312 at 2.53:1 and resolves every
   button hover to the same pairing. Structure kept, contrast fixed: ink on gold
   is 5.74:1 at rest, and the hover moves to the marine blue at 6.66:1. */
.btn-callout {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--ink);
}
.btn-callout:hover { background: var(--brand); border-color: var(--brand); color: var(--on-dark); }

/* RE-ASSERT EVERY BUTTON'S OWN INK, AT (0,2,2), IN ONE PLACE.
   Any `<context> a { color: ... }` rule is (0,1,1) and therefore outranks
   `.btn-navy` (0,1,0), so it reaches into any button that happens to sit
   inside that context. `.rtf a { color: var(--link) }` did exactly that and
   painted the homepage's "Learn More" and the shower page's "Schedule A
   Consultation" link-blue on brand-blue at 1.34:1, INVISIBLE, caught by the
   Phase 5 contrast gate. Fix by re-asserting the button, never by weakening
   the context rule. Register any new button variant HERE in the same edit
   that adds it. */
body a.btn-accent, body a.btn-accent:hover { color: var(--ink); }
body a.btn-navy, body a.btn-navy:hover { color: var(--on-dark); }
body a.btn-outline { color: var(--brand); }
body a.btn-outline:hover { color: var(--on-dark); }
body a.btn-callout { color: var(--ink); }
body a.btn-callout:hover { color: var(--on-dark); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--link-navy);
  text-decoration: none;
}
.link-arrow:hover { color: var(--brand); }
.link-arrow::after { content: '>'; font-weight: 800; }

/* ── site nav (Pattern D: .nav > .container > .brand-mark) ─────────────── */
.nav {
  background: var(--paper);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  z-index: 40;
}
.nav > .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 14px;
  padding-bottom: 14px;
}
.nav .brand-mark { display: block; flex-shrink: 0; }
.nav .brand-mark img { width: 190px; height: auto; }
.nav .links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-left: auto; }
.nav .links > a {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
  transition: border-color var(--t) var(--ease);
}
.nav .links > a:hover { border-bottom-color: var(--accent); }
.nav .actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.nav .actions .phone {
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav .actions .phone:hover { color: var(--brand); }

/* The house rule: the actions row is hidden at burger width. The tap-to-call
   survives in the consultation band, the financing band and the footer, all of
   which ship on every page. +1 specificity so it beats ../mobile-responsive.css. */
@media (max-width: 768px) {
  .nav > .container > .actions { display: none; }
  .nav > .container { gap: 10px; }
}

/* `.alert` — franchise host only, and a MODIFIER on one nav link, not a bar.
   The source's per-page inline rule is
   `.primary-nav__link.alert { color:#fff!important; background-color:#254061;
   border-radius:4px; padding:4px 10px }` on the single "Inquire Now" anchor at
   the end of the recruitment nav. That 4px is the one radius outside the
   2px/50% scale, and it is the source's own. */
.nav .links > a.alert {
  background: var(--alert-navy);
  color: var(--on-dark);
  border-radius: 4px;
  padding: 4px 10px;
  border-bottom: 0;
}
.nav .links > a.alert:hover { background: var(--brand-deep); }

/* ── 01 slider-hero ───────────────────────────────────────────────────────
   The source, read off the theme sheet and the homepage's own inline <style>
   rather than off a description of it: `.slider-hero { background-color:#000;
   position:relative }` is a solid floor, the photograph rides on a separate
   `.slider-hero__slide { background-size:cover }` fed by a per-slide inline
   rule, and the only legibility device is a 3px halo:
   `.slider-hero__inner .generic-hero__headline { color:#fff;
   text-shadow:0 0 3px #525252 }` and `.slider-hero .generic-hero__teaser p {
   text-shadow:0 0 3px #525252 }` (2,364 and 928 corpus hits; the #292929 the
   spec used to quote is the teaser WRAPPER's value, which no text node
   renders). There is no scrim and no gradient anywhere in the source.

   THIS KIT ADDS ONE, and it is the only thing here the source does not do.
   White display type straight on those photographs measures 1.01:1 at its
   worst pixel and 2.06:1 averaged across the headline's box at 1440; WCAG
   credits the halo with nothing. The layer below is the source's own
   `--hero-floor` black raised over the photograph at 55%, the lightest
   scrim that clears AA on every pixel behind both text boxes at 375 and
   1440 (headline min 4.76:1 against 3.0, teaser min 4.81:1 against 4.5).
   Logged as divergence 8 in brand-spec.md. */
.slider-hero {
  position: relative;
  background-color: var(--hero-floor);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.slider-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  pointer-events: none;
}
.slider-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px var(--gutter) 92px;
  text-align: center;
}
.slider-hero .hero-headline {
  color: var(--on-dark);
  text-shadow: 0 0 3px #525252;
  margin-bottom: .35em;
}
.slider-hero .hero-teaser {
  color: var(--on-dark);
  text-shadow: 0 0 3px #525252;
  font-size: var(--text-lede);
  max-width: 720px;
  margin: 0 auto 2rem;
}
.hero-dots { display: flex; justify-content: center; gap: 10px; }
.hero-dots .dot {
  width: 12px; height: 12px;
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, .45);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.hero-dots .dot.is-active { background: var(--accent); }

/* ── 02 generic-hero ──────────────────────────────────────────────────────
   TWO layers, not one. The source builds the inner-page hero as
   `.generic-hero__container` holding (a) `.generic-hero__content` — the title
   set in charcoal on the white page, `.generic-hero__headline { color:#494949 }`
   — and beneath it (b) a separate photograph band, `.generic-hero__inner`
   275px tall (400px when a teaser is present), whose
   `.generic-hero__content-wrapper` is explicitly emptied
   (`background-image: none !important`). No text ever sits on the photograph
   here, and the breadcrumb is a SIBLING `<nav>` after the whole container, not
   a child of the hero. The white-on-photo treatment belongs to `.slider-hero`
   only; see brand-spec.md. */
.generic-hero__container { background: var(--paper); }
.generic-hero__content {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px var(--gutter) 30px;
  text-align: center;
}
.generic-hero__headline { color: var(--ink); margin: 0; }
.generic-hero__teaser {
  color: var(--ink-muted);
  font-size: var(--text-lede);
  margin: 18px auto 0;
  max-width: 760px;
}
.generic-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--hero-floor);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 100%;
}
.generic-hero__inner { height: 275px; }
.generic-hero--has-teaser .generic-hero__inner { height: 400px; }
@media (max-width: 768px) {
  .generic-hero__inner,
  .generic-hero--has-teaser .generic-hero__inner { height: 220px; }
}
.generic-hero__content-wrapper { height: 100%; }

/* Breadcrumb: its own centred nav below the hero container, per the source's
   `<nav class="breadcrumb-nav">`. Link ink is raised from the source's
   `#8f8f93` (3.21:1 at 12px, below AA) to `--ink-muted` at 6.58:1; logged as a
   divergence in brand-spec.md. */
.breadcrumb {
  margin: 26px 0 20px;
  padding: 0 var(--gutter);
  text-align: center;
  font-size: .75rem;
  color: var(--ink);
}
.breadcrumb a { color: var(--ink-muted); text-decoration: none; margin-right: 5px; }
.breadcrumb a::after { padding-left: 5px; content: '>'; color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--brand-ink); }
.breadcrumb span { color: var(--ink); }

/* ── 03 form-offer — consultation band on the slate ground ─────────────── */
.form-offer { padding: var(--section-sm) 0; background: var(--ground-1); }
.form-offer__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--slate);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.form-offer__inner > * { min-width: 0; }
@media (max-width: 880px) { .form-offer__inner { grid-template-columns: 1fr; } }
.form-offer__desc { padding: 2.5rem 2rem; }
.form-offer__title { color: var(--on-dark); font-size: var(--text-h3); margin-bottom: .5em; }
.form-offer__prompt { color: var(--on-dark); font-size: 1.0625rem; font-weight: 600; }
.form-offer__form { padding: 2.5rem 2rem; background: rgba(255, 255, 255, .07); }
.form-offer__step {
  display: block;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 1rem;
}
.fields-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.fields-row > * { min-width: 0; }
.callout-field { display: block; }
.field {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
}
.field:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
textarea.field { min-height: 120px; resize: vertical; }
.form-offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.25rem 0 1rem; }
.form-offer__call { color: var(--on-dark); font-weight: 800; text-decoration: none; }
.form-offer__call:hover { color: var(--accent); }
.form-offer .fine, .form-offer__disclaimer { color: var(--on-dark); font-size: .8125rem; line-height: 1.5; }
.form-offer__disclaimer a { color: var(--on-dark); }

/* ── 04 reviews-slider ────────────────────────────────────────────────── */
.reviews-slider { padding: var(--section) 0; }
.reviews-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(360px, 82vw);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}
.reviews-rail > * { scroll-snap-align: start; }
.review-card {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.review-card h3 { font-size: .875rem; font-weight: 700; margin: 0; }
.review-stars { display: flex; gap: 3px; }
.review-star { display: inline-block; width: 1em; height: 1em; line-height: 1; position: relative; }
.review-star::before { content: '\2605'; color: var(--accent-gold); font-size: 1.05rem; line-height: 1; }
.review-card .quote { font-size: .9375rem; color: var(--ink); margin: 0; }
.review-card .name { font-size: .8125rem; font-weight: 700; color: var(--ink-muted); }

/* ── 05 / 06 service + trustpoint card grids (circular photographs) ────── */
.svc-grid { padding: var(--section) 0; }
.svc-grid__heading { text-align: center; }
.svc-grid__lede { text-align: center; max-width: 820px; margin: 0 auto 2.75rem; }
.svc-grid__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 30px;
}
.svc-grid__layout > * { min-width: 0; }
.svc-grid__card { text-align: center; }
.svc-grid__card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-round);
  overflow: hidden;
  background: var(--ground-1);
  margin-bottom: 1.25rem;
}
.svc-grid__card-img img { width: 100%; height: 100%; object-fit: cover; }
.svc-grid__card-heading { font-size: 1.35rem; margin-bottom: .3em; }
.svc-grid__link { color: var(--link); font-weight: 600; text-decoration: none; font-size: .9375rem; }
.svc-grid__link:hover { color: var(--ink-quiet); }
.svc-grid--values .svc-grid__card { text-align: left; }
.svc-grid--values .svc-grid__card {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.svc-grid--values .svc-grid__card h3 { font-size: 1.25rem; }
.svc-grid--values .svc-grid__card .k { font-weight: 700; margin-bottom: .35em; }
.svc-grid--values .svc-grid__card p { font-size: .9375rem; color: var(--ink-muted); }

/* ── 07 twocol-content ────────────────────────────────────────────────── */
.twocol-content { padding: var(--section) 0; }
.twocol-content__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.twocol-content__inner > * { min-width: 0; }
@media (max-width: 880px) { .twocol-content__inner { grid-template-columns: 1fr; gap: 28px; } }
.twocol-content__title { font-weight: 600; color: var(--ink); }
.twocol-content__img img { width: 100%; height: auto; border-radius: var(--radius); }
.twocol-content--flip .twocol-content__img { order: -1; }

/* ── 08 featured-content rail ─────────────────────────────────────────── */
.featured-content { padding: var(--section) 0; background: var(--ground-2); }
.featured-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(320px, 82vw);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}
.featured-rail > * { scroll-snap-align: start; min-width: 0; }
.featured-slide {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.featured-slide__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ground-1); }
.featured-slide__img img { width: 100%; height: 100%; object-fit: cover; }
.featured-slide__body { padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.featured-slide__title { font-size: 1.125rem; margin: 0; color: var(--link-navy); }
.featured-slide__body p { font-size: .875rem; color: var(--ink-muted); margin: 0; }
.featured-slide__body .link-arrow { margin-top: auto; }

/* ── 09 featured-reviews ──────────────────────────────────────────────── */
.featured-reviews { padding: var(--section) 0; text-align: center; }
.featured-reviews__title { font-weight: 700; }
.featured-reviews__rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 30px;
  margin: 2.5rem 0;
  text-align: left;
}
.featured-reviews__rail > * { min-width: 0; }
.featured-review { border-top: 3px solid var(--accent); padding-top: 1.25rem; }
.featured-review .quote { font-size: .9375rem; color: var(--ink); }
.featured-review .name { margin-top: .75rem; font-size: .8125rem; font-weight: 700; color: var(--ink-muted); }
.featured-reviews__cta { border-color: var(--slate); }

/* ── 10 reviews-list, with the oversized quote glyph ──────────────────── */
.reviews-list { padding: var(--section) 0; }
.reviews-list__inner { background: var(--ground-1); border-radius: var(--radius); padding: 3rem 2.5rem; }
.reviews-list__title { text-align: center; }
.reviews-list__teaser { text-align: center; max-width: 820px; margin: 0 auto 2.5rem; }
.reviews-list__review {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 2rem 2rem 1.75rem 3.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* The signature glyph: a 170px hairline double-quote bled off the left edge of
   every review. Parked with `top`/`left` only, never a bottom offset, so it can
   never resolve inside the resting box. */
.reviews-list__review-testimonial { position: relative; }
.reviews-list__review-testimonial::before {
  content: '\2018\2018';
  position: absolute;
  top: -46px;
  left: -34px;
  /* The box is an ANCHOR, not the glyph. Declaring it small and letting the
     mark bleed out is both the correct description of a decorative bleed and
     what keeps the resting-intrusion gate honest: an auto-height pseudo
     resolves to the full 170px line box, which the gate correctly reads as an
     oversized flood layer parked inside its element. The card's own
     overflow: hidden is what clips the mark to the edge, which is the effect
     the source has. */
  width: 130px;
  height: 44px;
  overflow: visible;
  font-size: 10.625rem;
  font-weight: 200;
  letter-spacing: -17.71px;
  line-height: 1;
  color: var(--brand-ink);
  opacity: .18;
  pointer-events: none;
}
.reviews-list__review .quote { position: relative; font-size: 1rem; }
.reviews-list__review .name { margin-top: .9rem; font-weight: 700; font-size: .875rem; color: var(--ink-muted); }
.reviews-list__foot { text-align: center; margin-top: 2rem; }

/* ── 11 offer-callout ─────────────────────────────────────────────────── */
.offer-callout { background: var(--slate); color: var(--on-dark); padding: var(--section-sm) 0; }
.offer-callout__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}
.offer-callout__inner > * { min-width: 0; }
@media (max-width: 880px) { .offer-callout__inner { grid-template-columns: 1fr; } }
.offer-callout__tagline { color: var(--on-dark); font-size: var(--text-h4); font-weight: 700; margin-bottom: .4em; }
.offer-callout__title { color: var(--on-dark); font-size: var(--text-h3); font-weight: 400; margin-bottom: .5em; }
.offer-callout__desc { color: var(--on-dark); font-size: .8125rem; line-height: 1.5; }

/* ── 12 alternating module + overlapping circular badge ───────────────── */
.alt-mod { padding: var(--section) 0; }
.alt-mod__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
.alt-mod__inner > * { min-width: 0; }
@media (max-width: 880px) { .alt-mod__inner { grid-template-columns: 1fr; gap: 28px; } }
.alt-mod__media { position: relative; }
.alt-mod__img img { width: 100%; height: auto; border-radius: var(--radius); }
.alt-mod__overlay-img {
  width: 180px;
  height: 180px;
  border: solid 4px var(--paper);
  border-radius: var(--radius-round);
  overflow: hidden;
  margin: -56px auto 0;
  box-shadow: var(--shadow);
  background: var(--ground-1);
}
.alt-mod__overlay-img img { width: 100%; height: 100%; object-fit: cover; }
.alt-mod__content { min-width: 0; }
.alt-mod__title { font-weight: 600; color: var(--ink); }
.alt-mod--flip .alt-mod__media { order: -1; }
@media (min-width: 881px) { .alt-mod__overlay-img { margin: -70px 0 0 -70px; } }

/* ── 13 enhanced alternating module — numbered steps ──────────────────── */
.step-mod { padding: var(--section) 0; background: var(--ground-2); }
.step-mod__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px;
}
.step-mod__list > * { min-width: 0; }
.step-mod__item {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.step-mod__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-round);
  background: var(--brand);
  color: var(--on-dark);
  font-weight: 800;
  margin-bottom: 1rem;
}
.step-mod__title { font-size: 1.25rem; }
.step-mod__item p { font-size: .9375rem; color: var(--ink-muted); }

/* ── 14 generic module ────────────────────────────────────────────────── */
.generic-module { padding: var(--section) 0; }
.generic-module__title { font-weight: 600; color: var(--ink); text-align: center; }
.rtf { max-width: 900px; margin: 0 auto; }
.rtf p { line-height: 1.75; }
.rtf a { color: var(--link); }
.rtf a:hover { color: var(--ink-quiet); }
.service-intro { text-align: center; font-weight: 600; font-style: italic; font-size: var(--text-lede); margin: 0 0 1.5rem; }

/* ── 15 who-we-are ────────────────────────────────────────────────────── */
.who-we-are { padding: var(--section) 0; background: var(--ground-1); }
.who-we-are__inner {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.who-we-are__inner > * { min-width: 0; }
@media (max-width: 880px) { .who-we-are__inner { grid-template-columns: 1fr; gap: 26px; } }
.who-we-are__title { font-weight: 600; }
.who-we-are__testimonial {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}
.who-we-are__content { min-width: 0; }
.who-we-are__quote { font-style: italic; font-size: 1.125rem; line-height: 1.375em; color: var(--ink); }
.who-we-are__attrib { font-weight: 700; font-size: .875rem; color: var(--ink-muted); }

/* ── 16 content-slider ────────────────────────────────────────────────── */
.content-slider { padding: var(--section) 0; }
.content-slider__title { font-weight: 600; text-align: center; }
.content-slider__desc { text-align: center; max-width: 820px; margin: 0 auto 2.5rem; }
.content-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(340px, 82vw);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}
.content-rail > * { scroll-snap-align: start; min-width: 0; }
.content-slide {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.content-slide__img { aspect-ratio: 16 / 10; background: var(--ground-1); overflow: hidden; }
.content-slide__img img { width: 100%; height: 100%; object-fit: cover; }
.content-slide__inner { padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.content-slide__title { font-size: 1.1875rem; margin: 0; }
.content-slide__inner p { font-size: .9375rem; color: var(--ink-muted); margin: 0; }
.content-slider__dots { display: flex; justify-content: center; gap: 10px; margin-top: 1.5rem; }
.content-slider__dots .dot {
  width: 12px; height: 12px; border: 0; padding: 0;
  border-radius: var(--radius-round);
  background: var(--border);
  cursor: pointer;
}
.content-slider__dots .dot.is-active { background: var(--brand); }

/* ── 17 before/after comparison ───────────────────────────────────────── */
.ba-section { padding: var(--section) 0; }
.before-after__title { text-align: center; margin: 0 0 .5em; }
.before-after__desc { text-align: center; max-width: 900px; margin: 0 auto 2.5rem; }
.before-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
}
.before-after > * { min-width: 0; }
@media (max-width: 880px) { .before-after { grid-template-columns: 1fr; } }
.ba-half { position: relative; aspect-ratio: 4 / 3; background: var(--ground-1); }
.ba-half img { width: 100%; height: 100%; object-fit: cover; }
.ba-label {
  position: absolute;
  top: 0; left: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4em .9em;
}
.ba-divider { width: 4px; background: var(--accent); }
.ba-caption { margin-top: 1.5rem; max-width: 900px; }
.ba-caption p { font-size: 1rem; line-height: 1.75; }

/* ── 18 prod-gallery ──────────────────────────────────────────────────── */
.prod-gallery { padding: var(--section) 0; background: var(--ground-2); }
.prod-gallery__title { font-weight: 600; text-align: center; }
.prod-gallery__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(420px, 82vw);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}
.prod-gallery__rail > * { scroll-snap-align: start; min-width: 0; }
.prod-gallery__slide { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.prod-gallery__slide-img { aspect-ratio: 4 / 3; background: var(--ground-1); overflow: hidden; }
.prod-gallery__slide-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-gallery__slide-description { padding: 1.25rem 1.4rem 1.5rem; }
.prod-gallery__slide-description p { font-weight: 400; line-height: 1.4; font-size: 1rem; margin: 0; }
.prod-gallery__nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 1.75rem; }
.prod-gallery__nav-item {
  position: relative;
  width: 84px; height: 64px;
  border: 0; padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ground-1);
  cursor: pointer;
}
.prod-gallery__nav-item img { width: 100%; height: 100%; object-fit: cover; }
.prod-gallery__nav-item.is-active { box-shadow: inset 0 0 0 3px var(--accent); }
.prod-gallery__nav-item:hover { box-shadow: inset 0 0 0 3px var(--accent); }

/* ── 19 accordion ─────────────────────────────────────────────────────── */
.accordion { padding: var(--section) 0; }
.accordion__list { max-width: 900px; margin: 0 auto; }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__item-header {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  padding: 1.15rem 2.5rem 1.15rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.accordion__item-header::-webkit-details-marker { display: none; }
.accordion__item-header h3 { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit; }
.accordion__item-header::after {
  content: '+';
  position: absolute;
  right: .25rem;
  top: 1rem;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--brand);
}
.accordion__item[open] .accordion__item-header::after { content: '\2013'; }
.accordion__item-body { padding: 0 0 1.4rem; }
.accordion__item-body p { font-size: 1rem; color: var(--ink-muted); }

/* ── 20 col-grid services index ───────────────────────────────────────── */
.col-grid { padding: var(--section) 0; }
.col-grid__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
}
.col-grid__layout > * { min-width: 0; }
.col-grid__item { min-width: 0; }
.col-grid__item-title { font-size: 1.5rem; color: var(--ink); border-bottom: 3px solid var(--accent); padding-bottom: .4em; }
.col-listing { list-style: none; padding: 0; margin: 0; }
.col-listing li { margin: 0; border-bottom: 1px solid var(--border-soft); }
.col-listing a { display: block; padding: .75rem 0; color: var(--ink); text-decoration: none; font-weight: 600; }
.col-listing a:hover { color: var(--brand); }

/* ── 21 blog-listing ──────────────────────────────────────────────────── */
.blog-listing { padding: var(--section) 0; }
.category-select { display: flex; justify-content: flex-end; margin-bottom: 2rem; }
.category-select__trigger {
  background: var(--ink-muted);
  color: var(--on-dark);
  border: 0;
  border-radius: var(--radius);
  padding: .8rem 1.2rem;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
}
.featured-blog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  margin-bottom: 3rem;
  border-top: 1px solid var(--accent);
  padding-top: 2rem;
}
.featured-blog > * { min-width: 0; }
@media (max-width: 880px) { .featured-blog { grid-template-columns: 1fr; gap: 20px; } }
.featured-blog__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--ground-1); }
.featured-blog__img img { width: 100%; height: 100%; object-fit: cover; }
.featured-blog__category { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.blog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px;
}
.blog-cards > * { min-width: 0; }
.blog-card {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.blog-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ground-1); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.blog-card__title { font-size: 1.125rem; margin: 0; }
.blog-card__body p { font-size: .875rem; color: var(--ink-muted); margin: 0; }
.blog-card__body .link-arrow { margin-top: auto; }
.blog-listing__foot { text-align: center; margin-top: 2.5rem; }

/* ── 22 blog-detail ───────────────────────────────────────────────────── */
.blog-detail { padding: var(--section) 0; }
.blog-detail__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 56px;
  align-items: start;
}
.blog-detail__inner > * { min-width: 0; }
@media (max-width: 880px) { .blog-detail__inner { grid-template-columns: 1fr; gap: 32px; } }
.blog-header { border-bottom: 1px solid var(--border-soft); padding-bottom: 1.25rem; margin-bottom: 1.75rem; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .875rem; color: var(--ink-muted); }
.blog-body p { line-height: 1.75; }
.blog-body h2 { font-size: 1.5rem; margin-top: 1.75rem; }
.blog-body h3 { font-size: 1.25rem; margin-top: 1.5rem; }
.blog-social { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-soft); }
.blog-social h3 { font-size: 1rem; }
.blog-social ul { list-style: none; padding: 0; display: flex; gap: .9rem; }
.blog-social li { margin: 0; }
.blog-social a { color: var(--brand); font-weight: 700; font-size: .875rem; text-decoration: none; }
.blog-sidebar { background: var(--ground-1); border-radius: var(--radius); padding: 1.6rem; }
.blog-sidebar h3 { font-size: 1.0625rem; }
.related-posts { margin-top: 3rem; }
.related-posts__title { font-size: 1.5rem; }
.related-post { border-top: 1px solid var(--border-soft); padding: 1.1rem 0; }
.related-post h3 { font-size: 1.0625rem; margin: 0 0 .25em; }
.related-post__publishing-info { font-size: .8125rem; color: var(--ink-muted); }

/* ── 23 local-info ────────────────────────────────────────────────────── */
.local-info { padding: var(--section-sm) 0; background: var(--ground-3); }
.local-info__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 32px;
}
.local-info__inner > * { min-width: 0; }
.local-info__franchise-name { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: 0 0 .5em; }
.local-info__section-title { font-size: 1rem; font-weight: 700; margin-bottom: .6em; }
.local-info__section ul { list-style: none; padding: 0; margin: 0; }
.local-info__section li { font-size: .9375rem; color: var(--ink-muted); margin-bottom: .35em; }
.local-info__callout { color: var(--brand); font-weight: 700; text-decoration: none; }

/* ── 24 meet-team ─────────────────────────────────────────────────────── */
.meet-team { padding: var(--section) 0; }
.meet-team__title { font-weight: 600; text-align: center; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 32px;
  margin-top: 2.5rem;
}
.team-grid > * { min-width: 0; }
.team-member { text-align: center; }
.team-member__photo {
  width: 180px; height: 180px;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius-round);
  overflow: hidden;
  background: var(--ground-1);
}
.team-member__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-member__name { font-size: 1.25rem; margin-bottom: .15em; }
.team-member__role { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .9em; }
.team-member__biography { font-size: .9375rem; color: var(--ink-muted); }

/* ── 25 add-review ────────────────────────────────────────────────────── */
.add-review { padding: var(--section) 0; background: var(--ground-1); }
.add-review__inner { max-width: 760px; margin: 0 auto; background: var(--paper); border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow); }
.add-review__title { font-size: var(--text-h3); }
.star-rating-widget { display: flex; gap: 6px; align-items: center; margin: 1rem 0; }
.star-rating-widget label { cursor: pointer; }
.star-rating-widget .review-star::before { font-size: 1.6rem; }
.file-label { display: block; font-size: .875rem; font-weight: 700; color: var(--ink); margin: 1rem 0 .4rem; }
.add-review__submit { margin-top: 1.5rem; }
.add-review__disclaimer { font-size: .8125rem; color: var(--ink-muted); margin-top: 1rem; }

/* ── 26 locations ─────────────────────────────────────────────────────── */
.locations { padding: var(--section) 0; }
.location-state-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2.5rem; }
.location-state-button {
  border: 3px solid var(--brand);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--brand);
  font-family: var(--font);
  font-weight: 800;
  font-size: .8125rem;
  padding: .5rem .9rem;
  cursor: pointer;
}
.location-state-button:hover { background: var(--brand); color: var(--on-dark); }
.locations__state { font-size: 1.5rem; border-bottom: 3px solid var(--accent); padding-bottom: .35em; margin-top: 2rem; }
.locations__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}
.locations__list > * { min-width: 0; }
.location-card { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.4rem; }
.location-card p { margin: 0 0 .35em; }
.location-card .serving { font-size: .875rem; color: var(--ink-muted); margin: 0; }

/* ── 27 sitemap ───────────────────────────────────────────────────────── */
.sitemap { padding: var(--section) 0; }
.sitemap__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 32px;
}
.sitemap__cols > * { min-width: 0; }
.sitemap__list { list-style: none; padding: 0; margin: 0; }
.sitemap__list li { margin-bottom: .5em; }
.sitemap__list a { color: var(--ink); text-decoration: none; font-size: .9375rem; }
.sitemap__list a:hover { color: var(--brand); text-decoration: underline; }

/* ── 28 two-column callout (franchise) ────────────────────────────────── */
.two-col-callout { padding: var(--section) 0; }
.two-col-callout__img img { width: 100%; height: auto; border-radius: var(--radius); }
.two-col-callout__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.two-col-callout__content > * { min-width: 0; }
@media (max-width: 880px) { .two-col-callout__content { grid-template-columns: 1fr; gap: 26px; } }
.two-col-callout__content--separator { border-top: 1px solid var(--border); padding-top: 2rem; margin-top: 2rem; }
.two-col-callout__left, .two-col-callout__right { min-width: 0; }
.two-col-callout h3 { font-size: 1.5rem; }
.stat-list { padding-left: 1.1rem; }
.stat-list li { font-size: .9375rem; line-height: 1.6; }
.stat-list strong { color: var(--ink); }
.stat-source { font-size: .8125rem; color: var(--ink-muted); }

/* ── 29 video-block (franchise) ───────────────────────────────────────────
   `.video-block__frame { padding:17px 20px; background-color:#fff;
   box-shadow: 0 1px 9px rgba(0,0,0,.16) }` wrapping a 56.25% aspect box on a
   black floor. The white frame with the soft drop shadow is the whole device;
   the embed interior belongs to YouTube and is not transcribed. */
.video-block { padding: var(--section-sm) 0; }
.video-block__frame {
  max-width: 900px;
  margin: 0 auto;
  padding: 17px 20px;
  background: var(--paper);
  box-shadow: 0 1px 9px rgba(0, 0, 0, .16);
}
.video-block__container {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--hero-floor);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.video-block__container .kit-note { text-align: center; max-width: 460px; }
@media (max-width: 768px) { .video-block__frame { padding: 7px; } }

/* ── 30 proj-gallery (franchise) ──────────────────────────────────────── */
.proj-gallery { padding: var(--section) 0; background: var(--ground-2); }
.proj-gallery__title { font-weight: 600; text-align: center; }
.proj-gallery__subtitle { text-align: center; max-width: 860px; margin: 0 auto 2.5rem; }
.proj-gallery__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.proj-gallery__items > * { min-width: 0; margin: 0; }
.proj-slot { background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.5rem; }
.proj-gallery__foot { text-align: center; margin-top: 2.5rem; }

/* ── 31 territory map (franchise) ─────────────────────────────────────── */
.territory-map { padding: var(--section) 0; }
.territory-map__frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  background: var(--ground-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* ── 32 two-col — twoColumnRtfBlock (franchise) ───────────────────────────
   The source block is `<section class="two-col" id="twoColumnRtfBlock">`: a
   centred `.two-col__subtitle` above a `.two-col__wrapper` of two 50% columns,
   BOTH headed by an `h3`, each closing with a plain `<ul>`. The divider is the
   source's own `.two-col__left:after { width:4px; height:calc(80% - 20px);
   background-color:#f1f2f2 }` on the inside edge of the left column. There is
   no card, no icon and no accent fill in it. */
.two-col { padding: var(--section) 0; }
.two-col__subtitle { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.two-col__wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}
.two-col__column { min-width: 0; }
.two-col__column h3 { font-weight: 400; color: var(--ink); }
.two-col__column ul { padding-left: 1.1rem; }
.two-col__column li { font-size: .9375rem; }
.two-col__left { position: relative; padding-right: 40px; }
.two-col__left::after {
  position: absolute;
  bottom: 0;
  right: -2px;
  width: 4px;
  height: calc(80% - 20px);
  content: '';
  background-color: var(--ground-1);
}
.two-col__right { padding-left: 40px; }
@media (max-width: 880px) {
  .two-col__wrapper { grid-template-columns: 1fr; gap: 28px; }
  .two-col__left { padding-right: 0; }
  .two-col__left::after { display: none; }
  .two-col__right { padding-left: 0; }
}

/* `.alt-list` — a `<ul>` modifier inside an alternating module's description,
   never a section of its own. See sections.html pattern 12. */
.alt-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.alt-list li {
  border-left: 3px solid var(--accent);
  padding: .35rem 0 .35rem 1.1rem;
  margin-bottom: 1.1rem;
  font-size: .9375rem;
  line-height: 1.7;
}
.alt-list strong { color: var(--ink); }

/* ── 33 faq (franchise standalone) ────────────────────────────────────── */
.faq-block { padding: var(--section) 0; }
.faq-block__lede { max-width: 860px; margin: 0 auto 2.5rem; text-align: center; }
.faq-item { border-bottom: 1px solid var(--border); padding: 1.4rem 0; max-width: 900px; margin: 0 auto; }
.faq-item h3 { font-size: 1.0625rem; margin-bottom: .5em; }
.faq-item p { font-size: .9375rem; color: var(--ink-muted); }

/* ── site footer (light, as the source ships it) ──────────────────────── */
.footer { background: var(--ground-2); border-top: 1px solid var(--border-soft); padding: var(--section-sm) 0 2rem; }
.footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 32px;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.footer .cols > * { min-width: 0; }
.footer h4 { font-size: 1rem; color: var(--ink); margin-bottom: .9em; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .5em; }
.footer a { color: var(--ink-muted); text-decoration: none; font-size: .9375rem; }
.footer a:hover { color: var(--brand); }
.footer .foot-logo { width: 200px; margin-bottom: 1.25rem; }
.footer .foot-phone { display: inline-block; font-size: 1.25rem; font-weight: 800; color: var(--ink); text-decoration: none; }
.footer .legal { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; padding-top: 1.5rem; }
.footer .legal a { font-size: .8125rem; }
.footer .copyright { font-size: .75rem; color: var(--ink-muted); margin-top: 1rem; line-height: 1.6; }
/* `.footer a` (0,1,1) outranks `.btn-callout` (0,1,0), so every button variant
   re-asserts its own ink at (0,2,0) inside the footer. Register any new
   light-ground control here in the same edit that adds it. */
.footer a.btn-accent, .footer a.btn-accent:hover { color: var(--ink); }
.footer a.btn-navy, .footer a.btn-navy:hover { color: var(--on-dark); }
.footer a.btn-outline { color: var(--brand); }
.footer a.btn-outline:hover { color: var(--on-dark); }
.footer a.btn-callout { color: var(--ink); }
.footer a.btn-callout:hover { color: var(--on-dark); }

/* Same trap on the slate bands: `.offer-callout a` would reach into any light
   control inside them. */
.offer-callout a.btn-callout { color: var(--ink); }
.offer-callout a.btn-callout:hover { color: var(--on-dark); }
.form-offer a.btn-accent, .form-offer a.btn-accent:hover { color: var(--ink); }

/* ═══ doc chrome ══════════════════════════════════════════════════════════ */
.ds-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem var(--gutter);
}
.ds-nav .lockup-text { font-weight: 800; margin: 0; color: var(--ink); font-size: 1rem; }
.ds-nav .lockup-text small { display: block; font-weight: 500; font-size: .75rem; color: var(--ink-muted); }
.ds-nav .tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.ds-nav .tab {
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-muted);
  padding: .5em 1em;
  border-radius: var(--radius);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.ds-nav .tab:hover { background: var(--ground-1); color: var(--ink); }
.ds-nav .tab.active { background: var(--ink); color: var(--on-dark); }

.ds-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border-soft); }
.ds-hero h1 { margin-bottom: .4em; }
.ds-hero .lede { max-width: 780px; }

.meta-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-soft);
}
.meta-strip > * { min-width: 0; }
.meta-strip .k { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-quiet); margin-bottom: .3em; }
.meta-strip .v { display: block; font-weight: 700; color: var(--ink); font-size: .9375rem; }

.door-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 18px;
}
.door-cards > * { min-width: 0; }
.door {
  display: block;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.6rem;
  text-decoration: none;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.door:hover { border-color: var(--ink); background: var(--ground-1); }
.door h3 { font-size: 1.0625rem; margin-bottom: .4em; }
.door p { font-size: .875rem; color: var(--ink-muted); margin: 0; }

.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 20px;
}
.char-grid > * { min-width: 0; }
.anchor-tile { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.6rem; background: var(--paper); }
.anchor-tile h3 { font-size: 1.0625rem; margin-bottom: .5em; }
.anchor-tile p { font-size: .9rem; color: var(--ink-muted); margin: 0; }

.files-list { display: grid; gap: .1rem; }
.files-list > div {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 1.5rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: baseline;
}
.files-list > div > * { min-width: 0; }
.files-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; color: var(--ink); word-break: break-all; }
.files-list .what { font-size: .875rem; color: var(--ink-muted); }
@media (max-width: 880px) { .files-list > div { grid-template-columns: 1fr; gap: .25rem; } }

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 16px;
}
.swatch-grid > * { min-width: 0; }
.swatch { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.swatch .chip { height: 92px; }
.swatch .meta { padding: .8rem 1rem; }
.swatch .meta b { display: block; font-size: .875rem; color: var(--ink); }
.swatch .meta code { font-size: .75rem; color: var(--ink-muted); font-family: ui-monospace, monospace; }

.type-spec { border-bottom: 1px solid var(--border-soft); padding: 1.5rem 0; }
.type-spec .note { font-size: .75rem; color: var(--ink-quiet); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-tag { border: 1px solid var(--border); border-radius: var(--radius); padding: .4em 1em; font-size: .8125rem; color: var(--ink-muted); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 16px;
}
.asset-grid > * { min-width: 0; }
.asset-tile { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.asset-tile img { width: 100%; height: 150px; object-fit: cover; }
.asset-tile .meta { padding: .6rem .8rem; font-size: .75rem; color: var(--ink-muted); font-family: ui-monospace, monospace; word-break: break-all; }

/* sections.html chrome */
.sx-main { display: block; }
.sx-header { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--border-soft); }
.sx-index { padding: 2.5rem 0; border-bottom: 1px solid var(--border-soft); }
.sx-index .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 8px 20px;
}
.sx-index .grid > * { min-width: 0; }
.sx-index a { font-size: .875rem; color: var(--ink-muted); text-decoration: none; display: block; padding: .3rem 0; }
.sx-index a:hover { color: var(--ink); text-decoration: underline; }

.sx-pattern { border-bottom: 1px solid var(--border-soft); padding: 3rem 0; }
.pattern-meta {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 1.5rem;
  margin: 0 auto 1.75rem;
  padding: 0 var(--gutter);
  max-width: var(--maxw);
}
.pattern-meta > * { min-width: 0; }
@media (max-width: 880px) { .pattern-meta { grid-template-columns: 1fr; gap: .5rem; } }
.pattern-meta .id { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-family: ui-monospace, monospace; font-size: .75rem; color: var(--ink-quiet); }
.pattern-meta .num { font-weight: 700; color: var(--ink); }
.pattern-meta .signature {
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 800;
  font-size: .625rem;
  letter-spacing: .1em;
  padding: .25em .7em;
  border-radius: var(--radius);
}
.pattern-meta .name { font-weight: 800; text-transform: uppercase; color: var(--ink); margin: 0 0 .3em; }
.pattern-meta .purpose { font-size: .9rem; color: var(--ink-muted); margin: 0; }

/* 28px of top padding is load-bearing, not taste: .demo-label is an absolutely
   positioned opaque strip at top-left, and any demo whose first line of text
   starts at y=0 renders under it. The contrast gate resolves overlapping
   siblings, so ink text under the ink label reads as 1.00:1 INVISIBLE. */
.sx-demo { position: relative; border-top: 1px solid var(--border-soft); padding-top: 28px; }
.sx-demo .demo-label {
  position: absolute;
  top: 0; left: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--on-dark);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3em .8em;
}

/* The catalog nests each demo inside .sx-pattern > .sx-demo > .container, which
   is a third padding layer on a phone: a pattern would render in ~197px of a
   305px viewport and manufacture overflow and sub-150px inputs that exist
   nowhere else. Zero the horizontal padding here and give it back to
   .pattern-meta alone. `body` prefix for the +1 specificity over
   ../mobile-responsive.css. */
@media (max-width: 600px) {
  body .sx-pattern { padding-left: 0; padding-right: 0; }
  body .sx-demo { padding: 30px 0 0; }
  body .pattern-meta { padding-left: 16px; padding-right: 16px; }
}

/* pages gallery */
.pages-gallery { padding: 3rem 0; }
.pages-gallery .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 26px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.pages-gallery .grid > * { min-width: 0; }
.page-card { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.page-card .frame { height: 380px; overflow: hidden; background: var(--ground-1); }
.page-card iframe { width: 1400px; height: 1520px; border: 0; transform: scale(.29); transform-origin: 0 0; }
.page-card .cap { padding: 1.4rem; border-top: 1px solid var(--border-soft); }
.page-card .cap h3 { font-size: 1.0625rem; margin-bottom: .4em; }
.page-card .cap p { font-size: .875rem; color: var(--ink-muted); }
.page-card .cap a { font-size: .875rem; font-weight: 700; color: var(--ink); }

.footer .cols h4 { color: var(--ink); }
.footer .cols p { color: var(--ink-muted); margin: 0; }