/* ===================================
   LOCAL-DESIGN BASE
   Component CSS shared by every build. Everything a site can look different
   in lives in the :root token block below; the component rules reference
   tokens only. A build overwrites the token values from its design record
   (sites/<niche>/<slug>.design.json, written by _kit/tools/design/roll-direction.js)
   and may append a short per-site stylesheet after this file for one-off
   treatments. Do not hardcode a colour, radius, weight, or shadow below :root.
   =================================== */

:root {
  --color-primary: #1c3757;
  --color-primary-ink: #ffffff;
  --color-accent: #d8302a;
  --color-ink: #132038;
  --color-body: #333b4a;
  --color-muted: #6b7382;
  --color-line: #e1e4ea;
  --color-bg: #ffffff;
  --color-bg-alt: #eef0f5;
  --font-heading: 'Oswald', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, sans-serif;
  --heading-weight: 600;
  --heading-tracking: 0.01em;
  --heading-case: uppercase;
  --nav-weight: 600;
  --btn-weight: 700;
  --radius: 12px;
  --radius-btn: 10px;
  --radius-img: 12px;
  --border-w: 1px;
  --shadow-card: 0 10px 30px rgba(0,0,0,0.08);
  --btn-case: none;
  --btn-tracking: 0;
  --hero-scrim: rgba(8, 10, 12, 0.65);
  --color-success: #16a34a;
  --color-error: #dc2626;
  --color-on-dark: #ffffff;
  --color-star: #f59e0b;
  --fs-h1: clamp(2.5rem, 5vw, 4rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;
  --container: 1200px;
  --container-narrow: 800px;
  --header-h: 72px;
  --section-y: var(--s-6);
  --section-y-lg: var(--s-7);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration: none; }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  line-height: 1.1;
  color: var(--color-ink);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-case);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: min(800, var(--heading-weight)); }
h4 { font-size: 1.125rem; font-weight: min(700, var(--heading-weight)); }

/* Default heading spacing. The reset above zeroes every margin, so a heading in
   any context that does not set its own margin sits flush against the content
   below it. This has shipped as a visible defect more than once (contact page
   headings butting straight into the text). Components that want tighter
   spacing override it by specificity. */
h1, h2, h3, h4 { margin-bottom: var(--s-2); }

/* NOTE: no .overline / eyebrow class exists on purpose. Small all-caps
   labels above headings are banned by the design system (see SKILL.md).
   Lead sections with the heading itself. */

/* Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-3);
}
.container-narrow { max-width: var(--container-narrow); }

section { padding-block: var(--section-y); }
@media (min-width: 768px) { section { padding-block: var(--section-y-lg); } }
figure.photo img, .photo img, img.photo { border-radius: var(--radius-img); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 0.875rem 1.75rem;
  font-family: var(--font-heading);
  font-weight: var(--btn-weight);
  font-size: 1rem;
  text-decoration: none;
  text-transform: var(--btn-case);
  letter-spacing: var(--btn-tracking);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-dark);
}
.btn-primary:hover { background: var(--color-ink); }
.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-secondary:hover { background: var(--color-ink); color: var(--color-on-dark); }
.btn-call {
  background: var(--color-ink);
  color: var(--color-on-dark);
  text-decoration: none;
}
.btn-call:hover { background: var(--color-accent); }

/* Skip link. WCAG 2.4.1 Bypass Blocks, Level A.
   Off-screen until focused, so it never appears in the visual design but stays
   in the focus order for keyboard users. Use a transform rather than
   display:none or visibility:hidden, either of which drops it out of the tab
   order and makes it useless.
   Pair it with <a class="skip-link" href="#main">Skip to content</a> as the
   first element in the body, and give <main> id="main". Shipping the markup
   without this rule renders a visible link in the top left of every page. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: var(--s-2) var(--s-3);
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  height: var(--header-h);
}
.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-header nav { display: none; gap: var(--s-3); align-items: center; }
.site-header nav a { text-decoration: none; font-weight: var(--nav-weight); }
.site-header nav a:hover { color: var(--color-accent); }
@media (min-width: 768px) { .site-header nav { display: flex; height: 100%; } }

/* Services dropdown (required on every build — see SKILL.md non-negotiables) */
.site-header nav .has-dropdown { position: relative; display: flex; align-items: center; height: 100%; }
.site-header nav .has-dropdown > a::after { content: ' \25BE'; font-size: 0.75em; color: var(--color-accent); }
.site-header nav .dropdown {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 260px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  display: none;
  z-index: 60;
}
.site-header nav .has-dropdown:hover .dropdown,
.site-header nav .has-dropdown:focus-within .dropdown { display: block; }
.site-header nav .dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.site-header nav .dropdown a:hover,
.site-header nav .dropdown a:focus { background: var(--color-bg-alt); color: var(--color-accent); }

.header-call { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.625rem 1rem; background: var(--color-ink); color: var(--color-on-dark); text-decoration: none; font-weight: 700; border-radius: var(--radius-btn); }
.header-call span { display: none; }
@media (min-width: 480px) { .header-call span { display: inline; } }

