/* ===================================
   LOCAL-DESIGN BASE
   Design system: sharp corners, strong hierarchy, high contrast.
   Fill in --color-primary and --font-heading from intake + Stitch output.
   =================================== */

:root {
  /* Colors — OVERRIDE from intake */
  --color-primary: #101C2E;
  --color-primary-ink: #ffffff;
  --color-accent: #0B7BC1;
  --color-accent-deep: #0A5F96;
  --color-ink: #0B1420;
  --color-body: #33414F;
  --color-muted: #66727E;
  --color-line: #DDE3E8;
  --color-bg: #ffffff;
  --color-bg-alt: #F4F2EF;
  --color-success: #16a34a;
  --color-error: #dc2626;

  /* Typography — OVERRIDE from typography-system.md */
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Scale */
  --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;

  /* Spacing (8px base) */
  --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;

  /* Layout */
  --container: 1200px;
  --container-narrow: 800px;
  --header-h: 72px;

  /* NO rounded corners — design rule */
  --radius: 0;
}

/* 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: 900;
  line-height: 1.1;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 800; }
h4 { font-size: 1.125rem; font-weight: 700; }

/* 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(--s-6); }
@media (min-width: 768px) { section { padding-block: var(--s-7); } }

/* 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: 800;
  font-size: 1rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.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: #fff; }
.btn-call {
  background: var(--color-ink);
  color: #fff;
  text-decoration: none;
}
.btn-call:hover { background: var(--color-accent); }

/* 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: 600; }
.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);
  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: #fff; text-decoration: none; font-weight: 700; }
.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; }
.hero .trust-pill { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.5rem 1rem; background: var(--color-ink); color: #fff; font-weight: 700; font-size: 0.875rem; margin-bottom: var(--s-3); }

/* Lead form card */
.lead-form {
  background: var(--color-bg);
  padding: var(--s-3);
  border: 2px solid var(--color-ink);
}
.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: 2px solid var(--color-line);
  background: #fff;
  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: #fff; 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 grid */
.services-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: block;
  padding: var(--s-3);
  background: var(--color-bg);
  border: 2px solid var(--color-line);
  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: #fff; padding: var(--s-3); border: 2px solid var(--color-line); }
.review-card .stars { color: #f59e0b; 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: 2px solid var(--color-line);
  padding-block: var(--s-2);
}
.faq summary {
  font-family: var(--font-heading);
  font-weight: 800;
  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 { margin-top: var(--s-2); }

/* Final CTA */
.cta-band {
  background: var(--color-ink);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; 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: #fff;
  padding-block: var(--s-5) var(--s-3);
  font-size: 0.9375rem;
}
.site-footer a { color: #fff; }
.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: 1.7fr 1fr 1fr 1.35fr; }
}
.site-footer h4 { color: #fff; margin-bottom: var(--s-2); font-size: 1rem; text-transform: uppercase; 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: 800;
  text-transform: uppercase;
  font-size: 0.9375rem;
  font-family: var(--font-heading);
}
.mobile-cta .call { background: var(--color-ink); color: #fff; }
.mobile-cta .quote { background: var(--color-accent); color: #fff; }
@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;
}
.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);
}
.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);
}
.calc .calc-result.visible { display: block; }
.calc .calc-result .calc-figure { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 900; 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);
}
.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, rgba(10, 10, 10, 0.55)); }
.hero.has-video { position: relative; }
.hero.has-video > *:not(.hero-media) { position: relative; z-index: 1; }


/* ===================================
   RODENT REMOVAL ORLANDO COMPONENTS
   Design reference: split hero, clinical palette, educational callouts.
   =================================== */

/* Long-form prose wrapper for deep service and location pages */
.prose { max-width: 70ch; }
.prose p { margin-bottom: var(--s-3); }
.prose h2 { margin-top: var(--s-5); }
.prose h3 { margin-top: var(--s-4); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 var(--s-3) 1.25rem; }
.prose li { margin-bottom: var(--s-1); }
.prose-wide { max-width: 82ch; }

