/* Height-aware desktop layout: keep the whole hero, CTAs and facts above the fold on laptops. */
@media (min-width: 1000px) and (max-height: 950px) {
  .site-header {
    height: 78px;
  }

  .hero-main {
    height: clamp(445px, calc(100vh - 170px), 630px);
    height: clamp(445px, calc(100svh - 170px), 630px);
    min-height: 0;
  }

  .hero-copy {
    height: 100%;
    padding-top: clamp(22px, 3.5vh, 32px);
  }

  .hero-eyebrow {
    font-size: clamp(21px, 2.3vh, 25px);
    line-height: 1.35;
  }

  .hero h1 {
    font-size: clamp(35px, 3vw, 42px);
    line-height: 1.24;
    margin-top: clamp(28px, 5vh, 42px);
  }

  .hero-actions {
    top: auto;
    bottom: 22px;
  }

  .portrait-composition {
    width: min(43vw, 520px);
    height: calc(100% - 4px);
    top: 4px;
    right: -16px;
  }

  .portrait-ring {
    width: min(100%, calc(100% - 16px));
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
  }

  .portrait-ring::before {
    inset: 24px;
  }

  .hero-portrait {
    height: calc(100% - 3px);
  }

  .name-badge {
    width: 315px;
    min-height: 66px;
    padding: 9px 16px;
    right: 28px;
    bottom: 6px;
  }

  .name-badge strong {
    font-size: 18px;
    line-height: 24px;
  }

  .name-badge span {
    font-size: 14px;
    margin-top: 2px;
  }

  .hero-facts {
    padding-top: 14px;
    padding-bottom: 16px;
  }

  .hero-facts dt {
    min-width: 96px;
    font-size: 36px;
  }

  .hero-facts dd {
    font-size: 14px;
    line-height: 19px;
  }
}

@media (min-width: 1000px) and (max-height: 690px) {
  .hero h1 {
    font-size: clamp(33px, 2.85vw, 39px);
  }

  .hero-actions {
    bottom: 18px;
  }

  .hero-facts {
    padding-top: 11px;
    padding-bottom: 12px;
  }
}