/* ============================================================
   Valleywide Leak Detection — "Built to convert"
   Palette: deep navy ground, warm cream + sand neutrals,
   sunbaked clay for action. No cool grey, no amber.
   ============================================================ */
:root{
  --navy:#021D3B;
  --navy-2:#022D57;
  --blue:#0868B4;
  --cream:#FBF7F1;
  --sand:#F4E7D6;
  --sand-line:#E6D3BC;
  --white:#FFFFFF;
  --ink:#021D3B;
  --muted:#33475B;
  --clay:#B3400F;
  --clay-deep:#8F320B;
  --sun:#FF9E5E;
  --line:rgba(2,29,59,.12);
  --line-strong:rgba(2,29,59,.22);
  --r-lg:26px;
  --r:18px;
  --r-sm:12px;
  --shadow:0 1px 0 rgba(2,29,59,.05), 0 18px 40px -26px rgba(2,29,59,.45);
  --shadow-lift:0 2px 0 rgba(2,29,59,.06), 0 28px 56px -28px rgba(2,29,59,.5);
  --display:'Bricolage Grotesque','Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pad:clamp(18px,5vw,40px);
  --bar:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  font-weight:450;
  overflow-x:hidden;
  padding-bottom:var(--bar);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--clay);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--clay-deep)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin:0 0 .5em}
