/* Keep only 15% of the former extra scroll distance, beyond the visible scene. */
html{overflow-x:clip}
.hero.wrap{max-width:none;padding:0;display:block;height:calc(max(26.25svh,189px) + clamp(612px,85svh,935px));min-height:0;max-height:none;isolation:isolate}
.hero-scene{position:sticky;top:0;min-height:720px;height:100svh;max-height:1100px;display:flex;align-items:center;width:100%;padding:100px max(32px,calc((100vw - 1280px)/2)) 65px;overflow:hidden}
.hero-copy{width:56%;padding:0;z-index:2}
.hero .surface-stage{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.hero .surface-stage::before{display:none}
.hero #surface{display:block;width:100%;height:100%;pointer-events:none;touch-action:pan-y;cursor:default}
#work .cases{display:grid;grid-template-columns:1fr;gap:28px;max-width:1050px}
#work .engagement-card{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:center;gap:40px;min-height:0;padding:0;background:transparent;border:0;border-radius:0;color:var(--text)}
#work .engagement-card:hover{transform:none;filter:none}
.engagement-art{display:block;width:220px;height:220px;object-fit:cover;border-radius:6px;transition:filter .25s}
.engagement-card:hover .engagement-art{filter:brightness(1.1)}
.engagement-copy{min-width:0}
#work .engagement-card h3{font-size:28px;line-height:1.25;letter-spacing:-.03em;margin:0 0 12px;text-wrap:initial}
#work .engagement-card p{font-size:16px;line-height:1.65;max-width:60ch;margin:0 0 15px;color:var(--muted)}
#work .engagement-category{display:block;font-size:13px;color:var(--accent);margin:0 0 12px}
#work .engagement-link{display:inline-block;font-size:13px;line-height:1.5;margin:0;border:0;padding:0;color:var(--text)}
#work .engagement-card:hover h3{color:var(--accent)}
@media(max-width:950px){
 .hero.wrap{height:calc(max(24svh,189px) + clamp(680px,85svh,935px));min-height:0}
 .hero-scene{min-height:800px;padding:130px 32px 0;align-items:flex-start}
 .hero-copy{width:100%}
 .hero h1{font-size:54px;max-width:13ch}
 #work .engagement-card{grid-template-columns:180px minmax(0,1fr);gap:30px}
 .engagement-art{width:180px;height:180px}
 #work .engagement-card h3{font-size:25px}
}
@media(max-width:600px){
 /* A content-height mobile hero; keep the next section close to its actions. */
 .hero.wrap{height:auto;min-height:0}
 .hero-scene{position:relative;min-height:0;height:auto;max-height:none;padding:114px 24px 24px}
 .hero h1{font-size:42px;max-width:13ch}
 .hero .eyebrow{font-size:12px;margin-bottom:22px}
 .hero-description{font-size:16px;line-height:1.65;margin:26px 0;max-width:35ch}
 #work.section{padding-top:32px}
 .hero-actions{gap:16px}
 .hero-actions .button{font-size:13px;min-height:48px}
 .hero-actions .text-link{font-size:14px}
 #work .cases{gap:34px}
 #work .engagement-card{grid-template-columns:108px minmax(0,1fr);gap:18px;align-items:start}
 .engagement-art{width:108px;height:108px;border-radius:5px}
 #work .engagement-card h3{font-size:19px;line-height:1.28;margin-bottom:10px}
 #work .engagement-card p{font-size:14px;line-height:1.6;margin-bottom:12px}
 #work .engagement-category{font-size:12px;line-height:1.4;margin-bottom:8px}
 #work .engagement-link{font-size:12px}
}
@media(max-width:370px){
 .hero-scene{padding-inline:20px}
 .hero h1{font-size:37px}
 #work .engagement-card{grid-template-columns:90px minmax(0,1fr);gap:15px}
 .engagement-art{width:90px;height:90px}
 #work .engagement-card h3{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.hero.wrap{height:auto;min-height:0}.hero-scene{position:relative}.engagement-art{transition:none}}
@media print{.hero.wrap{height:auto;min-height:0}.hero-scene{position:static;height:auto;min-height:0;padding:20px 0}.hero .surface-stage{display:none}#work .engagement-card{break-inside:avoid;grid-template-columns:100px 1fr}.engagement-art{width:100px;height:100px}}

/* Compact case-study rows: square artwork, title, then category. */
@media screen {
 #work .section-top{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;margin-bottom:40px}
 #work .section-top h2{font-size:clamp(24px,2.4vw,36px);letter-spacing:-.035em;margin:0}
 #work .section-top .section-more{flex:none}
 #work .cases{gap:28px;max-width:900px}
 #work .engagement-card{grid-template-columns:160px minmax(0,1fr);gap:32px;align-items:center}
 #work .engagement-art{width:160px;height:160px;border-radius:6px}
 #work .engagement-card h3{font-size:25px;line-height:1.3;margin:0 0 14px;max-width:30ch;font-weight:400}
 #work .engagement-category{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
}
@media screen and (max-width:600px){
 #work .section-top{gap:18px;margin-bottom:28px}
 #work .cases{gap:24px}
 #work .engagement-card{grid-template-columns:108px minmax(0,1fr);gap:18px;align-items:center}
 #work .engagement-art{width:108px;height:108px;border-radius:5px}
 #work .engagement-card h3{font-size:17px;line-height:1.3;letter-spacing:-.02em;margin:0 0 12px;max-width:none}
 #work .engagement-category{font-size:14px;line-height:1.4}
}
@media screen and (max-width:360px){
 #work .engagement-card{grid-template-columns:92px minmax(0,1fr);gap:16px}
 #work .engagement-art{width:92px;height:92px}
}

@media screen and (max-width:600px){
 .hero-copy{position:relative;text-shadow:0 2px 16px #000,0 0 4px #000}
 .hero-actions .button{text-shadow:none}
 #work .section-top{align-items:flex-start}
 #work .section-top h2{text-wrap:initial}
}