.flex-layout.hero_video {
  padding-inline: max(1rem, calc(1 * var(--su)));
  margin-bottom: max(1rem, calc(1 * var(--su)));
}

.flex-layout.hero_video .hero-video-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 1480 / 873;
  max-height: calc(100svh - var(--pk-header-height) - 2 * max(1rem, calc(1 * var(--su))));
  border-radius: max(0.5rem, calc(0.5 * var(--su)));
  background-color: var(--ats-blue);
}


.flex-layout.hero_video .hero-video-media {
  position: absolute;
  inset: 0;
  container-type: size;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.flex-layout.hero_video .hero-video-poster,
.flex-layout.hero_video .hero-video-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border: 0;
  pointer-events: none;
}

.flex-layout.hero_video .hero-video-poster {
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: opacity 0.6s ease;
}

.flex-layout.hero_video .hero-video-frame {
  z-index: 0;
  width: max(100cqw, calc(100cqh * 16 / 9));
  height: max(100cqh, calc(100cqw * 9 / 16));
  max-width: none;
}

.flex-layout.hero_video .hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--wit) 14%, transparent) 0%,
      transparent 35%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--ats-blue) 55%, transparent),
      color-mix(in srgb, var(--ats-blue) 30%, transparent)
    );
  -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(105%);
  backdrop-filter: blur(8px) saturate(180%) contrast(105%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 65%);
  mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 65%);
}

.flex-layout.hero_video .hero-video-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-inline: max(1.5rem, calc(3.125 * var(--su)));
  padding-block: max(1.5rem, calc(3.25 * var(--su)));
}

.flex-layout.hero_video .hero-video-outro {
  width: 100%;
  margin-top: max(2.5rem, calc(6.25 * var(--su)));
}

.flex-layout.hero_video .hero-video-subtitle {
  display: flex;
  align-items: center;
  gap: max(0.5rem, calc(0.625 * var(--su)));
  margin: 0 0 max(0.5rem, calc(0.75 * var(--su)));
  color: var(--licht-grijs);
  font-size: max(0.75rem, calc(0.75 * var(--su)));
  font-weight: 400;
  line-height: 1.63;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.flex-layout.hero_video .hero-video-subtitle::before {
  content: '';
  flex-shrink: 0;
  width: max(0.5rem, calc(0.5 * var(--su)));
  aspect-ratio: 1 / 1;
  background-color: var(--ats-yellow);
}

.flex-layout.hero_video .hero-video-title {
  margin: 0;
  max-width: max(20rem, calc(75.625 * var(--su)));
  color: var(--wit);
  font-size: var(--scaling-h1-big);
  letter-spacing: -0.02em;
  line-height: 1;
}

.flex-layout.hero_video .hero-video-text {
  margin-bottom: max(1rem, calc(1.375 * var(--su)));
  max-width: max(20rem, calc(38.375 * var(--su)));
  color: var(--licht-grijs);
  font-size: max(1rem, calc(1 * var(--su)));
  line-height: 1.63;
}

.flex-layout.hero_video .hero-video-text p:last-child {
  margin-bottom: 0;
}

.flex-layout.hero_video {
  --button-border-color-2: var(--wit);
  --button-text-color-2: var(--wit);
}

.flex-layout.hero_video .pk-button-group {
  margin-top: 0;
  gap: max(0.5rem, calc(0.5 * var(--su)));
}

.flex-layout.hero_video .pk-grid-container > * {
  position: relative;
}

.flex-layout.hero_video .hero-video-scroll {
  position: absolute;
  left: 50%;
  bottom: max(1.5rem, calc(3.25 * var(--su)));
  translate: -50% 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: max(1.5rem, calc(1.5 * var(--su)));
  height: max(2rem, calc(2 * var(--su)));
  padding: 0;
  padding-top: max(0.6875rem, calc(0.6875 * var(--su)));
  border: 1px solid var(--licht-grijs);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--wit) 20%, transparent);
  color: var(--wit);
  cursor: pointer;
}