h2{font-size:clamp(1.85rem,6.2vw,3rem)}
h3{font-size:clamp(1.18rem,3.4vw,1.5rem);letter-spacing:-.015em;line-height:1.18}
h4{font-size:1.02rem;letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin-bottom:.45em}
strong{font-weight:800}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.hero :focus-visible,.cta-block :focus-visible{outline-color:var(--sun)}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--navy);padding:14px 20px;z-index:200;border-radius:0 0 var(--r-sm) 0;font-weight:800}
.skip:focus{left:0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.narrow{max-width:760px}
section{padding:clamp(52px,11vw,104px) 0}
.s-cream{background:var(--cream)}
.s-white{background:var(--white)}
.s-sand{background:var(--sand)}
.s-navy{background:var(--navy);color:#fff}
.s-navy h2,.s-navy h3,.s-navy h4{color:#fff}
.s-navy p{color:rgba(255,255,255,.88)}
.eyebrow{
  font-family:var(--body);font-weight:800;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay);margin:0 0 14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:currentColor;flex:none}
.s-navy .eyebrow{color:var(--sun)}
.lede{font-size:clamp(1.06rem,3.2vw,1.28rem);line-height:1.55;color:var(--muted);max-width:62ch}
.s-navy .lede{color:rgba(255,255,255,.9)}
.head-block{max-width:66ch;margin-bottom:clamp(28px,5vw,46px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:15px 24px;border-radius:999px;
  font-family:var(--body);font-weight:800;font-size:1.02rem;letter-spacing:-.005em;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{flex:none}
.btn-clay{background:var(--clay);color:#fff;box-shadow:0 10px 24px -12px rgba(179,64,15,.85)}
.btn-clay:hover{background:var(--clay-deep);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);color:#fff}
.btn-white{background:#fff;color:var(--clay);border-color:#fff}
.btn-white:hover{background:var(--cream);color:var(--clay-deep)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line-strong)}
.btn-ghost:hover{background:rgba(2,29,59,.06);color:var(--navy)}
.btn-ghost-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost-light:hover{background:rgba(255,255,255,.14);color:#fff}
.btn-block{width:100%}
.btn-row{display:flex;flex-direction:column;gap:12px}
@media(min-width:520px){.btn-row{flex-direction:row;flex-wrap:wrap}}
.sub-act{font-size:.95rem;color:var(--muted)}
.s-navy .sub-act,.hero .sub-act{color:rgba(255,255,255,.78)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:100;background:rgba(251,247,241,.94);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:14px;min-height:70px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy);margin-right:auto}
.brand-chip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px;flex:none;line-height:0}
.brand-chip img{width:38px;height:38px;object-fit:contain;border-radius:7px}
.brand-txt strong{display:block;font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.03em;line-height:1.05}
.brand-txt span{display:block;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700}
.nav-desk{display:none}
.head-call{display:none}
.menu{position:relative}
.menu summary{
  list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;
  width:auto;min-height:48px;padding:0 16px;border-radius:999px;border:2px solid var(--line-strong);
  font-weight:800;font-size:.92rem;color:var(--navy);cursor:pointer;background:#fff;
}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--navy);color:#fff;border-color:var(--navy)}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 12px);width:min(84vw,300px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lift);
  padding:10px;z-index:120;
}
.menu-panel a{
  display:block;padding:13px 14px;border-radius:var(--r-sm);text-decoration:none;
  color:var(--navy);font-weight:700;font-size:1rem;
}
.menu-panel a:hover{background:var(--sand);color:var(--navy)}
.head-tel{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;background:var(--clay);color:#fff;text-decoration:none;font-weight:800;font-size:.95rem}
.head-tel:hover{background:var(--clay-deep);color:#fff}
@media(max-width:979px){
  .head-tel{width:48px;padding:0;border-radius:50%}
  .head-tel span{display:none}
  .brand-txt strong{font-size:.95rem}
}
@media(max-width:479px){
  .menu-label{display:none}
  .menu summary{width:48px;padding:0}
  .head-in{gap:10px}
  .brand-txt span{display:none}
}
@media(min-width:1060px){
  .menu{display:none}
  .nav-desk{display:flex;align-items:center;gap:4px}
  .nav-desk a{
    text-decoration:none;color:var(--navy);font-weight:700;font-size:.95rem;
    padding:10px 12px;border-radius:999px;
  }
  .nav-desk a:hover{background:rgba(2,29,59,.07);color:var(--navy)}
  .head-call{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.15;margin-left:8px}
}

/* ---------- hero ---------- */
.hero{
  position:relative;color:#fff;
  background-image:linear-gradient(178deg,rgba(2,29,59,.90) 0%,rgba(2,29,59,.86) 45%,rgba(2,21,43,.95) 100%),url('/img/phx-backyard-pool-446348208.webp');
  background-size:cover;background-position:center;
  padding:clamp(40px,9vw,84px) 0 clamp(52px,10vw,96px);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background:repeating-linear-gradient(90deg,var(--sun) 0 22px,var(--clay) 22px 44px,var(--blue) 44px 66px);
  opacity:.9;
}
.hero-grid{display:grid;gap:clamp(30px,6vw,52px)}
.tagline-pill{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:700;
  letter-spacing:.04em;margin:0 0 20px;color:#fff;
}
.tagline-pill b{color:#FFE2CC;font-weight:800}
h1{
  font-size:clamp(2.5rem,10.4vw,4.5rem);line-height:.98;letter-spacing:-.04em;
  margin:0 0 18px;color:#fff;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--sun);display:block}
/* Photo bands. Same navy scrim as the hero so the page reads as one piece.
   Only ever applied to DARK sections - a photograph behind dark-on-light text fails contrast -
   and each keeps a solid navy background-color as a fallback if the image never loads. */
.s-photo{position:relative;background-color:var(--navy);background-size:cover;
  background-position:center;background-repeat:no-repeat}
.s-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(2,29,59,.93) 0%,rgba(2,29,59,.88) 50%,rgba(2,21,43,.95) 100%)}
.s-photo>*{position:relative;z-index:1}
.s-photo--sunset{background-image:url('/img/phx-sunset-band-446842505.webp')}
.s-photo--papago{background-image:url('/img/phx-papago-band-364319978.webp')}
/* The service-areas band moved from cream to navy, so its strapline can no longer be clay
   (#B3400F on navy is unreadable). Sun on navy measures 8.3:1 - AAA. The white area pills keep
   navy text inside them, so they are unaffected and read well against the photograph. */
.s-navy .area-sent,.s-photo .area-sent{color:var(--sun)}
.hero .hero-tag{
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  color:#fff;font-size:clamp(1.14rem,3.9vw,1.5rem);line-height:1.3;
  max-width:26ch;margin:0 0 14px;
}
.hero .hero-tag b{color:var(--sun);font-weight:800;white-space:nowrap}
@media(min-width:700px){.hero .hero-tag{max-width:34ch}}
.hero p.lede{color:rgba(255,255,255,.92);font-size:clamp(1.08rem,3.6vw,1.34rem);max-width:34ch}
@media(min-width:760px){.hero p.lede{max-width:52ch}}
.hero-acts{margin-top:28px}
.hero-facts{
  list-style:none;padding:0;margin:30px 0 0;display:grid;gap:11px;
  border-top:1px solid rgba(255,255,255,.2);padding-top:22px;
}
.hero-facts li{display:flex;gap:11px;align-items:flex-start;font-weight:650;font-size:.99rem;color:rgba(255,255,255,.93);margin:0}
.tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--sun);display:grid;place-items:center;margin-top:1px}
.tick svg{width:13px;height:13px;stroke:#3A1703;stroke-width:3.4;fill:none}
@media(min-width:560px){.hero-facts{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){
  .hero-grid{grid-template-columns:1.1fr .9fr;align-items:start;gap:56px}
  .hero-facts{grid-template-columns:1fr 1fr}
}

/* ---------- form ---------- */
.form-card{
  background:var(--white);color:var(--ink);border-radius:var(--r-lg);
  padding:clamp(22px,5.2vw,34px);box-shadow:var(--shadow-lift);
  border:1px solid rgba(255,255,255,.5);scroll-margin-top:90px;
}
.form-card h2{font-size:clamp(1.5rem,5.4vw,1.95rem);margin-bottom:8px}
.form-card .form-note{color:var(--muted);font-size:.98rem;margin-bottom:20px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:800;font-size:.9rem;letter-spacing:.01em;margin-bottom:7px;color:var(--navy)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:1.02rem;color:var(--ink);
  background:var(--cream);border:2px solid var(--line-strong);border-radius:14px;
  padding:14px 15px;min-height:56px;
}
.field textarea{min-height:104px;resize:vertical;line-height:1.5}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%2333475B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--clay);background:#fff;outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid rgba(179,64,15,.35);outline-offset:1px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.or-call{
  margin:18px 0 0;padding-top:18px;border-top:1px dashed var(--sand-line);
  display:flex;flex-direction:column;gap:10px;font-size:.98rem;color:var(--muted);
}
.or-call a{font-weight:800}
.big-tel{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:var(--clay);text-decoration:none;display:inline-block}
.big-tel:hover{text-decoration:underline}

/* ---------- trust band ---------- */
.trust{display:grid;gap:14px}
.trust-item{
  background:#fff;border:1px solid var(--sand-line);border-radius:var(--r);
  padding:20px 20px 22px;box-shadow:0 1px 0 rgba(2,29,59,.04);
}
.trust-item h3{font-size:1.06rem;margin-bottom:6px}
.trust-item p{margin:0;font-size:.96rem;color:var(--muted)}
.ico{width:44px;height:44px;border-radius:13px;background:var(--navy);display:grid;place-items:center;margin-bottom:14px}
.ico svg{width:23px;height:23px;stroke:var(--sun);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:620px){.trust{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.trust{grid-template-columns:repeat(4,1fr)}}

/* ---------- bucket test ---------- */
.steps{list-style:none;padding:0;margin:0;counter-reset:st}
.steps li{
  counter-increment:st;position:relative;padding:0 0 22px 60px;margin:0;
}
.steps li::before{
  content:counter(st);position:absolute;left:0;top:0;
  width:42px;height:42px;border-radius:14px;background:var(--navy);color:var(--sun);
  font-family:var(--display);font-weight:800;font-size:1.15rem;
  display:grid;place-items:center;
}
.steps li::after{
  content:"";position:absolute;left:20px;top:48px;bottom:2px;width:2px;background:var(--sand-line);
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{margin-bottom:5px;font-size:1.12rem}
.steps p{margin:0;color:var(--muted);font-size:1rem}
.callout{
  margin-top:clamp(26px,5vw,36px);background:var(--navy);color:#fff;
  border-radius:var(--r-lg);padding:clamp(22px,5vw,34px);position:relative;overflow:hidden;
}
.callout::before{
  content:"";position:absolute;inset:0 auto 0 0;width:7px;
  background:linear-gradient(var(--sun),var(--clay));
}
.callout .eyebrow{color:var(--sun)}
.callout h3{font-size:clamp(1.3rem,4.6vw,1.7rem);margin-bottom:10px}
.callout p{color:rgba(255,255,255,.9);margin:0}
.callout p + p{margin-top:.8em}
.two-col{display:grid;gap:clamp(26px,5vw,48px)}
@media(min-width:900px){.two-col{grid-template-columns:1fr 1fr;align-items:start}}
.panel{
  background:#fff;border:1px solid var(--sand-line);border-radius:var(--r-lg);
  padding:clamp(22px,5vw,34px);box-shadow:var(--shadow);
}

/* ---------- evaporation illustration ---------- */
.evap{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg);padding:22px;
}
.vessel{text-align:center}
.vessel .box{
  position:relative;height:130px;border-radius:10px 10px 16px 16px;
  border:3px solid rgba(255,255,255,.5);border-top:none;overflow:hidden;
  background:rgba(255,255,255,.05);
}
.vessel .water{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#0E7FD1,#0868B4)}
.vessel.a .water{height:72%}
.vessel.b .water{height:72%}
.vessel.c .water{height:52%}
.mark{position:absolute;left:0;right:0;top:20%;border-top:2px dashed var(--sun)}
.vessel figcaption{margin-top:10px;font-size:.88rem;font-weight:700;color:rgba(255,255,255,.9);line-height:1.35}
.vessel figcaption small{display:block;font-weight:500;color:rgba(255,255,255,.72);font-size:.82rem}

/* ---------- services ---------- */
.cards{display:grid;gap:18px}
@media(min-width:600px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(4,1fr);gap:20px}}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--sand)}
.card-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.14rem;margin-bottom:7px}
.card h3 a{color:var(--navy);text-decoration:none}
.card h3 a:hover{color:var(--clay);text-decoration:underline}
.card p{font-size:.95rem;color:var(--muted);margin:0 0 14px}
.card .more{margin-top:auto;font-weight:800;font-size:.92rem;color:var(--clay);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.card .more:hover{text-decoration:underline}
.card-note{margin-top:26px;font-size:.95rem;color:var(--muted);background:var(--cream);border:1px dashed var(--sand-line);border-radius:var(--r);padding:16px 18px}
.s-white .card-note{background:var(--cream)}

/* ---------- technique chips ---------- */
.tech{display:grid;gap:14px}
@media(min-width:560px){.tech{grid-template-columns:1fr 1fr}}
@media(min-width:560px) and (max-width:959px){
  /* two columns: an odd last card runs full width rather than sitting half-empty */
  .tech-item:last-child:nth-child(odd){grid-column:1/-1}
}
@media(min-width:960px){.tech{grid-template-columns:repeat(5,1fr)}
  .tech-item{flex-direction:column;align-items:flex-start;gap:11px;padding:18px 16px}
  .tech-tile{width:52px;height:52px}
  .tech-tile svg{width:26px;height:26px}}
.tech-item{background:#fff;border:1px solid var(--sand-line);border-radius:var(--r);padding:14px;display:flex;gap:14px;align-items:center}
.tech-tile{width:64px;height:64px;border-radius:12px;flex:none;background:var(--navy);display:grid;place-items:center}
.tech-tile svg{width:30px;height:30px;stroke:var(--sun);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tech-item strong{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.015em;font-size:1rem}
.tech-item span{font-size:.88rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;padding:0;list-style:none}
.chips li{margin:0}
.chip{
  display:inline-block;background:var(--navy);color:#fff;border-radius:999px;
  padding:8px 15px;font-size:.86rem;font-weight:700;
}

/* ---------- big quote band ---------- */
.jobsite{position:relative;background:var(--navy-2);overflow:hidden}
.jobsite::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 90% at 88% 10%,rgba(8,104,180,.55),transparent 62%),
    radial-gradient(52% 80% at 4% 96%,rgba(179,64,15,.42),transparent 64%);
}
.jobsite::after{
  content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background:repeating-linear-gradient(90deg,var(--sun) 0 22px,var(--clay) 22px 44px,var(--blue) 44px 66px);
}
.jobsite-in{position:relative;padding:clamp(52px,11vw,104px) 0}
.jobsite blockquote{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.55rem,6.4vw,2.6rem);line-height:1.14;letter-spacing:-.032em;color:#fff;text-wrap:balance}
.jobsite cite{display:block;margin-top:18px;font-family:var(--body);font-style:normal;font-weight:700;font-size:.9rem;color:#FFE2CC;letter-spacing:.08em;text-transform:uppercase}
.bigmark{display:block;font-family:var(--display);font-weight:800;font-size:clamp(3rem,10vw,4.6rem);line-height:.9;color:var(--sun);margin:0 0 2px;height:.62em;overflow:hidden}
.photo-cap{font-size:1rem;color:rgba(255,255,255,.86);margin:22px 0 0;max-width:56ch}

/* ---------- reviews ---------- */
.quotes{display:grid;gap:18px}
@media(min-width:880px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg);padding:26px 24px;
}
.quote svg{width:30px;height:30px;fill:var(--sun);margin-bottom:12px}
.quote p{font-size:1.04rem;line-height:1.5;color:#fff;margin:0 0 14px}
.quote figcaption{font-size:.88rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#FFE2CC}

/* ---------- areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0}
.areas li{margin:0}
.areas a{
  display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 16px;font-size:.94rem;font-weight:700;color:var(--navy);text-decoration:none;
  min-height:44px;line-height:22px;
}
.areas a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.area-sent{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,4.4vw,1.7rem);letter-spacing:-.025em;color:var(--clay);margin:0 0 6px}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:0 auto}
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:12px;overflow:hidden;
}
.faq details[open]{border-color:var(--line-strong);box-shadow:var(--shadow)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 54px 18px 20px;position:relative;
  font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.015em;
  line-height:1.28;color:var(--navy);min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:20px;top:calc(50% - 6px);
  width:11px;height:11px;border-right:3px solid var(--clay);border-bottom:3px solid var(--clay);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:calc(50% - 3px)}
.faq summary:hover{background:var(--cream)}
.faq .answer{padding:0 20px 20px;color:var(--muted)}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- CTA block ---------- */
.cta-block{background:var(--clay);color:#fff;text-align:left}
.cta-block h2{color:#fff;max-width:22ch}
.cta-block p{color:rgba(255,255,255,.93)}
.cta-inner{display:grid;gap:26px}
@media(min-width:900px){.cta-inner{grid-template-columns:1.1fr .9fr;align-items:center;gap:48px}}
.cta-card{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.3);border-radius:var(--r-lg);padding:clamp(20px,4.6vw,30px)}
.cta-block .btn-ghost-light{background:transparent;border-color:#fff}
.cta-block .btn-ghost-light:hover{background:rgba(0,0,0,.22);color:#fff}
.cta-card h3{font-size:1.2rem;margin-bottom:8px;color:#fff}
.cta-card p{font-size:.97rem;margin-bottom:18px}

/* ---------- footer ---------- */
.site-foot{background:var(--navy);color:rgba(255,255,255,.82);padding:clamp(46px,8vw,76px) 0 0;font-size:.96rem}
.foot-grid{display:grid;gap:34px}
@media(min-width:700px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.foot-grid{grid-template-columns:1.5fr 1fr 1.2fr 1.1fr;gap:40px}}
.foot-brand .brand-chip{display:inline-block;background:#fff;padding:8px;border-radius:14px;border:none}
.foot-brand .brand-chip img{width:60px;height:60px}
.foot-brand strong{display:block;font-family:var(--display);font-weight:800;font-size:1.22rem;color:#fff;letter-spacing:-.03em;margin:14px 0 8px}
.foot-brand p{color:rgba(255,255,255,.78);max-width:34ch;margin:0 0 16px}
.foot h2,.site-foot h2{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sun);font-family:var(--body);font-weight:800;margin:0 0 14px}
.foot-list{list-style:none;padding:0;margin:0}
.foot-list li{margin-bottom:9px}
.foot-list a,.site-foot a{color:rgba(255,255,255,.86);text-decoration:none}
.foot-list a:hover,.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-areas{display:flex;flex-wrap:wrap;gap:7px 14px;list-style:none;padding:0;margin:0;font-size:.92rem}
.foot-areas li{margin:0}
.nap{list-style:none;padding:0;margin:0}
.nap li{display:flex;gap:11px;margin-bottom:12px;align-items:flex-start}
.nap svg{width:18px;height:18px;flex:none;margin-top:4px;stroke:var(--sun);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nap a{font-weight:700;color:#fff}
.legal{
  margin-top:clamp(34px,6vw,54px);border-top:1px solid rgba(255,255,255,.18);
  padding:24px 0 30px;display:flex;flex-direction:column;gap:14px;font-size:.88rem;color:rgba(255,255,255,.68);
}
.legal-links{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:0}
.legal-links li{margin:0}
@media(min-width:820px){.legal{flex-direction:row;align-items:center;justify-content:space-between}}

/* ---------- sticky action bar (mobile) ---------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:rgba(2,29,59,.97);backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.18);
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
}
.actionbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:54px;border-radius:14px;text-decoration:none;font-weight:800;font-size:.78rem;
  letter-spacing:.01em;padding:6px 4px;line-height:1.1;text-align:center;
}
.actionbar svg{width:19px;height:19px;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ab-call{background:var(--clay);color:#fff}
.ab-call svg{stroke:#fff}
.ab-sms{background:var(--sun);color:#3A1703}
.ab-sms svg{stroke:#3A1703}
.ab-form{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4)}
.ab-form svg{stroke:#fff}
body{--bar:76px}
@media(min-width:980px){
  .actionbar{display:none}
  body{--bar:0px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .btn:hover,.card:hover{transform:none}
}

/* ============================================================
   INTERIOR PAGES - added when d3 became the site template.
   Uses d3's own tokens only: --navy --clay --cream --sand --r --shadow etc.
   ============================================================ */

/* breadcrumbs */
.crumbs{background:var(--white);border-bottom:1px solid var(--line);font-size:.875rem}
.crumbs .wrap{padding:.75rem var(--pad)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:center}
.crumbs li{display:flex;align-items:center;gap:.5rem;color:var(--muted)}
.crumbs li+li::before{content:"";width:5px;height:5px;border-right:1.5px solid var(--line-strong);
  border-bottom:1.5px solid var(--line-strong);transform:rotate(-45deg);display:block}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--clay);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* page title band */
.page-head{background:var(--navy);color:#fff;padding:clamp(2.2rem,6vw,3.6rem) 0}
.page-head .eyebrow{color:var(--sun)}
.page-head h1{color:#fff;margin:0 0 .5rem}
.page-head .lede{color:rgba(255,255,255,.82);font-size:clamp(1.02rem,2.4vw,1.2rem);max-width:44ch;margin:0}
.page-head .head-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

/* long-form prose */
.prose{max-width:68ch}
.prose>*+*{margin-top:1.1em}
.prose h2{margin-top:2em;font-size:clamp(1.35rem,3.4vw,1.85rem)}
.prose h3{margin-top:1.6em;font-size:1.12rem}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.45em}
.prose a:not(.btn){color:var(--clay);font-weight:600}
.prose .callout{background:var(--sand);border:1px solid var(--sand-line);border-left:5px solid var(--clay);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1.1rem 1.25rem}
.prose .callout p:last-child{margin-bottom:0}
.prose .src{font-size:.85rem;color:var(--muted);font-style:italic}

/* body + sticky rail */
.with-rail{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:1000px){
  .with-rail{grid-template-columns:minmax(0,1fr) 340px;gap:3rem;align-items:start}
  .rail{position:sticky;top:1.25rem}
}
.rail-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.35rem;box-shadow:var(--shadow);margin-bottom:1.1rem}
.rail-card h2,.rail-card h3{font-size:1.02rem;margin:0 0 .75rem}
.rail-card ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.rail-card li+li{margin-top:.5rem}
.rail-card a{color:var(--ink);text-decoration:none}
.rail-card a:hover{color:var(--clay);text-decoration:underline}

/* related links grid */
.rel{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.rel a{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.8rem .95rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:.94rem}
.rel a:hover{border-color:var(--clay);color:var(--clay)}
.rel a span{display:block;font-weight:400;font-size:.84rem;color:var(--muted);margin-top:.15rem}

/* area index */
.az{columns:2;column-gap:1.6rem}
@media(min-width:760px){.az{columns:4}}
.az a{display:block;padding:.35rem 0;text-decoration:none;color:var(--ink);break-inside:avoid}
.az a:hover{color:var(--clay);text-decoration:underline}

/* simple data table */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.tbl thead th{background:var(--navy);color:#fff;font-family:var(--display);font-size:.82rem;
  letter-spacing:.04em;text-transform:uppercase}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600}
.tbl-wrap{overflow-x:auto}

/* ============================================================
   FOOTER - Nevada's four-column architecture in d3's tokens.
   Brandon 9/22: "make footer like nevada leak".
   ============================================================ */
.site-foot{background:var(--navy);color:rgba(255,255,255,.76);padding:clamp(2.6rem,6vw,4rem) 0 2rem;
  font-size:.95rem;line-height:1.65}
.site-foot a{color:rgba(255,255,255,.88);text-decoration:none}
.site-foot a:hover{color:var(--sun);text-decoration:underline}
.site-foot h2{font-family:var(--display);color:#fff;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 1.1rem;font-weight:700}
.foot-grid{display:grid;gap:2.4rem;grid-template-columns:1fr}
@media(min-width:720px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.foot-grid{grid-template-columns:1.55fr 1fr 1fr 1.1fr;gap:2.6rem}}

.f-lockup{display:flex;align-items:center;gap:.85rem;margin:0 0 1.1rem}
.f-lockup strong{display:block;font-family:var(--display);color:#fff;font-size:1.06rem;
  letter-spacing:.01em;line-height:1.2}
.f-est{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sun);font-weight:700;margin-top:.25rem}
.foot-brand p{margin:0 0 .9rem;max-width:42ch}
.f-scope{color:rgba(255,255,255,.62);font-size:.88rem}
.f-tagline{font-family:var(--display);color:#fff;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:.95rem;margin:0 0 .9rem!important}
.f-review{display:inline-block;color:var(--sun)!important;font-weight:700;margin:0 0 1.1rem;
  border-bottom:1px solid rgba(255,158,94,.4)}
.f-social{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.6rem}
.f-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:.16s}
.f-social a:hover{background:var(--clay);border-color:var(--clay)}
.f-social svg{width:17px;height:17px;fill:#fff}
.f-qlabel{margin-bottom:.7rem!important}
.f-quick{display:flex;flex-wrap:wrap;gap:.5rem}
.f-quick a{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.44rem .9rem;
  font-size:.86rem;line-height:1;white-space:nowrap}
.f-quick a:hover{background:rgba(255,255,255,.1);border-color:var(--sun);text-decoration:none}

.foot-list{list-style:none;margin:0;padding:0}
.foot-list li+li{margin-top:.6rem}
.f-all{color:var(--sun)!important;font-weight:700}

.foot-contact .f-name{color:#fff;font-weight:700;margin:0 0 .4rem}
.foot-contact .f-addr{margin:0 0 1rem}
.f-tel{display:block;font-family:var(--display);color:#fff!important;font-size:1.32rem;
  font-weight:700;letter-spacing:-.01em;margin:0 0 .5rem}
.f-mail{display:block;margin:0 0 1rem;word-break:break-word}
.f-hours{margin:0 0 .9rem;color:rgba(255,255,255,.66);font-size:.9rem}
.f-es{margin:0}
.f-es b{color:#fff}
.f-lic{margin:.7rem 0 0;color:rgba(255,255,255,.66);font-size:.88rem}

.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.4rem;padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;
  font-size:.86rem;color:rgba(255,255,255,.6)}
.foot-legal{display:flex;flex-wrap:wrap;gap:.8rem 1.3rem}
.foot-built{margin-top:1rem;text-align:center;font-size:.76rem;letter-spacing:.04em;
  color:rgba(255,255,255,.42);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.foot-built a{color:rgba(255,255,255,.68)}

/* ---- hero background: swap HERO_IMG in vw_theme once a Phoenix photo is licensed ---- */
.hero.has-photo{background-image:linear-gradient(178deg,rgba(2,29,59,.90) 0%,rgba(2,29,59,.86) 45%,
  rgba(2,21,43,.95) 100%),var(--hero-img);background-size:cover;background-position:center}

/* ============================================================
   COVERAGE MAP (Leaflet). Brandon 9/22: "areas map like nevada leak detection".
   ============================================================ */
.map-wrap{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--white);margin:0 0 1.2rem}
#vw-map{height:clamp(320px,52vw,520px);width:100%;background:#eef1f4}
.leaflet-container{font-family:var(--body)}
.leaflet-popup-content{margin:.8rem .95rem;font-size:.92rem;line-height:1.5}
.leaflet-popup-content strong{font-family:var(--display);font-size:1rem;color:var(--navy)}
.leaflet-popup-content a{color:var(--clay);font-weight:700}
.leaflet-popup-content p{margin:.45rem 0 0;color:var(--muted)}
.pop-tag{display:inline-block;background:var(--navy);color:#fff;font-size:.66rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:.2rem .5rem;border-radius:99px;margin:0 0 .4rem}
.pop-where{color:var(--muted);font-size:.85rem}

/* pins are drawn in CSS so there are no marker image requests */
.vw-pin{display:block;width:14px;height:14px;border-radius:50%;background:var(--blue);
  border:2px solid #fff;box-shadow:0 1px 4px rgba(2,29,59,.5)}
.vw-pin--job{width:18px;height:18px;background:var(--clay)}
.vw-pin--hq{width:24px;height:24px;background:var(--navy);border:3px solid var(--sun);
  box-shadow:0 2px 8px rgba(2,29,59,.6)}
/* the jobsite band lost its pull quote when the fabricated testimonial came out 9/24;
   this keeps the band's visual weight without pretending a customer said it */
.jobsite-lead{font-family:var(--display);font-size:clamp(1.25rem,2.6vw,1.75rem);
  font-weight:700;line-height:1.28;letter-spacing:-.015em;margin:0 0 14px;color:#fff}

/* ---------- exit-intent panel ----------
   The offer is the bucket test rather than Nevada's "free phone consultation with honest pricing
   upfront", which would break the no-pricing rule. Styled as a card in the site's own language, not
   a generic lightbox. */
/* No backdrop-filter here. Brandon 9/24: "the wait before you go button is empty until you mouse
   over". The card animates a transform inside this overlay while open() simultaneously sets
   overflow:hidden on <html> and drops the scrollbar. A composited child inside a backdrop-filter
   layer, reflowed in the same frame, can fail to paint its text in Chrome until something
   invalidates the layer - which is exactly what a hover does. A flat translucent navy looks all
   but identical and always paints. */
.vw-exit{position:fixed;inset:0;z-index:100002;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(2,29,59,.72)}
.vw-exit[hidden]{display:none}
html.vw-exit-open{overflow:hidden}
.vw-exit-card{position:relative;backface-visibility:hidden;background:var(--cream);border-radius:var(--r);
  box-shadow:var(--shadow-lift);max-width:520px;width:100%;padding:30px 30px 24px;
  border-top:6px solid var(--clay);animation:vwExitIn .22s ease-out}
@keyframes vwExitIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.vw-exit-card{animation:none}}
.vw-exit-x{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;
  background:transparent;color:var(--muted);font:400 30px/1 system-ui,sans-serif;cursor:pointer;
  border-radius:50%}
.vw-exit-x:hover{background:rgba(2,29,59,.08);color:var(--navy)}
.vw-exit-x:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
.vw-exit-kicker{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay)}
.vw-exit-card h2{margin:0 0 12px;font-family:var(--display);font-size:clamp(1.4rem,4vw,1.8rem);
  font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--navy)}
.vw-exit-body{margin:0 0 20px;font-size:1rem;line-height:1.55;color:var(--ink)}
.vw-exit-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.vw-exit-go{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:14px 22px;border-radius:999px;background:var(--clay);color:#fff;font-weight:800;
  text-decoration:none;font-size:1rem}
/* Brandon 9/24: "when i hover the text dissapears i guess its the same color as the button".
   There is a global `a:hover{color:var(--clay-deep)}`, and this rule was changing the BACKGROUND
   to that same clay-deep without re-stating the text colour - so on hover the label and the button
   became the identical colour. Any hover that repaints a background must also state its text
   colour; that is the third time this exact shape has bitten (d4's header, the /reviews/ button,
   now this). */
.vw-exit-go:hover{background:var(--clay-deep);color:#fff}
.vw-exit-go:focus-visible,.vw-exit-tel:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.vw-exit-tel{display:inline-flex;align-items:center;min-height:52px;font-weight:700;
  color:var(--navy);text-decoration:none;font-size:.95rem}
.vw-exit-tel:hover{text-decoration:underline;color:var(--navy)}
.vw-exit-foot{margin:18px 0 0;font-size:.82rem;color:var(--muted)}
@media(max-width:520px){
  .vw-exit-card{padding:26px 20px 20px}
  .vw-exit-go{width:100%}
}

/* ---------- map popups ----------
   Brandon 9/23: "can we put more details in these pins say what they did like found slab leak and
   make it look great". The popup markup already carried a .pop-tag class that was never styled, so
   a job pin would have rendered its service as plain unstyled text. These are the branded cards
   the job layer drops into the moment data/jobs.py has real entries. */
.leaflet-popup-content-wrapper{border-radius:var(--r-sm);box-shadow:var(--shadow-lift);
  border:1px solid var(--line)}
.leaflet-popup-content{margin:0;padding:15px 17px 16px;font-size:.92rem;line-height:1.5;
  width:262px!important}
.leaflet-popup-tip{box-shadow:none}
.pop-tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;margin:0 0 9px}
.pop-tag--area{background:rgba(8,104,180,.12);color:var(--blue)}
.pop-tag--job{background:rgba(199,56,30,.12);color:var(--clay)}
.pop-tag--hq{background:rgba(255,158,94,.22);color:#8F320B}
.pop-title{display:block;font-family:var(--display);font-size:1.06rem;font-weight:800;
  letter-spacing:-.02em;line-height:1.2;color:var(--navy)}
.pop-where{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin:3px 0 0}
.pop-body{margin:8px 0 0;font-size:.87rem;color:var(--ink);line-height:1.5}
.pop-src{display:block;margin:8px 0 0;font-size:.72rem;font-style:italic;color:var(--muted);line-height:1.4}
.pop-link{display:inline-block;margin:11px 0 0;font-weight:800;font-size:.87rem;
  color:var(--clay);text-decoration:none}
.pop-link:hover{text-decoration:underline}

/* legend, so the pin types read without clicking one */
.map-legend{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin:14px 0 10px}
.map-key{display:inline-flex;align-items:center;gap:8px;font-size:.87rem;font-weight:600;
  color:var(--muted)}
.map-key i{flex:none;display:block}
.map-note{font-size:.92rem;color:var(--muted);margin:0 0 1.4rem}
.map-list-h{font-size:1.02rem;margin:0 0 .8rem}
.map-areas{margin:0 0 1rem}
.map-more{margin:0}
.map-more a{color:var(--clay);font-weight:700}

/* sitemap groups */
.smap{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.smap h2{font-size:1.05rem;margin:0 0 .6rem}
.smap ul{list-style:none;margin:0;padding:0;font-size:.94rem}
.smap li+li{margin-top:.35rem}
.smap a{color:var(--ink);text-decoration:none}
.smap a:hover{color:var(--clay);text-decoration:underline}

/* ---------- utility bar (vw_chrome.util_bar) ----------
   Sits above .site-head and scrolls away with the page; the header itself stays sticky, which is the
   same arrangement Nevada uses. Navy so it reads as chrome rather than content. */
.util-bar{background:var(--navy);color:rgba(255,255,255,.72);font-size:.82rem}
.util-in{display:flex;flex-wrap:wrap;align-items:center;gap:5px 22px;
  padding-top:8px;padding-bottom:8px;min-height:38px}
.util-bar .u-l{display:flex;flex-wrap:wrap;align-items:center;gap:5px 22px}
.util-bar .u-r{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:5px 18px}
.util-bar .uit{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:inherit;
  text-decoration:none}
.util-bar a.uit:hover{color:#fff;text-decoration:underline}
.util-bar .uit b{color:#fff;font-weight:700}
.util-bar svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8}
@media(max-width:900px){
  .util-bar .u-sm{display:none}
  .util-in{justify-content:center;gap:4px 14px}
  .util-bar .u-r{margin-left:0}
}

/* ---------- grouped menu (vw_chrome.header) ----------
   Desktop dropdowns open on hover AND :focus-within, so keyboard users get them with no JS. */
@media(min-width:1060px){
  .nav-desk{display:flex;align-items:center;gap:4px;margin-left:auto}
  .nav-desk>a,.nav-desk .grp-t{display:inline-block;padding:9px 11px;border-radius:9px;
    color:var(--navy);text-decoration:none;font-weight:700;font-size:.93rem;white-space:nowrap}
  .nav-desk>a:hover,.nav-desk .grp-t:hover{background:rgba(2,29,59,.06)}
  .nav-desk .grp{position:relative}
  .nav-desk .grp-t::after{content:"";display:inline-block;margin-left:6px;vertical-align:2px;
    border:4px solid transparent;border-top-color:currentColor;border-bottom:0;opacity:.55}
  .mega{position:absolute;top:calc(100% + 6px);left:0;min-width:288px;background:#fff;
    border:1px solid var(--line);border-top:3px solid var(--clay);border-radius:var(--r-sm);
    box-shadow:var(--shadow-lift);padding:10px;display:grid;gap:1px;
    opacity:0;visibility:hidden;transform:translateY(-5px);
    transition:opacity .13s ease,transform .13s ease}
  .mega-2{grid-template-columns:1fr 1fr;min-width:560px}
  .grp:hover>.mega,.grp:focus-within>.mega{opacity:1;visibility:visible;transform:none}
  .mega a{display:block;padding:9px 11px;border-radius:9px;text-decoration:none;
    color:var(--navy);font-weight:600;font-size:.91rem;line-height:1.3}
  .mega a:hover{background:var(--cream)}
  .mega a span{display:block;font-weight:400;font-size:.77rem;color:var(--muted);margin-top:2px}
  .mega-all{grid-column:1/-1;margin-top:4px;padding-top:9px;border-top:1px solid var(--line);
    color:var(--clay)!important;font-weight:800!important}
  .menu{display:none}
}

/* ---------- header + utility bar stretch the full window ----------
   d3's .wrap caps everything at 1160px, which is right for reading text but wrong for a nav row
   with nine top-level items: at 1900px the brand wrapped to three lines and the phone button broke
   to "(602) / 830- / 9717". Page content keeps its 1160px measure; only these two bars go wide. */
/* 9/24 Brandon, comparing a wide monitor with his laptop: "looks great on laptop but not on
   computer". max-width:none let these bars grow without limit, and because .nav-desk is pushed
   right with margin-left:auto ALL of the extra width on a 1920 screen became one dead gap between
   the logo and "Pools", with the brand and the phone button pinned to opposite edges - while the
   page content below stayed centred in 1160px, so nothing lined up.
   A cap fixes it without reopening the original problem: the nav row needs roughly 1200px to hold
   nine items plus the brand and the call button, so 1500px leaves room to spare and anything
   narrower than that (his laptop included) behaves exactly as it does today. */
.util-bar .wrap,.site-head .wrap{max-width:1500px}
@media(min-width:1240px){
  .util-bar .wrap,.site-head .wrap{
    padding-left:clamp(24px,3.2vw,64px);padding-right:clamp(24px,3.2vw,64px)}
}
/* nothing in the header row may wrap */
.head-in{flex-wrap:nowrap}
.brand{flex:none}
.brand-txt strong,.brand-txt span{white-space:nowrap}
.head-tel{flex:none;white-space:nowrap}
.head-tel span{white-space:nowrap}
@media(min-width:1060px){
  .nav-desk{flex-wrap:nowrap}
  .nav-desk>a,.nav-desk .grp-t{padding:9px 12px}
  /* a dropdown under a right-hand item would otherwise run off the window */
  .mega{max-width:min(640px,calc(100vw - 48px))}
  .nav-desk .grp:nth-child(n+5) .mega{left:auto;right:0}
}
@media(min-width:1440px){
  .nav-desk>a,.nav-desk .grp-t{font-size:.97rem;padding:10px 15px}
}

/* the home page money band - added 9/24 once the no-dollar rule was corrected */
.cost-grid{display:grid;gap:10px;max-width:760px;margin:0}
.cost-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--sand-line);border-radius:var(--r-sm);
  padding:15px 20px}
.cost-job{font-weight:700;color:var(--navy);font-size:1rem}
.cost-fig{font-family:var(--display);font-weight:800;font-size:1.12rem;color:var(--clay);
  white-space:nowrap;letter-spacing:-.01em}
@media(max-width:520px){
  .cost-row{flex-direction:column;gap:4px;padding:13px 16px}
  .cost-fig{font-size:1.05rem}
}

/* the cost table and its drivers - added 9/24 once the no-dollar rule was corrected */
.costtable{width:100%;border-collapse:collapse;margin:0;font-size:.95rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.costtable th,.costtable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);
  vertical-align:top}
.costtable thead th{background:var(--navy);color:#fff;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:800}
.costtable tbody th{font-weight:800;color:var(--navy);width:30%}
.costtable tbody td:first-of-type{font-weight:800;color:var(--clay);white-space:nowrap}
.costtable tbody tr:last-child th,.costtable tbody tr:last-child td{border-bottom:0}
@media(max-width:700px){
  .costtable thead{position:absolute;left:-9999px}
  .costtable tbody th,.costtable tbody td{display:block;width:auto;border-bottom:0;padding:4px 16px}
  .costtable tbody th{padding-top:16px}
  .costtable tbody tr{display:block;border-bottom:1px solid var(--line)}
  .costtable tbody tr:last-child{border-bottom:0}
}
.drivers{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.drivers li{background:#fff;border:1px solid var(--sand-line);border-radius:var(--r-sm);
  padding:16px 18px;font-size:.94rem;line-height:1.55}
.drivers strong{color:var(--navy)}
.src{font-size:.82rem;color:var(--muted);font-style:italic;margin:14px 0 0}

/* the numbered "what happens" walkthrough, added 9/24 after auditing the reference site */
.steps-num{counter-reset:vwstep;list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:1fr}
@media(min-width:760px){.steps-num{grid-template-columns:1fr 1fr;gap:16px 24px}}
.steps-num>li{counter-increment:vwstep;position:relative;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 22px 18px 62px}
.steps-num>li::before{content:counter(vwstep);position:absolute;left:18px;top:19px;
  width:30px;height:30px;border-radius:50%;background:var(--clay);color:#fff;
  font:800 .92rem/30px var(--body);text-align:center}
.steps-num>li h3{margin:0 0 7px;font-size:1.02rem;font-weight:800;color:var(--navy);
  letter-spacing:-.01em}
.steps-num>li p{margin:0;font-size:.94rem;line-height:1.55;color:var(--ink)}

/* ---------- utility bar: one row, always ----------
   9/24: I added the hours, the 24-hour emergency line and three social icons to this bar without
   re-checking it still fitted, and it wrapped to two rows. The bar is a strip, not a paragraph -
   when it wraps it stops reading as chrome and starts competing with the header underneath it.
   Items now drop out in reverse order of usefulness as the screen narrows, rather than wrapping:
   the address goes first (it is in the footer and on the map), then the email (the header has a
   phone button), then the socials, then Espanol. The hours and the emergency line are the last
   things to go, because they are the two facts that change whether somebody calls now. */
@media(max-width:1400px){ .u-l .u-addr{display:none} }
@media(max-width:1200px){ .u-r .u-mail{display:none} }
@media(max-width:1040px){ .util-social{display:none} }
@media(max-width:900px){ .u-l .u-lang{display:none} }
.util-in{flex-wrap:nowrap;overflow:hidden}
.u-l,.u-r{flex-wrap:nowrap;white-space:nowrap}

/* socials in the utility bar - added 9/24 to fill the dead gap .u-r's margin-left:auto left */
.util-social{display:inline-flex;align-items:center;gap:4px}
.util-social a{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .15s}
.util-social a:hover{background:var(--clay)}
.util-social svg{width:14px;height:14px;fill:currentColor}
.util-social a:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
/* the bar now has enough in it to sit together rather than split to the edges */
@media(min-width:900px){.u-r{gap:5px 14px}}

/* the footer's 24-hour emergency line - Brandon 9/24 */
.f-emerg{margin:8px 0 0}
.f-emerg a{display:inline-flex;align-items:center;gap:7px;color:var(--sun);font-weight:800;
  font-size:.92rem;text-decoration:none}
.f-emerg a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sun);
  flex:none}
.f-emerg a:hover{text-decoration:underline;color:#fff}

/* the agency tagline in the build credit - Brandon 9/24 */
.foot-tag{display:inline-block;font-style:italic;letter-spacing:.02em;
  color:rgba(255,255,255,.62)}
@media(max-width:560px){.foot-tag{display:block;margin:4px 0 0}}

/* ---------- the cookie banner ----------
   Brandon 9/24: "all widgets run into each other and the colors dont match the website the accept
   all button needs a solid color". The widget's own palette now points at the brand colours (see
   adapt_js.py), and these rules finish the job from our side so a widget update cannot undo them:
   a solid clay Accept button rather than a translucent one, brand type, and - the collision fix -
   the banner sits ABOVE the sticky action bar rather than under it, while vw-widgets.js lifts the
   two floating launchers clear of whichever of the two is showing. */
#vw-cookie-banner{background:var(--navy)!important;border-top:3px solid var(--clay)!important;
  font-family:var(--body)!important;box-shadow:0 -6px 28px rgba(2,29,59,.45)!important;
  z-index:100003!important;padding:16px 22px!important;
  bottom:var(--vw-bar,0px)!important}
#vw-cookie-banner p{color:rgba(255,255,255,.88)!important;font-size:.88rem!important}
#vw-cookie-banner p a{color:var(--sun)!important;font-weight:700!important;
  text-decoration:underline!important}
#vw-cookie-banner button,#vw-cookie-ok,#vw-cookie-no{min-height:44px!important;
  border-radius:999px!important;font-weight:800!important;font-size:.88rem!important;
  padding:11px 22px!important;cursor:pointer!important;border:1px solid transparent!important}
/* the primary action is a solid brand colour, not a tint */
#vw-cookie-ok{background:var(--clay)!important;color:#fff!important;
  border-color:var(--clay)!important;opacity:1!important}
#vw-cookie-ok:hover{background:var(--clay-deep)!important;border-color:var(--clay-deep)!important}
#vw-cookie-no{background:transparent!important;color:#fff!important;
  border-color:rgba(255,255,255,.45)!important}
#vw-cookie-no:hover{background:rgba(255,255,255,.12)!important}
#vw-cookie-ok:focus-visible,#vw-cookie-no:focus-visible{outline:3px solid var(--sun)!important;
  outline-offset:2px!important}
@media(max-width:620px){
  #vw-cookie-banner{padding:14px 16px!important;gap:10px!important}
  #vw-cookie-btns{width:100%!important}
  #vw-cookie-ok,#vw-cookie-no{flex:1 1 0!important}
}

/* ---------- the callout box ----------
   Brandon 9/24 on /contact/: the text was unreadable. .callout had NO base rule - no background of
   its own - only `.callout p{color:rgba(255,255,255,.9)}`, which assumes a dark parent. Measured
   across the built site: 24 pages use it and ALL 24 sit on a light section, so every one was white
   text on cream. It is now a self-contained light box with dark text that reads on any background,
   with an explicit dark-band variant for the day one is used there. */
.callout{color:var(--ink);background:var(--cream);border-left:5px solid var(--clay);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 22px;margin:22px 0}
.callout .eyebrow{color:var(--clay);margin:0 0 8px}
.callout h3{color:var(--navy)}
.callout p{color:var(--ink)}
.callout a{color:var(--clay);font-weight:700}
.s-navy .callout,.on-dark .callout{background:rgba(255,255,255,.07);border-left-color:var(--sun)}
.s-navy .callout p,.on-dark .callout p{color:rgba(255,255,255,.92)}
.s-navy .callout h3,.on-dark .callout h3{color:#fff}
.s-navy .callout .eyebrow,.on-dark .callout .eyebrow{color:var(--sun)}
.s-navy .callout a,.on-dark .callout a{color:#fff}

/* ---------- proof: real reviews, the rating badge, and the social links ---------- */
.revband{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rev-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin:0 0 18px}
.rev-score{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--navy)}
.rev-stars{color:#E8A317;letter-spacing:2px;font-size:1.05rem;line-height:1}
.rev-where{font-size:.9rem;color:var(--muted)}
.rev-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px}
.rev-q{margin:0 0 12px;font-size:.95rem;line-height:1.55;color:var(--ink)}
.rev-by{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted);margin:0}
.rev-by strong{color:var(--navy);font-weight:800}
.rev-src{margin-left:auto;font-weight:700;font-size:.78rem;color:var(--muted)}
.rev-links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.rev-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 16px;
  border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);
  font-weight:700;font-size:.88rem;text-decoration:none}
.rev-link:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.rev-link:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
/* the rating chip in the top utility bar */
.util-rating{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;
  font-weight:700}
.util-rating .rev-stars{font-size:.9rem}
.util-rating:hover{text-decoration:underline}
@media(max-width:720px){.util-rating .util-rating-txt{display:none}}

/* ---------- button text colour is not negotiable ----------
   Brandon 9/24: "cant see the text in the red one". On /reviews/ a .btn-clay sat inside a .prose
   block and `.prose a` (0-1-1) out-specified `.btn-clay` (0-1-0), painting the label clay on a
   clay background - invisible. The prose rule now skips .btn, and these doubled-class rules
   (0-2-0) mean no future context selector can repaint a button label by accident either.
   Same specificity trap that put ochre-on-brick in d4's header. */
.btn.btn-clay,.btn.btn-navy{color:#fff}
.btn.btn-white{color:var(--navy)}
.btn.btn-ghost{color:var(--clay)}
.btn.btn-ghost-light{color:#fff}

/* ---------- the HTML site map ----------
   Cards rather than bare lists, a jump bar, and the service areas split by region. No page counts
   anywhere: the reference site puts one beside every heading and counts are a standing no. */
.smap{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  align-items:start}
.smap-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:20px 20px 16px;scroll-margin-top:150px}
.smap-card--wide{grid-column:1/-1}
.smap-card h2{font-family:var(--display);font-size:1.02rem;font-weight:800;letter-spacing:.01em;
  margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--clay);color:var(--navy)}
.smap-card h3{font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--clay);margin:0 0 8px}
.smap-list{list-style:none;margin:0;padding:0;font-size:.93rem}
.smap-list li{margin:0}
.smap-list a{display:block;padding:6px 8px;margin:0 -8px;border-radius:7px;
  color:var(--ink);text-decoration:none;line-height:1.35}
.smap-list a:hover{background:var(--cream);color:var(--clay)}
.smap-list a:focus-visible{outline:2px solid var(--clay);outline-offset:1px}
.smap-regions{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.smap-sub{min-width:0}

/* the counted stat tiles, and the numbered jump box - the reference site's layout, our palette */
.smap-stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin:26px 0 0}
.smap-stat{background:var(--navy);color:#fff;border-radius:var(--r-sm);padding:18px 16px;
  text-align:center}
.smap-stat strong{display:block;font-family:var(--display);font-size:clamp(1.6rem,4vw,2.1rem);
  font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--sun)}
.smap-stat span{display:block;margin-top:7px;font-size:.72rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.8)}
.smap-jumpbox{background:#fff;border:1px solid var(--line);border-left:5px solid var(--clay);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:20px 22px}
.smap-jumpbox .eyebrow{margin:0 0 14px;color:var(--clay)}
.smap-chip b{color:var(--clay);margin-right:2px}
.smap-n{color:var(--muted);font-weight:600}
.smap-card h2 .smap-n{font-size:.82rem}

/* the jump bar */
.smap-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.smap-chip{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--navy);font-weight:700;font-size:.85rem;text-decoration:none;
  min-height:38px;line-height:22px}
.smap-chip:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.smap-chip:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
@media(max-width:560px){
  .smap-card{padding:16px 16px 12px}
  .smap-chip{font-size:.8rem;padding:7px 12px}
}

/* ---------- dropdown menus stay open long enough to reach ----------
   Brandon 9/24: "the menu disapears before i can click the page".
   .mega sits at top:calc(100% + 6px), so there is a 6px dead strip between the bottom of the nav
   tab and the top of the panel. Moving the pointer down across it leaves .grp entirely, :hover
   goes false and the panel closes before you get there - the classic hover-gap bug. Two fixes,
   because either alone is fragile:
     1. an invisible bridge across the gap, which is a CHILD of .grp, so crossing it keeps
        .grp:hover true. It only accepts the pointer while the menu is actually open, so it can
        never swallow a click on the page underneath.
     2. a short delay before the panel is hidden, so a small diagonal slip off the tab does not
        punish you. Opening stays instant. */
.grp::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;pointer-events:none}
.grp:hover::after,.grp:focus-within::after{pointer-events:auto}
.mega{transition:opacity .13s ease,transform .13s ease,visibility 0s linear .22s}
.grp:hover>.mega,.grp:focus-within>.mega{transition:opacity .13s ease,transform .13s ease,visibility 0s}
@media(prefers-reduced-motion:reduce){.mega{transition:none}}

