/* ==========================================================================
   Depex Plumbing & Drainage — design system
   Author: build
   Sections: 1 Reset  2 Tokens  3 Layout  4 Type  5 Buttons  6 Header
             7 Hero  8 Cards  9 Stats  10 Process  11 Areas  12 Reviews
             13 FAQ  14 CTA  15 Forms  16 Footer  17 Utilities  18 Motion
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* ---------- 2. Tokens ---------- */
:root{
  /* Light-first and low-chroma: one confident blue, warm amber reserved
     strictly for emergency actions. Dark ink is used only for the hero,
     the closing CTA and the footer. */
  color-scheme:light;

  --ink:#0C1524;
  --ink-2:#132038;
  --ink-3:#1B2D4A;
  --brand:#096DB9;
  --brand-ink:#096DB9;
  --brand-600:#0A66AE;
  --brand-300:#7CC6F2;
  --aqua:#38BDF8;
  --flame:#F0862A;
  --flame-600:#C4661A;
  --copper-300:#FFC48F;

  /* surfaces (light) */
  --bg:#FFFFFF;
  --bg-soft:#EFF7FE;
  --bg-soft-2:#DEEDFB;
  --card:#FFFFFF;
  --line:#D8E8F6;
  --line-strong:#B6D3EA;

  /* hero / banner wash — MUST be tokens: hardcoding these left the hero
     pale sky-blue in dark mode, with near-white headline text on top. */
  --wash-1:#DCEEFC;
  --wash-2:#EFF7FE;
  --wash-b1:#E3F1FD;
  --wash-b2:#F1F8FE;

  /* text */
  --tx:#0D1B2A;
  --tx-2:#44586E;
  --tx-3:#5E7388;
  --on-dark:#EDF3FA;
  --on-dark-2:#A9BCD2;

  --focus:#23C7E0;

  /* shape + depth */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(8,20,38,.05), 0 1px 3px rgba(8,20,38,.06);
  --sh-2:0 4px 14px rgba(8,20,38,.07), 0 2px 6px rgba(8,20,38,.05);
  --sh-3:0 20px 50px rgba(8,20,38,.13), 0 6px 16px rgba(8,20,38,.07);
  --sh-brand:0 12px 30px rgba(18,135,216,.30), 0 2px 8px rgba(18,135,216,.18);
  --sh-copper:0 12px 30px rgba(224,122,60,.32), 0 2px 8px rgba(224,122,60,.20);

  /* rhythm */
  --gut:clamp(1.15rem,4vw,2rem);
  --sec-y:clamp(3rem,5.5vw,4.75rem);
  --max:1180px;

  /* fonts */
  --f-head:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --grad-brand:linear-gradient(135deg,#7DD3FC 0%,var(--aqua) 30%,var(--brand) 100%);
  --grad-cta:linear-gradient(135deg,#0E76BE 0%,#0B69AC 50%,#085C9C 100%);
  --grad-copper:linear-gradient(135deg,#FFCB9B 0%,#F5A05F 45%,#E8823F 100%);
  --on-copper:#241004;
  --grad-ink:linear-gradient(150deg,#0C1524 0%,#152945 100%);
}

/* The dark palette is applied from two places and must stay identical in both:
   the OS preference (for the visitor who never touches the toggle) and an
   explicit data-theme. The media query is guarded with :not([data-theme="light"])
   so that choosing light beats a dark OS, and the attribute rule comes after it
   so that choosing dark beats a light OS. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --wash-1:#0C1E33;
    --wash-2:#081422;
    --wash-b1:#0C1E33;
    --wash-b2:#081422;
    --bg:#050A13; --bg-soft:#08111F; --bg-soft-2:#0D1B2E; --card:#0C1726;
    --line:#1B2C45; --line-strong:#28405F;
    --tx:#E9F2FB; --tx-2:#A6BBD2; --tx-3:#7F94AD;
    --brand-ink:#38BDF8;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 6px 18px rgba(0,0,0,.45);
    --sh-3:0 20px 46px rgba(0,0,0,.55);
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --wash-1:#0C1E33;
  --wash-2:#081422;
  --wash-b1:#0C1E33;
  --wash-b2:#081422;
  --bg:#050A13; --bg-soft:#08111F; --bg-soft-2:#0D1B2E; --card:#0C1726;
  --line:#1B2C45; --line-strong:#28405F;
  --tx:#E9F2FB; --tx-2:#A6BBD2; --tx-3:#7F94AD;
  /* The accent as *type* must clear AA on a near-black ground;
     --brand stays the fill colour that carries white text. */
  --brand-ink:#38BDF8;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 18px rgba(0,0,0,.45);
  --sh-3:0 20px 46px rgba(0,0,0,.55);
}

/* ---------- 3. Layout ---------- */
body{
  font-family:var(--f-body);
  font-size:clamp(1.0625rem,.3vw + 1rem,1.125rem);
  line-height:1.7;
  color:var(--tx);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.container--wide{max-width:1340px}
.container--narrow{max-width:760px}
.section{padding-block:var(--sec-y)}
.section--soft{background:var(--bg-soft)}
.section--tight{padding-block:clamp(2.4rem,5vw,3.6rem)}
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
/* Both the services and the service-areas grids hold seven items, so the last
   row left one card stranded beside two empty slots. Give the odd one out the
   whole row and lay it out sideways, so it reads as a feature rather than a
   leftover. */
@media (min-width:940px){
  /* The media bleeds down the card's left edge; the copy sits in the padded
     column beside it and stays vertically centred. Absolute positioning is what
     lets the photograph reach the card's top and bottom borders — a grid track
     would only ever be as tall as its own content. */
  .g-3 > :nth-child(7):last-child{
    grid-column:1 / -1;
    min-height:15rem;justify-content:center;
    padding-left:calc(24rem + var(--card-pad))
  }
  .g-3 > :nth-child(7):last-child .card__media{
    position:absolute;left:0;top:0;bottom:0;width:24rem;
    margin:0;height:auto;aspect-ratio:auto;
    border-radius:calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px)
  }
  .g-3 > :nth-child(7):last-child .card__ic{left:1.15rem;bottom:1.15rem}
}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.split{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1.05fr .95fr}.split--rev>*:first-child{order:2}}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--brand);color:#fff;padding:.75rem 1.15rem;border-radius:0 0 var(--r) 0;font-weight:600}
.skip:focus{left:0}

/* ---------- 4. Type ---------- */
h1,h2,h3,h4,.h1,.h2,.h3{font-family:var(--f-head);font-weight:700;line-height:1.1;letter-spacing:-.022em;text-wrap:balance}
h1,.h1{font-size:clamp(2.15rem,5.4vw,3.65rem)}
h2,.h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3,.h3{font-size:clamp(1.16rem,1.5vw,1.35rem);line-height:1.25}
h4{font-size:1.03rem;line-height:1.3}
p{text-wrap:pretty}
.lede{font-size:clamp(1.12rem,1vw,1.28rem);color:var(--tx-2);line-height:1.62;max-width:62ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-head);font-size:.75rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brand-ink);
  margin-bottom:.85rem;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad-brand)}
