.case-page{color:#f6f8ff;background:#080e24;min-height:100vh}.case-intro{padding:90px 0 64px}.case-intro h1{letter-spacing:-.075em;margin:26px 0 36px;font-size:clamp(64px,9.2vw,140px);font-weight:500;line-height:.96}.case-intro-bottom{justify-content:space-between;align-items:flex-end;gap:40px;display:flex}.case-intro-bottom p{color:#a7adc2;max-width:560px;margin:0;font-size:18px;line-height:1.65}.case-intro-bottom .button{flex-shrink:0}.case-facts{border-top:1px solid #ffffff1f;grid-template-columns:repeat(3,1fr);gap:24px;margin:58px 0 0;padding-top:26px;display:grid}.case-facts dt{letter-spacing:.12em;text-transform:uppercase;color:#7f88a3;margin-bottom:9px;font-size:10px;font-weight:600}.case-facts dd{color:#e6e9f3;margin:0;font-size:15px}.case-scroller{height:calc(100svh + var(--case-travel,0px) * 1.25);--case-progress:0;position:relative}.case-scroller-sticky{flex-direction:column;justify-content:center;align-items:center;gap:18px;height:100svh;padding-block:28px;display:flex;position:sticky;top:0}.case-browser{background:#11182b;border-radius:14px;width:min(100%,1100px);overflow:hidden;box-shadow:0 40px 90px -30px #000c,0 0 0 1px #ffffff1f}.case-browser .project-browser-bar{height:30px;font-size:10px}.case-frame{width:100%;aspect-ratio:var(--case-ratio);background:#e9edf2;max-height:calc(100svh - 106px);position:relative;overflow:hidden}.case-frame img{will-change:transform;width:100%;max-width:none;height:auto;display:block}.case-scroller-progress{background:#ffffff14;width:min(100%,1100px);height:2px}.case-scroller-progress i{background:linear-gradient(90deg,#13d8fa,var(--pink));height:100%;transform:scaleX(var(--case-progress));transform-origin:0;display:block}.case-scroller[data-static]{height:auto}.case-scroller[data-static] .case-scroller-sticky{height:auto;padding-block:16px 56px;position:relative}.case-scroller[data-static] .case-scroller-progress{display:none}.case-pager{border-bottom:1px solid #ffffff1a;grid-template-columns:1fr 1fr;gap:24px;padding:72px 0 44px;display:grid}.case-pager a{letter-spacing:-.05em;transition:color var(--dur-xs) var(--ease-out);align-items:center;gap:18px;font-size:clamp(26px,3.2vw,46px);font-weight:500;line-height:1.1;display:flex}.case-pager a>span{display:block}.case-pager small{letter-spacing:.14em;color:#7f88a3;margin-bottom:10px;font-size:10px;font-weight:600;line-height:1.4;display:block}.case-pager a:hover{color:#13d8fa}.case-pager-previous svg{color:#7f88a3;flex-shrink:0}.case-pager-next{text-align:right;justify-content:flex-end}.case-pager-next svg{width:clamp(28px,3vw,44px);height:clamp(28px,3vw,44px);color:var(--pink);flex-shrink:0}.case-others{padding:64px 0 100px}.case-others h2.eyebrow{letter-spacing:.12em;color:#a7adc2;margin:0 0 14px;font-size:12px;font-weight:600;line-height:1.7}.case-others ul{margin:0;padding:0;list-style:none}.case-others a{transition:color var(--dur-xs) var(--ease-out),padding var(--dur-s) var(--ease-out);border-bottom:1px solid #ffffff17;grid-template-columns:44px minmax(0,1fr) auto 24px;grid-template-areas:"number name category arrow";align-items:center;gap:20px;padding:22px 0;display:grid}.case-others a:hover{color:#13d8fa;padding-inline:10px}.case-others-number{color:#6c7b96;grid-area:number;font-size:11px}.case-others strong{letter-spacing:-.04em;grid-area:name;font-size:24px;font-weight:500}.case-others small{letter-spacing:.08em;text-transform:uppercase;color:#8790aa;grid-area:category;font-size:11px}.case-others a>svg{color:#13d8fa;grid-area:arrow}@media (max-width:650px){.case-intro{padding:56px 0 40px}.case-intro h1{margin:20px 0 24px;font-size:clamp(48px,14vw,72px)}.case-intro-bottom{flex-direction:column;align-items:flex-start;gap:26px}.case-intro-bottom p{font-size:15px}.case-intro-bottom .project-soon{margin-left:0}.case-facts{grid-template-columns:1fr;gap:18px;margin-top:38px}.case-browser{border-radius:10px}.case-browser .project-browser-bar{height:25px;font-size:8px}.case-pager{grid-template-columns:1fr;gap:30px;padding:48px 0 34px}.case-pager a{font-size:30px}.case-others{padding:48px 0 70px}.case-others a{grid-template-columns:28px minmax(0,1fr) 20px;grid-template-areas:"number name arrow""number category arrow";gap:6px 12px;padding:18px 0}.case-others a:hover{padding-inline:0}.case-others strong{font-size:21px}.case-others small{font-size:9px}}@media (prefers-reduced-motion:reduce){.case-scroller{height:auto}.case-scroller-sticky{height:auto;padding-block:16px 56px;position:relative}.case-frame{max-height:none}.case-scroller-progress{display:none}}
