*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.7 Lato,Helvetica,Arial,sans-serif;color:#272727;background:#fff}
h1,h2,h3{font-family:"Julius Sans One",sans-serif;font-weight:400;letter-spacing:.05em;line-height:1.25;margin:0 0 .6em}
h1{font-size:clamp(1.8rem,5vw,3.4rem);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
h2{font-size:clamp(1.4rem,3vw,2.1rem)}h3{font-size:1.2rem;color:#ea8c00}
a{color:#ea8c00}img{max-width:100%;height:auto}
.inner{max-width:1100px;margin:0 auto;padding:0 20px}.center{text-align:center}
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 20px;background:rgba(20,20,20,.92)}
.brand img{height:48px;width:auto;display:block}
.nav nav{display:flex;gap:22px;align-items:center}
.nav nav a{color:#e5e5e5;text-decoration:none;font-family:"Julius Sans One",sans-serif;font-size:.95rem;letter-spacing:.08em}
.nav nav a:hover{color:#ea8c00}.nav .call{color:#ea8c00!important;font-family:Lato,sans-serif!important;font-weight:700}
#menu{display:none}.burger{display:none;color:#fff;font-size:1.8rem;cursor:pointer}
@media(max-width:760px){.burger{display:block}.nav nav{display:none;width:100%;flex-direction:column;gap:0;padding:8px 0}
 .nav nav a{padding:12px 0;width:100%;text-align:center;border-top:1px solid #333}#menu:checked~nav{display:flex}}
.band{position:relative;overflow:hidden;background-color:#111;background-position:center;background-size:cover;background-repeat:no-repeat;padding:clamp(120px,22vw,320px) 0}
.parallax{background-attachment:fixed}
.band.js-px{background-attachment:scroll}
.hero{min-height:clamp(520px,92vh,900px);display:flex;align-items:center;padding:80px 0}
.hero-logo{width:min(320px,70vw);margin-bottom:20px}
.sub{color:#fff;font-family:Raleway,sans-serif;font-size:clamp(1.1rem,2.5vw,1.6rem);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.btn{display:inline-block;background:#ea8c00;color:#fff;text-decoration:none;padding:14px 32px;border-radius:3px;font-weight:700;letter-spacing:.06em;font-size:1.05rem}
.btn:hover{background:#c97800}
.card{max-width:520px;background:rgba(255,255,255,.92);padding:30px 34px;border-radius:2px}
.card.right{margin-left:auto}.card.wide{margin:0 auto;max-width:560px}.card .name{font-size:1.25rem;font-weight:700}
.text{padding:70px 0}.text p{max-width:820px}.text .inner>h2{text-align:center}
.features{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;list-style:none;padding:0;margin:30px 0 0;font-family:"Julius Sans One",sans-serif;color:#ea8c00}
.dark{background:#272727;color:#e5e5e5}.hint{color:#c1c1c1;font-size:.9rem}
.gallery{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 20px 20px}
.gallery picture{flex:0 0 auto;scroll-snap-align:center}.gallery img{flex:0 0 auto;height:min(60vh,420px);width:auto;scroll-snap-align:center;object-fit:cover}
footer{background:#111;color:#c1c1c1;text-align:center;padding:20px;font-size:.85rem}
@media(max-width:760px){.band{padding:90px 0}.card{padding:22px}}
@media(prefers-reduced-motion:reduce){.parallax,.band.js-px{background-attachment:scroll!important;background-position:center!important}html{scroll-behavior:auto}}

/* Background images (swap files in /img, names stay the same) */
[data-bg="homeBGwater"]{background-image:url(img/homeBGwater-1280.jpg);background-image:image-set(url(img/homeBGwater-1280.webp) type("image/webp"))}
@media(min-width:1281px){[data-bg="homeBGwater"]{background-image:image-set(url(img/homeBGwater-2560.webp) type("image/webp"))}}
[data-bg="custom-swimming-pool-builder"]{background-image:url(img/custom-swimming-pool-builder-1280.jpg);background-image:image-set(url(img/custom-swimming-pool-builder-1280.webp) type("image/webp"))}
@media(min-width:1281px){[data-bg="custom-swimming-pool-builder"]{background-image:image-set(url(img/custom-swimming-pool-builder-2560.webp) type("image/webp"))}}
[data-bg="hardscape"]{background-image:url(img/hardscape-1280.jpg);background-image:image-set(url(img/hardscape-1280.webp) type("image/webp"))}
@media(min-width:1281px){[data-bg="hardscape"]{background-image:image-set(url(img/hardscape-2560.webp) type("image/webp"))}}
[data-bg="custom-fire-features"]{background-image:url(img/custom-fire-features-1280.jpg);background-image:image-set(url(img/custom-fire-features-1280.webp) type("image/webp"))}
@media(min-width:1281px){[data-bg="custom-fire-features"]{background-image:image-set(url(img/custom-fire-features-2560.webp) type("image/webp"))}}
[data-bg="swimming-pool-remodeling"]{background-image:url(img/swimming-pool-remodeling-1280.jpg);background-image:image-set(url(img/swimming-pool-remodeling-1280.webp) type("image/webp"))}
@media(min-width:1281px){[data-bg="swimming-pool-remodeling"]{background-image:image-set(url(img/swimming-pool-remodeling-2560.webp) type("image/webp"))}}

.hero{position:relative;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(1px);transform:scale(1.03);z-index:0}
.hero-shade{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:1}
.hero .inner{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.hero{background-image:url(video/hero-poster.jpg)!important;background-size:cover}}