/* Hero */
.hero {
  background: var(--color-bg-alt);
  padding-block: var(--s-5);
}
@media (min-width: 768px) {
  .hero { padding-block: var(--s-6); }
  .hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-5); align-items: center; }
}
.hero h1 { margin-bottom: var(--s-2); }
.hero .subhead { font-size: 1.25rem; color: var(--color-body); margin-bottom: var(--s-3); max-width: 52ch; }

/* Lead form card */
.lead-form {
  background: var(--color-bg);
  padding: var(--s-3);
  border: var(--border-w) solid var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.lead-form h2 { font-size: 1.5rem; margin-bottom: var(--s-2); }
.lead-form .form-row { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
.lead-form label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-on-dark);
  font-size: 1rem;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-ink);
}
.lead-form textarea { min-height: 100px; resize: vertical; }
.lead-form .btn { width: 100%; }
.lead-form .hp { position: absolute; left: -9999px; }
.lead-form .form-note { font-size: 0.8125rem; color: var(--color-muted); margin-top: var(--s-1); text-align: center; }

/* Trust bar */
.trust-bar { background: var(--color-ink); color: var(--color-on-dark); padding-block: var(--s-3); }
.trust-bar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  text-align: center;
}
@media (min-width: 768px) { .trust-bar ul { grid-template-columns: repeat(5, 1fr); } }
.trust-bar li { font-weight: 700; font-size: 0.9375rem; }
.trust-bar li span { display: block; font-size: 1.25rem; color: var(--color-accent); margin-bottom: 0.25rem; }

/* Services cards (legacy inner grid; the section library owns its own grids) */
.services-cards { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 640px) { .services-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-cards { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: block;
  padding: var(--s-3);
  background: var(--color-bg);
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.service-card:hover { border-color: var(--color-ink); background: var(--color-bg-alt); }
.service-card h3 { margin-bottom: var(--s-1); }
.service-card .arrow { display: inline-block; margin-top: var(--s-2); font-weight: 800; color: var(--color-accent); }

/* Mid-page lead form band (required on homepage — see SKILL.md non-negotiables).
   IMPORTANT: any heading color set for the dark band must be re-scoped back to
   ink inside the light .lead-form card, or the form's heading goes white-on-white. */
.midform { background: var(--color-primary); color: var(--color-primary-ink); }
.midform h2 { color: var(--color-primary-ink); }
.midform .lead-form h2 { color: var(--color-ink); }
.midform .subhead { margin-bottom: var(--s-3); }
@media (min-width: 768px) {
  .midform .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; }
}
.midform .lead-form { margin-top: var(--s-3); }
@media (min-width: 768px) { .midform .lead-form { margin-top: 0; } }

/* Social proof */
.reviews { background: var(--color-bg-alt); }
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { background: var(--color-on-dark); padding: var(--s-3); border: var(--border-w) solid var(--color-line); border-radius: var(--radius); }
.review-card .stars { color: var(--color-star); font-size: 1.125rem; margin-bottom: var(--s-1); letter-spacing: 2px; }
.review-card blockquote { font-style: italic; margin-bottom: var(--s-2); }
.review-card cite { font-style: normal; font-weight: 700; display: block; }
.review-card cite span { display: block; font-weight: 400; font-size: 0.875rem; color: var(--color-muted); }

/* FAQ */
.faq details {
  border-bottom: var(--border-w) solid var(--color-line);
  padding-block: var(--s-2);
}
.faq summary {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 1.125rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.5rem;
  color: var(--color-accent);
}
.faq details[open] summary::after { content: '−'; }
.faq details > p, .faq details .faq-a { margin-top: var(--s-2); }

/* Final CTA */
.cta-band {
  background: var(--color-ink);
  color: var(--color-on-dark);
  text-align: center;
}
.cta-band h2 { color: var(--color-on-dark); margin-bottom: var(--s-2); }
.cta-band p { font-size: 1.125rem; margin-bottom: var(--s-3); }

/* Footer */
.site-footer {
  background: var(--color-ink);
  color: var(--color-on-dark);
  padding-block: var(--s-5) var(--s-3);
  font-size: 0.9375rem;
}
.site-footer a { color: var(--color-on-dark); }
.site-footer .footer-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.site-footer h4 { color: var(--color-on-dark); margin-bottom: var(--s-2); font-size: 1rem; text-transform: var(--btn-case); letter-spacing: 0.06em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer .footer-bottom {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
}

/* Sticky mobile CTA */
.mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.mobile-cta.visible { transform: translateY(0); }
.mobile-cta a {
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  font-weight: var(--btn-weight);
  text-transform: var(--btn-case);
  font-size: 0.9375rem;
  font-family: var(--font-heading);
}
.mobile-cta .call { background: var(--color-ink); color: var(--color-on-dark); }
.mobile-cta .quote { background: var(--color-accent); color: var(--color-on-dark); }
@media (min-width: 768px) { .mobile-cta { display: none; } }

/* Breadcrumbs */
.breadcrumbs {
  padding-block: var(--s-2);
  font-size: 0.875rem;
  color: var(--color-muted);
}
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-ink); }
.breadcrumbs span[aria-current] { color: var(--color-ink); font-weight: 600; }

