/* «Ще до першої розмови» (головна, секція .ws-why, рух — studio/why-scene.js):
   три рядки проявляються по черзі, фото офісу відкривається знизу, потім — пояснення й кнопка. */
.ws-why{position:relative;height:270vh;background:#eeeae4;color:#20221f;font-family:Onest,system-ui,sans-serif}
.ws-why .ws-st{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:5vw;padding:0 32px}
.ws-why .ws-k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#6b6862;display:flex;align-items:center;gap:12px;margin:0}
.ws-why .ws-k::before{content:'';width:7px;height:7px;border-radius:50%;background:#ef8354}
.ws-why h2{font-size:clamp(40px,5.6vw,96px);line-height:1.02;font-weight:600;letter-spacing:-.045em;margin:30px 0 0}
.ws-why h2 span{display:block;opacity:calc(.1 + var(--o,0) * .9);transform:translateY(calc((1 - var(--o,0)) * 28px))}
.ws-why h2 em{font-style:normal;color:#ef8354}
.ws-why .ws-ph{position:relative;aspect-ratio:4/5;max-height:72vh;overflow:hidden;margin:0;clip-path:inset(calc((1 - var(--pp,0)) * 100%) 0 0 0)}
.ws-why .ws-ph img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(calc(1.18 - var(--pp,0) * .18))}
.ws-why .ws-note{margin:34px 0 0;max-width:46ch;font-size:clamp(16px,1.3vw,20px);line-height:1.55;color:#6b6862;opacity:var(--nt,0);transition:opacity .5s}
.ws-why .ws-note b{color:#20221f;font-weight:500}
.ws-why .ws-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 #20221f44;border-radius:999px;color:#20221f;text-decoration:none;opacity:var(--nt,0);transition:opacity .5s,background .3s,color .3s}
.ws-why .ws-btn span{color:#f15a24}
.ws-why .ws-btn:hover{background:#20221f;color:#f3f0ea}
@media(max-width:900px){.ws-why .ws-st{grid-template-columns:1fr;gap:24px;align-content:center;padding:0 20px}.ws-why .ws-ph{display:none}.ws-why h2{font-size:42px}}