/* ------------------------------------------------------------


   Hero media performance contract


   Scope: native <picture> request gating, LCP priority, and stable geometry.


------------------------------------------------------------- */





.vh-layout-hero .vh-hero-performance-picture{


  display:block;


  width:100%;


  max-width:100%;


  min-width:0;


}





.vh-layout-hero .vh-hero-performance-picture > img{


  display:block;


  width:100%;


  max-width:100%;


  height:auto;


}





/* Main hero media keeps the same sizing behavior as the former direct img. */


.vh-layout-hero .vh-hero-media > .vh-hero-performance-picture,


.vh-layout-hero .vh-hero-wide-media .vh-hero-performance-picture,


.vh-layout-hero .vh-hero-collage-main .vh-hero-performance-picture{


  width:100%;


  height:100%;


}





.vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-media > .vh-hero-performance-picture,


.vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-media > .vh-hero-performance-picture > img,


.vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-wide-media .vh-hero-performance-picture,


.vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-wide-media .vh-hero-performance-picture > img,


.vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-collage-main .vh-hero-performance-picture,


.vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-collage-main .vh-hero-performance-picture > img{


  width:100% !important;


  height:100% !important;


  min-height:0 !important;


  object-fit:cover !important;


}





/* Video posters remain an edge-to-edge button target inside the 16:9 shell. */


.vh-layout-hero .vh-hero-video-trigger > .vh-hero-video-poster-picture{


  position:absolute;


  inset:0;


  width:100%;


  height:100%;


}





.vh-layout-hero .vh-hero-video-trigger > .vh-hero-video-poster-picture > img{


  width:100%;


  height:100%;


  object-fit:cover;


}





/* Portfolio cards previously expected a direct absolutely filling image. */


.vh-layout-hero .vh-hero-portfolio-card > .vh-hero-performance-picture{


  position:absolute;


  inset:0;


  width:100%;


  height:100%;


}





.vh-layout-hero .vh-hero-portfolio-card > .vh-hero-performance-picture > img{


  width:100% !important;


  height:100% !important;


  min-height:0 !important;


  object-fit:cover !important;


  transition:transform .2s ease;


}





.vh-layout-hero .vh-hero-portfolio-card:hover > .vh-hero-performance-picture > img,


.vh-layout-hero .vh-hero-portfolio-card:focus > .vh-hero-performance-picture > img{


  transform:scale(1.035);


}





/* Before/after images can be either normal-flow or full-card ratio media. */


.vh-layout-hero .vh-hero-before-after-card > .vh-hero-performance-picture{


  display:block;


  width:100%;


  flex:0 0 auto;


}





.vh-layout-hero .vh-hero-before-after-card > .vh-hero-performance-picture > .vh-hero-before-after-image{


  width:100% !important;


}





.vh-layout-hero[class*="vh-hero-before-after-ratio-"] .vh-hero-before-after-card--has-image > .vh-hero-performance-picture{


  position:absolute !important;


  inset:0 !important;


  z-index:0 !important;


  width:100% !important;


  height:100% !important;


}





.vh-layout-hero[class*="vh-hero-before-after-ratio-"] .vh-hero-before-after-card--has-image > .vh-hero-performance-picture > .vh-hero-before-after-image{


  position:absolute !important;


  inset:0 !important;


  width:100% !important;


  height:100% !important;


  min-height:0 !important;


  max-height:none !important;


  aspect-ratio:auto !important;


  object-fit:cover !important;


  border-radius:inherit !important;


  margin:0 !important;


}





/* Decorative hero-shell images are now native responsive images unless the


   operator explicitly enables fixed-background parallax. */


.vh-layout-hero > .vh-hero-shell-bg-media > .vh-hero-shell-bg-picture,


.vh-layout-hero > .vh-hero-shell-bg-media > .vh-hero-shell-bg-picture > img{


  width:100%;


  height:100%;


}





.vh-layout-hero > .vh-hero-shell-bg-media > .vh-hero-shell-bg-picture > img{


  object-fit:cover;


  object-position:center center;


}





/* Full-bleed background heroes use an image layer instead of CSS background


   discovery so the active viewport receives the only real request. */


.vh-layout-hero.vh-hero-has-full-bleed-image{


  position:relative;


  overflow:hidden;


}





.vh-layout-hero > .vh-hero-full-bleed-media,


.vh-layout-hero > .vh-hero-full-bleed-overlay{


  position:absolute;


  inset:0;


  pointer-events:none;


}





.vh-layout-hero > .vh-hero-full-bleed-media{


  z-index:0;


  overflow:hidden;


}





.vh-layout-hero > .vh-hero-full-bleed-media > .vh-hero-full-bleed-picture,


.vh-layout-hero > .vh-hero-full-bleed-media > .vh-hero-full-bleed-picture > img{


  width:100%;


  height:100%;


}





.vh-layout-hero > .vh-hero-full-bleed-media > .vh-hero-full-bleed-picture > img{


  object-fit:cover;


  object-position:center center;


}





.vh-layout-hero > .vh-hero-full-bleed-overlay{


  z-index:1;


  background:linear-gradient(


    90deg,


    var(--vh-hero-full-bleed-overlay-strong, rgba(7,11,21,.82)),


    var(--vh-hero-full-bleed-overlay-soft, rgba(7,11,21,.58))


  );


}





.vh-layout-hero.vh-hero-has-full-bleed-image.masthead::before,


.vh-layout-hero.vh-hero-has-full-bleed-image.masthead::after{


  z-index:2;


}





.vh-layout-hero.vh-hero-has-full-bleed-image > .container{


  position:relative;


  z-index:3;


}





.vh-layout-hero.vh-hero-has-full-bleed-image > .vh-section-transition-overlay{


  z-index:8;


}