/* ---------- floating widgets: accessibility + Vale ----------
   Brandon 9/23 on a phone: both launchers sat ON TOP of the sticky Call / Text a photo / Message
   bar, so Call could not be pressed. --vw-bar is set from the bar's measured height by
   vw-widgets.js, defaulting to 0 so desktop is unaffected. */
:root{--vw-bar:0px;--vw-stack:0px}
#vw-a11y-trigger{bottom:calc(var(--vw-stack, var(--vw-bar)) + 18px)!important}
#nv-chat-widget,#nv-chat-btn{bottom:calc(var(--vw-stack, var(--vw-bar)) + 18px)!important}
/* Vale sits right, accessibility sits left; on a narrow screen stack the chat above the a11y
   button rather than letting them meet in the middle */
@media(max-width:520px){
  #nv-chat-widget,#nv-chat-btn{bottom:calc(var(--vw-stack, var(--vw-bar)) + 80px)!important}
}
/* The dismiss control.
   v1 was navy-on-navy with a thin white ring, 24px, sitting on a navy launcher on a navy page -
   Brandon: "can barely see on desktop". It is now WHITE with a dark glyph, which reads against the
   launcher and against every band on the site, and 30px so it is a real target.
   It is position:FIXED and placed from the launcher's measured rect by vw-widgets.js, because the
   chat launcher is a <button> (a button inside a button swallows the click) and its wrapper is a
   zero-height full-width element that cannot be positioned against. */