/* Utility */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mb-3 { margin-bottom: var(--s-3); }

/* YouTube facade — no third-party bytes until click (see cro-patterns.md) */
.yt-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-ink);
  cursor: pointer;
  margin: var(--s-4) 0 var(--s-1);
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 48px; border: 0; cursor: pointer;
  background: var(--color-accent);
}
.yt-play::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%);
  border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--color-primary-ink);
}
.yt-play:hover, .yt-play:focus-visible { background: var(--color-ink); }
.yt-caption { font-size: var(--fs-small); color: var(--color-muted); margin-bottom: var(--s-4); }

/* Scenario walkthrough block (case-study style, see cro-patterns.md) */
.scenario {
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  padding: var(--s-4);
  margin: var(--s-5) 0;
  border-radius: var(--radius);
}
.scenario h2, .scenario h3 { margin-bottom: var(--s-2); }
.scenario p { margin-bottom: var(--s-2); }
.scenario p:last-child { margin-bottom: 0; }
.scenario strong { color: var(--color-ink); }

/* Interactive element (calculator / quiz) — see cro-patterns.md */
.calc {
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  padding: var(--s-4);
  margin: var(--s-4) 0 var(--s-5);
  border-radius: var(--radius);
}
.calc h2, .calc h3 { margin-bottom: var(--s-2); }
.calc .calc-row { margin-bottom: var(--s-2); }
.calc label { display: block; font-weight: 600; color: var(--color-ink); margin-bottom: var(--s-1); }
.calc input[type="number"], .calc select {
  width: 100%; padding: 0.75rem; border: 1px solid var(--color-line);
  background: var(--color-bg); font: inherit; border-radius: var(--radius);
}
.calc fieldset { border: 0; padding: 0; margin: 0 0 var(--s-2); }
.calc .calc-result {
  display: none; margin-top: var(--s-3); padding: var(--s-3);
  background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius);
}
.calc .calc-result.visible { display: block; }
.calc .calc-result .calc-figure { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--heading-weight); color: var(--color-ink); }
.calc .calc-note { font-size: var(--fs-small); color: var(--color-muted); margin-top: var(--s-1); }

/* Branded inline-SVG infographic (see cro-patterns.md) */
.infographic {
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  padding: var(--s-3);
  margin: var(--s-3) 0 var(--s-4);
  border-radius: var(--radius);
}
.infographic svg { display: block; width: 100%; height: auto; }
.infographic figcaption { font-size: var(--fs-small); color: var(--color-muted); margin-top: var(--s-1); }

/* Hero background video (optional; see cro-patterns.md).
   Poster paints first (LCP); video fades in after load via main.js. */
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media video { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.hero-media video.playing { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--hero-scrim); }
.hero.has-video { position: relative; }
.hero.has-video > *:not(.hero-media) { position: relative; z-index: 1; }


/* ===== layout family: bands ===== */
/* ---- bands: nothing beyond base.css. Sections are full-width bands with a
   centered .container; alternate --color-bg and --color-bg-alt per section. */
.layout-bands section:nth-of-type(even):not([class*="--"]) { background: var(--color-bg-alt); }


/* ===== section variants ===== */

/* header/dual-button */
/* header/dual-button: two equal-height buttons on the right, outline Call and filled CTA.
   Mobile: the Call button shrinks to an icon square beside the hamburger. */
.site-header--dual-button .brand {
  display: inline-flex; align-items: center; gap: var(--s-1);
  max-width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.125rem;
  color: var(--color-ink); text-decoration: none;
}
.site-header--dual-button .brand img { height: 40px; width: auto; }
.site-header--dual-button .brand img + span { display: none; }

.site-header--dual-button .header-actions { display: flex; align-items: center; gap: var(--s-1); }
.site-header--dual-button .header-actions .btn { padding: 0.625rem 0.875rem; font-size: 0.875rem; }
.site-header--dual-button .header-actions .btn-primary { display: none; }
.site-header--dual-button .btn-phone { width: 44px; height: 44px; padding: 0; }
.site-header--dual-button .btn-phone span { display: none; }

.site-header--dual-button .nav-toggle-label {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; cursor: pointer;
}
.site-header--dual-button .nav-toggle-label span { display: block; height: 3px; background: var(--color-ink); }
.site-header--dual-button .nav-toggle:focus-visible ~ .header-actions .nav-toggle-label { outline: 2px solid var(--color-accent); }
.site-header--dual-button .nav-toggle:checked ~ nav { display: flex; }

