/* Full-screen landscape hero image */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 84px);
  margin: 0;
  padding: 76px 9vw;
  overflow: hidden;
  color: #f7fbfa;
}

.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(3, 20, 37, .96) 0%, rgba(4, 25, 45, .86) 34%, rgba(4, 25, 45, .32) 66%, rgba(4, 25, 45, .08) 100%);
}

.hero-copy { max-width: 670px; }
.hero .eyebrow { color: #bde8db; }
.hero h1 em { color: #b3f0c9; }
.hero-lead { color: #e0ecec; }
.hero .text-link { color: #f7fbfa; }
.hero-proof div { border-color: rgba(214, 236, 234, .42); }
.hero-proof span { color: #c5d8d8; }

.hero-art.hero-art-wide {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: #071b32;
}

.hero-art.hero-art-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 800px) {
  .hero {
    min-height: calc(100svh - 68px);
    padding: 80px 7vw 64px;
  }

  .hero::after { background: linear-gradient(90deg, rgba(3, 20, 37, .92), rgba(4, 25, 45, .5)); }
}

@media (max-width: 500px) {
  .hero { padding: 68px 7vw 54px; }
  .hero::after { background: rgba(3, 20, 37, .76); }
}