/* ===================================
   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: 'Archivo Black', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --heading-weight: 400;
  --heading-tracking: -0.02em;
  --heading-case: none;
  --nav-weight: 500;
  --btn-weight: 700;
  --radius: 8px;
  --radius-btn: 999px;
  --radius-img: 8px;
  --border-w: 1px;
  --shadow-card: none;
  --btn-case: none;
  --btn-tracking: 0;
  --hero-scrim: color-mix(in srgb, var(--color-primary) 72%, transparent);
  --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: sidebar ===== */
/* ---- sidebar: two-column region on inner pages, sticky form rail from 1024px. */
.layout-sidebar .with-rail { display: grid; gap: var(--s-5); padding-block: var(--section-y); }
.layout-sidebar .with-rail:empty, .layout-sidebar .rail:empty { display: none; }
.layout-sidebar .rail .lead-form { margin-top: 0; }
@media (min-width: 1024px) {
  .layout-sidebar .with-rail { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; padding-block: var(--section-y-lg); }
  .layout-sidebar .rail { position: sticky; top: calc(var(--header-h) + var(--s-3)); }
}
.layout-sidebar .rail-column > section { padding-block: var(--s-4); }
.layout-sidebar .rail-column > section > .container { padding-inline: 0; }
.layout-sidebar .rail-column h2 { font-size: var(--fs-h2); }


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

/* header/phone-caption-block */
/* header/phone-caption-block: caption over a large phone number, then the CTA.
   Mobile: two stacked rows (brand + hamburger, then phone button | CTA), so the
   header sets a taller --header-h on itself below 768px. */
.site-header--phone-caption-block { --header-h: 128px; }
.site-header--phone-caption-block > .container { flex-wrap: wrap; align-content: center; row-gap: var(--s-1); }
.site-header--phone-caption-block .brand {
  display: inline-flex; align-items: center; gap: var(--s-1);
  max-width: 70%; 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--phone-caption-block .brand img { height: 40px; width: auto; }
.site-header--phone-caption-block .brand img + span { display: none; }

.site-header--phone-caption-block .header-actions { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.site-header--phone-caption-block .header-actions .btn { padding: 0.625rem 0.5rem; font-size: 0.8125rem; }
.site-header--phone-caption-block .caption { display: none; font-size: var(--fs-small); color: var(--color-muted); line-height: 1.2; }
.site-header--phone-caption-block .phone-block { display: flex; }
.site-header--phone-caption-block .phone-link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); width: 100%;
  padding: 0.625rem 0.5rem; background: var(--color-ink); color: var(--color-on-dark);
  border-radius: var(--radius-btn); text-decoration: none; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem;
}
.site-header--phone-caption-block .phone-link:hover { background: var(--color-accent); }

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

.site-header--phone-caption-block 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--phone-caption-block nav > a,
.site-header--phone-caption-block nav .has-dropdown > a { display: block; padding: var(--s-1) 0; font-size: 1.125rem; }
.site-header--phone-caption-block nav .has-dropdown { flex-direction: column; align-items: stretch; height: auto; }
.site-header--phone-caption-block 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: 768px) {
  .site-header--phone-caption-block { --header-h: 72px; }
  .site-header--phone-caption-block > .container { flex-wrap: nowrap; }
  .site-header--phone-caption-block .brand { max-width: none; }
  .site-header--phone-caption-block 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--phone-caption-block nav > a,
  .site-header--phone-caption-block nav .has-dropdown > a { padding: 0; font-size: 1rem; }
  .site-header--phone-caption-block nav .has-dropdown { flex-direction: row; align-items: center; height: 100%; }
  .site-header--phone-caption-block 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--phone-caption-block .nav-toggle-label { display: none; }
  .site-header--phone-caption-block .header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-3); }
  .site-header--phone-caption-block .header-actions .btn { padding: 0.75rem 1.25rem; font-size: 0.9375rem; }
  .site-header--phone-caption-block .caption { display: block; }
  .site-header--phone-caption-block .phone-block { flex-direction: column; align-items: flex-end; }
  /* The number is the visual anchor: plain, large, no pill */
  .site-header--phone-caption-block .phone-link { width: auto; padding: 0; background: none; color: var(--color-ink); font-size: 1.5rem; line-height: 1.1; }
  .site-header--phone-caption-block .phone-link:hover { background: none; color: var(--color-accent); }
}


