/* ===================================
   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: #0F2A44;
  --color-primary-ink: #ffffff;
  --color-accent: #E08A1E;
  --color-ink: #141A20;
  --color-body: #3A4450;
  --color-muted: #5E6874;
  --color-line: #DFDAD1;
  --color-bg: #ffffff;
  --color-bg-alt: #F5F3EF;
  --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;

  /* Added for this brand. accent-text is a darkened amber for accent used as
     text on light grounds; the fill amber fails 4.5:1 there. */
  --color-accent-text: #96540A;
  --hero-scrim: rgba(15, 42, 68, 0.72);
}

/* 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: 2fr 1fr 1fr 1fr; }
}
.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; }



/* ===================================
   BRAND OVERRIDES: Water Damage Costa Mesa
   Navy and amber, Montserrat headings on Inter body.

   The contrast rule driving most of this: the amber fill takes a dark label,
   never white. Anywhere the base system paints accent-coloured text on a light
   ground, it is swapped to the darker accent-text token.
   =================================== */

/* Buttons. base.css sets .btn-primary to white on accent, which is 2.68:1 and
   fails AA. Navy on the same amber is 5.45:1. */
.btn-primary { background: var(--color-accent); color: var(--color-primary); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-call:hover { background: var(--color-accent); color: var(--color-primary); }

/* Accent used as text or as a UI affordance on light grounds. */
.service-card .arrow { color: var(--color-accent-text); }
.faq summary::after { color: var(--color-accent-text); }
.site-header nav a:hover { color: var(--color-accent-text); }
.site-header nav .has-dropdown > a::after { color: var(--color-accent-text); }
.site-header nav .dropdown a:hover,
.site-header nav .dropdown a:focus { background: var(--color-bg-alt); color: var(--color-accent-text); }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline-color: var(--color-accent-text); }
.breadcrumbs a:hover { color: var(--color-accent-text); }

/* Sticky mobile bar: the quote half is an amber fill, so its label goes navy. */
.mobile-cta .quote { background: var(--color-accent); color: var(--color-primary); }

/* Play button triangle: white on amber is 2.68:1 and fails the 3:1 floor for
   graphical objects, so the triangle is navy. */
.yt-play::before { border-color: transparent transparent transparent var(--color-primary); }

/* Header: navy wordmark, taller to fit the announcement bar above it. */
.site-header { border-bottom: 2px solid var(--color-ink); }
.wordmark { font-family: var(--font-heading); font-weight: 900; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--color-primary); text-decoration: none; line-height: 1.05; }
.wordmark span { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.header-call { background: var(--color-accent); color: var(--color-primary); }
.header-call:hover { background: var(--color-primary); color: #fff; }

/* Announcement bar. Sits above the sticky header and scrolls away with it. */
.announcement-bar {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem var(--s-3);
}
.announcement-bar strong { color: var(--color-accent); font-weight: 800; }

/* Hero on the navy ground. */
.hero { background: var(--color-primary); color: rgba(255,255,255,0.92); }
.hero h1 { color: #fff; }
.hero .subhead { color: rgba(255,255,255,0.88); }
.hero .trust-list { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: 0.5rem; }
.hero .trust-list li { position: relative; padding-left: 1.75rem; font-weight: 600; color: #fff; }
.hero .trust-list li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 0.7rem; height: 0.4rem;
  border-left: 3px solid var(--color-accent);
  border-bottom: 3px solid var(--color-accent);
  transform: rotate(-45deg);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.hero-actions .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.6); }
.hero-actions .btn-secondary:hover { background: #fff; color: var(--color-primary); border-color: #fff; }

/* Availability strip, in place of the review bar. This site has no review
   corpus, so nothing here claims a rating. */
.availability-bar {
  background: var(--color-ink);
  color: #fff;
  padding-block: var(--s-2);
  font-size: 0.9375rem;
  text-align: center;
}
.availability-bar strong { color: var(--color-accent); }

/* Section intros and prose measure. */
.section-lede { font-size: 1.125rem; color: var(--color-body); max-width: 68ch; margin-bottom: var(--s-4); }
.prose { max-width: 72ch; }
.prose p { margin-bottom: var(--s-2); }
.prose h2 { margin-top: var(--s-5); }
.prose h3 { margin-top: var(--s-4); }
.prose ul, .prose ol { margin: 0 0 var(--s-2) 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.alt-band { background: var(--color-bg-alt); }

/* Problem cards. These carry the section that replaces testimonials: what
   actually goes wrong in this trade. Full-perimeter neutral borders only. */
.problem-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 640px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .problem-grid { grid-template-columns: repeat(3, 1fr); } }
.problem-card { background: var(--color-bg); border: 2px solid var(--color-line); padding: var(--s-3); }
.problem-card h3 { margin-bottom: var(--s-1); }
.problem-card p { margin-bottom: 0; }

/* Proof tiles, used instead of star ratings. */
.proof-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
@media (min-width: 768px) { .proof-tiles { grid-template-columns: repeat(4, 1fr); } }
.proof-tile { border: 2px solid var(--color-line); padding: var(--s-3); text-align: center; }
/* The figure can be a phrase rather than a bare number ("24 to 48 hrs",
   "$3.75 to $7.50"), so it scales down and is allowed to wrap. Measured at
   both widths to confirm nothing overflows its tile. */
.proof-tile .figure { display: block; font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.125rem, 2.1vw, 1.5rem); color: var(--color-primary); line-height: 1.15; }
.proof-tile .label { display: block; font-size: 0.875rem; color: var(--color-body); margin-top: var(--s-1); }
.proof-tile .source { display: block; font-size: 0.75rem; color: var(--color-muted); margin-top: var(--s-1); padding-top: var(--s-1); border-top: 1px solid var(--color-line); }

/* Numbered process steps. */
/* Five steps only go on one row when there is genuinely room. At 768px a
   five-column grid left each cell about 103px of content and pushed the page
   into horizontal overflow, measured rather than eyeballed. */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); counter-reset: step; }
