.hero-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #102c35;
}

.hero-background {
  position: absolute;
  inset: -25px 0;
  z-index: 0;
  transform: translate3d(0,var(--hero-shift,0px),0);
  pointer-events: none;
}

.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 57%;
  display: block;
}

.hero-scene:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,rgba(9,30,38,.72),rgba(12,36,44,.32) 48%,rgba(12,36,44,.18)),linear-gradient(0deg,rgba(10,29,34,.38),transparent 45%);
  pointer-events: none;
}

.hero-scene .hero {
  position: relative;
  z-index: 2;
  min-height: 780px;
  padding-block: 84px 70px;
  gap: 65px;
}

.hero-scene .hero-copy {
  color: #f5f6f1;
}

.hero-scene .hero h1>span {
  color: #e1b293;
}

.hero-scene .eyebrow,
.hero-scene .hero-lead {
  color: #e0e9e5;
}

.hero-scene .small-rule {
  background: #e1b293;
}

.hero-scene .hero-note {
  color: #c7d8d4;
}

.hero-scene .hero-actions .button {
  background: #f2f5f3;
  border-color: #f2f5f3;
  color: #163a4a;
}

.hero-scene .hero-actions .button:hover {
  background: #e1b293;
  border-color: #e1b293;
}

.hero-scene .text-link {
  border-color: #a6b8b3;
  color: #f2f5f3;
}

.hero-scene :focus-visible {
  outline-color: #f2d1b9;
}

@media(max-width:1100px) {
  .hero-scene .hero {
    gap: 35px;
    min-height: 730px;
  }

  .hero-scene .hero h1 {
    font-size: 70px;
  }
}

@media(max-width:900px) {
  .hero-scene .hero {
    gap: 25px;
    min-height: 680px;
  }

  .hero-scene .hero h1 {
    font-size: 58px;
  }
}

@media(max-width:700px) {
  .hero-scene .hero {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-block: 58px 58px;
    min-height: 0;
  }

  .hero-scene .hero h1 {
    font-size: clamp(60px,12vw,84px);
  }

  .hero-background {
    inset: 0;
    transform: none!important;
  }

  .hero-background img {
    object-position: 50% 0;
  }

  .hero-scene:after {
    background: linear-gradient(180deg,#0b252dc9,#0b252dde 58%,#123340 90%);
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-background {
    transform: none!important;
  }
}

@media print {
  .hero-scene {
    background: white;
  }

  .hero-background {
    display: none;
  }

  .hero-scene:after {
    display: none;
  }

  .hero-scene .hero-copy,
  .hero-scene .hero-lead,
  .hero-scene .eyebrow {
    color: var(--ink);
  }
}

@media(max-width:700px) {
  .hero-background {
    height: 760px;
    bottom: auto;
  }

  .hero-background img {
    object-position: 50% 55%;
  }

  .hero-scene:after {
    background: linear-gradient(180deg,#0b252d99 0,#0b252d99 480px,#123340 760px);
  }
}