@font-face{font-family:Exyo Case Display;src:url('/assets/fonts/Anton-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.case-page{background:#080808;color:#efede9;--exyo-accent:#eee}
.case-study{background:#080808;position:relative;isolation:isolate}
.case-intro{position:relative;height:200svh}
.case-title-plane{position:sticky;top:0;height:100svh;overflow:hidden}
.case-display{position:absolute;left:3%;top:56%;width:94%;margin:0;transform:translateY(-50%);display:flex;justify-content:center;font:400 clamp(150px,min(27vw,45svh),520px)/1 'Exyo Case Display',sans-serif;letter-spacing:-.015em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.case-display>span{flex:none;display:block;transform:scaleX(var(--title-fit,.45));transform-origin:center}
.case-intro-meta{position:absolute;right:3%;bottom:40px;display:flex;flex-direction:column;align-items:flex-end;gap:14px;font:9px/1.5 'DM Sans',sans-serif;letter-spacing:.17em;text-transform:uppercase}
.case-intro-meta>span:first-child{color:#777}
.case-scroll{position:absolute;left:50%;bottom:65px;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:12px;color:#888;text-decoration:none;font:9px 'DM Sans',sans-serif;letter-spacing:.15em}
.case-scroll>span{display:block;width:1px;height:40px;overflow:hidden;position:relative;background:#ffffff16}
.case-scroll>span:after{content:'';position:absolute;inset:-100% 0 100%;background:#eee;animation:caseScrollLine 1.8s ease-in-out infinite}
@keyframes caseScrollLine{to{transform:translateY(200%)}}
.case-cover{--case-cover-height:min(100svh,calc(100vw / var(--case-cover-ratio,1.5)));position:relative;z-index:2;height:calc(var(--case-cover-height) + clamp(12px,2svh,24px));margin-top:-100svh;background:#080808}
.case-cover-frame{position:sticky;top:0;width:100%;height:var(--case-cover-height);overflow:hidden;background:#080808;touch-action:pan-y pinch-zoom}
.case-cover img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(var(--cover-scale,1));will-change:transform}
.case-cover-pixels{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.has-case-pixels>img{opacity:0;transform:none;will-change:auto}
.case-overview{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:5%;padding:clamp(28px,3vw,48px) 3% 0;background:#080808}
.case-overview-title>p{margin:0 0 25px;font:9px 'DM Sans',sans-serif;letter-spacing:.25em;color:#777}
.case-overview h2{max-width:95%;font:700 clamp(28px,3.5vw,60px)/.95 'Zalando Sans SemiExpanded','DM Sans',sans-serif;text-transform:uppercase;letter-spacing:-.055em;margin:0;overflow-wrap:anywhere}
.case-facts dl{margin:0}
.case-facts dl>div{display:grid;grid-template-columns:110px 1fr;gap:26px;padding:26px 0;border-top:1px solid #ffffff15}
.case-facts dt{color:#bcbcbc;font:10px/1.8 'DM Sans',sans-serif;letter-spacing:.12em}
.case-facts dd{margin:0;font:15px/1.85 'DM Sans',sans-serif;color:#e0dedb}
.case-launch{display:flex;align-items:center;gap:18px;padding:27px 0 0 136px;border-top:1px solid #ffffff15;color:#efede9;text-decoration:none;font:11px 'DM Sans',sans-serif;letter-spacing:.1em}
.case-launch>span{font-size:18px;transition:transform .3s}
.case-launch:hover>span{transform:translate(3px,-3px)}
.case-gallery{position:relative;z-index:3;margin-top:clamp(100px,11vw,180px);padding:0 3%;background:#080808}
.case-media{margin:0 0 clamp(90px,15vw,240px);position:relative;transform:translateY(var(--media-y,0px))}
.case-media img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none}
.case-media figcaption,.case-video figcaption{padding:16px 0;color:#888;font:10px/1.6 'DM Sans',sans-serif;letter-spacing:.08em}
.case-video{margin:0 0 clamp(70px,10vw,160px)}
.case-video iframe{display:block;border:0;width:100%;aspect-ratio:16/9;background:#101010}
.case-media-pair{display:grid;grid-template-columns:1fr 1fr;gap:3%;margin-bottom:clamp(90px,15vw,240px)}
.case-media-pair .case-media{margin:0;padding:4%;background:#111}
.case-media-pair img{height:auto;object-fit:cover}
.case-process{position:relative;z-index:3;margin:0 3%;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;background:#080808}
.case-process summary{padding:30px 0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font:11px 'DM Sans',sans-serif;letter-spacing:.1em}
.case-process summary::-webkit-details-marker{display:none}
.case-process summary>span{font-size:24px;font-weight:300;transition:transform .3s}
.case-process[open] summary>span{transform:rotate(45deg)}
.case-process-copy{padding:40px 0 80px;max-width:840px;margin:auto}
.case-process-copy .case-body{max-width:none}
.case-process-copy p,.case-process-copy li{font:16px/1.9 'DM Sans',sans-serif;color:#bbb}
.case-process-copy h2{font:500 clamp(24px,3vw,40px)/1.15 'DM Sans',sans-serif;letter-spacing:-.04em;margin:45px 0 25px;color:#eee}
.case-process-copy a{color:#eee}
.case-story-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid #ffffff18;font:10px/1.6 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#999}
.case-story .case-story-note{border-left:2px solid #b6a1e7;padding:8px 0 8px 20px;margin:0 0 36px;color:#c8c5cc;font-size:14px;line-height:1.8}
.case-story-text{font:17px/1.9 'DM Sans',sans-serif;color:#bcbcb6;overflow-wrap:anywhere}
.case-story-text p{font:inherit;color:inherit;margin:0 0 24px}
.case-story-text h2{font:400 clamp(27px,2.6vw,38px)/1.2 'DM Sans',sans-serif;color:#edece7;letter-spacing:-.035em;margin:52px 0 24px;scroll-margin-top:112px}
.case-story-text>h2:first-child{margin-top:0}
.case-story-text strong,.case-story-text b{font-weight:600;color:#edece7}
.case-story-text ul,.case-story-text ol{margin:20px 0 28px;padding-left:1.4em}
.case-story-text li{font:inherit;color:inherit;margin:0 0 12px;padding-left:6px}
.case-story-text li::marker{color:#b6a1e7}
.case-story-text a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b6a1e77a}
.case-story-text figcaption{font:12px/1.7 'DM Sans',sans-serif;color:#999}
.case-story .case-story-source{display:flex;align-items:center;justify-content:space-between;gap:24px;width:fit-content;min-height:44px;margin-top:36px;border-bottom:1px solid #ffffff40;font:11px/1.6 'DM Sans',sans-serif;letter-spacing:.04em}
.case-story-source>span{font-size:22px}
.case-next{position:relative;height:60svh;min-height:350px;margin-top:clamp(100px,15vw,240px);overflow:hidden}
.case-next>a{display:block;position:relative;width:100%;height:100%;padding:0 3%;color:#efede9;text-decoration:none}
.case-next-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(1);transition:opacity .6s}
.case-next>a:hover .case-next-preview,.case-next>a:focus-visible .case-next-preview{opacity:.12}
.case-next-top{position:relative;display:flex;justify-content:space-between;padding-top:30px;font:10px 'DM Sans',sans-serif;letter-spacing:.12em;color:#bcbcbc}
.case-next-main{position:absolute;left:3%;right:3%;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:5%}
.case-next-main h2{margin:0;font:400 clamp(55px,9vw,155px)/1 'Exyo Case Display',sans-serif;text-transform:uppercase;letter-spacing:-.015em;overflow-wrap:anywhere}
.case-next-circle{position:relative;flex-shrink:0;width:clamp(65px,10vw,155px);aspect-ratio:1;display:grid;place-items:center}
.case-next-circle>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:1}
.case-next-track{stroke:#ffffff20}
.case-next-progress{stroke:#eee;stroke-dasharray:295.31;stroke-dashoffset:calc(295.31 * (1 - var(--next-progress,0)))}
.case-next-circle>span{font:300 clamp(30px,5vw,70px) 'DM Sans',sans-serif;transition:transform .35s}
.case-next-circle>.case-next-count{display:flex;flex-direction:column;align-items:center;gap:5px;font:400 clamp(12px,1.5vw,22px)/1 'DM Sans',sans-serif;letter-spacing:.03em;transform:none!important}
.case-next-count small{font:9px 'DM Sans',sans-serif;color:#888}
.case-next-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.case-next>a:hover .case-next-circle>span{transform:translate(4px,-4px)}
.case-end{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ffffff18;margin:0 3%;padding:25px 0;font:8px 'DM Sans',sans-serif;letter-spacing:.08em;background:#080808}
.case-end a{color:#bcbcbc;text-decoration:none}
.case-end a:hover{color:#fff}
.case-page .inner-reading-progress{background:#eee}
.case-reveal{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s cubic-bezier(.16,1,.3,1)}
.case-reveal.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:767px){
 .case-display{left:5%;width:90%;font-size:clamp(150px,35vw,250px);top:53%}
 .case-intro-meta{right:5%;left:5%;bottom:30px;font-size:8px;gap:10px;text-align:right}
 .case-scroll{bottom:110px;font-size:8px}
 .case-scroll>span{height:30px}
 .case-overview{grid-template-columns:1fr;gap:50px;padding:24px 5% 0}
 .case-overview-title>p{font-size:8px;margin-bottom:20px}
 .case-overview h2{font-size:34px;max-width:100%}
 .case-facts dl>div{grid-template-columns:80px 1fr;gap:18px;padding:22px 0}
 .case-facts dt{font-size:9px}
 .case-facts dd{font-size:14px;line-height:1.8}
 .case-launch{padding-left:98px;font-size:10px}
 .case-gallery{padding:0 5%;margin-top:90px}
 .case-media,.case-media-pair{margin-bottom:50px}
 .case-media-pair{gap:4%}
 .case-media-pair img{height:auto;max-height:70svh}
 .case-process{margin:0 5%}
 .case-process summary{font-size:9px;padding:22px 0}
 .case-process-copy{padding:15px 0 40px}
 .case-process-copy p,.case-process-copy li{font-size:14px}
 .case-story{padding:28px 0 40px}
 .case-story-meta{font-size:10px;line-height:1.6;margin-bottom:24px;padding-bottom:20px}
 .case-story-text,.case-story .case-story-text p,.case-story .case-story-text li{font-size:16px;line-height:1.85}
 .case-story-text h2{font-size:27px;margin:36px 0 20px}
 .case-story .case-story-note{font-size:13px;padding-left:14px}
 .case-next{height:50svh;min-height:300px;margin-top:90px}
 .case-next>a{padding:0 5%}
 .case-next-top{font-size:8px;padding-top:20px}
 .case-next-main{left:5%;right:5%;gap:20px}
 .case-next-main h2{font-size:clamp(40px,11vw,80px)}
 .case-next-circle{width:65px}
 .case-end{margin:0 5%;font-size:6px;gap:10px;padding:22px 0}
}
@media(prefers-reduced-motion:reduce){
 .case-scroll>span:after{animation:none;inset:0}
 .case-cover img{transform:none;will-change:auto}
 .case-media{transform:none}
 .case-reveal{opacity:1;transform:none;transition:none}
}