.facade-section{padding-top:80px;padding-bottom:80px}.facade-section>h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.12;max-width:850px;margin:14px 0 20px}.facade-section>p{max-width:720px;line-height:1.6}.facade-compare{margin:30px 0 24px}.facade-frame{position:relative;aspect-ratio:3/2;overflow:hidden;background:#ddd;touch-action:pan-y;cursor:ew-resize;--position:50%}.facade-frame>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.facade-before{clip-path:inset(0 calc(100% - var(--position)) 0 0)}.facade-label{position:absolute;top:16px;background:#183a6f;color:white;padding:8px 12px;font-size:14px;pointer-events:none}.facade-label-before{left:16px}.facade-label-after{right:16px}.facade-divider{position:absolute;left:var(--position);top:0;bottom:0;width:2px;background:white;transform:translateX(-50%);pointer-events:none}.facade-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#183a6f;color:white;border:2px solid white;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:25px}.facade-control{display:block;margin:18px 0 12px;font-size:15px}.facade-control input{display:block;width:100%;min-height:44px;accent-color:#183a6f;cursor:ew-resize}.facade-control input:focus-visible{outline:3px solid #183a6f;outline-offset:3px}.facade-compare figcaption{font-size:13px;line-height:1.6;max-width:750px}.facade-frame:focus-within{outline:2px solid #183a6f}@media(max-width:600px){.facade-section{padding-top:48px;padding-bottom:48px}.facade-label{top:8px;padding:5px 8px;font-size:12px}.facade-label-before{left:8px}.facade-label-after{right:8px}}

.facade-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:48px;align-items:center;padding-top:32px;padding-bottom:56px}.facade-hero h1{font-size:clamp(2rem,3.3vw,3.4rem);line-height:1.1;margin:18px 0 24px}.facade-hero h1 em{font-style:normal;color:#53677d}.facade-hero-copy>p:not(.eyebrow){line-height:1.65;margin-bottom:24px}.facade-hero .facade-compare{min-width:0;margin:0}.facade-hero .button{white-space:normal}.facade-hero-copy{min-width:0}@media(max-width:820px){.facade-hero{grid-template-columns:1fr;gap:24px;padding-top:16px;padding-bottom:32px}.facade-hero h1{font-size:2rem;margin:12px 0 16px}.facade-hero-copy .button{display:none}.facade-hero-copy>p:not(.eyebrow){margin:0}.facade-hero .facade-control{margin-top:8px}}