.real-project-visual{display:block;aspect-ratio:1265/712;background:#e6e3d7;border:1px solid var(--line)}.real-project-visual img{object-fit:cover}.project-title a:hover,.case-back:hover,.case-screenshot figcaption a:hover{color:var(--blue)}.project-links{display:flex;align-items:center;justify-content:space-between;gap:18px}.project-links .case-study{flex:1;color:var(--charcoal)}.project-external{font-size:10px;color:var(--muted);padding-top:17px;white-space:nowrap}.projects-language{margin-top:35px;font-size:12px}.projects-language a{border-bottom:1px solid var(--line);padding-bottom:5px}.case-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:32px 0;font-size:12px}.case-back{color:var(--muted)}.language-links{display:flex;gap:18px}.language-links a{padding:6px 0;border-bottom:1px solid transparent}.language-links a[aria-current=page]{border-color:var(--terracotta);color:var(--terracotta)}.case-intro{max-width:900px;padding:42px 0 48px}.case-intro h1{font-size:clamp(60px,7vw,100px);line-height:1.04;overflow-wrap:break-word}.case-headline{font:italic 32px/1.2 var(--serif);color:var(--terracotta);margin:22px 0}.case-lead{color:var(--muted);font-size:17px;line-height:1.85;max-width:750px;margin:24px 0}.case-intro .text-link{display:inline-block}.case-screenshot{margin:0}.case-screenshot img{width:100%;height:auto;border:1px solid var(--line)}.case-screenshot figcaption{font:10px/1.8 var(--mono);color:var(--muted);padding:15px 0;max-width:860px}.case-screenshot figcaption a{border-bottom:1px solid var(--line);display:inline-block;margin-left:8px}.case-section{padding:72px 0;border-top:1px solid var(--line)}.case-context{display:grid;grid-template-columns:1fr 2fr;gap:70px;margin-top:50px}.case-context h2{font-size:clamp(38px,4vw,58px);max-width:700px}.case-context p:not(.eyebrow){font-size:16px;color:var(--muted);max-width:700px;margin-bottom:0}.case-features{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.case-features article{border-top:1px solid var(--terracotta);padding-top:22px}.case-features h3{font:500 28px/1.2 var(--serif);margin:18px 0}.case-features p{font-size:14px;color:var(--muted)}.case-detail{margin-bottom:55px}.case-steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:0;margin:40px 0 0}.case-steps li{counter-increment:step;position:relative;border-top:1px solid var(--line);padding-top:22px;font-size:15px;color:var(--muted)}.case-steps li:before{content:'0' counter(step);display:block;font:12px var(--mono);color:var(--terracotta);margin-bottom:18px}.case-takeaway{background:#eae7dd;padding:36px 45px;margin-bottom:70px;border-left:2px solid var(--olive)}.case-takeaway>p:last-child{font:30px/1.3 var(--serif);margin:0;max-width:800px}.case-related{grid-template-columns:repeat(2,1fr);max-width:950px}.case-related .project-title,.case-list .project-title{margin-top:20px}.case-related .project-description{margin-top:12px}.case-contact{background:#eae7dd;border-top:1px solid var(--line);padding:70px 0}.case-contact p{color:var(--muted);margin:25px 0}.case-list{padding:80px 0 100px}.case-list .project-grid{margin-top:65px}.case-list h1{font-size:clamp(55px,6vw,86px)}
@media(max-width:760px){.case-topline{padding:25px 0;font-size:11px;gap:12px}.language-links{gap:13px}.case-intro{padding:22px 0 36px}.case-intro h1{font-size:clamp(50px,11vw,75px);letter-spacing:-2px}.case-headline{font-size:27px}.case-lead{font-size:15px;line-height:1.8}.case-section{padding:45px 0}.case-context{grid-template-columns:1fr;gap:10px;margin-top:25px}.case-context h2{font-size:40px}.case-features,.case-steps,.case-related{grid-template-columns:1fr;gap:25px}.case-features h3{font-size:27px}.case-takeaway{padding:27px;margin-bottom:45px}.case-takeaway>p:last-child{font-size:26px}.case-contact{padding:50px 0}.case-contact h2{font-size:44px}.case-list{padding:50px 0 65px}.case-list .project-grid{margin-top:45px}.case-screenshot figcaption{font-size:9px}.project-external{font-size:11px}}
@media(max-width:760px){.case-page .wordmark{white-space:nowrap;font-size:10px;letter-spacing:1px;gap:8px}.case-page .wordmark img{width:22px;height:22px}.case-page .wordmark-dot{margin-left:-7px}.case-page .motion-toggle{white-space:nowrap;font-size:8px;margin-right:10px}.case-page .header{gap:6px}}
