/* Full-hero motion, with the existing portfolio typography layered above it. */
.compact-hero{position:relative;isolation:isolate;overflow:hidden}
.compact-hero>.motion-container.ux-hero-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important;margin:0!important;z-index:0;pointer-events:none;mix-blend-mode:normal}
.compact-hero>.motion-container iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.compact-hero .site-nav{position:relative;z-index:3}
.compact-hero .hero-content{position:relative;z-index:1;pointer-events:none}
.compact-hero .compact-copy,.compact-hero .hero-content a{pointer-events:auto}
.motion-review-label{position:absolute;bottom:18px;right:32px;z-index:4;display:flex;align-items:center;gap:12px;font:9px/1.4 Arial,sans-serif;color:#b8c7bd;letter-spacing:.09em;text-transform:uppercase}
.motion-review-label a,.motion-review-label button{color:inherit;background:#121a16aa;border:1px solid #a5b9a23a;border-radius:20px;padding:7px 12px;cursor:pointer;font:inherit;text-decoration:none}
@media(max-width:800px){.compact-hero .hero-content{padding-top:100px;padding-bottom:90px}.compact-hero .compact-copy{display:contents}.motion-review-label{bottom:18px;right:20px;left:20px;justify-content:center;font-size:8px;gap:7px}}
/* Mobile artwork sits above the headline, fading gently behind its first lines. */
@media(max-width:800px){
 .compact-hero>.motion-container.ux-hero-art{inset:65px 0 auto!important;height:420px!important;mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%)}
 .compact-hero .hero-content{padding-top:290px;padding-bottom:85px}
}

.contours-copy-review .compact-copy .tagline{font-size:clamp(38px,3.65vw,56px);line-height:1.12;max-width:650px;text-wrap:balance}
.contours-copy-review .compact-copy .tagline em{white-space:normal}
@media(max-width:800px){.contours-copy-review .compact-copy .tagline{font-size:8.7vw;line-height:1.2;max-width:100%}}

/* Bring the mobile animation and introduction higher together. */
@media(max-width:800px){
 .contours-copy-review .compact-hero>.motion-container.ux-hero-art{inset:0 0 auto!important;height:300px!important}
 .contours-copy-review .compact-hero .hero-content{padding-top:115px;padding-bottom:36px}
 .contours-copy-review .motion-review-label{display:none}
}

/* Production homepage hides review controls and closes their desktop gap. */
.contours-copy-review .motion-review-label{display:none}
@media(min-width:801px){
 .contours-copy-review .compact-hero .hero-content{height:auto;min-height:0;padding-top:86px;padding-bottom:40px}
 .contours-copy-review .compact-hero .compact-copy{top:0}
}

/* Keep the role descriptor on a single line at every size. */
.compact-copy .hero-roles{white-space:nowrap;max-width:none;letter-spacing:.12em}
@media(max-width:800px){.compact-copy .hero-roles{font-size:clamp(9px,3vw,14px);letter-spacing:.025em;width:100%;max-width:100%}}

/* Let the mobile introduction use the full headline column. */
@media(max-width:800px){.compact-copy .hero-description{width:100%;max-width:100%;text-wrap:wrap}}