.before-after-section{
  padding-top:110px;
  padding-bottom:110px;
  border-top:1px solid var(--line);
}
.before-after-heading{
  max-width:880px;
  margin-bottom:42px;
}
.before-after-heading h2{
  font-family:var(--sans);
  font-size:clamp(2.2rem,4.7vw,5.2rem);
  line-height:1.04;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:.25em 0 .35em;
}
.before-after-heading>p:last-child{
  max-width:760px;
  font-size:1.05rem;
}
.before-after-comparison{
  --position:50%;
  position:relative;
  width:100%;
  max-width:1500px;
  margin:0 auto;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#d9d9d9;
}
.before-after-comparison img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top;
  user-select:none;
  pointer-events:none;
}
.before-after-after-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  clip-path:inset(0 calc(100% - var(--position)) 0 0);
}
.before-after-after-wrap img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center top;
}
.before-after-divider{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--position);
  width:2px;
  background:#fff;
  transform:translateX(-1px);
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
  pointer-events:none;
}
.before-after-divider span{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  font-size:1.1rem;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.before-after-label{
  position:absolute;
  top:22px;
  z-index:2;
  padding:8px 11px;
  background:rgba(255,255,255,.88);
  color:var(--ink);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.before-after-label-before{left:22px}
.before-after-label-after{right:22px}
.before-after-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
}
.before-after-help{
  margin:14px 0 0;
  font-size:.82rem;
  color:var(--ink-soft);
}
@media(max-width:700px){
  .before-after-section{padding-top:75px;padding-bottom:75px}
  .before-after-label{top:12px}
  .before-after-label-before{left:12px}
  .before-after-label-after{right:12px}
  .before-after-divider span{width:42px;height:42px}
}