.site-header--dual-button nav {
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: var(--s-2) var(--s-3) var(--s-3);
  background: var(--color-bg); border-bottom: 1px solid var(--color-line); box-shadow: var(--shadow-card);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.site-header--dual-button nav > a,
.site-header--dual-button nav .has-dropdown > a { display: block; padding: var(--s-1) 0; font-size: 1.125rem; }
.site-header--dual-button nav .has-dropdown { flex-direction: column; align-items: stretch; height: auto; }
.site-header--dual-button nav .dropdown {
  position: static; display: block; min-width: 0;
  padding: 0 0 var(--s-1) var(--s-2); border: 0; box-shadow: none;
}

@media (min-width: 480px) {
  .site-header--dual-button .header-actions .btn-primary { display: inline-flex; }
}

@media (min-width: 768px) {
  .site-header--dual-button .brand { max-width: none; }
  .site-header--dual-button nav {
    position: static; flex-direction: row; align-items: center; gap: var(--s-3);
    padding: 0; border: 0; box-shadow: none; max-height: none; overflow: visible;
  }
  .site-header--dual-button nav > a,
  .site-header--dual-button nav .has-dropdown > a { padding: 0; font-size: 1rem; }
  .site-header--dual-button nav .has-dropdown { flex-direction: row; align-items: center; height: 100%; }
  .site-header--dual-button nav .has-dropdown > a { white-space: nowrap; }
  .site-header--dual-button nav .dropdown {
    position: absolute; display: none; min-width: 260px; padding: 0.5rem 0;
    border: 1px solid var(--color-line); box-shadow: var(--shadow-card);
  }
  .site-header--dual-button .nav-toggle-label { display: none; }
  .site-header--dual-button .header-actions { gap: var(--s-2); }
  .site-header--dual-button .header-actions .btn { height: 44px; padding: 0 1.25rem; font-size: 0.9375rem; }
  .site-header--dual-button .btn-phone { width: auto; }
  .site-header--dual-button .btn-phone span { display: inline; }
}


/* hero/centered-stack-badges */
/* hero/centered-stack-badges: full-bleed photo, centered 800px stack, benefit badges.
   No form here; the CTA anchors to the form lower on the page. Dark band. */
.hero--centered-stack-badges { position: relative; background: var(--color-ink); color: var(--color-on-dark); text-align: center; }
.hero--centered-stack-badges > *:not(.hero-media) { position: relative; z-index: 1; }
.hero.hero--centered-stack-badges .container { display: block; max-width: 800px; }
.hero--centered-stack-badges h1,
.hero--centered-stack-badges .subhead { color: var(--color-on-dark); }
.hero--centered-stack-badges .subhead { margin-inline: auto; }

.hero--centered-stack-badges .hero-actions { display: flex; flex-direction: column; gap: var(--s-2); }
.hero--centered-stack-badges .hero-actions .btn { width: 100%; }
.hero--centered-stack-badges .btn-call { border-color: var(--color-on-dark); }

.hero--centered-stack-badges .badges {
  list-style: none; padding: 0; margin: var(--s-4) 0 0;
  display: grid; grid-template-columns: 1fr; gap: var(--s-2); text-align: left;
}
.hero--centered-stack-badges .badges li {
  display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-2); font-weight: 600; line-height: 1.3;
  border: var(--border-w) solid var(--color-on-dark); border-radius: var(--radius-btn);
}
.hero--centered-stack-badges .badges li::before { content: "\2713"; color: var(--color-accent); font-weight: 700; }

@media (min-width: 480px) {
  .hero--centered-stack-badges .hero-actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .hero--centered-stack-badges .hero-actions .btn { width: auto; }
  .hero--centered-stack-badges .badges { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .hero--centered-stack-badges { padding-block: var(--s-7); }
  .hero--centered-stack-badges .badges { display: flex; flex-wrap: wrap; justify-content: center; }
}


/* trust-bar/icon-row */
/* trust-bar/icon-row: contrasting band, cells of icon plus two-line label.
   The icon is printed as a bare <svg> before the text block, so an empty
   icon_svg leaves no element and no gap. Dark band (base .trust-bar). */
.trust-bar.trust-bar--icon-row ul { grid-template-columns: 1fr; gap: var(--s-3); text-align: left; }
.trust-bar.trust-bar--icon-row li { display: flex; align-items: center; gap: var(--s-2); font-weight: 400; font-size: var(--fs-small); line-height: 1.4; }
.trust-bar.trust-bar--icon-row li > svg { flex: none; width: 36px; height: 36px; color: var(--color-accent); }
.trust-bar.trust-bar--icon-row li span { font-weight: 700; font-size: 1.0625rem; color: var(--color-on-dark); margin-bottom: 0; }

@media (min-width: 480px) {
  .trust-bar.trust-bar--icon-row ul { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .trust-bar.trust-bar--icon-row ul { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); }
}


/* services-grid/photo-cards */
/* services-grid/photo-cards. base.css paints .services-grid as a grid; the
   section itself must stay a block, so the grid lives on .cards. */
.services-grid--photo-cards { display: block; }
.services-grid--photo-cards .intro { max-width: var(--container-narrow); margin-bottom: var(--s-4); }
.services-grid--photo-cards .intro p { font-size: 1.125rem; }
.services-grid--photo-cards .cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.services-grid--photo-cards .service-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.services-grid--photo-cards .service-card:hover { transform: translateY(-0.25rem); }
.services-grid--photo-cards .photo { margin: 0; }
.services-grid--photo-cards .photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}
.services-grid--photo-cards .service-card h3 { margin: var(--s-3) var(--s-3) var(--s-1); }
.services-grid--photo-cards .service-card p { margin-inline: var(--s-3); flex: 1; }
.services-grid--photo-cards .service-card .arrow { margin: var(--s-2) var(--s-3) var(--s-3); }
.services-grid--photo-cards .all-link { margin-top: var(--s-4); text-align: center; font-weight: 600; }
@media (min-width: 768px) {
  .services-grid--photo-cards .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .services-grid--photo-cards .cards { grid-template-columns: repeat(3, 1fr); }
}


