/* Full viewport introduction. Load after style.css. */
.hero {
  --hero-image-x: 50%;
  --hero-header-height: 96px;
  --hero-footer-height: 48px;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  max-height: none;
}
.hero-art { background-position: var(--hero-image-x) center; }
.hero-inner {
  position: absolute;
  inset: 0;
  height: auto;
  padding: var(--hero-header-height) 8% calc(var(--hero-footer-height) + 24px);
  display: flex;
  align-items: center;
}
.hero-copy { padding-top: 0; }
.hero h1 { font-size: clamp(48px, 7vw, 96px); }
.scroll-cue { left: auto; right: 8%; bottom: calc(var(--hero-footer-height) + 24px); }
.hero-bottom { height: var(--hero-footer-height); }
.mobile-menu:not([hidden]) {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(96px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 800px) {
  .hero { --hero-image-x: 75%; --hero-header-height: 80px; }
  .hero-inner {
    align-items: center;
    padding: var(--hero-header-height) 6% calc(var(--hero-footer-height) + 48px);
  }
  .hero-copy { max-width: min(430px, 100%); }
  .hero h1 { font-size: clamp(42px, 12vw, 60px); }
  .scroll-cue { right: 6%; bottom: calc(var(--hero-footer-height) + 24px); }
  .mobile-menu:not([hidden]) { padding-top: calc(104px + env(safe-area-inset-top, 0px)); }
}

/* Keep the principal copy and action on screen when a phone is held sideways. */
@media (max-height: 600px) {
  .hero { --hero-header-height: 64px; --hero-footer-height: 32px; }
  .header { height: 64px; }
  .hero-inner { padding-top: var(--hero-header-height); padding-bottom: calc(var(--hero-footer-height) + 8px); }
  .hero h1 { font-size: clamp(36px, 7vh, 60px); margin: 12px 0; }
  .hero-description { font-size: 14px; line-height: 20px; margin-bottom: 16px; max-width: 430px; }
  .hero-note { margin-top: 12px; }
  .hero .button { padding: 10px 16px; }
  .scroll-cue { display: none; }
  .mobile-menu:not([hidden]) { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
  .mobile-menu nav { gap: 16px; font-size: 20px; }
}
@media (max-height: 420px) {
  .hero { --hero-header-height: 48px; --hero-footer-height: 24px; }
  .header { height: 48px; }
  .logo { font-size: 20px; }
  .logo-symbol { font-size: 24px; }
  .hero h1 { font-size: clamp(30px, 8vh, 42px); line-height: 1; margin: 8px 0; }
  .hero-description { margin-bottom: 8px; }
  .hero-note { margin-top: 8px; }
  .hero-bottom { font-size: 10px; }
  .eyebrow { font-size: 10px; }
  .eyebrow-star { font-size: 16px; }
  .hero .button { padding: 8px 12px; gap: 24px; }
  .mobile-menu:not([hidden]) { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
}
/* At extreme zoom/very small windows, preserve keyboard access to all hero controls. */
@media (max-height: 290px) {
  .hero-inner { overflow-y: auto; align-items: flex-start; }
  .hero-note, .hero-bottom { display: none; }
}