/* Liberty Walk-In Showers: design refresh (draft). No frameworks. */
:root{
--navy:#1F3A5F;--navy-deep:#142A47;--terra:#B5532E;--terra-deep:#94411F;--sage:#7A9A82;--sage-soft:#E3ECE5;
--cream:#FBF7F1;--sand:#F1E8DC;--ink:#2B2B2B;--slate:#555F6B;--gold:#F2B33D;--line:#E2D7C7;
--serif:"Merriweather",Georgia,"Times New Roman",serif;--sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--r:14px;--shadow:0 2px 4px rgba(20,42,71,.06),0 10px 28px rgba(20,42,71,.10);--shadow-lg:0 4px 8px rgba(20,42,71,.08),0 18px 40px rgba(20,42,71,.16)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 19px/1.6 var(--sans);color:var(--ink);background:var(--cream);padding-bottom:64px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--navy);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--terra-deep)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--serif);color:var(--navy);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(32px,5.2vw,52px);font-weight:700}
h2{font-size:clamp(26px,3.6vw,36px);font-weight:700}
h3{font-size:22px;font-weight:700}
p{margin:0 0 1em;max-width:70ch}
.small{font-size:16px;color:var(--slate)}

/* Draft bar */
.draft{background:#8F1D14;color:#fff;text-align:center;font-weight:600;padding:8px 12px;font-size:16px}

/* Header */
.top{background:#fff;box-shadow:0 1px 0 var(--line),0 6px 18px rgba(20,42,71,.06);position:sticky;top:0;z-index:20}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px}
.logo{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--navy);text-decoration:none;line-height:1.1}
.logo span{display:block;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-deep)}
.call{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px;border-radius:999px;background:var(--navy);color:#fff;font-weight:700;text-decoration:none;font-size:18px}
.call::before{content:"";width:22px;height:22px;background:url(icon-phone.svg) center/contain no-repeat}
.call:hover{background:var(--navy-deep);color:#fff}
.nav{display:flex;flex-wrap:wrap;gap:4px;padding:0 16px 10px;font-size:18px}
.nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600}
.nav a:hover{background:var(--sand);color:var(--navy)}
.nav a.cta{background:var(--terra);color:#fff;margin-left:auto}
.nav a.cta:hover{background:var(--terra-deep)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 28px;margin:6px 8px 6px 0;border-radius:10px;border:2px solid var(--terra);background:var(--terra);color:#fff;font:700 20px/1.2 var(--sans);text-decoration:none;cursor:pointer;box-shadow:0 6px 16px rgba(181,83,46,.30);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{background:var(--terra-deep);border-color:var(--terra-deep);color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(148,65,31,.35)}
.btn.alt{background:transparent;color:inherit;border-color:currentColor;box-shadow:none}
.btn.alt:hover{background:rgba(255,255,255,.12);color:inherit}
main .btn.alt{color:var(--navy)}
.hero .btn.alt,.band .btn.alt,.town-hero .btn.alt{color:#fff}
.btn.alt[href^="tel"]::before{content:"";width:22px;height:22px;background:url(icon-phone.svg) center/contain no-repeat}
main section:not(.hero):not(.town-hero) .btn.alt[href^="tel"]::before{background-image:url(icon-phone-navy.svg)}

/* Hero: gradient fallback first, then image, always under a dark overlay (white text ≥ 7:1) */
.hero{position:relative;isolation:isolate;color:#fff;padding:clamp(64px,10vw,120px) 0 clamp(96px,12vw,150px);
background:linear-gradient(100deg,rgba(20,42,71,.94) 0%,rgba(20,42,71,.86) 45%,rgba(31,58,95,.55) 100%),
url(hero-abstract.jpg) center right/cover no-repeat,linear-gradient(135deg,#1F3A5F,#142A47 60%,#4E6F68)}
@supports (background-image:image-set(url(a.webp) type("image/webp"))){
.hero{background:linear-gradient(100deg,rgba(20,42,71,.94) 0%,rgba(20,42,71,.86) 45%,rgba(31,58,95,.55) 100%),
image-set(url(hero-abstract.webp) type("image/webp"),url(hero-abstract.jpg) type("image/jpeg")) center right/cover no-repeat,#1F3A5F}}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:80px;background:url(divider-wave-cream.svg) bottom/100% 100% no-repeat;z-index:-1}
.hero .wrap{max-width:1140px}
.hero h1{color:#fff;max-width:17ch;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero p{font-size:clamp(19px,2vw,22px);max-width:40ch;color:#F4EFE7}
.hero .eyebrow,.eyebrow{display:inline-block;font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}

/* Sections */
main>section.wrap{padding-top:64px;padding-bottom:64px}
main>section.wrap>h2:first-child,main>section.wrap>h1+h2{position:relative;padding-bottom:14px}
main>section.wrap>h2:first-child::after,main>section.wrap>h1+h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:2px;background:var(--terra)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:50;background:#fff;color:var(--navy);padding:12px 16px;border-radius:8px;box-shadow:var(--shadow)}
/* Layered sand sections with wave top */
.sand{position:relative;isolation:isolate;background:var(--sand);padding:96px 0 72px;margin-top:24px}
.sand::before{content:"";position:absolute;left:0;right:0;top:-1px;height:64px;background:url(divider-wave-cream.svg) top/100% 100% no-repeat;transform:scaleY(-1);z-index:-1}
.sand h2{position:relative;padding-bottom:14px}.sand h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:2px;background:var(--terra)}
.ctas{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.ctas .btn{margin:6px 0}
/* Tick lists */
.ticks{list-style:none;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:20px}
.ticks li{position:relative;background:#fff;border-radius:12px;padding:18px 18px 18px 64px;box-shadow:var(--shadow);max-width:none}
.ticks li::before{content:"";position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:50%;background:var(--sage) url(icon-check.svg) center/18px no-repeat}
/* Strong quote banner (in-page) */
.callq{position:relative;overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--terra-deep),var(--terra));border-radius:18px;padding:32px 32px 28px 108px;margin:20px 0;box-shadow:var(--shadow-lg)}
.callq::before{content:"";position:absolute;left:28px;top:30px;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18) url(icon-phone.svg) center/28px no-repeat}
.callq p{color:#fff;font-size:21px}.callq strong{font-family:var(--serif);font-size:26px;display:block;margin-bottom:4px}
.callq .btn{background:#fff;color:var(--terra-deep);border-color:#fff;box-shadow:none}.callq .btn:hover{background:var(--cream);color:var(--terra-deep)}
.callq .btn.alt{background:transparent;color:#fff;border-color:#fff}
.callq .btn.alt::before{background-image:url(icon-phone.svg)!important}
.hours{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border-radius:16px;padding:10px 20px 10px 14px;color:var(--slate);box-shadow:var(--shadow);max-width:none}
.hours::before{content:"";width:28px;height:28px;border-radius:50%;background:var(--navy) url(icon-clock.svg) center/16px no-repeat}
.hours strong{color:var(--ink)}
.phx{display:inline-block;background:#FFF4D6;border:1px dashed #A87A12;color:#5C4100;border-radius:4px;padding:0 6px;font-size:.8em;font-weight:700;line-height:1.5;margin:0 2px}
.phx::before{content:"✎ "}
/* Home hero grid */
.herogrid{display:grid;gap:32px;position:relative}
@media(min-width:900px){.herogrid{grid-template-columns:1.15fr 1fr;align-items:center}}
.panel h1,.panel p{color:#fff}.panel .small{color:#DCE5EE;font-size:17px}

/* 3-step process with icons */
.steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));counter-reset:s}
.steps li{position:relative;background:#fff;border-radius:var(--r);padding:84px 26px 26px;box-shadow:var(--shadow);border-top:5px solid var(--sage);transition:transform .2s ease,box-shadow .2s ease}
.steps li::before{content:"";position:absolute;top:22px;left:26px;width:52px;height:52px;border-radius:50%;background:var(--navy) url(icon-phone.svg) center/26px no-repeat;box-shadow:0 0 0 6px var(--sage-soft)}
.steps li:nth-child(2)::before{background-image:url(icon-home-visit.svg);background-color:var(--terra)}
.steps li:nth-child(3)::before{background-image:url(icon-shower.svg);background-color:#4E6F68}
.steps li:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.steps h3{font-size:21px}
.steps p{margin:0;color:var(--ink)}

/* Cards */
.cards{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:24px}
.card{position:relative;background:#fff;border-radius:var(--r);padding:28px;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--navy),var(--sage))}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card h3 a{text-decoration:none;color:var(--navy)}
.card>a:last-child{display:inline-flex;align-items:center;min-height:48px;font-weight:700;color:var(--terra-deep)}

/* Towns */
.towns{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:20px 0}
.towns a{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 20px;border-radius:999px;background:#fff;border:2px solid var(--line);text-decoration:none;font-weight:700;color:var(--navy);box-shadow:0 2px 6px rgba(20,42,71,.06);transition:border-color .15s,transform .15s}
.towns a::before{content:"";width:18px;height:18px;background:var(--terra);-webkit-mask:url(icon-pin.svg) center/contain no-repeat;mask:url(icon-pin.svg) center/contain no-repeat}
.towns a:hover{border-color:var(--terra);transform:translateY(-2px)}
.route{counter-reset:r;list-style:none;padding:0;border-left:4px solid var(--sage);margin-left:10px}
.route li{position:relative;padding:8px 0 8px 28px}
.route li::before{content:"";position:absolute;left:-12px;top:16px;width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--navy)}

/* Town page header */
.town-hero{position:relative;isolation:isolate;color:#fff;padding:72px 0 110px;background:linear-gradient(120deg,rgba(20,42,71,.95),rgba(31,58,95,.88)),url(pattern-ripple.svg) center/400px repeat,#1F3A5F}
.town-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;background:url(divider-wave-cream.svg) bottom/100% 100% no-repeat;z-index:-1}
.town-hero h1{color:#fff;max-width:22ch}
.town-hero p{color:#F4EFE7;font-size:21px;max-width:56ch}
.town-hero .eyebrow::before{content:"";display:inline-block;vertical-align:-3px;width:20px;height:20px;margin-right:8px;background:var(--gold);-webkit-mask:url(icon-pin.svg) center/contain no-repeat;mask:url(icon-pin.svg) center/contain no-repeat}

/* Photo placeholders ([PHOTO] slots for real job photos) */
.photo-ph,.ph{margin:16px 0;min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;border:2px dashed #9AA5AD;border-radius:var(--r);color:var(--slate);background:repeating-linear-gradient(45deg,#fff,#fff 12px,#F7F3EC 12px,#F7F3EC 24px);font-weight:700;text-align:center;padding:16px}
.photo-ph span{font-weight:700;color:var(--terra-deep);text-transform:uppercase;font-size:15px;letter-spacing:.06em}
.hero .photo-ph{min-height:320px;background:rgba(255,255,255,.08);backdrop-filter:blur(2px);border-color:rgba(255,255,255,.55);color:#fff;font-weight:600;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hero .photo-ph span{color:var(--gold)}
.ph.small{max-width:300px}
figcaption{font-weight:400;font-size:16px}

/* Tables / forms */
table{border-collapse:collapse;width:100%;max-width:680px;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
td,th{border-bottom:1px solid var(--line);padding:14px 16px;text-align:left}
th{background:var(--navy);color:#fff;font-family:var(--serif)}
.form{display:grid;gap:18px;max-width:620px;background:#fff;padding:32px;border-radius:var(--r);box-shadow:var(--shadow);border-top:6px solid var(--terra)}
.form label{display:grid;gap:6px;font-weight:700}
.form input,.form select,.form textarea{font:inherit;min-height:52px;padding:12px 14px;border:2px solid #8A949C;border-radius:10px;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--navy);outline:3px solid var(--gold);outline-offset:1px}
.form .btn{width:100%}
fieldset{border:2px solid var(--line);border-radius:10px;padding:12px 16px}legend{font-weight:700;padding:0 6px}
.form label.opt{display:inline-flex;align-items:center;gap:10px;font-weight:400;margin:4px 18px 4px 0;min-height:48px}.opt input{width:24px;height:24px;min-height:0;accent-color:var(--terra)}
.hp{position:absolute;left:-9999px}

/* Quote banner */
.band{position:relative;isolation:isolate;color:#fff;text-align:center;padding:110px 0 80px;margin-top:40px;background:radial-gradient(circle at 15% 20%,rgba(122,154,130,.35),transparent 45%),radial-gradient(circle at 85% 80%,rgba(181,83,46,.35),transparent 45%),linear-gradient(135deg,#1F3A5F,#142A47)}
.band::before{content:"";position:absolute;left:0;right:0;top:-1px;height:70px;background:url(divider-wave-cream.svg) top/100% 100% no-repeat;transform:scaleY(-1);z-index:-1}
.band h2{color:#fff;font-size:clamp(28px,4vw,42px)}
.band p{margin-left:auto;margin-right:auto;font-size:21px;color:#F4EFE7}
.band .btn{font-size:21px}

/* Footer */
footer{background:var(--navy-deep);color:#E4EAF1;padding:40px 0 32px;border-top:6px solid var(--terra)}
footer a{color:#fff;font-weight:600}
footer .small{color:#C9D3DE}

/* Sticky call bar (mobile) */
.sticky{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;background:var(--terra);color:#fff;font-weight:700;font-size:20px;text-decoration:none;box-shadow:0 -6px 18px rgba(0,0,0,.18)}
.sticky::before{content:"";width:24px;height:24px;background:url(icon-phone.svg) center/contain no-repeat}
.sticky:hover{color:#fff;background:var(--terra-deep)}

@media(max-width:640px){
.bar{flex-wrap:wrap}.call{font-size:17px;padding:8px 14px}
.nav{gap:2px;font-size:17px}.nav a{padding:0 10px}.nav a.cta{margin-left:0}
.btn{width:100%;margin-right:0}
.hero::after,.town-hero::after,.band::before{height:40px}}
@media(min-width:800px){.sticky{display:none}body{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.btn:hover,.card:hover,.steps li:hover,.towns a:hover{transform:none}}
@media print{.sticky,.nav,.band::before,.hero::after{display:none}.hero,.town-hero,.band{background:#fff;color:#000}}