/* why-us/stacked-comparison */
/* why-us/stacked-comparison. Reads like a spec sheet: rows separated by neutral rules. */
.why-us--stacked-comparison .container { display: grid; gap: var(--s-4); }
.why-us--stacked-comparison .lead p { font-size: 1.125rem; }
.why-us--stacked-comparison .rows { border-top: 1px solid var(--color-line); }
.why-us--stacked-comparison .row {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--color-line);
}
.why-us--stacked-comparison .row h3 { font-size: 1.125rem; margin-bottom: 0; }
.why-us--stacked-comparison .proof {
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-muted);
}
@media (min-width: 768px) {
  .why-us--stacked-comparison .row { grid-template-columns: 3fr 7fr; gap: var(--s-3); padding-block: var(--s-4); }
}
@media (min-width: 1024px) {
  .why-us--stacked-comparison .container { grid-template-columns: 1fr 2fr; gap: var(--s-6); align-items: start; }
  .why-us--stacked-comparison .lead { position: sticky; top: calc(var(--header-h) + var(--s-3)); }
}


/* process/steps-plus-what-to-expect */
/* process/steps-plus-what-to-expect. Numbered row (counter), then a photo and
   bullet block separated from the row by a neutral rule. */
.process--steps-plus-what-to-expect .intro { text-align: center; max-width: var(--container-narrow); margin: 0 auto var(--s-5); }
.process--steps-plus-what-to-expect .intro p { font-size: 1.125rem; }
.process--steps-plus-what-to-expect .steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  display: grid;
  gap: var(--s-4);
}
.process--steps-plus-what-to-expect .step { counter-increment: step; position: relative; padding-left: 4rem; }
.process--steps-plus-what-to-expect .step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--color-on-dark);
  background: var(--color-accent);
  border-radius: var(--radius);
}
.process--steps-plus-what-to-expect .icon { display: block; width: 1.75rem; height: 1.75rem; margin-bottom: var(--s-1); color: var(--color-ink); }
.process--steps-plus-what-to-expect .icon:empty { display: none; }
.process--steps-plus-what-to-expect .icon svg { width: 100%; height: 100%; }
.process--steps-plus-what-to-expect .step h3 { margin-bottom: var(--s-1); }
.process--steps-plus-what-to-expect .expect {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: var(--s-4);
}
.process--steps-plus-what-to-expect .photo { margin: 0; }
.process--steps-plus-what-to-expect .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.process--steps-plus-what-to-expect .expect-copy ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-3);
  display: grid;
  gap: var(--s-1);
}
.process--steps-plus-what-to-expect .expect-copy li { display: flex; gap: var(--s-1); align-items: baseline; }
.process--steps-plus-what-to-expect .expect-copy li::before { content: "\2713"; color: var(--color-accent); font-weight: 700; }
@media (min-width: 768px) {
  .process--steps-plus-what-to-expect .steps { grid-template-columns: repeat(3, 1fr); }
  .process--steps-plus-what-to-expect .step { padding-left: 0; padding-top: 4rem; }
  .process--steps-plus-what-to-expect .expect { grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; }
}
@media (min-width: 1024px) {
  .process--steps-plus-what-to-expect .steps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-5); }
  .process--steps-plus-what-to-expect .expect { gap: var(--s-6); }
}


