/* Only the new frames in ?opt=p2. Main's fonts, hero and layout stay intact. */
.p2-compare{--p2-position:50%;position:relative;display:block;width:100%;aspect-ratio:2752/1536;overflow:hidden;background:#d9cfc0;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.p2-compare .p-picture{position:absolute;inset:0;width:100%;height:100%;margin:0}
.p2-compare .p-picture img{display:block;width:100%;height:100%;aspect-ratio:2752/1536;object-fit:cover;object-position:50% 50%;pointer-events:none;-webkit-user-drag:none}
.p2-compare .p2-before{clip-path:inset(0 calc(100% - var(--p2-position)) 0 0)}
/* House label: Jost, medium, spaced uppercase. Only the label has a backing. */
.p2-label{position:absolute;bottom:max(calc(18*var(--u)),12px);z-index:2;padding:8px 10px;font:500 max(calc(11*var(--u)),11px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#231f1b;background:#f6f3ee;pointer-events:none}
.p2-label-before{left:max(calc(20*var(--u)),12px)}
.p2-label-after{right:max(calc(20*var(--u)),12px)}
.p2-compare[data-p2-at="na"] .p2-label-before,.p2-compare[data-p2-at="voor"] .p2-label-after{visibility:hidden}
.p2-divider{position:absolute;inset:0 auto 0 var(--p2-position);width:2px;transform:translateX(-50%);background:#f6f3ee;box-shadow:0 0 0 1px #231f1b;pointer-events:none;z-index:3}
/* Keep the full 44px target inside the frame even at Home/End. */
.p2-handle{position:absolute;top:0;bottom:0;left:clamp(22px,var(--p2-position),calc(100% - 22px));width:44px;transform:translateX(-50%);z-index:4;outline:none;cursor:ew-resize;touch-action:pan-y}
.p2-grip{position:absolute;left:0;top:50%;display:grid;place-items:center;width:44px;height:44px;transform:translateY(-50%);border:1px solid #231f1b;border-radius:50%;background:#f6f3ee;color:#231f1b;box-shadow:0 1px 6px #231f1b30}
.p2-grip svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.p2-handle:focus-visible .p2-grip{outline:3px solid #231f1b;outline-offset:3px;box-shadow:0 0 0 7px #f6f3ee}
/* The comparison follows input immediately; it never runs an automatic wipe. */
@media(prefers-reduced-motion:reduce){.p2-compare,.p2-compare *{animation:none!important;transition:none!important}}