/* Before/after slider. JS off: the before photo covers the left half (static comparison). */
#before-after{padding-block:clamp(3.5rem,9vw,6rem);background:#fff}
#before-after[hidden]{display:none}
#before-after .ba__head{max-width:40rem;margin-bottom:1.5rem}
#before-after h2{margin:.4rem 0 .6rem;color:#101d38}
#before-after .ba__head p{color:#4f5a6e;margin:0}
#before-after .ba{position:relative;aspect-ratio:1182/665;overflow:hidden;border-radius:.4rem;background:#dfe3ea;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
#before-after .ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
#before-after .ba__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
#before-after .ba__label{position:absolute;top:.8rem;background:rgba(16,29,56,.85);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:.25rem}
#before-after .ba__label--before{left:.8rem}
#before-after .ba__label--after{right:.8rem}
#before-after .ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:44px;margin-left:-22px;display:flex;justify-content:center;cursor:ew-resize;outline:none}
#before-after .ba__handle::before{content:"";width:3px;height:100%;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.4)}
#before-after .ba__handle span{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:#c9a84c;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.4)}
#before-after .ba__handle span::before,#before-after .ba__handle span::after{content:"";position:absolute;top:50%;margin-top:-6px;border:6px solid transparent}
#before-after .ba__handle span::before{left:5px;border-right-color:#101d38}
#before-after .ba__handle span::after{right:5px;border-left-color:#101d38}
#before-after .ba__handle:focus-visible span{outline:3px solid #101d38;outline-offset:3px}