@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600&family=DM+Sans:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#080d11;--ink:#f3f3ee;--muted:#a5b3bb;--blue:#79d8ec;--line:#ffffff25}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 'DM Sans',Arial,sans-serif}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:5px}[hidden]{display:none!important}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;line-height:1.04;letter-spacing:-.035em}h1,h2{font-family:'Barlow Condensed','Arial Narrow',sans-serif}em{font-style:normal;color:var(--blue)}header{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:19px 4.5%;background:linear-gradient(#060b10ed,#060b1080,transparent);transition:background .3s}header.scrolled{background:#080d11ed;border-bottom:1px solid #ffffff10}.brand{display:block;flex-shrink:0;width:210px}.brand img{width:100%}header nav{display:flex;gap:30px;font-size:13px}header nav a{padding:12px 0}header nav a:hover{color:var(--blue)}.button{border:1px solid var(--blue);background:var(--blue);color:#0a1c24;border-radius:2px;display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:15px 21px;font-size:13px;font-weight:600;line-height:1.3;min-height:48px;transition:background .2s,transform .2s}.button:hover{background:#b0effb;transform:translateY(-2px)}.button span{font-size:22px;font-weight:400;line-height:1}.header-cta{padding:12px 18px}.menu{display:none;background:none;border:1px solid var(--line);color:white;width:44px;height:44px;font-size:22px}.skip{position:fixed;left:10px;top:-80px;z-index:100;background:var(--blue);color:black;padding:12px}.skip:focus{top:10px}#journey{height:1100svh;position:relative}.stage{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;background:#080d11}.films,.film,.shade{position:absolute;inset:0}.film{opacity:0;background-size:cover;background-position:center;will-change:opacity}.film.visible{opacity:1}.film video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.shade{pointer-events:none;background:linear-gradient(90deg,#03090eca 0%,#03090e40 42%,transparent 75%),linear-gradient(0deg,#050c12 0%,#050c1240 28%,transparent 60%)}.scene-content{position:absolute;left:5.5%;right:5.5%;bottom:155px;pointer-events:none}.scene-copy{position:absolute;bottom:0;left:0;opacity:0;visibility:hidden;transform:translateY(20px);max-width:640px}.scene-copy.active{visibility:visible;pointer-events:auto}.scene-copy h1,.scene-copy h2{font-size:clamp(60px,6.5vw,102px);line-height:.96;letter-spacing:-.015em;text-shadow:0 2px 30px #0003}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:600;color:#c3d1d8;margin-bottom:22px}.intro{font-size:14px;line-height:1.65;color:#d1dbe0;margin-top:23px;max-width:500px}.scene-copy .button{margin-top:24px}.certification{font-size:9px;letter-spacing:.12em;color:var(--blue);margin-top:20px;display:flex;align-items:center;gap:9px}.certification:before{content:'✓';border:1px solid #79d8ec70;border-radius:50%;width:18px;height:18px;text-align:center;line-height:18px}.story-controls{position:absolute;left:5.5%;right:5.5%;bottom:105px;display:flex;justify-content:space-between;align-items:center}.scroll-cue{font-size:9px;letter-spacing:.16em;color:#bccbd2}.scroll-cue span{display:inline-block;padding-left:12px}#motion-toggle{border:0;color:#b9c8d0;background:transparent;text-decoration:underline;text-underline-offset:4px;font-size:11px;padding:10px 0}.chapter-nav{position:absolute;bottom:23px;left:5.5%;right:5.5%;display:grid;grid-template-columns:repeat(6,1fr);gap:15px}.chapter-nav button{border:0;background:transparent;padding:12px 0 0;color:#8c9ba4;text-align:left}.chapter-line{display:block;position:relative;height:2px;background:#ffffff26;overflow:hidden}.chapter-line i{display:block;position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left}.chapter-name{display:block;margin-top:12px;font-size:11px}.chapter-name small{font-size:9px;margin-right:12px;opacity:.6}.chapter-nav .selected{color:#fff}.marker{position:absolute;left:0;top:0;pointer-events:none}.trust-strip{padding:26px 5.5%;display:flex;justify-content:space-between;gap:30px;align-items:center;font-size:10px;letter-spacing:.12em;border-bottom:1px solid var(--line);color:#b9c8ce}.trust-rule{height:1px;flex:1;background:var(--line)}.services{padding:110px 5.5%}.section-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:24px 10%;align-items:end}.section-heading .eyebrow{grid-column:1/-1;margin:0}.section-heading h2,.detail-copy h2,.options h2{font-size:clamp(42px,4.5vw,68px)}.section-heading>p:last-child{max-width:440px;color:var(--muted);font-size:16px}.services-grid{margin-top:65px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.service{padding:32px 35px 0 0;margin-right:35px;border-right:1px solid var(--line)}.service:last-child{margin:0;border:0;padding-right:0}.service-number{font-size:9px;letter-spacing:.13em;color:var(--blue)}.service h3{font-size:25px;margin:26px 0 20px;line-height:1.18;letter-spacing:-.025em}.service>p{color:var(--muted);font-size:13px;line-height:1.9;min-height:100px}.text-link,.inline-cta{border:0;border-bottom:1px solid #79d8ec50;background:none;color:#e4f5f9;padding:12px 0;font-size:12px;text-align:left}.text-link span{margin-left:20px;color:var(--blue)}.service-actions{display:flex;gap:24px}.detail-section{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;background:#0e171e}.detail-image{height:100%;min-height:600px;position:relative;overflow:hidden}.detail-image img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:63% center}.detail-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#080d11b0,transparent 40%)}.detail-image>span{position:absolute;bottom:30px;left:30px;z-index:1;font-size:9px;letter-spacing:.2em}.detail-copy{padding:70px 11%}.detail-copy .eyebrow{font-size:9px}dl{margin:32px 0 0}dl>div{display:grid;grid-template-columns:110px 1fr;gap:20px;border-top:1px solid var(--line);padding:20px 0}dt{font-size:9px;letter-spacing:.1em;color:#d3e0e7}dd{margin:0;font-size:12px;color:var(--muted);line-height:1.8}.options{padding:100px 5.5%;display:grid;grid-template-columns:1fr 1fr;gap:10%}.accordion{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none;font-size:17px;padding:23px 0;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}summary span{color:var(--blue);font-size:24px;line-height:1}details[open] summary span{transform:rotate(45deg)}details p{color:var(--muted);font-size:13px;padding:0 30px 24px 0;max-width:500px}.contact{position:relative;min-height:620px;padding:90px 5.5%;overflow:hidden;display:flex;align-items:center}.contact>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.contact:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#03090ee8,#03090e45),linear-gradient(0deg,#080d11,transparent 40%)}.contact>div{position:relative;z-index:1}.contact h2{font-size:clamp(70px,8vw,115px)}.contact p:not(.eyebrow){margin:24px 0;color:#bdcbd2}.phone{display:block;margin-top:24px;letter-spacing:.1em;font-size:14px}footer{padding:50px 5.5%;display:flex;align-items:center;justify-content:space-between;gap:25px}footer p,footer small{font-size:10px;color:#8e9fa9}footer small{text-align:right}dialog{background:#0d1820;border:1px solid #ffffff30;color:var(--ink);width:min(580px,92vw);max-height:90svh;padding:40px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}dialog h2{font-size:47px;margin-bottom:18px}dialog>p:not(.eyebrow),#request-ready p{font-size:12px;color:var(--muted)}.close{position:absolute;right:12px;top:6px;border:0;background:none;color:white;font-size:30px;width:40px;height:40px}form{display:grid;gap:15px;margin-top:24px}label{font-size:12px;display:grid;gap:7px}input,select,textarea{width:100%;min-width:0;border:1px solid #ffffff26;color:white;background:#071018;padding:12px;border-radius:2px;font-size:14px}textarea{resize:vertical}form .button{margin-top:5px}dialog .arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}.fallback a{text-decoration:underline}#request-ready textarea{margin:20px 0}#request-ready .button{display:flex}#edit-request{margin-top:20px}
@media(min-width:1600px){.scene-content{bottom:180px}.scene-copy{max-width:720px}}
@media(max-width:1000px){header{gap:20px;padding:16px 4%}header nav{gap:20px;font-size:11px}.brand{width:175px}.header-cta{font-size:11px;gap:15px}.detail-copy{padding:50px 8%}.service{margin-right:20px;padding-right:20px}.service-actions{display:block}.service h3{font-size:22px}.scene-copy h1,.scene-copy h2{font-size:76px}}
@media(max-width:700px){html{scroll-padding-top:90px}header{padding:14px 5%;gap:12px}.brand{width:170px}.header-cta{margin-left:auto;padding:10px;font-size:10px;min-height:40px;gap:6px}.header-cta span{font-size:16px}.menu{display:block;flex-shrink:0;width:38px;height:40px;font-size:18px}header nav{display:none;position:absolute;top:80px;left:0;right:0;padding:22px 6%;background:#0b151df5;border-bottom:1px solid var(--line);font-size:15px}header nav.open{display:flex;flex-direction:column;gap:12px}#journey{height:950svh}.stage{min-height:600px}.films{top:90px;bottom:auto;height:44svh;min-height:260px}.film{background-position:58% center}.film video{object-position:58% center}.film-1 video{object-position:42% center}.film-7{bottom:40px;background-position:90% center}.film-7 video{object-position:90% center}.shade{background:linear-gradient(0deg,#080d11 0%,#080d11 28%,#080d11d0 43%,transparent 64%)}.scene-content{bottom:142px;left:6%;right:6%}.scene-copy{max-width:100%;transform:translateY(12px)}.scene-copy h1,.scene-copy h2{font-size:52px;line-height:.98}.scene-copy .eyebrow{font-size:8px;margin-bottom:12px;letter-spacing:.13em}.intro{font-size:11px;line-height:1.65;margin-top:13px;max-width:340px}.intro br{display:none}.scene-copy .button{font-size:11px;min-height:42px;padding:12px 16px;margin-top:17px}.certification{font-size:7px;letter-spacing:.06em;margin-top:12px}.story-controls{bottom:92px;left:6%;right:6%}.scroll-cue{font-size:7px;letter-spacing:.08em}#motion-toggle{font-size:9px}.chapter-nav{bottom:22px;left:6%;right:6%;gap:8px}.chapter-name{font-size:8px;margin-top:9px;white-space:nowrap}.chapter-name small{display:block;font-size:8px;margin-bottom:4px}.trust-strip{padding:22px 6%;font-size:7px;gap:15px}.trust-rule{display:none}.services{padding:65px 6%}.section-heading{display:block}.section-heading .eyebrow{font-size:8px;margin-bottom:22px}.section-heading h2,.detail-copy h2,.options h2{font-size:46px}.section-heading>p:last-child{font-size:13px;margin-top:24px}.services-grid{display:block;margin-top:36px}.service{margin:0;border-right:0;border-bottom:1px solid var(--line);padding:28px 0}.service h3{font-size:24px;margin:16px 0}.service>p{min-height:0;font-size:13px}.service-actions{display:flex}.text-link{margin-top:12px}.detail-section{display:block}.detail-image{min-height:340px;height:340px}.detail-image img{object-position:65% center}.detail-copy{padding:45px 6%}dl>div{grid-template-columns:90px 1fr;gap:14px}.options{padding:65px 6%;display:block}.accordion{margin-top:35px}.contact{min-height:590px;padding:70px 6%}.contact h2{font-size:76px}.contact>img{object-position:62% center}.contact:after{background:linear-gradient(90deg,#03090ed0,#03090e60),linear-gradient(0deg,#080d11,transparent)}footer{padding:40px 6%;flex-wrap:wrap;gap:24px}footer .brand{width:175px}footer p{font-size:9px}footer small{text-align:left;width:100%}dialog{padding:32px 22px}dialog h2{font-size:40px}}
@media(max-width:380px){header .brand{width:140px}.header-cta{font-size:9px}.chapter-name{font-size:7px}.scene-copy h1,.scene-copy h2{font-size:47px}.scene-content{bottom:139px}.intro{font-size:10px}}
@media(max-height:700px) and (min-width:701px){.stage{min-height:520px}.scene-copy h1,.scene-copy h2{font-size:60px}.scene-content{bottom:140px}.scene-copy .eyebrow{margin-bottom:12px}.intro{margin-top:14px;font-size:12px}.scene-copy .button{margin-top:15px;padding:12px 18px;min-height:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.film video{visibility:hidden}}
/* Keep the film inside its own stacking context beneath copy and controls. */
.films{z-index:0}.shade{z-index:1}.scene-content{z-index:2}.story-controls,.chapter-nav{z-index:3}.button span,.text-link span{font-family:Arial,sans-serif}
.arrow{display:inline-block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0;vertical-align:middle}.text-link .arrow{margin-left:15px;width:15px;height:15px}

.scene-copy.active{opacity:1}

/* Keep the complete drainage outlet visible beside the story copy. */
@media(min-width:701px){.film-7{background-position:right center}.film-7 video{object-position:right center}.scene-copy[data-copy="7"]{bottom:clamp(50px,calc(100svh - 700px),240px)}}

@media(max-width:700px){.chapter-nav{gap:6px}.chapter-name{font-size:7px}.film-3,.film-3 video{background-position:65% center;object-position:65% center}}

.drainage-steps{display:flex;gap:15px;margin-top:18px;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#9baab2}.drainage-steps .current{color:var(--blue);border-bottom:1px solid var(--blue)}
@media(min-width:701px){.drainage-copy{bottom:35px!important}.drainage-copy h2{font-size:clamp(54px,5.7vw,88px)}.drainage-copy .intro{max-width:430px}.drainage-film video{object-position:75% center}}
@media(max-width:700px){.drainage-film{bottom:40px!important;background-position:70% center}.drainage-film video{object-position:70% center}.drainage-copy h2{font-size:43px}.drainage-copy .intro{font-size:10px;margin-top:10px}.drainage-steps{gap:12px;margin-top:10px;font-size:7px}.drainage-copy .certification{margin-top:10px}}

@media(max-width:700px){.film-4 video{object-position:45% center}.film-4{background-position:45% center}}