:root{
  /* field — from the badge's shield */
  --navy:#12253D;
  --navy-deep:#09182B;
  --navy-soft:#24384F;
  --steel:#4D5F78;

  /* water — the droplet */
  --water:#7FB2DE;
  --water-pale:#DCE6F2;
  --blue-ink:#2B5586;          /* readable blue for light backgrounds */
  --blue-glow:rgba(127,178,222,.30);

  /* gold — the star and the studs. Reserved for action. */
  --gold:#C08A45;
  --gold-hi:#EDBE83;
  --gold-deep:#8C5C22;
  --gold-glow:rgba(192,138,69,.34);

  /* chrome — the badge's brushed metal */
  --chrome-1:#F7F4F1;
  --chrome-2:#D8D2D0;
  --chrome-3:#97908F;
  --chrome-hi:#F2ECE9;
  --cream:#F5F3EE;

  --ink:#121D38;              /* body text — deliberately independent of --navy */
  --muted:#5C6472;
  --line:#DFDACF;
  --bg:#FAF8F3;
  --bg-alt:#EDE9E1;
  --surface:#FFFDF8;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(10,17,40,.06),0 2px 8px rgba(10,17,40,.06);
  --shadow-md:0 4px 12px rgba(10,17,40,.08),0 14px 36px rgba(10,17,40,.10);
  --shadow-lg:0 10px 30px rgba(10,17,40,.12),0 30px 70px rgba(10,17,40,.16);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* the header is sticky, so anchor jumps must stop below it */
[id]{scroll-margin-top:118px}
@media(max-width:640px){[id]{scroll-margin-top:94px}}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.025em;font-weight:800}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:16px;letter-spacing:-.01em;
  padding:15px 26px;border-radius:11px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-call{
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 48%,var(--gold-deep) 100%);
  color:var(--navy-deep);
  box-shadow:0 2px 0 rgba(255,255,255,.38) inset,0 8px 22px var(--gold-glow);
}
.btn-call:hover{box-shadow:0 2px 0 rgba(255,255,255,.45) inset,0 12px 30px var(--gold-glow)}
/* Gold sits at L*61 and the light grounds sit at L*90 — only 2.4:1 apart, and both
   are warm hues (73deg vs 89deg), so on cream the button goes soft-on-soft and loses
   its edge (also below the 3:1 WCAG 1.4.11 minimum for a control boundary).
   On navy the same gold is 5.1:1 with 201deg of hue opposition and needs nothing.
   So: ring the button in navy wherever it sits on a light background. */
