/* Only the homepage hero uses the final animation. */
html body.home-page > .site-header { position: fixed; inset: 0 0 auto; width: 100%; }
html body.home-page main .hero {
  width: 100%; min-height: 100svh !important; height: auto !important;
  margin: 0; border: 0; border-radius: 0; box-shadow: none;
  padding: clamp(126px, 15svh, 172px) clamp(28px, 5vw, 96px) clamp(38px, 7svh, 76px) !important;
  background: #101923; align-items: stretch;
}
html body.home-page main .hero .hero-atmosphere {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: none; filter: none; opacity: 1; overflow: hidden; z-index: 0;
}
html body.home-page main .hero :is(.hero-video, .hero-fallback, .hero-fallback img) {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; object-position: center; border-radius: 0;
  background: none;
}
html body.home-page main .hero .hero-video { opacity: 0; transition: opacity .3s; }
html body.home-page main .hero .hero-video.is-playing { opacity: 1; }
html body.home-page main .hero::before {
  z-index: 1; background: linear-gradient(90deg,
    rgba(246,250,254,.97) 0%, rgba(246,250,254,.92) 24%,
    rgba(246,250,254,.80) 35%, rgba(246,250,254,.62) 44%,
    rgba(246,250,254,.12) 56%, rgba(246,250,254,0) 66%);
}
html body.home-page main .hero::after,
html body.home-page main .hero .hero-atmosphere::after { background: none; }
html body.home-page main .hero .hero-atmosphere::before { content: none; }
html body.home-page main .hero .hero-content {
  position: relative; z-index: 3; width: min(760px,44vw); min-height: 0;
  height: auto !important; justify-content: center !important;
  align-items: flex-start; row-gap: clamp(15px,2.2svh,24px);
  margin: 0; padding: 0; text-align: left; opacity: 1; transform: none;
}
html body.home-page main .hero h1 {
  max-width: 100%; color: #111820; font-size: clamp(3rem,4.55vw,5.5rem);
  line-height: 1.05; letter-spacing: -.035em; text-align: left; margin-inline: 0;
}
html body.home-page main .hero h1 span { display: block; }
html body.home-page main .hero .hero-text { max-width: min(560px,35vw); color: #1d2934; text-align: left; margin-inline: 0; }
html body.home-page main .hero :is(.eyebrow,.brand-claim,.hero-discovery,.trust-list) { color: #14394d; }
@media (max-width: 1020px) and (min-width: 841px) {
  html body.home-page main .hero .hero-content { width: 49vw; }
  html body.home-page main .hero h1 { font-size: 4.75vw; }
}
@media (max-width: 840px) {
  /* Safari also derives its toolbar tint from the page and fixed header backgrounds. */
  html:has(> body.home-page),
  html body.home-page { background: #101820; }
  html body.home-page > .site-header { background: #101820; }
  html body.home-page > main { background: var(--page); }
  html body.home-page main .hero {
    --hero-mobile-gutter: 24px;
    --hero-mobile-extension: 64px;
    min-height: calc(100svh + var(--hero-mobile-extension)) !important;
    padding: clamp(240px,44svh,460px) var(--hero-mobile-gutter) calc(36px + var(--hero-mobile-extension)) !important;
  }
  html body.home-page main .hero .hero-content {
    width: min(560px,100%); align-self: flex-end;
    justify-content: flex-end !important; row-gap: 16px;
  }
  html body.home-page main .hero :is(.hero-video,.hero-fallback img) {
    object-position: 50% top;
    transform: scale(1.1); transform-origin: 35% 22%;
  }
  html body.home-page main .hero::before {
    background: none;
  }
  /* Keep the movie visible behind the copy throughout the mobile hero. */
  html body.home-page main .hero .hero-content::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: -160px; bottom: calc(-36px - var(--hero-mobile-extension));
    left: calc(-1 * var(--hero-mobile-gutter)); width: 100vw;
    background: linear-gradient(180deg,
      rgba(5,10,18,0) 0, rgba(5,10,18,.06) 35px,
      rgba(5,10,18,.22) 80px, rgba(5,10,18,.46) 130px,
      rgba(5,10,18,.58) 160px, rgba(5,10,18,.60) 220px,
      rgba(5,10,18,.64) 100%);
  }
  html body.home-page main .hero h1 {
    color: #fff; font-size: clamp(2.5rem,7.8vw,4rem); letter-spacing: -.025em;
    text-shadow: 0 2px 20px rgba(0,0,0,.28);
  }
  html body.home-page main .hero :is(.eyebrow,.brand-claim) { color: #fff; }
  html body.home-page main .hero .brand-claim {
    border-color: rgba(255,255,255,.28); background: rgba(5,10,18,.22);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
  html body.home-page main .hero .hero-text {
    max-width: 100%; color: #f4f7fb; font-size: 1rem; line-height: 1.5;
    text-shadow: 0 1px 12px rgba(0,0,0,.24);
  }
  html body.home-page main .hero .hero-actions { width: 100%; margin-inline: 0; }
  html body.home-page main .hero .hero-actions .button { width: 100%; min-height: 56px; }
  html body.home-page main .hero .hero-actions .button-primary {
    color: #111820; background: #fff; border-color: rgba(255,255,255,.28);
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
  }
  html body.home-page main .hero :is(.hero-discovery,.trust-list) { display: none; }
  @supports (height: 100lvh) {
    /* Cover Safari's expanded viewport while keeping the copy at its svh height. */
    html body.home-page main .hero { --hero-mobile-extension: calc(64px + 100lvh - 100svh); }
  }
}
@media (max-width: 640px) {
  html body.home-page main .hero { --hero-mobile-gutter: 22px; }
  html body.home-page main .hero h1 { font-size: clamp(2.25rem,9.6vw,2.625rem); line-height: 1.04; }
  html body.home-page main .hero .hero-actions { gap: 12px; }
}
@media (max-width: 360px) {
  html body.home-page main .hero { --hero-mobile-gutter: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.home-page main .hero .hero-video { display: none; transition: none; }
}

/* Keep the brand and claim together above the homepage heading. */
html body.home-page main .hero .hero-kicker {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
html body.home-page main .hero .hero-kicker :is(.eyebrow,.brand-claim) { margin: 0; }
html body.home-page main .hero .hero-kicker .eyebrow { text-transform: none; }
html body.home-page main .hero .hero-discovery {
  width: fit-content; justify-content: flex-start;
  margin: clamp(18px,3svh,28px) 0 0;
}