/* hero/copy-left-photo-right-strip-form */
/* hero/copy-left-photo-right-strip-form: copy left, photo right, one-row strip form under both.
   Below 768px the photo is the section background with the scrim, so the band is
   dark on mobile only; on desktop it is the light --color-bg-alt band. */
.hero--copy-left-photo-right-strip-form { position: relative; background: var(--color-ink); color: var(--color-on-dark); }
.hero--copy-left-photo-right-strip-form .container > *:not(.hero-media) { position: relative; z-index: 1; }
.hero--copy-left-photo-right-strip-form h1,
.hero--copy-left-photo-right-strip-form .subhead { color: var(--color-on-dark); }

.hero--copy-left-photo-right-strip-form .hero-actions { display: flex; flex-direction: column; gap: var(--s-2); }
.hero--copy-left-photo-right-strip-form .hero-actions .btn { width: 100%; }
.hero--copy-left-photo-right-strip-form .btn-call { border-color: var(--color-on-dark); }

.hero--copy-left-photo-right-strip-form .lead-form--strip { display: grid; gap: var(--s-2); align-items: end; }
.hero--copy-left-photo-right-strip-form .lead-form--strip label { margin: 0; }

@media (min-width: 480px) {
  .hero--copy-left-photo-right-strip-form .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .hero--copy-left-photo-right-strip-form .hero-actions .btn { width: auto; }
}

@media (min-width: 768px) {
  .hero--copy-left-photo-right-strip-form { background: var(--color-bg-alt); color: var(--color-body); }
  .hero--copy-left-photo-right-strip-form h1 { color: var(--color-ink); }
  .hero--copy-left-photo-right-strip-form .subhead { color: var(--color-body); }
  .hero--copy-left-photo-right-strip-form .btn-call { border-color: transparent; }
  .hero.hero--copy-left-photo-right-strip-form .container { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-5); align-items: center; }
  /* Photo leaves the background and becomes the right grid cell, no scrim */
  .hero--copy-left-photo-right-strip-form .hero-media { position: relative; inset: auto; z-index: 1; overflow: visible; }
  .hero--copy-left-photo-right-strip-form .hero-media::after { display: none; }
  .hero--copy-left-photo-right-strip-form .hero-media img {
    height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius-img); box-shadow: var(--shadow-card);
  }
  .hero--copy-left-photo-right-strip-form .lead-form--strip {
    grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1.4fr auto; margin-top: var(--s-2);
  }
  .hero--copy-left-photo-right-strip-form .lead-form--strip .btn { width: auto; }
}


/* trust-bar/stats-inline */
/* trust-bar/stats-inline: figures separated by vertical rules, no icons.
   Dark band (base .trust-bar). Rules are pseudo-elements, not borders. */
.trust-bar.trust-bar--stats-inline ul { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-2); }
.trust-bar.trust-bar--stats-inline li { position: relative; font-weight: 400; font-size: var(--fs-small); line-height: 1.4; }
.trust-bar.trust-bar--stats-inline li span {
  font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking);
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; color: var(--color-on-dark);
}

@media (min-width: 768px) {
  .trust-bar.trust-bar--stats-inline ul { display: flex; justify-content: center; gap: 0; }
  .trust-bar.trust-bar--stats-inline li { flex: 1 1 0; padding-inline: var(--s-3); }
  .trust-bar.trust-bar--stats-inline li + li::before {
    content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px;
    background: var(--color-on-dark); opacity: 0.35;
  }
}


