*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:white;color:#090d38;font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}.brand-font{font-family:'Playfair Display',Georgia,serif}header{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:#fff;position:relative;z-index:10}header a{display:flex;align-items:center;gap:8px;font-size:2.25rem;font-weight:600;letter-spacing:-.06em}header a svg{width:32px;height:40px}header>span{font-size:1.1rem;letter-spacing:.1em;font-weight:700;color:#005555}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:660px;background:#c7eef7}.hero-art{position:absolute;inset:0 0 0 auto;width:63%;background-image:url('./public/costwaters-reference.png');background-repeat:no-repeat;background-size:auto 1700px;background-position:right -2px top -82px;animation:art-in 1.2s ease-out both}.hero-wash{position:absolute;inset:0;background:linear-gradient(90deg,#dff7ff 0%,#dff7ff 24%,rgba(223,247,255,.94) 34%,rgba(223,247,255,.56) 47%,transparent 67%)}.hero>div:nth-child(3){position:relative;z-index:1;display:flex;align-items:center;max-width:1440px;min-height:660px;margin:auto;padding:70px 4%}.hero-copy{max-width:650px;animation:rise-in .85s .15s both}.hero-copy>p:first-child{font-size:1.1rem;letter-spacing:.25em;font-weight:700;margin:0 0 28px}.hero h1{font-size:clamp(4.3rem,8.2vw,7.8rem);line-height:.95;letter-spacing:-.065em;font-weight:500;margin:0}.hero h1 em{display:block;color:#005555;font-weight:500}.hero-copy>p:nth-of-type(2){max-width:480px;font-size:1.55rem;line-height:1.3;margin:32px 0}.notify-button{display:inline-flex;align-items:center;gap:20px;background:#005555;color:white;border-radius:8px;padding:12px 28px;font-size:1.3rem;box-shadow:0 10px 22px #003e3e25;transition:transform .3s,background .3s}.notify-button:hover{transform:translateY(-4px);background:#006b69}.notify-button span{font-size:2rem;line-height:1}.hero>span{position:absolute;z-index:2;right:4%;bottom:20px;color:white;font-size:.8rem;text-shadow:0 1px 4px #002b36}
main>section:nth-child(2){max-width:1440px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:50px 4%;gap:0}main>section:nth-child(2) article{padding:0 28px}main>section:nth-child(2) article:first-child{padding-left:0}main>section:nth-child(2) article+article{border-left:1px solid #8ddde0}main>section:nth-child(2) svg{width:56px;height:56px;color:#08b9c7;stroke:#08b9c7}main>section:nth-child(2) h2{font-size:1.7rem;line-height:1.15;letter-spacing:-.03em;margin:12px 0 18px}main>section:nth-child(2) ul{list-style:none;padding:0;margin:0;font-size:1.12rem;line-height:1.45}main>section:nth-child(2) li{position:relative;padding-left:22px;margin:7px 0}main>section:nth-child(2) li:before{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:#090d38;left:0;top:.68em}main>section:nth-child(2) article p{font-size:.95rem;color:#4d587f;font-style:italic;line-height:1.3;margin-top:22px}
.comparison{background:radial-gradient(circle at 50% 0%,#f6fdff,#def7fc 78%);padding:50px 4%}.comparison>div{max-width:1300px;margin:auto}.comparison>div>div:first-child{text-align:center}.comparison h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2.3rem,5vw,4rem);line-height:1.15;letter-spacing:-.04em;margin:0;font-weight:600}.comparison>div>div:first-child p{font-size:1.5rem;margin:10px 0 0}.comparison>div>div:nth-child(2){display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:36px;padding:34px;background:#fff;border:1px solid #69b9c6;border-radius:12px}.comparison>div>div:nth-child(2)>div:first-child{border-right:1px solid #69b9c6;padding-right:40px}.comparison>div>div:nth-child(2)>div:nth-child(2){padding-left:40px}.comparison h3{font-size:1.8rem;margin:0 0 12px}.comparison>div>div:nth-child(2) p{font-size:1.4rem;line-height:1.35;margin:0}footer{display:flex;justify-content:space-between;padding:20px 4%;font-size:1rem}footer span:first-child{font-weight:700}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--delay,0ms)}.reveal.is-visible{opacity:1;transform:translateY(0)}@keyframes rise-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes art-in{from{opacity:.5;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@media(max-width:1023px){.hero-art{width:72%;background-size:auto 1500px;background-position:right -120px top -73px}main>section:nth-child(2){grid-template-columns:1fr;gap:32px}main>section:nth-child(2) article,main>section:nth-child(2) article:first-child{padding:0}main>section:nth-child(2) article+article{border-left:0;border-top:1px solid #8ddde0;padding-top:30px}}
@media(max-width:639px){header{padding:0 24px}header a{font-size:1.85rem}header>span{font-size:.75rem;letter-spacing:.12em}.hero{min-height:760px}.hero-art{inset:auto 0 0 0;width:100%;height:430px;background-size:auto 1200px;background-position:right -55px top -57px}.hero-wash{background:linear-gradient(180deg,#e8faff 0%,#e8faff 38%,rgba(232,250,255,.91) 49%,transparent 69%)}.hero>div:nth-child(3){min-height:650px;align-items:flex-start;padding:60px 28px}.hero h1{font-size:clamp(3.75rem,15vw,5.5rem)}.hero-copy>p:first-child{font-size:.82rem;margin-bottom:25px}.hero-copy>p:nth-of-type(2){font-size:1.2rem;max-width:340px;margin:24px 0}.notify-button{font-size:1.1rem}main>section:nth-child(2){padding:42px 28px}.comparison{padding:48px 28px}.comparison>div>div:first-child p{font-size:1.12rem}.comparison>div>div:nth-child(2){grid-template-columns:1fr;padding:28px}.comparison>div>div:nth-child(2)>div:first-child{border-right:0;border-bottom:1px solid #69b9c6;padding:0 0 25px}.comparison>div>div:nth-child(2)>div:nth-child(2){padding:25px 0 0}.comparison h3{font-size:1.5rem}.comparison>div>div:nth-child(2) p{font-size:1.1rem}footer{padding:20px 28px;display:block}footer span{display:block;margin:4px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* Show only the product side of the supplied full-page reference artwork. */
.hero .hero-art{width:min(48%,590px);background-size:auto 1900px;background-position:right top -92px}
.hero>span{display:none}
@media(max-width:1023px){.hero .hero-art{width:min(53%,590px);background-size:auto 1900px;background-position:right top -92px}}
@media(max-width:639px){.hero .hero-art{width:100%;background-size:auto 1200px;background-position:right -55px top -57px}}
.water-types{padding:64px 4%;background:#fff}.water-types>div{max-width:1300px;margin:auto}.water-types>div>div:first-child{text-align:center}.section-eyebrow{color:#007b80;font-size:.8rem;font-weight:700;letter-spacing:.22em;margin:0 0 10px}.water-types h2{font-size:clamp(2.5rem,5vw,4rem);line-height:1.14;letter-spacing:-.04em;margin:0}.section-intro{max-width:700px;margin:14px auto 0;font-size:1.12rem;line-height:1.5;color:#4d587f}.water-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:36px}.water-card{position:relative;min-height:260px;padding:24px 20px;border:1px solid #b8e5e8;border-radius:14px;background:linear-gradient(155deg,#f8feff,#eaf9fb);box-shadow:0 6px 18px #002f3c0c}.water-number{position:absolute;right:18px;top:17px;color:#82bfc7;font-size:.85rem;font-weight:700;letter-spacing:.1em}.water-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#d6f4f6;color:#008c9b;font-size:1.6rem;font-weight:700}.water-card h3{font-size:1.2rem;line-height:1.2;margin:20px 0 10px}.water-card p{font-size:.96rem;line-height:1.44;margin:0 0 20px}.water-tag{display:inline-block;margin-top:auto;border-radius:30px;background:#d3f0f2;color:#005555;padding:6px 10px;font-size:.75rem;font-weight:700}.water-note{color:#4d587f;font-size:.85rem;line-height:1.45;margin:18px 0 0}@media(max-width:1100px){.water-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.water-types{padding:48px 28px}.water-grid{grid-template-columns:1fr 1fr}.water-card{min-height:230px}}@media(max-width:460px){.water-grid{grid-template-columns:1fr}.water-card{min-height:0}}
.water-icon{font-size:1rem}.water-note a{color:#005555;text-decoration:underline;text-underline-offset:2px}

/* Blend the product image into the hero instead of showing a hard image edge. */
.hero{background:linear-gradient(105deg,#e3f9ff 4%,#c8f0f7 53%,#54afba 100%);background-size:130% 130%;animation:hero-current 12s ease-in-out infinite alternate}
.hero .hero-art{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 14%,rgba(0,0,0,.72) 32%,#000 48%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 14%,rgba(0,0,0,.72) 32%,#000 48%)}
.hero .hero-wash{background:linear-gradient(90deg,rgba(227,249,255,.98) 0%,rgba(227,249,255,.95) 22%,rgba(227,249,255,.7) 39%,rgba(227,249,255,.2) 56%,transparent 74%)}
.hero::before,.hero::after{content:'';position:absolute;z-index:1;width:15px;height:15px;border:1px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:inset 3px 3px 6px #ffffff80,0 0 12px #42e4ed80;pointer-events:none;animation:bubble-float 7s ease-in-out infinite}
.hero::before{right:29%;bottom:19%;opacity:.68}.hero::after{right:12%;bottom:9%;width:9px;height:9px;opacity:.5;animation-delay:-3.5s}
.hero h1 em{background:linear-gradient(105deg,#005555 35%,#068d98 50%,#005555 66%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:water-glint 8s ease-in-out infinite}
@keyframes hero-current{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes bubble-float{0%,100%{transform:translateY(0) scale(.9)}50%{transform:translateY(-34px) scale(1.1)}}
@keyframes water-glint{0%,30%,100%{background-position:100% 50%}60%{background-position:0% 50%}}
@media(max-width:639px){.hero .hero-art{-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.75) 20%,#000 38%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.75) 20%,#000 38%)}.hero .hero-wash{background:linear-gradient(180deg,#e8faff 0%,#e8faff 38%,rgba(232,250,255,.82) 53%,transparent 72%)}}
@media(prefers-reduced-motion:reduce){.hero,.hero::before,.hero::after,.hero h1 em{animation:none!important}}