/* ============================================================
   Water Damage Removal Pros — rebuilt homepage (v3 mockup base)
   Design system: Manrope 700/800 headings / Inter body
   Reference 3-color system (Asif final decision, 2026-10-23):
   Petrol Navy #07293D (light #0A2E47, deep #041C2A) — structure
   Aqua Teal #0E7C86 (light #15939A, pale #77DDD0) — accent
   Crimson Heat #D92344 (gradient to #A41330) — ACTION only
   Cool-light backgrounds #F3F8FA family; card border #DFE9EC.
   Safety band uses the crimson family: rose tint #FCEDEF bg,
   crimson edge/title (--warn tokens, .safety-* selectors).
   Contrast (computed): white on #D92344 = 4.91:1 (AA pass);
   white on #A41330 = 7.74:1; #0E7C86 on white = 4.95:1;
   text-grade teal #0A6670 on white = 6.67:1; white on
   #07293D = 15.07:1; body ink #1E3444 = 12.88:1.
   One spacing scale: sections 96px desktop / 56px mobile
   ============================================================ */
:root{
  --navy:#0A2E47;
  --navy-deep:#07293D;
  --navy-ink:#041C2A;
  --cta:#D92344;
  --cta-hover:#A41330;
  --teal:#0E7C86;
  --teal-light:#15939A;
  --aqua:#77DDD0;
  --teal-deep:#0A6670;
  --warn:#D92344;
  --warn-line:#F0B7C3;
  --warn-ink:#A41330;
  --warn-text:#4A2530;
  --warn-sub:#8A3B4A;
  --ink:#1E3444;
  --muted:#3D5566;
  --soft:#F3F8FA;
  --soft-2:#E3EEF2;
  --line:#DFE9EC;
  --warn-bg:#FCEDEF;
  --green:#0E7C86;
  --radius:18px;
  --radius-lg:24px;
  --shadow:0 20px 50px rgba(4,28,42,.22);
  --shadow-md:0 14px 34px rgba(4,28,42,.13);
  --shadow-sm:0 2px 12px rgba(4,28,42,.07);
  --font-h:"Manrope",system-ui,sans-serif;
  --font-b:"Inter",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b);
  color:var(--ink);
  background:#fff;
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-h);color:var(--navy-deep);line-height:1.16;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.4vw,2.65rem);font-weight:800}
h3{font-size:1.22rem;font-weight:700}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.ic{width:1.15em;height:1.15em;flex:none}
section{scroll-margin-top:96px}