/* services-grid/tabbed-categories */
/* services-grid/tabbed-categories. Section stays a block; grids live on .tiles. */
.services-grid--tabbed-categories { display: block; }
.services-grid--tabbed-categories .intro { max-width: var(--container-narrow); margin-bottom: var(--s-3); }
/* Category row: scrolls sideways inside its own box on narrow screens. */
.services-grid--tabbed-categories .tabs { margin-bottom: var(--s-4); padding-bottom: var(--s-2); border-bottom: 1px solid var(--color-line); }
.services-grid--tabbed-categories .tabs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.services-grid--tabbed-categories .tabs a {
  display: inline-block;
  padding: var(--s-1) var(--s-2);
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-ink);
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius-btn);
}
.services-grid--tabbed-categories .tabs a:hover,
.services-grid--tabbed-categories .tabs a:focus-visible { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); }
.services-grid--tabbed-categories .group { scroll-margin-top: calc(var(--header-h) + var(--s-2)); }
.services-grid--tabbed-categories .group + .group { margin-top: var(--s-5); }
.services-grid--tabbed-categories .group h3 { margin-bottom: var(--s-2); }
.services-grid--tabbed-categories .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
.services-grid--tabbed-categories .tile {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  text-decoration: none;
  color: var(--color-ink);
  background: var(--color-bg);
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius);
  min-width: 0;
  transition: border-color 0.15s, background 0.15s;
}
.services-grid--tabbed-categories .tile:hover { border-color: var(--color-ink); background: var(--color-bg-alt); }
.services-grid--tabbed-categories .icon { flex: 0 0 2rem; width: 2rem; height: 2rem; color: var(--color-accent); }
.services-grid--tabbed-categories .icon:empty { display: none; }
.services-grid--tabbed-categories .icon svg { width: 100%; height: 100%; }
.services-grid--tabbed-categories .name { font-weight: 600; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .services-grid--tabbed-categories .tiles { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
}
@media (min-width: 1024px) {
  .services-grid--tabbed-categories .tiles { grid-template-columns: repeat(4, 1fr); }
}


/* why-us/split-checklist */
/* why-us/split-checklist. Photo first in source so it leads on mobile. */
.why-us--split-checklist .container { display: grid; gap: var(--s-4); }
.why-us--split-checklist .photo { margin: 0; }
.why-us--split-checklist .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.why-us--split-checklist .intro { font-size: 1.125rem; margin-bottom: var(--s-3); }
.why-us--split-checklist .checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
  display: grid;
  gap: var(--s-3);
}
.why-us--split-checklist .checklist li { display: flex; gap: var(--s-2); align-items: flex-start; }
.why-us--split-checklist .mark {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}
.why-us--split-checklist .mark:empty::before { content: "\2713"; }
.why-us--split-checklist .mark svg { width: 100%; height: 100%; }
.why-us--split-checklist .checklist strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}
.why-us--split-checklist .proof { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--color-muted); font-weight: 600; }
.why-us--split-checklist .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 768px) {
  .why-us--split-checklist .container { grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; }
  .why-us--split-checklist .photo img { aspect-ratio: 3 / 4; }
}
@media (min-width: 1024px) {
  .why-us--split-checklist .container { gap: var(--s-6); }
  .why-us--split-checklist .photo img { aspect-ratio: 4 / 5; }
}


/* process/horizontal-timeline-strip */
/* process/horizontal-timeline-strip. Light band (bg-alt). The row is the one
   deliberate horizontal scroller in the library: snap cells at 70vw below 768px. */
.process--horizontal-timeline-strip { background: var(--color-bg-alt); }
.process--horizontal-timeline-strip .intro { text-align: center; max-width: var(--container-narrow); margin: 0 auto var(--s-4); }
.process--horizontal-timeline-strip .intro p { font-size: 1.125rem; }
.process--horizontal-timeline-strip .strip {
  list-style: none;
  padding: 0 0 var(--s-2);
  margin: 0;
  counter-reset: step;
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.process--horizontal-timeline-strip .cell {
  counter-increment: step;
  flex: 0 0 70vw;
  scroll-snap-align: start;
  position: relative;
  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);
}
.process--horizontal-timeline-strip .cell + .cell::after {
  content: "\203A";
  position: absolute;
  left: calc(-1 * var(--s-2) / 2 - 0.5ch);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-accent);
}
.process--horizontal-timeline-strip .icon { display: block; width: 2.5rem; height: 2.5rem; margin-bottom: var(--s-2); color: var(--color-accent); }
.process--horizontal-timeline-strip .icon:empty { display: none; }
.process--horizontal-timeline-strip .cell h3 { font-size: 1.125rem; margin-bottom: var(--s-1); }
.process--horizontal-timeline-strip .cell h3::before {
  content: counter(step) ". ";
  color: var(--color-accent);
}
.process--horizontal-timeline-strip .cell p { font-size: var(--fs-small); }
@media (min-width: 768px) {
  .process--horizontal-timeline-strip .strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--s-3); overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  .process--horizontal-timeline-strip .cell { flex: none; }
  .process--horizontal-timeline-strip .cell + .cell::after { left: calc(-1 * var(--s-3) / 2 - 0.5ch); }
}
@media (min-width: 1024px) {
  .process--horizontal-timeline-strip .strip { gap: var(--s-4); }
  .process--horizontal-timeline-strip .cell + .cell::after { left: calc(-1 * var(--s-4) / 2 - 0.5ch); }
}


