/* Comparison contract and lifecycle are documented in comparisons.js. Root owns
   frame dimensions and hero copy; use --comparison-position to match BOTH crops.
   Native controls activate only after JS confirms that both images have loaded. */
.comparison{--reveal:50%;--comparison-handle-y:50%;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/10;background:var(--navy,#142e42);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.comparison__base,.comparison__after{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.comparison__base img,.comparison__after img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--comparison-position,50% 50%);pointer-events:none;-webkit-user-drag:none}
.comparison__base picture,.comparison__after picture{display:block;width:100%;height:100%}
.comparison__after{clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.comparison.is-animating .comparison__after{will-change:clip-path}
.comparison__divider{position:absolute;top:0;bottom:0;left:var(--reveal);width:2px;transform:translateX(-50%);z-index:2;background:var(--cream,#faf8f3);pointer-events:none}
.comparison__divider>span{position:absolute;top:var(--comparison-handle-y);left:50%;display:grid;place-items:center;width:48px;height:48px;transform:translate(-50%,-50%);border:1px solid var(--navy,#142e42);border-radius:50%;background:var(--cream,#faf8f3);color:var(--navy,#142e42);box-shadow:0 4px 12px #142e4233}
.comparison__divider svg{width:24px;height:24px;display:block}
.comparison__range{position:absolute;inset:0 -24px;width:calc(100% + 48px);height:100%;margin:0;padding:0;border:0;border-radius:0;z-index:3;opacity:0;visibility:hidden;appearance:none;-webkit-appearance:none;cursor:ew-resize;touch-action:pan-y}
.comparison__range::-webkit-slider-thumb{width:48px;height:48px;appearance:none;-webkit-appearance:none}
.comparison__range::-moz-range-thumb{width:48px;height:48px;border:0;border-radius:0}
.comparison.is-ready .comparison__range{visibility:visible}
.comparison:not(.is-ready) .comparison__divider>span{visibility:hidden}
.comparison:focus-within{outline:3px solid var(--navy,#142e42);outline-offset:-5px}
.comparison:focus-within .comparison__divider>span{outline:3px solid var(--cream,#faf8f3);outline-offset:4px;box-shadow:0 0 0 8px var(--navy,#142e42)}
.comparison__label{position:absolute;top:18px;z-index:2;max-width:calc(50% - 28px);padding:7px 11px;background:var(--cream,#faf8f3);color:var(--navy,#142e42);font:600 12px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.06em;pointer-events:none}
.comparison__label--before{right:18px}.comparison__label--after{left:18px}
.comparison--hero{--comparison-handle-y:calc(100% - 40px);aspect-ratio:auto;height:100%}
.comparison--hero .comparison__range{top:auto;bottom:16px;height:48px}
.comparison--hero .comparison__label{top:auto;bottom:18px}
.comparison[data-comparison-state=before-only] .comparison__after,.comparison[data-comparison-state=before-only] .comparison__label--after,.comparison[data-comparison-state=after-only] .comparison__base,.comparison[data-comparison-state=after-only] .comparison__label--before{visibility:hidden}
.comparison[data-comparison-state=before-only] .comparison__divider,.comparison[data-comparison-state=after-only] .comparison__divider,.comparison[data-comparison-state=unavailable] .comparison__divider{display:none}
[data-comparison-tabs][hidden],[data-comparison-panel][hidden]{display:none!important}
@media(max-width:760px){.comparison__label{top:12px;padding:6px 9px;font-size:11px}.comparison__label--before{right:12px}.comparison__label--after{left:12px}.comparison--hero .comparison__label{top:auto;bottom:18px}}
@media(prefers-reduced-motion:reduce){.comparison__after,.comparison__divider{transition:none!important;animation:none!important}}