/* ==========================================================================
   EMERGENCY PLUMBER BREA — Brutalist landing page
   No frameworks. No build step. Static-hosting ready.

   Contents
     01 tokens          02 reset            02b icons
     03 type            04 layout           05 masthead
     06 buttons         07 header           08 hero
     09 marquee         10 cards            11 service rail
     12 triage          13 accordions       14 gas alert
     15 steps           16 checks           17 (removed)
     18 note panel      19 coverage         20 FAQ
     21 final CTA       22 footer           23 floating call
     24 utilities       25 service read-more
     26 no-JS fallbacks
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --paper:#F2EFE6;
  --card:#FFFFFF;
  --ink:#12120F;
  --ink-soft:#4A4741;
  --volt:#D8FF00;
  --volt-ink:#12120F;
  --alarm:#C9301A;
  --violet:#7B5CFF;
  --line:var(--ink);
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --bw:3px;

  --font-display:"Archivo Black","Arial Black","Helvetica Neue",Impact,sans-serif;
  --font-body:"Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

  --step--1:clamp(.9rem,.86rem + .2vw,.98rem);
  --step-0:clamp(1.02rem,.97rem + .28vw,1.15rem);
  --step-1:clamp(1.2rem,1.08rem + .6vw,1.55rem);
  --step-2:clamp(1.55rem,1.28rem + 1.2vw,2.25rem);
  --step-3:clamp(2rem,1.5rem + 2.3vw,3.25rem);
  --step-4:clamp(2.25rem,1.6rem + 4vw,5rem);

  --pad:clamp(1rem,4vw,2.5rem);
  --max:1240px;
  --radius:0px;

  /* header height, used for anchor offsets */
  --header-h:64px;
}
@media (min-width:960px){:root{--header-h:78px}}

/* Dark variant — opt in by setting data-theme="dark" on <html> */
[data-theme="dark"]{
  --paper:#14140F;
  --card:#1D1D16;
  --ink:#F2EFE6;
  --ink-soft:#BEB9AC;
  --volt:#D8FF00;
  --volt-ink:#12120F;
  --alarm:#FF6B4A;
  --violet:#A48CFF;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin-bottom:.45em}
li::marker{font-weight:700}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--volt)}

/* ---------- 2b. Icons (inline sprite) ---------- */
svg{
  width:1em;
  height:1em;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}
.icon-sprite{stroke:none;fill:none;overflow:hidden}

