.work-stack{isolation:isolate;aspect-ratio:1/1.02;width:100%;max-width:21rem;position:relative}@media (min-width:64rem){.work-stack{max-width:none}}.work-stack:before{content:"";z-index:-1;pointer-events:none;background-image:radial-gradient(50% 46% at 48% 62%, color-mix(in oklab, var(--color-signal) 26%, transparent) 0%, transparent 72%);position:absolute;inset:12% -20% -12% -12%}.work-stack__card{--x:0%;--y:0%;--r:0deg;--lift:0%;z-index:calc(10 - var(--n));border:1px solid color-mix(in oklab, var(--color-signal) 26%, var(--color-hairline));border-radius:var(--radius-md);background-color:var(--color-basalt);width:60%;box-shadow:0 1.75rem 3rem -1.25rem color-mix(in oklab, var(--color-obsydian) 90%, transparent);transform-origin:50% 130%;translate:var(--x) calc(var(--y) + var(--lift));rotate:var(--r);transition:translate .85s var(--ease-out-expo), rotate .85s var(--ease-out-expo), border-color .3s var(--ease-out-quart);transition-delay:calc(var(--n) * 35ms);position:absolute;bottom:2%;left:2%;overflow:clip}.work-stack__card:first-child{--x:0%;--y:0%;--r:-3deg}.work-stack__card:nth-child(2){--x:15%;--y:-10%;--r:-1deg}.work-stack__card:nth-child(3){--x:30%;--y:-20%;--r:1deg}.work-stack__card:nth-child(4){--x:45%;--y:-30%;--r:3deg}.work-stack__card:before{content:"";z-index:2;background-color:var(--color-voltage);height:2px;box-shadow:0 0 18px 1px color-mix(in oklab, var(--color-voltage) 45%, transparent);border-radius:2px;position:absolute;top:0;left:18%;right:18%}.work-stack__card:after{content:"";z-index:1;pointer-events:none;background-color:var(--color-obsydian);opacity:0;transition:opacity .3s var(--ease-out-quart);position:absolute;inset:0}.work-stack__bar{border-bottom:1px solid var(--color-hairline);background-image:linear-gradient(180deg in oklab, color-mix(in oklab, var(--color-bone) 6%, var(--color-basalt)), var(--color-basalt));align-items:center;gap:.25rem;height:1.25rem;padding-inline:.5rem;display:flex}.work-stack__bar span{background-color:color-mix(in oklab, var(--color-bone) 15%, transparent);border-radius:50%;width:.3125rem;height:.3125rem}.work-stack__shot{aspect-ratio:4/5;background-color:var(--color-slate-moss);position:relative;overflow:clip;container-type:size}.work-stack__shot img{width:100%;max-width:none;height:auto;transition:translate .9s var(--ease-out-quart);display:block;translate:0}@media (max-width:63.99rem){.work-stack__card:nth-child(4){display:none}.work-stack{aspect-ratio:1/.92}}@media (hover:hover) and (min-width:64rem){.work-stack:hover .work-stack__card:first-child{--x:-12%;--y:3%;--r:-11deg}.work-stack:hover .work-stack__card:nth-child(2){--x:8%;--y:-8%;--r:-3.5deg}.work-stack:hover .work-stack__card:nth-child(3){--x:28%;--y:-15%;--r:4deg}.work-stack:hover .work-stack__card:nth-child(4){--x:46%;--y:-20%;--r:11deg}.work-stack__card:hover{--lift:-7%;border-color:color-mix(in oklab, var(--color-voltage) 55%, transparent);transition-delay:0s}.work-stack:has(.work-stack__card:hover) .work-stack__card:not(:hover):after{opacity:.5}}@media (hover:hover) and (min-width:64rem) and (prefers-reduced-motion:no-preference){.work-stack__card:hover img{transition:translate 7s cubic-bezier(.45,.05,.4,1);translate:0 calc(100cqh - 100%)}}@media (prefers-reduced-motion:no-preference){.work-stack__card{animation:stack-deal 1.1s var(--ease-out-expo) backwards;animation-delay:calc(.38s + var(--n) * .11s)}}@keyframes stack-deal{0%{opacity:0;transform:translateY(28%)scale(.92)}}.work-feature{view-timeline-name:--work-feature;border-bottom:1px solid var(--color-hairline)}.work-feature__link{align-items:center;gap:2.5rem;padding-block:clamp(3rem,1.5rem + 4vw,6rem);display:grid}@media (min-width:64rem){.work-feature__link{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(3rem,.5rem + 4.5vw,6rem)}.work-feature:nth-child(2n) .work-feature__link{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.work-feature:nth-child(2n) .work-feature__shot{order:2}.work-feature__link--text,.work-feature:nth-child(2n) .work-feature__link--text{grid-template-columns:minmax(0,1fr)}}.work-feature__shot .browser,.next-card__shot .browser{transition:border-color .3s var(--ease-out-quart), box-shadow .5s var(--ease-out-quart)}.work-feature__link:is(:hover,:focus-visible) .browser,.next-card:is(:hover,:focus-visible) .browser{border-color:color-mix(in oklab, var(--color-signal) 60%, transparent);box-shadow:var(--shadow-glow-strong)}.work-more{font-size:var(--text-sm);color:var(--color-voltage);align-items:center;gap:.5rem;font-weight:500;display:inline-flex}.work-more__arrow{transition:translate .5s var(--ease-out-expo)}.work-feature__link:is(:hover,:focus-visible) .work-more__arrow{translate:.375rem}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.work-feature__shot{animation:linear both feature-open,linear both feature-drift;animation-timeline:--work-feature,--work-feature;animation-range:entry cover 40%,cover}}}@keyframes feature-open{0%{clip-path:inset(9% 7% 9% 7% round var(--radius-lg));opacity:.35;scale:.94}to{clip-path:inset(0 round var(--radius-lg));opacity:1;scale:1}}@keyframes feature-drift{0%{translate:0 2.5rem}to{translate:0 -2.5rem}}.case-stage{z-index:1;view-timeline-name:--case-stage;margin-top:calc(-1*clamp(1.25rem,.25rem + 2.5vw,3rem));position:relative}.case-stage:before{content:"";z-index:-1;pointer-events:none;background-image:radial-gradient(55% 50% at 50% 55%, color-mix(in oklab, var(--color-signal) 22%, transparent) 0%, transparent 72%);position:absolute;inset:8% 0 -6%}.case-stage__frame .browser{border-color:color-mix(in oklab, var(--color-signal) 32%, var(--color-hairline));box-shadow:0 2.5rem 6rem -2.5rem color-mix(in oklab, var(--color-obsydian) 95%, transparent)}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.case-stage__frame{animation:linear both stage-grow;animation-timeline:--case-stage;animation-range:entry}}}@keyframes stage-grow{0%{scale:.9}to{scale:1}}.case-facts{align-content:start;align-self:start;gap:1.75rem 2rem;display:grid}@media (min-width:40rem){.case-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:64rem){.case-facts{grid-template-columns:minmax(0,1fr);position:sticky;top:7rem}}.case-facts>div{border-top:1px solid var(--color-hairline);padding-top:1rem}.case-facts dt{font-size:var(--text-sm);color:var(--color-bone-45)}.case-facts dd{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.01em;color:var(--color-bone);margin-top:.625rem;font-weight:540;line-height:1.25}.case-prose>div>p:first-child{max-width:56ch;font-size:var(--text-xl);color:var(--color-bone);line-height:1.6}.case-prose h2:not(:first-child){margin-top:4.5rem}.case-prose h2:before{content:"";background-color:var(--color-voltage);width:2.5rem;height:2px;box-shadow:0 0 14px 1px color-mix(in oklab, var(--color-voltage) 40%, transparent);border-radius:2px;margin-bottom:1.5rem;display:block}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.case-prose>div>*{animation:linear both reveal-in;animation-timeline:view();animation-range:entry 10% cover 28%}}}.case-next{isolation:isolate;border-top:1px solid var(--color-hairline);background-color:var(--color-basalt);position:relative;overflow:clip}.next-card{view-timeline-name:--next-card;align-items:center;gap:3rem;margin-top:3.5rem;padding-bottom:clamp(4rem,2rem + 5vw,7rem);display:grid}@media (min-width:64rem){.next-card{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(3rem,.5rem + 4.5vw,6rem)}}.next-card__go{font-size:var(--text-sm);color:var(--color-bone);align-items:center;gap:1rem;font-weight:500;display:inline-flex}.next-card__circle{isolation:isolate;border:1px solid var(--color-bone-12);width:3.5rem;height:3.5rem;color:var(--color-voltage);transition:color .35s var(--ease-out-quart), border-color .35s var(--ease-out-quart);border-radius:50%;place-items:center;display:grid;position:relative;overflow:clip}.next-card__circle:before{content:"";z-index:-1;background-color:var(--color-voltage);transform-origin:bottom;transition:transform .55s var(--ease-out-expo);position:absolute;inset:0;transform:scaleY(0)}.next-card__circle svg{transition:translate .5s var(--ease-out-expo)}.next-card:is(:hover,:focus-visible) .next-card__circle{border-color:var(--color-voltage);color:var(--color-obsydian)}.next-card:is(:hover,:focus-visible) .next-card__circle:before{transform:none}.next-card:is(:hover,:focus-visible) .next-card__circle svg{translate:.25rem}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.next-card__shot{animation:linear both next-slide;animation-timeline:--next-card;animation-range:entry cover 45%}}}@keyframes next-slide{0%{opacity:.3;translate:14%;rotate:4deg}to{opacity:1;translate:0;rotate:none}}