.about-hero-hover-loop {
  --about-hero-height: clamp(560px, 42vw, 760px);
  position: relative;
}

.about-hero {
  position: relative;
  width: 100%;
  height: var(--about-hero-height);
  overflow: hidden;
  isolation: isolate;
  background: #070f2c;
  color: #fff;
}

.about-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #070f2c;
}

.about-hero__poster,
.about-hero__video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

.about-hero__video { opacity: 0; transition: opacity .3s ease; }
.about-hero.is-video-ready .about-hero__video { opacity: 1; }

.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #070f2c 0%, rgba(7, 15, 44, .94) 10%, rgba(7, 15, 44, .54) 28%, transparent 60%);
}

.about-hero__content {
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.about-hero__copy { width: 43%; }

.about-hero .about-hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(46px, 5.2vw, 76px) !important;
  line-height: 1.07 !important;
  letter-spacing: -.045em !important;
  font-weight: 400 !important;
}

.about-hero__title strong { font-weight: 700; }

.about-hero__description {
  max-width: 460px;
  margin: 24px 0 0;
  color: #e1e7f7;
  font: 600 20px/1.55 'Manrope', sans-serif;
}

.about-hero__summary {
  max-width: 455px;
  margin: 16px 0 0;
  color: #c9d5e8;
  font: 400 16px/1.55 'Inter', sans-serif;
}

@media (min-width: 1200px) {
  .about-hero__copy { width: 58%; }
  .about-hero__description { max-width: none; white-space: nowrap; font-size: 18px; }
  .about-hero__summary { max-width: min(760px, 54vw); }
  .about-hero__poster,
  .about-hero__video {
    left: auto;
    width: 90%;
  }
}

@media (max-width: 1199px) {
  .about-hero__summary-break { display: none; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .about-hero-hover-loop { --about-hero-height: clamp(420px, 47vw, 560px); }
  .about-hero__content { align-items: center; padding-top: 0; }
  .about-hero__copy { width: 44%; }
  .about-hero .about-hero__title { font-size: clamp(40px, 5.2vw, 60px) !important; }
  .about-hero__title strong { display: block; }
  .about-hero__description { max-width: none; margin-top:18px; font-size:16px; line-height:1.5; }
  .about-hero__summary { max-width: none; margin-top:12px; font-size:15px; line-height:1.55; }
  .about-hero__media { top: 0; }
  .about-hero__poster, .about-hero__video { object-fit:contain; object-position:right bottom; }
  .about-hero::after {
    background: linear-gradient(90deg, #070f2c 12%, rgba(7,15,44,.5) 32%, rgba(7,15,44,0) 55%);
  }
}

@media (hover: none), (pointer: coarse) {
  .about-hero__video { display: none; }
}

@media (max-width: 767px) {
  .about-hero-hover-loop { --about-hero-height: clamp(590px, calc(100vw + 190px), 620px); }
  .about-hero__content { align-items: flex-start; padding-top: 40px; }
  .about-hero__copy { width: 100%; }
  .about-hero .about-hero__title { font-size: clamp(38px, 9.5vw, 48px) !important; }
  .about-hero__description { max-width: 390px; margin-top: 20px; font-size: 16px; line-height: 1.5; }
  .about-hero__summary { max-width: 390px; margin-top: 12px; font-size: 14px; line-height: 1.5; }
  .about-hero__media { top: 250px; }
  .about-hero__poster { object-position: right bottom; }
  .about-hero__video { display: none; }
  .about-hero::after {
    background: linear-gradient(180deg, #070f2c 0%, #070f2c 32%, rgba(7,15,44,.5) 42%, transparent 53%);
  }
}

/* Desktop: same banner height as the home page (150px shorter).
   The video keeps its original size, so nothing is scaled down - the extra is just cropped. */
@media (min-width: 1200px) {
  section.about-hero { height: clamp(410px, calc(42vw - 150px), 610px); }
  /* About: crop from the top (keep a little headroom above the head) */
  section.about-hero:not(.contact-hero) .about-hero__poster,
  section.about-hero:not(.contact-hero) .about-hero__video {
    top: auto; bottom: -30px; height: clamp(560px, 42vw, 760px);
  }
  /* Contact: crop evenly from the top and the bottom */
  section.contact-hero .about-hero__poster,
  section.contact-hero .about-hero__video {
    top: 50%; bottom: auto; left: auto; right: 0;
    height: clamp(500px, calc(42vw - 60px), 700px); width: auto; aspect-ratio: 16 / 9;
    object-fit: cover; transform: translateY(-50%);
    /* fade the video's left edge into the banner so its border never shows */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%);
  }
}

@media (min-width: 1200px) {
  section.contact-hero::after {
    background: linear-gradient(90deg,
      #070f2c 0%, #070f2c 14%, rgba(7,15,44,.97) 20%, rgba(7,15,44,.9) 26%,
      rgba(7,15,44,.78) 32%, rgba(7,15,44,.62) 38%, rgba(7,15,44,.45) 44%,
      rgba(7,15,44,.28) 50%, rgba(7,15,44,.14) 56%, rgba(7,15,44,.05) 61%, rgba(7,15,44,0) 66%) !important;
  }
}