/* EMVY hero: forest green blending into flowing teal ribbons (cover A), with slow WebGL motion. */
.hero.hero-flow{position:relative;isolation:isolate;overflow:clip;background:var(--forest-deep)}
.hero.hero-flow,.hero.hero-flow .hero-grid{min-height:clamp(650px,calc(100svh - 88px),820px)}
.hero.hero-flow .hero-grid{grid-template-columns:minmax(0,52%) 1fr}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--forest-deep)}
.hero-bg img,.hero-bg canvas{background:var(--forest-deep);position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-bg img{object-fit:cover;object-position:68% 50%}
.hero-bg canvas{opacity:0;transition:opacity 1.2s ease}
.hero-bg.is-live canvas{opacity:1}
/* Forest green runs from the left into the image, and softly into the header above. */
.hero-bg::after{content:"";position:absolute;inset:0;background:
 linear-gradient(90deg,#04231e 0%,rgba(4,35,30,.94) 26%,rgba(4,35,30,.62) 44%,rgba(4,35,30,.18) 64%,rgba(4,35,30,0) 82%),
 linear-gradient(180deg,rgba(4,35,30,.55) 0%,rgba(4,35,30,0) 18%,rgba(4,35,30,0) 78%,rgba(4,35,30,.5) 100%)}
/* CSS fallback when WebGL is unavailable: a very slow drift of the still image. */
@media (prefers-reduced-motion:no-preference){
 .hero-bg.is-css img{animation:heroDrift 24s ease-in-out infinite alternate;will-change:transform}
 @keyframes heroDrift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-1.2%,-.8%,0)}}
}
@media (max-width:760px){
 .hero.hero-flow,.hero.hero-flow .hero-grid{min-height:0}
 .hero.hero-flow .hero-grid{grid-template-columns:1fr}
 .hero.hero-flow .hero-copy{padding-bottom:64px}
 .hero-bg img{object-position:74% 50%}
 .hero-bg::after{background:
  linear-gradient(180deg,rgba(4,35,30,.80) 0%,rgba(4,35,30,.66) 48%,rgba(4,35,30,.42) 100%),
  linear-gradient(90deg,rgba(4,35,30,.55) 0%,rgba(4,35,30,0) 100%)}
}