.flex-layout.hero_video .hero-video-scroll-arrow {
  display: block;
  width: max(0.5625rem, calc(0.5625 * var(--su)));
  height: auto;
  will-change: translate, opacity;
  animation: hero-video-nudge 1.6s ease-in-out infinite;
}

@keyframes hero-video-nudge {
  0%   { translate: 0 -4px; opacity: 0; }
  40%  { translate: 0 0;    opacity: 1; }
  100% { translate: 0 7px;  opacity: 0; }
}

.flex-layout.hero_video .hero-video-aside {
  position: absolute;
  right: max(1.5rem, calc(4.1875 * var(--su)));
  bottom: max(1.5rem, calc(3.25 * var(--su)));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: max(0.5rem, calc(0.75 * var(--su)));
}

.flex-layout.hero_video .hero-video-caption {
  margin: 0;
  color: var(--wit);
  font-size: max(0.75rem, calc(0.75 * var(--su)));
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.6px;
  text-align: right;
  text-transform: uppercase;
}

.flex-layout.hero_video .hero-video-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(2.8125rem, calc(2.8125 * var(--su)));
  aspect-ratio: 1 / 1;
  color: var(--licht-grijs);
  border-radius: var(--glass-radius);
  background-color: color-mix(in srgb, var(--wit) 20%, transparent);
  backdrop-filter: blur(12px);
  isolation: isolate;
  transition: background-color 0.3s ease;
  --glass-radius: max(0.5rem, calc(0.5 * var(--su)));
}

.flex-layout.hero_video .hero-video-link:hover {
  background-color: color-mix(in srgb, var(--wit) 30%, transparent);
}

.flex-layout.hero_video .hero-video-link svg {
  width: 55%;
  height: auto;
}

.flex-layout.hero_video .hero-video-link::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1px;
  padding: 1px;
  border-radius: calc(var(--glass-radius) + 1px);
  background-image:
    linear-gradient(-15deg, transparent 60%, currentColor),
    linear-gradient(150deg, transparent 50%, currentColor),
    linear-gradient(color-mix(in srgb, currentColor 16%, transparent) 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.flex-layout.hero_video .hero-video-link::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(135deg, transparent 60%, color-mix(in srgb, var(--wit) 10%, transparent));
}

@media only screen and (max-width: 991px) {
  .flex-layout.hero_video {
    padding-inline: 0;
    margin-bottom: 0;
  }

  .flex-layout.hero_video .hero-video-card {
    aspect-ratio: 3 / 4;
    border-radius: 0;
    max-height: calc(100svh - var(--pk-header-height));
  }

  .flex-layout.hero_video .hero-video-scroll {
    display: none;
  }

  .flex-layout.hero_video .hero-video-overlay {
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 35%, transparent 70%);
    mask-image: linear-gradient(0deg, #000 0%, #000 35%, transparent 70%);
  }
}

@media only screen and (max-width: 767px) {
  .flex-layout.hero_video .hero-video-aside {
    top: max(1rem, calc(1 * var(--su)));
    right: max(1rem, calc(1 * var(--su)));
    bottom: auto;
  }

  .flex-layout.hero_video .hero-video-caption {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flex-layout.hero_video .hero-video-scroll-arrow {
    animation: none;
  }
}

.flex-layout.hero_video .hero-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: max(4rem, calc(4.5 * var(--su)));
  aspect-ratio: 1 / 1;
  padding: 0;
  padding-left: 0.15em;
  border: 1px solid color-mix(in srgb, var(--wit) 45%, transparent);
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--wit) 20%, transparent);
  backdrop-filter: blur(12px);
  color: var(--wit);
  cursor: pointer;
  transition: background-color 0.3s ease, scale 0.3s ease;
}

.flex-layout.hero_video .hero-video-card.is-blocked .hero-video-play {
  display: flex;
}

.flex-layout.hero_video .hero-video-play:hover,
.flex-layout.hero_video .hero-video-play:focus-visible {
  background-color: color-mix(in srgb, var(--wit) 32%, transparent);
  scale: 1.05;
}

.flex-layout.hero_video .hero-video-play svg {
  width: 38%;
  height: auto;
}