/* Figma 2478:390 — outlined A artwork and a separate case caption. */
.hero{--hero-case-width:clamp(300px,33.889vw,488px)}
.hero-content{grid-template-columns:minmax(0,1fr) var(--hero-case-width)}
.hero-case-visual{position:relative;display:block;width:100%;aspect-ratio:488/383;align-self:start;pointer-events:auto}
.case-art-canvas{position:absolute;inset:0 auto auto 0;width:488px;height:383px;transform:scale(var(--case-scale,.65));transform-origin:top left;pointer-events:none}
.case-art-outline{position:absolute;left:5px;max-width:none}
.outline-1{top:20px}.outline-2{top:34.4px}.outline-3{top:48.8px}.outline-4{top:63.2px}
.case-art-base-frame{position:absolute;left:-102.52px;top:-120.97px;width:868.985px;height:646.275px;display:flex;align-items:center;justify-content:center}
.case-art-base{position:relative;flex:none;width:797.841px;height:531.959px;transform:rotate(8.68deg);mask-image:url('assets/hero-case-mask.svg');mask-repeat:no-repeat;mask-position:102.523px 199.206px;mask-size:488.633px 304.859px}
.case-art-photo{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.case-art-cutout-frame{position:absolute;left:95.07px;top:0;width:424.685px;height:383.368px;display:flex;align-items:center;justify-content:center}
.case-art-cutout-frame[hidden]{display:none}
.case-art-cutout{position:relative;flex:none;width:379.239px;height:329.912px;transform:rotate(8.68deg);overflow:hidden}
.case-art-cutout img{position:absolute;left:-48.37%;top:-28.62%;width:210.4%;height:161.26%;max-width:none;object-fit:cover}
.hero-footer .case-teaser{width:var(--hero-case-width);max-width:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
.teaser-heading{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.case-teaser .latest-cases-label{position:static;font:500 12px/18px Public Sans,Arial,sans-serif;letter-spacing:.3px}
.case-teaser .teaser-controls{position:static;inset:auto;height:8px;display:flex;justify-content:flex-end;gap:6px}
.case-teaser .teaser-link{position:relative;display:block;padding-right:40px;min-height:24px}
.case-teaser .teaser-title{margin:0;padding:0;min-height:0;font:400 14px/1.2 Public Sans,Arial,sans-serif}
.hero-case-arrow{position:absolute;right:8px;top:0;transition:transform .3s}
.teaser-link:is(:hover,:focus-visible) .hero-case-arrow{transform:rotate(45deg)}
@media(max-width:900px) and (min-width:601px){.hero{--hero-case-width:280px}.hero-content{gap:24px}.hero h1{font-size:clamp(28px,4.25vw,42px)}}
@media(max-width:600px){.hero{min-height:860px;--hero-case-width:280px}.hero-content{grid-template-columns:1fr;gap:24px}.hero-case-visual{width:280px;max-width:100%;justify-self:end}.hero-footer{gap:32px}.case-teaser .teaser-title{font-size:12px}.hero h1{font-size:clamp(29px,7.7vw,40px)}}
@media(prefers-reduced-motion:reduce){.hero-case-arrow{transition:none}}
.hero-case-visual{overflow:hidden}