/* After Cut V4.3.7 — optional Before/After module. Isolated from the core layout. */
.project-compare{margin:clamp(42px,7vw,92px) 0;padding:0;position:relative}
.project-compare__head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:0 0 16px;color:rgba(244,244,240,.76)}
.project-compare__head .micro{margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.project-compare__head h4{margin:5px 0 0;font-size:clamp(26px,3vw,48px);font-weight:600;letter-spacing:-.035em;color:#f4f4f0}
.project-compare__demo{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,244,240,.48)}
.project-compare__frame{--compare-pos:52%;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#111;border:1px solid rgba(255,255,255,.10);touch-action:pan-y;isolation:isolate}
.project-compare__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}
.project-compare__after{clip-path:inset(0 calc(100% - var(--compare-pos)) 0 0)}
.project-compare__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 20%,transparent 80%,rgba(0,0,0,.08));pointer-events:none}
.project-compare__line{position:absolute;z-index:4;top:0;bottom:0;left:var(--compare-pos);width:1px;background:rgba(255,255,255,.9);transform:translateX(-.5px);pointer-events:none;box-shadow:0 0 22px rgba(255,255,255,.18)}
.project-compare__knob{position:absolute;z-index:5;left:var(--compare-pos);top:50%;width:54px;height:54px;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:rgba(8,9,9,.66);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;pointer-events:none;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.project-compare__knob:before,.project-compare__knob:after{content:"";width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;position:absolute}
.project-compare__knob:before{transform:translateX(-7px) rotate(-135deg)}
.project-compare__knob:after{transform:translateX(7px) rotate(45deg)}
.project-compare__range{position:absolute;z-index:8;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.project-compare__label{position:absolute;z-index:3;top:18px;padding:7px 10px;border-radius:999px;background:rgba(6,7,7,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#f4f4f0;pointer-events:none}
.project-compare__label--before{left:18px}.project-compare__label--after{right:18px}
.project-compare__hint{margin:12px 0 0;color:rgba(244,244,240,.48);font-size:12px;line-height:1.5}
.project-compare.is-inviting .project-compare__line,.project-compare.is-inviting .project-compare__knob{animation:compareInvite 1.5s cubic-bezier(.22,.7,.23,1) 1}
@keyframes compareInvite{0%,100%{left:52%}35%{left:61%}65%{left:44%}}
@media(max-width:760px){.project-compare{margin:38px 0}.project-compare__head{align-items:start}.project-compare__head h4{font-size:26px}.project-compare__frame{aspect-ratio:4/5;border-radius:8px}.project-compare__knob{width:48px;height:48px}.project-compare__label{top:12px}.project-compare__label--before{left:12px}.project-compare__label--after{right:12px}}
@media(prefers-reduced-motion:reduce){.project-compare.is-inviting .project-compare__line,.project-compare.is-inviting .project-compare__knob{animation:none}}