.on-dark .eyebrow{color:var(--aqua)}
.sec-head{max-width:720px;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head p{margin-top:.9rem;color:var(--tx-2);font-size:1.06rem}
.muted{color:var(--tx-2)}
.small{font-size:.9rem}
.tiny{font-size:.8rem}
.prose>*+*{margin-top:1.15rem}
.prose p{max-width:68ch}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.9rem}
/* bare <ul> — the ul[class] reset above doesn't reach it, so null the
   native marker here or it doubles up with the ::before dot below */
.prose ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.prose ul li{position:relative;padding-left:1.7rem;color:var(--tx-2)}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;
  background:var(--grad-brand)
}
.prose a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose strong{color:var(--tx);font-weight:650}

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--grad-cta); --btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-head);font-weight:650;font-size:.965rem;letter-spacing:-.01em;
  padding:.85rem 1.5rem;border-radius:var(--r-pill);border:0;
  background:var(--btn-bg);color:var(--btn-fg);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:var(--sh-brand);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,background-color .18s,color .18s,border-color .18s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(18,135,216,.36),0 3px 10px rgba(18,135,216,.22)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
.btn--flame{--btn-bg:var(--grad-copper);--btn-fg:var(--on-copper);box-shadow:var(--sh-copper)}
.btn--flame:hover{box-shadow:0 18px 40px rgba(224,122,60,.42),0 3px 10px rgba(224,122,60,.26)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--tx);border:1.5px solid var(--line-strong);box-shadow:none}
.btn--ghost:hover{border-color:var(--brand-ink);color:var(--brand-ink);box-shadow:var(--sh-2)}
.btn--onDark{--btn-bg:rgba(255,255,255,.09);--btn-fg:#fff;border:1.5px solid rgba(255,255,255,.26);box-shadow:none;backdrop-filter:blur(6px)}
.btn--onDark:hover{background:rgba(255,255,255,.16);box-shadow:none}
.btn--sm{padding:.62rem 1.1rem;font-size:.88rem}
.btn--lg{padding:1.02rem 1.9rem;font-size:1.03rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.txtlink{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-head);font-weight:650;
  color:var(--brand-ink);text-decoration:none;font-size:.94rem
}
.txtlink svg{width:16px;height:16px;transition:transform .2s}
.txtlink:hover svg{transform:translateX(4px)}

/* ---------- 6. Header ---------- */
.topbar{background:var(--ink);color:var(--on-dark-2);font-size:.845rem}
.topbar__in{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;justify-content:space-between;padding-block:.5rem}
.topbar a{text-decoration:none;display:inline-flex;align-items:center;gap:.42rem;color:var(--on-dark)}
.topbar a:hover{color:var(--aqua)}
.topbar svg{width:14px;height:14px;opacity:.85}
.topbar__list{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;align-items:center}
.pulse{display:inline-flex;align-items:center;gap:.45rem;color:#7CE8B0;font-weight:600}
.pulse i{width:7px;height:7px;border-radius:50%;background:#31D98A;box-shadow:0 0 0 0 rgba(49,217,138,.7);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(49,217,138,0)}100%{box-shadow:0 0 0 0 rgba(49,217,138,0)}}

.hdr{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.hdr.is-stuck{border-bottom-color:var(--line);box-shadow:var(--sh-1)}
.hdr__in{display:flex;align-items:center;gap:1.25rem;justify-content:space-between;min-height:74px}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;flex:none}
.brand__mark{width:40px;height:40px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--f-head);font-weight:800;font-size:1.32rem;letter-spacing:-.03em;color:var(--tx)}
.brand__sub{font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;color:var(--tx-3);font-weight:600}

.nav{display:none}
@media (min-width:1020px){
  .nav{display:flex;align-items:center;gap:.15rem;flex:0 1 auto}
  .nav a{
    position:relative;text-decoration:none;font-weight:550;font-size:.945rem;white-space:nowrap;
    padding:.55rem .82rem;border-radius:var(--r-sm);color:var(--tx-2);transition:color .18s,background-color .18s
  }
  .nav a:hover{color:var(--tx);background:var(--bg-soft)}
  .nav a[aria-current="page"]{color:var(--brand-ink);font-weight:650}
  .nav a[aria-current="page"]::after{content:"";position:absolute;left:.82rem;right:.82rem;bottom:.24rem;height:2px;border-radius:2px;background:var(--grad-brand)}
}
.hdr__cta{display:none}
@media (min-width:640px){.hdr__cta{display:inline-flex}}

.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--card);cursor:pointer;flex:none
}
@media (min-width:1020px){.burger{display:none}}
.burger span{position:relative;display:block;width:19px;height:1.9px;background:var(--tx);border-radius:2px;transition:transform .25s,opacity .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.9px;background:var(--tx);border-radius:2px;transition:transform .25s,opacity .2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::before{transform:translateY(6px);opacity:0}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-90deg)}

.drawer{
  position:fixed;inset:0 0 0 auto;width:min(88vw,380px);z-index:95;
  background:var(--bg);border-left:1px solid var(--line);box-shadow:var(--sh-3);
  padding:1.25rem var(--gut) 2rem;overflow-y:auto;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;gap:.35rem
}
.drawer.is-open{transform:translateX(0)}
.drawer__top{display:flex;justify-content:flex-end;margin-bottom:.5rem}
.drawer__close{width:42px;height:42px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--card);cursor:pointer;font-size:1.35rem;line-height:1}
.drawer a.dnav{
  text-decoration:none;font-family:var(--f-head);font-weight:600;font-size:1.06rem;
  padding:.82rem .25rem;border-bottom:1px solid var(--line);color:var(--tx);
  display:flex;gap:.75rem;justify-content:space-between;align-items:center
}
/* Without an explicit size an unsized viewBox SVG expands to fill its flex
   row. Every icon in the drawer needs a hard size. */
.drawer a.dnav svg{width:17px;height:17px;flex:none;opacity:.5}
.drawer .btn svg{width:18px;height:18px;flex:none}
.drawer a.dnav[aria-current="page"]{color:var(--brand-ink)}
.drawer .btn{margin-top:1.15rem}
.scrim{position:fixed;inset:0;z-index:90;background:rgba(6,12,22,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.is-open{opacity:1;pointer-events:auto}
body.is-locked{overflow:hidden}

/* ---------- 7. Hero ---------- */
.hero{position:relative;background:var(--grad-ink);color:var(--on-dark);overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 70% at 82% 12%,rgba(35,199,224,.26),transparent 62%),
    radial-gradient(55% 60% at 8% 92%,rgba(11,114,196,.34),transparent 65%);
}
.hero__mesh{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none}
/* Optional hero photograph: sits behind the mesh, dimmed hard so the
   headline keeps a comfortable contrast ratio over any image. */
.hero__photo{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;opacity:.52;filter:saturate(.8)}
.hero:has(.hero__photo)::before{background:
  linear-gradient(100deg,rgba(10,17,32,.94) 30%,rgba(10,17,32,.55) 100%),
  radial-gradient(60% 70% at 82% 12%,rgba(35,199,224,.22),transparent 62%)}
.hero__in{position:relative;padding-block:clamp(3.4rem,8vw,6.2rem)}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--aqua),#8FD6F5);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{color:var(--on-dark-2);margin-top:1.1rem;max-width:56ch}
.hero .btn-row{margin-top:1.9rem}
.hero__grid{display:grid;gap:clamp(2.2rem,5vw,3.5rem)}
@media (min-width:960px){.hero__grid{grid-template-columns:1.1fr .9fr;align-items:center}}

