.route-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:530px;padding:65px 9%;background:radial-gradient(ellipse at 76% 50%,#d0edf9,transparent 55%),#f4faff;overflow:hidden}.route-hero h1{font-size:76px;margin:25px 0}.route-hero p{font-size:14px;margin-bottom:30px}.route-hero .button{border:0}.route-hero .eyebrow{color:#5991b2;font-size:9px}.route-hero-art{height:400px;position:relative;display:grid;place-items:center}.hero-drop{width:120px;filter:drop-shadow(15px 20px 20px #4586b62a);animation:drop-hover 5s ease-in-out infinite}.hero-drop svg{display:block;width:100%}.hero-drop-orbit{position:absolute;width:340px;height:100px;border:1px solid #91c5df70;border-radius:50%;bottom:55px;transform:rotate(-10deg)}.hero-drop-orbit.second{width:420px;height:145px;bottom:32px;transform:rotate(10deg);opacity:.5}.drop-caption{position:absolute;bottom:0;font-size:7px;letter-spacing:2px;color:#779db5}.route-nav{position:sticky;top:112px;background:#ffffffed;backdrop-filter:blur(15px);z-index:20;border-block:1px solid #d5e6ef}.route-nav-inner{display:flex;max-width:1120px;margin:auto;justify-content:space-between;padding:17px 20px;gap:15px}.route-nav button{display:flex;align-items:center;gap:10px;background:none;border:0;color:#8da5b7;padding:8px 12px;transition:.3s;border-radius:30px;font-size:11px}.route-nav button b{font-size:8px;font-weight:500;border:1px solid #d4e4ee;border-radius:50%;width:25px;height:25px;display:grid;place-items:center}.route-nav button[aria-current=step]{color:#1e74b4;background:#edf7fd}.route-nav button[aria-current=step] b{background:#247cc1;color:white;border-color:#247cc1}.route-nav button.complete{color:#4a8bb6}.route-nav-progress{height:2px;background:#e7f2f8}.route-nav-progress span{display:block;height:100%;width:0;background:#319ed3}.water-route{position:relative;padding:45px 7% 65px;background:linear-gradient(#fbfdff,#eff8fc);overflow:hidden;isolation:isolate}.route-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}.route-track{fill:none;stroke:#d6e9f3;stroke-width:3}.route-progress{fill:none;stroke:#3ba4d4;stroke-width:3;stroke-linecap:round}.route-traveler{fill:#2188c5;stroke:#e1f6ff;stroke-width:5;filter:drop-shadow(0 0 6px #3a9dd580)}.route-stop{position:relative;display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;gap:25px;max-width:1120px;min-height:470px;margin:0 auto;scroll-margin-top:235px;padding:45px 0}.stop-copy{grid-column:1;grid-row:1;max-width:400px;opacity:.38;transform:translateY(20px);transition:opacity .65s,transform .65s}.stop-art{grid-column:3;grid-row:1;background:linear-gradient(135deg,#e8f5fc,#f6fbff);border:1px solid #d8eaf4;border-radius:40px 8px 40px 8px;padding:25px 20px 18px;opacity:.35;transform:translateY(25px);transition:opacity .65s,transform .65s;min-width:0}.route-stop:nth-of-type(even) .stop-copy{grid-column:3;padding-left:15px}.route-stop:nth-of-type(even) .stop-art{grid-column:1;border-radius:8px 40px 8px 40px}.route-stop.reached .stop-copy,.route-stop.reached .stop-art{opacity:1;transform:none}.stop-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:49px;width:49px;display:grid;place-items:center;background:#f7fcff;border:1px solid #bfddeb;border-radius:50%;box-shadow:0 0 0 12px #f5fbff;transition:.4s;z-index:2}.stop-node span{font-size:11px;color:#85a7bd;letter-spacing:1px}.route-stop.reached .stop-node{background:#257fbe;border-color:#257fbe;box-shadow:0 0 0 10px #e5f4fb,0 0 0 11px #acd8eb}.route-stop.reached .stop-node span{color:white}.stop-copy .eyebrow{font-size:8px;color:#66a0bf;letter-spacing:1.6px}.stop-copy h2{font-size:36px;letter-spacing:-1.4px;margin:20px 0 18px;line-height:1.18}.stop-copy>p{font-size:13px;line-height:1.9;max-width:360px}.stop-metric{display:flex;gap:17px;align-items:center;margin:24px 0}.stop-metric strong{font:31px Georgia;color:#268abc;white-space:nowrap}.stop-metric>span{font-size:7px;letter-spacing:1.3px;color:#78a0b6;max-width:100px;line-height:1.8}.stop-copy details{border-top:1px solid #cce2ee;margin-top:20px;padding-top:14px}.stop-copy summary{font-size:10px;color:#4d83a5;cursor:pointer;list-style:none;display:flex;justify-content:space-between;max-width:360px;gap:20px;align-items:center}.stop-copy summary::-webkit-details-marker{display:none}.stop-copy summary span{font-size:19px;font-weight:400;transition:.3s}.stop-copy details[open] summary span{transform:rotate(45deg)}.stop-copy details p{font-size:12px;line-height:1.8;color:#6b879b;max-width:360px}.stop-art svg{display:block;width:100%;height:auto}.diagram-label{display:flex;justify-content:space-between;padding:15px 8px 0;border-top:1px solid #d4e8f2;font-size:9px;color:#5c8daa;letter-spacing:.7px}.diagram-label b{font-size:8px;font-weight:400}.flow-line,.fill-stream{animation:flow-dash 1.8s linear infinite}.tank-water{animation:water-level 4s ease-in-out infinite;transform-origin:bottom;transform-box:fill-box}.diagram-bubble{animation:bubble-rise 3s ease-in-out infinite}.belt-wheel{transform-box:fill-box;transform-origin:center;animation:wheel-turn 5s linear infinite}.gauge-hand{transform-origin:198px 58px;animation:gauge-turn 4s ease-in-out infinite}.diagram-ripple{transform-box:fill-box;transform-origin:center;animation:ripple-expand 3s ease-out infinite}.bottle-fill{animation:water-level 3s ease-in-out infinite;transform-origin:bottom;transform-box:fill-box}.route-stop:not(.current) .stop-art *{animation-play-state:paused}.route-finale{text-align:center;padding:85px 7%;background:radial-gradient(ellipse,#dceffb,transparent 60%),#f4faff}.route-finale>.eyebrow{font-size:8px;color:#6499b6}.route-finale h2{font-size:52px}.route-products{display:flex;align-items:end;justify-content:center;max-width:750px;margin:10px auto 30px;height:240px}.route-products img{width:20%;height:100%;object-fit:contain;filter:drop-shadow(8px 10px 9px #235c7e20)}.route-products img:first-child{height:70%}.route-restart{display:block;margin:25px auto 0;border:0;background:none;font-size:11px;color:#6592ad}.route-finale .button{font-size:12px}body:has(.water-route) .hygiene{background:#e9f5fb}@keyframes flow-dash{to{stroke-dashoffset:-60}}@keyframes drop-hover{50%{transform:translateY(-15px)}}@keyframes water-level{50%{transform:scaleY(.85)}}@keyframes bubble-rise{0%,100%{transform:translateY(8px);opacity:.3}50%{transform:translateY(-10px);opacity:.9}}@keyframes wheel-turn{to{transform:rotate(360deg)}}@keyframes gauge-turn{50%{transform:rotate(35deg)}}@keyframes ripple-expand{to{transform:scale(1.5);opacity:0}}
@media(max-width:1100px){.route-nav{top:95px}.route-stop{grid-template-columns:1fr 80px 1fr;gap:18px}.stop-copy h2{font-size:31px}.stop-art{padding:20px 10px}.stop-copy>p{font-size:12px}.route-hero{padding-inline:7%}.route-hero h1{font-size:66px}}
@media(max-width:700px){.route-hero{grid-template-columns:1fr;min-height:0;padding:55px 7% 25px}.route-hero h1{font-size:57px}.route-hero p{font-size:13px}.route-hero-art{height:235px;margin-top:20px}.hero-drop{width:80px}.hero-drop-orbit{width:230px;height:65px;bottom:35px}.hero-drop-orbit.second{width:300px;height:90px;bottom:20px}.drop-caption{font-size:6px;letter-spacing:1.3px}.route-nav{top:85px}.route-nav-inner{padding:10px 8px;gap:0;justify-content:space-around}.route-nav button{padding:5px 3px;gap:5px;flex-direction:column;font-size:8px;border-radius:10px}.route-nav button b{font-size:8px;width:23px;height:23px}.water-route{padding:25px 6% 45px 15%}.route-stop{display:flex;flex-direction:column;align-items:stretch;gap:25px;min-height:0;padding:40px 0 50px;scroll-margin-top:175px}.stop-node{left:-28px;top:64px;width:30px;height:30px;box-shadow:0 0 0 6px #f5fbff}.stop-node span{font-size:8px}.route-stop.reached .stop-node{box-shadow:0 0 0 6px #e5f4fb,0 0 0 7px #acd8eb}.stop-copy,.route-stop:nth-of-type(even) .stop-copy{max-width:none;padding-left:0}.stop-copy h2{font-size:31px;margin:15px 0}.stop-copy>p{font-size:12px}.stop-metric{margin:20px 0}.stop-metric strong{font-size:29px}.stop-art,.route-stop:nth-of-type(even) .stop-art{padding:14px 10px;border-radius:25px 5px 25px 5px}.stop-art svg{max-height:215px}.stop-copy summary{font-size:10px}.route-finale{padding:65px 6%}.route-finale h2{font-size:39px}.route-products{height:160px;margin-top:10px}.route-products img:first-child{height:70%}.route-finale>.eyebrow{font-size:7px}.diagram-label{font-size:8px}}
@media(prefers-reduced-motion:reduce){.stop-copy,.stop-art{opacity:1;transform:none}.route-stop *,.route-hero *{animation:none!important;transition:none!important}}

.stop-node{transition:background .4s,border-color .4s,box-shadow .4s}

.route-products .route-product-cutout{display:block;width:20%;height:100%;overflow:hidden;filter:drop-shadow(7px 10px 8px #235c7e20)}.route-products .route-product-cutout:nth-child(1){height:42%}.route-products .route-product-cutout:nth-child(2){height:70%}.route-products .route-product-cutout:nth-child(3){height:80%}.route-products .route-product-cutout:nth-child(5){height:93%}