/* Keep the header, hero, and content in proportion at every desktop zoom/width. */
.site-header {
  min-height: 64px;
  height: clamp(64px, 6.5vw, 76px);
  padding-inline: clamp(18px, 4vw, 72px);
}

.brand > img {
  width: clamp(122px, 10vw, 155px);
  height: auto;
  max-height: 48px;
}

.site-header nav {
  gap: clamp(16px, 2vw, 28px);
}

.hero {
  height: clamp(500px, 66vh, 690px);
  min-height: 0;
}

.hero > img {
  width: 100%;
  height: 100%;
  object-position: center;
}

.hero-content {
  width: min(42rem, calc(100% - 48px));
  left: clamp(24px, 6vw, 110px);
}

.hero h1 {
  font-size: clamp(44px, 5.2vw, 78px);
}

.menu-shell {
  width: min(92vw, 1600px);
  max-width: none;
  box-sizing: border-box;
  padding-inline: clamp(20px, 3vw, 48px);
}

@media (min-width: 1500px) {
  .hero-content {
    left: max(6vw, calc((100vw - 1600px) / 2 + 48px));
  }
}

@media (max-width: 900px) {
  .hero {
    height: clamp(500px, 72vh, 620px);
  }

  .hero-content {
    left: clamp(20px, 5vw, 44px);
    right: clamp(20px, 5vw, 44px);
    width: auto;
  }

  .menu-shell {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .site-header {
    height: 64px;
  }

  .hero {
    height: clamp(480px, 78svh, 600px);
  }

  .hero h1 {
    font-size: clamp(40px, 13vw, 48px);
  }
}