/* Port City Water Heaters — design tokens
   Palette comes from the trade: tank enamel, galvanized steel, gas-line yellow,
   and the hot-red / cold-blue of the pipes. */
@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Source Serif";src:url(fonts/source-serif.woff2) format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif";src:url(fonts/source-serif-italic.woff2) format("woff2-variations");font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --enamel:#F2F4F1;
  --white:#FFFFFF;
  --ink:#19262E;
  --steel:#5E6E77;
  --line:#CBD3D6;
  --gas:#F0B400;
  --gas-deep:#C99700;
  --hot:#B8322A;
  --cold:#1C5D8E;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Source Serif",Georgia,"Times New Roman",serif;
  --wrap:1120px;
  --gut:clamp(18px,4vw,36px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--enamel);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.62;font-optical-sizing:auto;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--cold);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--cold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--white);padding:10px 14px;z-index:99;font-family:var(--sans)}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* type */
h1,h2,h3{font-family:var(--sans);color:var(--ink);margin:0;text-wrap:balance}
h1{font-weight:800;font-stretch:122%;font-size:clamp(1.85rem,4.3vw,3.15rem);line-height:1.06;letter-spacing:-.012em}
h2{font-weight:750;font-stretch:112%;font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.12;letter-spacing:-.005em}
h3{font-weight:700;font-stretch:100%;font-size:1.15rem;line-height:1.25}
p{margin:0 0 1em;max-width:64ch}
.lede{font-size:1.25rem;line-height:1.55;color:#2B3A43;max-width:56ch}
.small{font-size:.95rem;color:var(--steel)}
ul,ol{padding-left:1.2em;margin:0 0 1em}
li{margin-bottom:.35em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--sans);font-weight:700;font-stretch:105%;font-size:1.02rem;line-height:1.1;padding:.95em 1.35em;border-radius:6px;border:2px solid var(--ink);text-decoration:none;cursor:pointer;min-height:48px}
.btn-call{background:var(--gas);color:var(--ink);border-color:var(--ink)}
.btn-call:hover{background:#FFC71F;color:var(--ink)}
.btn-text{background:transparent;color:var(--ink)}
.btn-text:hover{background:var(--ink);color:var(--white)}
.btn svg{width:1.15em;height:1.15em;flex:none}

/* header */
.hdr{border-bottom:1px solid var(--line);background:var(--enamel)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--sans);font-weight:800;font-stretch:118%;font-size:1.08rem;letter-spacing:-.005em;line-height:1.05}
.brand{flex-direction:column;gap:3px;text-align:center;padding-block:7px}
.brand svg{width:30px;height:41px;flex:none}
.brand .bw{display:block;line-height:1}
.brand .bw b{display:block;font-weight:850;font-stretch:125%;font-size:.86rem;letter-spacing:.07em;text-transform:uppercase}
.brand .bw i{display:block;font-style:normal;font-weight:700;font-stretch:104%;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;margin-top:3px;color:var(--steel)}
.ftr .brand{display:inline-flex;align-items:center}
.ftr .brand svg{width:40px;height:55px}
.ftr .brand .bw b{font-size:1.05rem}
.ftr .brand .bw i{font-size:.68rem;color:#B5C0C5}
.h1-note{display:inline-block;font-size:.34em;font-weight:600;font-stretch:100%;letter-spacing:0;line-height:1.2;color:var(--steel);vertical-align:middle;white-space:nowrap}
.nav{display:flex;align-items:center;gap:22px;font-family:var(--sans);font-weight:600;font-size:.95rem}
.nav a{color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--gas-deep)}
.nav .btn{padding:.6em 1em;min-height:42px;border-bottom:2px solid var(--ink)}
.menu{display:none}
@media (max-width:860px){
  .nav a.hide-s{display:none}
  .nav{gap:14px}
}
@media (max-width:560px){
  .nav a:not(.btn){display:none}
}

