/* GENERATED by nichegen/render/steep_css.py -- Steep design system, global across verticals, ported from the Astro build to the Jinja2 renderer. Do not edit by hand. */
:root {
  /* AA corrections vs Steep doc literal values (computed, see steep_tokens.py docstring):
     --muted 5c5f68 replaces doc slate-gray 777b86 (4.23:1 fails 4.5:1 body text)
     --input-border 84878e replaces doc hairline ececec (1.18:1 fails 3:1 UI boundary)
     doc's ash-gray (2.92:1) and smoke-gray (2.43:1) are not used for real text —
     smoke tone kept only as input placeholder color, where a real <label> always exists. */

  /* Surfaces */
  --bg: #ffffff;
  --card-bg: #f2f2f3;
  --band-bg: #fafafb;
  --surface: #ffffff;

  /* Text */
  --ink: #17191c;
  --ink-on: #ffffff;
  --muted: #5c5f68;
  --placeholder: #a3a6af;

  /* Dividers / boundaries */
  --divider: #ececec;
  --input-border: #84878e;

  /* Accent (global, one card per page) */
  --accent: #fbe1d1;
  --accent-ink: #5d2a1a;

  /* Error (never the accent -- see .form-error in steep_css.py).
     #b3261e on #fde8e8 = 5.57:1, clears 4.5:1 at caption size. */
  --error-ink: #b3261e;
  --error-bg: #fde8e8;

  --focus: #17191c;

  /* Typography */
  --font-heading: "Source Serif 4", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --text-caption: 15px;
  --leading-caption: 1.5;
  --text-body: 17px;
  --leading-body: 1.35;
  --text-body-lg: 20px;
  --leading-body-lg: 1.35;
  --text-subheading: 22px;
  --leading-subheading: 1.5;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.18;
  --tracking-heading-sm: -0.23px;
  --text-heading: 44px;
  --leading-heading: 1.3;
  --tracking-heading: -0.66px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 1.3;
  --tracking-heading-lg: -0.96px;
  --text-display: 90px;
  --leading-display: 1.3;
  --tracking-display: -2.25px;

  /* Spacing (4px base unit) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* Radius */
  --radius-card: 24px;
  --radius-small-card: 16px;
  --radius-elevated: 20px;
  --radius-input: 16px;
  --radius-button: 9999px;
  --radius-image: 12px;

  /* Elevation — reserved for exactly one surface (lead form / calculator) */
  --shadow-elevated: 0 0 0 1px rgba(4,23,43,0.05), 0 20px 25px -5px rgba(0,0,0,0.1),
    0 8px 10px -6px rgba(0,0,0,0.1);
  --shadow-overlay: 0 0 0 1px rgba(0,0,0,0.05), 0 8px 40px 0px rgba(0,0,0,0.1);

  --container: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-20); }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--space-16);
}
/* City-page H1s are long SEO titles (not short marketing copy) -- fluid
   down to ~28px on narrow viewports so a 6-line wrap doesn't eat the fold
   on mobile; still resolves to Steep's 44px heading step at >=480px. */
h1 { font-size: clamp(1.75rem, 1.35rem + 2vw, var(--text-heading)); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h2 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); font-family: var(--font-body); font-weight: 500; }
h3 { font-size: var(--text-subheading); line-height: var(--leading-subheading); font-family: var(--font-body); font-weight: 500; }
p { margin: 0 0 var(--space-16); }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- a11y utilities ---------- */
.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;
}
.skip-link {
  position: absolute; left: var(--space-8); top: -3rem;
  background: var(--ink); color: var(--ink-on);
  padding: var(--space-12) var(--space-20); border-radius: var(--radius-button);
  font-weight: 500; z-index: 50; transition: top 120ms ease;
}
.skip-link:focus { top: var(--space-8); text-decoration: none; }
html { scroll-padding-top: 5.5rem; }
#main-content { scroll-margin-top: 5.5rem; }