/* proof/stats-with-scenario */
/* proof/stats-with-scenario: light section, stat tiles left and .scenario block right. */
.proof--stats-with-scenario { background: var(--color-bg-alt); }
.proof--stats-with-scenario .proof-head { max-width: var(--container-narrow); margin-bottom: var(--s-4); }
.proof--stats-with-scenario .proof-intro { font-size: 1.125rem; }
.proof--stats-with-scenario .proof-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: start;
}
.proof--stats-with-scenario .stat-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
.proof--stats-with-scenario .stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-2);
  background: var(--color-bg);
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.proof--stats-with-scenario .stat-figure {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: clamp(2rem, 4vw, 3rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--heading-tracking);
  color: var(--color-ink);
}
.proof--stats-with-scenario .stat-label { font-weight: 600; color: var(--color-ink); }
.proof--stats-with-scenario .stat-source { font-size: var(--fs-small); color: var(--color-muted); }
.proof--stats-with-scenario .scenario { margin: 0; background: var(--color-bg); }
@media (min-width: 1024px) {
  .proof--stats-with-scenario .proof-split { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}


/* faq/single-column-details */
/* faq/single-column-details: base .faq handles summary and marker; this adds layout. */
.faq--single-column-details { background: var(--color-bg); }
.faq--single-column-details .faq-head {
  max-width: var(--container-narrow);
  margin: 0 auto var(--s-4);
  text-align: center;
}
.faq--single-column-details .faq-intro { font-size: 1.125rem; }
.faq--single-column-details .faq-list {
  max-width: var(--container-narrow);
  margin: 0 auto;
  border-top: var(--border-w) solid var(--color-line);
}
.faq--single-column-details .faq-a { margin-top: var(--s-2); color: var(--color-body); }
.faq--single-column-details .faq-a p + p { margin-top: var(--s-2); }


/* cta-banner/split-photo */
/* cta-banner/split-photo: no .container; the section itself is the 5/7 grid with no gap.
   Panel painted --color-ink with --color-on-dark text. The mini form keeps class lead-form
   so guard 1 colors its labels and note for the white card. */
.cta-banner--split-photo {
  padding-block: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-ink);
  color: var(--color-on-dark);
}
.cta-banner--split-photo .cta-photo {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
}
.cta-banner--split-photo .cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.cta-banner--split-photo .cta-panel {
  padding: var(--section-y) var(--s-3);
}
.cta-banner--split-photo .cta-panel-inner { max-width: 36rem; }
.cta-banner--split-photo h2 { color: var(--color-on-dark); }
.cta-banner--split-photo .cta-body { font-size: 1.125rem; margin-bottom: var(--s-3); }
.cta-banner--split-photo .cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.cta-banner--split-photo .cta-actions .btn { width: 100%; }
.cta-banner--split-photo .cta-mini-form .form-row { grid-template-columns: 1fr; }
@media (min-width: 480px) {
  .cta-banner--split-photo .cta-actions { flex-direction: row; flex-wrap: wrap; }
  .cta-banner--split-photo .cta-actions .btn { width: auto; }
  .cta-banner--split-photo .cta-mini-form .form-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .cta-banner--split-photo { grid-template-columns: 5fr 7fr; }
  .cta-banner--split-photo .cta-photo { aspect-ratio: auto; height: 100%; min-height: 100%; }
  .cta-banner--split-photo .cta-panel {
    padding: var(--section-y-lg) var(--s-5);
    display: flex;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .cta-banner--split-photo .cta-panel { padding-inline: var(--s-6); }
}


/* footer/cta-strip-plus-columns */
/* footer/cta-strip-plus-columns: layout only; base.css paints .site-footer. */
.site-footer--cta-strip-plus-columns .footer-strip {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border-radius: var(--radius);
}
.site-footer--cta-strip-plus-columns .footer-strip h3 { color: var(--color-primary-ink); margin-bottom: var(--s-1); }
.site-footer--cta-strip-plus-columns .footer-strip p { margin: 0; max-width: 48ch; }
.site-footer--cta-strip-plus-columns .footer-strip-actions { display: grid; gap: var(--s-2); }
.site-footer--cta-strip-plus-columns .footer-strip-actions .btn { width: 100%; }
.site-footer--cta-strip-plus-columns .footer-wordmark {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 1.5rem;
  line-height: 1.1;
  text-decoration: none;
  margin-bottom: var(--s-2);
}
.site-footer--cta-strip-plus-columns .footer-tagline { margin-bottom: var(--s-2); max-width: 40ch; }
.site-footer--cta-strip-plus-columns address { font-style: normal; line-height: 1.7; }
.site-footer--cta-strip-plus-columns h4 + ul + h4 { margin-top: var(--s-3); }
.site-footer--cta-strip-plus-columns .footer-locations:has(li:nth-child(9)) { columns: 2; column-gap: var(--s-2); }
.site-footer--cta-strip-plus-columns .footer-locations li { break-inside: avoid; }
.site-footer--cta-strip-plus-columns .footer-hours li { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.site-footer--cta-strip-plus-columns .footer-hours span { font-weight: 600; min-width: 7ch; }
.site-footer--cta-strip-plus-columns .footer-disclosure,
.site-footer--cta-strip-plus-columns .footer-license {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  opacity: 0.7;
  line-height: 1.6;
}
.site-footer--cta-strip-plus-columns .footer-license { margin-top: var(--s-2); }
.site-footer--cta-strip-plus-columns .footer-disclosure p { margin-bottom: var(--s-1); }
@media (min-width: 480px) {
  .site-footer--cta-strip-plus-columns .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer--cta-strip-plus-columns .footer-contact { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .site-footer--cta-strip-plus-columns .footer-strip { grid-template-columns: 1fr auto; align-items: center; }
  .site-footer--cta-strip-plus-columns .footer-strip-actions { grid-auto-flow: column; }
  .site-footer--cta-strip-plus-columns .footer-strip-actions .btn { width: auto; }
  .site-footer--cta-strip-plus-columns .footer-grid { grid-template-columns: 3fr 3fr 2fr 4fr; }
  .site-footer--cta-strip-plus-columns .footer-contact { grid-column: auto; }
}


/* midform/default */
/* midform/default: base.css already paints the band and sets the 768px grid; only the copy column is added here. */
.midform--default .subhead { font-size: 1.125rem; max-width: 48ch; }
@media (min-width: 768px) {
  .midform--default .subhead { font-size: 1.25rem; }
  .midform--default .midform-copy { align-self: center; }
}


/* content/prose */
/* content/prose: sane rhythm for paragraphs, lists, h3 and tables inside .prose. */
.content--prose h2 { margin-bottom: var(--s-3); }
.content--prose .prose p { margin-bottom: var(--s-2); }
.content--prose .prose ul,
.content--prose .prose ol { padding-left: var(--s-3); margin-bottom: var(--s-2); }
.content--prose .prose li { margin-bottom: var(--s-1); }
.content--prose .prose h3 { margin-top: var(--s-4); margin-bottom: var(--s-2); }
.content--prose .prose h4 { margin-top: var(--s-3); margin-bottom: var(--s-1); }
.content--prose .prose strong { color: var(--color-ink); }
.content--prose .prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-3);
  font-size: var(--fs-small);
}
.content--prose .prose th,
.content--prose .prose td {
  text-align: left;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--color-line);
  vertical-align: top;
}
.content--prose .prose th { background: var(--color-bg-alt); color: var(--color-ink); font-weight: 600; }
.content--prose .prose .table-wrap { overflow-x: auto; margin-bottom: var(--s-3); }
.content--prose .prose > :last-child { margin-bottom: 0; }


