/* Scroll concept scenes */
/* pressure wash */
.wash-scene{position:absolute;inset:0;background:linear-gradient(#8fd0f5 0 62%,#cfd8dc 62% 64%,#6e9a52 64%);overflow:hidden}
.wash-house{position:absolute;left:40%;right:4%;top:20%;height:56%;background:repeating-linear-gradient(0deg,#f4f7f7 0 24px,#d7dee0 25px 27px);clip-path:polygon(4% 30%,50% 0,96% 30%,96% 100%,4% 100%);overflow:hidden}
.wash-house::before{content:"";position:absolute;z-index:1;left:42%;bottom:0;width:16%;height:40%;background:#21405a;border:10px solid #eef1f1;border-bottom:0}
.wash-house::after{content:"";position:absolute;z-index:1;left:12%;right:12%;top:44%;height:18%;background:repeating-linear-gradient(90deg,#86c7e6 0 15%,#eef1f1 15% 20%)}
.wash-dirt{position:absolute;z-index:2;left:40%;right:4%;top:20%;height:56%;clip-path:polygon(4% 30%,50% 0,96% 30%,96% 100%,4% 100%);pointer-events:none}
.wash-dirt::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#4f6a3d99,#6d6a4a88 60%,#3d4a2fbb),url('../img/tex/grime.webp') center/cover;mix-blend-mode:multiply;clip-path:inset(var(--washed,0%) 0 0)}
.wash-wand{position:absolute;z-index:4;width:44vw;height:12px;right:-14vw;top:calc(20% + var(--wand-y,0%) * .56);background:#242b30;border-radius:8px;transform:rotate(-12deg);transform-origin:right center;transition:top .05s}
.wash-wand span{position:absolute;left:-44px;top:-6px;width:60px;height:24px;background:#111;border-radius:4px 40% 40% 4px}
.wash-spray{position:absolute;z-index:3;left:40%;right:4%;top:calc(20% + var(--wand-y,0%) * .56 - 3%);height:7%;background:linear-gradient(90deg,#ffffff00,#e8fbffee 30%,#bff3ffcc 70%,#ffffff00);filter:blur(6px);opacity:var(--spray-o,1)}
.wash-meter{position:absolute;z-index:5;left:40%;right:4%;bottom:12%;display:flex;align-items:center;gap:12px;font:700 .8rem var(--font-display);color:#062240}
.wash-meter i{flex:1;height:10px;border-radius:9px;background:#ffffff99;overflow:hidden}.wash-meter i::after{content:"";display:block;height:100%;width:var(--washed,0%);background:linear-gradient(90deg,#0a7cff,#3ee0ff)}
@media(max-width:700px){.wash-house,.wash-dirt,.wash-spray{left:6%;right:6%;top:44%;height:38%}.wash-wand{top:calc(44% + var(--wand-y,0%) * .38);width:70vw;right:-30vw}.wash-spray{top:calc(44% + var(--wand-y,0%) * .38 - 3%);height:6%}.wash-meter{left:6%;right:6%;bottom:auto;top:40%}}
/* gutter */
.gutter-demo{position:absolute;left:8%;right:5%;top:31%;bottom:14%}
.roof-edge{position:absolute;left:0;right:0;top:0;height:42%;background:repeating-linear-gradient(135deg,#5b4b42 0 35px,#76675f 36px 70px);clip-path:polygon(0 0,100% 0,88% 100%,8% 100%)}
.gutter-trough{position:absolute;left:5%;right:9%;top:38%;height:17%;border-radius:0 0 60px 60px;background:linear-gradient(#b8bdba,#e7e9e6 30%,#787f7b);border:6px solid #6f7672;overflow:hidden}
.leaf-pile{position:absolute;inset:-5px 2% 0;font-size:clamp(24px,5vw,58px);white-space:nowrap;transform:translateX(var(--leaf-x,0%));opacity:var(--leaf-o,1);transition:opacity .1s}
.water-run{position:absolute;inset:40% 0 0;background:#38bdf8;transform:scaleX(var(--flow,0));transform-origin:right center;filter:saturate(1.3)}
.downspout{position:absolute;right:8%;top:50%;width:7%;height:45%;background:linear-gradient(90deg,#8a918e,#e7e9e6 45%,#777e7a);border-radius:0 0 12px 12px;overflow:hidden}
.water-drop{position:absolute;inset:-100% 22% 0;background:linear-gradient(#38bdf800,#38bdf8 65%,#8ee7ff);transform:translateY(var(--drop,0%))}
.ground-puddle{position:absolute;right:0;bottom:0;width:28%;height:5%;border-radius:50%;background:#38bdf8;transform:scale(var(--puddle,0));opacity:.65}

/* glass */
.window-demo{position:absolute;inset:8% 7%;overflow:hidden;border:14px solid #e9f0f0;border-radius:20px;box-shadow:0 30px 80px #06323833}
.window-view,.window-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.window-haze{position:absolute;inset:0;background:linear-gradient(110deg,#c8d2cbcc,#f5ebd5aa),url('../img/tex/grime.webp') center/cover;mix-blend-mode:screen;clip-path:inset(0 0 0 var(--wipe,0%))}
.window-demo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.5%,#e9f0f0 49.5% 51%,transparent 51%),linear-gradient(0deg,transparent 49%,#e9f0f0 49% 51%,transparent 51%);pointer-events:none}
.squeegee{position:absolute;z-index:4;left:calc(var(--wipe,0%) - 4%);top:5%;height:90%;width:8%;filter:drop-shadow(5px 5px 8px #0005)}
.squeegee div{width:20px;height:100%;margin:auto;background:#142d35;border-radius:10px;transform:rotate(3deg)}.squeegee span{position:absolute;top:44%;left:50%;width:160px;height:18px;background:#0b8f84;border-radius:10px;transform:translateX(-50%) rotate(90deg)}

/* vent */
.vent-demo{position:absolute;inset:24% 6% 22%;display:flex;align-items:center}
.duct{position:relative;width:86%;height:120px;background:repeating-linear-gradient(90deg,#8c969e 0 18px,#cbd1d5 19px 36px);border:8px solid #4f5960;border-radius:60px;overflow:hidden;box-shadow:inset 0 0 28px #0008}
.lint{position:absolute;top:12%;bottom:12%;width:20%;background:#e5dfd2;border-radius:50%;filter:url('#none');transform:translateX(var(--lint-move,0));opacity:var(--lint-o,1)}.lint1{left:12%}.lint2{left:39%;width:27%}.lint3{left:67%}
.brush{position:absolute;left:var(--brush-x,1%);top:50%;width:74px;height:74px;margin-top:-37px;border-radius:50%;border:9px dashed #1c272d;background:#f24e1e;transform:rotate(var(--brush-rot,0deg));z-index:5}.brush::after{content:"";position:absolute;right:60px;top:27px;width:100vw;height:8px;background:#15191c}.brush i{position:absolute;inset:17px;border-radius:50%;background:#21272b}
.vent-out{width:14%;height:170px;background:#dce1e3;border:8px solid #777;border-left:0;display:grid;place-items:center;font-size:64px;overflow:visible}.vent-out span{transform:translateX(calc(var(--vent-puff,0) * 60px));opacity:var(--vent-puff,0)}
.risk{position:absolute;right:6%;bottom:8%;display:grid;justify-items:center}.risk__dial{width:120px;height:60px;border-radius:120px 120px 0 0;background:conic-gradient(from 270deg at 50% 100%,#2dbb73 0 30deg,#ffd400 30deg 60deg,#ff4a1c 60deg 90deg,transparent 90deg);position:relative}.risk__dial i{position:absolute;left:50%;bottom:0;width:45%;height:5px;background:var(--ink);transform-origin:left center;transform:rotate(var(--risk-angle,-25deg));border-radius:5px}.risk b{font:800 1.2rem var(--font-display);margin-top:8px}.risk small{color:var(--muted)}

/* lights */
.light-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;pointer-events:auto}.light-controls button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:10px 14px;border-radius:99px;cursor:pointer;font:700 .82rem var(--font-display);min-height:40px}.light-controls button.is-active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.light-house{position:absolute;inset:0;background:linear-gradient(180deg,#0a1030,#1b2350 55%,#2b2347 72%,#0b0d18 72.2%);overflow:hidden}
.light-house::before{content:"";position:absolute;inset:0 0 30%;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.6px),radial-gradient(circle,#fff9 0 1px,transparent 1.4px);background-size:90px 90px,53px 61px;background-position:0 0,23px 17px;opacity:var(--night,.3)}
.light-house svg{position:absolute;left:50%;bottom:0;height:78%;width:auto;min-width:100%;translate:-50% 0}
@media(min-width:900px){.light-house svg{left:auto;right:-2%;translate:0 0;min-width:0;width:64%;height:auto;max-height:86%}}
.bulb{fill:#3a3a40;transition:fill .25s,filter .25s}
.bulb.on{fill:var(--c);filter:url(#glow)}
.light-house.is-full .bulb.on{animation:twinkle 2.4s infinite ease-in-out;animation-delay:calc(var(--i) * -137ms)}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.55}}
.wire{fill:none;stroke:#111;stroke-width:2}
.win{fill:#2a2d3c;transition:fill .6s}.light-house.is-lit .win{fill:#ffcf73}
.bulb-string{position:absolute;left:0;right:0;top:0;height:36px;pointer-events:none;overflow:hidden}
.bulb-string svg{width:100%;height:36px}
.bulb-string circle{fill:#3a3a40;transition:fill .3s,filter .3s}.bulb-string.on circle{fill:var(--c);filter:drop-shadow(0 0 6px var(--c))}
/* seal */
.asphalt-demo{position:absolute;inset:0;overflow:hidden}.asphalt-old,.asphalt-new{position:absolute;inset:0;background-position:center;background-size:512px}.asphalt-old{background-image:url('../img/tex/asphalt-old.webp')}.asphalt-new{background-image:url('../img/tex/asphalt-fresh.webp');clip-path:inset(var(--seal-top,100%) 0 0)}
.seal-edge{position:absolute;z-index:3;left:0;right:0;top:var(--seal-top,100%);height:16px;background:#050505;box-shadow:0 -16px 35px #0008}.squeegee-bar{position:absolute;right:10%;top:-30px;width:190px;height:25px;background:#e6c300;border-radius:6px;transform:rotate(-5deg)}.squeegee-bar::after{content:"";position:absolute;right:10px;bottom:15px;width:10px;height:180px;background:#ddd;transform:rotate(-25deg);transform-origin:bottom}
.crack{position:absolute;inset:0;margin:auto;height:100%;width:36%;stroke:#191919;stroke-width:12;fill:none;opacity:var(--crack-o,1);filter:drop-shadow(3px 3px #fff5)}

/* stripe */
.lot-demo{position:absolute;inset:0;background:url('../img/tex/asphalt-fresh.webp') center/512px;perspective:900px;overflow:hidden}.lot-lines{position:absolute;left:10%;right:10%;top:18%;bottom:6%;transform:rotateX(52deg);transform-origin:center bottom;display:flex;justify-content:space-around;border-bottom:12px solid white;clip-path:inset(0 0 calc(100% - var(--paint,0%)))}.lot-lines i{height:100%;width:10px;background:#fff;box-shadow:0 0 3px #000}.stripe-machine{position:absolute;left:calc(12% + var(--machine-x,0%));top:calc(16% + var(--machine-y,0%));width:85px;height:110px;background:#f4d000;border-radius:15px 15px 8px 8px;box-shadow:0 20px 22px #0008;transform:scale(.75)}.stripe-machine::before{content:"";position:absolute;inset:14px 20px 44px;background:#272a2d;border-radius:8px}.stripe-machine::after{content:"";position:absolute;left:9px;right:9px;bottom:-8px;height:24px;background:radial-gradient(circle at 10px,#111 0 10px,transparent 11px),radial-gradient(circle at calc(100% - 10px),#111 0 10px,transparent 11px)}.stripe-machine span{position:absolute;left:50%;top:100%;width:9px;height:100vh;background:#fff;transform:translateX(-50%) scaleY(var(--spray,0));transform-origin:top}
.ada-mark,.arrow-mark{position:absolute;color:#fff;font:900 clamp(5rem,12vw,10rem)/1 sans-serif;opacity:var(--mark-o,0);filter:drop-shadow(0 3px 1px #0006)}.ada-mark{right:18%;bottom:12%;color:#2f6fe0}.arrow-mark{left:22%;bottom:10%}

@media(max-width:700px){.concept__copy{pointer-events:none}.glass-concept .concept__copy,.lights-concept .concept__copy{top:7%}.window-demo{inset:29% 4% 11%}.vent-demo{inset:35% -20% 25% 5%}.risk{right:12%;bottom:5%}.gutter-demo{top:42%;left:-15%;right:-12%}.stripe-machine{transform:scale(.55)} }
/* desktop: keep scenes to the right of the copy */
@media(min-width:701px){.wash-meter{bottom:auto;top:11%}.gutter-demo{left:46%;right:3%;top:26%;bottom:20%}.gutter-demo .leaf-pile{font-size:clamp(22px,3vw,44px)}.vent-demo{inset:30% 3% 30% 46%}.duct{height:96px}.vent-out{height:136px;font-size:48px}.brush{width:60px;height:60px;margin-top:-30px}.window-demo{inset:12% 4% 12% 46%}.risk{right:auto;left:48%;bottom:10%}}
@media(min-width:701px) and (max-width:1000px){.concept__copy{max-width:40vw}.concept__copy h2{font-size:clamp(2rem,4.4vw,3rem)}}
@media(max-width:700px){.risk{bottom:18%;right:auto;left:50%;translate:-50% 0}}