/* «Що змінює дизайн. На прикладі Lexaria» (головна, .cs-work; рух — studio/compare-scene.js):
   темна липка сцена, шторка «Було → Стало» їде сама, щойно блок став на місце. */
.cs-work{position:relative;height:170vh;background:#20221f;color:#f3f0ea;font-family:Onest,system-ui,sans-serif}
.cs-work .cs-st{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:center;gap:4vw;padding:0 32px}
.cs-work .cs-k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8d8a84;display:flex;align-items:center;gap:12px;margin:0}
.cs-work .cs-k::before{content:'';width:7px;height:7px;border-radius:50%;background:#ef8354}
.cs-work h2{font-size:clamp(36px,3.9vw,64px);line-height:1.02;font-weight:600;letter-spacing:-.04em;margin:26px 0 0}
.cs-work h2 span{color:#8d8a84}
.cs-work .cs-p{margin:20px 0 0;color:#8d8a84;font-size:15px;line-height:1.6;max-width:36ch}
.cs-work .cs-btn{display:inline-flex;align-items:center;gap:14px;margin-top:28px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:16px 22px;border:1px solid #fff5;border-radius:999px;color:#f3f0ea;text-decoration:none;transition:background .3s,color .3s}
.cs-work .cs-btn span{color:#ef8354}
.cs-work .cs-btn:hover{background:#f3f0ea;color:#20221f}
.cs-cmp{position:relative;width:100%;aspect-ratio:1678/937;overflow:hidden;background:#111;box-shadow:0 40px 90px #0007}
.cs-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.cs-cmp .cs-bef{clip-path:inset(0 calc(var(--s,0) * 100%) 0 0)}
.cs-cmp .cs-ln{position:absolute;top:0;bottom:0;left:calc((1 - var(--s,0)) * 100%);width:2px;background:#ef8354;opacity:var(--lo,0)}
.cs-cmp .cs-ln::after{content:'↔';position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#ef8354;color:#20221f;display:grid;place-items:center;font-size:17px}
.cs-cmp .cs-tg{position:absolute;top:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:7px 11px}
.cs-cmp .cs-a{left:16px;background:#ef8354;color:#20221f;opacity:calc(1 - var(--s,0))}
.cs-cmp .cs-b{right:16px;background:#000a;color:#fff;opacity:var(--s,0)}
.cs-work .cs-cap{display:flex;justify-content:space-between;gap:20px;margin:14px 0 0;font-size:12px;letter-spacing:.06em;color:#8d8a84}
@media(max-width:900px){.cs-work{height:auto}.cs-work .cs-st{position:static;height:auto;grid-template-columns:1fr;gap:28px;padding:90px 20px}.cs-work .cs-cap span+span{display:none}}