/* ---------- 3. Type ---------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
h2{
  font-family:var(--font-display);
  font-size:var(--step-3);
  line-height:.98;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
h3{
  font-family:var(--font-display);
  font-size:var(--step-1);
  line-height:1.08;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
h4{
  font-family:var(--font-body);
  font-size:var(--step-0);
  font-weight:700;
  letter-spacing:.01em;
}
.eyebrow{
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0 0 .6rem;
}
.lead{font-size:var(--step-1);line-height:1.45;font-weight:500}
.muted{color:var(--ink-soft)}
.small{font-size:var(--step--1);line-height:1.55}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
section{scroll-margin-top:calc(var(--header-h) + 14px)}
.band{padding-block:clamp(2.2rem,6vw,4.5rem)}
.band + .band{border-top:var(--bw) solid var(--line)}
.band--paper{background:var(--paper)}
.band--card{background:var(--card)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--ink .eyebrow{color:var(--volt)}
.band--volt{background:var(--volt);color:#12120F;--line:#12120F;--ink:#12120F;--ink-soft:#33301F;--shadow:6px 6px 0 #12120F;--card:#FFFCEB}
.stack > * + *{margin-top:clamp(1rem,2.2vw,1.6rem)}
.cols{display:grid;gap:clamp(1.25rem,3vw,2.5rem)}
@media (min-width:820px){
  .cols--2{grid-template-columns:1fr 1fr}
  .cols--3{grid-template-columns:repeat(3,1fr)}
  .cols--sidebar{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
}

/* ---------- 5. Section masthead ---------- */
.masthead{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:.75rem 1.25rem;
  margin-bottom:clamp(1.4rem,3vw,2.2rem);
  padding-bottom:.9rem;
  border-bottom:var(--bw) solid var(--line);
}
.masthead__num{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);
  line-height:1;
  background:var(--ink);
  color:var(--paper);
  padding:.14em .38em .1em;
  flex:none;
}
.band--volt .masthead__num,
.band--ink .masthead__num{background:var(--volt);color:#12120F}
.masthead__title{flex:1 1 320px;min-width:0}
.masthead__note{
  flex:1 1 100%;
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}
.masthead__title{flex:1 1 100%}
@media (min-width:820px){
  .masthead__note{flex:1 1 100%;text-align:right;margin-top:-.15rem}
}

/* ---------- 6. Buttons ---------- */
.btn{
  --btn-bg:var(--volt);
  --btn-fg:#12120F;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding:.85em 1.25em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:var(--bw) solid #12120F;
  box-shadow:var(--shadow-sm);
  font-family:var(--font-display);
  font-size:clamp(.95rem,.9rem + .3vw,1.15rem);
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #12120F}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 #12120F}
.btn--ink{--btn-bg:#12120F;--btn-fg:#FFFFFF}
.band--ink .btn{--btn-bg:var(--volt);--btn-fg:#12120F}
.btn--ghost{--btn-bg:transparent;--btn-fg:currentColor}
.btn--block{display:flex;width:100%}
.btn__ico{width:1.15em;height:1.15em;flex:none}

a.link{
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  color:inherit;
}
a.link:hover{background:var(--volt);color:#12120F;text-decoration-color:transparent}

/* ---------- 7. Header ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--volt);color:#12120F;padding:.9rem 1.2rem;font-weight:700;
}
.skip:focus{left:1rem;top:1rem}

.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  border-bottom:var(--bw) solid var(--line);
}
.site-header__bar{
  display:flex;align-items:center;gap:.75rem;
  min-height:var(--header-h);
  padding-block:.5rem;
}
.brand{
  display:flex;align-items:center;gap:.7rem;
  text-decoration:none;flex:1 1 auto;min-width:0;
}
/* Logo artwork is already black on white with its own frame, so it is shown as-is:
   no extra background, border, radius or shadow around it. The lock-up carries the
   business name, so no duplicate text sits next to it. */
.brand__logo{
  width:auto;
  height:44px;
  max-width:100%;
  flex:none;
  object-fit:contain;
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
}
.brand__textblock{min-width:0}
.brand__name{
  font-family:var(--font-display);
  font-size:clamp(.95rem,.85rem + .5vw,1.2rem);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  display:block;
  white-space:nowrap;
}
.brand__tag{
  display:block;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:.25rem;
}
.header__actions{display:flex;align-items:center;gap:.5rem;flex:none}

/* Header phone button — hidden on phones (logo + menu only), shown from 720px */
.header__call{display:none}
@media (min-width:720px){.header__call{display:inline-flex}}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;
  background:var(--card);
  border:var(--bw) solid var(--line);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}
.nav-toggle svg{width:22px;height:22px}
@media (min-width:960px){.nav-toggle{display:none}}

/* Narrow phones: keep logo + name + menu on one line */
@media (min-width:760px){
  .brand__logo{height:58px}
}
@media (max-width:600px){
  .brand__logo{height:40px}
}
@media (max-width:400px){
  .brand__logo{height:36px}
}

.site-nav{
  border-top:var(--bw) solid var(--line);
  padding-block:.6rem 1rem;
}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.4rem;
}
.site-nav a{
  display:block;
  padding:.7rem .8rem;
  border:var(--bw) solid var(--line);
  background:var(--card);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
}
.site-nav a:hover{background:var(--volt);color:#12120F}
@media (min-width:960px){
  .site-nav{border-top:0;padding:0}
  .site-nav ul{
    display:flex;gap:.15rem;
    align-items:center;
  }
  .site-nav a{border:0;background:transparent;padding:.5rem .6rem;font-size:.82rem;letter-spacing:.06em}
  .site-nav a:hover{background:var(--volt);color:#12120F}
}

/* ---------- 8. Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(1.5rem,4vw,3rem) clamp(2rem,5vw,3.5rem);
  border-bottom:var(--bw) solid var(--line);
  background:
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(18,18,15,.045) 38px 39px),
    var(--paper);
}
.hero__flag{
  display:inline-flex;
  align-self:flex-start;
  max-width:100%;align-items:center;gap:.5rem;
  background:var(--alarm);color:#fff;
  border:var(--bw) solid #12120F;
  box-shadow:var(--shadow-sm);
  padding:.45rem .7rem;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:1rem;
}
.hero__flag .dot{
  width:.55em;height:.55em;background:#fff;border-radius:50%;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.hero h1{
  font-size:var(--step-4);
  margin-bottom:.5rem;
  max-width:16ch;
}
@media (max-width:760px){
  .hero h1{max-width:14ch}
  .hero__sub{font-size:1rem;line-height:1.55}
  .hero__trust li{font-size:.74rem}
}
.hero h1 .stamp{
  display:inline-block;
  background:var(--volt);
  color:#12120F;
  padding-inline:.1em;
  box-shadow:inset 0 -.12em 0 #12120F;
}
.hero__sub{
  font-size:var(--step-0);
  max-width:56ch;
  margin-bottom:1.4rem;
  font-weight:500;
}
.hero__grid{display:grid;gap:clamp(1.2rem,3vw,2.5rem);align-items:start}
@media (min-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1.25fr) minmax(350px,.75fr);align-items:center}
  .hero__col--main{display:flex;flex-direction:column}
}
.hero__callblock{
  display:grid;
  gap:.9rem;
  align-items:start;
  margin-bottom:1.5rem;
}
@media (min-width:980px){
  .hero__callblock{
    margin-bottom:0;
    padding:clamp(1rem,2vw,1.4rem);
    border:var(--bw) solid #12120F;
    background:var(--card);
    box-shadow:var(--shadow);
  }
  .hero__callblock .hero__trust{flex-direction:column;align-items:stretch}
  .hero__callblock .hero__trust li{padding:.5rem .6rem}
}
.hero__phone{
  display:block;
  text-decoration:none;
  background:var(--volt);
  color:#12120F;
  border:var(--bw) solid #12120F;
  box-shadow:var(--shadow);
  padding:.5rem .8rem .35rem;
  transition:transform .08s ease,box-shadow .08s ease;
}
.hero__phone:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #12120F}
.hero__phone span{
  display:block;
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:.1em;
}
.hero__phone strong{
  font-family:var(--font-display);
  font-size:clamp(1.45rem,1rem + 2.2vw,2.1rem);
  line-height:1;
  letter-spacing:-.01em;
  font-weight:400;
  white-space:nowrap;
  display:block;
}
.hero__phone small{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-top:.35em;
}
.hero__trust{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.hero__trust li{
  display:inline-flex;align-items:center;gap:.35em;
  background:var(--card);
  border:2px solid var(--line);
  padding:.35rem .55rem;
  font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin:0;
}
.hero__trust svg{width:1em;height:1em;flex:none}

/* quick problem chips */
.chips{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:2px dashed var(--line);
}
.chips--flush{margin-top:0;padding-top:0;border-top:0}
.chips li{margin:0}
.chips span{
  display:inline-flex;align-items:center;gap:.4em;
  border:2px solid var(--line);
  background:var(--card);
  padding:.4rem .6rem;
  font-size:.82rem;font-weight:600;
}
.chips svg{width:1em;height:1em;color:var(--ink-soft)}

/* ---------- 9. Marquee ---------- */
.marquee{
  overflow:hidden;
  max-width:100vw;
  background:var(--ink);
  color:var(--paper);
  border-block:var(--bw) solid var(--line);
  padding-block:.5rem;
  white-space:nowrap;
}
.marquee__track{
  display:inline-flex;
  gap:2.5rem;
  padding-left:2.5rem;
  animation:slide 46s linear infinite;
  font-family:var(--font-display);
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.marquee__track span{display:inline-flex;align-items:center;gap:2.5rem}
.marquee__track span::after{content:"//";color:var(--volt)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .hero__flag .dot{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- 10. Cards ---------- */
.card{
  background:var(--card);
  border:var(--bw) solid var(--line);
  box-shadow:var(--shadow);
  padding:clamp(1rem,2.4vw,1.6rem);
}
.card--flat{box-shadow:none}
.card__title{font-size:1rem;margin-bottom:.4rem}

/* ---------- 11. Service rail (horizontal snap scroller) ---------- */
.services__intro{margin-bottom:clamp(1.4rem,3vw,2rem)}
.railwrap{position:relative}
.rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(19rem,84%);
  gap:1rem;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad);
  padding:.35rem .35rem 1.4rem;
  margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
  scrollbar-width:thin;
  scrollbar-color:var(--ink) transparent;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{height:10px}
.rail::-webkit-scrollbar-track{background:transparent;border-top:2px solid rgba(18,18,15,.15)}
.rail::-webkit-scrollbar-thumb{background:var(--ink)}
.rail > *{scroll-snap-align:start}
.rail{align-items:stretch}
@media (min-width:640px){.rail{grid-auto-columns:minmax(22rem,60%)}}
@media (min-width:1000px){.rail{grid-auto-columns:minmax(24rem,42%)}}
@media (min-width:1240px){.rail{grid-auto-columns:minmax(26rem,38%)}}

.svc{
  display:flex;flex-direction:column;
  background:var(--card);
  border:var(--bw) solid var(--line);
  box-shadow:var(--shadow);
  padding:0;
  overflow:hidden;
}
.svc__head{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.9rem 1rem;
  border-bottom:var(--bw) solid var(--line);
  background:var(--paper);
}
.svc__ico{
  width:2.6rem;height:2.6rem;flex:none;
  display:grid;place-items:center;
  background:var(--volt);
  border:2px solid var(--line);
  color:#12120F;
}
.svc__ico svg{width:1.5rem;height:1.5rem}
.svc__num{
  margin-left:auto;
  font-family:var(--font-display);
  font-size:1.4rem;line-height:1;
  color:var(--ink-soft);
  flex:none;
}
.svc h3{font-size:1.12rem;line-height:1.05;flex:1 1 auto;text-transform:uppercase;letter-spacing:-.01em}
.svc__body{padding:1rem;font-size:.95rem;line-height:1.6}
.svc__body p{margin-bottom:.8em}
.svc__body p:last-child{margin-bottom:0}
.svc__tag{
  display:inline-block;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);
  padding:.18em .45em;
  margin-bottom:.7rem;
}
/* "Learn more" text link — commented out in the markup until service pages exist */
.svc__more{
  display:inline-flex;align-items:center;gap:.3em;
  font-weight:700;font-size:.88rem;
  text-decoration:underline;text-underline-offset:3px;
  margin-top:.25rem;
}
.svc__more svg{width:.85em;height:.85em;flex:none;stroke-width:2.6}

/* Rail controls sit ABOVE the cards */
.rail-ctrl{display:flex;align-items:center;gap:.5rem;justify-content:flex-end;margin-bottom:1rem}
.rail-btn{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  background:var(--card);border:var(--bw) solid var(--line);
  box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .08s ease,box-shadow .08s ease;
}
.rail-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.rail-btn:active{transform:translate(2px,2px);box-shadow:0 0 0}
.rail-btn[disabled]{opacity:.35;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}
.rail-btn svg{width:20px;height:20px}
.rail-hint{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-right:auto;
}
.rail-hint svg{width:1.1em;height:1.1em;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.rail-hint svg{animation:none}}

/* ---------- 12. Triage columns ---------- */
.triage{display:grid;gap:1rem}
@media (min-width:820px){.triage{grid-template-columns:repeat(3,1fr)}}
.triage__col{
  border:var(--bw) solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.triage__top{
  padding:.8rem 1rem;
  letter-spacing:.02em;
  border-bottom:var(--bw) solid var(--line);
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);
  font-size:1rem;line-height:1;text-transform:uppercase;
}
.triage__top svg{width:1.25rem;height:1.25rem;flex:none}
.triage__col--now .triage__top{background:var(--alarm);color:#fff}
.triage__col--now .triage__top::after{content:"→";margin-left:auto;font-size:1.1rem}
.triage__col--soon .triage__top{background:var(--volt);color:#12120F}
.triage__col--soon .triage__top::after{content:"◔";margin-left:auto;font-size:1rem}
.triage__col--wait .triage__top{background:var(--paper);color:var(--ink)}
.triage__col--wait .triage__top::after{content:"✓";margin-left:auto;font-size:1rem}
.triage__body{padding:1rem;font-size:.95rem;line-height:1.6}
.triage__body ul{padding-left:1.1em;margin-bottom:0}
.triage__body li{margin-bottom:.5em}
.triage__body li:last-child{margin-bottom:0}
.triage__notes{margin-top:1.6rem}

/* ---------- 13. Accordions ---------- */
.acc{border-top:var(--bw) solid var(--line)}
.acc__item{border-bottom:2px solid var(--line)}
.acc__item summary{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.9rem .2rem;
  cursor:pointer;list-style:none;
  font-weight:700;
  font-size:1rem;
  line-height:1.35;
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary:hover{color:#12120F;background:var(--volt)}
.acc__step{
  flex:none;
  width:2.1rem;height:2.1rem;
  display:grid;place-items:center;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-display);font-size:.9rem;
  border:2px solid var(--line);
  margin-top:-.2rem;
}
.acc__item summary:hover .acc__step{background:#12120F;color:var(--volt)}
.acc__icon{
  margin-left:auto;flex:none;align-self:flex-start;
  width:1.3rem;height:1.3rem;
  position:relative;margin-top:.1rem;
}
.acc__icon::before,.acc__icon::after{
  content:"";position:absolute;background:currentColor;
  transition:transform .18s ease,opacity .18s ease;
}
.acc__icon::before{inset:calc(50% - 1.5px) 0 auto 0;height:3px}
.acc__icon::after{inset:0 calc(50% - 1.5px) 0 auto;width:3px}
.acc__item[open] .acc__icon::after{transform:scaleY(0);opacity:0}
.acc__content{padding:0 .2rem 1.15rem;font-size:.97rem;line-height:1.62}
.acc__content p:last-child{margin-bottom:0}
@media (min-width:900px){
  .acc--split{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem;align-items:start}
}

/* ---------- 14. Gas alert ---------- */
.alert{
  border:var(--bw) solid #12120F;
  background:var(--alarm);
  color:#fff;
  box-shadow:var(--shadow);
  padding:clamp(1rem,2.6vw,1.6rem);
  position:relative;
  margin-bottom:1.6rem;
}
.alert h3{color:#fff;margin-bottom:.5rem}
.alert h3 svg{width:1em;height:1em;vertical-align:-.08em;margin-right:.25em}
.alert ol{margin:0;padding-left:1.3em}
.alert li{margin-bottom:.4em;font-weight:600}
.alert li:last-child{margin-bottom:0}
.alert .small{color:#FFE9E3;margin-top:.8rem}
.alert a{color:#fff;text-decoration:underline;text-decoration-thickness:2px;font-weight:700}
.wait__note{margin-top:1.4rem;max-width:70ch}

/* ---------- 15. Process steps ---------- */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1rem;
  counter-reset:step;
}
@media (min-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
.step{
  position:relative;
  background:var(--card);
  border:var(--bw) solid var(--line);
  box-shadow:var(--shadow);
  padding:1rem 1rem 1.2rem;
  margin:0;
  counter-increment:step;
}
.step::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;top:-.55rem;right:.6rem;
  font-family:var(--font-display);
  font-size:2.6rem;line-height:1;
  color:var(--line);
  opacity:.14;
}
/* Steps sit on a dark band, so they carry their own light palette */
.band--ink .step,
.band--ink .step h3,
.band--ink .step p{color:#12120F}
.band--ink .step{
  background:#F2EFE6;
  border-color:#12120F;
  box-shadow:6px 6px 0 var(--volt);
}
.band--ink .step::before{color:#12120F;opacity:.16}
.band--ink .card{background:#F2EFE6;color:#12120F;border-color:#12120F;box-shadow:6px 6px 0 var(--volt)}
.step h3{font-size:1.02rem;margin-bottom:.5rem;padding-right:2.5rem}
.step p{font-size:.95rem;line-height:1.6;margin-bottom:0}

/* ---------- 16. Feature list ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
@media (min-width:700px){.checks--2{grid-template-columns:1fr 1fr}}
.checks li{
  display:flex;gap:.7rem;align-items:flex-start;
  margin:0;padding:.7rem .8rem;
  border:2px solid var(--line);
  background:var(--card);
  font-size:.95rem;line-height:1.55;
}
.checks svg{width:1.2rem;height:1.2rem;flex:none;margin-top:.18rem}
.checks b{display:block}
.checks__notes{margin-top:1.6rem}

/* ---------- 17. (The four-image field-notes strip was removed — do not re-add) ---------- */

/* ---------- 18. Sticky note / callout ---------- */
.note-panel{
  align-self:start;
  background:var(--volt);
  color:#12120F;
  border:var(--bw) solid #12120F;
  box-shadow:var(--shadow);
  padding:1.1rem 1.2rem;
}
.note-panel h3{color:#12120F;margin-bottom:.5rem;font-size:1.05rem}
.note-panel p{font-size:.94rem;line-height:1.58}
.note-panel p:last-child{margin-bottom:0}
.note-panel--violet{background:var(--violet);color:#0E0B2A}
.note-panel--violet h3{color:#0E0B2A}
.note-panel--spaced{margin-top:1.8rem}

/* ---------- 19. Coverage ---------- */
.zipgrid{display:grid;gap:1rem;margin-bottom:1.6rem}
@media (min-width:640px){.zipgrid{grid-template-columns:repeat(3,1fr)}}
.zip{
  border:var(--bw) solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:1rem;
  text-align:center;
}
.zip b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem);
  line-height:1;letter-spacing:-.01em;
}
.zip span{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  margin-top:.4rem;color:var(--ink-soft);
}
.areas__label{margin-bottom:.8rem}
.areas{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.areas li{margin:0}
.areas span{
  display:inline-block;border:2px solid var(--line);background:var(--card);
  padding:.35rem .6rem;font-size:.85rem;font-weight:600;
}
.areas__note{margin-bottom:1.4rem}
.figure{
  margin:0;
  border:var(--bw) solid var(--line);
  box-shadow:var(--shadow);
  background:var(--card);
}
.figure img{
  border-bottom:var(--bw) solid var(--line);
  aspect-ratio:3/2;
  object-fit:cover;
}
.figure figcaption{padding:.7rem .8rem}

/* ---------- 20. FAQ ---------- */
.faq .acc__item summary{font-size:.98rem;font-weight:700}
.faq .acc__content{font-size:.95rem}

/* ---------- 21. Final CTA ---------- */
.cta-final{
  background:var(--volt);
  color:#12120F;
  border-top:var(--bw) solid #12120F;
  padding-block:clamp(2.5rem,6vw,4.5rem);
  position:relative;
  overflow:hidden;
}
.eyebrow--ink{color:#12120F}
.cta-final::after{
  content:"";position:absolute;inset:auto -10% -60% auto;
  width:min(560px,80%);aspect-ratio:1;
  background:repeating-conic-gradient(#12120F 0 8deg,transparent 8deg 16deg);
  opacity:.07;pointer-events:none;
}
.cta-final h2{max-width:22ch;margin-bottom:1rem}
.cta-final p{font-size:var(--step-1);font-weight:500;max-width:52ch;margin-bottom:1.6rem}
.cta-final__row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.cta-final__phone{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,1rem + 3.4vw,3rem);
  line-height:1;
  text-decoration:none;
  letter-spacing:-.01em;
  border-bottom:.12em solid #12120F;
  padding-bottom:.05em;
}
.cta-final__phone:hover{background:#12120F;color:var(--volt);border-color:#12120F}
.cta-meta{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;
  margin-top:1.5rem;padding-top:1.2rem;
  border-top:2px solid #12120F;
  font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- 22. Footer ---------- */
.site-footer{
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(1.8rem,4vw,2.8rem);
  border-top:var(--bw) solid #12120F;
}
.site-footer .brand__logo{height:42px}
@media (min-width:760px){.site-footer .brand__logo{height:52px}}
.brand__name{color:inherit}
.site-footer .brand__tag{color:#A9A498}
.footer__grid{display:grid;gap:1.25rem}
@media (min-width:720px){.footer__grid{grid-template-columns:1.2fr 1fr;align-items:start}}
.footer__phone{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,1rem + 2vw,2rem);
  line-height:1;text-decoration:none;display:inline-block;
  color:var(--volt);
}
.footer__phone:hover{background:var(--volt);color:#12120F}
.footer__meta{
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:#A9A498;line-height:1.8;margin:0;
}
.footer__meta--spaced{margin-top:1rem}
.footer__meta--label{margin-bottom:.4rem}
.footer__meta--copy{margin-top:1.2rem}

/* ---------- 23. Floating call button ---------- */
.float-call{
  position:fixed;
  right:14px;bottom:14px;
  z-index:120;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1rem;
  background:var(--volt);color:#12120F;
  border:var(--bw) solid #12120F;
  box-shadow:5px 5px 0 #12120F;
  text-decoration:none;
  font-family:var(--font-display);
  font-size:.92rem;letter-spacing:.02em;text-transform:uppercase;
  transform:translateY(140%);
  opacity:0;
  transition:transform .22s ease,opacity .22s ease;
  pointer-events:none;
  max-width:calc(100vw - 28px);
}
.float-call svg{width:1.1em;height:1.1em;flex:none}
.float-call[data-visible="true"]{transform:translateY(0);opacity:1;pointer-events:auto}
.float-call:hover{box-shadow:7px 7px 0 #12120F}
.float-call__n{white-space:nowrap}
/* On phones the floating button collapses to a round icon so it never covers copy */
@media (max-width:600px){
  .float-call{
    width:60px;height:60px;padding:0;
    border-radius:50%;
    justify-content:center;
  }
  .float-call svg{width:26px;height:26px}
  .float-call__n{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .float-call::after{
    content:"";
    position:absolute;inset:-6px;
    border-radius:50%;
    border:3px solid var(--volt);
    opacity:.55;
    animation:ring 2.4s ease-out infinite;
  }
}
@keyframes ring{
  0%{transform:scale(.92);opacity:.6}
  70%{transform:scale(1.18);opacity:0}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .float-call::after{animation:none}
  .float-call{transition:opacity .15s ease}
  .float-call[data-visible="true"]{transform:none}
}

/* ---------- 24. Utilities ---------- */
.hr-dash{border:0;border-top:2px dashed var(--line);margin-block:1.4rem}
.center{text-align:center}
.lead--tight{max-width:60ch;margin-bottom:1.4rem}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media print{
  .site-header,.float-call,.marquee,.rail-ctrl{display:none!important}
  /* printing should show every service paragraph */
  .svc__extra{display:block!important}
}

/* ---------- 25. Service card "Read more" ----------
   Native <details>/<summary>: the full text sits in the HTML and is revealed by
   the browser itself, so every paragraph is in the markup for crawlers and for
   visitors without JavaScript. The toggle needs no script at all: it is the
   <summary>, so it works even if script.js never loads. */
.svc__fold{margin-top:.9rem}
.svc__toggle{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:.6rem .85rem;
  background:var(--card);
  color:var(--ink);
  border:2px solid var(--line);
  box-shadow:2px 2px 0 var(--line);
  font-family:var(--font-body);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1;
  cursor:pointer;
  list-style:none;
}
.svc__toggle::-webkit-details-marker{display:none}
.svc__toggle:hover{background:var(--ink);color:var(--paper)}
.svc__toggle-ui{
  width:.82em;height:.82em;flex:none;stroke-width:2.8;
  transition:transform .18s ease;
}
.svc__fold[open] .svc__toggle-ui{transform:rotate(180deg)}
.svc__fold[open] .svc__toggle{background:var(--ink);color:var(--paper);box-shadow:none}
.lbl-less{display:none}
.svc__fold[open] .lbl-more{display:none}
.svc__fold[open] .lbl-less{display:inline}
.svc__extra{padding-top:.9rem;border-top:2px dashed rgba(18,18,15,.25);margin-top:.9rem}
.svc__fold[open] .svc__extra{animation:foldIn .2s ease both}
@keyframes foldIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .svc__fold[open] .svc__extra{animation:none}
  .svc__toggle-ui{transition:none}
}

/* ---------- 26. Default (pre-JS) state ----------
   Nothing here needs JavaScript to show content: the service paragraphs and
   every accordion answer are open by default. The <noscript> block in
   index.html then (a) forces the floating call button visible, and (b) removes
   the two controls that need script — the rail arrows and the menu button — so
   a visitor without JavaScript still gets a complete page. */
.rail-ctrl{display:flex}

.site-nav{display:none}
.site-nav[data-open="true"]{display:block}
@media (max-width:959px){
  .site-nav ul{grid-template-columns:1fr}
}
@media (min-width:960px){
  .site-nav{display:block}
}