/* proof/stat-row */
/* proof/stat-row: dark band painted --color-primary; figures in the heading face. */
.proof--stat-row {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  text-align: center;
}
.proof--stat-row h2 { color: var(--color-primary-ink); }
.proof--stat-row .proof-intro {
  max-width: 60ch;
  margin: 0 auto var(--s-4);
  font-size: 1.125rem;
}
.proof--stat-row .stat-grid {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4) var(--s-3);
}
.proof--stat-row .stat { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.proof--stat-row .stat-figure {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--heading-tracking);
  color: var(--color-primary-ink);
}
.proof--stat-row .stat-label { font-weight: 600; font-size: 1rem; }
.proof--stat-row .stat-source {
  font-size: var(--fs-small);
  color: var(--color-primary-ink);
  opacity: 0.75;
}
@media (min-width: 768px) {
  .proof--stat-row .stat-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
  .proof--stat-row .stat { padding-inline: var(--s-2); }
}


/* 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/message-form */
/* cta-banner/message-form: dark band on --color-primary. Never color .lead-form descendants here;
   guard 1 in base.css keeps the white card readable. */
.cta-banner--message-form {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
.cta-banner--message-form h2 { color: var(--color-primary-ink); }
.cta-banner--message-form .cta-body {
  font-size: 1.125rem;
  max-width: 52ch;
  margin-bottom: var(--s-3);
}
.cta-banner--message-form .cta-phone-caption {
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--s-1);
}
.cta-banner--message-form .cta-phone {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: var(--heading-tracking);
  color: var(--color-primary-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cta-banner--message-form .cta-phone:hover,
.cta-banner--message-form .cta-phone:focus-visible { text-decoration: underline; }
.cta-banner--message-form .lead-form { margin-top: var(--s-4); }
@media (min-width: 768px) {
  .cta-banner--message-form .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
    align-items: center;
  }
  .cta-banner--message-form .lead-form { margin-top: 0; }
}


/* footer/minimal-two-row */
/* footer/minimal-two-row: layout only; base.css paints .site-footer. Least vertical space. */
.site-footer--minimal-two-row .footer-row { display: grid; gap: var(--s-4); }
.site-footer--minimal-two-row .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-1);
}
.site-footer--minimal-two-row .footer-tagline { max-width: 36ch; }
.site-footer--minimal-two-row .footer-nav h4 { margin-top: var(--s-2); margin-bottom: var(--s-1); }
.site-footer--minimal-two-row .footer-nav h4:first-child { margin-top: 0; }
.site-footer--minimal-two-row .footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.site-footer--minimal-two-row .footer-nav li { margin: 0; }
.site-footer--minimal-two-row .footer-locations:has(li:nth-child(9)) { display: block; columns: 2; column-gap: var(--s-2); }
.site-footer--minimal-two-row .footer-locations:has(li:nth-child(9)) li { break-inside: avoid; margin-bottom: var(--s-1); }
.site-footer--minimal-two-row address { font-style: normal; line-height: 1.7; margin-bottom: var(--s-2); }
.site-footer--minimal-two-row .footer-hours li { display: flex; gap: var(--s-1); flex-wrap: wrap; font-size: var(--fs-small); }
.site-footer--minimal-two-row .footer-hours span { font-weight: 600; min-width: 7ch; }
.site-footer--minimal-two-row .footer-disclosure,
.site-footer--minimal-two-row .footer-license {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  opacity: 0.7;
  line-height: 1.6;
}
.site-footer--minimal-two-row .footer-license { margin-top: var(--s-2); }
.site-footer--minimal-two-row .footer-disclosure p { margin-bottom: var(--s-1); }
@media (min-width: 768px) {
  .site-footer--minimal-two-row .footer-row { grid-template-columns: 1fr 2fr 1fr; align-items: start; }
  .site-footer--minimal-two-row .footer-contact { text-align: right; }
  .site-footer--minimal-two-row .footer-hours li { justify-content: flex-end; }
}
@media (min-width: 1024px) {
  .site-footer--minimal-two-row .footer-row { grid-template-columns: 1fr 3fr 1fr; }
}


/* 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);
}