header .btn-call,
#why .btn-call,
.quote-card .btn-call{
  border:2px solid var(--navy);
  box-shadow:0 2px 0 rgba(255,255,255,.38) inset,0 6px 16px rgba(18,37,61,.22);
}
header .btn-call:hover,
#why .btn-call:hover,
.quote-card .btn-call:hover{
  box-shadow:0 2px 0 rgba(255,255,255,.45) inset,0 9px 22px rgba(18,37,61,.30);
}
.btn-ghost{
  background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#26355A}
.btn-lg{padding:18px 32px;font-size:18px}
.btn-block{width:100%}

/* ---------- top utility bar ---------- */
.utility{
  background:var(--navy-deep);color:#B9C3D4;font-size:13.5px;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:40px}
.utility ul{display:flex;gap:22px;margin:0;padding:0;list-style:none}
.utility li{display:flex;align-items:center;gap:7px}
.utility svg{flex:none;opacity:.9}
.utility .util-phone{color:#fff;font-weight:700;text-decoration:none;letter-spacing:-.01em}
.utility .util-phone:hover{color:var(--water)}
@media(max-width:900px){.utility{display:none}}

/* ---------- header ---------- */
/* The badge is navy-on-navy, so it vanished on a dark bar. The header is light:
   the shield's own navy field and chrome rim both read against warm cream, and
   the gold call button gets more contrast than it had on navy.
   Tone is pulled from the logo render's taupe backdrop, lightened: the true
   taupe (#AEA192) drops the gold button to 1.19:1 against the bar and nav text
   to 3.46:1 (below AA). #E9E3D8 keeps the warm family and stays readable. */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(233,227,216,.96);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid #D3CBBC;
  box-shadow:0 6px 22px rgba(10,17,40,.07);
}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--chrome-3) 22%,var(--chrome-3) 78%,transparent);
  opacity:.35;
}
header .wrap{display:flex;align-items:center;gap:22px;height:100px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand .mark{width:auto;height:84px;flex:none;display:block}
.brand .name{color:var(--ink);font-weight:900;font-size:19px;letter-spacing:-.03em;line-height:1.05}
.brand .name span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--water);margin-top:3px}
nav.main{margin-left:auto;display:flex;gap:26px}
nav.main a{color:#3E4C5E;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-.01em}
nav.main a:hover{color:var(--ink)}
.header-cta{display:flex;align-items:center;gap:14px;flex:none}
.header-cta .tel-txt{color:var(--ink);font-weight:800;font-size:17px;text-decoration:none;letter-spacing:-.02em}
.header-cta .tel-txt:hover{color:var(--blue-ink)}
@media(max-width:1040px){nav.main{display:none}}
@media(max-width:640px){
  header .wrap{height:78px;gap:10px}
  .brand .mark{height:64px}

  .header-cta .tel-txt{display:none}
  .header-cta .btn{padding:11px 18px;font-size:15px}
}

/* ---------- mobile menu (hamburger) ----------
   Below 1040px nav.main is hidden. Without this the header offered no way to
   reach any other page at all — a phone visitor could only call. The three
   bars open a full-width panel listing every service and city page. */
.menu{display:none;position:static}
.menu > summary{list-style:none}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary::marker{content:""}
.menu-btn{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:48px;height:44px;cursor:pointer;border-radius:10px;
  border:2px solid var(--navy);background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.menu-btn:hover{background:rgba(10,17,40,.06)}
.menu-btn:focus-visible{outline:3px solid var(--water);outline-offset:2px}
.bars{display:block;width:22px;height:16px;position:relative}
.bars i{
  position:absolute;left:0;right:0;height:2.5px;border-radius:2px;
  background:var(--navy);transition:transform .22s ease,opacity .16s ease;
}
.bars i:nth-child(1){top:0}
.bars i:nth-child(2){top:6.75px}
.bars i:nth-child(3){top:13.5px}
.menu[open] .bars i:nth-child(1){transform:translateY(6.75px) rotate(45deg)}
.menu[open] .bars i:nth-child(2){opacity:0}
.menu[open] .bars i:nth-child(3){transform:translateY(-6.75px) rotate(-45deg)}

.menu-panel{
  position:absolute;left:0;right:0;top:100%;
  background:#FBF8F3;border-top:1px solid #D3CBBC;border-bottom:1px solid #D3CBBC;
  box-shadow:0 18px 40px rgba(10,17,40,.16);
  max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.menu-inner{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr 1fr;gap:12px 28px;padding:22px 22px 26px}
.menu-col h4{
  margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--water);
}
.menu-col ul{list-style:none;margin:0;padding:0}
.menu-col li{border-bottom:1px solid rgba(10,17,40,.07)}
.menu-col li:last-child{border-bottom:0}
.menu-col ul a{
  display:block;padding:11px 2px;color:var(--ink);
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;text-decoration:none;
}
.menu-col ul a:hover,.menu-col ul a:focus{color:var(--blue-ink)}
.menu-col ul a[aria-current="page"]{color:var(--blue-ink);font-weight:800}
.menu-col ul a[aria-current="page"]::before{content:"";display:inline-block;width:3px;height:14px;
  border-radius:2px;background:var(--water);margin-right:9px;vertical-align:-2px}
.menu-cta{display:grid;gap:10px;margin-top:16px}
.menu-cta .btn{width:100%;justify-content:center;padding:13px 14px;font-size:15.5px}

@media(max-width:1040px){
  .menu{display:block}
  /* nav.main carried the margin-left:auto that pushed the right-hand group over.
     With the nav hidden, .header-cta has to take that job or the logo, the call
     button and the bars all bunch on the left with dead space beside them. */
  .header-cta{margin-left:auto}
}
@media(max-width:760px){
  /* the sticky call bar eats the last 78px of the viewport — the panel has to
     stop above it or the quote button can never be scrolled into reach */
  .menu-panel{max-height:calc(100vh - 182px);max-height:calc(100dvh - 182px)}
  .menu-inner{grid-template-columns:1fr 1fr;gap:4px 22px;padding:16px 22px 20px}
  .menu-col ul a{padding:9px 2px;font-size:15px}
  .menu-col:nth-child(3){grid-column:1 / -1;margin-top:8px}
  .menu-col:nth-child(3) ul{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
  .menu-cta{grid-template-columns:1fr 1fr;margin-top:12px}
}
@media(max-width:640px){
  .menu-panel{max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px)}
  .menu-btn{width:44px;height:42px}
  .menu-cta{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.bars i{transition:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(900px 460px at 82% 8%,rgba(110,160,215,.30),transparent 62%),
    radial-gradient(700px 420px at 8% 96%,rgba(110,160,215,.16),transparent 60%),
    linear-gradient(168deg,#24384F 0%,var(--navy) 42%,var(--navy-deep) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(1000px 600px at 60% 30%,#000,transparent 75%);
          mask-image:radial-gradient(1000px 600px at 60% 30%,#000,transparent 75%);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;
  align-items:center;padding-top:72px;padding-bottom:84px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#A8CDEE;
  border:1px solid rgba(127,178,222,.42);background:rgba(127,178,222,.10);
  padding:8px 14px;border-radius:999px;margin-bottom:24px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(192,138,69,.26)}
.hero h1{font-size:clamp(3rem,9.5vw,5.2rem);font-weight:900;letter-spacing:-.042em;line-height:1}
.hero h1 .heal{color:var(--water)}
.hero-sub{margin-top:20px;font-size:clamp(17px,2vw,20px);font-weight:600;color:var(--cream);
  letter-spacing:-.012em;max-width:24em}
.hero h1 em{font-style:normal;color:var(--water)}
.hero .lede{margin-top:14px;font-size:18px;line-height:1.55;color:#A8B2C6;max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-note{margin-top:18px;font-size:14.5px;color:#8F9AB0;display:flex;align-items:center;gap:9px}

.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;
  padding-top:28px;border-top:1px solid rgba(255,255,255,.11)}
.hero-badges span{
  font-size:13px;font-weight:600;color:#CBD4E2;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);padding:8px 13px;border-radius:8px;
}

/* quote card in hero */
.quote-card{
  background:var(--surface);color:var(--ink);border-radius:18px;padding:28px;
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.6);
}
.quote-card h2{font-size:22px;letter-spacing:-.03em}
.quote-card .qc-sub{font-size:14.5px;color:var(--muted);margin-top:7px;line-height:1.5}
.field{margin-top:14px}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#4C5566;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;font:inherit;font-size:15.5px;color:var(--ink);
  border:1.5px solid var(--line);border-radius:10px;background:#FBFAF5;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue-ink);box-shadow:0 0 0 4px rgba(43,85,134,.16);background:var(--surface);
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-fine{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.45;text-align:center}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:40px;padding-top:48px;padding-bottom:56px}
  .hero .lede{font-size:17.5px}
}
@media(max-width:560px){
  .eyebrow{font-size:10px;letter-spacing:.07em;padding:7px 11px;margin-bottom:20px}
  .hero .lede{font-size:16.5px;margin-top:16px}
  .hero-actions{margin-top:28px}
  .hero-actions .btn{width:100%}
  .btn-lg{padding:17px 24px;font-size:17px}
}

/* ---------- trust strip ---------- */
.trust{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:0}
.trust .item{display:flex;align-items:flex-start;gap:14px;padding:26px 22px}
.trust .item + .item{border-left:1px solid var(--line)}
.trust .ico{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--surface),var(--chrome-2));border:1px solid var(--line);
  box-shadow:var(--shadow-sm)}
.trust b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em}
.trust small{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.4}
@media(max-width:900px){
  .trust .wrap{grid-template-columns:1fr 1fr}
  .trust .item:nth-child(odd){border-left:none}
  .trust .item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:520px){
  .trust .wrap{grid-template-columns:1fr}
  .trust .item + .item{border-left:none;border-top:1px solid var(--line)}
}

