/* Homepage hero: contained cinematic artwork, centred copy and a transparent lower edge. */
.hero-landing {
  isolation: isolate;
  background: #000;
  min-height: 940px;
  margin-top: calc(var(--header-offset, 155px) * -1);
  padding: clamp(390px, 34vw, 475px) 0 190px;
}
.hero-backdrop {
  position: absolute; top: 23px; bottom: auto; left: 50%; z-index: -1; pointer-events: none;
  width: min(100%, 1600px); height: auto; aspect-ratio: 1600 / 686;
  transform: translateX(-50%);
  opacity: var(--hero-image-opacity, 1);
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 66%, #000c 79%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 66%, #000c 79%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
.hero-backdrop img {
  display: block; width: 100%; height: auto; object-fit: contain; object-position: center top;
  filter: saturate(1.22) contrast(1.06) brightness(1.08);
}
.hero-landing::before {
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 0%, #00000010 48%, #00000070 72%, transparent 94%),
    radial-gradient(ellipse 42% 78% at -2% 34%, #d44d943d 0%, #d44d941f 42%, transparent 74%),
    radial-gradient(ellipse 46% 82% at 102% 68%, #d1fe172b 0%, #d1fe1715 43%, transparent 76%),
    radial-gradient(ellipse at 50% 57%, #00000028, transparent 62%);
}
.hero-landing .hero-layout { display: block; position: relative; z-index: 1; }
.hero-landing .hero-inner {
  max-width: 1180px; margin-inline: auto; justify-items: center;
  text-align: center; gap: 26px;
}
.hero-landing h1 {
  max-width: 1200px; font-size: clamp(3.25rem, 5.4vw, 5.25rem);
  font-weight: 800; letter-spacing: -.065em; line-height: 1.02;
  text-shadow: 0 3px 26px #000d, 0 1px 3px #000;
}
.hero-landing .gradient-text {
  text-shadow: none;
  filter: drop-shadow(0 3px 8px #000c);
}
.hero-heading-line {
  display: block; white-space: nowrap; transform-origin: 50% 100%;
  animation: hero-heading-arrive 1.45s cubic-bezier(.16, 1, .3, 1) .08s both !important;
}
.hero-heading-line + .hero-heading-line { animation-delay: .26s !important; }
@keyframes hero-heading-arrive {
  0% { opacity: 0; transform: translate3d(0, 82px, 0) scale(.92); filter: blur(18px); clip-path: inset(0 0 100% 0); }
  55% { opacity: 1; filter: blur(1px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); clip-path: inset(0); }
}
.hero-landing .lede { animation: hero-support-arrive 1s cubic-bezier(.16, 1, .3, 1) .62s both; }
.hero-landing .hero-ctas { animation: hero-support-arrive 1s cubic-bezier(.16, 1, .3, 1) .76s both; }
@keyframes hero-support-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-landing .lede {
  max-width: 900px; margin-inline: auto; color: #d9d7dc;
  font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.8;
  text-shadow: 0 2px 16px #000;
}
.hero-landing .hero-ctas { justify-content: center; }
@media (max-width: 960px) {
  .hero-landing { min-height: 940px; padding: 390px 0 190px; }
  .hero-landing h1 { font-size: clamp(3rem, 7.2vw, 4.65rem); }
  .hero-landing .hero-backdrop { width: min(1120px, 132%); }
}
@media (max-width: 600px) {
  .hero-landing { min-height: 900px; padding: 310px 0 150px; }
  .hero-landing h1 { font-size: clamp(2.45rem, 9.2vw, 3.35rem); }
  .hero-heading-line { white-space: normal; }
  .hero-landing .hero-inner { gap: 24px; }
  .hero-landing .hero-ctas { width: 100%; gap: 12px; }
  .hero-landing .hero-ctas .btn { flex: 1 1 220px; }
  .hero-landing .hero-backdrop { width: 176%; }
  .hero-landing .hero-backdrop img { filter: saturate(1.2) contrast(1.05) brightness(1.06); }
  .hero-landing::before {
    background:
      linear-gradient(180deg, transparent 0%, #00000016 43%, #00000070 72%, transparent 94%),
      radial-gradient(ellipse 72% 65% at -10% 34%, #d44d9433, transparent 72%),
      radial-gradient(ellipse 74% 68% at 110% 66%, #d1fe1724, transparent 74%);
  }
}