.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .9rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  font-size:.82rem;font-weight:600;color:#fff;backdrop-filter:blur(6px)
}
.badge svg{width:15px;height:15px;color:var(--aqua)}
.badge-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.5rem}

.trustbar{display:flex;flex-wrap:wrap;gap:.75rem 2rem;margin-top:2.4rem;padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.14)}
.trustbar div{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--on-dark-2)}
.trustbar svg{width:19px;height:19px;color:var(--aqua);flex:none}

/* quick-quote card in hero */
.qcard{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2rem);backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(0,0,0,.34)
}
.qcard h2{font-size:1.32rem;color:#fff}
.qcard p{color:var(--on-dark-2);font-size:.93rem;margin-top:.4rem}
.qcard form{margin-top:1.15rem;display:grid;gap:.75rem}
.qcard input,.qcard select,.qcard textarea{
  width:100%;padding:.82rem 1rem;border-radius:var(--r);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:.95rem
}
.qcard input::placeholder,.qcard textarea::placeholder{color:rgba(233,242,250,.55)}
.qcard select option{color:#0D1726}
.qcard input:focus,.qcard select:focus,.qcard textarea:focus{outline:2px solid var(--aqua);outline-offset:1px;background:rgba(255,255,255,.13)}
.qcard .fine{font-size:.75rem;color:rgba(233,242,250,.6);margin-top:.15rem}

/* page banner (inner pages) */
.pbanner{position:relative;background:var(--grad-ink);color:var(--on-dark);overflow:hidden;isolation:isolate}
.pbanner::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 88% 0%,rgba(35,199,224,.22),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(11,114,196,.3),transparent 65%)}
.pbanner__in{padding-block:clamp(2.6rem,6vw,4.4rem)}
.pbanner h1{color:#fff;max-width:22ch}
.pbanner .lede{color:var(--on-dark-2);max-width:62ch;margin-top:1rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.83rem;color:var(--on-dark-2);margin-bottom:1.1rem}
.crumbs a{text-decoration:none;opacity:.85}
.crumbs a:hover{opacity:1;color:var(--aqua)}
.crumbs li{display:flex;gap:.4rem;align-items:center}
.crumbs li+li::before{content:"/";opacity:.45}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;list-style:none;padding:0;margin:0}

/* ---------- 8. Cards ---------- */
.card{
  --card-pad:clamp(1.3rem,2.4vw,1.75rem);
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--card-pad);
  box-shadow:var(--sh-1);transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s;
  display:flex;flex-direction:column;gap:.7rem;height:100%
}
.card--link:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:color-mix(in srgb,var(--brand) 34%,var(--line))}
.card__ic{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,color-mix(in srgb,var(--aqua) 22%,transparent),color-mix(in srgb,var(--brand) 16%,transparent));
  border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);color:var(--brand-ink);margin-bottom:.35rem
}
.card__ic svg{width:26px;height:26px}
.card h3{color:var(--tx)}
.card p{color:var(--tx-2);font-size:1rem;line-height:1.62}
.card .txtlink{margin-top:auto;padding-top:.35rem}
.card__stretch{position:absolute;inset:0;border-radius:inherit;z-index:1}
.card__stretch span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Photo band on a service card: cancels the card padding so the image
   meets the border, with the service icon overlapping its lower-left. */
.card__media{
  position:relative;overflow:hidden;
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  background:var(--bg-soft-2);aspect-ratio:16/10;
}
.card__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card--link:hover .card__media img{transform:scale(1.045)}
.card__media::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(to top,color-mix(in srgb,var(--card) 88%,transparent),transparent)}
.card__media .card__ic{
  position:absolute;left:var(--card-pad);bottom:-14px;z-index:2;margin:0;
  background:var(--card);border-color:var(--line);box-shadow:var(--sh-2)
}
.card--photo h3{margin-top:1.15rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  font-size:.78rem;font-weight:600;padding:.28rem .68rem;border-radius:var(--r-pill);
  background:var(--bg-soft-2);color:var(--tx-2);border:1px solid var(--line)
}

/* feature list */
.flist{display:grid;gap:1.1rem}
.flist li{display:flex;gap:.95rem;align-items:flex-start}
.flist .fic{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--grad-cta);color:#fff;box-shadow:var(--sh-brand)
}
.flist .fic svg{width:20px;height:20px}
.flist h3{color:var(--tx);font-size:1.03rem;line-height:1.3}
.flist p{color:var(--tx-2);font-size:.93rem;margin-top:.15rem}

/* ---------- 9. Stats ---------- */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:920px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--card);padding:clamp(1.25rem,2.4vw,1.8rem);text-align:center}
.stat b{display:block;font-family:var(--f-head);font-size:clamp(1.85rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.03em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat span{display:block;margin-top:.45rem;font-size:.875rem;color:var(--tx-2);font-weight:550}

/* ---------- 10. Process ---------- */
.steps{counter-reset:s;display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:720px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.3rem 1.35rem;box-shadow:var(--sh-1)}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--f-head);font-weight:800;font-size:.9rem;letter-spacing:.02em;
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--grad-brand);color:#fff;margin-bottom:.9rem;box-shadow:var(--sh-brand)
}
@media (min-width:720px){
  .step:not(:last-child)::after{
    content:"";position:absolute;top:2.4rem;right:calc(var(--gut) * -1);width:calc(var(--gut) + 2px);height:2px;
    background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px)
  }
}
.step h3{font-size:1.06rem}
.step p{color:var(--tx-2);font-size:.92rem;margin-top:.4rem}

/* ---------- 11. Areas ---------- */
.arealist{display:flex;flex-wrap:wrap;gap:.55rem}
.arealist a,.arealist span{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem 1rem;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--line);
  font-size:.9rem;font-weight:550;text-decoration:none;color:var(--tx-2);
  transition:border-color .18s,color .18s,transform .18s
}
.arealist a:hover{border-color:var(--brand-ink);color:var(--brand-ink);transform:translateY(-2px)}
.arealist svg{width:14px;height:14px;color:var(--brand-ink);flex:none}

