.home-adnoc-facility .adnoc-strip {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.4vw, 1.4rem);
  margin-bottom: clamp(1.4rem, 2.4vw, 2.25rem)
}

.home-adnoc-facility .adnoc-strip img {
  display: block;
  width: auto;
  height: clamp(44px, 3.9vw, 76px)
}

.home-adnoc-facility .adnoc-strip i {
  align-self: stretch;
  width: 1px;
  background: #ffffff59
}

.home-adnoc-facility .adnoc-strip span {
  max-width: 7rem;
  font-size: var(--type-overline-size);
  font-weight: var(--type-overline-weight);
  line-height: 1.5;
  letter-spacing: var(--type-overline-tracking);
  text-transform: uppercase;
  color: var(--lime)
}

@media(prefers-reduced-motion:no-preference) {
  .home-adnoc-facility .adnoc-strip {
    animation: hero-rise 1.2s var(--motion-ease) .5s backwards
  }
}

@media(max-width:600px) {
  .home-adnoc-facility .adnoc-strip {
    margin-bottom: 1.1rem
  }

  .home-adnoc-facility .adnoc-strip img {
    height: 40px
  }
}

/* Photo and shading. */
.home-adnoc-facility .hero-background img {
  object-position: 100% 42%
}

.home-adnoc-facility .hero-background:after {
  background:
    linear-gradient(90deg, rgba(27, 11, 86, .95) 0%, rgba(27, 11, 86, .84) 28%, rgba(27, 11, 86, .38) 58%, rgba(27, 11, 86, 0) 80%),
    linear-gradient(180deg, rgba(27, 11, 86, .6) 0%, rgba(27, 11, 86, 0) 20%),
    linear-gradient(0deg, rgba(27, 11, 86, .5) 0%, rgba(27, 11, 86, 0) 30%)
}

@media(max-width:1000px) {
  .home-adnoc-facility .hero-background img {
    object-position: 100% 42%
  }

  .home-adnoc-facility .hero-background:after {
    background: linear-gradient(90deg, rgba(27, 11, 86, .9) 0%, rgba(27, 11, 86, .6) 70%, rgba(27, 11, 86, .35) 100%),
      linear-gradient(0deg, rgba(27, 11, 86, .6) 0%, rgba(27, 11, 86, 0) 35%)
  }
}

@media(max-width:600px) {
  .home-adnoc-facility .hero-background:after {
    background: linear-gradient(180deg, rgba(27, 11, 86, .62) 0%, rgba(27, 11, 86, .8) 38%, rgba(27, 11, 86, .84) 72%, rgba(27, 11, 86, .9) 100%)
  }
}

/* Entrance: the photo is held back until it has actually loaded (body.img-ready, set in the page),
   then fades in while zooming out to its resting scale. Same easing as the rest of the banner.
   The page loader pauses all animations, so this starts when the loader opens. */
.home-adnoc-facility .hero-background>img {
  opacity: 0
}

.home-adnoc-facility.img-ready .hero-background>img {
  opacity: 1;
  animation: hero-photo-in 2.2s var(--motion-ease) both
}

@keyframes hero-photo-in {
  from {
    opacity: 0;
    scale: 1.26
  }

  to {
    opacity: 1;
    scale: 1.1
  }
}

@supports(animation-timeline:view()) {
  .home-adnoc-facility.img-ready .hero-background>img {
    animation: hero-photo-in 2.2s var(--motion-ease) both, hero-drift linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 100vh
  }
}

@media(prefers-reduced-motion:reduce) {
  .home-adnoc-facility .hero-background>img {
    opacity: 1;
    animation: none
  }
}