/* ---------- section bands (Steep's rhythm technique, not per-section cards) ---------- */
.band-paper { background: var(--bg); }
.band-fog { background: var(--band-bg); }
.band-paper, .band-fog {
  padding: var(--space-40) 0;
}
@media (min-width: 720px) {
  .band-paper, .band-fog { padding: var(--space-64) 0; }
}

/* ---------- eyebrow / tag ---------- */
.eyebrow-tag {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--space-12);
  display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap;
}
.eyebrow-tag .hero-stamp {
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius-button);
  padding: var(--space-4) var(--space-12);
  white-space: nowrap;
  text-transform: none;
}

/* ---------- pill buttons ---------- */
.cta-btn {
  display: inline-block;
  background: var(--ink);
  color: var(--ink-on);
  padding: var(--space-12) var(--space-20);
  text-decoration: none;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
}
.cta-btn:hover { opacity: 0.85; text-decoration: none; }
.cta-btn:active { transform: translateY(1px); }
.cta-btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.cta-btn-ghost:hover { background: var(--card-bg); opacity: 1; }
.cta-btn-sm { padding: var(--space-8) var(--space-16); font-size: var(--text-caption); }
.cta-context { color: var(--muted); font-size: var(--text-caption); margin: var(--space-12) 0 0; text-align: center; }

/* ---------- site header ---------- */
.site-header {
  background: var(--bg);
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-24); padding: var(--space-20) 0;
}
.site-logo {
  display: flex; align-items: center; gap: var(--space-8);
  font-family: var(--font-heading);
  font-size: var(--text-subheading);
  color: var(--ink);
}
.site-logo:hover { text-decoration: none; }
.site-logo-mark {
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-button);
  background: var(--ink); color: var(--ink-on);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 500; flex-shrink: 0;
}
.site-logo-mark .nav-icon { width: 1.05rem; height: 1.05rem; }
.site-header-right { display: flex; align-items: center; gap: var(--space-16); }
.site-nav { display: none; align-items: center; gap: var(--space-24); }
.site-nav a {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: var(--ink); font-weight: 400; font-size: var(--text-body);
}
.nav-icon { flex-shrink: 0; }
.site-header-cta { display: none; }
.site-nav-toggle { display: block; position: relative; }
.site-nav-toggle summary {
  cursor: pointer; list-style: none; font-weight: 400; font-size: var(--text-body);
  border: 1px solid var(--input-border); border-radius: var(--radius-button);
  padding: var(--space-8) var(--space-16); color: var(--ink);
}
.site-nav-toggle summary::-webkit-details-marker { display: none; }
.site-nav-toggle summary::after { content: " \25BE"; }
.site-nav-toggle[open] summary::after { content: " \25B4"; }
.site-nav-toggle nav {
  position: absolute; right: 0; margin-top: var(--space-8);
  background: var(--bg); border: 1px solid var(--input-border);
  border-radius: var(--radius-card); padding: var(--space-12) var(--space-16); min-width: 220px;
  box-shadow: var(--shadow-overlay); z-index: 20;
}
.site-nav-toggle nav a, .site-nav-toggle nav button {
  display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) 0;
  color: var(--ink); font-weight: 400; font-size: var(--text-body);
}
.site-nav-toggle nav button {
  width: 100%; text-align: left; background: none; border: none; font: inherit; cursor: pointer;
}
@media (min-width: 860px) {
  .site-nav { display: flex; }
  .site-header-cta { display: inline-block; }
  .site-nav-toggle { display: none; }
}

/* ---------- hero ---------- */
.hero { padding: var(--space-40) 0 var(--space-32); }
@media (min-width: 720px) { .hero { padding: var(--space-64) 0 var(--space-40); } }
.hero-lg h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, var(--text-heading-lg)); letter-spacing: var(--tracking-heading-lg); }
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--space-12);
  display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap;
}
.hero-sub { color: var(--muted); font-size: var(--text-body-lg); line-height: var(--leading-body-lg); margin-top: var(--space-8); }
.hero-stamp {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius-button);
  padding: var(--space-4) var(--space-12);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: hero-rise 480ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- single column page body (no persistent sidebar --
   lead form is a modal now, see .lead-form-dialog below) ---------- */