/* content/prose-with-photo */
/* content/prose-with-photo: photo stacks under the copy below 1024px, then sits beside it on the chosen side. */
.content--prose-with-photo .container { display: grid; gap: var(--s-4); }
.content--prose-with-photo h2 { margin-bottom: var(--s-3); }
.content--prose-with-photo .prose p { margin-bottom: var(--s-2); }
.content--prose-with-photo .prose ul,
.content--prose-with-photo .prose ol { padding-left: var(--s-3); margin-bottom: var(--s-2); }
.content--prose-with-photo .prose li { margin-bottom: var(--s-1); }
.content--prose-with-photo .prose h3 { margin-top: var(--s-4); margin-bottom: var(--s-2); }
.content--prose-with-photo .prose strong { color: var(--color-ink); }
.content--prose-with-photo .prose > :last-child { margin-bottom: 0; }
.content--prose-with-photo .photo { margin: 0; }
.content--prose-with-photo .photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-img);
}
@media (min-width: 1024px) {
  .content--prose-with-photo .container {
    grid-template-columns: 7fr 5fr;
    gap: var(--s-6);
    align-items: start;
  }
  .content--prose-with-photo .photo { position: sticky; top: calc(var(--header-h) + var(--s-3)); }
  .content--prose-with-photo.photo-left .container { grid-template-columns: 5fr 7fr; }
  .content--prose-with-photo.photo-left .photo { order: -1; }
}


/* content/scenario */
/* content/scenario: base.css styles .scenario; the section only trims the block margin so the band padding does the spacing. */
.content--scenario .scenario { margin: 0; }
.content--scenario .scenario h2 { font-size: var(--fs-h3); }


/* content/video */
/* content/video: base.css styles .yt-facade, .yt-play and .yt-caption; only the intro and margins are set here. */
.content--video .video-intro { max-width: 60ch; margin-bottom: var(--s-3); }
.content--video .yt-facade { margin-top: 0; border-radius: var(--radius-img); overflow: hidden; }
.content--video .yt-caption { margin-bottom: 0; }


/* content/calculator */
/* content/calculator: base.css styles .calc and its inputs; this only sets the intro and lets the band padding do the spacing. */
.content--calculator .calc { margin: 0; }
.content--calculator .calc-intro { margin-bottom: var(--s-3); max-width: 60ch; }
.content--calculator .calc .btn { margin-top: var(--s-2); }
@media (min-width: 768px) {
  .content--calculator .calc .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); }
}


/* content/reddit */
/* content/reddit: prose rhythm only. */
.content--reddit { background: var(--color-bg-alt); }
.content--reddit h2 { margin-bottom: var(--s-3); }
.content--reddit .prose p { margin-bottom: var(--s-2); }
.content--reddit .prose ul,
.content--reddit .prose ol { padding-left: var(--s-3); margin-bottom: var(--s-2); }
.content--reddit .prose li { margin-bottom: var(--s-1); }
.content--reddit .prose h3 { margin-top: var(--s-4); margin-bottom: var(--s-2); }
.content--reddit .prose blockquote {
  margin: 0 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  border-radius: var(--radius);
  font-style: italic;
}
.content--reddit .prose > :last-child { margin-bottom: 0; }


