/* ============================================================
   Nightwatch — new-site-11 (Bed Bug Treatment Pros)
   ONE compiled stylesheet. Variables = BUILD-CONTRACT palette.
   Mobile-first. No external fonts or CDNs.
   ============================================================ */
:root{
  --brand:#5B2A86;
  --brand-deep:#2A1544;
  --brand-dark:#3E1C5E;
  --accent:#E8A33D;
  --accent-soft:#FBF0DC;
  --tint:#F6F1FA;
  --emergency:#C1272D;
  --emergency-deep:#8F1D22;
  --ink:#241B30;
  --muted:#5D5470;
  --line:#E5DCF0;
  --white:#fff;
  --tint-1:#F1EAF9;
  --tint-2:#FDF3E1;
  --tint-3:#E8F4EC;
  --tint-4:#E9EFFA;
  --tint-5:#FBEAEA;
  --green:#2E7D4F;
  --blue:#2F5FA3;
  --teal:#0E7C86;
  --amber-dark:#B26A00;
  --violet:#7A4FA3;
  --radius:16px;
  --shadow:0 10px 30px rgba(42,21,68,.08);
  --shadow-lg:0 24px 60px rgba(42,21,68,.16);
  --sec-pad:56px;
  --header-h:76px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (min-width:1024px){ :root{ --sec-pad:80px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0; overflow-x:clip;
  font-family:var(--font); font-size:16px; line-height:1.65;
  color:var(--ink); background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); }
h1,h2,h3,h4{ line-height:1.15; letter-spacing:-.02em; font-weight:800; color:var(--ink); margin:0 0 .5em; }
h1{ font-size:clamp(2rem,5.2vw,3.4rem); }
h2{ font-size:clamp(1.7rem,3.6vw,2.5rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; }
input{ font:inherit; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:6px; }
::selection{ background:var(--brand); color:#fff; }

.container{ max-width:1200px; margin:0 auto; padding:0 16px; }
@media (min-width:1024px){ .container{ padding:0 24px; } }

.section{ padding:var(--sec-pad) 0; position:relative; scroll-margin-top:96px; }
.section--tint{ background:var(--tint); }
.section--dark{ background:var(--brand-deep); color:#EFE9F7; }
.section--dark h2,.section--dark h3{ color:#fff; }
.sec-head{ text-align:center; max-width:760px; margin:0 auto 40px; }
.sec-head p{ color:var(--muted); margin:0; font-size:1.05rem; }
.section--dark .sec-head p{ color:#CFC4E4; }
.lead{ font-size:1.125rem; }
.measure{ max-width:75ch; }

/* ---------- Buttons (ONE style) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 28px; border-radius:999px;
  background:var(--brand); color:#fff; font-weight:700; font-size:1rem;
  text-decoration:none; border:2px solid transparent; line-height:1.2;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn:hover{ background:var(--brand-dark); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn--emergency{ background:var(--emergency); }
.btn--emergency:hover{ background:var(--emergency-deep); }
.btn--white{ background:#fff; color:var(--brand-deep); }
.btn--white:hover{ background:var(--accent-soft); color:var(--brand-deep); }
.btn--ghost{ background:#fff; color:var(--brand); border-color:var(--brand); }
.btn--ghost:hover{ background:var(--tint); color:var(--brand-dark); }
.btn--lg{ min-height:60px; padding:16px 36px; font-size:1.125rem; }
.btn--block{ width:100%; }
@media (max-width:767px){ .btn{ width:100%; } .btn--inline{ width:auto; } }
.btn--pulse{ animation:btnPulse 2s ease-out infinite; }
@keyframes btnPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); }
  70%{ box-shadow:0 0 0 16px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.btn--pulse-red{ animation:btnPulseRed 2s ease-out infinite; }
@keyframes btnPulseRed{
  0%{ box-shadow:0 0 0 0 rgba(193,39,45,.45); }
  70%{ box-shadow:0 0 0 16px rgba(193,39,45,0); }
  100%{ box-shadow:0 0 0 0 rgba(193,39,45,0); }
}

/* ---------- Canvas 3D backgrounds (R26) ---------- */
.fx-zone{ position:relative; overflow:hidden; isolation:isolate; }
.fx-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.fx-zone > .container{ position:relative; z-index:1; }

/* ---------- Top bar (part 1) ---------- */
:root{ --topbar-h:45px; }
.topbar{
  position:sticky; top:0; z-index:62; height:var(--topbar-h);
  display:flex; align-items:center;
  background:#FBF9FD; border-bottom:1px solid var(--line);
}
.topbar-viewport{ overflow:hidden; flex:1; min-width:0; }
.topbar-track{ display:flex; width:max-content; }
.top-chips{ display:flex; align-items:center; gap:10px; padding:8px 16px; flex:none; }
.chip{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:5px 12px; border-radius:999px; font-size:.82rem; font-weight:600; color:var(--ink);
}
.chip svg{ width:15px; height:15px; flex:none; }
.chip--green{ background:#E4F2E9; } .chip--green svg{ color:var(--green); }
.chip--blue{ background:#E7EEFA; } .chip--blue svg{ color:var(--blue); }
.chip--plum{ background:var(--tint-1); } .chip--plum svg{ color:var(--brand); }
.chip--amber{ background:var(--accent-soft); } .chip--amber svg{ color:var(--amber-dark); }
.chip-dot{ width:9px; height:9px; border-radius:50%; background:#35B558; flex:none; animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(53,181,88,.5);} 50%{ box-shadow:0 0 0 5px rgba(53,181,88,0);} }
@media (max-width:1023px){
  .topbar-track{ animation:topLoop 22s linear infinite; }
  .topbar-track.paused{ animation-play-state:paused; }
}
@keyframes topLoop{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (min-width:1024px){
  .topbar-track{ width:100%; justify-content:center; }
  .top-chips--dup{ display:none; }
  .top-chips{ justify-content:center; flex-wrap:wrap; }
}

/* ---------- Header (part 2) ---------- */
.site-header{
  position:sticky; top:var(--topbar-h); z-index:61; background:#fff;
  box-shadow:0 2px 14px rgba(42,21,68,.08); transition:box-shadow .2s ease, margin-bottom .2s ease;
}
/* Header shake fix (2026-11-06): the scrolled state still paints the
   compact 60px header, but it now reserves the 16px it gives up as
   margin-bottom, animated with the same .2s ease as .header-inner's
   min-height below — so the header stack's in-flow footprint is 76px
   in BOTH states and at every animation frame. Document height no
   longer changes when the scrollY>12 toggle flips, which removes the
   scroll-anchoring feedback loop that flapped the header around the
   threshold (the shake on slow scrolls up/down near the page top). */
.site-header.scrolled{ box-shadow:0 6px 24px rgba(42,21,68,.16); margin-bottom:16px; }
.header-inner{ display:flex; align-items:center; gap:16px; min-height:var(--header-h); transition:min-height .2s ease; }
.site-header.scrolled .header-inner{ min-height:60px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.logo img{ width:44px; height:44px; border-radius:11px; }
.logo-text{ display:flex; flex-direction:column; line-height:1.1; }
.logo-text strong{ font-size:1.02rem; font-weight:800; color:var(--brand-deep); letter-spacing:-.01em; }
.logo-text small{ font-size:.72rem; font-weight:600; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.main-nav{ display:none; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:10px 14px;
  color:var(--ink); text-decoration:none; font-weight:600; border-radius:10px;
}
.nav-link:hover{ background:var(--tint); color:var(--brand); }
.nav-link svg{ width:14px; height:14px; }
.header-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; color:var(--brand-deep);
}
.icon-btn:hover{ background:var(--tint); }
.icon-btn svg{ width:22px; height:22px; }
.call-box{ display:none; text-decoration:none; text-align:right; line-height:1.15; padding:6px 4px; }
.call-box small{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--green); }
.call-box strong{ font-size:1.15rem; font-weight:800; color:var(--brand-deep); }
.head-emergency{ display:none; }
@media (min-width:1024px){
  .main-nav{ display:flex; align-items:center; gap:2px; margin:0 auto; }
  .call-box{ display:block; }
  .head-emergency{
    display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:10px 20px;
    border-radius:999px; background:var(--emergency); color:#fff; font-weight:700; text-decoration:none;
  }
  .head-emergency:hover{ background:var(--emergency-deep); }
  .head-emergency svg{ width:18px; height:18px; }
  .burger{ display:none; }
}

/* ---------- Mega menu (part 2) ---------- */
.nav-item{ position:static; } /* static on purpose: .mega then anchors to the full-width sticky .site-header, so its left:50% + translateX(-50%) centres the panel on the viewport, not on this nav item */
.mega{
  position:absolute; left:50%; top:calc(100% - 6px); transform:translate(-50%,8px);
  width:min(1060px,calc(100vw - 32px)); background:#fff; border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow-lg); padding:20px;
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:70; text-align:left;
}
.nav-item.open .mega, .nav-item:hover .mega, .nav-item:focus-within .mega{
  opacity:1; visibility:visible; transform:translate(-50%,0);
}
.mega-top{ display:flex; gap:12px; align-items:stretch; margin-bottom:16px; }
.mega-search{ position:relative; flex:1; }
.mega-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); }
.mega-search input{
  width:100%; min-height:48px; padding:12px 16px 12px 42px;
  border:1.5px solid var(--line); border-radius:999px; background:var(--tint); color:var(--ink);
}
.mega-search input:focus{ outline:3px solid var(--accent); outline-offset:1px; background:#fff; }
.mega-all{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:12px 20px; border-radius:999px; background:var(--brand); color:#fff; font-weight:700; text-decoration:none;
}
.mega-all:hover{ background:var(--brand-dark); }
.mega-body{ display:grid; grid-template-columns:30% 1fr; gap:20px; }
.mega-states{ display:flex; flex-direction:column; gap:8px; max-height:340px; overflow:auto; padding-right:4px; }
.mega-states h4, .mega-cities h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 4px; }
.mega-panel{ display:none; }
.mega-panel.active{ display:block; }
.mega-city-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mega-all-link{ display:inline-flex; margin-top:14px; font-weight:700; text-decoration:none; }
.mega-all-link:hover{ text-decoration:underline; }
.mega-bottom{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
}
.mega-bottom p{ margin:0; font-weight:600; }
.mega-bottom .btn{ min-height:46px; padding:10px 22px; }
.mega-emg{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px;
  background:#FBEAEA; color:var(--emergency); font-weight:700; text-decoration:none; font-size:.9rem;
}
.mega-emg:hover{ background:var(--emergency); color:#fff; }
.mega-empty{ padding:18px; color:var(--muted); }

/* ---------- Mobile menu (part 2, phone) ---------- */
.mobile-menu{
  position:fixed; inset:0; z-index:80; background:#fff; overflow-y:auto;
  transform:translateX(100%); transition:transform .25s ease; visibility:hidden;
  display:flex; flex-direction:column;
}
.mobile-menu.open{ transform:none; visibility:visible; }
.mm-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:1; }
.mm-body{ padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.mm-link{
  display:flex; align-items:center; justify-content:space-between; min-height:52px;
  padding:12px 14px; border-radius:12px; font-weight:700; font-size:1.05rem; color:var(--ink); text-decoration:none;
}
.mm-link:hover{ background:var(--tint); }
.mm-link svg{ width:18px; height:18px; color:var(--muted); transition:transform .2s; }
.mm-loc.open > .mm-link svg{ transform:rotate(180deg); }
.mm-loc-panel{ padding:6px 4px 14px; }
/* 2026-11-07: .mm-search is an inline <label> — its declared 12px
   margin-bottom never painted (vertical margins are inert on inline
   boxes), so the input sat tight against the first state card.
   display:block makes the margin real; 16px matches the desktop
   mega menu's .mega-top margin-bottom rhythm. Mobile menu only. */
.mm-search{ position:relative; display:block; margin-bottom:16px; }
.mm-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); }
.mm-search input{ width:100%; min-height:48px; padding:12px 16px 12px 42px; border:1.5px solid var(--line); border-radius:999px; background:var(--tint); }
.mm-states{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.mm-state-block{ min-width:0; }
.mm-state-block > .state-card{ width:100%; }
/* 2026-11-07: the bare 1fr tracks were minmax(auto,1fr) — each track's
   floor was its widest card's min-content (icon 40 + gap 12 + padding 32
   + longest unbreakable word, e.g. Casselberry/Brooksville at ~85px),
   so the two tracks + gap outgrew the panel (~364px vs 320px content
   at a 360px phone) and the right column ran off-screen, giving the
   menu a horizontal scroll. minmax(0,1fr) tracks + min-width:0 cards
   let the grid fit the panel exactly; the menu-scoped chrome trim
   (padding 12px sides, gap 10px, 36px icon, .95rem name) gives the
   longest word a line, and overflow-wrap:anywhere is the pressure
   valve that keeps any outlier word inside its pill. Menu only. */
.mm-cities{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:10px; }
.mm-cities .city-card{ min-width:0; padding:14px 12px; gap:10px; }
.mm-cities .card-ic{ width:36px; height:36px; }
.mm-cities .card-name{ font-size:.95rem; overflow-wrap:anywhere; }
.mm-all-link{ display:block; margin-top:12px; font-weight:700; }
.mm-foot{ padding:16px; border-top:1px solid var(--line); display:grid; gap:10px; position:sticky; bottom:0; background:#fff; }

/* ---------- City & state cards (parts 33/34) ---------- */
.city-card,.state-card{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;
  min-height:64px; transition:border-color .18s, transform .18s, box-shadow .18s; background:#fff;
}
.city-card:hover,.state-card:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow); }
.tint-0{ background:var(--tint-1); } .tint-1{ background:var(--tint-2); }
.tint-2{ background:var(--tint-3); } .tint-3{ background:var(--tint-4); }
.tint-4{ background:var(--tint-5); }
.card-ic{
  width:40px; height:40px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ic,var(--brand)); transition:background .18s, color .18s;
}
.card-ic svg{ width:20px; height:20px; }
.city-card:hover .card-ic,.state-card:hover .card-ic{ background:var(--ic,var(--brand)); color:#fff; }
.card-main{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.card-name{ font-weight:700; }
.card-name small{ font-weight:600; color:var(--muted); font-size:.8rem; margin-left:4px; }
.card-meta{ font-size:.82rem; color:var(--muted); }
.card-line{ font-size:.85rem; color:var(--muted); }
.state-card--row{ width:100%; text-align:left; font:inherit; }
.state-card--row[aria-selected="true"]{ border-color:var(--brand); box-shadow:var(--shadow); }
.state-card--row[aria-selected="true"] .card-ic{ background:var(--ic,var(--brand)); color:#fff; }

/* ---------- Breadcrumb (part 3) ---------- */
.crumb-bar{ background:var(--tint); border-bottom:1px solid var(--line); }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding-top:10px; padding-bottom:10px; font-size:.85rem; }
.crumbs li{ display:flex; align-items:center; gap:2px; }
.crumbs li + li::before{ content:"›"; margin:0 7px; color:var(--muted); }
.crumbs a{ color:var(--brand); text-decoration:none; font-weight:600; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs [aria-current]{ color:var(--muted); font-weight:600; }

/* ---------- Hero (part 4) ---------- */
.hero{
  background:linear-gradient(160deg,#FBF8FE 0%,var(--tint) 55%,#EFE6F8 100%);
  padding:56px 0 64px;
}
.hero--urgent{ background:linear-gradient(160deg,#FDF3F3 0%,#FBEAEA 55%,#F6DCDC 100%); }
.hero-inner{ display:grid; gap:36px; align-items:center; }
.hero-copy .lead{ color:var(--muted); max-width:56ch; }
.hero-cta-row{ display:flex; flex-direction:column; gap:10px; margin:22px 0 8px; }
.call-line{ font-size:.92rem; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.call-line svg{ width:16px; height:16px; color:var(--green); }
.trust-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 20px; }
.tchip{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
  background:#fff; border:1px solid var(--line); font-size:.85rem; font-weight:600;
}
.tchip svg{ width:15px; height:15px; color:var(--brand); }
.review-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.avatar-stack{ display:flex; flex:none; }
.avatar{
  width:36px; height:36px; border-radius:50%; border:2px solid #fff; margin-left:-10px;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800; color:var(--brand-deep);
}
.avatar:first-child{ margin-left:0; }
.av-0{ background:var(--tint-1); } .av-1{ background:var(--tint-2); }
.av-2{ background:var(--tint-3); } .av-3{ background:var(--tint-4); } .av-4{ background:var(--tint-5); }
.stars{ display:inline-flex; gap:1px; color:#D8D2E4; line-height:1; }
.stars svg{ width:17px; height:17px; }
.stars .on{ color:var(--accent); }
.review-quote{ font-size:.92rem; color:var(--muted); }
.review-quote strong{ color:var(--ink); font-weight:600; }
.hero-media{ position:relative; }
.photo-card{
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg);
  border:6px solid #fff; transform-style:preserve-3d; will-change:transform;
}
.photo-card img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.photo-chip{
  position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px;
  background:rgba(42,21,68,.92); color:#fff; padding:9px 15px; border-radius:999px;
  font-size:.85rem; font-weight:700;
}
.photo-chip svg{ width:16px; height:16px; color:var(--accent); }
@media (min-width:1024px){
  .hero{ padding:84px 0 96px; }
  .hero-inner{ grid-template-columns:1.05fr .95fr; gap:56px; }
  .hero-cta-row{ flex-direction:row; align-items:center; }
}

/* ---------- Trust strip (part 5) ---------- */
.trust-strip{ background:var(--brand-deep); color:#fff; overflow:hidden; padding:16px 0; }
.trust-viewport{ overflow:hidden; }
.trust-track{ display:flex; width:max-content; animation:trustLoop 36s linear infinite; }
.trust-strip:hover .trust-track{ animation-play-state:paused; }
.trust-set{ display:flex; align-items:center; flex:none; }
.trust-item{ display:flex; align-items:center; gap:11px; padding:0 22px; white-space:nowrap; font-weight:600; font-size:.95rem; }
.trust-ic{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--tic-bg,rgba(255,255,255,.12));
}
.trust-ic svg{ width:19px; height:19px; color:var(--tic,#fff); }
.trust-sep{ width:1px; height:22px; background:rgba(255,255,255,.25); flex:none; }
@keyframes trustLoop{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Related services (part 6) ---------- */
.svc-grid{ display:grid; gap:20px; }
.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.svc-bar{ height:6px; background:var(--sc,var(--brand)); }
.svc-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.svc-icon{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--sic-bg,var(--tint)); color:var(--sc,var(--brand));
  animation:svcFloat 5s ease-in-out infinite;
}
.svc-icon svg{ width:29px; height:29px; }
@keyframes svcFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
.svc-card h3{ margin:0; font-size:1.12rem; }
.svc-desc{ color:var(--muted); margin:0; flex:1; }
.svc-card .btn{ margin-top:auto; }
@media (min-width:768px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Emergency band (part 7) ---------- */
.emergency-band{ background:linear-gradient(135deg,var(--emergency) 0%,var(--emergency-deep) 100%); color:#fff; }
.eb-grid{ display:grid; gap:28px; align-items:center; }
.emergency-band h2{ color:#fff; }
.eb-text{ max-width:62ch; color:#FCEBEB; }
.eb-steps{ display:grid; gap:12px; margin-top:22px; }
.eb-step{
  display:flex; gap:13px; align-items:flex-start; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:14px 16px;
}
.eb-step .card-ic{ background:#fff; }
.eb-step p{ margin:0; font-size:.95rem; }
.eb-call{ text-align:center; display:grid; gap:12px; justify-items:center; }
.eb-call .btn{ font-size:1.15rem; min-height:64px; padding:16px 34px; }
.eb-trust{ font-size:.88rem; font-weight:600; color:#FCEBEB; margin:0; }
.eb-city-link{ color:#fff; font-weight:700; }
@media (min-width:1024px){
  .eb-grid{ grid-template-columns:1.5fr .8fr; gap:48px; }
  .eb-steps{ grid-template-columns:repeat(3,1fr); }
  .eb-step{ flex-direction:column; }
}

/* ---------- What happens when you call (part 8) ---------- */
.steps-wrap{ position:relative; }
.steps-grid{ display:grid; gap:20px; position:relative; }
.steps-line{ display:none; }
.step{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.step-num{
  width:58px; height:58px; border-radius:50%; color:#fff; font-size:1.35rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-bottom:50px; z-index:1;
  border:4px solid #fff; box-shadow:var(--shadow);
}
.step-num.n1{ background:var(--emergency); } .step-num.n2{ background:var(--blue); } .step-num.n3{ background:var(--green); }
.step-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px 24px; box-shadow:var(--shadow); flex:1; width:100%;
}
.step-card h3{ font-size:1.08rem; }
.step-card p{ color:var(--muted); margin:0; }
.steps-cta{ text-align:center; margin-top:34px; }
@media (min-width:1024px){
  .steps-grid{ grid-template-columns:repeat(3,1fr); }
  .steps-line{
    display:block; position:absolute; left:16%; right:16%; top:29px; height:3px;
    transform:translateY(-50%); z-index:1;
    background:linear-gradient(90deg,var(--emergency),var(--blue),var(--green));
    background-size:200% 100%; animation:lineFlow 5s linear infinite; border-radius:3px; opacity:.55;
  }
  @keyframes lineFlow{ from{ background-position:0 0;} to{ background-position:200% 0;} }
}
/* Stacked steps (2026-11-07, user-directed): below desktop the cards
   pile in one column and each number badge moves from the card's LEFT
   EDGE to its TOP EDGE — perched/straddling the top border (half
   outside above the card) at the card's left padding line (left:22px),
   with the same perched finish as .danger-step__num (white ring +
   shadow; badge size and colours unchanged at 58px). Clearance
   arithmetic: overhang = 29px (half of 58). Row gap 44px leaves 15px
   of air between a card's bottom and the next badge's top; the grid's
   6px top padding adds to .sec-head's 40px bottom margin, so the
   first badge keeps 17px of air below the section head. Card top
   padding 44px leaves 15px between the badge's inside half (29px) and
   the title. Desktop (>=1024px) is untouched: the badge keeps its
   threaded position in the column flow above the card. */
@media (max-width:1023px){
  .steps-grid{ row-gap:44px; padding-top:6px; }
  .step{ position:relative; flex-direction:column; text-align:left; align-items:stretch; }
  .step-num{ position:absolute; top:0; left:22px; transform:translateY(-50%); margin:0; flex:none; }
  .step-card{ padding:44px 22px 24px; }
}

/* ---------- About us (part 9) ---------- */
.about-grid{ display:grid; gap:32px; align-items:start; }
.about-media{ position:relative; }
.about-media img{ border-radius:20px; box-shadow:var(--shadow-lg); aspect-ratio:4/3; object-fit:cover; width:100%; }
.stats-card{
  position:absolute; right:14px; bottom:14px; background:#fff; border-radius:14px;
  box-shadow:var(--shadow-lg); padding:14px 18px; text-align:left; border:1px solid var(--line);
}
.stats-card strong{ display:block; font-size:1.5rem; font-weight:800; color:var(--brand); line-height:1.1; }
.stats-card span{ font-size:.8rem; font-weight:700; color:var(--ink); }
.stats-card small{ display:block; color:var(--muted); font-size:.78rem; margin-top:3px; }
.about-points{ display:grid; gap:14px; margin:22px 0 26px; }
.apoint{ display:flex; gap:14px; }
.apoint-num{
  width:34px; height:34px; flex:none; border-radius:50%; background:var(--tint-1); color:var(--brand);
  font-weight:800; display:flex; align-items:center; justify-content:center;
}
.apoint h3{ font-size:1.02rem; margin-bottom:2px; }
.apoint p{ color:var(--muted); margin:0; font-size:.95rem; }
@media (min-width:1024px){ .about-grid{ grid-template-columns:1fr 1fr; gap:56px; } .page-home .about-media{ position:sticky; top:calc(var(--topbar-h) + var(--header-h) + 16px); } }
/* About page (fix pass 2026-11-06): the About section's left image gets
   the same sticky treatment as the homepage's, scoped to .page-about so
   no other page's about-media moves. Offset = sticky topbar + header +
   16px clearance, the same calc as the .page-home rule above. */
@media (min-width:1024px){ .page-about .about-media{ position:sticky; top:calc(var(--topbar-h) + var(--header-h) + 16px); } }

/* ---------- Before & after (part 10) ---------- */
/* Fix pass 2026-11-07: the tab strip was a hidden-scrollbar scroll row
   (overflow-x:auto + scrollbar-width:none, scrollbar hidden) of flex:none
   pills — the three pills total ~402px against a ~328px phone container,
   so "Hotel Room" painted cut off at the screen edge ("Hotel Ro") while
   html{overflow-x:clip} left the page itself no sideways fallback and the
   strip showed no scroll affordance. The row now WRAPS instead: every
   tab stays whole and reachable with no horizontal scrolling at any
   width (widest pair ~285px fits the narrowest container ~288px). The
   now-dead ::-webkit-scrollbar rule goes with the scroll mechanism. */
.ba-tabs{ display:flex; flex-wrap:wrap; gap:10px; padding-bottom:6px; justify-content:flex-start; margin-bottom:22px; }
@media (min-width:768px){ .ba-tabs{ justify-content:center; } }
.ba-tab{
  flex:none; min-height:44px; padding:10px 22px; border-radius:999px; font-weight:700;
  background:#fff; border:1.5px solid var(--line); color:var(--muted);
}
.ba-tab.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.ba-panel{ display:none; }
.ba-panel.active{ display:block; }
.ba-layout{ display:grid; gap:24px; align-items:start; }
.ba-points{ display:grid; gap:10px; }
.ba-point{ display:flex; gap:12px; align-items:center; border-radius:12px; padding:12px 14px; font-weight:600; font-size:.95rem; background:var(--pbg,var(--tint)); }
.ba-point .card-ic{ width:36px; height:36px; }
.ba-point .card-ic svg{ width:18px; height:18px; }
.ba-slider{
  position:relative; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:16/10; touch-action:none; user-select:none; background:var(--brand-deep);
}
.ba-slider img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-after-wrap{ position:absolute; inset:0; overflow:hidden; }
.ba-tag{
  position:absolute; top:12px; z-index:3; padding:5px 12px; border-radius:999px;
  background:rgba(36,27,48,.8); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.ba-tag--before{ left:12px; } .ba-tag--after{ right:12px; }
.ba-handle{
  position:absolute; top:0; bottom:0; width:3px; background:#fff; z-index:4;
  box-shadow:0 0 0 1px rgba(36,27,48,.25); transform:translateX(-50%);
}
.ba-handle::after{
  content:"‹ ›"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:#fff; color:var(--brand-deep);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem;
  box-shadow:var(--shadow);
}
.ba-range{ width:100%; margin-top:14px; accent-color:var(--brand); height:44px; }
.ba-caption{ text-align:center; color:var(--muted); margin-top:12px; font-weight:600; }
@media (min-width:1024px){ .ba-layout{ grid-template-columns:.85fr 1.4fr; gap:36px; } }

/* ---------- Locations / US map (part 11) ---------- */
/* Width pass 2026-11-05: the user chose the stylesheet's original intent —
   the locations search field is a centred 520px block, not full width.
   display:block activates the already-declared max-width:520px and the
   auto side margins (both inert while the <label> was inline). The bottom
   margin is deliberately 0, NOT the old 30px: now that the label is a
   block, a 30px bottom margin would collapse with .loc-grid's
   margin-top:24px and paint a 30px gap — with 0 here, the grid's 24px is
   the single source of the search -> map gap (see the gap-pass note on
   .loc-grid below). The input is width:100% under global border-box, so
   it fills the 520px box exactly; below ~552px viewport the label is
   capped by the container and the field shrinks with it, still centred. */
.loc-search{ position:relative; display:block; max-width:520px; margin:0 auto; }
.loc-search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--muted); }
.loc-search input{
  width:100%; min-height:54px; padding:14px 18px 14px 46px; border:1.5px solid var(--line);
  border-radius:999px; background:#fff; box-shadow:var(--shadow);
}
/* Gap pass 2026-11-05: breathing room between the locations search
   field and the map/grid row below it. .loc-search was an inline <label>,
   so its declared margin-bottom was inert (vertical margins do not
   apply to inline boxes) and the painted gap was ~0 — the field sat
   flush on the card. The 24px lives on .loc-grid instead: the class is
   used only by shared.locations_states (homepage + locations page), and
   the margin applies at every width, so the stacked mobile order
   (search -> map card) gets the same gap.
   Width pass 2026-11-05: .loc-search is display:block now, but its
   bottom margin is 0, so it collapses against this 24px and the painted
   gap stays exactly 24px — this rule remains the single source. */
.loc-grid{ display:grid; gap:30px; align-items:start; margin-top:24px; }
.us-map{ width:100%; height:auto; display:block; }
.us-map .map-state{ fill:#EFE9F7; stroke:#D9CDEB; stroke-width:1; }
.us-map .map-county, .us-map .map-county--on,
.state-map .map-county, .state-map .map-county--on{ fill:#EFE9F7; stroke:#fff; stroke-width:.8; }
.us-map a.map-county-link{ cursor:pointer; }
.us-map a:hover .map-county, .us-map a:focus-visible .map-county{ filter:brightness(1.07); }
.us-map .map-state-line{ fill:none; stroke:#fff; stroke-width:1.8; pointer-events:none; }
.us-map .map-label{ font-size:19px; font-weight:800; fill:var(--brand-deep); stroke:#fff; stroke-width:3px; paint-order:stroke; pointer-events:none; }
.us-map .map-dot, .state-map .map-dot{ fill:#fff; stroke:var(--brand-deep); stroke-width:1; }
.us-map a:hover .map-dot, .us-map a:focus-visible .map-dot,
.state-map a:hover .map-dot, .state-map a:focus-visible .map-dot{ fill:var(--accent); }
.state-rows{ display:grid; gap:14px; overflow:hidden; }
.state-row-viewport{ overflow:hidden; }
.state-row-track{ display:flex; gap:14px; width:max-content; animation:rowSlide 26s linear infinite; }
.state-rows:hover .state-row-track{ animation-play-state:paused; }
.state-row-track .state-card{ min-width:250px; }
@keyframes rowSlide{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.loc-see-all{ text-align:center; margin-top:26px; }
@media (min-width:1024px){ .loc-grid{ grid-template-columns:1.1fr .9fr; gap:48px; } }

/* ---------- FAQ (part 12) ---------- */
.faq-grid{ display:grid; gap:30px; align-items:start; }
.faq-call{
  background:var(--brand-deep); color:#fff; border-radius:var(--radius); padding:26px;
  display:grid; gap:12px; box-shadow:var(--shadow-lg);
}
.faq-call h3{ color:#fff; margin:0; }
.faq-call p{ color:#CFC4E4; margin:0; }
.faq-list{ display:grid; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
/* FAQ active border removed (2026-11-06, user): the open item keeps
   its 1px border WIDTH (box geometry identical, zero content shift)
   but paints it transparent — no visible border on the active box;
   its shadow and radius are unchanged, closed items keep var(--line). */
.faq-item.open{ border-color:transparent; box-shadow:var(--shadow); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  text-align:left; min-height:56px; padding:16px 20px; font-weight:700; font-size:1rem; color:var(--ink);
}
.faq-q svg{ width:18px; height:18px; flex:none; color:var(--brand); transition:transform .25s; }
.faq-item.open .faq-q svg{ transform:rotate(180deg); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ padding:0 20px 18px; color:var(--muted); margin:0; max-width:75ch; }
@media (min-width:1024px){
  .faq-grid{ grid-template-columns:.85fr 1.5fr; gap:48px; }
  .faq-side{ position:sticky; top:190px; }
}

/* ---------- Why us (part 13) ---------- */
.why-grid{ display:grid; gap:32px; align-items:start; }
.badge-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px; }
@media (min-width:560px){ .badge-grid{ grid-template-columns:1fr 1fr; } }
.badge{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow); }
.badge .card-ic{ width:44px; height:44px; margin-bottom:10px; }
.badge .card-ic svg{ width:22px; height:22px; }
.badge h3{ font-size:1rem; margin-bottom:3px; }
.badge p{ color:var(--muted); font-size:.9rem; margin:0; }
.why-photo img{ border-radius:20px; box-shadow:var(--shadow-lg); width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
@media (min-width:1024px){ .why-grid{ grid-template-columns:1.25fr .85fr; gap:56px; } .why-photo img{ aspect-ratio:auto; min-height:480px; } }

/* ---------- Reviews slider (part 14) ---------- */
.rev-shell{ position:relative; }
.rev-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 18px; scrollbar-width:none; outline-offset:4px;
}
.rev-track::-webkit-scrollbar{ display:none; }
.rev-card{
  flex:0 0 88%; scroll-snap-align:start; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
}
@media (min-width:768px){ .rev-card{ flex-basis:calc((100% - 20px)/2); } }
@media (min-width:1024px){ .rev-card{ flex-basis:calc((100% - 40px)/3); } }
.rev-head{ display:flex; align-items:center; gap:12px; }
.rev-init{
  width:46px; height:46px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--brand-deep);
}
.rev-who{ line-height:1.3; }
.rev-who strong{ display:block; }
.rev-who small{ color:var(--muted); }
.rev-text{ color:var(--muted); margin:0; font-size:.96rem; }
.rev-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:6px; }
.rev-arrow{
  display:inline-flex; width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; color:var(--brand); align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.rev-arrow:hover{ border-color:var(--brand); }
.rev-arrow svg{ width:20px; height:20px; }
@media (min-width:768px){ .rev-arrow{ display:inline-flex; } }
.rev-dots{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
/* Active dot: same painted 10px circle as inactive — ONLY the colour changes,
   with a smooth background-color fade (no size motion). Colours are set with
   the background-color LONGHAND on purpose: the background: shorthand resets
   background-clip to border-box, which would defeat the 44px hit-box rule's
   background-clip:content-box below and paint the active dot over the full
   44px-tall box (a tall oval). The active rule also re-asserts the clip. */
.rev-dot{ width:10px; height:10px; border-radius:50%; background-color:#D9CDEB; padding:0; min-width:10px; transition:background-color .3s ease; }
.rev-dot.active{ background-color:var(--brand); background-clip:content-box; }
.rev-dot{ min-height:10px; }
button.rev-dot{ height:10px; }

/* ---------- Final call (part 18) ---------- */
.final-call{ background:linear-gradient(140deg,var(--brand) 0%,var(--brand-deep) 100%); color:#fff; text-align:center; }
.final-call--urgent{ background:linear-gradient(140deg,var(--emergency) 0%,var(--emergency-deep) 100%); }
.final-call h2{ color:#fff; }
.final-call p{ color:#E4DAF2; max-width:60ch; margin:0 auto 26px; }
.final-call--urgent p{ color:#FCEBEB; }
.final-call .call-line{ justify-content:center; color:#E4DAF2; margin-top:22px; }
.final-call .call-line svg{ color:var(--accent); }

/* ---------- Blog cards (part 17) ---------- */
.blog-grid{ display:grid; gap:20px; }
.post-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition:transform .18s, border-color .18s;
}
.post-card:hover{ transform:translateY(-3px); border-color:var(--brand); }
.post-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.post-body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.post-tag{
  align-self:flex-start; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--amber-dark); padding:4px 11px; border-radius:999px;
}
.post-card h3{
  font-size:1.08rem; margin:0;
  /* Guides standard (2026-11-06): card titles render in full in the
     markup and clamp HERE to exactly 2 lines with a true ellipsis —
     same -webkit-box trio as .post-desc — never a mid-word chop. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post-more{ margin-top:auto; font-weight:700; color:var(--brand); font-size:.92rem; }
.post-card--featured img{ aspect-ratio:16/10; }
.post-card--featured h3{ font-size:1.45rem; }
.blog-stack{ display:grid; gap:20px; }
@media (min-width:1024px){
  .blog-grid{ grid-template-columns:1.15fr .85fr; gap:24px; }
  .blog-stack .post-card{ flex-direction:row; }
  .blog-stack .post-card img{ width:38%; aspect-ratio:auto; height:100%; }
}

/* ---------- Blog hub: search group + card grid (fix pass 2026-11-06) ----------
   .blog-search/.blog-filters/.post-grid/.featured-wrap/.post-card__body/
   .post-card__title/.post-card__kw had NO rules: the hub search painted as
   a raw browser-default input and the 30 posts rode the bare .post-card
   base with unstyled inner spans in a single stack. The search input
   itself reuses .loc-search (blog_search_filter wraps it in a
   span.loc-search with the shared search icon), so only the group layout
   needs rules here. The card rules mirror the part-17 treatments onto the
   hub's own hooks (.post-body -> .post-card__body, .post-tag ->
   .post-card__kw, .post-card h3 -> .post-card__title; .post-card__desc
   already carries the 2-line clamp). These hooks are emitted ONLY by
   local.blog_search_filter / local.featured_posts (the /blog/ hub). */
.blog-search{ display:grid; gap:18px; }
.blog-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.blog-empty{ text-align:center; color:var(--muted); margin:26px 0 0; }
.featured-wrap{ margin-bottom:24px; }
.post-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
.post-card__body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.post-card__kw{
  order:-1; align-self:flex-start; font-size:.72rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; background:var(--accent-soft); color:var(--amber-dark);
  padding:4px 11px; border-radius:999px;
}
.post-card__title{
  font-size:1.08rem; font-weight:800; color:var(--ink); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (min-width:700px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){
  .post-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
  .featured-wrap .post-card{ flex-direction:row; }
  .featured-wrap .post-card img{ width:52%; aspect-ratio:auto; height:100%; }
  .featured-wrap .post-card__title{ font-size:1.45rem; }
}

/* ---------- Footer (part 19) ---------- */
.site-footer{ background:var(--brand-deep); color:#D9CFF0; }
.footer-grid{ display:grid; gap:34px; padding:64px 0 40px; }
.footer-col h3{ color:#fff; font-size:1rem; margin-bottom:14px; }
.footer-brand p{ color:#B9AAD6; font-size:.94rem; max-width:36ch; }
.footer-contact{ display:grid; gap:9px; margin-top:16px; font-size:.95rem; }
.footer-contact a{ color:#fff; text-decoration:none; font-weight:700; }
.footer-contact li{ display:flex; gap:10px; align-items:center; }
.footer-contact svg{ width:17px; height:17px; color:var(--accent); flex:none; }
.footer-links{ display:grid; gap:9px; }
.footer-links a{ color:#D9CFF0; text-decoration:none; }
.footer-links a:hover{ color:#fff; text-decoration:underline; }
.footer-cols-2{ columns:2; column-gap:24px; }
.disclosure{
  border-top:1px solid rgba(255,255,255,.14); padding:22px 0; font-size:.86rem; color:#B9AAD6; text-align:center;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding:18px 0 26px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:.86rem; color:#B9AAD6;
}
/* Footer fix pass 2026-11-07: the mobile fold is REMOVED — the three
   footer link lists (States / Guides / Pages) show in full at every
   width. The old ≤767px rules hid .footer-fold (display:none) until the
   footer JS added .open on a heading tap, and styled the h3 as a 44px
   pointer tap row; all three rules are gone, the toggle JS and the
   footer-fold hook class went with them, and the headings fall back to
   the base .footer-col h3 rule — plain headings, nothing to tap. */
@media (max-width:767px){
  body{ padding-bottom:60px; }
}
@media (min-width:768px){ .footer-grid{ grid-template-columns:1.2fr 1fr; } }
@media (min-width:1024px){ .footer-grid{ grid-template-columns:1.35fr .9fr 1.1fr .8fr; } }

/* ---------- Sticky mobile call bar (part 32) ---------- */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:65; display:flex;
  background:#fff; box-shadow:0 -6px 24px rgba(42,21,68,.18);
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-bar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:58px; font-weight:800; text-decoration:none; font-size:1rem;
}
.sticky-bar svg{ width:19px; height:19px; }
.sb-emergency{ background:var(--emergency); color:#fff; }
.sb-call{ background:var(--brand); color:#fff; }
.sb-call.solo{ flex:1; }
@media (min-width:1024px){ .sticky-bar{ display:none; } }

/* ============================================================
   Shared section patterns used across page templates
   (quick answer, ZIP checker, bento, bars, jump menu, deep
   guide, sources, checker, lists, article…)
   ============================================================ */
.qa-grid{ display:grid; gap:22px; align-items:stretch; }
.qa-box,.zip-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow);
}
.qa-box h2{ font-size:1.5rem; }
.qa-box p{ color:var(--muted); margin:0; }
/* "What To Do Right Now" composition — the 2026-11-06 centred version
   (70ch paragraph column + centred closing row) was SUPERSEDED
   2026-11-07 by the user's own two-side layout: title + paragraph in a
   left block, Call button + city link in a right-hand flex COLUMN
   (button first, link beneath it, both centred in the column). Built
   as a grid at desktop: heading and paragraph stack in column 1, the
   .qa-actions column sits in column 2 spanning both rows and centres
   itself vertically against the text block. Below desktop the card
   stacks: text first, then the actions column beneath it, items
   centred, button at natural pill width. Scoped to .qa-box--emergency
   throughout — the plain .qa-box cards (Quick Answer + ZIP on
   city/state pages, blog-article Quick Answer) stay untouched, and
   .qa-actions/.qa-city-link are emitted only by this component. */
.qa-box--emergency .section-head{ text-align:left; max-width:none; margin-inline:0; }
.qa-box--emergency .qa-actions{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; margin-top:22px;
}
.qa-box--emergency .qa-actions > .btn{ order:-1; }
.qa-box--emergency .qa-city-link{ font-weight:700; text-align:center; }
@media (min-width:1024px){
  .qa-box--emergency{
    display:grid; grid-template-columns:minmax(0,1fr) 280px; column-gap:36px;
  }
  .qa-box--emergency .section-head{ grid-column:1; grid-row:1; }
  .qa-box--emergency .qa-text{ grid-column:1; grid-row:2; }
  .qa-box--emergency .qa-actions{
    grid-column:2; grid-row:1 / span 2; align-self:center; margin-top:0;
  }
}
.zip-card h3{ margin-bottom:6px; }
.zip-card p{ color:var(--muted); font-size:.95rem; }
.zip-form{ display:flex; gap:10px; margin-top:14px; }
.zip-form input{
  flex:1; min-width:0; min-height:52px; padding:12px 16px; border:1.5px solid var(--line);
  border-radius:999px; font-size:1rem; letter-spacing:.06em;
}
.zip-form .btn{ flex:none; }
@media (max-width:560px){ .zip-form{ flex-direction:column; } }
.zip-result{ margin-top:16px; border-radius:12px; padding:14px 16px; font-weight:600; display:none; }
.zip-result.show{ display:block; }
.zip-result.ok{ background:var(--tint-3); color:#1E5636; }
.zip-result.maybe{ background:var(--accent-soft); color:#7A4A00; }
.zip-result .btn{ margin-top:10px; }
@media (min-width:1024px){ .qa-grid{ grid-template-columns:1.2fr .8fr; } }

/* Meter / ranking bars */
.bars{ display:grid; gap:18px; }
.bar-head{ display:flex; justify-content:space-between; gap:12px; font-weight:600; font-size:.95rem; margin-bottom:6px; }
.bar-head output{ font-weight:800; color:var(--brand); }
.bar-track{ height:12px; border-radius:999px; background:#EAE2F4; overflow:hidden; }
.bar-fill{
  height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--violet));
  transition:width 1.1s ease;
}
.bars.in-view .bar-fill, .bar-fill.in-view{ width:var(--w,50%); }
.bar-src{ font-size:.78rem; color:var(--muted); margin-top:5px; }
.bar--red .bar-fill{ background:linear-gradient(90deg,var(--emergency),#E05A5A); }
.bar--red .bar-head output{ color:var(--emergency); }

/* At-a-glance bento */
.bento{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bento-box{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.bento-box strong{ display:block; font-size:1.9rem; font-weight:800; color:var(--brand); line-height:1.1; }
.bento-box span{ font-weight:700; font-size:.95rem; }
.bento-box small{ display:block; color:var(--muted); font-size:.78rem; margin-top:4px; }
@media (min-width:1024px){ .bento{ grid-template-columns:repeat(3,1fr); gap:20px; } }

/* Deep guide / article prose (parts 27, blog) */
.guide-wrap{ max-width:75ch; margin:0 auto; }
.guide-wrap h2{ margin-top:1.6em; }
.guide-wrap h2:first-child{ margin-top:0; }
.guide-wrap h3{ margin-top:1.3em; }
.guide-wrap p{ color:#3A3049; }
.guide-answer{ font-size:1.06rem; font-weight:600; color:var(--ink); }
.pull-quote{
  border-left:4px solid var(--accent); background:var(--accent-soft);
  border-radius:0 14px 14px 0; padding:18px 22px; margin:26px 0; font-size:1.05rem; font-weight:600;
}
.tip-box{
  background:var(--tint-1); border:1px solid var(--line); border-radius:14px;
  padding:18px 22px; margin:26px 0;
}
.tip-box strong{ color:var(--brand); }
/* .mid-call is defined ONCE, in the fix-pass block at the end of this
   sheet (Item B + the 2026-11-06 contrast consolidation). The original
   dark-panel block that used to sit here was removed: its surviving
   color:#fff declarations (container + h3) merged with the later pale
   tint background and painted the heading white on near-white. */
.guide-img{ border-radius:16px; margin:26px 0; width:100%; }
.contents-box{
  background:var(--tint); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; margin-bottom:26px;
}
.contents-box h3{ font-size:1rem; margin-bottom:10px; }
.contents-box ol{ list-style:decimal; padding-left:20px; display:grid; gap:6px; }
.contents-box a{ text-decoration:none; font-weight:600; }
.contents-box a:hover{ text-decoration:underline; }

/* Sources (part 24) */
.sources-box{ background:var(--tint); border:1px solid var(--line); border-radius:var(--radius); padding:24px 28px; }
.sources-box h2{ font-size:1.25rem; }
.sources-box ul{ display:grid; gap:8px; margin-bottom:12px; }
.sources-box a{ font-weight:600; }
.sources-updated{ color:var(--muted); font-size:.85rem; margin:0; }

/* Problem checker (part 16) */
.checker-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg);
  padding:30px; max-width:860px; margin:0 auto; text-align:center;
}
.sign-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:20px 0; }
.sign-btn{
  min-height:52px; padding:12px 20px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--tint); font-weight:700; color:var(--brand-deep);
}
.sign-btn[aria-pressed="true"], .sign-btn.selected{ background:var(--brand); border-color:var(--brand); color:#fff; }
.checker-result{ display:none; background:var(--tint-1); border-radius:14px; padding:20px; margin-top:8px; }
.checker-result.show{ display:block; }
.checker-result p{ max-width:62ch; margin:0 auto 14px; }
.worse-box{ display:none; background:#FBEAEA; border:1.5px solid var(--emergency); border-radius:14px; padding:20px; margin-top:14px; }
.worse-box.show{ display:block; }
.worse-box h3{ color:var(--emergency); }

/* Neighborhoods + ZIP chips (parts 21/22) */
.nbh-grid{ display:grid; gap:16px; margin-bottom:26px; }
@media (min-width:768px){ .nbh-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .nbh-grid{ grid-template-columns:repeat(3,1fr); } }
.nbh-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); }
.nbh-card h3{ font-size:1.02rem; margin-bottom:2px; }
.nbh-card .nbh-zip{ color:var(--brand); font-weight:800; font-size:.85rem; }
.nbh-card p{ color:var(--muted); font-size:.9rem; margin:4px 0 0; }
.nbh-list{ columns:2; column-gap:28px; font-size:.95rem; color:var(--muted); }
.nbh-list li{ padding:4px 0; break-inside:avoid; display:flex; gap:8px; align-items:center; }
.nbh-list svg{ width:13px; height:13px; color:var(--brand); flex:none; }
@media (min-width:1024px){ .nbh-list{ columns:4; } }
.show-all-wrap{ text-align:center; margin-top:20px; }
.zip-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.zip-chip{
  padding:9px 18px; border-radius:999px; background:#fff; border:1.5px solid var(--line);
  font-weight:800; letter-spacing:.05em; color:var(--brand-deep);
}
.zip-note{ text-align:center; margin-top:16px; }

/* Reviewed by (part 29) */
.reviewed-card{
  display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); max-width:760px; margin:0 auto;
}
.reviewed-card .rev-init{ width:64px; height:64px; font-size:1.15rem; }
.reviewed-card img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; }
.reviewed-card h3{ font-size:1.05rem; margin:0 0 2px; }
.reviewed-card .rb-role{ font-weight:700; color:var(--brand); font-size:.92rem; }
.reviewed-card .rb-bio{ color:var(--muted); font-size:.94rem; margin:6px 0; }
.reviewed-card .rb-date{ font-size:.82rem; color:var(--muted); margin:0; }
@media (max-width:560px){ .reviewed-card{ flex-direction:column; } }

/* Checklists (danger first, part 30 order) */
.checklist{ display:grid; gap:10px; }
.checklist li{
  display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:12px 16px; cursor:pointer;
}
.checklist .tick{
  width:20px; height:20px; flex:none; border-radius:6px; border:2px solid var(--brand);
  display:flex; align-items:center; justify-content:center; color:#fff; margin-top:1px;
}
.checklist .tick svg{ width:12px; height:12px; opacity:0; }
.checklist li.done .tick{ background:var(--green); border-color:var(--green); }
.checklist li.done .tick svg{ opacity:1; }
.checklist li.done .ck-text{ color:var(--muted); }
.ck-text strong{ display:block; }
.ck-text span{ color:var(--muted); font-size:.92rem; }

/* Emergency types tiles + risk card */
.type-grid{ display:grid; gap:16px; }
@media (min-width:768px){ .type-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .type-grid{ grid-template-columns:repeat(3,1fr); } }
.type-tile{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.type-tile .card-ic{ width:46px; height:46px; margin-bottom:10px; }
.type-tile h3{ font-size:1.05rem; }
.type-tile p{ color:var(--muted); margin:0; font-size:.94rem; }
.factors-grid{ display:grid; gap:30px; align-items:start; }
.factor h3{ font-size:1.08rem; margin-top:22px; }
.factor h3:first-child{ margin-top:0; }
.factor p{ color:var(--muted); }
.risk-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow-lg); display:grid; gap:18px;
}
@media (min-width:1024px){
  .factors-grid{ grid-template-columns:1.35fr .8fr; gap:48px; }
  .risk-card{ position:sticky; top:190px; }
}

/* Cities we serve tools (part 35) + locations page */
.cws-tools{ max-width:520px; margin:0 auto 26px; position:relative; }
.cws-tools svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--muted); }
.cws-tools input{ width:100%; min-height:54px; padding:14px 18px 14px 46px; border:1.5px solid var(--line); border-radius:999px; background:#fff; box-shadow:var(--shadow); }
.card-grid{ display:grid; gap:14px; }
@media (min-width:768px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .card-grid{ grid-template-columns:repeat(3,1fr); gap:18px; } }
/* Locations directory groups (/locations/): plain stacked divs inside the
   locations section, not .section elements — without this they sat flush
   under the block above. padding-top (never collapses) gives every group
   heading the standard section gap above it: the first group sits a full
   --sec-pad below the map/slider block, later groups a full --sec-pad
   below the previous group's A–Z list. The section's own bottom padding
   closes the last group, so no bottom padding here (it would double). */
.loc-group{ padding-top:var(--sec-pad); }
/* A–Z directory: each city link is a capsule chip (was a plain multi-column
   text list) — a wrapping flex row of pills in the .loc-pill chip language
   (white, 1px line border, soft chip shadow, brand border on hover). */
.az-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.az-list a{
  text-decoration:none; font-weight:600; display:inline-flex; gap:8px; align-items:center;
  padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:#fff;
  box-shadow:0 4px 14px rgba(42,21,68,.06);
}
.az-list a:hover{ border-color:var(--brand); }
.az-list svg{ width:13px; height:13px; color:var(--brand); flex:none; }
.filter-chips{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:28px; }
.filter-chip{ min-height:44px; padding:10px 20px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-weight:700; color:var(--muted); }
.filter-chip.active{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* Related posts (part 28) — Item F (2026-11-06): related_posts no longer
   emits the horizontal .post-row design; it emits the homepage guides
   structure (.blog-grid + .post-card, see "Blog cards (part 17)"). The
   .post-rows/.post-row rules that stood here were deleted with the
   markup so no stale duplicate design can resurface. */

/* Simple pages + 404 */
.simple-wrap{ max-width:75ch; margin:0 auto; }
.simple-wrap p{ color:#3A3049; }
/* Contact cards (2026-11-06): contact_info never emitted the
   .contact-rows/.contact-row markup the rules that stood here were
   written for — it emitted plain <p> rows inside a rule-less
   .contact-card wrapper, so the rows picked up only the card chrome
   and the icon/grid design matched nothing (the flat, unfinished
   look). The component now emits this card grid; the old hooks are
   deleted with their markup so no orphan design can resurface. */
.contact-grid{ display:grid; gap:18px; margin-top:34px; }
@media (min-width:1024px){ .contact-grid{ grid-template-columns:repeat(3,1fr); } }
.contact-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 22px; box-shadow:var(--shadow); text-decoration:none; color:var(--ink);
}
.contact-card .card-ic{ width:52px; height:52px; background:var(--tint); margin-bottom:6px; }
.contact-card .card-ic svg{ width:24px; height:24px; }
.contact-card strong{ font-size:1rem; font-weight:800; color:var(--brand-deep); }
.contact-value{ font-size:1.12rem; font-weight:700; color:var(--brand); overflow-wrap:anywhere; }
a.contact-card{ transition:border-color .18s ease; }
a.contact-card:hover{ border-color:var(--brand); }
a.contact-card:hover .card-ic{ background:var(--brand); color:#fff; }
.contact-cta{ margin-top:38px; display:grid; gap:18px; justify-items:center; text-align:center; }
.contact-cta p{ margin:0; }

/* Anchor offset for sticky chrome */
section[id], div[id]{ scroll-margin-top:132px; }
@media (min-width:1024px){ section[id]{ scroll-margin-top:196px; } }
/* Jump-menu removal (2026-11-06): the 196px desktop offset above includes
   room for the sticky jump menu (~70px) over the sticky topbar + header
   (121px). The bar was removed from city pages first, then from the
   emergency pages too (user decision 2026-11-06 — it now renders
   nowhere), so both page types take the base 132px offset (same slack
   over the chrome as the sub-1024 value). */
@media (min-width:1024px){ .page-city section[id], .page-city_emergency section[id]{ scroll-margin-top:132px; } }

/* Topbar chip vertical fit inside fixed 45px bar */
.top-chips{ padding-top:6px; padding-bottom:6px; }
@media (min-width:1024px){ .top-chips{ flex-wrap:nowrap; } }

/* ---------- Reduced motion (R26) ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .topbar-track,.trust-track,.state-row-track{ animation:none !important; }
  .topbar-viewport,.trust-viewport,.state-row-viewport{ overflow-x:auto; }
  .btn--pulse,.btn--pulse-red{ animation:none !important; }
  .chip-dot{ animation:none !important; }
  .rev-track{ scroll-behavior:auto; }
}

/* ---------- Component fix pass ---------- */
.cws-extra{ display:none; } /* Cities We Serve: hidden until Show All / search */
@media (min-width:1024px){ .head-call{ display:none; } } /* phone icon button is phone/tablet only */
.site-footer .logo-text strong{ color:#fff; }
.site-footer .logo-text small{ color:#B9AAD6; }
.mm-link{ width:100%; text-align:left; } /* mobile Locations accordion toggle */

/* ---------- QA contract fixes (Prompt 2 QA) ----------
   Components emit a second class vocabulary for several sections;
   these rules style that markup and repair tap targets / layout. */
.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;
}
.section-head{ text-align:center; max-width:760px; margin:0 auto 40px; }
.section-head p, .section-sub{ color:var(--muted); margin:0; font-size:1.05rem; }
.section-intro{ max-width:75ch; margin:0 auto 30px; text-align:center; color:var(--muted); }
/* Emergency guide composition — history: 2026-11-06 the guide's intro
   was set centre-aligned by the shared .section-intro rule above (its
   other users keep that look) and .wait-box had NO rule at all, so the
   "While You Wait" heading sat at the container edge and its <ol>
   items painted as bare text; the fix made the intro left-aligned
   text in a centred 72ch column with the wait-box in the same column
   and tick-marked rows. 2026-11-07 the user first prescribed a
   two-side layout (title full-width on top, intro left / wait-box
   right in a 55fr/45fr grid on the section container at desktop, 32px
   gap before the scenario cards), then the same day reverted it:
   "keep this section as it is before but with full width like
   paragraph on top checklist below it."
   CURRENT (2026-11-07, full-width stacked): the two-column grid is
   GONE — the title stays on top, the intro paragraph sits below it and
   the "While You Wait" box below that, in DOM order at every width
   (the arrangement mobile always had). BOTH blocks run at FULL
   container width: the shared .section-intro's 75ch cap and centre
   alignment do not apply here (left-aligned, max-width none, no auto
   side margins), and the wait-box's own 72ch cap / centring (base
   rule below) is likewise lifted inside this section. A deliberate
   32px gap separates the section body from the scenario cards
   (.type-grid margin-top — kept from the two-side round at the user's
   request). The wait-box tick rows (20px brand-filled box, white
   check, drawn in CSS; the list is static, not the interactive
   checklist) are unchanged from 2026-11-06. All rules scoped to this
   section — the shared .section-intro keeps its centred look for its
   other users. */
[data-section="emergency-guide"] .section-intro{ text-align:left; max-width:none; margin-inline:0; }
[data-section="emergency-guide"] .wait-box{ max-width:none; margin-inline:0; }
[data-section="emergency-guide"] .type-grid{ margin-top:32px; }
.wait-box{ max-width:72ch; margin-inline:auto; }
.wait-box ol{ display:grid; gap:4px; }
.wait-box li{ position:relative; padding:6px 0 6px 34px; }
.wait-box li::before{
  content:""; position:absolute; left:0; top:7px; width:20px; height:20px;
  border-radius:6px; background:var(--brand);
}
.wait-box li::after{
  content:""; position:absolute; left:7px; top:10px; width:6px; height:11px;
  border-right:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(45deg);
}
.section.tint{ background:var(--tint); }
.city-grid{ display:grid; gap:14px; }
@media (min-width:768px){ .city-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .city-grid{ grid-template-columns:repeat(3,1fr); gap:18px; } }
/* State-group separation 2026-11-06: .help-group had NO rule at all and
   .city-grid carries no margin, so on the emergency hub each state's grid
   abutted the previous state's last row with a 0px painted gap — the
   "touching" at state boundaries. A 32px break between groups only; the
   grid's own gaps (14px, 18px on desktop) are untouched. */
.help-group + .help-group{ margin-top:32px; }
/* Cities We Serve (2026-11-06): state pages now emit the homepage
   .loc-grid/.loc-col/.loc-search structure, so the .cws-grid,
   .cws-search, [data-extra] and .extra-open rules were deleted with
   the markup they served — no stale second layout can resurface. */
.state-map{ width:100%; height:auto; display:block; }
.state-map .map-county{ stroke-width:1.1; }
.state-map .map-dot{ stroke-width:1.3; }
/* Checker signs: single full-width column — every sign spans the card's
   inner width (was a wrapping row, so each sign shrink-wrapped its own
   content and the column rendered ragged).
   Restyled from capsules (radius 999px, tint fill) to the locked Nightwatch
   card treatment: radius var(--radius)=16px, white bg, 1px --line border,
   soft --shadow — the same treatment as .rev-card / .nbh-card. */
.checker-signs{ display:flex; flex-direction:column; gap:12px; margin:20px 0; }
.sign{
  width:100%; min-height:52px; padding:16px 22px; border-radius:var(--radius); border:1px solid var(--line);
  background:#fff; font-weight:700; color:var(--brand-deep); box-shadow:var(--shadow);
}
.sign:hover{ border-color:var(--brand); }
.sign[aria-pressed="true"], .sign.selected{ background:var(--brand); border-color:var(--brand); color:#fff; }
.zip-result:not([hidden]){ display:block; }
.checker-result:not([hidden]){ display:block; }
.meter{ height:12px; border-radius:999px; background:#EAE2F4; overflow:hidden; }
.meter__fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--violet)); }
/* Item 6 fix: .risk-bar is a stacked BLOCK (label row + meter + source),
   not a meter track — the old height:12px/overflow:hidden on this wrapper
   clipped the label and value into a thin lavender strip. The track look
   lives on .meter alone. */
.risk-bar{ margin:0 0 16px; }
.bento__box{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
/* At-a-glance stat typography (2026-11-06): at_a_glance emits
   <p class="bento__value/__label/__source"> — the strong/span/small
   element rules that stood here styled markup the component never
   emits, so the three lines rendered as plain paragraphs (global
   p margin 0 0 1em) inside a grid-stretched card and the numbers
   read as body text. The value is now a display stat in the site's
   live stat treatment (cf. .compare-box__value: 800 weight,
   brand-deep, tight leading), the label sits directly under it, and
   the source keeps its small muted style; per-line margins group
   the trio at the top of the card. */
.bento__value{ font-size:1.9rem; font-weight:800; color:var(--brand-deep); line-height:1.1; margin:0; }
.bento__label{ font-weight:700; font-size:.95rem; margin:6px 0 0; }
.bento__source{ color:var(--muted); font-size:.78rem; margin:4px 0 0; }
/* At-a-glance on phones (2026-11-07): the bare 1fr tracks were
   minmax(auto,1fr), floored by the widest card's min-content — a
   10-character figure ("22,416,077" ≈ 5.4em ≈ 164px at the 1.9rem/800
   value size) + 44px card padding + borders ≈ 210px per card, ≈ 434px
   of grid in a 328px container at a 360px phone, so the right column
   ran off-screen. Below desktop: tracks become minmax(0,1fr), cards
   may shrink, side padding tightens to 14px, and the value size scales
   with the viewport — at 320px the value resolves to 18.4px ≈ 99px,
   inside the ≈107px of card text room; it reaches the full 1.9rem by
   ~585px viewport. Desktop (≥1024px) rules are untouched. */
@media (max-width:1023px){
  .bento{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .bento__box{ min-width:0; padding:20px 14px; }
  .bento__value{ font-size:clamp(1.15rem, 5.2vw, 1.9rem); }
}
.compare-box{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
/* Danger First steps (2026-11-06, user-prescribed): the 3 steps lay out
   as a horizontal 3-column row of equal-height cards (grid stretch),
   stacked in one column below desktop. Each red number badge is
   perched on its card's TOP EDGE, outside the box: absolutely
   positioned at the card's left padding (left:20px) and translated up
   by half its 36px height, so 18px overhangs the card top. Clearance
   arithmetic: .section-intro carries 30px bottom margin and .sec-head
   40px, so the overhanging badge top keeps 12px / 22px of air below
   the block above; the 30px row gap gives stacked cards the same
   12px clearance on mobile. Card top padding 32px leaves 14px
   between the badge's inside half (18px) and the title. The
   .first-hour checklist card gets a deliberate 28px gap below the
   steps row; its content and layout are unchanged. */
.danger-steps{ display:grid; gap:30px 20px; }
@media (min-width:1024px){ .danger-steps{ grid-template-columns:repeat(3,1fr); } }
.danger-step{
  position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:32px 20px 20px; box-shadow:var(--shadow);
}
.danger-step h3{ margin:0 0 8px; }
.danger-step p{ margin:0; }
.danger-step__num{
  position:absolute; top:0; left:20px; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; background:#C1272D; color:#fff;
  font-weight:800; display:flex; align-items:center; justify-content:center;
  border:3px solid #fff; box-shadow:var(--shadow);
}
.first-hour{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow); margin-top:28px;
}
/* First Hour checklist rows (2026-11-06): the .check-item/.check-note
   rules that stood here belonged to a drifted emitter — .check-item
   was display:flex on the title <span>, which blockified it and
   stacked checkbox/title/note on separate lines, and the JS toggle's
   data-checklist sat on the <input>s instead of the <ul>, so the
   designed .tick/.ck-text system (see "Checklists" above) never
   engaged. The emitter now produces that designed markup; these
   orphan rules are deleted with it. */
.reviewed-by{
  display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); max-width:760px; margin:0 auto;
}
@media (max-width:560px){ .reviewed-by{ flex-direction:column; } }
.not-found__search input{ min-height:44px; }
.state-grid{ display:grid; gap:14px; }
@media (min-width:768px){ .state-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .state-grid{ grid-template-columns:repeat(3,1fr); gap:18px; } }
@media (max-width:560px){
  .header-inner{ gap:10px; }
  .logo{ min-height:44px; }
  .logo img{ width:38px; height:38px; }
  .logo-text strong{ font-size:.93rem; }
  [data-search-open]{ display:none; }
}
/* Review dots: real 44px-tall hit box; background-clip keeps the painted
   dot at its designed 10px height, negative margins keep row layout.
   LOAD-BEARING: any background: SHORTHAND on .rev-dot (esp. .rev-dot.active,
   higher specificity) resets background-clip to border-box and the dot
   paints the full 44px box — set dot colours with background-color only. */
.rev-dot{ position:relative; box-sizing:border-box; height:44px; min-height:44px; padding:17px 0; background-clip:content-box; margin-top:-17px; margin-bottom:-17px; }

/* ---------- Fix pass 2026-11-04 (items 3–8) ---------- */
/* Item 8a: global inline-icon guard. _common.icon() emits class="ic", so
   any icon whose component context has no svg rule of its own renders at
   text size instead of the raw SVG default. More specific contextual
   rules (.btn svg, .chip svg, .card-ic svg, …) still win. Decorative
   SVGs (.us-map, .state-map) and the logo <img> do not use .ic. */
.ic{ width:1.15em; height:1.15em; flex:none; }

/* Item 3: locations sections — map card + pill slider + primary button
   (homepage/locations AND state pages via .loc-grid since the
   2026-11-06 parity restructure). */
.loc-map-card{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:14px; box-shadow:var(--shadow);
  /* Parity pass 2026-11-05: flex column so the map + caption travel as
     one unit — if the card is ever taller than its content (grid
     contexts), the pair centres in the free space instead of the map
     pinning to the top; the caption keeps its small fixed gap directly
     beneath the map either way. Card height stays content-driven. */
  display:flex; flex-direction:column; justify-content:center;
}
.loc-map-cap{ margin:10px 4px 2px; font-size:.88rem; line-height:1.5; color:var(--muted); text-align:center; }
.loc-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.loc-slider{ overflow-x:auto; scroll-snap-type:x proximity; padding:4px 2px 12px; scrollbar-width:thin; }
.loc-slider__track{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto); gap:12px; width:max-content; }
.loc-pill{
  scroll-snap-align:start; display:flex; flex-direction:column; gap:2px; min-width:190px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 16px;
  box-shadow:0 4px 14px rgba(42,21,68,.06); text-decoration:none;
}
.loc-pill:hover{ border-color:var(--brand); }
.loc-pill__name{ font-weight:800; color:var(--ink); font-size:1rem; line-height:1.25; }
.loc-pill__sub{ color:var(--muted); font-size:.86rem; line-height:1.3; }
.loc-more{ width:100%; justify-content:center; }
/* Site-wide spacing standard (user-set 2026-11-06): every .section is
   80px top/bottom on desktop via --sec-pad (56px on mobile); the hero is
   the only exception and keeps its own padding rules. This supersedes
   the 2026-11-05 parity-pass override that halved this section's bottom
   padding — the locations section now takes the standard like all others. */
@media (min-width:1024px){
  .loc-grid{ align-items:center; }
}

/* Item 4: "Why Call" — right-side photo sticky on desktop, everywhere the
   component renders (home + about). Same offset pattern as the homepage
   About sticky: sticky topbar + header + 16px clearance. */
@media (min-width:1024px){
  .why-photo{ position:sticky; top:calc(var(--topbar-h) + var(--header-h) + 16px); }
}

/* Item 5b: reviews arrows move to the top-right of the heading row.
   Desktop: absolute in the row's top-right corner; the heading text gets
   120px side padding so it can never run under the arrows. Mobile: the
   arrows stay in normal flow BELOW the heading, right-aligned — the
   heading text and the arrow box can never intersect at 390px. */
.rev-head-row{ position:relative; }
.rev-arrows{ display:flex; gap:10px; justify-content:flex-end; margin:0 0 18px; }
@media (min-width:1024px){
  .rev-arrows{ position:absolute; top:2px; right:0; margin:0; }
  .rev-head-row .sec-head{ padding-left:120px; padding-right:120px; }
}

/* Item 6: risk-bar label row — label left, percentage right, meter below.
   (The .risk-bar wrapper rule itself is fixed in place further up.) */
.risk-bar__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:7px; }
.risk-bar__label{ font-weight:700; color:var(--ink); font-size:.95rem; line-height:1.35; }
.risk-bar__pct{ font-weight:800; color:var(--brand); font-size:.95rem; white-space:nowrap; }

/* Item 7: problem-checker signs — name as its own bold line, description
   as a separate muted line below (the spans already existed in markup;
   they simply had no rules). Selected state keeps a readable detail. */
.sign__label{ display:block; font-weight:800; }
.sign__detail{ display:block; margin-top:3px; font-weight:400; font-size:.92rem; line-height:1.45; color:var(--muted); }
.sign.selected .sign__detail, .sign[aria-pressed="true"] .sign__detail{ color:#E9E1F7; }

/* Item 8b: guide-card descriptions — each post's own meta text, clamped
   to 2 lines so card rows stay tidy. */
.post-desc{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--muted); font-size:.94rem; line-height:1.5;
}
.post-card__desc{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--muted); font-size:.94rem; line-height:1.5; margin-top:4px;
}
.post-more{ display:inline-flex; align-items:center; gap:7px; }

/* ---------- Fix pass 2026-11-06 (state-page bundle, items A–E) ---------- */
/* Item A: quick_answer_zip emits .qa-zip, which had NO rule (the .qa-grid
   rules above are orphaned — no markup uses them), so the Quick Answer
   card and the ZIP checker card stacked with zero gap and painted as one
   merged block. Stacked grid with the site's card gap fixes the seam.
   .zip-call also had no rule: the Call button sat flush under the form
   and read as a wrap accident — it now gets the same 16px rhythm as the
   .zip-result block, and .zip-note's top margin matches it (16px) so the
   note no longer hangs under a void. */
.qa-zip{ display:grid; gap:26px; }
.zip-call{ margin-top:16px; }
/* ZIP-list section (2026-11-06): zip_list now wraps its Call button in
   .zip-call like the checker card does, and inside the centred ZIP-list
   section (centred heading, centred chips, centred note) the wrapper
   centres the button under the note. Scoped to the section so the ZIP
   checker card's left-aligned .zip-call is untouched. */
[data-section="zip-list"] .zip-call{ text-align:center; }

/* Item B: mid_call_box used to emit class="call-box" — the HEADER phone
   box's class (display:none below 1024px, text-align:right above it), so
   the mid-article call block painted right-aligned on desktop and was
   invisible on phones. It now has its own class and renders as a
   deliberate centred callout wherever it appears (deep guide, emergency
   guide, blog article + end call box).
   Contrast consolidation (2026-11-06): the original dark-panel .mid-call
   block earlier in this sheet was never removed, so the cascade merged
   the two blocks per-property — the pale background below won (later,
   same specificity) while color:#fff on the container and on the h3
   survived from the dark block, painting the heading white on the pale
   tint (user screenshot, image-122). The dark block is deleted and this
   is now the SINGLE .mid-call rule set: pale tint card, ink text,
   brand-deep heading; the grid centring that used to come from the old
   block is declared here so the painted layout is unchanged. */
.mid-call{
  background:var(--tint); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; margin:32px 0; text-align:center; box-shadow:var(--shadow);
  display:grid; gap:12px; justify-items:center;
}
.mid-call h3{ color:var(--brand-deep); margin:0 0 6px; }
.mid-call p{ color:var(--muted); margin:0 0 16px; }
.mid-call .hero-call-line{ margin:14px 0 0; font-size:.9rem; }

/* Item C: "How {Place} Compares" — .compare-bento and the __value/__label/
   __versus/__source/__intro/__method classes had no rules at all, so the
   four stat cards stacked full-width with default paragraph margins.
   2×2 grid on desktop, one column on mobile, tightened internal rhythm.
   (The invisible meter fills are fixed in place above: .meter__fill is a
   <span>, and without display:block its width/height were ignored and the
   brand gradient painted a 0×0 box — only the pale track showed. That one
   declaration also restores the fills on the city Local Factors risk
   bars, which share .meter/.meter__fill.) */
.compare-bento{ display:grid; gap:18px; margin-top:26px; }
@media (min-width:768px){ .compare-bento{ grid-template-columns:repeat(2,1fr); } }
.compare-box__value{ font-size:1.65rem; font-weight:800; color:var(--brand-deep); line-height:1.1; margin:0 0 4px; }
.compare-box__label{ font-weight:600; margin:0 0 12px; }
.compare-box__versus{ margin:10px 0 0; font-size:.92rem; }
.compare-box__source{ margin:3px 0 0; font-size:.8rem; color:var(--muted); }
.compare-intro{ max-width:75ch; }
.compare-method{ margin-top:18px; color:var(--muted); font-size:.9rem; }

/* Item D (superseded by Item F, 2026-11-06): the related-guides rows
   briefly carried each post's own meta description (the shared
   .post-desc 2-line clamp) plus an arrow chip. The user then asked for
   the related sections to look like the HOMEPAGE guides section, so
   related_posts now emits .blog-grid/.post-card markup (part 17 rules)
   and the .post-row__* rules that stood here were deleted with the row
   markup. The descriptions survive inside the cards, still as
   .post-desc spans in the related-posts slice, so the entity check's
   overuse-only strip is unaffected. */

/* Item E: the Reviewed By avatar initial had NO rule — a bare letter in
   a plain <span>. Geometry matches the reviews UI's .rev-init (circle,
   flex-centred, weight 800); the fill is the brand plum with a white
   letter per the user's instruction, so it reads as an avatar icon. */
.reviewed-by__avatar{
  width:48px; height:48px; flex:none; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.05rem;
}