#agua.rainbow-water{padding:0;background:#142b23;color:#eff5ed;position:relative;scroll-margin-top:85px}
.water-stage{position:relative;min-height:850px;overflow:hidden;isolation:isolate}
.water-film{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#142b23}
.water-film video{width:100%;height:100%;object-fit:cover;object-position:65% center;transform:translateX(10%) scale(var(--water-zoom,1));transform-origin:65% 83%;will-change:transform}
.water-stage:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#142b23 0%,#142b23f5 27%,#142b23db 39%,#142b2360 53%,transparent 69%)}
.water-copy{width:46%;max-width:640px;padding:65px 28px 65px max(30px,5vw)}
#agua .water-eyebrow{font-size:10px;letter-spacing:.23em;color:#c2dccb;margin:0 0 20px}
#agua h2{font-family:var(--display);font-size:clamp(32px,3.1vw,49px);font-weight:500;line-height:1.08;letter-spacing:-.035em;color:#f2f5ec;margin:0 0 22px}
#agua .water-intro{font-size:14px;line-height:1.65;color:#d5e0d7;margin:0 0 22px}
.water-flow{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.08em;color:#bfdfc9;border-block:1px solid #cee8d52b;padding:15px 0}
.water-benefits{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:13px}
#agua .water-benefits li{padding:0;margin:0}
#agua .water-benefits h3{font:500 15px var(--body, sans-serif);color:#e8f2e6;margin:0 0 5px}
#agua .water-benefits p{font-size:12px;line-height:1.6;color:#c7d8cb;margin:0}
.water-scroll-hint{position:absolute;bottom:28px;right:5%;font-size:9px;letter-spacing:.18em;color:#fff;text-shadow:0 1px 8px #000}
@media(min-width:901px){.rainbow-water.water-ready{height:240svh}.water-ready .water-stage{position:sticky;top:0;height:100svh;min-height:850px}}
@media(max-width:900px){.water-stage{display:flex;flex-direction:column;min-height:0}.water-film{position:relative;aspect-ratio:16/10;z-index:0;order:0}.water-film video{object-fit:cover;transform:none;object-position:70% center}.water-stage:after{display:none}.water-copy{width:100%;max-width:none;padding:32px 7% 45px;order:1;box-sizing:border-box}#agua h2{font-size:36px}.water-benefits{gap:20px}#agua .water-benefits p{font-size:14px}.water-scroll-hint{display:none}}
@media(prefers-reduced-motion:reduce){.rainbow-water.water-ready{height:auto}.water-ready .water-stage{position:relative;height:auto}.water-film video{transform:translateX(10%);will-change:auto}}
@media(min-width:901px) and (max-height:849px){.water-ready .water-stage{min-height:0;height:auto;position:relative}.rainbow-water.water-ready{height:auto}.water-copy{padding-top:45px;padding-bottom:45px}}
/* Video first, then the explanation; scrolling backwards reverses the reveal. */
@media(prefers-reduced-motion:no-preference){
 .rainbow-water.water-ready{height:360svh}
 .water-ready .water-stage{position:sticky;top:0;height:100svh;min-height:0;display:block}
 .water-ready .water-film{position:absolute;inset:0;aspect-ratio:auto;z-index:-2;opacity:var(--water-entry,1);filter:blur(var(--water-entry-blur,0px))}
 .water-ready .water-copy{opacity:var(--water-reveal,0);filter:blur(var(--water-blur,14px));transform:translateY(var(--water-rise,32px));padding-top:95px;padding-bottom:80px;max-height:100svh;overflow-y:auto;box-sizing:border-box}
 .water-ready .water-stage:after{opacity:var(--water-reveal,0)}
 .water-ready .water-scroll-hint{opacity:calc(1 - var(--water-reveal,0))}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
 .water-ready .water-film video{transform:scale(var(--water-zoom,1));object-position:65% center}
 .water-ready .water-stage:after{display:block;background:#142b23e8}
 .water-ready .water-copy{position:relative;width:100%;padding:140px 7% 100px}
}

.water-loading .water-copy{opacity:0;visibility:hidden}

/* Avoid full-screen video blur and repeated GPU filtering on phones. */
@media(max-width:800px){.water-ready .water-film{filter:none}.water-ready .water-copy{filter:none}}