.redesign-section { --comparison-gap: clamp(2rem, 4vw, 3rem); padding-top: clamp(2rem, 4vw, 4rem); padding-bottom: 0; }
.redesign-section + .website-services { padding-top: clamp(2rem, 4vw, 3rem); }
.redesign-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: var(--comparison-gap); }
.redesign-heading h2 { max-width: 42rem; }
.redesign-heading p { color: var(--muted); font-size: .9rem; max-width: 23rem; }
.redesign-comparison { --split: 50%; position: relative; width: 80%; margin-inline: auto; margin-block: 0; border: 1px solid var(--line); background: #101827; aspect-ratio: 1600 / 845; isolation: isolate; overflow: hidden; }
.redesign-comparison > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; user-select: none; pointer-events: none; }
.redesign-comparison .redesign-before { z-index: 1; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.redesign-label { position: absolute; top: .8rem; z-index: 3; padding: .35rem .65rem; border: 1px solid #FFFFFF30; background: #101014ED; color: var(--text); font-size: .7rem; pointer-events: none; }
.redesign-label.before { left: .8rem; }
.redesign-label.after { right: .8rem; color: var(--lime); }
.redesign-divider { position: absolute; inset-block: 0; left: var(--split); width: 2px; transform: translateX(-50%); background: var(--lime); z-index: 2; pointer-events: none; }
.redesign-handle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: .25rem; width: 48px; height: 48px; border: 1px solid var(--lime); background: var(--bg); color: var(--lime); box-shadow: 0 3px 18px #0006; }
.redesign-handle svg { width: 16px; height: 16px; }
.redesign-handle svg:first-child { transform: rotate(180deg); }
.redesign-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.redesign-range:disabled { display: none; }
.redesign-comparison:focus-within { outline: 2px solid var(--lime); outline-offset: 4px; }
.redesign-caption { width: 80%; margin-inline: auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .65rem 1rem; margin-top: .85rem; color: var(--muted); font-size: .75rem; }
.redesign-caption a { color: var(--text); }
.redesign-caption a:hover { color: var(--lime); }
@media (max-width: 650px) {
  .redesign-heading { align-items: start; flex-direction: column; gap: .8rem; }
  .redesign-handle { width: 44px; height: 44px; }
  .redesign-label { top: .5rem; padding: .25rem .45rem; font-size: .6rem; }
  .redesign-label.before { left: .5rem; } .redesign-label.after { right: .5rem; }
}

@media (min-width: 851px) { .redesign-comparison { width: 68%; } }