/* Infobec: a single video frame with readable, selectable text. */
#infobec-site .hero--film {
  padding-block: 22px;
}
#infobec-site .hero--film::before { display: none; }
#infobec-site .hero--film .hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-inline: 48px;
  background: var(--ink);
  border: 1px solid #8cc8ec35;
}
#infobec-site .hero--film .hero-media,
#infobec-site .hero--film .hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
#infobec-site .hero--film #brand-film {
  position: absolute;
  top: 0;
  left: 30%;
  width: 80%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  background: #fff;
}
#infobec-site .hero--film .hero-shade {
  background:
    linear-gradient(0deg, #071f32 0%, #071f32e8 12%, #071f3200 38%),
    linear-gradient(180deg, #071f32d9 0%, #071f3200 27%),
    linear-gradient(90deg, #071f32 0%, #071f32fc 32%, #071f32ed 41%, #071f3280 48%, #071f3200 57%);
}
#infobec-site .hero--film .film-top {
  position: absolute;
  top: 28px;
  left: 48px;
  right: 48px;
  padding: 0;
  color: #dae9f2;
  font-size: 11px;
}
#infobec-site .hero--film .film-top > .film-tagline {
  display: inline;
  font-size: inherit;
  letter-spacing: normal;
}
#infobec-site .hero--film .hero-copy {
  position: relative;
  width: 50%;
  max-width: 540px;
  padding-block: 112px 140px;
}
#infobec-site .hero--film .hero-copy > .eyebrow { margin-bottom: 23px; }
#infobec-site .hero--film h1 {
  font-size: clamp(44px, 4.7vw, 72px);
  line-height: 1.04;
}
#infobec-site .hero--film .hero-lead {
  max-width: 430px;
  margin-top: 24px;
  font-size: 18px;
}
#infobec-site .hero--film .hero-description {
  max-width: 480px;
  color: #d0dfe9;
  line-height: 1.8;
}
#infobec-site .hero--film .hero-actions {
  gap: 18px;
  margin-top: 26px;
}
#infobec-site .hero--film .hero-actions .button {
  padding: 15px 20px;
  font-size: 13px;
  gap: 20px;
}
#infobec-site .hero--film .hero-caption {
  position: absolute;
  right: 48px;
  bottom: 112px;
  max-width: 310px;
  text-align: right;
}
#infobec-site .hero--film .film-bottom {
  display: block;
  padding: 0;
  background: transparent;
  color: #d0dfe9;
  font-size: 12px;
}
#infobec-site .hero--film .film-duration { display: none; }
#infobec-site .hero--film .visual-note {
  display: block;
  margin: 17px 0 0;
  color: #d0dfe9;
  font-size: 11px;
}
#infobec-site .hero--film .visual-note > span { display: none; }
#infobec-site .hero--film .hero-strip {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 0;
  padding-block: 22px;
  border-color: #a3c8df40;
  color: #d0dfe9;
  font-size: 11px;
}
#infobec-site .hero--film .film-play {
  position: absolute;
  inset: 18px 32px auto auto;
  z-index: 2;
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 0;
  border: 1px solid #c1d7e75c;
  border-radius: 3px;
  background: #071f32e8;
  color: #fff;
}
#infobec-site .hero--film .film-play:hover { background: #103349; }
#infobec-site .hero--film .film-control {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 10px 13px;
}
#infobec-site .hero--film .film-play.is-playing .film-control { opacity: 1; }

@media (max-width: 1160px) and (min-width: 901px) {
  #infobec-site .hero--film .hero-stage { padding-inline: 34px; }
  #infobec-site .hero--film .film-top { left: 34px; right: 34px; }
  #infobec-site .hero--film .hero-copy { width: 51%; padding-block: 104px 125px; }
  #infobec-site .hero--film h1 { font-size: 51px; }
  #infobec-site .hero--film .hero-caption { right: 34px; max-width: 265px; }
  #infobec-site .hero--film .hero-strip { left: 34px; right: 34px; }
}
@media (max-width: 900px) {
  #infobec-site .hero--film { padding-block: 12px; }
  #infobec-site .hero--film .hero-stage { padding-inline: 32px; }
  #infobec-site .hero--film .hero-copy {
    width: 100%;
    max-width: 590px;
    margin-inline: auto;
    padding-block: 96px 462px;
  }
  #infobec-site .hero--film h1 { font-size: clamp(44px, 7.6vw, 66px); }
  #infobec-site .hero--film .hero-description { max-width: 560px; font-size: 15px; }
  #infobec-site .hero--film .hero-actions { flex-direction: row; align-items: center; }
  #infobec-site .hero--film .hero-media {
    top: auto;
    bottom: 146px;
    height: 300px;
  }
  #infobec-site .hero--film #brand-film { left: -20%; width: 140%; }
  #infobec-site .hero--film .hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #071f32 0%, #071f3200 25%, #071f3200 62%, #071f32 80%);
  }
  #infobec-site .hero--film .hero-shade { display: none; }
  #infobec-site .hero--film .film-top { left: 32px; right: 32px; top: 28px; }
  #infobec-site .hero--film .hero-caption {
    left: 32px;
    right: 32px;
    bottom: 118px;
    max-width: none;
    text-align: center;
  }
  #infobec-site .hero--film .visual-note { margin-top: 12px; }
  #infobec-site .hero--film .hero-strip { left: 32px; right: 32px; }
  #infobec-site .hero--film .film-play { right: 20px; }
}
@media (max-width: 540px) {
  #infobec-site .hero--film .hero-stage { width: calc(100% - 24px); padding-inline: 22px; }
  #infobec-site .hero--film .hero-copy { padding-top: 106px; }
  #infobec-site .hero--film .hero-copy > .eyebrow { font-size: 9px; margin-bottom: 22px; }
  #infobec-site .hero--film h1 { font-size: clamp(37px, 9.7vw, 51px); }
  #infobec-site .hero--film .hero-lead { font-size: 17px; }
  #infobec-site .hero--film .hero-description { font-size: 14px; }
  #infobec-site .hero--film .hero-actions { flex-direction: column; align-items: flex-start; gap: 13px; }
  #infobec-site .hero--film .film-top { left: 22px; right: 22px; top: 24px; font-size: 10px; }
  #infobec-site .hero--film .film-play { top: 49px; right: 22px; min-height: 44px; }
  #infobec-site .hero--film .hero-caption { left: 22px; right: 22px; }
  #infobec-site .hero--film .hero-strip {
    left: 22px;
    right: 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    font-size: 10px;
    gap: 4px 12px;
  }
  #infobec-site .hero--film .hero-strip > span { display: block; grid-column: 1; }
  #infobec-site .hero--film .hero-strip > span:nth-child(3) { display: block; }
  #infobec-site .hero--film .hero-strip > a { grid-column: 2; grid-row: 1 / 4; margin-left: auto; }
}