/* hero */
.hero{padding-block:clamp(36px,6vw,84px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{margin-bottom:.55em}
.hero .lede{margin-bottom:1.4em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.1rem}
.hero .small{max-width:48ch}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}

/* the rating plate — the one memorable thing on the page */
.plate{position:relative;font-family:var(--sans);color:var(--ink);padding:26px 24px 20px;border-radius:12px;
  background:linear-gradient(155deg,#E4E9EA 0%,#F7F9F9 42%,#DDE3E5 100%);
  border:2px solid #8E9CA3;
  box-shadow:inset 0 0 0 5px #F4F6F6,inset 0 0 0 6px #B6C1C6,0 18px 30px -22px rgba(25,38,46,.55)}
.plate::before,.plate::after{content:"";position:absolute;left:14px;right:14px;height:10px;
  background:radial-gradient(circle at 5px 5px,#fff 0 1.5px,#98A5AB 2px 4px,transparent 4.5px) left top/10px 10px no-repeat,
             radial-gradient(circle at 5px 5px,#fff 0 1.5px,#98A5AB 2px 4px,transparent 4.5px) right top/10px 10px no-repeat}
.plate::before{top:9px}.plate::after{bottom:9px}
.plate h2{font-size:1.02rem;font-stretch:125%;font-weight:800;letter-spacing:.01em;margin:6px 0 14px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.plate dl{margin:0;display:grid;grid-template-columns:1fr}
.plate .row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;padding:10px 0;border-bottom:1px solid #AEB9BE;align-items:baseline}
.plate dt{font-size:.84rem;font-weight:600;font-stretch:90%;color:#45545D}
.plate dd{margin:0;font-weight:700;font-stretch:108%;font-size:.98rem;line-height:1.25}
.plate .row.price dd{font-size:1.95rem;font-stretch:125%;font-weight:850;line-height:1}
.plate .row.price dd span{font-size:.88rem;font-stretch:100%;font-weight:600;color:#45545D;margin-left:.3em}
.plate .foot{margin:14px 0 4px;font-size:.88rem;font-weight:500;font-stretch:100%;color:#2B3A43;max-width:none}

/* emergency strip */
.strip{background:var(--ink);color:var(--enamel)}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding-block:22px}
.strip p{margin:0;font-family:var(--sans);font-weight:600;font-stretch:104%;font-size:1.1rem;max-width:none}
.strip .btn-call{border-color:var(--gas)}

/* sections */
.sec{padding-block:clamp(52px,8vw,104px)}
.sec.tint{background:var(--white);border-block:1px solid var(--line)}
.sec-head{margin-bottom:clamp(24px,4vw,44px);max-width:46rem}
.sec-head p{margin-top:.8em;color:#2B3A43}

/* repair or replace */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.diagram{background:var(--enamel);border:1px solid var(--line);border-radius:10px;padding:14px}
.diagram svg{width:100%;height:auto}
.diagram figcaption{font-family:var(--sans);font-size:.85rem;color:var(--steel);padding:8px 6px 0}
.verdicts h3{margin:0 0 .5em}
.verdicts ul{padding-left:0;list-style:none;margin:0 0 1.6em}
.verdicts li{padding:.55em 0 .55em 1.5em;border-bottom:1px solid var(--line);position:relative;margin:0}
.verdicts li::before{content:"";position:absolute;left:0;top:1.05em;width:.8em;height:.8em;border-radius:50%}
.verdicts .fix li::before{background:var(--gas);box-shadow:0 0 0 2px var(--ink)}
.verdicts .swap li::before{background:transparent;box-shadow:inset 0 0 0 3px var(--hot)}

/* price table */
.ptable{width:100%;border-collapse:collapse;font-family:var(--sans);margin-bottom:1.2em}
.ptable th,.ptable td{text-align:left;padding:16px 14px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.ptable thead th{font-size:.85rem;font-weight:600;font-stretch:92%;color:var(--steel);border-bottom:2px solid var(--ink)}
.ptable tbody th{font-weight:700;font-stretch:108%;font-size:1.05rem;width:34%}
.ptable td{font-family:var(--serif);font-size:1.05rem}
.ptable td strong{font-family:var(--sans);font-weight:800;font-stretch:118%;font-size:1.25rem;display:block;line-height:1.15}
@media (max-width:640px){
  .ptable thead{display:none}
  .ptable tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .ptable th,.ptable td{display:block;width:auto!important;border:0;padding:2px 0}
}

/* visit sequence: cold to hot, laid out left to right */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.steps li{position:relative;padding:60px 0 0;margin:0}
.steps li::before{content:"";position:absolute;top:19px;left:22px;right:calc(-1 * clamp(20px,3vw,40px) - 22px);height:6px;border-radius:3px}
.steps li:nth-child(1)::before{background:linear-gradient(90deg,var(--cold),#6A4860)}
.steps li:nth-child(2)::before{background:linear-gradient(90deg,#6A4860,var(--hot))}
.steps li:last-child::before{display:none}
.steps .n{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--white);border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-stretch:118%;font-size:1.05rem}
.steps h3{margin:0 0 .3em}
.steps p{margin:0;color:#2B3A43;font-size:1.02rem}
@media (max-width:860px){
  .steps{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding:4px var(--gut) 6px;scroll-padding-inline:var(--gut)}
  .steps::-webkit-scrollbar{display:none}
  .steps li{flex:0 0 78%;scroll-snap-align:start}
  .steps li::before{right:-40px}
}
.swipe-hint{display:none;font-family:var(--sans);font-weight:600;font-size:.85rem;color:var(--steel);margin:10px 0 0}
@media (max-width:860px){.swipe-hint{display:block}}

/* review belt */
.belt-sec{padding-block:clamp(48px,7vw,88px);overflow:hidden}
.belt-sec .sec-head{margin-bottom:28px}
.belt{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.belt-track{display:flex;gap:16px;width:max-content;animation:belt var(--dur,80s) linear infinite;padding:6px 0}
.belt:hover .belt-track,.belt:focus-within .belt-track{animation-play-state:paused}
@keyframes belt{to{transform:translateX(calc(-50% - 8px))}}
.rev{flex:none;width:min(340px,82vw);background:var(--white);border:1px solid var(--line);border-top:4px solid var(--gas);border-radius:6px;padding:18px 20px 16px;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.rev .stars{font-family:var(--sans);color:var(--gas-deep);letter-spacing:.12em;font-size:1rem;line-height:1}
.rev blockquote{margin:0;font-size:1.02rem;line-height:1.5}
.rev figcaption{font-family:var(--sans);font-size:.9rem;font-weight:600;font-stretch:96%}
.rev figcaption span{display:block;font-weight:500;color:var(--steel)}
.rev .sample{font-family:var(--sans);font-size:.75rem;font-weight:700;color:var(--hot)}
.belt-note{margin-top:20px}
@media (prefers-reduced-motion:reduce){
  .belt{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .belt-track{animation:none}
  .belt-track [aria-hidden="true"]{display:none}
}

/* areas */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:2px solid var(--ink)}
.areas a{display:block;padding:18px 14px 18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-family:var(--sans);font-weight:700;font-stretch:108%}
.areas a span{display:block;font-family:var(--serif);font-weight:400;font-size:.95rem;color:var(--steel);font-stretch:100%;margin-top:2px}
.areas a:hover{background:var(--white)}

/* faq */
.faq{max-width:46rem}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:2px solid var(--ink)}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-family:var(--sans);font-weight:700;font-stretch:106%;font-size:1.08rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details > div{padding:0 0 18px;color:#2B3A43}
.faq details > div p:last-child{margin-bottom:0}

/* forms */
.form{display:grid;gap:16px;max-width:36rem}
.form label{display:grid;gap:6px;font-family:var(--sans);font-weight:600;font-stretch:100%;font-size:.95rem}
.form input,.form select,.form textarea{font:inherit;font-family:var(--serif);font-size:1.05rem;padding:12px 12px;border:2px solid #8E9CA3;border-radius:6px;background:var(--white);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ink)}
.form .hint{font-weight:400;color:var(--steel);font-size:.88rem}
.hp{position:absolute;left:-999px}

/* closing call */
.close{background:var(--gas);border-block:2px solid var(--ink)}
.close .wrap{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center;justify-content:space-between;padding-block:clamp(32px,5vw,56px)}
.close h2{max-width:24ch}
.close .btn-call{background:var(--ink);color:var(--white);border-color:var(--ink)}
.close .btn-call:hover{background:#2B3A43;color:var(--white)}
.close .btn-text{border-color:var(--ink)}

/* page header for inner pages */
.phead{padding-block:clamp(36px,6vw,72px) clamp(8px,2vw,24px)}
.phead h1{font-size:clamp(1.9rem,4.4vw,3rem);max-width:22ch}
.phead .lede{margin-top:1em}
.crumbs{font-family:var(--sans);font-size:.88rem;color:var(--steel);margin-bottom:14px}
.crumbs a{color:var(--steel)}
.prose{padding-block:clamp(20px,4vw,40px) clamp(48px,7vw,88px)}
.prose h2{margin:1.7em 0 .5em}
.prose .wrap>h2:first-child{margin-top:.6em}
.prose h3{margin:1.4em 0 .4em}
.prose .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 40px}
.callout{border-left:6px solid var(--gas);background:var(--white);padding:16px 20px;margin:1.4em 0;max-width:64ch}
.callout.warn{border-left-color:var(--hot)}
.callout p:last-child{margin-bottom:0}
.callout strong{font-family:var(--sans)}

/* footer */
.ftr{background:var(--ink);color:#D7DEE1;padding-block:48px 28px;font-size:1rem}
.ftr a{color:#fff}
.ftr .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px 44px}
@media (max-width:800px){.ftr .cols{grid-template-columns:1fr}}
.ftr h3{color:#fff;font-size:.95rem;margin-bottom:.7em}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:.4em}
.ftr .lic{margin-top:28px;padding-top:18px;border-top:1px solid #3A4A53;font-family:var(--sans);font-size:.9rem;color:#B5C0C5}
.ftr .brand{color:#fff;margin-bottom:12px}

/* mobile call bar */
.callbar{display:none}
@media (max-width:720px){
  .callbar{display:grid;grid-template-columns:1.2fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--enamel);border-top:2px solid var(--ink);z-index:40}
  .callbar .btn{min-height:50px;padding:.7em .6em}
  body{padding-bottom:74px}
}
@media print{.callbar,.strip,.belt-sec{display:none}}

/* parts carousel beside the cutaway: one part at a time, swipe or use the arrows */
.pn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--sans);font-weight:800;font-stretch:118%;font-size:.95rem;background:var(--gas);border:2.5px solid var(--ink)}
.pn.swap{background:#fff;border:4px solid var(--hot)}
.pbelt{min-width:0}
.car-track{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.pcard{flex:0 0 100%;scroll-snap-align:start;margin:0;background:var(--white);border:2px solid var(--ink);border-radius:12px;padding:20px 22px 22px}
.pcard-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pcard .pn{width:40px;height:40px;font-size:1.15rem}
.ptag{font-family:var(--sans);font-weight:700;font-stretch:104%;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:5px;border:1.5px solid var(--ink);background:#FFF6D8}
.ptag.swap{background:#fff;border-color:var(--hot);color:var(--hot)}
.pcard h3{font-size:1.35rem;font-stretch:110%;margin:0 0 .35em}
.pcard p{margin:0;color:#2B3A43;max-width:none}
.pcard .pnotice{font-family:var(--sans);font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:.45em}
.belt-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
.belt-nav button{width:52px;height:48px;border-radius:8px;border:2px solid var(--ink);background:var(--gas);color:var(--ink);font-family:var(--sans);font-weight:800;font-size:1.3rem;line-height:1;cursor:pointer}
.belt-nav button:hover{background:#FFC71F}
.belt-nav button:disabled{background:transparent;color:#9AA7AD;border-color:var(--line);cursor:default}
.belt-count{font-family:var(--sans);font-weight:700;font-stretch:108%;font-size:1rem}
.dg-m{cursor:pointer}
.dg-m circle{transform-box:fill-box;transform-origin:center;transition:transform .18s}
.dg-m.on circle{transform:scale(1.5)}
@media (max-width:900px){
  .split.parts{gap:14px}
  .diagram svg{width:auto;max-width:100%;max-height:50vh;margin-inline:auto}
  .pcard{padding:16px 18px 18px}
}

.nav .short{display:none}
@media (max-width:560px){.nav .long{display:none}.nav .short{display:inline}}
@media (min-width:901px){.split>.diagram{position:sticky;top:20px}}
.ptable thead th:nth-child(1){width:24%}.ptable thead th:nth-child(2){width:30%}

/* ===== Friend-feedback additions: hamburger nav, FAQ "see more", service-area map ===== */
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink);line-height:0}
.navtoggle svg{width:26px;height:26px}
@media (max-width:720px){
  .navtoggle{display:inline-flex;align-items:center}
  .navcall{display:none !important}
  .hdr .wrap{position:relative;flex-wrap:wrap}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--enamel);border-top:1px solid var(--line);box-shadow:0 14px 26px rgba(25,38,46,.14);z-index:45;padding:4px 16px 12px}
  .nav.open{display:flex}
  .nav a:not(.btn){display:block;padding:13px 0;border-bottom:1px solid var(--line)}
}
.faq-more{margin-top:1.1em;font-family:var(--sans);font-weight:700}
.faq-more a{color:var(--gas-deep);text-decoration:none}
.faq-more a:hover{text-decoration:underline}
/* ===== Service-area map (Leaflet + OpenStreetMap) ===== */
.svc-map{margin:0}
.svc-map .map{position:relative;z-index:0;height:clamp(340px,52vw,480px);border:2px solid var(--ink);border-radius:12px;background:#E6EBE7;overflow:hidden;font-family:var(--sans)}
.svc-map .map:not(.leaflet-container){display:none}
.svc-map .leaflet-tile-pane{filter:saturate(.72) sepia(.1) brightness(1.02)}
.svc-map .mp-pin{background:none;border:0}
.svc-map .mp-pin span{display:block;width:20px;height:20px;border-radius:50%;background:var(--cold);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--ink),0 2px 5px rgba(25,38,46,.35)}
.svc-map .mp-star{background:none;border:0;filter:drop-shadow(0 2px 3px rgba(25,38,46,.35))}
.svc-map .mp-star svg{width:40px;height:40px}
.svc-map .mp-label{background:rgba(255,255,255,.94);border:1px solid var(--ink);border-radius:5px;box-shadow:none;color:var(--ink);font-family:var(--sans);font-weight:700;font-stretch:104%;font-size:.8rem;line-height:1.15;padding:3px 7px;white-space:nowrap}
.svc-map .mp-label::before{display:none}
.svc-map .mp-label-home{background:var(--gas);font-weight:800;font-size:.9rem;text-align:center}
.svc-map .mp-label-home small{display:block;font-weight:600;font-size:.68rem;font-stretch:96%}
.svc-map .leaflet-popup-content-wrapper{border-radius:8px;border:2px solid var(--ink);box-shadow:0 10px 22px -12px rgba(25,38,46,.6)}
.svc-map .leaflet-popup-content{margin:12px 16px;font-family:var(--sans);font-size:.92rem;line-height:1.4;color:var(--ink)}
.svc-map .leaflet-popup-content strong{display:block;font-weight:800;font-stretch:112%;font-size:1rem;margin-bottom:2px}
.svc-map .leaflet-popup-content a{color:var(--cold);font-weight:600}
.svc-map .leaflet-popup-tip{box-shadow:none;border:2px solid var(--ink)}
.svc-map .leaflet-bar{border:2px solid var(--ink);border-radius:6px;box-shadow:none}
.svc-map .leaflet-bar a{color:var(--ink);font-family:var(--sans);width:34px;height:34px;line-height:32px}
.svc-map .leaflet-control-attribution{font-family:var(--sans);font-size:.68rem}
.svc-map figcaption{text-align:center;font-family:var(--serif);color:var(--steel);font-size:.98rem;margin:12px auto 0;max-width:60ch}

/* ===== Comparison tables (home "How we compare", tankless page) ===== */
.ctable{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--sans);margin:0 0 1.1em}
.ctable th,.ctable td{text-align:left;vertical-align:top;padding:15px 18px;border-bottom:1px solid var(--line)}
.ctable thead th{font-size:.92rem;font-weight:700;font-stretch:104%;color:var(--steel);border-bottom:2px solid var(--ink);vertical-align:bottom}
.ctable tbody th{width:22%;font-weight:700;font-stretch:108%;font-size:1.02rem;padding-left:0}
.ctable thead th:first-child{padding-left:0}
.ctable td{width:39%;font-family:var(--serif);font-size:1.03rem;line-height:1.45;color:#2B3A43}
.ctable td strong{font-family:var(--sans);font-weight:750;font-stretch:106%;color:var(--ink)}
.ctable .us{background:#FFF6D8;color:var(--ink);border-inline:2px solid var(--ink)}
.ctable thead .us{background:var(--gas);color:var(--ink);font-weight:800;font-stretch:112%;font-size:1rem;border-top:2px solid var(--ink);border-radius:10px 10px 0 0}
.ctable tbody tr:last-child .us{border-bottom:2px solid var(--ink);border-radius:0 0 10px 10px}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td:not(.us){border-bottom-color:transparent}
@media (max-width:700px){
  .ctable,.ctable tbody{display:block;width:auto}
  .ctable thead{display:none}
  .ctable tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:12px 0 10px;border-top:1px solid var(--line)}
  .ctable tbody tr:first-child{border-top:2px solid var(--ink)}
  .ctable tbody th{grid-column:1/-1;width:auto;padding:0 0 2px;border:0;font-size:1.02rem}
  .ctable td{width:auto;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--white);font-size:.95rem;line-height:1.35}
  .ctable td::before{content:attr(data-label);display:block;font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--steel);margin-bottom:3px;line-height:1.2}
  .ctable td.us,.ctable tbody tr:last-child td.us{border:2px solid var(--ink);border-radius:8px}
  .ctable td.us::before{color:#6B5200}
  .ctable tbody tr:last-child td:not(.us){border-bottom-color:var(--line)}
}

/* ===== Before / after drag slider (vanilla JS in site.js) ===== */
.ba-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,28px);margin-bottom:1.2em}
@media (max-width:860px){.ba-grid{grid-template-columns:minmax(0,1fr);max-width:460px;margin-inline:auto}}
.ba{margin:0}
.ba-frame{--pos:50%;position:relative;aspect-ratio:3/4;overflow:hidden;border:2px solid var(--ink);border-radius:12px;background:#2B3A43;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;pointer-events:none;-webkit-user-drag:none}
.ba-top{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 1px rgba(25,38,46,.55);pointer-events:none}
.ba-handle{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;margin:-24px 0 0 -24px;padding:0;border-radius:50%;border:2px solid var(--ink);background:var(--gas);color:var(--ink);display:grid;place-items:center;cursor:ew-resize;box-shadow:0 4px 12px rgba(25,38,46,.45);touch-action:pan-y}
.ba-handle svg{width:24px;height:24px}
.ba-handle:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:50%}
.ba-frame.is-drag .ba-handle{background:#FFC71F;transform:scale(1.06)}
.ba-tag{position:absolute;top:12px;font-family:var(--sans);font-weight:800;font-stretch:112%;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:5px;border:1.5px solid var(--ink);pointer-events:none}
.ba-tag-b{left:12px;background:var(--ink);color:#fff;border-color:#fff}
.ba-tag-a{right:12px;background:var(--gas);color:var(--ink)}
.ba figcaption{font-family:var(--sans);font-weight:700;font-stretch:104%;font-size:.98rem;padding:10px 2px 0}
.ba-note{max-width:none}
.prose .ba-grid{margin-top:1.4em}
.arealist{font-family:var(--sans);font-weight:600;line-height:2.1}
.arealist a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--gas-deep);padding-bottom:1px}
.prose .svc-map{margin-bottom:1.6em}

/* before/after picker: on phones show one example at a time, chosen with the chips */
.ba-tabs{display:none}
@media (max-width:860px){
  .ba-set.is-tabs .ba-tabs{display:flex;flex-wrap:wrap;gap:8px;max-width:460px;margin:0 auto 14px}
  .ba-tab{font-family:var(--sans);font-weight:700;font-stretch:104%;font-size:.9rem;padding:9px 14px;min-height:40px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
  .ba-tab[aria-pressed="true"]{background:var(--ink);color:#fff}
  .ba-set.is-tabs .ba:not(.on){display:none}
}