/* ==========================================================================
   New Hampshire Biohazard Cleanup - design system
   Original stylesheet. Mobile-first, no framework dependency.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Clinical teal, deep navy and a cool off-white. A caller on this page is
     frightened, grieving or under a deadline from a landlord or an insurer;
     they are buying composure, discretion and a crew that knows the rules.
     Teal carries every call-to-action because it reads as medical rather
     than as a bargain. Red is reserved for one thing only - the 24/7
     response bar and its live dot - so that it never stops meaning urgent. */
  --accent:        #19a39a;
  --accent-deep:   #0f766e;   /* CTA fill - 4.8:1 on white, so button text passes AA */
  --accent-soft:   #e7f5f4;
  --alert:         #b42318;   /* 24/7 bar and the live dot. Nothing else. */
  --navy:          #112a45;
  --navy-deep:     #0a1b2d;
  --slate:         #3b5b74;   /* compliance, insurance and credentials copy */
  --sky-soft:      #eef3f8;
  --sky-tint:      #f7fafc;
  --body-fg:       #4a5868;
  --heading-fg:    #112a45;
  --line:          #e3eaf1;
  --white:         #ffffff;

  /* Display type is the body face at a heavier weight, as in the sibling
     projects. The token stays so there is one place to change it, but
     nothing on the page mixes families: Urbanist is self-hosted, so every
     heading renders identically on every device. */
  --font-display: Urbanist, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Softer than the piano project on purpose. Sharp corners read as
     industrial; this work is closer to healthcare than to haulage. */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --pill:      999px;

  --shadow-sm: 0 2px 8px rgba(17, 42, 69, .06);
  --shadow:    0 10px 30px rgba(17, 42, 69, .08);
  --shadow-lg: 0 24px 60px rgba(17, 42, 69, .12);

  --wrap: 1200px;
  --gutter: 16px;

  --section-y: 72px;
}

@media (min-width: 992px) {
  :root { --section-y: 108px; --gutter: 24px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: Urbanist, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body-fg);
  background: var(--white);
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--accent-deep); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.22;
  color: var(--heading-fg);
  letter-spacing: -.01em;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 1.1rem; padding-left: 1.15rem; }
li { margin-bottom: .4rem; }

/* ---------- Type scale ---------- */
.display-1 { font-family: var(--font-display); font-size: clamp(2.1rem, 6.2vw, 3.35rem); font-weight: 800; }
.display-2 { font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 2.75rem); font-weight: 800; }
.display-3 { font-family: var(--font-display); font-size: clamp(1.65rem, 4vw, 2.25rem); font-weight: 700; }
.display-4 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 700; }