@media (min-width: 620px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.steps li { counter-increment: step; border: 2px solid var(--color-line); padding: var(--s-3); }
.steps li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; margin-bottom: var(--s-1);
  background: var(--color-accent); color: var(--color-primary);
  font-family: var(--font-heading); font-weight: 900; font-size: 1.125rem;
}
.steps h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.steps p { font-size: 0.9375rem; margin: 0; }

/* Why-choose-us pillars. */
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 768px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { border: 2px solid var(--color-line); padding: var(--s-4); }
.pillar h3 { margin-bottom: var(--s-1); }
.pillar p { margin-bottom: 0; }

/* Diagram legend. Labels live in HTML rather than inside the SVG, because
   in-SVG text scales with the viewBox and renders unreadably small on a
   phone. */
.figure-legend { margin: var(--s-3) 0 0; padding-left: 1.35rem; font-size: 0.9375rem; color: var(--color-body); }
.figure-legend li { margin-bottom: 0.5rem; }
.figure-legend strong { color: var(--color-ink); }

/* Media figures. */
figure.photo { margin: 0 0 var(--s-4); }
figure.photo img { width: 100%; }

/* Lead magnet band. Listed in guard 2 already, so the stacked gap is handled. */
.magnet { background: var(--color-ink); color: rgba(255,255,255,0.92); }
.magnet h2 { color: #fff; }
.magnet ul { list-style: none; padding: 0; margin: 0 0 var(--s-3); }
.magnet li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.magnet li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 0.6rem; background: var(--color-accent); }
@media (min-width: 768px) {
  .magnet .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; }
}

/* CTA band sits on navy rather than near-black, so it reads as brand. */
.cta-band { background: var(--color-primary); }
.cta-band .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.6); }
.cta-band .btn-secondary:hover { background: #fff; color: var(--color-primary); }

/* Footer on navy. */
.site-footer { background: var(--color-primary); }
.site-footer h4 { color: #fff; }
.site-footer .tagline { color: rgba(255,255,255,0.8); margin-bottom: var(--s-2); }

/* Footer service-area list goes two-column past about eight entries, so the
   column does not run to twice the height of its neighbours. */
.site-footer .area-list { columns: 2; column-gap: var(--s-3); }
.site-footer .area-list li { break-inside: avoid; }

/* Lead-fulfilment disclosure in the footer bottom. */
.disclosure { font-size: 0.78125rem; color: rgba(255,255,255,0.62); max-width: 78ch; margin-top: var(--s-2); line-height: 1.5; }

/* Locations dropdown runs to eight cities, so it is two-column to stay inside
   the viewport. */
.site-header nav .dropdown.two-col { columns: 2; column-gap: 0; min-width: 420px; }
.site-header nav .dropdown.two-col li { break-inside: avoid; }

/* Insurance carrier list. Names as text, since no logo assets are licensed. */
.carrier-list { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.carrier-list li { border: 1px solid var(--color-line); padding: 0.35rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--color-body); }

/* Comparison tables. */
.table-wrap { overflow-x: auto; margin-bottom: var(--s-4); }
table.compare { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.compare th, table.compare td { border: 1px solid var(--color-line); padding: 0.75rem; text-align: left; vertical-align: top; }
table.compare th { background: var(--color-bg-alt); font-family: var(--font-heading); font-weight: 800; color: var(--color-ink); }

/* Anchor targets must clear the sticky header. Without this, jumping to
   #lead-form (every hero "Request Help" button and the estimator's "Get an
   exact quote" CTA) lands the form heading and first field underneath the
   header, and the skip link to #main does the same. Measured, not guessed:
   scroll-margin-top was 0 and the heading landed at y=0 against a header
   bottom of 72px. The announcement bar is not sticky, so the header height
   plus breathing room is the right offset. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s-2)); }

/* Skip link. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--color-accent); color: var(--color-primary); padding: 0.75rem 1rem; font-weight: 800; }
.skip-link:focus { left: 0; }

/* Visible focus everywhere, since the design has no rounded affordances to
   soften a missing focus ring. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-accent-text);
  outline-offset: 2px;
}

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