/* Real project comparisons: shared, responsive and useful without JavaScript. */
.work-comparisons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; margin-top:2.5rem; color:#fff; }
.work-comparison { margin:0; min-width:0; }
.comparison-image { position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:.5rem; background:#171717; touch-action:pan-y; --comparison:50%; }
.comparison-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.comparison-before { clip-path:inset(0 calc(100% - var(--comparison)) 0 0); }
.comparison-label { position:absolute; top:1rem; padding:.3rem .65rem; border-radius:.25rem; background:rgba(0,0,0,.8); color:#fff; font-size:.875rem; font-weight:700; pointer-events:none; }
.comparison-label-before { left:1rem; }
.comparison-label-after { right:1rem; }
.comparison-handle { display:none; position:absolute; top:0; bottom:0; left:var(--comparison); width:44px; transform:translateX(-50%); cursor:ew-resize; outline:none; }
.comparison-ready .comparison-handle { display:block; }
.comparison-handle::before { content:""; position:absolute; top:0; bottom:0; left:21px; width:2px; background:#ff6900; }
.comparison-handle span { position:absolute; top:50%; left:0; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-top:-22px; border:2px solid #fff; border-radius:50%; background:#e65300; color:#fff; font-size:14px; }
.comparison-handle:focus-visible span { outline:3px solid #fff; outline-offset:4px; }
.work-comparison figcaption { margin-top:.85rem; font-size:1.125rem; font-weight:700; }
.work-gallery { margin-top:2.5rem; }
.work-gallery h2 { font-size:1.75rem; font-weight:700; color:#fff; }
@media(max-width:639px) { .work-comparisons { grid-template-columns:1fr; gap:2rem; } }