.work-hero{height:480px;background:#1a1a1a;position:relative;overflow:hidden}
.work-hero:before{content:'';position:absolute;inset:0;background:url('atmosphere.webp') center/cover;clip-path:polygon(17% 0,100% 0,97% 100%,11% 100%)}
.work-hero:after{content:'';position:absolute;right:0;top:0;width:27%;height:100%;background:#1a1a1a;clip-path:polygon(22% 0,100% 0,90% 100%,0 100%)}
.work-hero-inner{max-width:1060px;margin:auto;position:relative;height:100%;display:grid;grid-template-columns:650px 410px;align-items:center}
.work-hero-inner>div{z-index:2}.work-hero .eyebrow{font-size:16px;letter-spacing:5px;margin-bottom:30px}.work-hero h1{font-size:76px;margin:0 0 38px;font-weight:600}.work-hero p{font-size:22px;line-height:1.3}.work-hero img{width:410px;height:480px;object-fit:contain;object-position:bottom;align-self:end}
.work-projects{background:linear-gradient(110deg,#f7f4ef,#e1e4e5);padding:48px 35px 42px}
.work-grid{max-width:1230px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;row-gap:60px}
.work-grid article{text-align:center}.work-grid article a{text-decoration:none;display:block}.work-grid article img{width:100%;aspect-ratio:396/254;object-fit:cover;display:block}.work-grid article h2{font-size:23px;font-style:italic;font-weight:600;margin:6px 0 0;line-height:1.2}.work-grid article p{font-size:19px;line-height:1.2;margin:3px 0 0}.work-grid article a:hover h2{text-decoration:underline;text-underline-offset:4px}
#show-more{display:block;margin:24px auto 0;background:none;border:0;text-decoration:underline;text-underline-offset:3px;font-size:19px;padding:8px 20px;min-height:44px}
.work-grid [hidden]{display:none}
@media(min-width:851px) and (max-width:1400px){.work-hero-inner{max-width:900px;grid-template-columns:540px 360px}.work-hero img{width:360px}.work-grid article p{font-size:15px}}
@media(max-width:850px){.work-hero{height:auto;min-height:390px}.work-hero-inner{padding:35px 24px 0;grid-template-columns:1fr 40%;gap:0;align-items:center}.work-hero:before{clip-path:none}.work-hero:after{width:12%}.work-hero h1{font-size:50px;margin-bottom:24px}.work-hero .eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:20px}.work-hero p{font-size:14px}.work-hero p br{display:none}.work-hero img{width:100%;height:350px;object-fit:contain}.work-projects{padding:32px 24px}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}.work-grid article h2{font-size:21px}.work-grid article p{font-size:12px;line-height:1.5}}
@media(max-width:500px){.work-hero-inner{grid-template-columns:1fr;gap:0;padding-top:30px}.work-hero-inner>div{max-width:100%}.work-hero img{height:220px;object-position:right bottom}.work-hero:after{width:18%}.work-grid{grid-template-columns:1fr;gap:32px}.work-grid article h2{font-size:24px;margin-top:12px}.work-grid article p{font-size:14px}}
@media(min-width:851px) and (max-width:1400px){.work-hero-inner>div{padding-left:40px}.work-hero h1{font-size:68px}.work-hero p{font-size:20px}}
@media(max-width:500px){.work-hero:after{top:auto;bottom:0;height:220px}.work-hero-inner>div{padding-right:0;position:relative;z-index:3}.work-hero img{position:relative;z-index:1}}
@media(max-width:500px){.work-hero:after{top:auto;bottom:0;height:220px}.work-hero-inner>div{position:relative;z-index:3}}
/* Open banner with a larger portrait and no angled panels. */
.work-hero{background:url('atmosphere.webp') center/cover;height:500px}
.work-hero:before,.work-hero:after{display:none}
.work-hero-inner{max-width:1230px;padding:0 35px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:35px}
.work-hero-inner>div{padding-left:0}
.work-hero img{width:100%;height:500px;object-fit:contain;object-position:center bottom;mask-image:linear-gradient(to right,transparent 0%,black 12%,black 100%)}
.work-hero .eyebrow{white-space:normal}
@media(max-width:850px){.work-hero{height:auto;min-height:0}.work-hero-inner{padding:30px 24px 0;grid-template-columns:1fr 45%;gap:12px}.work-hero img{height:380px}.work-hero p{font-size:14px}}
@media(max-width:500px){.work-hero-inner{grid-template-columns:1fr;gap:10px}.work-hero-inner>div{padding:0}.work-hero img{height:330px;width:100%;object-position:center bottom;mask-image:none}.work-hero h1{font-size:50px}.work-hero p{line-height:1.5}}
/* Use the portrait as a large banner layer instead of a narrow image box. */
@media(min-width:851px){
 .work-hero-inner{position:static;grid-template-columns:1fr;max-width:1230px}
 .work-hero-inner>div{position:relative;z-index:2;width:55%}
 .work-hero img{position:absolute;right:max(0px,calc((100vw - 1600px)/2));top:-100px;width:min(52vw,760px);height:820px;object-fit:contain;object-position:right top;mask-image:linear-gradient(to right,transparent 0%,black 12%,black 86%,transparent 100%);pointer-events:none}
}
@media(max-width:500px){.work-hero img{height:430px;object-fit:cover;object-position:center 15%;mask-image:linear-gradient(to right,transparent 0%,black 8%,black 90%,transparent 100%)}}
