/* ADJ Services — water heater flushing. Mobile-first; most customers book on a phone. */

:root {
  color-scheme: light;
  --navy:#0f2a3d; --navy-2:#1d4661; --navy-soft:#eaf1f7;
  --rust:#c2410c; --rust-dark:#9a330a; --rust-soft:#fdeee6;
  --ink:#15181d; --body:#4c5663; --muted:#6b7683;
  --line:#e2e8ee; --line-2:#cfd9e2; --paper:#fff; --wash:#f6f9fc;
  --ok:#15803d; --ok-bg:#e9f6ed; --warn:#a16207; --warn-bg:#fdf6e3;
  --head:'Barlow Condensed',system-ui,sans-serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(18px,5vw,56px); --maxw:1180px;
  --sh:0 1px 3px rgba(15,42,61,.06),0 8px 24px rgba(15,42,61,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--rust);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.05;color:var(--navy);letter-spacing:-.005em}
h1{font-size:clamp(38px,7.4vw,68px)}
h2{font-size:clamp(30px,4.8vw,46px)}
h3{font-size:clamp(21px,2.6vw,25px)}
p{color:var(--body)}
.lede{font-size:clamp(17px,1.8vw,19.5px);color:var(--body);max-width:60ch}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--rust);margin-bottom:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:16px;padding:15px 30px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;font-family:var(--sans);transition:transform .14s,background .14s,box-shadow .14s;text-align:center}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-p{background:var(--rust);color:#fff;box-shadow:0 4px 14px rgba(194,65,12,.28)}
.btn-p:hover{background:var(--rust-dark)}
.btn-s{background:#fff;color:var(--navy);border-color:var(--line-2)}
.btn-s:hover{border-color:var(--navy);background:var(--wash)}
.btn-w{background:#fff;color:var(--navy)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-sm{padding:10px 18px;font-size:14.5px}

/* top strip + nav */
.topbar{background:var(--navy);color:#bcd2e2;font-size:13.5px;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.topbar b,.topbar a{color:#fff}
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.logo{font-family:var(--head);font-size:30px;font-weight:700;color:var(--navy);letter-spacing:.01em;white-space:nowrap}
.logo span{color:var(--rust)}
nav ul{display:flex;gap:26px;list-style:none;font-size:15px;font-weight:500}
nav a{color:var(--body)}
nav a:hover{color:var(--rust);text-decoration:none}
@media(max-width:880px){nav ul{display:none}}

/* hero */
.hero{background:linear-gradient(180deg,var(--wash),#fff);padding:clamp(44px,7vw,86px) 0 clamp(40px,6vw,72px)}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--rust-soft);border:1px solid #f6cdb8;color:var(--rust-dark);font-size:13px;font-weight:700;padding:7px 16px;border-radius:999px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:20px}
.hero h1{margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--rust)}
.hero .lede{margin-bottom:26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.price-tag{display:flex;align-items:baseline;gap:9px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.price-tag .n{font-family:var(--head);font-size:46px;font-weight:700;color:var(--navy);line-height:1}
.price-tag .t{font-size:15px;color:var(--muted)}
.hero-art{aspect-ratio:4/3.3;border-radius:12px;background:linear-gradient(155deg,var(--navy-2),var(--navy) 58%,#081a27);position:relative;overflow:hidden;box-shadow:0 22px 50px rgba(15,42,61,.28);display:flex;align-items:center;justify-content:center;padding:28px}
.hero-art::after{content:"";position:absolute;inset:auto -34px -34px auto;width:220px;height:220px;border-radius:50%;background:rgba(194,65,12,.3)}
.hero-art .card{position:relative;z-index:2;background:rgba(255,255,255,.97);border-radius:11px;padding:22px 24px;width:100%;max-width:320px;box-shadow:0 12px 30px rgba(0,0,0,.24)}
.hero-art .card .h{font-family:var(--head);font-size:22px;color:var(--navy);margin-bottom:3px}
.hero-art .card .s{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.hero-art .card .row{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-top:1px solid var(--line)}
.hero-art .card .row b{color:var(--navy)}

/* trust strip */
.trust{background:var(--navy);color:#a9c3d6;padding:22px 0}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
@media(max-width:760px){.trust .wrap{grid-template-columns:repeat(2,1fr);gap:22px}}
.trust b{display:block;color:#fff;font-family:var(--head);font-size:23px;font-weight:700;margin-bottom:1px}
.trust span{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600}

/* sections */
section{padding:clamp(48px,7vw,86px) 0}
.sec-head{margin-bottom:clamp(28px,4vw,48px);max-width:64ch}
.sec-head p{margin-top:12px}
.wash{background:var(--wash);border-block:1px solid var(--line)}

/* did-you-know callout */
.dyk{background:var(--navy);color:#dceaf4;border-radius:14px;padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,32px);align-items:start}
@media(max-width:700px){.dyk{grid-template-columns:1fr}}
.dyk .mark{font-family:var(--head);font-size:58px;font-weight:700;color:var(--rust);line-height:.8}
.dyk h2{color:#fff;margin-bottom:12px}
.dyk p{color:#c3d8e6;font-size:17px}
.dyk p+p{margin-top:12px}
.dyk b{color:#fff}

/* worst vs best */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,26px)}
@media(max-width:780px){.vs{grid-template-columns:1fr}}
.vs-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--sh)}
.vs-card .top{padding:16px 22px;font-family:var(--head);font-size:21px;font-weight:700;display:flex;align-items:center;gap:10px;color:#fff}
.vs-bad .top{background:#8f2f14}
.vs-good .top{background:#166534}
.vs-card .art{height:132px;position:relative;overflow:hidden}
.vs-bad .art{background:linear-gradient(150deg,#6b4a33,#3d2a1c)}
.vs-good .art{background:linear-gradient(150deg,#4a7ea3,#12374d)}
.vs-card .art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:repeating-linear-gradient(90deg,rgba(90,60,35,.85) 0 7px,rgba(70,45,26,.85) 7px 14px)}
.vs-good .art::after{height:7%;background:rgba(255,255,255,.16)}
.vs-card .body{padding:20px 22px}
.vs-card ul{list-style:none;font-size:15px}
.vs-card li{padding:7px 0 7px 24px;position:relative;color:var(--body);border-top:1px solid var(--line)}
.vs-card li:first-child{border-top:0}
.vs-card li::before{position:absolute;left:0;top:7px;font-weight:700}
.vs-bad li::before{content:"\2715";color:#b91c1c}
.vs-good li::before{content:"\2713";color:var(--ok)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,22px);counter-reset:s}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:11px;padding:22px;box-shadow:var(--sh)}
.step .n{counter-increment:s;font-family:var(--head);font-size:15px;font-weight:700;color:#fff;background:var(--rust);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step .n::before{content:counter(s)}
.step h3{font-size:20px;margin-bottom:6px}
.step p{font-size:14.5px}

/* good-to-know list */
.gtk{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gtk div{background:#fff;padding:22px}
.gtk h3{font-size:18.5px;margin-bottom:6px}
.gtk p{font-size:14.5px}

/* pricing */
.pricing{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,44px);align-items:start}
@media(max-width:860px){.pricing{grid-template-columns:1fr}}
.pcard{background:#fff;border:2px solid var(--navy);border-radius:14px;overflow:hidden;box-shadow:0 14px 36px rgba(15,42,61,.12)}
.pcard .h{background:var(--navy);color:#fff;padding:20px 26px}
.pcard .h .t{font-family:var(--head);font-size:26px;font-weight:700}
.pcard .h .s{font-size:14px;color:#a9c3d6}
.pcard .amt{display:flex;align-items:baseline;gap:10px;padding:24px 26px 8px}
.pcard .amt .n{font-family:var(--head);font-size:62px;font-weight:700;color:var(--navy);line-height:1}
.pcard .amt .u{color:var(--muted);font-size:15px}
.pcard ul{list-style:none;padding:8px 26px 24px}
.pcard li{padding:8px 0 8px 26px;position:relative;font-size:15.5px;color:var(--body)}
.pcard li::before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:700}
.pcard .foot{padding:0 26px 26px}
.deal{background:var(--rust-soft);border:1px solid #f6cdb8;border-radius:12px;padding:24px}
.deal h3{color:var(--rust-dark);margin-bottom:10px}
.deal p{font-size:15.5px;color:#7c3b16}
.math{margin-top:16px;background:#fff;border:1px solid #f0d3c2;border-radius:9px;padding:14px 16px;font-size:15px}
.math .r{display:flex;justify-content:space-between;padding:5px 0;color:var(--body)}
.math .r.tot{border-top:1px solid var(--line);margin-top:6px;padding-top:9px;font-weight:700;color:var(--navy);font-size:17px}
.math .r b{font-variant-numeric:tabular-nums}

/* payments */
.pays{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pay{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:10px 16px;font-weight:600;font-size:14.5px;color:var(--navy)}
.pay i{width:9px;height:9px;border-radius:50%;display:inline-block}

/* testimonials */
.slider{position:relative}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;-ms-overflow-style:none;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.quote{scroll-snap-align:start;flex:0 0 min(430px,84vw);background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;box-shadow:var(--sh)}
.quote .stars{color:#e0a020;font-size:16px;letter-spacing:2px;margin-bottom:12px}
.quote p{font-size:16.5px;color:var(--ink);margin-bottom:16px}
.quote .who{font-size:14px;color:var(--muted);font-weight:600}
.quote.ph{border-style:dashed;border-color:var(--line-2);background:var(--wash)}
.quote.ph p{color:var(--muted);font-style:italic}
.sl-nav{display:flex;gap:9px;margin-top:16px}
.sl-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:#fff;cursor:pointer;font-size:17px;color:var(--navy)}
.sl-nav button:hover{border-color:var(--navy);background:var(--wash)}
.ph-warn{background:var(--warn-bg);border:1px solid #f0e0b0;color:var(--warn);border-radius:9px;padding:12px 16px;font-size:14.5px;font-weight:600;margin-bottom:20px}

/* booking */
.book-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,4vw,40px);align-items:start}
/* Grid items default to min-width:auto, which lets the horizontal day
   scroller stretch its column instead of scrolling. Without this the page
   is ~2100px wide on a phone. */
.book-grid>*{min-width:0}
.panel{min-width:0}
.days,.slots,.track{max-width:100%}
@media(max-width:960px){.book-grid{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:clamp(20px,3vw,28px);box-shadow:var(--sh)}
.days{display:flex;gap:9px;overflow-x:auto;padding-bottom:10px;margin-bottom:18px;-ms-overflow-style:none;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;min-width:74px;border:1.5px solid var(--line-2);border-radius:10px;padding:11px 8px;text-align:center;cursor:pointer;background:#fff;transition:border-color .13s,background .13s}
.day:hover{border-color:var(--navy)}
.day.on{border-color:var(--rust);background:var(--rust-soft)}
.day .dw{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.day .dd{font-family:var(--head);font-size:27px;font-weight:700;color:var(--navy);line-height:1.1}
.day .dm{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.day.on .dw,.day.on .dm{color:var(--rust-dark)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
.slot{border:1.5px solid var(--line-2);background:#fff;border-radius:8px;padding:12px 6px;font-weight:600;font-size:15px;color:var(--navy);cursor:pointer;font-family:var(--sans);transition:border-color .13s,background .13s}
.slot:hover{border-color:var(--navy);background:var(--wash)}
.slot.on{background:var(--rust);border-color:var(--rust);color:#fff}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line-2);border-radius:8px;padding:12px 14px}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 3px rgba(194,65,12,.13)}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-row label{flex:1;min-width:130px;border:1.5px solid var(--line-2);border-radius:8px;padding:12px;cursor:pointer;font-size:15px;font-weight:600;color:var(--navy);text-align:center;background:#fff}
.radio-row input{position:absolute;opacity:0;width:0;height:0}
.radio-row label:has(input:checked){border-color:var(--rust);background:var(--rust-soft);color:var(--rust-dark)}
.summary{background:var(--navy-soft);border:1px solid #d3e2ee;border-radius:10px;padding:16px 18px;margin-bottom:18px;font-size:15px}
.summary .when{font-family:var(--head);font-size:21px;font-weight:700;color:var(--navy)}
.summary .none{color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{font-size:14px;color:var(--muted);margin-top:12px}
.msg{border-radius:9px;padding:14px 17px;margin-bottom:18px;font-size:15.5px;display:none}
.msg.show{display:block}
.msg.ok{background:var(--ok-bg);border:1px solid #bfe3ca;color:var(--ok)}
.msg.err{background:#fdeae5;border:1px solid #f5cbbc;color:#9a330a}
.done{text-align:center;padding:22px 8px}
.done .tick{width:62px;height:62px;border-radius:50%;background:var(--ok-bg);border:2px solid #bfe3ca;color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:31px;margin:0 auto 16px}

/* faq */
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;padding:17px 0;font-weight:600;font-size:17px;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--head);font-size:25px;color:var(--rust);flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding:0 0 17px;font-size:16px}

/* card / footer */
.vcard{background:linear-gradient(150deg,var(--navy-2),var(--navy));color:#fff;border-radius:14px;padding:clamp(24px,4vw,38px);display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;box-shadow:0 18px 44px rgba(15,42,61,.26)}
@media(max-width:700px){.vcard{grid-template-columns:1fr}}
.vcard .logo{color:#fff;font-size:34px}
.vcard p{color:#bcd2e2;margin:8px 0 0}
.vcard .rows{margin-top:18px;display:grid;gap:7px;font-size:15.5px}
.vcard .rows a{color:#fff}
.vcard .qr{display:flex;gap:10px;flex-wrap:wrap}
footer{background:#0a1e2c;color:#8fa9bb;padding:34px 0;font-size:14.5px}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a{color:#c9dced}

/* sticky mobile CTA */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:10px var(--gut);display:none;gap:10px;box-shadow:0 -4px 18px rgba(15,42,61,.09)}
.sticky .btn{flex:1;padding:13px}
@media(max-width:880px){.sticky{display:flex}body{padding-bottom:74px}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}