/* Flow rhythm: the page owns vertical spacing, components don't carry their
   own outer margins. One gap value between every direct child, regardless
   of what it is (section/form/aside/ul/p) -- fixes drift where every
   component invented its own margin and gaps went inconsistent. */
.single-col > *:not(:first-child) { margin-top: var(--space-40); }

/* ---------- section tabs ("jump to section" chips) ---------- */
/* ---------- jump-to-section index: a normal line of text that wraps like
   text, not pill chips that misalign into ragged rows when the section
   headings are long. ---------- */
.toc { font-size: var(--text-caption); color: var(--muted); line-height: 1.8; }
.toc a { color: var(--ink); }

.content-section { margin: 0; scroll-margin-top: calc(5.5rem + var(--space-24)); }
.content-section h2 { margin: 0 0 var(--space-16); }
.content-section ul { padding-left: var(--space-20); margin: 0 0 var(--space-16); }
.content-section li { margin: var(--space-8) 0; }
/* Section bullets are, in the real content, always "- **Bold lead-in**:
   explanation" lines (cost-by-material, contractor roster, bid-comparison
   tips) -- parse_body already renders that as <li><strong>X</strong>: ...
   No data/template change needed to turn those into scannable fact rows,
   just detect the shape via :has() and reuse .checklist-card's visual
   language instead of a bare bullet. */
.content-section ul:has(li > strong:first-child) { list-style: none; padding-left: 0; }
.content-section li:has(> strong:first-child) {
  background: var(--card-bg); border-radius: var(--radius-small-card);
  padding: var(--space-16) var(--space-20); margin: 0 0 var(--space-12);
}
.content-section li:has(> strong:first-child):last-child { margin-bottom: 0; }
.content-section-fog {
  background: var(--band-bg);
  border-radius: var(--radius-card);
  padding: var(--space-28) var(--space-28) var(--space-12);
}

/* ---------- direct answer (the one accent card per page) ---------- */
.direct-answer {
  background: var(--accent);
  border-radius: var(--radius-card);
  padding: var(--space-28) var(--space-28);
  margin: 0 0 var(--space-32);
}
.da-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--accent-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.da-headline {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--accent-ink);
  font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.25rem);
  line-height: 1.2;
  margin: var(--space-12) 0 var(--space-8);
}
.da-qualifier { color: var(--accent-ink); opacity: 0.85; font-size: var(--text-body); margin: 0; }

/* ---------- stat row: flat neutral cards ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-16); list-style: none; padding: 0; margin: 0; }
.stat-chip {
  flex: 1 1 160px;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: var(--space-16) var(--space-20);
}
.stat-value { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--text-body-lg); color: var(--ink); }
.stat-label { display: block; font-size: var(--text-caption); color: var(--muted); margin-top: var(--space-4); }
.stat-caveat { display: block; font-size: 0.72rem; color: var(--muted); margin-top: var(--space-8); }

/* ---------- comparison + rates tables: flat card, hairline rows ---------- */
.rates-table-wrap, .comparison-table-wrap {
  overflow-x: auto; margin: 0;
  background: var(--card-bg); border-radius: var(--radius-card);
  padding: var(--space-16) var(--space-20);
}
.rates-table-wrap:focus-visible, .comparison-table-wrap:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.rates-table, .comparison-table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.rates-table caption, .comparison-table caption { text-align: left; font-weight: 500; margin-bottom: var(--space-12); color: var(--ink); }
.rates-table th, .comparison-table th {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  padding: var(--space-8) var(--space-16) var(--space-8) 0;
  border-bottom: 1px solid var(--divider);
}
.rates-table td, .comparison-table td { padding: var(--space-12) var(--space-16) var(--space-12) 0; border-bottom: 1px solid var(--divider); }
.rates-table tr:last-child td, .comparison-table tr:last-child td { border-bottom: none; }

