/* ================= case study pages ================= */
:root{--cbg:#070708;--cink:#F3F3F2;--cmute:#8D8D93;--cline:rgba(255,255,255,.1);--ce:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}
html{background:var(--cbg);color:var(--cink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cbg);color:var(--cink);font-family:var(--f);font-size:16px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
::selection{background:var(--acc);color:#fff}

/* transition layer + first paint while it is still covered */
.pt{position:fixed;inset:0;width:100vw;height:100vh;z-index:1000;pointer-events:none;display:none}
html.pt-in body::after{content:"";position:fixed;inset:0;background:#070708;z-index:999}

/* header: the home page's own header (.hdr, on dark) — only a few case-page touches */
.cs-home{max-width:200px!important}
.cs-home svg{transition:transform .5s var(--e)!important}
.cs-home:hover svg{transform:translateX(-3px)!important}
.cs .hdr .btn-line.cs-home:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
@media (max-width:640px){
  .cs .hdr .cs-home{display:inline-flex;width:40px;padding:0;justify-content:center}
  .cs .hdr .cs-home span{display:none}
}

/* layout: a fixed story on the left, the work scrolls on the right */
.cs-wrap{display:grid;grid-template-columns:clamp(300px,30vw,420px) minmax(0,1fr);gap:clamp(24px,3vw,56px);padding:0 var(--g)}
.cs-side{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding:96px 0 28px}
.cs-side-in{display:flex;flex-direction:column;gap:22px;min-height:100%}
.cs-bc{position:relative;z-index:20;margin-left:-10px}
.cs-bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:14px}
.cs-bc>ol>li{display:flex;align-items:center;gap:2px}
.cs-bc>ol>li+li::before{content:"";width:5px;height:5px;margin:0 6px 0 4px;border-top:1.3px solid currentColor;border-right:1.3px solid currentColor;transform:rotate(45deg);color:rgba(255,255,255,.28)}
.cs-bc>ol>li>a{display:inline-flex;padding:7px 10px;border-radius:99px;color:var(--cmute);text-decoration:none;transition:color .3s,background .3s}
.cs-bc>ol>li>a:hover,.cs-bc>ol>li>a:focus-visible{color:var(--cink);background:rgba(255,255,255,.06)}
.cs-bc>ol>li:hover+li::before{color:rgba(255,255,255,.6)}
.bc-last{position:relative}
.bc-cur{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 10px 0 14px;border-radius:99px;color:var(--cink);font:inherit;font-weight:500;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--cline);cursor:pointer;transition:background .3s,box-shadow .3s}
.bc-cur:hover,.bc-last.open .bc-cur{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.bc-cur em{font-style:normal;font-size:10.5px;color:var(--cmute)}
.bc-cur em i{font-style:normal;opacity:.55}
.bc-cur svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--e)}
.bc-last.open .bc-cur svg{transform:rotate(180deg)}
.bc-menu{list-style:none;margin:0;padding:6px;position:absolute;left:0;top:calc(100% + 8px);width:min(350px,calc(100vw - 2*var(--g)));border-radius:18px;background:rgba(20,20,22,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 70px -20px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:20px 0;transition:opacity .3s var(--e),transform .45s var(--e),visibility 0s .45s}
.bc-last.open .bc-menu{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--e),transform .45s var(--e),visibility 0s}
.bc-menu a{display:grid;grid-template-columns:22px 52px 1fr auto;align-items:center;gap:12px;padding:8px 12px 8px 10px;border-radius:12px;color:var(--cink);text-decoration:none;opacity:0;transform:translateY(6px);transition:background .25s,opacity .35s var(--e),transform .45s var(--e)}
.bc-last.open .bc-menu a{opacity:1;transform:none;transition-delay:0s,calc(.04s + var(--k)*.045s),calc(.04s + var(--k)*.045s)}
.bc-menu a:hover,.bc-menu a:focus-visible{background:rgba(255,255,255,.07);outline:none}
.bm-n{color:var(--cmute);font-size:10.5px}
.bm-im{width:52px;height:36px;border-radius:8px;overflow:hidden;background:#1a1a1c;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.bm-im img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.bc-menu a:hover .bm-im img{transform:scale(1.12)}
.bc-menu b{font-weight:500;font-size:15px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-menu small{font-size:12px;color:var(--cmute);white-space:nowrap}
.bc-menu i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--e),background .3s}
.bc-menu i svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bc-menu a:hover i{opacity:1;transform:none;background:var(--cink);color:#0E0E0F}
.bc-menu a[aria-current]{pointer-events:none}
.bc-menu a[aria-current] b{color:var(--cmute)}
.cs-h{margin:0;font-weight:500;font-size:clamp(46px,5.4vw,96px);line-height:.9;letter-spacing:-.06em;overflow:hidden;padding-bottom:.06em}
.cs-h span{display:block}
.cs-tag{margin:-6px 0 0;font-size:clamp(19px,1.6vw,26px);line-height:1.2;letter-spacing:-.03em;color:#C9C9CE;max-width:18em}
.cs-meta{margin:6px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;border-top:1px solid var(--cline);padding-top:20px}
.cs-meta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cmute);margin-bottom:5px}
.cs-meta dd{margin:0;font-size:15px;line-height:1.3}
.cs-svc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cs-svc li{font-size:13px;padding:6px 11px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--cline);color:#D6D6DA}
.cs-visit{position:relative;overflow:hidden;isolation:isolate;margin-top:auto;display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--cink);border-radius:16px;padding:12px 12px 12px 18px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--cline);transition:box-shadow .5s var(--ce),background .5s var(--ce)}
.cs-visit::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 48%,transparent 66%);transform:translateX(-100%);animation:cvSweep 5.5s var(--ce) 1.6s infinite}
.cs-visit::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 140% at 0% 50%,color-mix(in srgb,var(--pa,var(--acc)) 26%,transparent),transparent 60%);opacity:0;transition:opacity .6s var(--ce)}
.cv-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;overflow:hidden}
.cv-t b{font-weight:500;font-size:15px;letter-spacing:-.015em;white-space:nowrap}
.cs-visit i{position:relative;overflow:hidden;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--cline);flex:none;transition:background .45s var(--ce),box-shadow .45s var(--ce)}
.cs-visit svg{grid-area:1/1;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--ce)}
.cs-visit svg+svg{transform:translate(-160%,160%)}
.cs-visit:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.cs-visit:hover::after{opacity:1}
.cs-visit:hover i{background:var(--pa,var(--acc));box-shadow:none;color:#fff}
.cs-visit:hover svg{transform:translate(160%,-160%)}
.cs-visit:hover svg+svg{transform:none}
@keyframes cvSweep{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}


/* right column */
.cs-main{padding:96px 0 40px;min-width:0}
.cs-img{margin:0 0 clamp(16px,1.6vw,24px);border-radius:clamp(14px,1.4vw,22px);overflow:hidden;background:var(--pb,#141416);position:relative}
.cs-img img{width:100%;height:auto}
.cs-img.fit{display:grid;place-items:center;padding:clamp(20px,3vw,48px)}
.cs-img.fit img{width:auto;max-height:520px}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.6vw,24px);margin-bottom:clamp(16px,1.6vw,24px)}
.cs-grid .cs-img{margin:0;display:flex;align-items:center;justify-content:center}
.cs-grid .cs-img img{width:100%;height:100%;object-fit:cover}
.cs-grid .cs-img.fit img{width:auto;height:auto;object-fit:contain}
.cs-txt{display:grid;grid-template-columns:minmax(120px,.32fr) 1fr;gap:12px 32px;padding:clamp(40px,5vw,88px) 0;border-top:1px solid var(--cline)}
.cs-txt+.cs-img,.cs-txt+.cs-grid{margin-top:0}
.cs-txt h2{margin:0;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cmute);padding-top:.5em}
.cs-txt p{margin:0;font-size:clamp(20px,1.9vw,30px);line-height:1.22;letter-spacing:-.035em;max-width:30em}
.cs-pts{grid-column:2;list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;counter-reset:pt;border-top:1px solid var(--cline)}
.cs-pts li{counter-increment:pt;position:relative;padding:14px 0 14px 44px;border-bottom:1px solid var(--cline);font-size:17px;line-height:1.4;color:#C9C9CE}
.cs-pts li::before{content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:17px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--cmute)}
.cs-live{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:clamp(40px,5vw,80px) 0 0;padding:clamp(26px,3vw,44px);border-radius:22px;background:#111113;box-shadow:inset 0 0 0 1px var(--cline);text-decoration:none;transition:background .4s var(--ce)}
.cs-live:hover{background:#17171a}
.cs-live b{font-weight:500;font-size:clamp(26px,3vw,48px);letter-spacing:-.05em;line-height:1}
.cs-live span{display:block;margin-top:10px;color:var(--cmute)}
.cs-live i{display:grid;place-items:center;width:clamp(52px,5vw,72px);height:clamp(52px,5vw,72px);border-radius:50%;background:var(--acc);flex:none}
.cs-live svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cs-next{display:block;margin-top:clamp(40px,5vw,80px);text-decoration:none;border-radius:22px;overflow:hidden;position:relative;background:#111113}
.cs-next img{width:100%;height:clamp(220px,28vw,420px);object-fit:cover;opacity:.55;transition:opacity .6s var(--ce),transform 1.2s var(--ce)}
.cs-next:hover img{opacity:.8;transform:scale(1.03)}
.cs-next>div{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,3vw,40px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;background:linear-gradient(0deg,rgba(7,7,8,.85),rgba(7,7,8,0))}
.cs-next small{display:block;color:#C9C9CE;margin-bottom:8px}
.cs-next b{font-weight:500;font-size:clamp(34px,4.4vw,76px);letter-spacing:-.06em;line-height:.9}
.cs-next i{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--cink);color:#0E0E0F;flex:none}
.cs-next svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the home footer, with the other projects in place of the section links */
.cs .f-in{will-change:transform}
/* no giant composited layer here (the home page needs one for its tilt; a case page doesn't) — nothing on the long page repaints while the footer arrives */
.cs .site{background:var(--cbg);will-change:auto;transform:none;overflow:clip;border-radius:0 0 clamp(28px,3vw,48px) clamp(28px,3vw,48px);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.cs .foot{background:#0A0A0B;margin-top:calc(-1*clamp(28px,3vw,48px));padding-top:clamp(28px,3vw,48px)}
/* footer: the other projects, as real choices */
.f-more{padding-bottom:clamp(10px,2vw,30px)}
.fm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(22px,2.4vw,36px)}
.fm-head h2{margin:0;font-weight:500;font-size:clamp(40px,5vw,84px);line-height:.92;letter-spacing:-.055em;color:var(--dark-ink)}
.fm-head p{margin:12px 0 0;color:var(--dark-muted);font-size:clamp(15px,1.2vw,18px);letter-spacing:-.02em}
.fm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
.fm-card{position:relative;display:flex;flex-direction:column;height:100%;border-radius:clamp(18px,1.6vw,26px);overflow:hidden;background:#141416;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);color:var(--dark-ink);text-decoration:none;isolation:isolate;
  opacity:0;transform:translateY(40px);transition:opacity .8s var(--e) calc(var(--k)*.09s),transform 1s var(--e) calc(var(--k)*.09s),box-shadow .5s var(--e)}
.f-more.in .fm-card{opacity:1;transform:none}
.fm-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 70% at 50% 100%,color-mix(in srgb,var(--pa) 30%,transparent),transparent 70%);opacity:0;transition:opacity .6s var(--e)}
.fm-im{display:block;aspect-ratio:16/10;overflow:hidden;background:#1a1a1c}
.fm-im img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.001);transition:transform 1.2s var(--e),filter .6s var(--e);filter:saturate(.9) brightness(.92)}
.fm-t{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,1.6vw,26px) clamp(18px,1.6vw,26px) clamp(22px,2vw,30px);padding-right:84px}
.fm-t small{color:var(--dark-muted);font-size:10.5px}
.fm-t b{font-weight:500;font-size:clamp(26px,2.3vw,40px);line-height:1;letter-spacing:-.05em}
.fm-t em{font-style:normal;color:#B9B9BE;font-size:15px;line-height:1.35;letter-spacing:-.015em}
.fm-go{position:absolute;right:clamp(16px,1.4vw,22px);bottom:clamp(18px,1.6vw,26px);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .45s var(--e),box-shadow .45s var(--e),transform .5s var(--e)}
.fm-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--e)}
.fm-card:hover,.fm-card:focus-visible{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 45%,transparent)}
.fm-card:hover::before,.fm-card:focus-visible::before{opacity:1}
.fm-card:hover .fm-im img,.fm-card:focus-visible .fm-im img{transform:scale(1.06);filter:none}
.fm-card:hover .fm-go,.fm-card:focus-visible .fm-go{background:var(--pa);box-shadow:none;color:#0A0A0B;transform:rotate(-45deg)}
@media (max-width:860px){
  .fm-head{align-items:center}
  .fm-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);margin:0 calc(-1*var(--g));padding:0 var(--g) 6px;scrollbar-width:none;gap:12px}
  .fm-grid::-webkit-scrollbar{display:none}
  .fm-grid li{flex:0 0 min(80vw,340px);scroll-snap-align:start}
  .fm-head .f-top{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){.fm-card{opacity:1;transform:none;transition:none}}