/* NAP block */
.nap{display:grid;gap:1rem}
.nap li{display:flex;gap:.85rem;align-items:flex-start}
.nap .nic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--bg-soft-2);color:var(--brand-ink);border:1px solid var(--line)}
.nap .nic svg{width:18px;height:18px}
.nap dt{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);font-weight:700}
.nap dd{margin:.15rem 0 0;font-weight:550}
.nap a{text-decoration:none}
.nap a:hover{color:var(--brand-ink)}

/* ---------- 12. Reviews ---------- */
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.35rem,2.4vw,1.8rem);box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:.9rem;height:100%}
.stars{display:flex;gap:.14rem;color:#F5A524}
.stars svg{width:17px;height:17px}
.rev blockquote{font-size:1rem;color:var(--tx);line-height:1.6}
.rev figcaption{margin-top:auto;display:flex;align-items:center;gap:.7rem;padding-top:.4rem}
.avatar{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:.9rem;color:#fff;background:var(--grad-cta)}
.rev figcaption b{display:block;font-size:.93rem}
.rev figcaption span{display:block;font-size:.8rem;color:var(--tx-3)}

/* ---------- 13. FAQ ---------- */
.faq{display:grid;gap:.7rem}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:color-mix(in srgb,var(--brand) 36%,var(--line))}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.25rem;cursor:pointer;list-style:none;
  font-family:var(--f-head);font-weight:620;font-size:1rem;color:var(--tx)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;border-right:2.2px solid var(--brand);border-bottom:2.2px solid var(--brand);
  transform:rotate(45deg) translateY(-2px);transition:transform .25s
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq .faq__a{padding:0 1.25rem 1.2rem;color:var(--tx-2);font-size:.97rem}
.faq .faq__a>*+*{margin-top:.7rem}

/* ---------- 14. CTA band ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;background:var(--grad-ink);color:#fff;border-radius:var(--r-xl);padding:clamp(2rem,5vw,3.4rem);text-align:center}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 100% at 50% 0%,rgba(35,199,224,.24),transparent 60%),radial-gradient(50% 80% at 10% 100%,rgba(11,114,196,.34),transparent 65%)}
.cta h2{color:#fff}
.cta p{color:var(--on-dark-2);max-width:58ch;margin:.9rem auto 0}
.cta .btn-row{justify-content:center;margin-top:1.75rem}

/* ---------- 15. Forms ---------- */
.form{display:grid;gap:1.05rem}
.form-grid{display:grid;gap:1.05rem}
@media (min-width:640px){.form-grid--2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.4rem}
.field label{font-size:.85rem;font-weight:640;color:var(--tx);font-family:var(--f-head)}
.field .req{color:var(--flame)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--bg);color:var(--tx);font-size:.98rem;
  transition:border-color .18s,box-shadow .18s
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)
}
.field textarea{min-height:140px;resize:vertical}
.field .hint{font-size:.8rem;color:var(--tx-3)}
.check{display:flex;gap:.65rem;align-items:flex-start;font-size:.89rem;color:var(--tx-2)}
.check input{width:19px;height:19px;flex:none;margin-top:.14rem;accent-color:var(--brand-ink)}
.hp{position:absolute;left:-9999px}
.formnote{font-size:.83rem;color:var(--tx-3)}
.alert{padding:.9rem 1.1rem;border-radius:var(--r);font-size:.92rem;border:1px solid}
.alert--ok{background:color-mix(in srgb,#31D98A 12%,transparent);border-color:color-mix(in srgb,#31D98A 40%,transparent);color:var(--tx)}

/* emergency strip */
.estrip{
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;
  background:var(--grad-copper);color:#fff;
  border-radius:var(--r-lg);padding:clamp(1.15rem,2.4vw,1.6rem) clamp(1.25rem,3vw,2rem);
  box-shadow:0 16px 44px rgba(224,122,60,.30)
}
.estrip h2{font-size:clamp(1.2rem,2vw,1.5rem);color:var(--on-copper)}
.estrip p{font-size:.92rem;color:color-mix(in srgb,var(--on-copper) 82%,transparent);margin-top:.25rem}
.estrip .btn{--btn-bg:#fff;--btn-fg:#8A3E0C;box-shadow:0 8px 22px rgba(36,16,4,.22)}
.estrip .btn:hover{box-shadow:0 12px 28px rgba(0,0,0,.24)}

/* ---------- 16. Footer ---------- */
.ftr{background:var(--ink);color:var(--on-dark-2);padding-block:clamp(2.6rem,5vw,4rem) 0;margin-top:0}
.ftr__grid{display:grid;gap:clamp(1.8rem,4vw,2.6rem)}
@media (min-width:760px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.ftr h2{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.ftr a{text-decoration:none}
.ftr a:hover{color:var(--aqua)}
.ftr ul{display:grid;gap:.6rem;font-size:.93rem}
.ftr .brand__name{color:#fff}
.ftr .brand__sub{color:var(--on-dark-2);opacity:.75}
.ftr p{font-size:.93rem;line-height:1.65}
.ftr .nap .nic{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--aqua)}
.ftr .nap dt{color:rgba(169,191,214,.75)}
.ftr .nap dd{color:#fff}
.socials{display:flex;gap:.55rem;margin-top:1.2rem}
.socials a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;transition:background-color .18s,transform .18s}
.socials a:hover{background:var(--brand);transform:translateY(-2px)}
.socials svg{width:17px;height:17px}
.ftr__base{
  margin-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(255,255,255,.12);
  padding-block:1.35rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.83rem
}
.ftr__base a{text-decoration:none}

/* ---------- 17. Utilities ---------- */
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.mb-3{margin-bottom:1.6rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wrap-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.panel{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.35rem,2.6vw,2rem)}
/* Keeps a ~65ch reading measure, but starts at the container gutter so its
   left edge lines up with every heading above and below it. .container--narrow
   centred it instead, which read as a misalignment. */
.answer-box{max-width:47rem}
.panel--brand{background:linear-gradient(160deg,color-mix(in srgb,var(--aqua) 10%,var(--bg-soft)),var(--bg-soft))}
.media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);border:1px solid var(--line);background:var(--bg-soft)}
.media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.ratio-sq img{aspect-ratio:1/1}
/* people photographs keep a wider frame than the service shots */
.media--wide img{aspect-ratio:16/10}

/* sticky mobile call bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:.5rem;
  padding:.6rem;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--line)
}
.callbar .btn{flex:1;padding:.8rem 1rem;font-size:.92rem}
@media (min-width:640px){.callbar{display:none}}
@media (max-width:639px){body{padding-bottom:72px}}

/* ---------- 18. Motion ---------- */
/* Gated on .js — set by an inline script in <head>. Without JS (or if the
   script fails) nothing is ever hidden, so content can't become unreachable. */
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1;transform:none}
}
@media print{
  .hdr,.topbar,.drawer,.scrim,.callbar,.cta,.estrip{display:none !important}
  body{color:#000;background:#fff}
}

/* ==========================================================================
   19. Finish layer — texture, gradient hairlines, ambient light
   Small, cheap treatments that lift the whole thing from "clean template"
   to something that reads as designed. No extra requests: the grain is an
   inline SVG turbulence, everything else is gradients.
   ========================================================================== */


/* --- gradient hairline that lights up on card hover --- */
.card{isolation:isolate}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--aqua) 55%,transparent),
    color-mix(in srgb,var(--brand) 22%,transparent) 38%,
    transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .28s ease;pointer-events:none;z-index:3;
}
.card--link:hover::before{opacity:1}


