/* case study template */
/* reveals */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.w i{display:inline-block;font-style:inherit;transform:translateY(110%);transition:transform 1s var(--ease)}
.in .w i{transform:none}
.serif .w i{font-style:italic}
.fade{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in.fade,.in .fade{opacity:1;transform:none}
.wipe{--cp:inset(0 0 100% 0)}.wipe>img{clip-path:var(--cp);transition:clip-path 1.3s var(--ease),transform 1.6s var(--ease)}
.in.wipe{--cp:inset(0 0 0 0)}
.csmedia{position:relative;overflow:hidden;background:#0a0a09}
.csmedia img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transform:scale(1.12);transition:transform 1.6s var(--ease)}
.in .csmedia img,.csmedia.in img{transform:scale(1)}
.px{will-change:transform}
/* hero */
.cshero{padding:120px var(--pad) 0}
.cscrumb{display:flex;gap:14px;align-items:center;color:var(--kb);margin-bottom:26px}.cscrumb span{opacity:.5;color:var(--ink)}
.cshero h1{font-size:clamp(52px,9.6vw,150px);max-width:12ch}
.cshero h1 .serif{display:block;font-size:.62em;margin-top:.1em}
.meta{display:grid;grid-template-columns:repeat(4,auto) 1fr;gap:clamp(24px,4vw,70px);align-items:end;margin:44px 0 0;padding:26px 0 40px;border-top:1px solid rgba(10,10,9,.18)}
.meta div b{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;color:var(--kb)}
.meta div span{font-family:Barlow,sans-serif;font-weight:600;font-size:20px}
.meta .pills{justify-self:end}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.cshero-media{height:min(100vh,1000px)}
/* intro */
.intro{padding:clamp(90px,12vw,180px) var(--pad);display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,6vw,100px)}
.intro h2{font-size:clamp(36px,4.8vw,72px)}.intro h2 .serif{display:block;font-size:.95em;color:var(--kb)}
.intro p{font-size:clamp(20px,1.7vw,26px);line-height:1.45;max-width:38ch;font-weight:500}
/* brief panel */
.brief{padding:0 var(--pad) clamp(60px,7vw,110px)}
.panel{position:relative;overflow:hidden;border-radius:22px;background:var(--panel);color:#fff;padding:clamp(40px,6vw,90px);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px)}
.panel::before,.panel::after{content:"";position:absolute;width:52vw;height:52vw;max-width:720px;max-height:720px;border-radius:50%;background:radial-gradient(circle,rgba(43,45,255,.8) 0,rgba(43,45,255,0) 68%);filter:blur(20px);pointer-events:none;z-index:0}
.panel::after{right:-18%;bottom:-45%;animation:orb 14s ease-in-out infinite}.panel::before{left:-22%;top:-50%;animation:orb 14s ease-in-out infinite reverse;opacity:.7}
@keyframes orb{50%{transform:translate(-6%,-8%) scale(1.12)}}
.panel>*{position:relative;z-index:1}
.panel h2{font-size:clamp(40px,5.6vw,84px);color:#fff}.panel h2 .serif{display:block;font-size:.95em;color:#fff}
.panel .cols{display:grid;gap:34px}.panel h3{font-family:Barlow,sans-serif;font-weight:600;font-size:26px;margin-bottom:10px;color:#fff}.panel p{color:#fff;opacity:.88;max-width:52ch}
/* chapters */
.chap{padding:clamp(70px,9vw,140px) var(--pad) 0}
.chap-head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end;margin-bottom:clamp(30px,4vw,56px)}

.chap-head h2{font-size:clamp(36px,5vw,80px);max-width:12ch}.chap-head h2 .serif{display:block;font-size:.9em}
.chap-head p{max-width:44ch;font-size:19px;align-self:end}
.tall{height:min(100vh,1000px)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(16px,2vw,28px)}
.two .csmedia{aspect-ratio:16/11;border-radius:18px}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);padding:clamp(60px,8vw,120px) var(--pad);align-items:start}
.phones .csmedia{aspect-ratio:9/17;border-radius:26px;box-shadow:0 40px 80px -30px rgba(10,10,9,.4)}
.phones .csmedia:nth-child(2){margin-top:80px}.phones .csmedia:nth-child(3){margin-top:160px}
.scroller{padding:clamp(60px,8vw,120px) var(--pad);display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(30px,6vw,100px);align-items:start}
.scroller .sticky{position:sticky;top:110px}
.scroller h2{font-size:clamp(36px,4.6vw,70px);margin-bottom:18px}.scroller h2 .serif{display:block;color:var(--kb);font-size:.95em}
.scroller p{max-width:38ch;font-size:18px}
.scroller .csmedia{border-radius:22px;height:min(150vh,1600px)}
.scroller .csmedia img{object-fit:cover;object-position:top;transform:none;transition:none}
/* outcome */
.csband{background:#0a0a09;color:#fff;padding:clamp(110px,14vw,200px) var(--pad);text-align:center}
.csband small{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:30px;opacity:.7}
.csband h2{font-size:clamp(44px,8vw,128px);max-width:14ch;margin:0 auto}.csband h2 .serif{color:var(--kb)}
.csband .word{opacity:.22;transition:opacity .5s}.csband .word.lit{opacity:1}
.outs{display:flex;justify-content:center;gap:clamp(30px,6vw,90px);margin-top:70px;flex-wrap:wrap}
.outs div{max-width:22ch}.outs b{display:block;font-family:Barlow,sans-serif;font-weight:800;font-size:26px;margin-bottom:8px;text-transform:uppercase}.outs span{font-size:15px;opacity:.85}
/* next */
.csnext{padding:clamp(60px,7vw,110px) var(--pad) 0}.csnext .top{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}
.csnext h2{font-size:clamp(36px,4.6vw,70px)}.csnext h2 .serif{color:var(--kb)}
.nextgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ncard{border-radius:18px;overflow:hidden;background:#fff;display:block}.ncard .ph{aspect-ratio:16/10;background:linear-gradient(135deg,#1c1c22,#3a3b55)}
.ncard .nc{padding:16px 18px 20px}.ncard b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--kb);margin-bottom:6px}.ncard span{font-family:Barlow,sans-serif;font-weight:700;font-size:20px}
/* cta */
.cscta{position:relative;overflow:visible;padding:clamp(140px,16vw,220px) var(--pad);text-align:center;z-index:2}
.cscta canvas{position:absolute;left:50%;top:56%;width:min(64vw,680px);height:min(64vw,680px);transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.cscta h2{position:relative;font-size:clamp(44px,8vw,120px)}.cscta h2 .serif{display:block;font-size:.95em}
.cscta p{position:relative;max-width:34ch;margin:26px auto 30px}.cscta .pills{position:relative;justify-content:center}
@media (max-width:940px){
 .cshero{padding-top:100px}.cshero h1{font-size:clamp(46px,13vw,80px)}
 .meta{grid-template-columns:1fr 1fr;gap:20px}.meta .pills{grid-column:1/3;justify-self:start}
 .cshero-media{height:70vh}
 .intro,.scroller{grid-template-columns:1fr;gap:26px}.scroller .sticky{position:static}.scroller .csmedia{height:90vh}
 .panel{grid-template-columns:1fr;gap:30px}.panel::before,.panel::after{width:110vw;height:110vw}
 .chap-head{grid-template-columns:1fr;gap:14px}.tall{height:70vh}
 .two{grid-template-columns:1fr}
 .phones{grid-template-columns:1fr 1fr 1fr;gap:10px}.phones .csmedia{border-radius:12px}.phones .csmedia:nth-child(2){margin-top:30px}.phones .csmedia:nth-child(3){margin-top:60px}
 .nextgrid{grid-template-columns:1fr}.cscta canvas{width:92vw;height:92vw}
}
@media (prefers-reduced-motion:reduce){.w i,.fade,.wipe>img,.csmedia img{transition:none !important;transform:none !important;opacity:1 !important;clip-path:none !important}}

.cs .seo-h2{margin:14px 0 0;max-width:52ch}
.cs .cscta .form{margin:40px auto 0;text-align:left;max-width:640px;position:relative}
.cs .csnext .ncard .ph{position:relative}.cs .csnext .ncard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.cs .csband .word{color:#fff}
/* screens: live recordings of the site on tilted panels (Lusion-style), dark band */
.cs .screens{background:#0a0a09;color:#fff;padding:clamp(70px,9vw,140px) var(--pad);perspective:1800px;overflow:hidden}
.cs .screens .sc-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,70px)}
.cs .screens h2{font-size:clamp(36px,4.8vw,74px);color:#fff}.cs .screens h2 .serif{display:block;color:var(--kb);font-size:.95em}
.cs .screens p{max-width:42ch;font-size:18px;color:#fff}
.cs .sc-stage{position:relative;transform-style:preserve-3d}
.cs .screen{border-radius:clamp(14px,1.6vw,26px);overflow:hidden;background:#111;box-shadow:0 60px 120px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform;transform-style:preserve-3d}
.cs .screen video{display:block;width:100%;height:100%;object-fit:cover}
.cs .screen.desk{width:min(100%,1400px);aspect-ratio:16/10;margin:0 auto}
.cs .screen.phone{position:absolute;right:clamp(0px,4vw,60px);bottom:-8%;width:clamp(150px,19vw,280px);aspect-ratio:390/844;box-shadow:0 50px 100px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1)}
.cs .screens .sc-stage{padding-bottom:clamp(60px,8vw,120px)}
@media (max-width:940px){.cs .screens .sc-head{grid-template-columns:1fr;gap:16px}.cs .screens{perspective:900px}.cs .screen.phone{position:relative;right:auto;bottom:auto;width:62%;margin:-22% 0 0 auto}.cs .screens .sc-stage{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.cs .screen{transform:none !important}}

/* mobile: case imagery keeps a landscape ratio instead of filling the screen height */
@media (max-width:940px){.cs .cshero-media{height:auto;aspect-ratio:4/3}.cs .csmedia.tall{height:auto;aspect-ratio:4/3}.cs .two .csmedia{aspect-ratio:16/11}.cs .scroller .csmedia{height:auto;aspect-ratio:4/3}.cs .csmedia img,.cs .csmedia video{object-position:center top}}