/* ---------- Buttons & action links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-h);font-weight:700;border-radius:999px;white-space:nowrap;
  padding:.95rem 1.7rem;font-size:1.05rem;line-height:1.1;min-height:52px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
}
.btn .ic{width:1.25em;height:1.25em}
.btn-call{
  color:#fff;
  background:var(--cta);
  box-shadow:0 10px 24px rgba(217,35,68,.35);
}
.btn-call:hover{background:var(--cta-hover);color:#fff;transform:translateY(-3px);box-shadow:0 16px 32px rgba(164,19,48,.32)}
.btn-ghost{
  color:#fff;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.06);
}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
.btn-lg{padding:1.1rem 2.1rem;font-size:1.15rem}
.btn-huge{
  width:100%;border-radius:999px;padding:1.1rem 1.6rem;justify-content:flex-start;gap:1.1rem;
}
.btn-huge .ic{width:2rem;height:2rem}
.btn-huge-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;gap:.2rem}
.btn-huge-label{font-family:var(--font-b);font-weight:600;font-size:1rem;opacity:.95}
.btn-huge-num{font-family:var(--font-h);font-weight:800;font-size:clamp(1.5rem,2.6vw,1.9rem);letter-spacing:.01em;white-space:nowrap}
.link-arrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-h);font-weight:700;font-size:1rem;color:var(--teal-deep);
  padding:.35rem 0;min-height:44px;
}
.link-arrow .ic{transition:transform .25s ease}
.link-arrow:hover .ic{transform:translateX(4px)}

/* ---------- Eyebrows / section heads ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-h);font-weight:700;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);
}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--teal)}
.eyebrow-light{color:#77DDD0}
.eyebrow-light::before{background:#77DDD0}
.section{padding:96px 0}
.section-head{max-width:780px;margin:0 auto 3.2rem;text-align:center}
.section-head h2{margin:.7rem 0 .8rem}
.section-head p{color:var(--muted);font-size:1.08rem}
.section-head .fine-print{max-width:60ch;margin-inline:auto}
.section-head.light h2{color:#fff}
.section-head .eyebrow{justify-content:center}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:60}
.top-strip{background:var(--navy-ink);color:#FFFFFF;font-size:.9rem}
.top-strip-in{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 0}
.ts-left{display:inline-flex;align-items:center;gap:.45rem;font-weight:600}
.ts-left .ic{color:#77DDD0;width:1em;height:1em}
.ts-short{display:none}
.ts-right{color:#C3DCE1;font-weight:500}
.masthead{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);transition:box-shadow .3s ease;
}
.masthead.scrolled{box-shadow:0 10px 30px rgba(7,41,61,.14)}
.masthead-in{display:flex;align-items:center;gap:2rem;padding:.85rem 0}
.brand{display:inline-flex;align-items:center;gap:.75rem;min-height:48px}
.brand-mark{
  width:48px;height:48px;border-radius:12px;flex:none;
  display:grid;place-items:center;box-shadow:0 8px 18px rgba(7,41,61,.30);
}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.08}
.brand-name{font-family:var(--font-h);font-weight:800;font-size:1.14rem;color:var(--navy-deep);letter-spacing:-.01em}
.brand-sub{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-top:.22rem}
.main-nav{display:flex;gap:1.4rem;margin-left:auto}
.main-nav a{font-weight:600;font-size:.96rem;color:var(--navy);position:relative;padding:.55rem 0;white-space:nowrap}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:.2rem;height:3px;width:0;border-radius:3px;
  background:var(--teal);transition:width .25s ease;
}
.main-nav a:hover::after{width:100%}
.call-pill{
  flex:none;white-space:nowrap;
  margin-left:.4rem;display:inline-flex;align-items:center;gap:.7rem;min-height:52px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.45rem 1.15rem .45rem .5rem;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease;
}
.call-pill:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.call-pill-ic{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
  background:var(--cta);
}
.call-pill-ic svg{width:21px;height:21px}
.call-pill-text{display:flex;flex-direction:column;line-height:1.12;white-space:nowrap}
.call-pill-label{font-size:.72rem;font-weight:600;color:var(--muted);white-space:nowrap}
.call-pill-num{font-family:var(--font-h);font-weight:800;font-size:1.13rem;color:var(--navy-deep);white-space:nowrap}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--navy-deep)}
.hero-home{overflow:hidden;background:linear-gradient(155deg,#0A2E47 0%,var(--navy-deep) 52%,var(--navy-ink) 100%)}
.hero-home::before,.hero-home::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.hero-home::before{width:640px;height:640px;top:-260px;right:-140px;background:radial-gradient(circle,rgba(14,124,134,.42) 0%,rgba(14,124,134,0) 65%)}
.hero-home::after{width:720px;height:720px;bottom:-340px;left:-200px;background:radial-gradient(circle,rgba(14,124,134,.28) 0%,rgba(14,124,134,0) 65%)}
.hero-media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;
  z-index:-2;
}
.hero-overlay{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(7,41,61,.30) 0%,rgba(7,41,61,0) 26%),
    linear-gradient(97deg,rgba(4,28,42,.94) 0%,rgba(7,41,61,.85) 44%,rgba(7,41,61,.52) 72%,rgba(7,41,61,.62) 100%);
}
.hero-in{position:relative;z-index:1}
.hero-copy h1 .grad{
  background:linear-gradient(92deg,#15939A 0%,#77DDD0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.hero-side{display:grid;align-content:start}
.hero-photo{
  border-radius:24px;overflow:hidden;line-height:0;
  border:8px solid rgba(4,28,42,.55);
  box-shadow:var(--shadow);
}
.hero-photo img{width:100%;height:300px;object-fit:cover}
.hero-side .call-card{margin:-3.4rem 0 0 2.4rem;position:relative;z-index:2}
.hero-micro{margin-top:1.35rem;color:#C3DCE1;font-size:.99rem;max-width:36rem;line-height:1.55}
.hero-micro a{color:#77DDD0;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hero-in{
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4.5vw,4rem);
  align-items:center;padding:5rem 0 7.5rem;
}
.hero-copy h1{
  color:#fff;font-weight:800;
  font-size:clamp(2.3rem,4.6vw,3.6rem);
  line-height:1.08;letter-spacing:-.015em;margin:1.4rem 0 1.2rem;
  text-wrap:balance;
  text-shadow:0 3px 22px rgba(4,28,42,.35);
}
.hero-sub{color:#EAF4F5;font-size:clamp(1.04rem,1.4vw,1.18rem);max-width:36rem;line-height:1.62}
.hero-hook{color:#C3DCE1;font-size:1.02rem;max-width:36rem;line-height:1.62;margin-top:1rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.hero-checks{
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;margin-top:2.1rem;
  color:#EAF4F5;font-weight:600;font-size:1rem;
}
.hero-checks li{display:inline-flex;align-items:center;gap:.5rem;min-height:32px}
.ic-check{color:#77DDD0;width:1.35em;height:1.35em}

/* Call card */
.call-card{
  background:#fff;border-radius:18px;padding:clamp(1.7rem,2.6vw,2.4rem);
  box-shadow:0 30px 60px rgba(4,28,42,.42);
}
.call-card-title{font-size:clamp(1.45rem,2.2vw,1.8rem);font-weight:800}
.call-card-micro{color:var(--muted);margin:.35rem 0 1.4rem;font-size:1.02rem}
.call-steps{list-style:none;margin-top:1.8rem;display:grid;gap:1.2rem}
.call-steps li{display:flex;gap:.95rem;align-items:center;font-size:1.05rem;color:var(--ink);line-height:1.45}
.step-num{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--soft-2);color:var(--navy);font-family:var(--font-h);font-weight:700;
  display:grid;place-items:center;font-size:1rem;
}
.call-card-foot{
  display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;margin-top:1.9rem;padding-top:1.4rem;
  border-top:1px solid var(--line);color:#3D5566;font-size:.95rem;font-weight:600;line-height:1.5;
}
.call-card-foot span{display:inline-flex;align-items:center;gap:.5rem;min-height:28px}
.call-card-foot .ic{color:var(--green);width:1.1em;height:1.1em}