/* --- warmer, deeper hero: copper bloom on the right, cool wash on the left --- */
.hero::before{
  background:radial-gradient(62% 78% at 82% 10%,rgba(59,155,232,.24),transparent 66%);
}
.hero__in{position:relative;z-index:2}
.hero h1 em{
  /* Stay inside the cool family: interpolating cyan -> copper passes through
     desaturated grey, which reads as a rendering fault on the headline. */
  background:linear-gradient(100deg,var(--aqua) 0%,#7FD3F5 46%,#BCE8FC 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --- eyebrow rule picks up the copper, tying headings to the CTAs --- */
.eyebrow::before{background:linear-gradient(90deg,var(--aqua),var(--flame))}

/* --- section headings get a hairline flourish --- */
.sec-head--center::after{
  content:"";display:block;width:58px;height:3px;border-radius:3px;
  margin:1.25rem auto 0;background:var(--grad-brand);opacity:.85;
}

/* --- stat numbers: copper-to-cyan sweep reads richer than flat brand --- */
.stat b{background:linear-gradient(125deg,var(--aqua),var(--brand-300) 45%,var(--brand) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stats{box-shadow:var(--sh-1)}

/* --- process steps: numbered chips in copper for warmth against the blue --- */
.step::before{background:var(--grad-copper);color:var(--on-copper);box-shadow:var(--sh-copper)}
.step{background:linear-gradient(170deg,color-mix(in srgb,var(--card) 100%,transparent),
      color-mix(in srgb,var(--bg-soft-2) 55%,var(--card)))}

/* --- panels: subtle inner sheen instead of a flat block --- */
.panel{position:relative;overflow:hidden}
.panel--brand{
  background:
    radial-gradient(80% 100% at 100% 0%,color-mix(in srgb,var(--aqua) 14%,transparent),transparent 62%),
    linear-gradient(165deg,color-mix(in srgb,var(--brand) 7%,var(--bg-soft)),var(--bg-soft));
}

/* --- header sharpens as it sticks --- */
.hdr.is-stuck{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  box-shadow:0 1px 0 var(--line),0 8px 28px rgba(5,10,19,.10);
}

/* --- CTA band: copper bloom bottom-right balances the cyan top --- */
.cta::before{
  background:
    radial-gradient(58% 100% at 50% 0%,rgba(58,214,239,.22),transparent 62%),
    radial-gradient(48% 80% at 88% 100%,rgba(224,122,60,.24),transparent 66%),
    radial-gradient(52% 80% at 8% 100%,rgba(18,135,216,.30),transparent 68%);
}

/* --- links and focus pick up the refreshed accents --- */
.txtlink{background:linear-gradient(90deg,var(--brand),var(--aqua));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.txtlink svg{color:var(--brand-ink)}
.chip{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 8%,var(--bg-soft-2)),var(--bg-soft-2))}


/* ==========================================================================
   20. Simplified navigation + compact strips
   ========================================================================== */

/* --- services dropdown: every service one hover/click from any page --- */
.nav__grp{position:relative;flex:none}
.nav__grp>a{display:inline-flex;align-items:center;white-space:nowrap}
.nav__chev{width:14px;height:14px;margin-left:.28rem;transition:transform .2s;vertical-align:-2px}
.nav__grp:hover .nav__chev,.nav__grp:focus-within .nav__chev{transform:rotate(180deg)}
.nav__menu{
  position:absolute;top:calc(100% + .4rem);left:50%;transform:translate(-50%,6px);
  min-width:290px;padding:.5rem;z-index:90;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  display:grid;gap:.1rem;
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav__grp:hover .nav__menu,.nav__grp:focus-within .nav__menu{
  opacity:1;visibility:visible;transform:translate(-50%,0)
}
.nav__menu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:.6rem}
.nav__menu a{
  display:flex;align-items:center;gap:.65rem;padding:.6rem .7rem;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:550;color:var(--tx-2);white-space:nowrap
}
.nav__menu a:hover{background:var(--bg-soft);color:var(--brand-ink)}
.nav__menu a svg{width:18px;height:18px;color:var(--brand-ink);flex:none}
.nav__menu a[aria-current="page"]::after{display:none}
.nav__all{
  margin-top:.25rem;border-top:1px solid var(--line);border-radius:0 0 var(--r-sm) var(--r-sm);
  color:var(--brand-ink)!important;font-weight:650!important
}
.nav__all svg{width:15px;height:15px}

/* --- nested services in the mobile drawer --- */
.dnav--sub{
  font-size:.94rem!important;font-weight:500!important;color:var(--tx-2)!important;
  padding-left:1.1rem!important;position:relative
}
.dnav--sub::before{
  content:"";position:absolute;left:.2rem;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--brand);transform:translateY(-50%);opacity:.5
}

/* --- compact service-areas strip (replaces the full split on the home page) --- */
.areastrip,.relstrip{
  display:flex;flex-wrap:wrap;gap:1.1rem 2rem;align-items:center;justify-content:space-between;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.25rem,2.6vw,1.8rem)
}
.areastrip h2{font-size:clamp(1.25rem,2vw,1.6rem)}
.areastrip .arealist,.relstrip .arealist{flex:1 1 min(100%,420px);justify-content:flex-end}
.relstrip__lbl{
  font-family:var(--f-head);font-weight:700;font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-3)
}
@media (max-width:700px){
  .areastrip .arealist,.relstrip .arealist{justify-content:flex-start}
}

/* ==========================================================================
   21. Light theme — hero, banners, CTA and footer move off dark ink.
   Only the slim top bar stays dark, to give the header an edge.
   ========================================================================== */

