/* M5: same geometry and overlay, one responsive image selected before rendering. */
.hero{background-image:none}
.hero>.hero-visual{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--hero-desktop,50% 50%);z-index:0;pointer-events:none}
.hero:after{content:'';position:absolute;inset:0;background:#0006;z-index:1;pointer-events:none}
.hero>main{position:relative;z-index:2}
@media(max-width:760px){.hero>.hero-visual{object-position:var(--hero-mobile,63% 50%)}}
@media(forced-colors:active){.hero>.hero-visual,.hero:after{display:none}}

/* M8.1.1 generated light palette — scripts/build-light-palette.mjs */
@media (prefers-color-scheme: dark) and (forced-colors: none){
.hero{background-image:none;}
.hero:after{background:#0006;}
}