/* Quick Answer overlap card */
.quick-wrap{position:relative;z-index:5;margin-top:-4rem}
.quick-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:2rem 2.2rem;max-width:920px;margin-inline:auto;
}
.quick-card p strong{color:var(--navy-deep)}
.quick-tag{
  display:inline-block;font-family:var(--font-h);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:var(--navy-deep);border-radius:999px;padding:.35rem .9rem;margin-bottom:.9rem;
}
.quick-card p{color:#3D5566;font-size:1.05rem;line-height:1.65}

/* ---------- What happened (compact problem rows) ---------- */
.problems{padding-top:80px}
.prob-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-inline:auto}
.prob-row{
  display:flex;align-items:center;gap:1.05rem;min-height:76px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.05rem 1.3rem;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.prob-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#A9D3D8}
.prob-ic{
  flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:var(--soft-2);color:var(--navy);
}
.prob-ic .ic{width:25px;height:25px}
.prob-text{display:flex;flex-direction:column;gap:.1rem}
.prob-text strong{font-family:var(--font-h);font-weight:700;font-size:1.06rem;color:var(--navy-deep);line-height:1.3}
.prob-text span{color:var(--muted);font-size:.93rem;line-height:1.4}
.prob-arrow{margin-left:auto;color:var(--teal);width:1.35em;height:1.35em;transition:transform .25s ease}
.prob-row:hover .prob-arrow{transform:translateX(4px)}

/* ---------- Services ---------- */
.services{background:var(--soft)}
.svc-primary{
  display:grid;grid-template-columns:1.05fr .95fr;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);margin-bottom:1.5rem;
}
.svc-primary-body{padding:clamp(1.8rem,3.2vw,2.6rem);display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.svc-tag{
  font-family:var(--font-h);font-weight:700;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--teal);
  border-radius:999px;padding:.35rem .9rem;
}
.svc-primary-body h3{font-size:1.6rem}
.svc-primary-body p{color:var(--muted);font-size:1.02rem}
.svc-primary-body .link-arrow{margin-top:auto}
.svc-primary-media{display:block;min-height:300px;position:relative;overflow:hidden}
.svc-primary-media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem}
.svc-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease;
}
.svc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.svc-featured{border-top:4px solid var(--teal);box-shadow:0 16px 36px rgba(4,28,42,.16)}
.svc-media{position:relative;display:block;height:240px;overflow:hidden}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.svc-card:hover .svc-media img{transform:scale(1.06)}
.svc-chip{
  position:absolute;top:1rem;left:1rem;width:50px;height:50px;border-radius:15px;
  background:linear-gradient(140deg,var(--navy),var(--navy-deep));color:#fff;
  display:grid;place-items:center;box-shadow:0 10px 22px rgba(7,41,61,.35);
}
.svc-chip .ic{width:25px;height:25px}
.svc-body{padding:1.6rem 1.7rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.svc-body h3{font-size:1.35rem}
.svc-body p{color:var(--muted);font-size:1rem;flex:1}
.mid-cta{
  margin:1.6rem 0 3rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  background:linear-gradient(90deg,#E8F3F4,#DCEDED);border:1.5px solid #B5D9DA;
  border-radius:var(--radius);padding:1.15rem 1.5rem;
}
.mid-cta p{color:var(--navy-deep);font-size:1.03rem;max-width:44rem}
.mid-cta .btn{padding:.8rem 1.4rem;font-size:1rem}

/* ---------- Signs ---------- */
.signs-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4.5vw,3.6rem);align-items:start}
.signs-copy h2{margin:.7rem 0 1rem}
.signs-copy p{color:var(--muted);margin-top:.9rem}
.sign-list{list-style:none;display:grid;gap:.7rem;margin-top:1rem}
.sign-list li{display:flex;gap:.65rem;align-items:flex-start;font-size:1rem;color:var(--ink);line-height:1.5}
.sign-list .ic{color:var(--green);width:1.1em;height:1.1em;margin-top:.25rem}
.example-note{
  margin-top:1.4rem;background:var(--soft);border-left:4px solid var(--teal);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.15rem 1.3rem;
  color:#3D5566 !important;font-size:.99rem;
}
.signs-media{display:grid;gap:1.4rem}
.signs-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;height:290px;object-fit:cover}
.signs-photo{position:relative;display:block;margin-bottom:1.8rem}
.signs-caption{
  position:absolute;left:18px;right:18px;bottom:-1.6rem;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-md);padding:.95rem 1.2rem;
  font-family:var(--font-h);font-weight:700;font-size:.99rem;color:var(--navy-deep);line-height:1.45;
}

