:where(.page-case) .case-hero{padding-top:clamp(130px,15vw,200px);position:relative;overflow-x:clip}:where(.page-case) .case-hero:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(45% 50% at 70% 30%,#7c3aed47,#0000 70%),radial-gradient(35% 40% at 25% 60%,#22d3ee1a,#0000 70%);width:120vw;height:90vh;position:absolute;top:-10vh;left:50%;transform:translate(-50%)}:where(.page-case) .case-back{color:var(--muted);font-size:14px}:where(.page-case) .case-back .i-arrow{transform:rotate(180deg)}:where(.page-case) .case-back:hover .i-arrow{transform:rotate(180deg)translate(4px)}:where(.page-case) .case-kicker-top{margin-top:clamp(36px,5vw,64px);display:flex}:where(.page-case) .case-title{margin:22px 0 28px}:where(.page-case) .case-sum{max-width:62ch}:where(.page-case) .case-proof{font:500 12px/1.4 var(--f-mono);letter-spacing:.04em;color:var(--ice);flex-wrap:wrap;gap:6px 16px;margin-top:22px;display:flex}:where(.page-case) .case-proof span+span:before{content:"·";color:var(--dim);margin-right:16px}@media (max-width:600px){:where(.page-case) .case-proof span+span:before{display:none}}:where(.page-case) .case-meta{border-top:1px solid var(--line);grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,80px);display:grid}:where(.page-case) .case-meta>div{padding:22px 24px 0 0}:where(.page-case) .case-meta dt{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}:where(.page-case) .case-meta dd{color:var(--text);margin-top:8px;font-size:16px}@media (max-width:760px){:where(.page-case) .case-meta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}}:where(.page-case) .case-media{margin-top:clamp(56px,7vw,100px)}:where(.page-case) .browser{box-shadow:inset 0 0 0 1px var(--line-2), 0 70px 140px -50px #7c3aed8c, 0 30px 60px -30px #000c;background:#110e1d;border-radius:24px;position:relative;overflow:hidden}:where(.page-case) .browser-bar{border-bottom:1px solid var(--line);background:#ece9f708;align-items:center;gap:8px;height:46px;padding:0 18px;display:flex}:where(.page-case) .browser-bar i{background:#ece9f729;border-radius:50%;width:10px;height:10px}:where(.page-case) .browser-url{font:500 11px/1 var(--f-mono);letter-spacing:.04em;color:var(--muted);background:#ece9f70f;border-radius:999px;margin-inline:auto;padding:7px 16px;transform:translate(-24px)}:where(.page-case) .browser .case-shot{box-shadow:none;aspect-ratio:16/10;border-radius:0}@media (max-width:600px){:where(.page-case) .browser-url{display:none}:where(.page-case) .browser{border-radius:16px}}:where(.page-case) .case-cover>.cover{aspect-ratio:16/10;border-radius:24px;box-shadow:inset 0 0 0 1px #ffffff1f,0 70px 140px -50px #7c3aed8c,0 30px 60px -30px #000c}:where(.page-case) .case-cover .cover-title{font-size:clamp(28px,5.4vw,80px)}:where(.page-case) .case-cover .cover-chip{padding:clamp(6px,.8vw,12px) clamp(10px,1.3vw,18px);font-size:clamp(10px,1.1vw,15px)}:where(.page-case) .case-cover .cover-bars{gap:clamp(8px,1.2vw,18px)}:where(.page-case) .case-cover .cover-bars i{border-radius:8px;height:clamp(7px,1vw,15px)}@media (max-width:600px){:where(.page-case) .case-cover>.cover{border-radius:16px}}:where(.page-case) .browser.is-entering,:where(.page-case) .case-cover.is-entering{animation:caseIn 1.5s var(--ease) .25s both}:where(.page-case) .case-section{padding-block:clamp(80px,10vw,150px) 0}:where(.page-case) .case-grid{grid-template-columns:minmax(170px,1fr) minmax(0,3.2fr);align-items:start;gap:40px;display:grid}:where(.page-case) .case-kicker{padding-top:12px;position:sticky;top:110px}@media (max-width:860px){:where(.page-case) .case-grid{grid-template-columns:minmax(0,1fr);gap:22px}:where(.page-case) .case-kicker{padding-top:0;position:static}}:where(.page-case) .case-fill{font:500 clamp(24px, 3vw, 46px)/1.25 var(--f-body);letter-spacing:-.025em}:where(.page-case) .case-h{max-width:18ch}:where(.page-case) .case-cols{color:var(--muted);grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:40px;font-size:17px;line-height:1.75;display:grid}:where(.page-case) .case-cols:first-child{margin-top:0}@media (max-width:760px){:where(.page-case) .case-cols{grid-template-columns:minmax(0,1fr);gap:18px}}:where(.page-case) .built li{grid-template-columns:clamp(64px,8vw,110px) minmax(0,1fr);gap:24px;padding:32px 0 34px;display:grid;position:relative}:where(.page-case) .built li:before{content:"";background:linear-gradient(90deg, #a855f799, #22d3ee59 40%, var(--line-2));transform-origin:0;height:1px;transition:transform 1.4s var(--ease);position:absolute;top:0;left:0;right:0;transform:scaleX(0)}:where(.page-case) .built.in li:before,html:not(.js) :where(.page-case) .built li:before{transform:scaleX(1)}:where(.page-case) .built.in li:nth-child(2):before{transition-delay:80ms}:where(.page-case) .built.in li:nth-child(3):before{transition-delay:.16s}:where(.page-case) .built.in li:nth-child(4):before{transition-delay:.24s}:where(.page-case) .built-n{font:600 clamp(30px, 3.4vw, 52px)/1 var(--f-display);letter-spacing:-.05em;background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text}:where(.page-case) .built p{max-width:56ch;color:var(--muted);margin-top:10px}:where(.page-case) .built li:hover .h3{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text}:where(.page-case) .stack-list{flex-wrap:wrap;gap:12px;display:flex}:where(.page-case) .stack-list li{font:500 clamp(15px, 1.35vw, 20px)/1 var(--f-body);box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color .3s, color .3s, box-shadow .3s, transform .5s var(--spring);border-radius:999px;padding:15px 24px}:where(.page-case) .stack-list li:hover{color:#0b0716;background:var(--grad);box-shadow:none;transform:translateY(-3px)}:where(.page-case) .case-gallery{padding-top:clamp(100px,12vw,180px)}:where(.page-case) .gallery-grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;gap:24px;display:grid}:where(.page-case) .gallery-grid figure{min-width:0}:where(.page-case) .g-desk{grid-column:1/span 8}:where(.page-case) .g-desk .shot{aspect-ratio:16/10;border-radius:22px}:where(.page-case) .g-phone-1{grid-column:9/span 2;margin-top:16%}:where(.page-case) .g-phone-2{grid-column:11/span 2;margin-top:44%}:where(.page-case) .g-phone .shot.phone{box-shadow:inset 0 0 0 1px var(--line-2), 0 40px 80px -30px #7c3aed99;border-radius:26px}:where(.page-case) [data-parallax]{will-change:transform}:where(.page-case) .case-gallery figcaption{font:500 12px/1.6 var(--f-mono);letter-spacing:.03em;color:var(--dim);margin-top:16px}@media (max-width:860px){:where(.page-case) .g-desk{grid-column:1/-1}:where(.page-case) .g-phone-1{grid-column:1/span 6;margin-top:8px}:where(.page-case) .g-phone-2{grid-column:7/span 6;margin-top:22%}}:where(.page-case) .case-outcome{max-width:24ch}:where(.page-case) .case-actions{margin-top:44px}:where(.page-case) .next-project{border-top:1px solid var(--line);margin-top:clamp(110px,13vw,190px)}:where(.page-case) .next-link{max-width:var(--maxw);padding:clamp(70px, 10vw, 150px) var(--gutter);padding-right:calc(var(--gutter) + clamp(64px, 7vw, 110px) + 24px);gap:16px;margin:0 auto;display:grid;position:relative}:where(.page-case) .next-title{font:700 min(clamp(56px, 12.5vw, 210px), (100vw - 2 * var(--gutter)) / 5.6)/.9 var(--f-display);letter-spacing:-.06em;color:#0000;-webkit-text-stroke:1px #ece9f766;background:var(--grad) no-repeat 0 0 / 0% 100%;transition:background-size 1.1s var(--ease), -webkit-text-stroke-color .6s;-webkit-background-clip:text;background-clip:text}:where(.page-case) .next-link:hover .next-title,:where(.page-case) .next-link:focus-visible .next-title{-webkit-text-stroke-color:transparent;background-size:100% 100%}:where(.page-case) .next-title--long{font-size:clamp(34px,9vw,150px)}:where(.page-case) .next-sub{color:var(--muted);font-size:clamp(15px,1.3vw,18px)}:where(.page-case) .next-arrow{right:var(--gutter);aspect-ratio:1;width:clamp(64px,7vw,110px);box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color .4s, color .4s, transform .9s var(--spring);border-radius:50%;place-items:center;margin-top:calc(clamp(64px,7vw,110px)/-2);display:grid;position:absolute;top:50%}:where(.page-case) .next-arrow svg{width:34%;height:34%}:where(.page-case) .next-link:hover .next-arrow{background:var(--text);color:var(--void);transform:rotate(-45deg)scale(1.06)}@media (max-width:760px){:where(.page-case) .next-arrow{display:none}:where(.page-case) .next-link{padding-right:var(--gutter)}}@media (prefers-reduced-motion:reduce){:where(.page-case) .browser.is-entering,:where(.page-case) .case-cover.is-entering{animation:none}:where(.page-case) [data-parallax]{transform:none!important}:where(.page-case) .built li:before{transition:none;transform:scaleX(1)}}@keyframes caseIn{0%{clip-path:inset(14% 8% 0 round 32px);opacity:.15;transform:translateY(70px)}to{clip-path:inset(0 round 24px);opacity:1;transform:none}}