/* Educational callout, reinterpreted from the reference site's "Did You Know" boxes.
   Full-perimeter neutral border; no single coloured edge. */
.callout {
  border: 2px solid var(--color-line);
  background: var(--color-bg-alt);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}
.callout h3 { font-size: 1.125rem; margin-bottom: var(--s-1); }
.callout p:last-child { margin-bottom: 0; }

/* Numbered process steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.steps li { border: 2px solid var(--color-line); padding: var(--s-3); background: #fff; }
.steps .step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; margin-bottom: var(--s-2);
  background: var(--color-ink); color: #fff;
  font-family: var(--font-heading); font-weight: 900; font-size: 1.125rem;
}
.steps h3 { font-size: 1.125rem; margin-bottom: var(--s-1); }
.steps p:last-child { margin-bottom: 0; }

/* Species / problem identification cards */
.species-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 640px) { .species-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .species-grid { grid-template-columns: repeat(3, 1fr); } }
.species-card { border: 2px solid var(--color-line); padding: var(--s-3); background: #fff; }
.species-card h3 { font-size: 1.125rem; margin-bottom: var(--s-1); }
.species-card dl { margin: var(--s-2) 0 0; font-size: var(--fs-small); }
.species-card dt { font-weight: 700; color: var(--color-ink); }
.species-card dd { margin: 0 0 var(--s-1); color: var(--color-body); }

/* Signs / checklist grid */
.signs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .signs { grid-template-columns: repeat(2, 1fr); } }
.signs li { border: 2px solid var(--color-line); padding: var(--s-2) var(--s-3); background: #fff; }
.signs strong { display: block; color: var(--color-ink); font-family: var(--font-heading); }

/* Published price ranges */
.pricing { border: 2px solid var(--color-line); background: #fff; }
.pricing table { width: 100%; border-collapse: collapse; }
.pricing th, .pricing td { padding: var(--s-2) var(--s-3); text-align: left; border-bottom: 1px solid var(--color-line); }
.pricing th { font-family: var(--font-heading); font-weight: 800; color: var(--color-ink); background: var(--color-bg-alt); }
.pricing tr:last-child td { border-bottom: 0; }
.pricing td.range { font-family: var(--font-heading); font-weight: 800; color: var(--color-ink); white-space: nowrap; }
.pricing-note { font-size: var(--fs-small); color: var(--color-muted); margin-top: var(--s-2); }
.table-scroll { overflow-x: auto; }

/* Homeowner voices: short excerpts from public discussion forums.
   Never attributed to a person or a business. */
.voices { background: var(--color-bg-alt); }
.voices-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 768px) { .voices-grid { grid-template-columns: repeat(3, 1fr); } }
.voice-card { background: #fff; border: 2px solid var(--color-line); padding: var(--s-3); }
.voice-card blockquote { font-style: italic; color: var(--color-ink); margin-bottom: var(--s-2); font-size: 1.0625rem; }
.voice-card p { font-size: var(--fs-small); color: var(--color-muted); margin: 0; }

/* Lead magnet band */
.magnet { background: var(--color-primary); color: var(--color-primary-ink); }
.magnet h2 { color: var(--color-primary-ink); }
.magnet p { color: #d6dee7; }
@media (min-width: 768px) {
  .magnet .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-5); align-items: center; }
}
.magnet-inline { border: 2px solid var(--color-line); background: var(--color-bg-alt); padding: var(--s-3); margin-block: var(--s-4); }
.magnet-inline h3 { margin-bottom: var(--s-1); }

/* Service area / city link grid */
.city-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
@media (min-width: 640px) { .city-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .city-grid { grid-template-columns: repeat(4, 1fr); } }
.city-grid a {
  display: block; padding: var(--s-2); border: 2px solid var(--color-line);
  background: #fff; text-decoration: none; font-weight: 600;
}
.city-grid a:hover { border-color: var(--color-ink); background: var(--color-bg-alt); }

/* Split hero: copy on the left, form on the right at desktop */
.hero .hero-copy { min-width: 0; }

section.alt { background: var(--color-bg-alt); }

/* Photography */
.photo { margin: 0 0 var(--s-3); }
.photo img { width: 100%; height: auto; border: 2px solid var(--color-line); }
.photo figcaption { font-size: var(--fs-small); color: var(--color-muted); margin-top: var(--s-1); }

/* Heading top spacing outside .prose.
   The reset zeroes every margin, and .prose sets margin-top on its own
   headings. A heading placed directly in a .container, which is how the
   homepage 'what types of' sections are built, therefore sat flush against
   the paragraph above it with a 0px gap. Class selectors in .prose still win
   on specificity, so this only fills the gap where nothing else applies. */
p + h2, ul + h2, ol + h2, figure + h2, table + h2, .table-scroll + h2,
p + h3, ul + h3, ol + h3, figure + h3, table + h3, .table-scroll + h3 {
  margin-top: var(--s-4);
}

/* Entry-point infographic: drawing plus a real HTML legend, so the labels
   stay legible on a phone instead of scaling down inside the SVG. */
.entry-figure { border: 2px solid var(--color-line); background: #fff; padding: var(--s-3); }
.entry-figure-grid { display: grid; gap: var(--s-3); align-items: center; }
@media (min-width: 900px) { .entry-figure-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-4); } }
.entry-figure svg { width: 100%; height: auto; }
.entry-legend { list-style: none; counter-reset: entry; margin: 0; padding: 0; }
.entry-legend li {
  counter-increment: entry; position: relative;
  padding-left: 2.5rem; margin-bottom: var(--s-2); font-size: 0.9375rem;
}
.entry-legend li:last-child { margin-bottom: 0; }
.entry-legend li::before {
  content: counter(entry); position: absolute; left: 0; top: 0.05em;
  width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 0.875rem;
}
.entry-legend strong { display: block; color: var(--color-ink); font-family: var(--font-heading); font-size: 1rem; }