/* ---------- checklist card: flat ---------- */
.checklist-card {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: var(--space-24) var(--space-28);
}
.checklist-card h3 { font-size: var(--text-body-lg); font-weight: 500; }
.checklist-card ul { list-style: none; padding: 0; margin: 0; }
.checklist-card li {
  padding: var(--space-8) 0 var(--space-8) var(--space-28);
  position: relative;
  font-size: var(--text-body);
}
.checklist-card li::before {
  content: "\2713";
  position: absolute; left: 0; top: var(--space-8);
  color: var(--ink); font-weight: 500;
}

/* ---------- faq: hairline-divided list, not boxed cards ---------- */
.faq { margin: 0; scroll-margin-top: calc(5.5rem + var(--space-24)); }
.faq details {
  border-bottom: 1px solid var(--divider);
  padding: var(--space-16) 0;
}
.faq details:first-of-type { border-top: 1px solid var(--divider); }
.faq summary { cursor: pointer; font-weight: 500; font-size: var(--text-body-lg); color: var(--ink); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: var(--space-12) 0 0; color: var(--muted); }

/* ---------- boxes ---------- */
.affiliate-disclosure {
  background: var(--band-bg);
  padding: var(--space-8) 0;
  font-size: var(--text-caption);
  color: var(--muted);
}
.affiliate-disclosure p { margin: 0 auto; max-width: var(--container); padding: 0 var(--space-20); text-align: center; }
.affiliate-disclosure a { color: var(--muted); text-decoration: underline; white-space: nowrap; }
.author-byline {
  font-size: var(--text-caption);
  color: var(--muted);
  margin: 0;
  padding-bottom: var(--space-20);
  border-bottom: 1px solid var(--divider);
}
.author-byline a { color: var(--muted); text-decoration: underline; }
.ai-disclosure { color: var(--muted); font-size: var(--text-caption); margin-top: var(--space-4); }
.author-bio {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: var(--space-16) var(--space-20);
  margin: 0;
  font-size: var(--text-body);
  color: var(--ink);
}
.author-bio p { margin: 0 0 var(--space-8); }
.author-bio p:last-child { margin-bottom: 0; }
.internal-links {
  margin: 0;
  padding: var(--space-24) var(--space-28);
  background: var(--card-bg);
  border-radius: var(--radius-card);
  container-type: inline-size;
}
.internal-links h2 { font-size: var(--text-body-lg); margin: 0 0 var(--space-12); }

/* ---------- CTA / form card ---------- */
.cta-inline { padding: 0; }
.cta-jump {
  margin: 0; padding: var(--space-20) var(--space-24);
  background: var(--card-bg); border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap;
}
.cta-jump p { margin: 0; color: var(--muted); font-size: var(--text-body); }
.firm-disclaimer { font-size: var(--text-caption); color: var(--muted); margin-top: var(--space-8); }
.tip-callout { background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-card); padding: var(--space-16) var(--space-20); margin: var(--space-16) 0; }
.cost-source { font-family: var(--font-body); font-size: var(--text-caption); color: var(--muted); margin: 0; }

/* ---------- call CTA ---------- */
.call-cta { margin: 0; }
.call-btn { display: inline-block; font-weight: 500; color: var(--ink); }
.call-disclosure { font-size: var(--text-caption); color: var(--muted); margin: var(--space-4) 0 0; }

/* ---------- lead form + calculator: the ONE elevated surface ---------- */
.lead-form-wrap, .calc-card {
  text-align: left; max-width: 560px; margin-left: auto; margin-right: auto;
  background: var(--surface);
  border-radius: var(--radius-elevated);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-32) var(--space-32) var(--space-28);
}
.lead-form-wrap h2 { text-align: center; font-size: var(--text-subheading); }