/* --- hero: light, photo-forward --- */
.hero{background:linear-gradient(178deg,var(--wash-1) 0%,var(--wash-2) 46%,var(--bg) 100%);color:var(--tx)}
.hero::before{
  background:
    radial-gradient(52% 62% at 88% 4%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 68%),
    radial-gradient(44% 54% at 2% 96%,color-mix(in srgb,var(--aqua) 10%,transparent),transparent 70%);
}
.hero h1{color:var(--tx)}
.hero h1 em{background:linear-gradient(100deg,var(--brand) 0%,#2E86DE 55%,#3FA3E8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{color:var(--tx-2)}
.hero__grid{align-items:center}
.badge{background:var(--card);border:1px solid var(--line);color:var(--tx-2);
  box-shadow:var(--sh-1);backdrop-filter:none}
.badge svg{color:var(--brand-ink)}
.trustbar{border-top:1px solid var(--line)}
.trustbar div{color:var(--tx-2)}
.trustbar svg{color:var(--brand-ink)}

/* hero photograph, framed rather than washed into the background */
.hero__figure{position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-3);border:1px solid var(--line);background:var(--bg-soft-2)}
.hero__figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;display:block}
/* On desktop the copy column is ~1000px tall while a 16/10 figure is ~300px,
   which left the photograph marooned in the middle of an empty column. Let it
   fill the row instead; object-fit keeps the crop sensible at any height. */
@media (min-width:960px){
  .hero__grid{align-items:stretch}
  .hero__figure{height:100%;min-height:24rem}
  /* Art-directed for the current photograph: a centred crop of this frame cut
     the second subject in half. Retune --hero-focal if the photo is replaced. */
  .hero__figure img{aspect-ratio:auto;height:100%;object-position:var(--hero-focal,68% 42%)}
}
.hero__note{
  /* Compact and bottom-left: a full-width bar covered the faces, which is
     the one thing this photograph is here to show. */
  position:absolute;left:.9rem;bottom:.9rem;right:auto;max-width:min(20rem,82%);
  display:flex;align-items:center;gap:.7rem;
  background:color-mix(in srgb,var(--card) 94%,transparent);
  border:1px solid var(--line);border-radius:var(--r);
  padding:.7rem .85rem;box-shadow:var(--sh-2);backdrop-filter:blur(8px)
}
.hero__note .fic{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--grad-cta);color:#fff}
.hero__note .fic svg{width:17px;height:17px}
.hero__note b{display:block;font-family:var(--f-head);font-size:.88rem;color:var(--tx);line-height:1.25}
.hero__note span{display:block;font-size:.76rem;color:var(--tx-2);line-height:1.35;margin-top:.1rem}

/* --- inner page banners --- */
.pbanner{background:linear-gradient(178deg,var(--wash-b1) 0%,var(--wash-b2) 60%,var(--bg) 100%);color:var(--tx)}
.pbanner::before{
  background:radial-gradient(56% 74% at 90% 0%,color-mix(in srgb,var(--brand) 11%,transparent),transparent 66%);
}
.pbanner h1{color:var(--tx)}
.pbanner .lede{color:var(--tx-2)}
.crumbs{color:var(--tx-3)}
.crumbs a:hover{color:var(--brand-ink)}
.hero .btn--onDark,.pbanner .btn--onDark{--btn-bg:var(--card);--btn-fg:var(--tx);
  border:1.5px solid var(--line-strong);backdrop-filter:none;box-shadow:var(--sh-1)}
.hero .btn--onDark:hover,.pbanner .btn--onDark:hover{
  border-color:var(--brand-ink);color:var(--brand-ink);box-shadow:var(--sh-2)}

/* --- closing CTA: soft brand tint instead of a dark slab --- */
.cta{
  background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 9%,var(--bg-soft)),var(--bg-soft));
  color:var(--tx);border:1px solid var(--line)
}
.cta::before{
  background:radial-gradient(58% 100% at 50% 0%,color-mix(in srgb,var(--aqua) 14%,transparent),transparent 66%);
}
.cta h2{color:var(--tx)}
.cta p{color:var(--tx-2)}
.cta .btn--onDark{--btn-bg:var(--card);--btn-fg:var(--tx);
  border:1.5px solid var(--line-strong);backdrop-filter:none;box-shadow:var(--sh-1)}
.cta .btn--onDark:hover{border-color:var(--brand-ink);color:var(--brand-ink)}

/* --- footer: light, bordered --- */
.ftr{background:var(--bg-soft);color:var(--tx-2);border-top:1px solid var(--line)}
.ftr h2{color:var(--tx)}
.ftr .brand__name{color:var(--tx)}
.ftr .brand__sub{color:var(--tx-3);opacity:1}
.ftr a:hover{color:var(--brand-ink)}
.ftr .nap .nic{background:var(--card);border-color:var(--line);color:var(--brand-ink)}
.ftr .nap dt{color:var(--tx-3)}
.ftr .nap dd{color:var(--tx)}
.socials a{background:var(--card);border:1px solid var(--line);color:var(--tx-2)}
.socials a:hover{background:var(--brand);border-color:var(--brand-ink);color:#fff}
.ftr__base{border-top:1px solid var(--line);color:var(--tx-3)}

/* the qcard only appears on dark surfaces now; keep it readable if reused */
.qcard{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-3);backdrop-filter:none}
.qcard h2{color:var(--tx)}
.qcard p{color:var(--tx-2)}
.qcard input,.qcard select,.qcard textarea{
  background:var(--bg);border:1.5px solid var(--line);color:var(--tx)}
.qcard input::placeholder,.qcard textarea::placeholder{color:var(--tx-3)}
.qcard .fine{color:var(--tx-3)}


/* ==========================================================================
   22. Theme toggle
   Light is the default. The toggle writes an explicit data-theme onto <html>
   and persists it, so the choice survives navigation and reloads.
   ========================================================================== */
.themebtn{
  /* Minimal: no chrome at rest, just the glyph. The 40px box stays for the
     tap target even though nothing is drawn around it. */
  display:inline-grid;place-items:center;position:relative;flex:none;
  width:40px;height:40px;border:0;border-radius:50%;
  background:transparent;color:var(--tx-3);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s ease,background-color .2s ease
}
.themebtn:hover{color:var(--brand-ink);background:color-mix(in srgb,var(--brand) 9%,transparent)}
.themebtn:active{transform:scale(.94)}
.themebtn svg{
  width:18px;height:18px;grid-area:1/1;
  transition:opacity .22s ease,transform .38s cubic-bezier(.2,.7,.3,1)
}
/* The glyph shows the mode you'll switch TO, matching the aria-label. */
.themebtn .i-moon{opacity:1;transform:none}
.themebtn .i-sun{opacity:0;transform:rotate(-90deg) scale(.55)}
:root[data-theme="dark"] .themebtn .i-moon{opacity:0;transform:rotate(90deg) scale(.55)}
:root[data-theme="dark"] .themebtn .i-sun{opacity:1;transform:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themebtn .i-moon{opacity:0;transform:rotate(90deg) scale(.55)}
  :root:not([data-theme="light"]) .themebtn .i-sun{opacity:1;transform:none}
}
.themebtn .i-sun,.themebtn .i-moon{display:grid;grid-area:1/1;place-items:center}