.vw-x{position:fixed;width:30px;height:30px;border-radius:50%;
  border:2px solid var(--navy);background:#fff;color:var(--navy);
  font:700 19px/1 system-ui,sans-serif;padding:0 0 2px;cursor:pointer;
  z-index:100000;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.4)}
.vw-x:hover{background:var(--clay);border-color:#fff;color:#fff}
.vw-x:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.vw-x[hidden]{display:none!important}
/* a comfortable target on touch without making the glyph huge */
@media(hover:none){.vw-x{width:34px;height:34px;font-size:21px}}

/* bring-back buttons, in the footer, desktop and mobile alike */
.vw-restore-tray{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:22px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);max-width:1160px}
.vw-restore{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;min-height:44px;
  border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;
  color:#fff;font:600 .88rem/1 var(--body);cursor:pointer}
.vw-restore:hover{background:rgba(255,255,255,.12)}
.vw-restore:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* ---------- mobile header + drawer ----------
   Brandon: "remove the phone at the top". Below the desktop nav breakpoint the number is already
   in the utility bar, the sticky action bar and the footer; a fourth copy was crowding the row. */
@media(max-width:1059px){
  .head-tel{display:none}
}
/* "the mobile menu does[nt] scroll or open on a phone" - the panel had max-height:none and
   overflow:visible, so a menu taller than the screen simply ran off the bottom with no way to
   reach the rest. Cap it to what is left between the header and the action bar, and scroll. */
@media(max-width:1059px){
  .menu-panel{max-height:calc(100vh - 150px - var(--vw-bar));overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}

/* mobile drawer: d3's own <details class="menu">, now carrying every group */
.menu-panel .dr-h{margin:14px 0 4px;padding:0 2px;font-size:.7rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.menu-panel .dr-h:first-child{margin-top:2px}
.menu-panel .dr-all{color:var(--clay)!important;font-weight:800}

/* ---- Cloudflare Turnstile (added 9/24/26 with the widget markup) ---- */
/* The iframe is a fixed 300x65 and will overflow a narrow form card on a small phone, so it is
   scaled down rather than clipped - a clipped checkbox is an unsubmittable form. transform-origin
   is left so it stays aligned with the fields above it instead of drifting to the middle. */
.ts-wrap{margin:4px 0 16px;min-height:65px}
.ts-wrap iframe{max-width:100%!important}
@media(max-width:360px){
  .ts-wrap{min-height:58px}
  .ts-wrap>div{transform:scale(.88);transform-origin:left top}
}
@media print{ .ts-wrap{display:none!important} }