/* web_redesign_4_v37 respin: single global hero rendering override
   Loaded after all page-local styles. Future hero sizing, positioning, masking and blend changes live here. */

.company-hero,
.company-hero.section,
.home-hero-v05,
.solutions-hero-v10,
.products-hero,
.product-hero {
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

.company-hero::before,
.company-hero::after,
.company-hero-bg::before,
.company-hero-bg::after,
.home-hero-v05::before,
.home-hero-v05::after,
.home-hero-v05 .home-hero-bg-v05::before,
.home-hero-v05 .home-hero-bg-v05::after,
.solutions-page-v10 .solutions-hero-bg-v10::before,
.solutions-page-v10 .solutions-hero-bg-v10::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.company-hero .section-inner,
.home-hero-v05 .section-inner,
.solutions-hero-v10 .section-inner {
  position: relative !important;
  z-index: 5 !important;
}

/* Shared non-home hero layer: Technology, Company, Contact and solution-detail pages.
   Page-local styles may set --v65-hero-image. They must not control fit, position or masks. */
.company-hero-bg {
  position: absolute !important;
  inset: -70px 0 -90px 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: -70px !important;
  bottom: -90px !important;
  width: auto !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: calc(100% + 160px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: .88 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--v65-hero-image, url('../images/home-hero.png')) right top / cover no-repeat !important;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.78) 3%, #000 9%, #000 100%),
    linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.90) 78%, rgba(0,0,0,.45) 88%, transparent 100%) !important;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.78) 3%, #000 9%, #000 100%),
    linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.90) 78%, rgba(0,0,0,.45) 88%, transparent 100%) !important;
  mask-composite: intersect !important;
  -webkit-mask-composite: source-in !important;
}

/* Full-bleed home/solutions hero layers keep their existing image source but share the same fit/anchor/masks. */
.home-hero-v05 .home-hero-bg-v05,
.solutions-page-v10 .solutions-hero-bg-v10,
.products-hero .products-hero-bg,
.product-hero .product-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  background-size: cover !important;
  background-position: right top !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
}

.home-hero-v05 .home-hero-bg-v05,
.solutions-page-v10 .solutions-hero-bg-v10 {
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.82) 3%, #000 9%, #000 100%),
    linear-gradient(to bottom, #000 0%, #000 76%, rgba(0,0,0,.95) 84%, rgba(0,0,0,.64) 92%, transparent 100%) !important;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.82) 3%, #000 9%, #000 100%),
    linear-gradient(to bottom, #000 0%, #000 76%, rgba(0,0,0,.95) 84%, rgba(0,0,0,.64) 92%, transparent 100%) !important;
  mask-composite: intersect !important;
  -webkit-mask-composite: source-in !important;
}

@media (max-width: 980px) {
  .company-hero-bg,
  .home-hero-v05 .home-hero-bg-v05,
  .solutions-page-v10 .solutions-hero-bg-v10,
  .products-hero .products-hero-bg,
  .product-hero .product-hero-bg {
    inset: 0 !important;
    width: auto !important;
    min-width: 100% !important;
    min-height: 100% !important;
    background-size: cover !important;
    background-position: right top !important;
  }
}

/* v37 respin 2: Company hero local styles carried a stronger .about-page .company-hero-bg rule
   with a left-side dark gradient. Override it from the global hero control file so Company
   uses the same full-width image treatment as Home, Solutions and Technology. */
body.about-page.company-page .company-hero,
body.about-page.company-page .company-hero.section {
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
  isolation: isolate !important;
}

body.about-page.company-page .company-hero::before,
body.about-page.company-page .company-hero::after,
body.about-page.company-page .company-hero-bg::before,
body.about-page.company-page .company-hero-bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.about-page.company-page .company-hero-bg {
  position: absolute !important;
  inset: -70px 0 -90px 0 !important;
  width: auto !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: calc(100% + 160px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: .88 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: url('../images/company-hero.png') right top / cover no-repeat !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.94) 84%, rgba(0,0,0,.58) 93%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.94) 84%, rgba(0,0,0,.58) 93%, transparent 100%) !important;
}