/* ---------- lead form modal: hidden until a tool result, an inline CTA,
   or the mobile sticky bar opens it (no persistent sidebar anywhere).
   Native <dialog> -- showModal() gives focus trap + Escape-to-close for
   free. ---------- */
.lead-form-dialog {
  border: none; padding: 0; background: transparent;
  width: min(560px, calc(100vw - var(--space-32)));
  max-height: min(90vh, 720px);
  border-radius: var(--radius-elevated);
}
.lead-form-dialog::backdrop { background: rgba(23, 25, 28, 0.5); }
.lead-form-dialog .lead-form-wrap {
  width: 100%; max-width: none; margin: 0;
  max-height: min(90vh, 720px); overflow-y: auto; position: relative;
}
.lead-form-close {
  position: absolute; top: var(--space-16); right: var(--space-16);
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--card-bg); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.lead-form-close:hover { background: var(--divider); }
.lf-badges { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4) var(--space-16); padding: 0; margin: 0 0 var(--space-16); font-size: var(--text-caption); color: var(--muted); }
.lf-badges li::before { content: "\2713\00a0"; color: var(--ink); font-weight: 500; }
#lead-form label, .calc-card label { display: block; margin: 0 0 var(--space-20); font-size: var(--text-body); font-weight: 500; }
#lead-form input:not(.lf-hp), #lead-form select,
.calc-card input, .calc-card select {
  display: block; width: 100%; margin-top: var(--space-8); padding: var(--space-16) var(--space-16);
  font: inherit; font-weight: 400;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  background: var(--bg); color: var(--ink);
}
.calc-btn { width: 100%; margin-top: var(--space-16); }
#lead-form button[type="submit"] {
  display: block; width: 100%; margin-top: var(--space-24);
  font: inherit; font-weight: 500; font-size: var(--text-body); cursor: pointer;
  text-align: center; text-decoration: none;
  border-radius: var(--radius-button);
  padding: var(--space-12) var(--space-20);
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent-ink);
  transition: opacity 120ms ease, transform 120ms ease;
}
#lead-form button[type="submit"]:hover { opacity: 0.85; }
#lead-form button[type="submit"]:active { transform: translateY(1px); }
.lf-hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.lf-opt { font-weight: 400; color: var(--muted); font-size: var(--text-caption); }
.lf-consent { font-size: var(--text-caption); color: var(--muted); margin: var(--space-12) 0 0; }
.lead-form-wrap { container-type: inline-size; }
.lf-field-row { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-12); }
@container (min-width: 420px) {
  .lf-field-row { grid-template-columns: 1fr 1fr; }
}
/* Error banners use their own pair, never the accent: an accent that reads
   as neutral under Steep (pale peach) reads as a *success* banner the moment
   a vertical swaps in a saturated accent -- which is what moving-la's green
   did, and what any `design_tokens: accent` brand would do next. */
.form-error { color: var(--error-ink); background: var(--error-bg); border-radius: var(--radius-input); padding: var(--space-8) var(--space-12); font-size: var(--text-caption); font-weight: 500; margin: var(--space-8) 0 0; }
.form-error[hidden] { display: none; }
.lf-success { font-weight: 500; }

/* ---------- calculator result ---------- */
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-16); }
@media (max-width: 560px) { .calc-row { grid-template-columns: 1fr; } }
.calc-result { border-top: 1px solid var(--divider); padding-top: var(--space-16); margin-top: var(--space-20); }
.calc-result-range { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); margin: 0 0 var(--space-4); }
.calc-result-meta { font-family: var(--font-body); font-size: var(--text-caption); color: var(--muted); margin: 0; }
.calc-note { font-size: var(--text-caption); color: var(--muted); margin: var(--space-8) 0 0; }

.calc-funnel-cta {
  display: block; width: 100%; margin-top: var(--space-12);
  font: inherit; font-size: var(--text-body); font-weight: 500;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: var(--radius-button);
  padding: var(--space-10) var(--space-16); cursor: pointer;
}
.calc-funnel-cta:hover { background: var(--card-bg); }