.eyebrow {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.eyebrow-accent { color: var(--accent-deep); }
.eyebrow-slate  { color: var(--slate); }

.lead { font-size: 1.1875rem; }
.text-center { text-align: center; }
.text-white { color: #fff !important; }
.measure { max-width: 46rem; margin-inline: auto; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }
.section { padding-block: var(--section-y); }
.section-sm { padding-block: calc(var(--section-y) * .62); }

.bg-tint  { background: var(--sky-tint); }
.bg-soft  { background: var(--sky-soft); }
.bg-navy  { background: var(--navy); color: rgba(255,255,255,.82); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }
.bg-grad      { background: linear-gradient(180deg, var(--white) 0%, var(--sky-soft) 100%); }
.bg-grad-rev  { background: linear-gradient(180deg, var(--sky-soft) 0%, var(--white) 100%); }

.grid { display: grid; gap: 28px; }
@media (min-width: 768px)  { .g-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  {
  .g-3 { grid-template-columns: repeat(3, 1fr); }
  .g-4 { grid-template-columns: repeat(4, 1fr); }
}

.split {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 992px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split-wide { grid-template-columns: 1.05fr .95fr; }
}

.stack-sm > * + * { margin-top: 1rem; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: 1.5rem; }
.mt-6 { margin-top: 2.5rem; }

.head { max-width: 44rem; margin: 0 auto 3.25rem; text-align: center; }
.head p:last-child { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.65rem;
  border: 2px solid transparent;
  border-radius: var(--pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(15, 118, 110, .26);
}
.btn-accent:hover { background: var(--accent-deep); color: #fff; box-shadow: 0 10px 26px rgba(15, 118, 110, .34); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); color: #fff; }

.btn-outline-white { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-outline-white:hover { background: #fff; color: var(--navy); }

.btn-lg { padding: 1rem 2rem; font-size: 1.0625rem; }

.btn-circle {
  width: 46px; height: 46px; padding: 0;
  border-radius: 50%;
}
.btn-circle svg { width: 20px; height: 20px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.site-header.is-stuck {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.brand:hover { color: var(--navy); }
.brand-mark {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: #fff;
}
.brand-mark svg { width: 22px; height: 22px; }

/* ---------- Navigation ----------
   Same mobile menu as porta-potty-sites and biohazard-sites: the link list
   itself is the panel, collapsed by max-height so it can animate and so the
   links stay in the accessibility tree. The header is the positioned
   ancestor, so the panel anchors to it and spans the full width.

   The breakpoint is 1100px rather than the piano project's 992px: this nav
   carries seven items plus a phone button, which crowds the bar before a
   tablet runs out of width. */

.nav-links {
  display: none;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-weight: 600;
  font-size: .9688rem;
  color: var(--navy);
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .nav-toggle-cross { display: none; }

.site-header.nav-open .nav-toggle { border-color: var(--accent); color: var(--accent-deep); }
.site-header.nav-open .nav-toggle .nav-toggle-bars { display: none; }
.site-header.nav-open .nav-toggle .nav-toggle-cross { display: block; }

.nav-cta { display: none; }
.nav-cta-mobile { display: inline-flex; }

@media (max-width: 1099px) {
  .nav-links {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    /* Collapsed by height rather than display:none so the panel can animate
       and the links stay in the accessibility tree. */
    max-height: 0;
    overflow: hidden;
    transition: max-height .24s ease;
  }
  .site-header.nav-open .nav-links {
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .nav-links li { margin: 0; }
  .nav-links a {
    display: block;
    padding: .95rem var(--gutter);
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
  }
  .nav-links li:last-child a { border-bottom: 0; }
  .nav-links-call a { font-weight: 800; color: var(--accent-deep); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links { transition: none; }
}

@media (min-width: 1100px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-links-call { display: none; }
  .nav-cta { display: inline-flex; }
  .nav-cta-mobile { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding-block: 48px 0; overflow: hidden; }
@media (min-width: 992px) { .hero { padding-block: 72px 24px; } }

.hero h1 { margin-bottom: 1.25rem; }
.hero .lead { margin-bottom: 1.5rem; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}
.hero-note {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy);
}
.hero-art { position: relative; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 8% -6% 10% 6%;
  background: var(--sky-soft);
  border-radius: 50% 50% 46% 54% / 54% 46% 54% 46%;
  z-index: -1;
}
.hero-art img, .hero-art svg { margin-inline: auto; max-height: 460px; }

/* ---------- Trust strip ---------- */
.trust { border-top: 1px solid var(--line); }
.trust-label {
  text-align: center;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy);
  margin-bottom: 2rem;
}
.trust-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 576px) { .trust-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .trust-row { grid-template-columns: repeat(6, 1fr); } }

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  color: var(--navy);
}
.trust-item svg { width: 34px; height: 34px; color: var(--accent-deep); }

/* ---------- Wave divider ---------- */
.wave {
  display: block;
  width: 100%;
  height: 60px;
  color: inherit;
}
.wave svg { width: 100%; height: 100%; display: block; }
.wave-white  { color: var(--white); }
.wave-tint   { color: var(--sky-tint); }
.wave-soft   { color: var(--sky-soft); }
.wave-navy   { color: var(--navy); }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
  height: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.3125rem; }
.card p:last-child { margin-bottom: 0; }

.card-art {
  height: 180px;
  margin: -.5rem auto 1.5rem;
  display: grid;
  place-items: center;
}
.card-art img, .card-art svg { max-height: 180px; width: auto; }

.spec-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  font-size: .9375rem;
}
.spec-list li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin-bottom: .5rem;
  font-weight: 600;
  color: var(--navy);
}
.spec-list svg {
  width: 17px; height: 17px;
  flex: 0 0 auto;
  margin-top: .28rem;
  color: var(--slate);
}

/* ---------- Numbered reasons ---------- */
.reason { display: flex; gap: 1.25rem; align-items: flex-start; }
.reason + .reason { margin-top: 2rem; }
.reason-num {
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent-deep);
  background: var(--accent-soft);
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  line-height: 1;
}
.reason h3 { font-size: 1.1875rem; margin-bottom: .35rem; }
.reason p { font-size: 1rem; margin-bottom: 0; }

/* ---------- Steps ---------- */
.step { text-align: center; padding-inline: .5rem; }
.step-num {
  width: 64px; height: 64px;
  margin: 0 auto 1.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.375rem;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 8px 22px rgba(247, 179, 43, .35);
}
.step:nth-child(2) .step-num,
.step:nth-child(3) .step-num {
  background: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: none;
}
.step h3 { font-size: 1.1875rem; }
.step p { font-size: 1rem; margin-bottom: 0; }

/* ---------- Use cases ---------- */
.usecase {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--navy);
  min-height: 300px;
  display: flex;
  align-items: flex-end;
}
.usecase img, .usecase svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.usecase-body {
  position: relative;
  padding: 1.75rem;
  background: linear-gradient(0deg, rgba(14,36,57,.92) 0%, rgba(14,36,57,.55) 55%, rgba(14,36,57,0) 100%);
  width: 100%;
  color: rgba(255,255,255,.88);
}
.usecase-body h3 { color: #fff; font-size: 1.25rem; margin-bottom: .4rem; }
.usecase-body p { font-size: .9375rem; margin-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: .875rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq details[open] { border-color: #d7e4f2; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--accent-deep);
  border-bottom: 2.5px solid var(--accent-deep);
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-top: -4px;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq summary:hover { color: var(--accent-deep); }
.faq-body { padding: 0 1.35rem 1.35rem; font-size: 1rem; }
.faq-body p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy); }
.cta-band .split { gap: 32px; }
.cta-band h3 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin-bottom: .75rem; color: #fff; }
.cta-band p { color: rgba(255,255,255,.78); margin-bottom: 0; }
.cta-band .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (min-width: 992px) { .cta-band .cta-actions { justify-content: flex-end; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.7); font-size: .9688rem; }
.site-footer .brand { color: #fff; }
.site-footer .brand:hover { color: #fff; }
.footer-top { padding-block: 64px 48px; }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h3 {
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .6rem; }
.footer-list a { color: rgba(255,255,255,.7); }
.footer-list a:hover { color: var(--accent); }
.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}
.footer-phone:hover { color: var(--accent); }
.footer-phone svg { width: 20px; height: 20px; color: var(--accent); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .875rem;
}
.footer-bottom p { margin: 0; }

/* ---------- Data tables ---------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.ptable {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  font-size: .9688rem;
}
.ptable-wide { min-width: 700px; }
.ptable caption {
  caption-side: top;
  text-align: left;
  padding: 1.1rem 1.25rem .4rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
.ptable th,
.ptable td {
  padding: .85rem 1.15rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.ptable thead th {
  background: var(--sky-soft);
  color: var(--navy);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ptable tbody th {
  font-weight: 700;
  color: var(--navy);
}
.ptable tbody tr:last-child td,
.ptable tbody tr:last-child th { border-bottom: 0; }
.table-note { font-size: .9063rem; margin-top: 1.1rem; }

/* ---------- Checklist ---------- */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.1rem;
}
.checklist li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  margin: 0;
  font-size: 1rem;
}
.checklist svg {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  margin-top: .3rem;
  color: var(--slate);
}
.checklist strong { display: block; color: var(--navy); }

/* ---------- Callout ---------- */
.callout {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.4rem;
  font-size: 1rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--navy); }

/* ---------- Rule grid (permits) ---------- */
.rules { display: grid; gap: 1.75rem; }
@media (min-width: 768px) { .rules { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.75rem; } }
.rule h3 { font-size: 1.125rem; margin-bottom: .35rem; }
.rule p { font-size: 1rem; margin-bottom: 0; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- Utility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   Virginia Piano Movers - pieces that are specific to this trade and to a
   multi-page site. Everything above is the shared chassis; everything below
   either squares off the softer shapes the chassis defaults to, or adds a
   component the rental layout had no use for.
   ========================================================================== */

/* ---------- Eyebrow rule ----------
   The eyebrow gets a short accent rule instead of relying on color alone. */

.eyebrow { display: flex; align-items: center; gap: .65rem; }
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .8;
}
.head .eyebrow, .text-center .eyebrow { justify-content: center; }

/* ---------- Emergency bar ----------
   Above the header and not sticky: it states availability once, then gets
   out of the way. The sticky header is what carries the number. Red appears
   here and nowhere else on the page, which is what keeps it meaning urgent. */

.emerg-bar {
  background: var(--alert);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
}
.emerg-bar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem 1.25rem;
  padding-block: .55rem;
  text-align: center;
}
.emerg-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.emerg-bar a:hover { color: #fff; }
.emerg-flag { display: inline-flex; align-items: center; gap: .5rem; }
.live-dot {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70%  { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
/* On a phone the bar has to stay one line: the sentence around the number
   is the first thing to go, since the label and the number carry it. */
.emerg-sep, .emerg-note { display: none; }
@media (min-width: 768px) {
  .emerg-sep { display: inline; opacity: .6; }
  .emerg-note { display: inline; }
}
@media (max-width: 767.98px) {
  .emerg-bar { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

/* ---------- Section divider ----------
   Replaces the piano-key strip. A hairline with a short teal centre mark:
   enough to separate two tinted sections without adding decoration to a
   page about blood and bodily fluids. */

.keys {
  height: 1px;
  background: var(--line);
  position: relative;
}
.keys-sky-soft { background: var(--line); }
.keys::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: 64px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: var(--pill);
  background: var(--accent);
}

/* ---------- Navigation state ---------- */

.nav-links a.is-current {
  color: var(--accent-deep);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---------- Credential stat line ----------
   Four plain numbers. No badges, no logos we have not earned. */

.statline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 768px) { .statline { grid-template-columns: repeat(4, 1fr); } }
.statline li {
  margin: 0;
  padding: 1.5rem 1.25rem;
  background: var(--white);
  text-align: center;
}
.statline b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--heading-fg);
}
.statline span {
  display: block;
  margin-top: .35rem;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body-fg);
}

/* ---------- Scene cards ----------
   The three illustrations under "What We Clean". The caption belongs inside
   the card with the picture it describes: floating underneath, it reads as a
   stray line of body copy and the card stops looking like one object. The
   illustration sits on the same tint as its own SVG background, so the
   artwork's rounded corners disappear into the card instead of showing
   white triangles. */

.scenes {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .scenes { grid-template-columns: repeat(3, 1fr); } }

.scene {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.scene img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--sky-tint);
}
.scene figcaption {
  flex: 1;
  padding: 1rem 1.15rem 1.15rem;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--heading-fg);
}

/* ---------- Hazard type cards ----------
   One card per kind of scene we are called to. What a visitor actually
   wants to know is whether you have handled their situation before. */

.htypes {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .htypes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .htypes { grid-template-columns: repeat(3, 1fr); } }

.htype {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
}
.htype h3 { margin-bottom: .35rem; font-size: 1.1875rem; }
.htype .htype-weight {
  margin: 0 0 .75rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.htype p { font-size: .975rem; }
.htype .htype-crew {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  font-size: .9375rem;
  color: var(--heading-fg);
}

/* ---------- City link grid (home page) ---------- */

.city-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.city-grid li { margin: 0; }
/* Name over label, not name beside label: "Prince William County" next to
   "Bristow" overflows a column at any width worth using, and a county that
   has to be clipped to fit tells a reader nothing. */
.city-grid a,
.city-grid .city-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  height: 100%;
  padding: 1rem 1.25rem;
  background: var(--white);
  font-weight: 600;
  color: var(--heading-fg);
  transition: background-color .15s ease, color .15s ease;
}
.city-grid a:hover { background: var(--accent-soft); color: var(--accent-deep); }

/* A town we cover that has no page of its own yet. Same row, same weight -
   it is part of the service area either way - but it does not pretend to be
   a link. */
.city-grid .city-row { color: var(--body-fg); cursor: default; }
.city-grid .county {
  font-size: .78125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--body-fg);
}