/* content/types-grid */
/* content/types-grid: one column, two at 640px, three at 1024px; generous gaps, no borders. */
.content--types-grid .types-intro { max-width: 60ch; margin-bottom: var(--s-4); }
.content--types-grid .types-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
.content--types-grid .type { min-width: 0; }
.content--types-grid .type h3 { margin-bottom: var(--s-1); }
.content--types-grid .type p { margin: 0; }
@media (min-width: 640px) {
  .content--types-grid .types-list { grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
}
@media (min-width: 1024px) {
  .content--types-grid .types-list { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}


/* contact/form-and-details */
/* contact/form-and-details: light band; details stack above the form below 768px, side by side above. */
.contact--form-and-details { background: var(--color-bg-alt); }
.contact--form-and-details .container { display: grid; gap: var(--s-4); }
.contact--form-and-details .contact-intro { font-size: 1.125rem; max-width: 52ch; margin-bottom: var(--s-3); }
.contact--form-and-details address {
  font-style: normal;
  line-height: 1.7;
  margin-bottom: var(--s-3);
  color: var(--color-ink);
}
.contact--form-and-details .btn-call { width: 100%; }
.contact--form-and-details .contact-hours-heading {
  font-size: var(--fs-h3);
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
}
.contact--form-and-details .contact-hours { list-style: none; padding: 0; margin: 0; }
.contact--form-and-details .contact-hours li {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding-block: var(--s-1);
  border-bottom: 1px solid var(--color-line);
}
.contact--form-and-details .contact-hours span { font-weight: 600; min-width: 9ch; color: var(--color-ink); }
.contact--form-and-details .lead-form { margin-top: 0; }
@media (min-width: 480px) {
  .contact--form-and-details .btn-call { width: auto; }
}
@media (min-width: 768px) {
  .contact--form-and-details .container {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    align-items: start;
  }
}


/* area/city-grid */
/* area/city-grid: wrapping grid of link tiles; one column, two at 480px, four at 1024px. */
.area--city-grid { background: var(--color-bg-alt); }
.area--city-grid .area-intro { max-width: 60ch; margin-bottom: var(--s-4); }
.area--city-grid .city-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}
.area--city-grid .city-grid li { min-width: 0; }
.area--city-grid .city-grid a {
  display: block;
  padding: var(--s-2) var(--s-3);
  background: var(--color-bg);
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color 0.15s, background 0.15s;
}
.area--city-grid .city-grid a:hover,
.area--city-grid .city-grid a:focus-visible { border-color: var(--color-ink); background: var(--color-bg-alt); }
@media (min-width: 480px) {
  .area--city-grid .city-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .area--city-grid .city-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
}


/* ===================================
   THREE STANDING GUARDS

   Both are bugs that have shipped on more than one site built with this system.
   They are fixed globally rather than per band, because the failure mode is
   forgetting a band, not getting the rule wrong. Keep these at the END of the
   stylesheet: guard 1 relies partly on source order as well as specificity.
   =================================== */

/* GUARD 1: a light-on-dark heading colour cascading into a white form card.
   A .lead-form is always a white card, whatever dark band contains it (.hero,
   .midform, .magnet, .cta-band, or any band added later). A band rule such as
   `.magnet h2 { color: #fff }` ties on specificity with `.lead-form h2` and
   wins on source order, painting the form heading white on white. The doubled
   class raises specificity so no single-class ancestor can beat it. */
.lead-form.lead-form h2,
.lead-form.lead-form h3,
.lead-form.lead-form h4 { color: var(--color-ink); }
.lead-form.lead-form label,
.lead-form.lead-form legend { color: var(--color-ink); }
.lead-form.lead-form .form-lede,
.lead-form.lead-form .form-note { color: var(--color-muted); }

/* GUARD 2: stacked two-column bands butting together.
   Every band pairing copy with a form card is a two-column grid on wide screens
   and a single stack below the breakpoint. Stacked, the card must not sit flush
   against the content above it. Listing every such band here means adding a new
   band means adding it to this list, rather than finding the gap on a phone. */
.hero .lead-form,
.midform .lead-form,
.magnet .lead-form,
.cta-banner .lead-form { margin-top: var(--s-4); }
@media (min-width: 768px) {
  .hero .lead-form,
  .midform .lead-form,
  .magnet .lead-form,
  .cta-banner .lead-form { margin-top: 0; }
}

/* GUARD 3: an outline button rendered dark-on-dark.
   .btn-secondary is transparent with --color-ink text and border, which is
   correct on a light section and invisible inside any dark band, because
   .cta-band is painted with --color-ink itself. Found by DOM measurement on the
   Rodent Removal Orlando build (the CTA button on all 39 pages), and never
   visible in the markup. Listing every dark band here means adding a new dark
   band means adding it here too. */
.cta-band .btn-secondary,
.cta-banner .btn-secondary,
.proof--stat-row .btn-secondary,
.midform .btn-secondary,
.magnet .btn-secondary,
.hero .btn-secondary,
.hero.has-video .btn-secondary,
.site-footer .btn-secondary {
  color: var(--color-on-dark);
  border-color: var(--color-on-dark);
}
.cta-band .btn-secondary:hover,
.cta-banner .btn-secondary:hover,
.proof--stat-row .btn-secondary:hover,
.midform .btn-secondary:hover,
.magnet .btn-secondary:hover,
.hero .btn-secondary:hover,
.hero.has-video .btn-secondary:hover,
.site-footer .btn-secondary:hover {
  background: var(--color-on-dark);
  color: var(--color-ink);
}