.case-study{--case-paper:#f4f0eb;--case-ink:#1d1d1d;--case-muted:#655f59;--case-rule:#1d1d1d2e;--case-brand:#a00c30;--case-cool:#9fc5d3;--case-ease:cubic-bezier(.16, 1, .3, 1);background:var(--case-ink);color:var(--case-paper);font-family:var(--font-montserrat), sans-serif;padding-top:18px}.case-study :is(h1,h2,h3){font-weight:var(--weight-heading);letter-spacing:var(--tracking-heading);text-wrap:balance;overflow-wrap:break-word}.case-study :is(a,button):focus-visible{outline:2px solid var(--case-cool);outline-offset:5px}.case-study a svg{flex-shrink:0}.case-dot{color:var(--case-brand)}.case-navigation{border-bottom:1px solid #f4f0eb26;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin-bottom:30px;padding-bottom:17px;display:flex}.case-navigation a,.case-next-navigation a{color:#c5c0ba;min-height:44px;font-size:var(--type-ui);align-items:center;gap:10px;font-weight:500;line-height:1.4;display:inline-flex}.case-header{padding-bottom:clamp(24px,2.5vw,36px)}.case-meta{color:#c5c0ba;font-size:var(--type-label);flex-wrap:wrap;align-items:center;gap:10px 24px;margin-bottom:24px;line-height:1.5;display:flex}.case-index{color:var(--case-paper);gap:12px;display:inline-flex}.case-index>span{color:var(--case-cool);font-variant-numeric:tabular-nums}.case-project-kind{border-left:1px solid #f4f0eb30;padding-left:24px}.case-year{font-variant-numeric:tabular-nums;margin-left:auto}.case-heading-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:clamp(32px,5vw,72px);display:grid}.case-study h1{max-width:15ch;font-size:var(--type-display);line-height:var(--leading-heading)}.case-header-copy>p{color:#d0cbc5;max-width:42ch;font-size:var(--type-lead);text-wrap:pretty;line-height:1.65}.case-public-links{flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px;display:flex}.case-live-link,.case-code-link,.case-contact-link{min-height:50px;font-size:var(--type-ui);justify-content:center;align-items:center;gap:20px;font-weight:500;line-height:1.4;display:inline-flex}.case-live-link{background:var(--case-brand);color:#fff;border-radius:4px;padding:13px 18px 13px 20px}.case-code-link{color:var(--case-paper);border-bottom:1px solid #f4f0eb50;padding-block:12px}.case-device-scene,.case-story-area{background:var(--case-paper);color:var(--case-ink)}.case-device-scene{padding-block:clamp(12px,1.5vw,24px) clamp(32px,4vw,58px)}.case-scene-topline{color:var(--case-muted);font-size:var(--type-label);justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px;line-height:1.5;display:flex}.case-scene-topline a{min-height:44px;color:var(--case-ink);align-items:center;gap:10px;display:inline-flex}.case-device-scene a:focus-visible,.case-story-area :is(a,button):focus-visible{outline-color:var(--case-brand)}.case-devices{grid-template-columns:minmax(0,1fr);align-items:end;gap:clamp(26px,3.5vw,48px);display:grid}.case-devices-pair{grid-template-columns:minmax(0,1fr) clamp(160px,17vw,220px)}.case-desktop,.case-phone{min-width:0;margin:0}.case-desktop-window{background:var(--case-ink);border-radius:12px;padding:5px;overflow:hidden;box-shadow:0 0 0 1px #00000014,0 2px 4px #0000000c,0 12px 22px -10px #00000030,0 28px 48px -24px #00000038}.case-device-toolbar{color:#c8c2bd;align-items:center;gap:12px;min-height:32px;padding:4px 10px 8px;font-size:10px;line-height:1.5;display:flex}.case-device-toolbar>span:last-child{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.case-device-dots{flex-shrink:0;gap:4px;display:flex}.case-device-dots i{background:#9b958e;border-radius:50%;width:5px;height:5px}.case-device-screen{aspect-ratio:16/10;background:var(--case-ink);border-radius:0 0 7px 7px;position:relative;overflow:hidden}.case-device-screen img,.case-phone-screen img{object-fit:contain;object-position:center}.case-phone-frame{background:var(--case-ink);border-radius:28px;padding:5px;box-shadow:inset 0 0 0 1px #ffffff24,0 0 0 1px #00000014,0 2px 4px #0000000c,0 16px 30px -12px #00000030,0 32px 48px -24px #0000002b}.case-phone-screen{aspect-ratio:390/844;background:var(--case-ink);border-radius:23px;position:relative;overflow:hidden}.case-device-scene figcaption{color:var(--case-muted);font-size:var(--type-label);margin-top:18px;line-height:1.5}.case-story-area{padding-block:8px clamp(48px,6vw,96px);scroll-margin-top:16px}.case-chapter-head{border-top:1px solid var(--case-rule);grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:end;gap:24px clamp(40px,6vw,96px);padding-top:clamp(40px,5vw,72px);display:grid}.case-chapter-head h2{max-width:14ch;font-size:var(--type-section);line-height:var(--leading-heading)}.case-chapter-head p{max-width:36ch;color:var(--case-muted);font-size:var(--type-body);line-height:var(--leading-body)}.case-facts{border-top:1px solid var(--case-rule);grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr);gap:24px clamp(32px,4vw,64px);margin-top:clamp(40px,5vw,64px);padding-top:24px;display:grid}.case-facts dt{color:var(--case-muted);font-size:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;margin-bottom:10px;line-height:1.5}.case-facts dd{font-size:var(--type-body);text-wrap:pretty;line-height:1.6}.case-tags{flex-wrap:wrap;gap:6px 12px;padding:0;list-style:none;display:flex}.case-tags li{font-size:var(--type-small);line-height:1.6}.case-tags li:not(:last-child):after{content:"/";color:var(--case-rule);margin-left:12px}.case-steps{margin-top:clamp(40px,5vw,72px)}.case-step{border-top:1px solid var(--case-rule);grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:start;gap:40px clamp(40px,6vw,96px);padding-block:clamp(48px,6vw,96px);display:grid}.case-step:first-child{padding-top:clamp(40px,4vw,64px)}.case-step:last-child{padding-bottom:0}.case-step[data-layout=media-first]{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}.case-step[data-layout=media-first] .case-step-copy{order:2}.case-step:not([data-layout=text]) .case-step-copy{position:sticky;top:40px}.case-step[data-layout=text] .case-step-copy{display:contents}.case-step-heading{align-items:baseline;gap:16px;display:flex}.case-step-index{color:var(--case-brand);font-size:var(--type-label);font-variant-numeric:tabular-nums;line-height:1.5}.case-step h3{font-size:var(--type-subheading);line-height:var(--leading-heading)}.case-step[data-step=result] h3{color:var(--case-brand)}.case-step-copy p{color:#4d4842;max-width:46ch;font-size:var(--type-body);text-wrap:pretty;margin-top:24px;line-height:1.75}.case-step[data-layout=text] .case-step-copy p{max-width:52ch;color:var(--case-ink);font-size:var(--type-lead);margin-top:0;line-height:1.65}.case-step[data-step=result] .case-step-copy p{color:var(--case-ink);font-size:var(--type-lead);line-height:1.65}.case-step-media{gap:clamp(48px,5vw,80px);min-width:0;display:grid}.case-shot{min-width:0;margin:0}.case-shot-frame{background:var(--case-ink);width:100%;color:inherit;cursor:zoom-in;border:0;border-radius:12px;padding:4px;display:block;position:relative;overflow:hidden;box-shadow:0 0 0 1px #00000014,0 2px 4px #0000000c,0 12px 22px -10px #00000030,0 28px 48px -24px #00000038}.case-shot-frame img{border-radius:8px;width:100%;height:auto;display:block}.case-shot[data-device=mobile] .case-shot-frame{border-radius:28px;padding:5px}.case-shot[data-device=mobile] .case-shot-frame img{border-radius:23px}.case-shot-zoom{color:var(--case-paper);font-size:var(--type-label);background:#1d1d1dd1;border-radius:999px;align-items:center;gap:8px;padding:7px 11px;line-height:1.4;display:inline-flex;position:absolute;bottom:14px;right:14px}.case-shot figcaption{color:#4d4842;max-width:54ch;font-size:var(--type-small);text-wrap:pretty;align-items:baseline;gap:14px;margin-top:18px;line-height:1.6;display:flex}.case-shot[data-device=mobile] .case-shot-zoom{padding:7px;bottom:12px;right:12px}.case-shot[data-device=mobile] .case-shot-zoom>span{display:none}.case-shot-number{color:var(--case-brand);font-size:var(--type-label);font-variant-numeric:tabular-nums;flex:none}.case-step-media>.case-shot:nth-child(2n of [data-device=desktop]){width:86%;margin-left:auto}.case-step[data-layout=media-first] .case-step-media>.case-shot:nth-child(2n of [data-device=desktop]){margin-left:0;margin-right:auto}.case-shot[data-device=mobile]{align-items:flex-end;gap:clamp(24px,4vw,56px);display:flex}.case-shot[data-device=mobile] .case-shot-frame{flex:none;width:clamp(200px,20vw,260px)}.case-shot[data-device=mobile] figcaption{max-width:28ch;color:var(--case-ink);font-size:var(--type-body);flex-direction:column;gap:10px;margin:0 0 24px}.case-step[data-layout=text-first] .case-shot[data-device=mobile]{flex-direction:row-reverse}.case-next{padding-block:clamp(24px,2.5vw,38px) clamp(64px,7vw,112px)}.case-next-navigation{font-size:var(--type-label);border-bottom:1px solid #f4f0eb26;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-bottom:20px;line-height:1.5;display:flex}.case-next-project{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:32px clamp(40px,5vw,80px);padding-top:clamp(40px,5vw,72px);display:grid}.case-next-copy{min-width:0}.case-next-category{color:var(--case-cool);font-size:var(--type-label);line-height:1.5}.case-next-copy h2{font-size:var(--type-section);line-height:var(--leading-heading);margin-top:18px}.case-next-arrow{width:.62em;height:.62em;color:var(--case-cool);vertical-align:-.02em;margin-left:.18em;display:inline-block}.case-next-copy p{color:#c5c0ba;max-width:44ch;font-size:var(--type-body);text-wrap:pretty;margin-top:24px;line-height:1.7}.case-next-media{aspect-ratio:16/10;clip-path:inset(14% 0 round 10px);background:#252525;border-radius:10px;position:relative;overflow:hidden}.case-next-media img{object-fit:cover;object-position:top;filter:saturate(.75)brightness(.7);transform:scale(1.05)}.case-gallery-dialog{color:#f4f0eb;width:calc(100% - 40px);max-width:1400px;max-height:calc(100dvh - 40px);font-family:var(--font-montserrat), sans-serif;background:#1d1d1d;border:1px solid #ffffff26;border-radius:8px;margin:auto;padding:0;overflow:auto}.case-gallery-dialog::backdrop{background:#000000c7}.case-gallery-dialog-header{z-index:1;background:#1d1d1d;border-bottom:1px solid #ffffff26;justify-content:space-between;align-items:center;gap:24px;padding:14px 16px 14px 24px;display:flex;position:sticky;top:0}.case-gallery-dialog-header h2{min-width:0;font-size:var(--type-ui);letter-spacing:0;overflow-wrap:anywhere;font-weight:500;line-height:1.5}.case-gallery-dialog button{color:#f4f0eb;cursor:pointer;border:1px solid #ffffff30;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex}.case-gallery-dialog button:focus-visible{outline:2px solid var(--case-cool,#9fc5d3);outline-offset:4px}.case-gallery-dialog-image{place-items:center;min-height:220px;padding:24px;display:grid}.case-gallery-dialog-image img{object-fit:contain;border-radius:6px;max-width:100%;max-height:calc(100dvh - 210px)}.case-gallery-dialog-footer{justify-content:space-between;align-items:center;gap:16px 32px;padding:0 24px 20px;display:flex}.case-gallery-dialog-footer p{color:#d0cbc5;min-width:0;font-size:var(--type-small);text-wrap:pretty;align-items:baseline;gap:16px;line-height:1.6;display:flex}.case-gallery-dialog-count{color:#9fc5d3;font-size:var(--type-label);font-variant-numeric:tabular-nums;flex:none}.case-gallery-dialog-navigation{flex:none;gap:10px;display:flex}.case-contact{background:var(--case-brand);color:#f4f0eb;padding-block:clamp(24px,3vw,44px)}.case-contact-inner{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px;display:grid}.case-contact h2{max-width:16ch;font-size:var(--type-section);line-height:var(--leading-heading)}.case-contact p{color:#efd5dd;max-width:48ch;font-size:var(--type-body);text-wrap:pretty;margin-top:24px;line-height:1.7}.case-contact-link{color:#1d1d1d;background:#f4f0eb;border-radius:4px;min-height:56px;padding:16px 22px 16px 24px}.case-contact a:focus-visible{outline-color:#f4f0eb}@media (hover:hover) and (pointer:fine){.case-navigation a:hover,.case-next-navigation a:hover{color:#f4f0eb}.case-live-link:hover{background:#b3133c}.case-code-link:hover{border-color:var(--case-cool);color:var(--case-cool)}.case-scene-topline a:hover{color:var(--case-brand)}.case-shot-zoom{opacity:0}.case-shot-frame:is(:hover,:focus-visible) .case-shot-zoom{opacity:1}.case-gallery-dialog button:hover{border-color:var(--case-cool,#9fc5d3)}.case-contact-link:hover{background:#fff}.case-next-project:hover h2{color:var(--case-cool)}.case-next-project:is(:hover,:focus-visible) .case-next-media{clip-path:inset(0 round 10px)}.case-next-project:is(:hover,:focus-visible) .case-next-media img{filter:none;transform:scale(1)}.case-next-project:is(:hover,:focus-visible) .case-next-arrow{transform:translate(.12em)}}@media (hover:none),(pointer:coarse){.case-next-media{clip-path:none}.case-next-media img{filter:none;transform:none}}@media (prefers-reduced-motion:no-preference){.case-study a,.case-gallery-dialog button,.case-next-copy h2{transition:color .15s,background-color .15s,border-color .15s}.case-shot-frame img{transition:transform .6s var(--case-ease)}.case-shot-zoom{transition:opacity .2s}.case-next-media{transition:clip-path .8s var(--case-ease)}.case-next-media img{transition:transform 1s var(--case-ease), filter .6s ease}.case-next-arrow{transition:transform .5s var(--case-ease)}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.case-shot-frame:hover img{transform:scale(1.015)}}@media (max-width:1000px){.case-heading-layout{grid-template-columns:minmax(0,1fr);gap:24px}.case-study h1{max-width:20ch}.case-header-copy>p{max-width:58ch}.case-chapter-head,.case-step,.case-step[data-layout=media-first]{grid-template-columns:minmax(0,1fr)}.case-step[data-layout=media-first] .case-step-copy{order:0}.case-step:not([data-layout=text]) .case-step-copy{position:static}.case-step[data-layout=text]{gap:24px}.case-step-copy p{max-width:62ch}.case-step-media>.case-shot:nth-child(2n of [data-device=desktop]){width:100%;margin:0}.case-step[data-layout=media-first] .case-step-media>.case-shot:nth-child(2n of [data-device=desktop]){width:100%;margin:0}.case-step[data-layout=text-first] .case-shot[data-device=mobile]{flex-direction:row}.case-contact-inner{grid-template-columns:minmax(0,1fr);justify-items:start;gap:32px}.case-next-project{grid-template-columns:minmax(0,1fr)}}@media (max-width:760px){.case-study{padding-top:12px}.case-study>.shell,.case-study article .shell{width:calc(100% - 40px)}.case-navigation{margin-bottom:24px;padding-bottom:12px}.case-navigation a{font-size:var(--type-small);gap:8px}.case-meta{gap:8px 16px;margin-bottom:20px}.case-project-kind{border-left:0;padding-left:0}.case-year{margin-left:0}.case-header-copy>p{font-size:var(--type-body)}.case-public-links{gap:8px 20px;margin-top:20px}.case-scene-topline{gap:12px;margin-bottom:20px}.case-devices-pair{grid-template-columns:minmax(0,1fr)}.case-phone{justify-self:center;width:min(72%,240px)}.case-device-scene figcaption{margin-top:14px}.case-facts{grid-template-columns:minmax(0,1fr);gap:20px}.case-step{gap:32px}.case-step-copy p{margin-top:18px}.case-step-media{gap:44px}.case-shot figcaption{gap:12px;margin-top:14px}.case-shot[data-device=mobile]{flex-wrap:wrap;gap:20px}.case-shot[data-device=mobile] .case-shot-frame{width:clamp(180px,52vw,260px)}.case-shot[data-device=mobile] figcaption{font-size:var(--type-small);flex:120px;margin:0 0 8px}.case-shot-zoom>span{display:none}.case-shot-zoom{padding:7px;bottom:10px;right:10px}.case-gallery-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 24px)}.case-gallery-dialog-header{gap:16px;padding:10px 12px 10px 16px}.case-gallery-dialog-image{min-height:0;padding:8px}.case-gallery-dialog-image img{max-height:calc(100dvh - 220px)}.case-gallery-dialog-footer{background:#1d1d1d;align-items:flex-end;gap:12px;padding:12px 16px 14px;position:sticky;bottom:0}.case-gallery-dialog-footer p{flex-direction:column;gap:4px}.case-next-project{gap:28px;padding-top:32px}.case-next-copy h2{margin-top:12px}.case-next-copy p{margin-top:16px}}@media (forced-colors:active){.case-dot,.case-step-index,.case-shot-number,.case-step[data-step=result] h3,.case-next-arrow{color:canvastext}.case-live-link,.case-contact-link{border:1px solid buttontext}.case-desktop-window,.case-phone-frame,.case-shot-frame{outline:1px solid canvastext}}
