.portfolio{--case-accent:#f25f42;position:relative;background:#121512;color:var(--paper);padding:80px 4.5% 130px;overflow:clip;isolation:isolate}
.portfolio:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 78% 10%,#30433d 0,transparent 28%),linear-gradient(180deg,#171b18,#0e100f)}
#portfolio-space{position:sticky;top:0;width:100%;height:100svh;margin-bottom:-100svh;z-index:-1;opacity:.78;pointer-events:none}
.portfolio-head{min-height:82svh;display:grid;grid-template-columns:1fr 1.6fr 1fr;grid-template-rows:auto 1fr;gap:30px;align-items:center}
.portfolio-head .section-kicker{grid-column:1/-1;align-self:start}
.portfolio-head h2{grid-column:1/3;font-size:clamp(60px,9vw,145px);line-height:.86;position:relative}
.portfolio-head>p{align-self:end;max-width:310px;font-size:15px;line-height:1.7;color:#bcc4bc;margin-bottom:12vh}
.portfolio-stack{position:relative}
.case{display:block;position:relative;min-height:125svh;padding-top:12vh;color:var(--paper)}
.case-index{display:block;border-top:1px solid #ffffff4a;padding-top:13px;font-size:9px;letter-spacing:1.5px;margin-bottom:26px}
.case-image{height:70svh;min-height:500px;position:relative;display:grid;place-items:center;overflow:hidden;background:#090a09;isolation:isolate}
.case-image:after{content:"";position:absolute;inset:0;z-index:5;background:linear-gradient(180deg,#0002,transparent 55%,#0007);pointer-events:none}
.case-image img{position:relative;z-index:3;display:block;max-width:78%;max-height:78%;object-fit:contain;filter:saturate(.78);transition:filter .6s var(--ease),transform .8s var(--ease)}
.case:hover .case-image img{filter:saturate(1)}
.case-image--idea img{max-width:58%;max-height:68%}
.case-image--mell img{box-shadow:0 30px 80px #0007;max-height:72%}
.case-image--tide img{max-width:88%}
.case-ghost{position:absolute;z-index:1;left:-2%;top:50%;transform:translateY(-50%);font:800 clamp(140px,26vw,420px)/.7 'Manrope',sans-serif;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px #ffffff20;white-space:nowrap}
.case-corner{position:absolute;z-index:4;width:13%;aspect-ratio:1;right:13%;bottom:13%;border-right:1px solid #f25f42;border-bottom:1px solid #f25f42}
.case-orbit{position:absolute;z-index:4;width:min(68vw,820px);aspect-ratio:1;border:1px solid #b89cff66;border-radius:50%}
.case-orbit:before,.case-orbit:after{content:"";position:absolute;inset:18%;border:inherit;border-radius:inherit}
.case-orbit:after{inset:36%}
.case-scan{position:absolute;z-index:4;left:5%;right:5%;top:28%;height:1px;background:linear-gradient(90deg,transparent,#f3a13b,transparent);box-shadow:0 0 25px #f3a13b}
.case-meta{display:grid;grid-template-columns:1.5fr 1fr auto;gap:35px;align-items:end;padding:22px 0;border-bottom:1px solid #ffffff4a}
.case-meta span,.case-meta b{font-size:9px;letter-spacing:1.2px;font-weight:600}
.case-meta h3{font:500 clamp(42px,6vw,92px)/.9 'Manrope',sans-serif;letter-spacing:-.065em;margin:12px 0 0}
.case-meta p{font-size:14px;line-height:1.6;color:#bcc4bc;max-width:330px;margin:0}
.case-meta b{padding-bottom:8px}
.portfolio-static #portfolio-space{display:none}
@media(max-width:720px){.portfolio{padding:60px 6% 90px}.portfolio-head{min-height:72svh;display:block}.portfolio-head h2{font-size:18vw;margin-top:90px}.portfolio-head>p{margin:38px 0 0;max-width:270px}.case{min-height:auto;padding:70px 0}.case-image{height:58svh;min-height:390px}.case-image img,.case-image--idea img,.case-image--mell img,.case-image--tide img{max-width:88%;max-height:70%}.case-image--idea img{max-width:76%}.case-ghost{font-size:43vw}.case-meta{grid-template-columns:1fr auto;gap:20px}.case-meta p{display:none}.case-meta h3{font-size:13vw}.case-meta b{font-size:7px}.case-orbit{width:130vw}}