/* ---------- Nearby city links ----------
   Buttons rather than a list: these go somewhere, and they have to read as
   different from the service-area grid above them, which is places we cover
   rather than pages we have written. The mileage does most of that work. */

.city-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.city-chips li { margin: 0; }
.city-chips a {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--white);
  font-size: .9688rem;
  font-weight: 700;
  color: var(--heading-fg);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.city-chips a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.city-chips em {
  font-style: normal;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--body-fg);
}
.city-chips a:hover em { color: var(--accent-deep); }

/* A town we cover that does not have a page yet. Same chip, no affordance:
   no hover, no pointer, and a quieter border, so it is plainly a place
   rather than a link that is failing to work. */
.city-chips .chip-plain {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border: 1px dashed var(--line);
  border-radius: var(--pill);
  background: transparent;
  font-size: .9688rem;
  font-weight: 600;
  color: var(--body-fg);
}

/* ---------- Insurance panel ---------- */

.cover {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .cover { grid-template-columns: repeat(3, 1fr); } }
.cover > div {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate);
  border-radius: var(--radius);
}
.cover h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.cover p { font-size: .9375rem; }

/* ---------- Quote panel in the hero ---------- */

.quote-card {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.quote-card h2 { font-size: 1.1875rem; margin-bottom: .75rem; }
.quote-card ol {
  margin: 0 0 1.25rem;
  padding-left: 1.2rem;
  font-size: .9375rem;
}
.quote-card .btn { width: 100%; }
.quote-card .fineprint {
  margin: .9rem 0 0;
  font-size: .8125rem;
  text-align: center;
  color: var(--body-fg);
}

/* ---------- Wordmark ----------
   The logotype takes the display token so it tracks any change to display
   type, and sits a weight above the nav beside it. Stepped down below 480px
   because "Virginia Piano Movers" is a long name to fit beside a call button
   on a phone. */

.brand {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

@media (max-width: 479px) {
  .brand { font-size: 1rem; gap: .5rem; }
  .brand-mark { width: 36px; height: 36px; border-radius: 9px; }
  .brand-mark svg { width: 20px; height: 20px; }
}

/* ---------- Hero supporting paragraph ----------
   Sits below the call button now, not above it: on a phone the button has to
   be on the first screen, and this paragraph is 150 words of local detail. */

.hero-support {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .9688rem;
}

/* ---------- Header fit ----------
   "NH Biohazard Cleanup Pros" plus seven nav items plus a phone button is a
   lot to carry just above the 1100px breakpoint, and the default gaps made
   both the wordmark and "Service Areas" wrap onto a second line. Nothing in
   the bar wraps; the spacing gives way instead. The range starts at the
   breakpoint, not below it - under 1100px the links are a panel, not a row,
   so tightening their gap there would do nothing. */

.brand span { white-space: nowrap; }

@media (min-width: 1100px) {
  .nav-links a { white-space: nowrap; }
}

@media (min-width: 1100px) and (max-width: 1319px) {
  .nav { gap: 1rem; }
  .nav-links { gap: 1.1rem; }
  .nav-links a { font-size: .9375rem; }
  .brand { font-size: 1.0625rem; }
  .nav-cta { padding: .75rem 1.25rem; font-size: .9375rem; }
}