/* Wide dropdown for the Locations menu. Sixteen city links in a single
   column runs off the bottom of the viewport, so this splits into columns
   and caps the height. */
.site-header nav .dropdown.dropdown-wide {
  columns: 2;
  column-gap: var(--s-3);
  min-width: 24rem;
}
.site-header nav .dropdown.dropdown-wide li { break-inside: avoid; }

/* A long service-area list makes the footer tall and lopsided against the
   other columns. Past about eight entries it splits into two columns so the
   footer stays balanced. Single column on mobile, where the grid stacks. */
.site-footer .footer-city-list { columns: 2; column-gap: var(--s-3); }
.site-footer .footer-city-list li { break-inside: avoid; }
@media (max-width: 767px) { .site-footer .footer-city-list { columns: 2; } }

/* Wordmark */
.wordmark {
  font-family: var(--font-heading); font-weight: 900; font-size: 1.0625rem;
  text-decoration: none; color: var(--color-ink); letter-spacing: -0.02em;
  line-height: 1.05; text-transform: uppercase;
}
.wordmark span { display: block; color: var(--color-accent-deep); letter-spacing: 0.08em; font-size: 0.8125rem; font-weight: 800; }
.site-footer .wordmark { color: #fff; }

/* Connector disclosure line in the footer */
.disclosure {
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: var(--s-3); padding-top: var(--s-3);
  font-size: var(--fs-small); color: #b9c4cf; max-width: 90ch;
}

/* ===================================
   TWO 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 { margin-top: var(--s-4); }
@media (min-width: 768px) {
  .hero .lead-form,
  .midform .lead-form,
  .magnet .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
   this build (the CTA button on all 39 pages), never visible in the markup.
   Listing every dark band here means adding a new one means adding it here. */
.cta-band .btn-secondary,
.midform .btn-secondary,
.magnet .btn-secondary,
.hero.has-video .btn-secondary,
.site-footer .btn-secondary {
  color: #fff;
  border-color: #fff;
}
.cta-band .btn-secondary:hover,
.midform .btn-secondary:hover,
.magnet .btn-secondary:hover,
.hero.has-video .btn-secondary:hover,
.site-footer .btn-secondary:hover {
  background: #fff;
  color: var(--color-ink);
}