/* Styles belong only to the water portrait. The original landing page is intact. */
.element-section{position:relative;isolation:isolate;min-height:800px;height:92svh;max-height:1000px;overflow:hidden;background:#f5f5f5;display:grid;grid-template-columns:35% 65%;padding:90px 0 92px;scroll-margin-top:90px}
.element-section :focus-visible{outline:2px solid #346787;outline-offset:5px}
.element-copy{position:relative;z-index:4;align-self:center;padding:0 0 30px 6.2vw;pointer-events:none}
.element-copy>*{pointer-events:auto}
.element-kicker{display:flex;align-items:center;gap:12px;font:10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#626c73;margin-bottom:35px}
.element-kicker::before{content:'';width:25px;height:1px;background:#5e829b}
.element-copy h2{font:500 clamp(64px,5.85vw,96px)/.95 var(--sans);letter-spacing:-.06em;margin-left:-.055em;color:#1c2024}
.element-deck{font-size:17px;line-height:1.6;letter-spacing:-.015em;color:#606970;max-width:260px;margin-top:26px}
.element-finishes{display:flex;align-items:center;gap:9px;margin-top:32px}
.element-finishes button{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px 8px 9px;border:1px solid transparent;border-radius:4px;font-size:11px;color:#58616a;transition:border-color .25s,background .25s}
.element-finishes button[aria-pressed=true]{border-color:#a7b1b9;color:#1f272e;background:#ffffff85}
.element-finishes button:hover{border-color:#637785}
.finish-swatch{width:16px;height:16px;display:block;border-radius:50%;background:#171819;box-shadow:inset 0 0 0 1px #0003}
.finish-swatch--white{background:#fff}
.element-link{display:flex;align-items:center;justify-content:space-between;gap:35px;width:max-content;min-width:214px;max-width:100%;padding:16px 0 10px;border-bottom:1px solid #6b7c87;font-size:13px;font-weight:500;margin-top:38px;color:#293842}
.element-link span{font-size:22px;line-height:1;transition:transform .3s}.element-link:hover span{transform:translate(3px,-3px)}
.water-portrait{position:absolute;z-index:2;top:42px;right:-8%;bottom:80px;width:78%;touch-action:pan-y;outline:none}
.water-portrait canvas,.water-poster,.water-poster img{display:block;width:100%;height:100%;object-fit:contain}
.water-poster{position:absolute;inset:0;z-index:1;pointer-events:none}
.water-poster[hidden]{display:none}
.water-portrait canvas{opacity:0;transition:opacity .6s}
.water-portrait[data-ready=true] canvas{opacity:1}
.water-portrait[data-mode=still] canvas{display:none}
.water-portrait[data-mode=still]~.element-tools{display:none}
.element-tools{position:absolute;z-index:5;right:6vw;bottom:119px}
.water-control{display:flex;align-items:center;gap:17px;padding:5px 5px 5px 21px;border:1px solid #c7d2da;border-radius:999px;background:#ffffffb8;backdrop-filter:blur(16px);box-shadow:0 5px 24px #16394f0b;color:#314553;font:500 12px/1 var(--sans)}
.water-switch{position:relative;isolation:isolate;display:flex;padding:3px;background:#e5ecf1;border-radius:999px}
.water-switch button{position:relative;z-index:1;min-width:58px;min-height:40px;padding:10px 16px;border-radius:999px;color:#526776;font:500 12px/1 var(--sans);transition:color .2s}
.water-switch button[aria-pressed=true]{color:#fff}
.water-switch-thumb{position:absolute;z-index:0;top:3px;left:3px;width:calc((100% - 6px)/2);height:calc(100% - 6px);border-radius:999px;background:#294b65;box-shadow:0 2px 5px #15334925;transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.water-switch[data-flow=on] .water-switch-thumb{transform:translateX(100%)}
.element-bottom{position:absolute;z-index:5;bottom:26px;left:48px;right:48px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;border-top:1px solid #2c455626;padding-top:20px;color:#64747e;font:9px/1.5 var(--mono);letter-spacing:.045em;text-transform:uppercase}
.element-bottom strong{display:block;color:#354956;font-size:11px;font-weight:400;margin-top:4px;letter-spacing:.04em}
.element-bottom>:nth-child(2){text-align:center}.element-bottom>:last-child{text-align:right}
.element-bottom a{color:#354956;text-decoration:none}.element-bottom a span{padding-left:12px}
@media(min-width:1700px){.water-portrait{width:74%;right:-5%}.element-copy{padding-left:8vw}.element-tools{right:9vw}}
@media(max-width:1050px){.element-copy{padding-left:40px}.element-copy h2{font-size:74px}.element-deck{max-width:230px;font-size:15px}.water-portrait{right:-14%;width:86%}.element-section{grid-template-columns:38% 62%}.element-tools{right:40px}.element-bottom{left:32px;right:32px}}
@media(max-width:900px){
 .element-section{display:block;min-height:860px;height:100svh;max-height:none;padding:78px 20px 24px}
 .element-copy{padding:0;align-self:auto}.element-kicker{font-size:9px;margin-bottom:14px;gap:9px}.element-kicker::before{width:18px}
 .element-copy h2{font-size:64px}.element-deck{font-size:12px;line-height:1.5;margin-top:14px;max-width:220px}
 .element-finishes{margin-top:15px;gap:3px}.element-finishes button{padding:6px 10px;font-size:11px}.finish-swatch{width:14px;height:14px}
 .element-link{position:absolute;top:159px;right:0;min-width:0;width:90px;font-size:10px;line-height:1.4;gap:6px;margin:0;padding:6px 0 8px}.element-link span{font-size:18px}
 .water-portrait{top:272px;bottom:132px;left:-16%;right:auto;width:132%}
 .element-tools{bottom:86px;right:20px}.water-control{font-size:11px;gap:12px;padding-left:17px}
 .element-bottom{bottom:20px;left:20px;right:20px;grid-template-columns:1fr 1fr;padding-top:16px;font-size:8px}.element-bottom strong{font-size:10px}.element-bottom>:nth-child(2){display:none}
}
@media(max-width:360px){.element-copy h2{font-size:58px}.element-link{width:80px}.element-deck{max-width:195px}}
@media(prefers-reduced-motion:reduce){.water-portrait canvas,.water-switch-thumb,.water-switch button,.element-link span{transition:none}.element-link:hover span{transform:none}}