/* Buffalo Water Damage Help — one stylesheet, no external resources, system fonts.
   Calm, trustworthy, emergency-appropriate: slate/navy base, one amber action color. */

:root {
  --navy: #0f2942;
  --navy-2: #17385a;
  --slate: #33475b;
  --ink: #1a2733;
  --body: #2b3a48;
  --muted: #5a6b7b;
  --line: #d9e1e8;
  --bg: #ffffff;
  --bg-soft: #f2f6f9;
  --bg-tint: #e7eff5;
  --action: #e8681c;      /* accent orange — marks and text on the dark navy only */
  --action-fill: #bd5109;  /* filled controls: 4.8:1 with white label text (AA) */
  --action-dark: #a1450a;  /* hover fill, and orange text on white (6.2:1) */
  --action-soft: #fdf1e8;
  --ok: #1f7a4d;
  --focus: #1668c9;
  --radius: 10px;
  --wrap: 68rem;
  --measure: 37rem;       /* comfortable reading column, ~74 characters */
  --shadow: 0 1px 2px rgba(15,41,66,.06), 0 6px 18px rgba(15,41,66,.08);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--body);
  background: var(--bg);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.15rem; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.22; font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-top: 0; }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1rem; }
a { color: var(--focus); }
a:hover { color: #0f4d99; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff;
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- header ---------- */
/* Sticky, because the pages are 6+ screens on a phone and the visitor is mid-emergency: without
   this there is no way to act between the hero and the form four screens down. */
.site-header { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; flex-wrap: wrap; }
.brand {
  color: #fff; font-weight: 800; font-size: 1.12rem; text-decoration: none; letter-spacing: -.01em;
  display: inline-flex; align-items: center; min-height: 44px;
}
.brand:hover { color: #fff; }
.site-header nav ul { list-style: none; display: flex; gap: .35rem 1.15rem; margin: 0; padding: 0; flex-wrap: wrap; align-items: center; }
/* inline-flex + min-height, not padding alone, so the tap target is 44px without moving the
   text off the bar's optical centre */
.site-header nav a {
  color: #dbe6f0; text-decoration: none; font-size: .98rem; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-header nav a:hover { color: #fff; }
.nav-cta {
  background: var(--action-fill); color: #fff !important; padding: .5rem .95rem; border-radius: var(--radius);
  font-weight: 700;
}
.nav-cta:hover { background: var(--action-dark); }

/* ---------- hero ---------- */
.hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, var(--slate) 100%); color: #fff; }
.hero .wrap { padding-top: 2.6rem; padding-bottom: 2.6rem; }
.hero h1 { color: #fff; max-width: 20ch; }
/* The H1 carries the keyword; this carries the urgency the old H1 used to. Sits between them so
   the emotional hook is not lost to the SEO rewrite. */
.hero-sub { font-size: 1.32rem; font-weight: 700; color: #fff; margin: -.15rem 0 .7rem; max-width: 32ch; }
.hero .lede { font-size: 1.18rem; color: #d5e2ee; max-width: 46ch; margin-bottom: 1.5rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; font-weight: 700; color: var(--action); margin: 0 0 .6rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--action-fill); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.05rem; padding: calc(.8rem - 2px) calc(1.4rem - 2px); border-radius: var(--radius);
  /* transparent border keeps a filled button exactly as tall as an outlined one beside it */
  border: 2px solid transparent; cursor: pointer; text-align: center; line-height: 1.3;
}
.btn:hover { background: var(--action-dark); color: #fff; }
.btn-lg { font-size: 1.12rem; padding: calc(.95rem - 2px) calc(1.7rem - 2px); }
/* Ghost buttons default to the light-background form — .hero-actions is reused inside white
   prose sections on /404 and /quote/thanks/, where white-on-white was invisible. */
.btn-ghost { background: transparent; color: var(--action-dark); border-color: var(--action-dark); }
.btn-ghost:hover { background: var(--action-soft); color: var(--action-dark); }
.hero .btn-ghost, .quote-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.hero .btn-ghost:hover, .quote-band .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-block { display: block; width: 100%; }

/* ---------- layout sections ---------- */
main { display: block; }
section { padding-block: 2.2rem; }
.section-soft { background: var(--bg-soft); }
/* .narrow caps the reading measure. On a standalone block (`.wrap.narrow`) it caps and
   centres that block. On a whole section (`section.narrow > .wrap`) the section stays full
   width and the cap moves to the content, so the text keeps the same left edge as every
   other .wrap section instead of forming its own off-centre column. */
.narrow { max-width: var(--measure); margin-inline: auto; }
section.narrow { max-width: none; }
section.narrow > .wrap > * { max-width: var(--measure); }
/* .lead also appears in full-width sections, where it would otherwise run the whole column */
.lead { font-size: 1.14rem; color: var(--slate); max-width: var(--measure); }

/* 20rem floor keeps a six-card set at 3 columns on desktop (2 clean rows) rather than 4+2. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .35rem; }
.card p { color: var(--muted); margin-bottom: .8rem; }
/* margin-top:auto pins it to the card bottom; inline-flex + min-height makes it a 44px target */
.card a.card-link {
  font-weight: 700; text-decoration: none; margin-top: auto;
  display: inline-flex; align-items: center; min-height: 44px;
}
/* nbsp so the arrow can never be left stranded on a line of its own */
.card a.card-link::after { content: "\00A0→"; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 1rem; }
.steps li { position: relative; padding-left: 3rem; max-width: calc(var(--measure) + 3rem); }
.steps li::before {
  counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0;
  width: 2.1rem; height: 2.1rem; background: var(--navy); color: #fff; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
}
.steps li strong { color: var(--ink); }

.callout {
  border-left: 4px solid var(--action); background: var(--action-soft);
  padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.4rem 0;
}
.callout.info { border-left-color: var(--focus); background: var(--bg-tint); }

ul.checks { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .55rem; }
ul.checks li { padding-left: 1.7rem; position: relative; }
ul.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }

.prose h2 { margin-top: 1.8rem; }
.prose h3 { margin-top: 1.4rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }

.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; }
.pill-row li { background: var(--bg-tint); color: var(--slate); border-radius: 999px; padding: .35rem .9rem; font-size: .95rem; font-weight: 600; }

/* ---------- FAQ ---------- */
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .7rem; background: var(--bg);
}
.faq summary { cursor: pointer; font-weight: 700; padding: .9rem 1.1rem; color: var(--ink); }
.faq summary::-webkit-details-marker { color: var(--action); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq details > p { margin: .9rem 1.1rem; color: var(--body); }

/* ---------- quote form ---------- */
/* The band's light text is inherited, not pushed down by a descendant selector — the white
   .form-card lives inside this band and must be able to reset it for its own contents. */
.quote-band { background: var(--navy); color: #d5e2ee; }
.quote-band h2 { color: #fff; }

.form-card {
  background: var(--bg); color: var(--body); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow); border: 1px solid var(--line);
}
/* The left column carries far less than the form; centring it turns the leftover height
   into balanced breathing room instead of a void under the trust list. */
.quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 2.4rem; align-items: center; }
.quote-grid > :first-child { max-width: 34rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 700; color: var(--ink); margin-bottom: .3rem; }
.field .req { color: var(--action-dark); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid #b9c6d2; border-radius: 8px; padding: .65rem .7rem;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field textarea { min-height: 5.5rem; resize: vertical; }
.field .hint { font-size: .88rem; color: var(--muted); margin: .25rem 0 0; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #c0392b; }
.field .err { color: #c0392b; font-size: .9rem; margin: .3rem 0 0; font-weight: 600; }
/* honeypot — visually and from AT, but present in DOM */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .9rem; color: var(--muted); margin-top: .8rem; }
.form-consent { font-size: .82rem; color: var(--muted); line-height: 1.45; margin: 0 0 .85rem; }
.form-error-summary { background: #fdecea; border: 1px solid #e6b0aa; color: #922b21; padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-weight: 600; }

/* .steps is written for light sections; inside the dark band its ink labels and navy number
   discs both disappear into the background. */
.quote-band .steps li strong { color: #fff; }
.quote-band .steps li::before { background: #fff; color: var(--navy); }

.trust-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.trust-list li { padding-left: 1.9rem; position: relative; color: #e7eef5; }
.trust-list li::before { content: "✓"; position: absolute; left: 0; color: var(--action); font-weight: 800; }
.quote-band .trust-list li strong { color: #fff; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #c4d0db; margin-top: 2rem; }
.site-footer .wrap { padding-block: 2rem; }
.footer-tag { color: #fff; font-weight: 600; max-width: 40ch; }
.site-footer nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; padding: 0; margin: 1rem 0; }
/* The footer nav is the only way to reach several pages on a phone, so its links are targets,
   not prose. Inline links inside a sentence stay as they are — WCAG exempts those. */
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a { color: #c4d0db; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-legal, .footer-network-disclaimer { font-size: .85rem; color: #8ea0b0; margin: 1rem 0 0; max-width: 62ch; }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* ---------- related links ----------
   The service pages were the least-linked pages on their own site (1–3 in-body inbound each) while
   /privacy/ had 17, and /areas-we-serve/ had none at all. */
.related-links { margin: 2.2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.related-links h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .6rem; }
.related-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.related-links a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- persistent action bar (mobile) ----------
   The pages run 6+ screens on a phone and the form sits ~4 screens down, so between the hero and
   the form there was previously nothing to tap. This is the form-path equivalent of the call bar:
   it is in the markup (not injected) so it survives with JS off, and js/ui/call.js removes it if a
   phone number is configured — a call always beats a form in this vertical, and two stacked bars
   would cover the page. Hidden from ~720px up, where the sticky header's CTA is already visible. */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--action-fill); box-shadow: 0 -2px 12px rgba(15,41,66,.22); }
.action-bar-link { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: .85rem 1rem; color: #fff; font-weight: 800; font-size: 1.05rem; text-decoration: none; }
.action-bar-link:hover { background: var(--action-dark); color: #fff; }
body { padding-bottom: 3.5rem; }
@media (min-width: 720px) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- click-to-call (injected by js/ui/call.js when a number is configured) ---------- */
.call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--action-fill); box-shadow: 0 -2px 12px rgba(15,41,66,.22); }
.call-bar-link { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1rem; color: #fff; font-weight: 800; font-size: 1.08rem; text-decoration: none; }
.call-bar-link:hover { background: var(--action-dark); color: #fff; }
.call-ico { flex: 0 0 auto; }
body.has-call-bar { padding-bottom: 3.75rem; }
@media (min-width: 720px) {
  .call-bar { left: auto; right: 1.25rem; bottom: 1.25rem; border-radius: 999px; box-shadow: var(--shadow); }
  .call-bar-link { border-radius: 999px; padding: .8rem 1.4rem; }
  body.has-call-bar { padding-bottom: 0; }
}

.center { text-align: center; }
.mt0 { margin-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 800px) {
  .quote-grid { grid-template-columns: 1fr; align-items: start; }
  /* stacked, the card would go full width and run the consent text to ~90 characters */
  .quote-grid > * { max-width: 34rem; }
  .site-header .header-inner { min-height: 0; padding-block: .6rem; }
}
/* Single-bar mobile header: brand + the one action that matters. The secondary links wrap
   to two extra rows at this width and push the hero off screen; they stay in the footer nav. */
@media (max-width: 640px) {
  .site-header .header-inner { flex-wrap: nowrap; min-height: 56px; padding-block: .5rem; gap: .6rem; }
  .site-header nav ul li:not(:last-child) { display: none; }
  /* both must fit one line at 390px or the bar grows back to two rows */
  .brand { font-size: .95rem; line-height: 1.25; }
  /* inline-flex + min-height gives the one mobile CTA a 44px tap target */
  .site-header nav a.nav-cta {
    font-size: .92rem; padding: .5rem .8rem; white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 44px;
  }
}
@media (max-width: 560px) {
  body { font-size: 1.02rem; }
  .btn { width: 100%; }
  .hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}