/* ---------- quote checker: reuses .calc-card shell. The checkbox/legend
   overrides below need extra specificity (class+attribute, class+class)
   to reliably beat ".calc-card input, .calc-card select" and ".calc-card
   label" regardless of source order -- same equal-specificity trap the
   flow-rhythm rule hit, see DESIGN.md. ---------- */
.qc-check-group { border: none; padding: 0; margin: 0 0 var(--space-20); }
.qc-check-group legend { display: block; width: 100%; padding: 0; font-size: var(--text-body); font-weight: 500; margin: 0 0 var(--space-8); }
.calc-card .qc-check { display: flex; align-items: flex-start; gap: var(--space-8); font-weight: 400; margin: 0 0 var(--space-8); }
.calc-card .qc-check:last-child { margin-bottom: 0; }
.calc-card input[type="checkbox"] { display: inline-block; width: auto; margin: 3px 0 0; padding: 0; border: none; background: none; flex-shrink: 0; }
.qc-flags { list-style: none; padding: 0; margin: var(--space-16) 0 0; }
.qc-flag { padding: var(--space-8) 0 var(--space-8) var(--space-16); border-left: 2px solid var(--divider); margin: 0 0 var(--space-8); font-size: var(--text-caption); color: var(--muted); }
.qc-flag:last-child { margin-bottom: 0; }

/* ---------- static pages: homepage / calculator / cost index / estimate ---------- */
.callout-link {
  display: block;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: var(--space-20) var(--space-24);
  margin: 0;
  font-size: var(--text-body);
  color: var(--ink);
}
.callout-link:hover { background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.callout-link strong { font-weight: 500; }

/* ---------- homepage tool hub: square launcher cards, not a full-width
   text row -- function should read at a glance. ---------- */
.tool-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16);
  align-items: stretch;
}
@media (max-width: 720px) { .tool-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tool-cards { grid-template-columns: 1fr; } }
.tool-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12);
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: var(--space-28) var(--space-24);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.tool-card:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-2px);
  text-decoration: none;
}
.tool-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  transition: background 160ms ease, color 160ms ease;
}
.tool-card:hover .tool-card-icon { background: var(--ink); color: var(--ink-on); }
.tool-card-title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: var(--text-subheading); color: var(--ink);
}
.tool-card-desc { color: var(--muted); font-size: var(--text-body); line-height: 1.5; }

/* ---------- city guides: three-column split, requested directly by the
   client (iterated more than once -- see DESIGN.md). Col 1
   (.county-cards-main, currently Palm Beach) is the dominant county, 2fr
   wide -- twice the other two. Col 2 (.county-cards-mid, currently
   Martin) is the next-largest county alone, 1fr. Col 3
   (.county-cards-small, currently St. Lucie + Indian River) holds every
   remaining county stacked one under another, also 1fr. align-items:
   start keeps col 1 and col 3 at their own natural height -- otherwise
   grid's default stretch would force the shorter one to match the
   taller. Col 2's single card is the exception: client-requested, it
   stretches to fill the full row height instead of sitting short at its
   own natural size. */
.county-cards {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-16);
  align-items: start;
}
.county-cards-main, .county-cards-mid, .county-cards-small {
  display: flex; flex-direction: column; gap: var(--space-16);
}
.county-cards-mid { align-self: stretch; }
.county-cards-mid .county-card { flex: 1; }
@media (max-width: 720px) { .county-cards { grid-template-columns: 1fr; } }
.county-card {
  background: var(--card-bg); border-radius: var(--radius-card);
  padding: var(--space-24) var(--space-28);
  container-type: inline-size;
}
.county-card-title {
  font-size: var(--text-caption); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); margin: 0 0 var(--space-8);
}
/* Compact link grid: dense on purpose -- no row dividers, no generous
   per-row padding, caption size + tight leading, these are scan-and-click
   lists, not content to read line by line. Newspaper-style columns (not a
   row-major grid): each column fills top-to-bottom before wrapping to the
   next, so an alphabetical list reads alphabetically down the page
   instead of wrapping left-to-right across a row. Column count is driven
   by the *card's* own width via a container query, not the viewport --
   cards now range from a full-width hero to a 1/6-width sliver on the
   same page, so a single viewport breakpoint can't serve all of them. */