/* ---------- generic sections ---------- */
section{padding:88px 0}
.sec-alt{background:var(--bg-alt)}
.sec-head{max-width:720px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{font-size:12.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-ink);margin-bottom:14px}
.sec-head h2{font-size:clamp(1.85rem,3.4vw,2.6rem);font-weight:900;letter-spacing:-.035em}
.sec-head p{margin-top:16px;font-size:17.5px;color:var(--muted);line-height:1.6}
@media(max-width:700px){section{padding:60px 0}}

/* ---------- services ---------- */
/* nine cards: three columns divide evenly, and the wider card reads better */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease;
  display:flex;flex-direction:column;
}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#C9CFDA}
.svc .ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(165deg,var(--navy),#2A3A5C);box-shadow:0 6px 16px rgba(10,17,40,.22)}
.svc h3{font-size:17.5px;font-weight:800;letter-spacing:-.025em}
.svc p{margin-top:9px;font-size:14.8px;color:var(--muted);line-height:1.55}
@media(max-width:1000px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* ---------- emergency band ---------- */
.band{
  background:linear-gradient(120deg,var(--navy-deep),var(--navy) 55%,#234A78);
  color:#fff;border-radius:18px;padding:40px;display:flex;align-items:center;
  justify-content:space-between;gap:32px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.band::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,var(--blue-glow),transparent 65%)}
.band .txt{position:relative;z-index:1}
.band h2{font-size:clamp(1.5rem,2.8vw,2rem);letter-spacing:-.03em}
.band p{margin-top:10px;color:#B7C2D4;font-size:16.5px;max-width:46em}
.band .act{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.band .act small{color:#8A94A8;font-size:13px;text-align:center}
@media(max-width:840px){.band{flex-direction:column;align-items:flex-start;padding:30px}}

/* ---------- why / process ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:38px}}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.checks li{display:flex;gap:14px;align-items:flex-start}
.checks .tick{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-ink);box-shadow:0 4px 12px rgba(43,85,134,.28);margin-top:2px}
.checks b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.checks span{display:block;color:var(--muted);font-size:15.5px;margin-top:3px;line-height:1.55}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow-sm);position:relative}
.step .n{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-weight:900;font-size:16px;margin-bottom:15px}
.step h3{font-size:17.5px;letter-spacing:-.025em}
.step p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.55}
@media(max-width:800px){.steps{grid-template-columns:1fr}}

/* ---------- our work ---------- */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.photos figure{margin:0}
.photos img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);
  border:1px solid rgba(10,17,40,.12);box-shadow:var(--shadow-md);background:var(--bg-alt);
}
.photos figcaption{
  margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--muted);
  display:flex;gap:9px;align-items:flex-start;
}
.photos figcaption::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-top:7px;
}
@media(max-width:800px){.photos{grid-template-columns:1fr;gap:26px;max-width:420px;margin:0 auto}}

/* ---------- reviews marquee ---------- */
/* Same technique as the old site: one flex track holding the cards twice, slid
   0 -> -50% on a linear loop. The second copy is identical, so the wrap is
   seamless. It is aria-hidden so screen readers hear each review once. */
.rev-marquee{
  position:relative;margin-top:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.rev-track{display:flex;gap:18px;width:max-content;padding:6px 9px}
.rev-card{
  margin:0;                      /* <figure> UA default is 1em 40px — it was adding 80px per card */
  flex:none;width:330px;background:var(--navy);color:#fff;
  border-radius:18px;padding:24px;box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:13px;
}
.rev-card .stars{display:flex;gap:3px}
.rev-card .stars svg{width:16px;height:16px;fill:var(--gold-hi);flex:none}
.rev-card blockquote{margin:0}   /* UA default is 1em 40px — it would indent every quote */
.rev-card p{margin:0;font-size:15.5px;line-height:1.55;color:#DCE3ED}
.rev-card .who{margin-top:auto;padding-top:6px;font-weight:800;font-size:15px;letter-spacing:-.015em;
  border-top:1px solid rgba(255,255,255,.10)}
.rev-card .who small{display:block;font-weight:600;font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--water);margin-top:4px}
.rev-card .src{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#8DA0BB}
.rev-card .src svg{width:13px;height:13px;flex:none}

@media (prefers-reduced-motion: no-preference){
  @keyframes rev-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .rev-track{animation:rev-scroll 74s linear infinite}
  .rev-marquee:hover .rev-track,
  .rev-marquee:focus-within .rev-track{animation-play-state:paused}
}
/* With motion off, a hidden overflowing track would bury most of the reviews,
   so it becomes a normal swipeable row and the duplicate set is dropped. */
@media (prefers-reduced-motion: reduce){
  .rev-marquee{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .rev-track [data-dupe]{display:none}
  .rev-card{scroll-snap-align:center}
}
.rev-agg{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;font-size:15.5px;color:var(--muted)}
.rev-agg b{color:var(--ink);font-weight:800}
.rev-agg .stars{display:flex;gap:2px}
.rev-agg .stars svg{width:15px;height:15px;fill:var(--gold)}
@media(max-width:640px){.rev-card{width:270px}}

/* ---------- service area ---------- */
.counties{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.county{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow-sm)}
.county h3{font-size:18px;letter-spacing:-.025em;display:flex;align-items:center;gap:9px}
.county h3 .pin{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.chips span{font-size:13.5px;font-weight:600;color:#4C5566;background:var(--bg-alt);
  border:1px solid var(--line);border-radius:7px;padding:6px 11px}
@media(max-width:860px){.counties{grid-template-columns:1fr}}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.stars{display:flex;gap:3px;margin-bottom:14px}
.review p{font-size:15.5px;line-height:1.6;color:#333C4B;flex:1}
.review .who{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;font-weight:700}
.review .who small{display:block;font-weight:500;color:var(--muted);margin-top:2px}
@media(max-width:860px){.reviews{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0;
  margin-bottom:12px;box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:700;font-size:16.5px;
  letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--blue-ink);flex:none;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 24px 22px;color:var(--muted);font-size:15.5px;line-height:1.65}

/* ---------- final cta ---------- */
.final{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;text-align:center}
.final h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:900;letter-spacing:-.035em}
.final p{margin:18px auto 0;max-width:44em;color:#B7C2D4;font-size:18px}
.final .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* ---------- footer ---------- */
footer{background:var(--navy-deep);color:#8F9AB0;padding:60px 0 0;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:46px}
footer h4{color:#fff;font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:#8F9AB0;text-decoration:none}
footer a:hover{color:var(--water)}
.foot-brand p{margin-top:16px;line-height:1.6;max-width:32em}
.foot-tag{color:var(--gold-hi);font-weight:700;font-style:italic;margin-top:10px !important}
.foot-bottom{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- mobile sticky call bar ---------- */
.mobile-bar{display:none}
@media(max-width:760px){
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(10,17,40,.97);backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.12);
  }
  .mobile-bar .btn{padding:14px 10px;font-size:15.5px}
  body{padding-bottom:78px}
}
/* ==========================================================================
   HERO ENTRANCE — "Broken?" arrives in six shards, holds fractured, then
   snaps whole on the beat "Fixed." lands. Pure CSS, no library, ~1.6s.

   The word is rendered six times, stacked, each copy clipped to one jagged
   shard of a crack pattern. At transform 0 the copies register pixel-for-
   pixel and the word is genuinely whole — which is the whole trick.

   Every animation rule lives inside the no-preference media query, so the
   resting state IS the finished layout: with reduced motion on, or if the
   CSS ever fails, the headline simply reads "Broken? Fixed." and nothing
   moves. The header, phone number and mobile call bar are never animated.
   ========================================================================== */
.hero-copy{position:relative}
.shatter{position:relative;display:inline-block;line-height:1.16}
.shatter .ghost{display:block;visibility:hidden}
.shatter .piece{
  position:absolute;left:0;top:0;width:100%;line-height:1.16;white-space:nowrap;
  clip-path:var(--cp);-webkit-clip-path:var(--cp);
}
.shatter .piece::before{content:attr(data-t)}
.shock{display:none}

@media (prefers-reduced-motion: no-preference){

  /* the fracture */
  @keyframes cs-shatter{
    0%  {transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(1.12);opacity:0}
    16% {opacity:1}
    26% {transform:translate(var(--bx),var(--by)) rotate(var(--br)) scale(1)}
    58% {transform:translate(var(--bx),var(--by)) rotate(var(--br)) scale(1)}
    68% {transform:translate(calc(var(--bx) * 1.5),calc(var(--by) * 1.5))
                   rotate(calc(var(--br) * 1.6)) scale(1)}
    100%{transform:translate(0,0) rotate(0deg) scale(1)}
  }
  .shatter .piece{animation:cs-shatter 1.18s cubic-bezier(.32,.8,.28,1) .10s both}

  /* the answer lands on the same beat the shards close */
  @keyframes cs-slam{
    0%  {transform:scale(2.1) rotate(-4deg);opacity:0}
    50% {opacity:1}
    64% {transform:scale(.94) rotate(.7deg);opacity:1}
    82% {transform:scale(1.04) rotate(-.3deg)}
    100%{transform:scale(1) rotate(0)}
  }
  .hero h1 .heal{display:inline-block;transform-origin:50% 62%;
    animation:cs-slam .42s cubic-bezier(.16,1,.3,1) .88s both}

  /* impact */
  @keyframes cs-shake{
    0%,100%{transform:translate(0,0)}
    18%{transform:translate(-3px,2px)}   36%{transform:translate(3px,-2px)}
    58%{transform:translate(-2px,-1px)}  78%{transform:translate(2px,1px)}
  }
  .hero h1{animation:cs-shake .3s linear 1.28s 1 none}

  /* shockwave along the baseline at the moment it heals */
  @keyframes cs-shock{
    0%  {transform:scaleX(0);opacity:0}
    14% {opacity:1}
    58% {transform:scaleX(1);opacity:.95}
    100%{transform:scaleX(1.03);opacity:0}
  }
  .shock{
    display:block;height:3px;margin:14px 0 -17px;max-width:400px;
    transform-origin:0 50%;border-radius:2px;
    background:linear-gradient(90deg,var(--chrome-hi) 0%,var(--water) 45%,rgba(127,178,222,0) 100%);
    animation:cs-shock .72s cubic-bezier(.22,1,.3,1) 1.28s both;
    pointer-events:none;
  }

  /* everything around it rises in early, so the page is usable
     long before the headline finishes its performance */
  @keyframes cs-rise{
    from{opacity:0;transform:translateY(14px)}
    to  {opacity:1;transform:translateY(0)}
  }
  .hero-copy > .eyebrow     {animation:cs-rise .5s cubic-bezier(.16,1,.3,1) .06s both}
  .hero-copy > .hero-sub    {animation:cs-rise .6s cubic-bezier(.16,1,.3,1) .34s both}
  .hero-copy > .lede        {animation:cs-rise .6s cubic-bezier(.16,1,.3,1) .44s both}
  .hero-copy > .hero-actions{animation:cs-rise .6s cubic-bezier(.16,1,.3,1) .56s both}
  .hero-copy > .hero-note   {animation:cs-rise .6s cubic-bezier(.16,1,.3,1) .66s both}
  .hero-badges span         {animation:cs-rise .5s cubic-bezier(.16,1,.3,1) both}
  .hero-badges span:nth-child(1){animation-delay:.74s}
  .hero-badges span:nth-child(2){animation-delay:.80s}
  .hero-badges span:nth-child(3){animation-delay:.86s}
  .hero-badges span:nth-child(4){animation-delay:.92s}
  .quote-card{animation:cs-rise .7s cubic-bezier(.16,1,.3,1) .28s both}

  @keyframes cs-dot{0%,100%{opacity:1}50%{opacity:.28}}
  .eyebrow .dot{animation:cs-dot 2.6s ease-in-out 2.2s infinite}

  @keyframes cs-ring{
    from{opacity:.5;transform:scale(1)}
    to  {opacity:0; transform:scale(1.15)}
  }
  .hero-actions .btn-call{position:relative}
  .hero-actions .btn-call::after{
    content:"";position:absolute;inset:0;border-radius:inherit;
    border:2px solid var(--gold);
    animation:cs-ring 1.1s ease-out 1.7s 2 both;
    pointer-events:none;
  }
}

/* ---------- service pages ---------- */
.svc-hero{
  position:relative;color:#fff;overflow:hidden;padding:52px 0 58px;
  background:
    radial-gradient(760px 380px at 84% 6%,rgba(110,160,215,.26),transparent 62%),
    linear-gradient(168deg,#24384F 0%,var(--navy) 44%,var(--navy-deep) 100%);
}
.crumbs{font-size:13.5px;color:#93A2B8;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:#B9C6D8;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span[aria-current]{color:#fff;font-weight:600}
.svc-hero h1{margin:16px 0 0;font-size:clamp(2rem,4.4vw,3rem);font-weight:900;letter-spacing:-.038em;line-height:1.08}
.svc-hero .promise{margin:14px 0 0;font-size:clamp(1.05rem,2vw,1.3rem);color:var(--gold-hi);font-weight:700;letter-spacing:-.015em}
.svc-hero .intro{margin:20px 0 0;max-width:60ch;font-size:17.5px;line-height:1.62;color:#CBD5E3}
.svc-hero .acts{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}

.svc-body{padding:56px 0 10px}
.svcpage-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:46px;align-items:start}
.svc-main h2{font-size:clamp(1.4rem,2.5vw,1.85rem);font-weight:900;letter-spacing:-.032em;margin:0 0 16px}
.svc-main h2:not(:first-child){margin-top:44px}
.svc-main p{font-size:17px;line-height:1.66;color:var(--ink);margin:0 0 16px}
.svc-main p.lead{color:var(--muted)}

.sign-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sign-list li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.55}
.sign-list li::before{
  content:"";flex:none;width:9px;height:9px;border-radius:2px;margin-top:8px;
  background:var(--gold);box-shadow:0 0 0 3px rgba(192,138,69,.16);
}
.do-list{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.do-list li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-sm)}
.do-list b{display:block;font-size:16.5px;letter-spacing:-.02em;margin-bottom:6px}
.do-list span{font-size:16px;line-height:1.58;color:var(--muted)}

.svc-note{background:var(--bg-alt);border-left:3px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 24px;margin:0 0 16px}
.svc-note p:last-child{margin-bottom:0}

/* sidebar */
.svc-aside{position:sticky;top:126px;display:grid;gap:18px}
.aside-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;
  box-shadow:var(--shadow-md)}
.aside-card.dark{background:linear-gradient(168deg,var(--navy-soft),var(--navy) 55%,var(--navy-deep));
  border-color:transparent;color:#fff}
.aside-card.dark p{color:#BCC8D8}
.aside-card h3{margin:0 0 10px;font-size:17px;letter-spacing:-.025em}
.aside-card p{margin:0 0 16px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.aside-card .btn{width:100%;justify-content:center}
.aside-card .tel{display:block;font-size:23px;font-weight:900;letter-spacing:-.03em;color:#fff;
  text-decoration:none;margin-bottom:4px}
.aside-card small{display:block;font-size:13px;color:#8FA0B8}
.svc-links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.svc-links a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 2px;border-bottom:1px solid var(--line);color:var(--ink);
  text-decoration:none;font-weight:650;font-size:15.5px}
.svc-links li:last-child a{border-bottom:0}
.svc-links a::after{content:"\2192";color:var(--gold-deep);font-weight:800}
.svc-links a:hover{color:var(--blue-ink)}

@media(max-width:960px){
  .svcpage-grid{grid-template-columns:1fr;gap:34px}
  .svc-aside{position:static}
}
@media(max-width:640px){
  .svc-hero{padding:36px 0 42px}
  .svc-body{padding:40px 0 6px}
  .svc-hero .acts .btn{width:100%;justify-content:center}
}

/* homepage service cards now link through to their own pages */
.svc h3 a{color:inherit;text-decoration:none}
.svc h3 a::after{content:"";position:absolute;inset:0}      /* whole card is the hit area */
.svc{position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.svc:hover{transform:translateY(-2px);border-color:#CFC7B6;box-shadow:var(--shadow-md)}
.svc:hover h3{color:var(--blue-ink)}
.svc h3 a:focus-visible{outline:3px solid var(--blue-ink);outline-offset:4px;border-radius:4px}

/* the repiping page's sign list covers two different systems — tag each line */
.sign-list em{display:inline-block;font-style:normal;font-weight:800;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:5px;
  margin-right:9px;vertical-align:2px;white-space:nowrap}
.sign-list .tag-sup{background:#DCE6F2;color:#2B5586}
.sign-list .tag-san{background:#EFE2CE;color:#8C5C22}

/* a real photo of the actual job, in the hero's dead right-hand space */
.svc-hero-wrap.has-shot{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.hero-shot{margin:0}
.hero-shot img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:18px;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 50px rgba(4,10,22,.5);background:var(--navy-deep);
}
.hero-shot figcaption{
  margin-top:13px;font-size:14px;line-height:1.5;color:#A9B6C9;
  display:flex;gap:9px;align-items:flex-start;
}
.hero-shot figcaption::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-top:6px;
}
@media(max-width:960px){
  .svc-hero-wrap.has-shot{grid-template-columns:1fr;gap:32px}
  .hero-shot{max-width:420px}
  .hero-shot img{aspect-ratio:4/3}
}

/* before / after pair — identical crop on both, so the comparison is honest */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 22px}
.ba-pair figure{margin:0;position:relative}
.ba-pair img,.svc-gallery img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:var(--radius);border:1px solid rgba(10,17,40,.14);box-shadow:var(--shadow-md);
  background:var(--bg-alt);
}
.ba-pair figcaption{position:absolute;top:12px;left:12px}
.ba-tag{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border-radius:7px;backdrop-filter:blur(6px);
}
.ba-before{background:rgba(9,24,43,.82);color:#E7ECF3}
.ba-after{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--navy-deep)}
.svc-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 8px}
.svc-gallery figure{margin:0}
.svc-gallery figcaption{margin-top:11px;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media(max-width:560px){
  .ba-pair{grid-template-columns:1fr;gap:14px}
  .svc-gallery{grid-template-columns:1fr}
}

/* rough-in video — portrait phone footage, so cap it rather than let it dominate */
.svc-video{margin:0 0 22px;display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:22px;align-items:start}
.svc-video video{
  width:100%;height:auto;display:block;border-radius:var(--radius);
  border:1px solid rgba(10,17,40,.16);box-shadow:var(--shadow-md);background:var(--navy-deep);
}
.svc-video figcaption{font-size:15.5px;line-height:1.6;color:var(--muted);align-self:center}
@media(max-width:640px){
  .svc-video{grid-template-columns:1fr;gap:14px}
  .svc-video video{max-width:340px;margin:0 auto}
}
/* landscape clips (the in-pipe camera footage) go full width with the caption
   beneath — a side column next to a 16:9 frame leaves the text far too narrow */
.svc-video.wide{grid-template-columns:1fr;gap:13px}
.svc-video.wide video{width:100%;max-width:100%}
.svc-video.wide figcaption{align-self:start}

/* ---------- city pages ---------- */
.city-links{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.city-links a{
  display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.city-links a:hover{transform:translateY(-2px);border-color:#CFC7B6;box-shadow:var(--shadow-md)}
.city-links b{display:block;font-size:16.5px;letter-spacing:-.02em}
.city-links b::after{content:" \2192";color:var(--gold-deep)}
.city-links span{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media(max-width:620px){.city-links{grid-template-columns:1fr}}
/* chips that link to a city page */
.chips a{font-size:13.5px;font-weight:700;color:var(--blue-ink);background:#E3EAF4;
  border:1px solid #CBD8EA;border-radius:999px;padding:7px 13px;text-decoration:none;
  display:inline-block;transition:background .15s ease}
.chips a:hover{background:#D3E0F0}