/* ---------- Categories / why waiting ---------- */
.categories{background:linear-gradient(180deg,#fff,var(--soft) 130%)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem}
.panel{border-radius:var(--radius);padding:1.9rem 1.8rem;box-shadow:var(--shadow-sm)}
.panel-light{background:#EFF5F7;border:1px solid var(--line)}
.panel-dark{background:linear-gradient(160deg,var(--navy),var(--navy-deep));border:1px solid var(--navy-deep)}
.panel-title{font-size:1.18rem;margin-bottom:.8rem}
.panel-dark .panel-title{color:#fff}
.cmp-row{display:flex;gap:.95rem;align-items:flex-start;padding:.95rem 0;border-top:2px dotted rgba(7,41,61,.16)}
.cmp-row:first-of-type{border-top:0;padding-top:.4rem}
.panel-dark .cmp-row{border-top-color:rgba(255,255,255,.18)}
.cmp-dot{flex:none;width:12px;height:12px;border-radius:50%;margin-top:.42rem}
.dot-teal{background:var(--teal)}
.dot-steel{background:#2F6B84}
.dot-rust{background:#D92344}
.dot-aqua{background:#77DDD0}
.cmp-row strong{display:block;font-family:var(--font-h);font-weight:700;font-size:1.05rem;color:var(--navy-deep);line-height:1.35}
.panel-dark .cmp-row strong{color:#fff}
.cmp-row p{color:var(--muted);font-size:.98rem;line-height:1.55;margin-top:.2rem}
.panel-dark .cmp-row p{color:#A9CBD2}
.classes-intro{color:var(--muted);font-size:1.02rem;max-width:46rem;margin:1rem auto 0}

/* ---------- Why waiting (dark band, glass cards) ---------- */
.wait-dark{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-ink) 100%)}
.wait-title{color:#fff;text-align:center;font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:800}
.wait-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:2.6rem}
.glass{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:1.6rem 1.55rem;
}
.glass p{color:#C3DCE1;font-size:1rem;line-height:1.62}

/* ---------- Process ---------- */
.process-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,4.5vw,3.6rem);align-items:center}
.process-media{display:grid;gap:1.1rem;align-content:start}
.process-img-main{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;height:320px;object-fit:cover}
.process-img-card{
  width:100%;height:190px;object-fit:cover;display:block;
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
.steps-list{list-style:none}
.step-row{display:flex;gap:1.1rem;align-items:center;padding:1.05rem 0;border-bottom:2px dotted #C3D6DB}
.step-row:first-child{padding-top:.2rem}
.step-row:last-child{border-bottom:0}
.step-n{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy-deep);color:#fff;font-family:var(--font-h);font-weight:800;font-size:1.05rem;
}
.step-row p{color:var(--muted);font-size:1.03rem;line-height:1.55}
.process-note{color:var(--muted);font-size:1.05rem;margin-top:1.3rem}
.fine-print{font-style:italic}
.equip{margin-top:3.6rem;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.8rem,3.4vw,2.6rem)}
.equip-title{font-size:1.35rem;margin-bottom:1.6rem;text-align:center}
.equip-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.2rem}
.equip-item{display:flex;gap:1rem}
.equip-ic{
  flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:#fff;color:var(--teal-deep);box-shadow:var(--shadow-sm);
}
.equip-ic .ic{width:25px;height:25px}
.equip-item strong{display:block;font-family:var(--font-h);color:var(--navy-deep);font-size:1.02rem;line-height:1.35}
.equip-item p{color:var(--muted);font-size:.95rem;margin-top:.2rem}

/* ---------- Safety ---------- */
.safety-card{
  background:var(--warn-bg);border:1.5px solid var(--warn-line);border-left:6px solid var(--warn);border-radius:var(--radius-lg);
  padding:clamp(1.8rem,3.6vw,2.8rem);box-shadow:var(--shadow-sm);
}
.safety-head{display:flex;gap:1.3rem;align-items:flex-start;margin-bottom:1.8rem}
.safety-ic{
  flex:none;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:var(--warn);color:#fff;box-shadow:0 10px 22px rgba(217,35,68,.30);
}
.safety-ic .ic{width:29px;height:29px}
.safety-head h2{font-size:clamp(1.6rem,2.8vw,2.1rem);color:var(--warn-ink)}
.safety-head p{color:var(--warn-sub);margin-top:.4rem;max-width:46rem}
.safety-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.safety-col{background:rgba(255,255,255,.75);border-radius:var(--radius);padding:1.5rem 1.6rem}
.safety-col h3{font-size:1.12rem;margin-bottom:1rem;color:var(--warn-ink)}
.safety-col ul{list-style:none;display:grid;gap:.8rem}
.safety-col li{display:flex;gap:.65rem;align-items:flex-start;font-size:.99rem;color:var(--warn-text);line-height:1.5}
.safety-col.do .ic{color:var(--green);width:1.05em;height:1.05em;margin-top:.25rem}
.safety-col.stop .ic{color:#A41330;width:1.05em;height:1.05em;margin-top:.25rem}
.safety-foot{margin-top:1.6rem;color:var(--warn-sub);font-weight:600}

/* ---------- What to ask ---------- */
.ask{background:var(--soft)}
.ask-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:1.75rem;align-items:start}
.ask-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.7rem,3vw,2.3rem);box-shadow:var(--shadow-sm)}
.ask-list{list-style:none;display:grid;gap:1.05rem}
.ask-list li{display:flex;gap:.85rem;align-items:flex-start;font-size:1.02rem;line-height:1.55;color:#3D5566}
.ask-list strong{font-family:var(--font-h);font-weight:700;color:var(--navy-deep)}
.ask-ck{
  flex:none;width:26px;height:26px;border-radius:50%;margin-top:.1rem;
  background:var(--teal);color:#fff;display:grid;place-items:center;
}
.ask-ck svg{width:14px;height:14px}
.ask-list li > .ic{color:var(--green);width:1.1em;height:1.1em;margin-top:.25rem}
.ask-foot{margin-top:1.4rem;padding-top:1.15rem;border-top:1px solid var(--line);color:var(--muted);font-size:.97rem}
.ask-media{position:sticky;top:110px}
.ask-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;height:560px;object-fit:cover}

/* ---------- How calling works (short, dark) ---------- */
.how{background:#fff}
.how-card{
  max-width:920px;margin-inline:auto;background:#fff;
  border:1px solid var(--line);border-left:5px solid var(--teal);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:clamp(1.9rem,3.6vw,2.7rem);
}
.how-card .section-head{margin-bottom:2.2rem}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.how-step{display:flex;gap:1rem;align-items:flex-start}
.how-num{
  flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy-deep);color:#fff;
  font-family:var(--font-h);font-weight:800;font-size:1.15rem;
  box-shadow:0 10px 22px rgba(7,41,61,.30);
}
.how-step p{color:var(--muted);font-size:1.02rem;line-height:1.6}
.how-step strong{color:var(--navy-deep);font-family:var(--font-h);font-weight:700}

/* ---------- Areas ---------- */
.areas-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1.5rem;align-items:stretch}
.areas{background:var(--soft)}
.areas-map{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.map-frame{position:relative;height:100%;min-height:400px;background:linear-gradient(150deg,#DCE9ED,#C7DBE1)}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
.areas-side{display:flex;flex-direction:column;gap:1.5rem}
.areas-side img{border-radius:var(--radius-lg);box-shadow:var(--shadow);height:215px;width:100%;object-fit:cover}
.zip-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.7rem;box-shadow:var(--shadow-sm);flex:1}
.zip-block h3{font-size:1.15rem;margin-bottom:1rem}
.zip-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem}
.zip-chips li{
  font-family:var(--font-h);font-weight:700;font-size:.98rem;color:var(--navy-deep);
  background:#EFF5F7;border:1px solid var(--line);
  border-radius:999px;padding:.45rem 1rem;letter-spacing:.04em;
}
.zip-note{margin-top:1.2rem;color:var(--muted);font-size:.99rem}
.areas-link{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-h);font-weight:700;
  font-size:1rem;color:var(--teal-deep);padding:.3rem 0;min-height:44px;
}
.areas-link .ic{transition:transform .25s ease}
.areas-link:hover .ic{transform:translateX(4px)}

/* ---------- Rain prep ---------- */
.rain{background:var(--soft)}
.rain-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4.5vw,3.6rem);align-items:center}
.rain-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);width:100%;height:320px;object-fit:cover}
.rain-copy h2{margin:.7rem 0 1rem}
.rain-copy p{color:var(--muted)}
.rain-copy p + p{margin-top:.9rem;font-weight:600;color:#3D5566}

/* ---------- Local know-how ---------- */
.know{background:#EDF3F5}
.know-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.know-card{
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--teal);
  border-radius:var(--radius);padding:1.7rem 1.6rem;box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease;
}
.know-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.know-card h3{font-size:1.18rem;margin-bottom:.55rem}
.know-card p{color:var(--muted);font-size:.99rem;line-height:1.6}

/* ---------- FAQ ---------- */
.section.faq{padding-bottom:56px}
.faq-wrap{max-width:860px}
.faq-list{display:grid;gap:.9rem}
.faq-item{background:#EAF1F4;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:background .25s ease,box-shadow .25s ease}
.faq-item.open{background:#E2EDF0;box-shadow:var(--shadow-sm)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;cursor:pointer;text-align:left;min-height:56px;
  font-family:var(--font-h);font-weight:600;font-size:1.06rem;color:var(--navy-deep);
  padding:1.1rem 1.5rem;
}
.faq-chev{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy-deep);color:#fff;transition:transform .35s ease,background .35s ease;
}
.faq-chev .ic{width:17px;height:17px}
.faq-item.open .faq-chev{transform:rotate(45deg);background:var(--navy);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease}
.faq-a p{padding:0 1.5rem 1.4rem;color:var(--muted);font-size:1rem}
.faq-a a{font-weight:600;color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- Closing CTA ---------- */
.cta-band{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-deep)}
.cta-home{background:linear-gradient(120deg,var(--cta) 0%,var(--cta-hover) 100%)}
.cta-bg{
  position:absolute;inset:0;z-index:-1;
  background:url("assets/img/cta-background-water-texture-dark.webp") center/cover no-repeat;
}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,28,42,.88),rgba(7,41,61,.72) 55%,rgba(4,28,42,.85))}
.cta-in{position:relative;text-align:center;padding:64px 0;max-width:820px}
.btn-white{background:#fff;color:var(--cta);box-shadow:0 12px 26px rgba(4,28,42,.25)}
.btn-white:hover{background:#FCEDEF;color:var(--cta-hover);transform:translateY(-2px)}
.cta-in h2{color:#fff;font-size:clamp(2rem,4vw,3rem);margin:0 auto 1rem;max-width:22ch;text-wrap:balance}
.cta-in p{color:#FFF5F6;font-size:1.1rem;max-width:44rem;margin:0 auto 2rem}
.cta-micro{display:block;margin-top:1.1rem;color:#FFFFFF;font-size:.95rem;font-weight:600}

/* ---------- Disclaimer strip ---------- */
.disclaimer{background:var(--soft);border-top:1px solid var(--line);padding:1.7rem 0}
.disclaimer p{
  max-width:900px;margin-inline:auto;text-align:center;
  font-size:.84rem;line-height:1.65;color:var(--muted);
}

/* ---------- Footer ---------- */
.site-footer{background:linear-gradient(180deg,var(--navy-deep),var(--navy-ink));color:#C3DCE1}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:2.6rem;padding:4.2rem 0 2.6rem}
.brand-footer .brand-name{color:#fff}
.brand-sub-light{color:#77DDD0}
.footer-about{margin-top:1.2rem;max-width:26rem;font-size:.99rem;color:#A7C6CC}
.footer-addr{margin-top:1rem;font-size:.95rem;color:#D6E8EA;font-weight:600}
.footer-phone{display:inline-flex;align-items:center;gap:.55rem;margin-top:.8rem;color:#77DDD0;font-family:var(--font-h);font-weight:700;font-size:1.1rem;min-height:44px}
.footer-col h3{color:#fff;font-size:1.05rem;margin-bottom:1.1rem}
.footer-col a{display:block;padding:.42rem 0;color:#C3DCE1;font-size:.98rem;transition:color .2s ease,transform .2s ease}
.footer-col a:hover{color:#fff;transform:translateX(3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14)}
.footer-bottom-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;padding:1.3rem 0;font-size:.9rem;color:#93B4BB}
.footer-bottom a{color:#D6E8EA;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Floating call + mobile bar ---------- */
.float-call{
  position:fixed;right:26px;bottom:26px;z-index:80;width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:var(--cta);
  box-shadow:0 16px 34px rgba(217,35,68,.45);
  animation:pulse 2.6s ease-out infinite;
  transition:transform .25s ease;
}
.float-call svg{width:28px;height:28px}
.float-call:hover{transform:scale(1.08)}
@keyframes pulse{
  0%{box-shadow:0 16px 34px rgba(217,35,68,.45),0 0 0 0 rgba(217,35,68,.4)}
  70%{box-shadow:0 16px 34px rgba(217,35,68,.45),0 0 0 20px rgba(217,35,68,0)}
  100%{box-shadow:0 16px 34px rgba(217,35,68,.45),0 0 0 0 rgba(217,35,68,0)}
}
.mobile-callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  align-items:center;justify-content:center;gap:.6rem;min-height:60px;
  background:var(--cta);color:#fff;white-space:nowrap;
  font-family:var(--font-h);font-weight:700;font-size:1.08rem;
  padding:.9rem .8rem calc(.9rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 26px rgba(7,41,61,.3);
}

/* ---------- Reveal animation ----------
   Content is VISIBLE by default (no-JS safe). JS adds .pre ONLY to
   elements still below the viewport, then reveals them on scroll.
   Nothing ever rests faded; reduced motion disables the effect. */
.reveal{opacity:1;transform:none}
.reveal.pre{opacity:0;transform:translateY(14px)}
.reveal.pre.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
@media (prefers-reduced-motion:reduce){
  .reveal.pre{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .float-call{animation:none}
}

/* ---------- Desktop nav fit (961-1240px) ----------
   Brand lockup + 6 nowrap links + call pill must share one line
   down to a 1024px viewport: tighten gaps and type in this band
   instead of hiding the nav. */
@media (min-width:961px) and (max-width:1240px){
  .masthead-in{gap:1.15rem}
  .brand-name{font-size:1.02rem}
  .brand-sub{font-size:.62rem;letter-spacing:.18em}
  .main-nav{gap:.95rem}
  .main-nav a{font-size:.92rem}
  .call-pill{margin-left:0;padding:.4rem .95rem .4rem .42rem}
  .call-pill-label{font-size:.68rem}
  .call-pill-num{font-size:1.05rem}
}
/* Tightest desktop band (961-1080px): extra compression so the
   one-line fit holds with margin at a 1024px-class viewport. */
@media (min-width:961px) and (max-width:1080px){
  .masthead-in{gap:.9rem}
  .brand-name{font-size:.98rem}
  .main-nav{gap:.8rem}
  .call-pill-label{font-size:.64rem}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .prob-list{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .compare,.wait-grid,.know-grid,.ask-grid,.how-steps{grid-template-columns:1fr}
  .ask-media{position:static}
  .ask-media img{height:280px}
  .hero-photo img{height:230px}
  .hero-side .call-card{margin:-2.4rem 0 0 0}
  .hero-in{grid-template-columns:1fr;padding-top:3rem;padding-bottom:7rem}
  .call-card{max-width:560px}
  .quick-wrap{margin-top:-3.6rem}
  .quick-card{padding:1.6rem 1.5rem}
  .prob-list,.svc-grid,.signs-grid,.process-grid,.areas-grid,.safety-cols,.rain-grid{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .class-grid{grid-template-columns:1fr 1fr}
  .svc-primary{grid-template-columns:1fr}
  .svc-primary-media{min-height:230px;order:-1}
  .svc-primary-media img{height:230px}
  .process-img-main{height:280px}
  .process-img-card{height:170px}
  .equip-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  .ts-right{display:none}
  .map-frame{min-height:320px}
}
@media (max-width:768px){
  .masthead{position:static}
  .section{padding:56px 0}
  .problems{padding-top:56px}
  body{padding-bottom:66px}
  .mobile-callbar{display:flex}
  .float-call{display:none}
  .call-pill-label{display:none}
  .call-pill{padding:.4rem .9rem .4rem .4rem}
  .call-pill-num{font-size:1rem}
  .brand-name{font-size:1rem}
  .brand-mark{width:42px;height:42px}
  .mid-cta{flex-direction:column;align-items:stretch;text-align:center}
  .mid-cta .btn{width:100%}
  .hero-ctas .btn{flex:1;justify-content:center}
  .footer-grid{grid-template-columns:1fr;padding:3rem 0 2.2rem}
  .wait-card{flex-direction:column}
  .signs-media img{height:230px}
  .cta-in{padding:44px 0}
}
/* ---------- Service pages (batch 1) ---------- */
.crumbs{background:var(--soft);border-bottom:1px solid var(--line)}
.crumbs-in{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;padding:.7rem 0;font-size:.9rem;color:var(--muted)}
.crumbs a{color:var(--teal-deep);font-weight:600}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs .sep{color:#8FA9B0}
.crumbs [aria-current]{color:var(--navy-deep);font-weight:600}
.hero-svc .hero-in{padding:3.4rem 0 6.4rem}
.hero-svc .hero-copy h1{font-size:clamp(2.05rem,4vw,3.15rem)}
.svc-wrap{padding:96px 0;background:#fff}
.svc-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2.8rem;align-items:start}
.svc-block{margin-bottom:3rem}
.svc-block:last-child{margin-bottom:0}
.svc-block h2{margin:.7rem 0 1rem;font-size:clamp(1.7rem,3vw,2.25rem)}
.svc-block h3{margin:1.5rem 0 .45rem}
.svc-block p{color:var(--muted);font-size:1.03rem}
.svc-block p + p{margin-top:.9rem}
.svc-block ul.plain-list{list-style:none;display:grid;gap:.65rem;margin-top:1rem}
.svc-block ul.plain-list li{display:flex;gap:.65rem;align-items:flex-start;font-size:1.01rem;color:var(--ink);line-height:1.55}
.svc-block ul.plain-list .ic{color:var(--teal);width:1.1em;height:1.1em;margin-top:.25rem}
.img-band{margin-top:1.6rem}
.img-band img{width:100%;height:340px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.img-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.6rem}
.img-duo img{width:100%;height:250px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.info-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:1.6rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.97rem}
.info-table th{background:var(--navy);color:#fff;font-family:var(--font-h);font-weight:700;text-align:left;padding:.85rem 1.05rem;line-height:1.35}
.info-table td{padding:.85rem 1.05rem;color:#3D5566;line-height:1.5;vertical-align:top;border-top:1px solid var(--line)}
.info-table tbody tr:nth-child(even) td{background:var(--soft)}
.steps-panel{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.2rem);margin-top:1.4rem}
.steps-panel .step-item + .step-item{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.steps-panel h3{margin:0 0 .4rem;font-size:1.12rem}
.steps-panel p{font-size:1rem}
.rail{position:sticky;top:108px;display:grid;gap:1.3rem}
.rail-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.7rem 1.6rem;box-shadow:var(--shadow)}
.rail-card .call-card-title{font-size:1.35rem}
.rail-card .call-steps{gap:.95rem;margin-top:1.4rem}
.rail-card .call-steps li{font-size:.99rem}
.rail-zips{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm)}
.rail-zips h3{font-size:1.02rem;margin-bottom:.9rem}
.rail-zips .zip-chips li{font-size:.86rem;padding:.38rem .8rem}
.svc-faq{max-width:none}
@media (max-width:1080px){
  .svc-layout{grid-template-columns:1fr}
  .rail{display:none}
}
@media (max-width:640px){
  .hero-svc .hero-in{padding-top:2.2rem;padding-bottom:5.6rem}
  .svc-wrap{padding:52px 0 64px}
  .img-band img{height:230px}
  .img-duo{grid-template-columns:1fr}
  .img-duo img{height:210px}
  .info-table{font-size:.9rem}
  .info-table th,.info-table td{padding:.7rem .8rem}
}

@media (max-width:640px){
  /* Compact mobile header (B11) */
  .masthead-in{gap:.7rem;padding:.55rem 0}
  .brand{gap:.55rem;min-width:0}
  .brand-mark{width:38px;height:38px;border-radius:11px}
  .brand-mark svg{width:100%;height:100%}
  .brand-name{font-size:.94rem;line-height:1.15}
  .brand-sub{display:none}
  .call-pill{padding:.35rem .8rem .35rem .35rem;min-height:46px}
  .call-pill-ic{width:36px;height:36px}
  .call-pill-ic svg{width:18px;height:18px}
  .call-pill-num{font-size:.95rem}
  /* Tighter mobile hero (B7) */
  h2{font-size:1.58rem}
  .hero-in{padding-top:2.4rem;padding-bottom:5.8rem}
  .hero-copy h1{font-size:2.02rem;line-height:1.12;margin:1rem 0 .9rem}
  .hero-sub{font-size:1rem;line-height:1.58}
  .hero-hook{display:none}
  .hero-ctas{margin-top:1.5rem;gap:.7rem}
  .hero-ctas .btn{padding:.95rem .8rem;font-size:1rem}
  .hero-checks{margin-top:1.4rem;gap:.3rem 1.1rem;font-size:.94rem}
  .btn-huge-num{font-size:1.38rem}
  .btn-huge{padding:1rem 1.1rem;gap:.85rem}
  .class-grid{grid-template-columns:1fr}
  .cta-in{padding:40px 0}
}

/* ---------- Service elevation: dark risks panel + photo captions ---------- */
.svc-block.risks{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-ink) 100%);
  border-radius:var(--radius-lg);padding:clamp(1.7rem,3vw,2.3rem);
  box-shadow:var(--shadow-md);
}
.svc-block.risks h2{color:#fff}
.svc-block.risks p{color:#C3DCE1}
.svc-block.risks .eyebrow{color:#77DDD0}
.svc-block.risks .eyebrow::before{background:#77DDD0}
.img-band.captioned{position:relative;margin-bottom:2.6rem}
.img-cap{
  position:absolute;left:18px;right:18px;bottom:-1.5rem;z-index:2;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-md);padding:.9rem 1.15rem;
  font-family:var(--font-h);font-weight:700;font-size:.96rem;color:var(--navy-deep);line-height:1.45;
}
.duo-photo{position:relative;display:block}
.duo-photo img{width:100%;height:250px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.duo-photo .img-cap{bottom:-1.5rem}
.img-duo.has-cap{margin-bottom:2.6rem}

/* ---------- Prose pages (privacy / terms) ---------- */
.prose-wrap{padding:80px 0 96px;background:#fff}
.prose{max-width:820px;margin-inline:auto}
.prose h1{font-size:clamp(2.1rem,4vw,3rem);margin-bottom:1rem}
.prose .lede{color:var(--muted);font-size:1.12rem;margin-bottom:2.6rem}
.prose h2{font-size:1.45rem;margin:2.4rem 0 .7rem}
.prose p{color:#3D5566;font-size:1.03rem;margin-bottom:1rem}
.prose .updated{margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.95rem}

/* ---------- Service areas page ---------- */
.zip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.zip-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm);
}
.zip-card .zip-num{font-family:var(--font-h);font-weight:800;font-size:1.7rem;color:var(--navy-deep);letter-spacing:.02em}
.zip-card p{color:var(--muted);font-size:.98rem;margin-top:.3rem;line-height:1.5}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;margin-top:2rem}
.mini-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.7rem 1.5rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.6rem;
  transition:transform .3s ease,box-shadow .3s ease;
}
.mini-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.mini-card h3{font-size:1.3rem}
.mini-card p{color:var(--muted);font-size:1rem;flex:1}
@media (max-width:900px){.zip-grid{grid-template-columns:1fr 1fr}.mini-grid{grid-template-columns:1fr}}
@media (max-width:560px){.zip-grid{grid-template-columns:1fr}}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;margin-top:2rem;align-items:start}
.how-card-wide{max-width:none}
.info-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.7rem;box-shadow:var(--shadow-sm);
}
.info-card h3{font-size:1.2rem;margin-bottom:.7rem}
.info-card p{color:var(--muted);font-size:1rem}
.info-card .addr{color:var(--navy-deep);font-family:var(--font-h);font-weight:700;font-size:1.08rem;line-height:1.5}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ---------- 404 ---------- */
.notfound{padding:110px 0 96px;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-ink) 100%);text-align:center}
.notfound h1{color:#fff;font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1rem}
.notfound p{color:#C3DCE1;max-width:38rem;margin:0 auto 2.2rem;font-size:1.1rem}
.notfound .nf-ctas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.helpful{padding:80px 0 96px}
.helpful .prob-list{max-width:920px}

/* ---------- Mobile menu: fixed button + panel (≤960px only) ----------
   Hidden entirely on desktop. On mobile the button is position:fixed
   at the top-right, ABOVE the header, and stays visible while
   scrolling; the panel opens directly beneath it. In this range the
   masthead is non-sticky and the top strip's right segment is hidden,
   so the button never collides with the header call pill or the
   strip's ZIP line. The bottom call bar stays the only other fixed
   element. */
.mmenu-btn,.mmenu-panel{display:none}
@media (max-width:960px){
  .main-nav{display:none}
  .masthead{position:static}
  .ts-right{display:none}
  .mmenu-btn{
    display:grid;place-items:center;
    position:fixed;top:10px;right:12px;z-index:1200;
    width:44px;height:44px;padding:0;border:0;cursor:pointer;
    background:var(--navy-deep);color:#fff;border-radius:12px;
    box-shadow:0 10px 24px rgba(4,28,42,.35);
  }
  .mmenu-btn svg{width:24px;height:24px}
  .mmenu-btn:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
  .mmenu-panel{
    position:fixed;top:62px;right:12px;z-index:1200;
    width:min(264px,calc(100vw - 24px));
    background:var(--navy-deep);border-radius:14px;
    box-shadow:0 22px 44px rgba(4,28,42,.42);
    padding:.45rem;
  }
  .mmenu-panel.open{display:block}
  .mmenu-panel a{
    display:flex;align-items:center;min-height:44px;
    padding:.6rem .85rem;border-radius:9px;
    color:#fff;font-weight:600;font-size:1rem;line-height:1.3;
  }
  .mmenu-panel a:hover,.mmenu-panel a:focus-visible{background:rgba(255,255,255,.1)}
  .mmenu-sep{display:block;height:1px;background:rgba(255,255,255,.14);margin:.4rem .6rem}
}

/* ---------- Mobile polish: strip clearance + small-phone wordmark ----------
   (a) ≤960px: the fixed menu button floats over the top strip's right
   end and the strip's left text slid beneath it and clipped mid-word.
   Reserve 64px on the strip's content box so the text truncates
   cleanly BEFORE the button, never under it.
   (b) ≤480px: the wordmark wrapped into 4 stacked lines, making the
   mobile header tall. The lockup now flex-grows into the space beside
   the call pill (which keeps flex:none + its nowrap number), and the
   wordmark is set compact (17px / 1.12) so it wraps in at most
   3 lines. These blocks sit last so they win the cascade. */
@media (max-width:960px){
  .top-strip-in{padding-right:64px}
  .ts-left{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Homepage only (.ts-swap): the long strip line truncated mid-word next to
     the fixed menu button at phone widths — swap to the short line in full. */
  .ts-swap .ts-full{display:none}
  .ts-swap .ts-short{display:inline}
}
@media (max-width:480px){
  .brand{flex:1 1 auto;min-width:0}
  .brand-text{min-width:0}
  .brand-name{font-size:1.06rem;line-height:1.12;letter-spacing:0}
  .call-pill{flex:none}
}

/* ---------- Mobile: info tables become stacked row-cards (≤700px) ----------
   The 4-column symptom | source | safe-check | when-to-call tables squeezed
   all four columns into phone width: text wrapped into very narrow strips
   and rows grew extremely tall. At ≤700px each row is now a single card and
   every cell shows its column label (data-label, taken from the table's own
   headers) above its text. ≥701px is untouched — the table renders exactly
   as before. This block sits last so it wins the cascade. */
@media (max-width:700px){
  .info-table{display:block;border:none;border-radius:0;overflow:visible;background:transparent;font-size:.95rem}
  .info-table thead{display:none}
  .info-table tbody{display:block}
  .info-table tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.05rem 1.15rem;margin:0 0 1rem}
  .info-table td{display:block;padding:0;border-top:none;background:transparent;color:#3D5566;font-size:.95rem;line-height:1.55}
  .info-table tbody tr:nth-child(even) td{background:transparent}
  .info-table td + td{margin-top:.85rem}
  .info-table td::before{content:attr(data-label);display:block;font-family:var(--font-h);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#0A6670;line-height:1.3;margin-bottom:.25rem}
}

/* ---------- Desktop sticky header (>=961px) ----------
   The header wrapper sticks with the 41px utility strip scrolled off-screen,
   so only the masthead (logo + nav + call pill, 86px) stays parked at the top.
   The masthead's own sticky is disabled here because its parent box gave it
   no room to travel. Mobile (<=960px) keeps the static masthead per the
   standing rule — menu button + bottom call bar only. */
@media (min-width:961px){
  .site-header{position:sticky;top:-41px;z-index:60}
  .masthead{position:static}
}

/* ---------- Desktop Services dropdown (>=961px) ----------
   The Services nav item carries a CSS-only dropdown: opens on hover and on
   :focus-within (keyboard), no JS. The parent link keeps its normal href
   and navigation. An invisible ::before bridge spans the .55rem offset so
   the panel never closes while the cursor travels down to it. Mobile
   (<=960px) is untouched — .main-nav is display:none there and the mobile
   menu panel is separate markup. */
@media (min-width:961px){
  .nav-drop-wrap{position:relative}
  .main-nav .nav-drop-parent{display:inline-flex;align-items:center;gap:.32rem}
  .nav-caret{width:13px;height:13px;flex:none;transition:transform .18s ease}
  .nav-drop-wrap:hover .nav-caret,
  .nav-drop-wrap:focus-within .nav-caret{transform:rotate(180deg)}
  .nav-drop{
    position:absolute;left:0;top:calc(100% + .55rem);z-index:80;
    width:320px;padding:.6rem;
    background:#fff;border:1px solid var(--line);border-radius:17px;
    box-shadow:0 18px 42px rgba(7,41,61,.16);
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
  }
  .nav-drop::before{content:"";position:absolute;left:0;right:0;top:-.8rem;height:.8rem}
  .nav-drop-wrap:hover .nav-drop,
  .nav-drop-wrap:focus-within .nav-drop{
    opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity .16s ease,transform .16s ease;
  }
  .main-nav .nav-drop a{
    display:flex;flex-direction:column;gap:.12rem;
    padding:.55rem .7rem;border-radius:11px;white-space:normal;
  }
  .main-nav .nav-drop a::after{display:none}
  .main-nav .nav-drop a:hover,
  .main-nav .nav-drop a:focus-visible{background:var(--soft)}
  .nd-name{font-family:var(--font-h);font-weight:700;font-size:.95rem;color:var(--navy-deep);line-height:1.25}
  .main-nav .nav-drop a:hover .nd-name,
  .main-nav .nav-drop a:focus-visible .nd-name{color:var(--teal-deep)}
}
@media (min-width:961px) and (prefers-reduced-motion:reduce){
  .nav-drop,.nav-caret{transition:none}
}

/* ---------- Areas nav dropdown (wide 2-column) + neighborhood links ---------- */
@media (min-width:961px){
  .nav-drop.nav-drop-areas{
    left:auto;right:-.4rem;width:560px;max-width:calc(100vw - 2rem);
    max-height:82vh;overflow-y:auto;
    display:grid;grid-template-columns:1fr 1fr;column-gap:.5rem;
  }
}
.hood-block{margin-top:2rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.2rem);box-shadow:var(--shadow-sm)}
.hood-block h3{font-size:1.35rem;margin-bottom:.6rem}
.hood-block p{color:var(--muted);max-width:820px}
.hood-links{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:1.3rem}
.hood-links a{display:block;padding:.62rem .85rem;border:1px solid var(--line);border-radius:11px;font-family:var(--font-h);font-weight:700;font-size:.93rem;color:var(--navy-deep);background:var(--soft);transition:background .2s ease,color .2s ease,transform .2s ease}
.hood-links a:hover{background:#fff;color:var(--teal-deep);transform:translateY(-1px)}
@media (max-width:900px){.hood-links{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.hood-links{grid-template-columns:1fr}}
@media (max-width:960px){
  .mmenu-panel{max-height:calc(100dvh - 74px);overflow-y:auto}
  .mmenu-label{display:block;padding:.55rem .85rem .05rem;color:#93B4BB;font-family:var(--font-h);font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
}