ul.link-grid {
  list-style: none; padding: 0; margin: 0;
  column-count: 1; column-gap: var(--space-20); column-fill: balance;
}
ul.link-grid li { font-size: var(--text-caption); line-height: 1.6; margin: 0 0 var(--space-4); break-inside: avoid; }
ul.link-grid a { color: var(--ink); }
ul.link-grid a:hover { text-decoration: underline; }
@container (min-width: 320px) { ul.link-grid { column-count: 2; } }
@container (min-width: 520px) { ul.link-grid { column-count: 3; } }
@container (min-width: 900px) { ul.link-grid { column-count: 4; } }
/* Client override for the second-largest county's card (4-9 cities):
   forced to one column regardless of its own width, instead of the
   container query's natural 2-col result. Higher specificity than the
   container-scoped rules above (0,2,1 beats 0,1,1) so it wins outright,
   same technique as the flow-rhythm fix documented in DESIGN.md. */
.county-card--single-col .link-grid { column-count: 1; }

/* ---------- guide links: scannable tiles, not a bare list ---------- */
ul.link-tiles {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-16);
}
.link-tile {
  display: block;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: var(--space-20) var(--space-24);
  color: var(--ink); font-weight: 500;
}
.link-tile:hover { background: var(--accent); color: var(--accent-ink); text-decoration: none; }

.stat-tile-row { display: flex; flex-wrap: wrap; gap: var(--space-16); margin: 0; }
.stat-tile { flex: 1 1 160px; background: var(--card-bg); border-radius: var(--radius-card); padding: var(--space-16) var(--space-20); }
.stat-tile-value { display: block; font-family: var(--font-heading); font-size: var(--text-heading-sm); color: var(--ink); }
.stat-tile-label { display: block; font-size: var(--text-caption); color: var(--muted); margin-top: var(--space-4); }

.data-table-wrap { overflow-x: auto; background: var(--card-bg); border-radius: var(--radius-card); padding: var(--space-16) var(--space-20); margin: 0 0 var(--space-24); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.data-table th {
  font-size: var(--text-caption); font-weight: 500; color: var(--muted);
  text-align: left; padding: var(--space-8) var(--space-16) var(--space-8) 0;
  border-bottom: 1px solid var(--divider);
}
.data-table td { padding: var(--space-12) var(--space-16) var(--space-12) 0; border-bottom: 1px solid var(--divider); }
.data-table tr:last-child td { border-bottom: none; }

/* ---------- site footer: whisper-quiet, matches nav ---------- */
.site-footer {
  margin-top: var(--space-64);
  padding: var(--space-40) 0;
  background: var(--band-bg);
}
.site-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-28); }
@media (min-width: 640px) { .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) {
  .site-footer-grid { grid-template-columns: repeat(4, max-content); justify-content: space-between; }
}
.site-footer-brand { font-family: var(--font-heading); color: var(--ink); margin-bottom: var(--space-4); }
.site-footer h4 { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 var(--space-12); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.site-footer a { color: var(--muted); font-size: var(--text-body); }
.site-footer a:hover { color: var(--ink); }
.site-footer-legal { margin-top: var(--space-28); padding-top: var(--space-20); border-top: 1px solid var(--divider); font-size: var(--text-caption); color: var(--muted); }

/* CTA experiment (spec 2026-07-29): both arms ship in the markup, one is
   revealed by the class the head script stamps on <html> before paint.
   Default-hidden so neither arm flashes; <noscript> in base.html.j2
   reveals arm A for JS-disabled visitors. */
.exp-arm-a, .exp-arm-b { display: none; }
html.exp-a .exp-arm-a { display: block; }
html.exp-b .exp-arm-b { display: block; }