/* header: Back to home in the middle, where the home page has its section links */
.cs .hdr{grid-template-columns:1fr auto 1fr}
.cs .hdr .cs-home{justify-self:center}

/* ----- entrance: the story settles in, the images open as they scroll in ----- */
.cs-side-in>*,.cs-main>.cs-img:first-child{opacity:0}
.pt-go .cs-side-in>*{animation:csUp 1s var(--ce) both;animation-delay:calc(.18s + var(--i,0)*.07s)}
.pt-go .cs-h span{animation:csLine 1.1s var(--ce) both;animation-delay:.12s}
.pt-go .cs-main>.cs-img:first-child{animation:csImg 1.3s var(--ce) .28s both}
@keyframes csUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes csLine{from{transform:translateY(105%)}to{transform:none}}
@keyframes csImg{from{opacity:0;clip-path:inset(14% 0 0 0 round 22px);transform:translateY(30px)}to{opacity:1;clip-path:inset(0 0 0 0 round 22px);transform:none}}
.cs-rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ce),transform 1.1s var(--ce)}
.cs-img.cs-rv{clip-path:inset(10% 0 0 0 round 22px);transition:opacity .9s var(--ce),transform 1.1s var(--ce),clip-path 1.2s var(--ce)}
.cs-img.cs-rv img{transform:scale(1.08);transition:transform 1.6s var(--ce)}
.cs-rv.cs-in{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 22px)}
.cs-rv.cs-in img{transform:none}

@media (max-width:900px){
  .cs-wrap{grid-template-columns:1fr;gap:0}
  .cs-side{position:relative;height:auto;padding:88px 0 12px}
  .cs-visit{margin-top:8px}
  .cs-main{padding-top:24px}
  .cs-txt{grid-template-columns:1fr}
  .cs-pts{grid-column:1}
  .cs-grid{grid-template-columns:1fr}
  .cs-side{padding-top:84px}
}
@media (prefers-reduced-motion:reduce){
  .cs-visit::before{animation:none!important}
  .cs-side-in>*,.cs-main>.cs-img:first-child,.cs-rv,.cs-img.cs-rv{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
  .cs-h span{animation:none!important}
}