/* drawer variant keeps a text label */
.drawer .themebtn{
  width:100%;height:auto;border-radius:var(--r-pill);
  grid-auto-flow:column;justify-content:center;gap:.55rem;
  padding:.85rem 1rem;margin-top:.4rem;
  border:1.5px solid var(--line);color:var(--tx-2);
  font-family:var(--f-head);font-weight:650;font-size:.95rem
}
.drawer .themebtn:hover{background:var(--bg-soft);border-color:var(--brand-ink)}
.drawer .themebtn .i-sun,.drawer .themebtn .i-moon{grid-area:auto;position:static}
.drawer .themebtn .i-sun{display:none}
:root[data-theme="dark"] .drawer .themebtn .i-sun{display:grid}
:root[data-theme="dark"] .drawer .themebtn .i-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .drawer .themebtn .i-sun{display:grid}
  :root:not([data-theme="light"]) .drawer .themebtn .i-moon{display:none}
}
.drawer .themebtn svg{transform:none !important;opacity:1 !important}

/* ==========================================================================
   23. Photo-backed closing CTA
   One dark moment per page, using the copper/slate still life. The overlay
   is heavy enough that white type clears AA over any part of the image.
   ========================================================================== */
.cta--photo{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);border-color:transparent
}
.cta__bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:70% 50%
}
.cta--photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(5,10,19,.94) 24%,rgba(5,10,19,.72) 100%),
    radial-gradient(60% 90% at 12% 100%,rgba(11,105,172,.42),transparent 68%);
}
.cta--photo h2{color:#fff}
.cta--photo p{color:#C7D8E8}
.cta--photo .eyebrow{color:var(--aqua)}
.cta--photo .eyebrow::before{background:linear-gradient(90deg,var(--aqua),var(--flame))}
/* the ghost button goes back to its on-dark treatment inside the photo CTA */
.cta--photo .btn--onDark{
  --btn-bg:rgba(255,255,255,.10);--btn-fg:#fff;
  border:1.5px solid rgba(255,255,255,.30);box-shadow:none;backdrop-filter:blur(6px)
}
.cta--photo .btn--onDark:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.45)}

/* ==========================================================================
   24. Pipe logo lockup
   ========================================================================== */
.brand{flex-direction:row;align-items:center;gap:.6rem}
.brand__mark{width:54px;height:54px;border-radius:50%;flex:none;display:block}
.brand__name{font-size:1.5rem;letter-spacing:-.035em}
.brand .brand__sub{font-size:.58rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--tx-3);font-weight:700;padding-left:.15rem}
@media (min-width:1020px){.brand__logo{height:50px}}
.ftr .brand__logo{height:46px}
.ftr .brand .brand__sub{color:var(--tx-3)}

/* the photographic mark, used large on the About page */

/* media-led split: photo column keeps its own rhythm on wide screens */
@media (min-width:900px){
  .split--media{grid-template-columns:.95fr 1.05fr}
}
.split--media .media{position:sticky;top:96px}
@media (max-width:899px){.split--media .media{position:static}}

/* ==========================================================================
   23. Service quick-look modal
   ========================================================================== */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:var(--gut)}
.modal__scrim{position:absolute;inset:0;background:rgba(6,14,26,.62);backdrop-filter:blur(4px);
  animation:mFade .2s ease}

.modal__panel{
  position:relative;z-index:1;width:min(940px,100%);
  max-height:min(86vh,680px);overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);animation:mRise .26s cubic-bezier(.2,.7,.3,1);
  display:flex;flex-direction:column
}
@keyframes mFade{from{opacity:0}}
@keyframes mRise{from{opacity:0;transform:translateY(14px) scale(.985)}}

.modal__media{margin:0;background:var(--bg-soft-2);overflow:hidden;aspect-ratio:16/10;flex:none}
.modal__media img{width:100%;height:100%;object-fit:cover;display:block}
.modal__media[hidden]{display:none}
.modal__body{padding:clamp(1.3rem,3vw,1.9rem);overflow-y:auto;
  -webkit-overflow-scrolling:touch;min-height:0}
