/*
 * Top page hero. Replaces the Slider Revolution slider "slider1" (one slide) with the same image, text and layout.
 * Layout grid: 1240 x 868, scaled down below 1240px wide (1cqw = 1% of the hero width). Text shows from 750px up.
 */
.top-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1240 / 868;
  max-height: 868px;
  overflow: hidden;
  background: #e7e7e7;
  container-type: inline-size;
}

.top-hero .top-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.top-hero__shade,
.top-hero__grid {
  display: none;
}

@media only screen and (min-width: 750px) {
  .top-hero__shade,
  .top-hero__grid {
    display: block;
  }
}

.top-hero__shade {
  position: absolute;
  top: 58.986%;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(219, 221, 222, 0) 0%, rgba(175, 177, 178, 0) 20%, rgba(131, 133, 133, .6) 40%, rgba(0, 0, 0, .6) 100%);
}

.top-hero__grid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(1240px, 100%);
  transform: translateX(-50%);
}

.top-hero__grid > div {
  position: absolute;
  margin: 0;
  color: #fff;
  font-family: "Open Sans";
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.top-hero__catch {
  top: 43.203%;
  left: 5.968%;
  box-sizing: border-box;
  width: 93.952%;
  height: min(42px, 3.387cqw);
  padding-left: min(14px, 1.129cqw);
  font-size: min(16px, 1.29cqw);
  line-height: min(40px, 3.226cqw);
  background: linear-gradient(90deg, #fff 0%, #fff 40%, rgba(255, 255, 255, 0) 100%);
}

.top-hero__grid > .top-hero__catch {
  color: #f0091b;
}

.top-hero__sub {
  top: 50.576%;
  left: 5.726%;
  font-size: min(24px, 1.935cqw);
  line-height: min(30px, 2.419cqw);
}

.top-hero__title {
  top: 54.839%;
  left: 5.726%;
  font-size: min(60px, 4.839cqw);
  line-height: min(60px, 4.839cqw);
}

.top-hero__reg {
  position: absolute;
  top: max(-7px, -.565cqw);
  left: 100%;
  margin-left: min(5px, .403cqw);
  font-size: min(35px, 2.823cqw);
  font-weight: 400;
  line-height: min(22px, 1.774cqw);
}

.top-hero__lead {
  top: 65.553%;
  left: 6.048%;
  font-size: min(20px, 1.613cqw);
  line-height: min(22px, 1.774cqw);
}

.top-hero__grid > .top-hero__lead--2 {
  top: 69.585%;
  left: 5.806%;
}

/* Entrance, roughly following the old slider's timing */
@keyframes top-hero-fade {
  from { opacity: 0; }
}

@keyframes top-hero-rise {
  from { opacity: 0; transform: translateY(40%); }
}

@media (prefers-reduced-motion: no-preference) {
  .top-hero__shade,
  .top-hero__catch {
    animation: top-hero-fade .3s ease-out both;
  }

  .top-hero__sub {
    animation: top-hero-rise 1.2s cubic-bezier(.16, 1, .3, 1) both;
  }

  .top-hero__title {
    animation: top-hero-rise 1.6s .2s cubic-bezier(.16, 1, .3, 1) both;
  }

  .top-hero__reg {
    animation: top-hero-fade .3s 1.98s both;
  }

  .top-hero__lead {
    animation: top-hero-fade .7s 2.16s ease-out both;
  }
}