.modal__body h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.modal__body h3{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.modal__extra{padding:clamp(1.1rem,2.4vw,1.4rem);display:grid;gap:.6rem;
  border-top:1px solid var(--line);background:var(--bg-soft)}

.minifacts{display:grid;gap:.7rem;margin-bottom:.35rem}
.minifacts li{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem}
.minifacts svg{width:17px;height:17px;color:var(--brand-ink);flex:none;margin-top:.15rem}
.minifacts b{display:block;font-family:var(--f-head);font-size:.87rem;color:var(--tx);font-weight:650}
.minifacts span{color:var(--tx-2);line-height:1.35}

@media (min-width:760px){
  /* Photo + facts share the left column; text scrolls on the right.
     grid-template-rows uses minmax(0,1fr) so the text row can shrink below
     its content height — without that the row grows and nothing scrolls. */
  .modal__panel{
    display:grid;grid-template-columns:.88fr 1.12fr;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"media body" "extra body";
  }
  .modal__media{
    grid-area:media;aspect-ratio:4/3;
    padding:clamp(1.2rem,2.4vw,1.6rem) clamp(1rem,2vw,1.3rem) 0;
    background:linear-gradient(165deg,var(--bg-soft),var(--bg-soft-2));
    border-right:1px solid var(--line);border-top:0
  }
  .modal__media img{border-radius:var(--r);box-shadow:var(--sh-2)}
  .modal__extra{
    grid-area:extra;border-top:0;border-right:1px solid var(--line);
    background:linear-gradient(165deg,var(--bg-soft),var(--bg-soft-2));
    align-content:start;overflow-y:auto;min-height:0
  }
  .modal__body{grid-area:body;min-height:0}
}
@media (max-width:759px){
  /* On a phone the whole sheet scrolls as one — pinning the photo and
     scrolling only the middle column made the panel feel stuck. */
  .modal__panel{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal__media{order:1;flex:none}
  .modal__body{order:2;overflow:visible;min-height:auto}
  .modal__extra{order:3}
}
.modal__x{
  position:absolute;top:.7rem;right:.7rem;z-index:3;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--tx);
  font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:var(--sh-2)
}
.modal__x:hover{background:var(--bg-soft);color:var(--brand-ink)}
.flist--tight{gap:.7rem}
.flist--tight .fic{width:26px;height:26px;border-radius:8px}
.flist--tight .fic svg{width:14px;height:14px}
.flist--tight h3{font-size:.95rem}
.flist--tight p{font-size:.87rem}
/* short viewports: drop the banner height so the text still has room */
@media (max-height:660px) and (min-width:760px){.modal__media{aspect-ratio:3/2}}
@media (max-height:640px) and (max-width:759px){.modal__media{aspect-ratio:21/9}}
@media (prefers-reduced-motion:reduce){
  .modal__scrim,.modal__panel{animation:none}
}

/* ==========================================================================
   24. Service areas — coverage checker, response-time bands, neighbourhoods
   ========================================================================== */
.bands{display:grid;gap:clamp(.9rem,2vw,1.3rem)}
.band{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.2rem,2.4vw,1.7rem);box-shadow:var(--sh-1)}
.band__head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.1rem}
.band__ic{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.band__ic svg{width:23px;height:23px}
.band__head h3{font-size:1.12rem}
.band__head p{color:var(--tx-2);font-size:.92rem;margin-top:.25rem}
.band__count{margin-left:auto;flex:none;font-size:.78rem;font-weight:650;color:var(--tx-3);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.25rem .7rem;white-space:nowrap}
@media (max-width:560px){.band__count{display:none}}
.areapill{
  display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:var(--r-pill);
  background:var(--bg-soft);border:1px solid var(--line);font-size:.9rem;font-weight:550;
  text-decoration:none;color:var(--tx-2);transition:border-color .18s,color .18s,transform .18s
}
.areapill:hover{border-color:var(--brand-ink);color:var(--brand-ink);transform:translateY(-2px)}
.areapill svg{width:14px;height:14px;color:var(--brand-ink);flex:none}
.chips--wide{gap:.5rem}
.chips--wide .chip{font-size:.85rem;padding:.4rem .85rem}

/* ---- hero service picker: all seven services above the fold ---- */
.picker{margin-top:1.6rem}
.picker__lbl{display:block;font-family:var(--f-head);font-weight:650;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin-bottom:.6rem}
.picker__row{display:flex;flex-wrap:wrap;gap:.5rem}
.pick{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .85rem;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-size:.86rem;font-weight:600;color:var(--tx-2);text-decoration:none;
  transition:border-color .16s,color .16s,transform .16s,box-shadow .16s
}
.pick svg{width:16px;height:16px;color:var(--brand-ink);flex:none}
.pick:hover{border-color:var(--brand-ink);color:var(--brand-ink);transform:translateY(-2px);
  box-shadow:var(--sh-2)}
@media (max-width:520px){
  /* The row scrolls, but a chip sliced by the viewport edge just reads as a
     rendering fault. The fade says "there is more this way". */
  .picker{position:relative}
  .picker::after{
    content:"";position:absolute;right:0;bottom:.4rem;width:2.4rem;
    height:2.35rem;pointer-events:none;
    background:linear-gradient(to right,transparent,var(--wash-1) 78%)
  }
  .picker__row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;
    padding-right:1.6rem;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .pick{flex:none;scroll-snap-align:start}
  .picker__row::-webkit-scrollbar{height:3px}
  .picker__row::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
}

/* ==========================================================================
   25. Mobile touch-target corrections
   Audit at 375px found several controls under the ~44px guidance, including
   the topbar phone link — the most important tap target on the site.
   ========================================================================== */

/* topbar links: 23px tall -> comfortable target */
.topbar a{padding-block:.6rem}
@media (max-width:479px){
  /* keep the two actionable links; the coverage link duplicates page content */
  .topbar__list a[href^="/service-areas"],
  .topbar__list a[href$="service-areas.html"]{display:none}
}

/* inline arrow links: give them a real hit area without changing their look */
.txtlink{min-height:42px;align-items:center}
.card .txtlink{min-height:38px}

/* consent checkbox: 19px is too small to hit reliably on a phone */
.check{min-height:44px;align-items:center}
.check input{width:22px;height:22px}

/* the fixed call bar is 73px tall but body padding was 72px, so the last
   pixel of content sat underneath it */
@media (max-width:639px){
  body{padding-bottom:88px}
}

/* WCAG 2.2 SC 2.5.8 (AA) requires a 24x24 CSS-px target. Breadcrumb links and
   the consent checkbox sat a hair under it. Primary actions (buttons, call
   bar, nav) are sized to the roomier 44px comfort guidance instead. */
.crumbs a{display:inline-flex;align-items:center;min-height:24px}
.check input{width:24px;height:24px}
.socials a{width:40px;height:40px}

/* ==========================================================================
   26. Overflow containment
   A grid/flex child defaults to min-width:auto, which refuses to shrink below
   its content. The nowrap picker row therefore inflated the whole hero column
   to its scroll width (~837px) and pushed the heading off-screen on phones.
   Children that contain scrollers must be allowed to shrink.
   ========================================================================== */
.hero__grid > *,
.split > *,
.grid > *,
.picker,
.picker__row{min-width:0}
.picker__row{max-width:100%}

/* ==========================================================================
   27. Service-area cards
   ========================================================================== */
.areagrid{display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.areacard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.25rem,2.4vw,1.6rem);box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s}
.areacard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);
  border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.areacard__head{display:flex;align-items:center;gap:.75rem;margin-bottom:.7rem}
.areacard__ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.areacard__ic svg{width:20px;height:20px}
.areacard h3{font-size:1.08rem}
.areacard p{color:var(--tx-2);font-size:.93rem}


/* ---- brand presence: larger mark in the footer, badge on the About panel ---- */
.ftr .brand{flex-direction:column;align-items:flex-start;gap:.75rem}
.ftr .brand__mark{width:104px;height:104px;box-shadow:0 8px 26px rgba(0,0,0,.35)}
.ftr .brand__name{font-size:1.85rem}
.ftr .brand__sub{font-size:.64rem;letter-spacing:.24em}
@media (min-width:760px){
  .ftr .brand__mark{width:120px;height:120px}
}

/* large badge sitting above the About facts panel */
.panelbadge{display:block;width:150px;height:150px;margin:0 auto .35rem;border-radius:50%;
  box-shadow:0 10px 30px rgba(8,20,38,.18)}

/* ==========================================================================
   28. Header fit on narrow phones
   The enlarged brand mark + toggle + burger exceeded ~360px, and .btn-row
   wraps by default — which pushed the toggle onto its own line above the
   hamburger. The header action group must never wrap; the brand shrinks.
   ========================================================================== */
.hdr__in{gap:.75rem}
.hdr__in > .btn-row{flex-wrap:nowrap;flex:none}
.hdr .brand{min-width:0;overflow:hidden}
.hdr .brand__txt{min-width:0}
.hdr .brand__name,.hdr .brand__sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:400px){
  .hdr .brand__mark{width:44px;height:44px}
  .hdr .brand__name{font-size:1.24rem}
  .hdr .brand__sub{font-size:.52rem;letter-spacing:.14em}
  .hdr__in{min-height:66px;gap:.5rem}
  .themebtn{width:36px;height:36px}
  .burger{width:42px;height:42px}
}
@media (max-width:330px){
  /* last resort: the wordmark alone still identifies the brand */
  .hdr .brand__sub{display:none}
  .hdr .brand__mark{width:38px;height:38px}
}

/* ---- topbar promise: keep it to one line on phones ----
   The full sentence needs ~333px and phones under 360px give ~323px, so it
   wrapped and added 22px to the bar. Shorter phrasing below 600px instead of
   shrinking the type under a readable size. */
.pulse{gap:.45rem}
.pulse__sm{display:none}
@media (max-width:600px){
  .pulse__full{display:none}
  .pulse__sm{display:inline;white-space:nowrap}
}
@media (max-width:345px){
  .topbar{font-size:.78rem}
}