/* The title and the interactive portrait share one responsive stage. */
@media (min-width: 901px) {
  .hero-grid {
    box-sizing: border-box;
    width: min(92%, 2800px);
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(20px, 2.5vw, 80px);
    align-items: center;
    padding: clamp(120px, 8vh, 180px) 0 clamp(80px, 7vh, 160px);
  }

  .hero-copy {
    width: 100%;
    max-width: none;
  }

  .hero h1 {
    font-size: clamp(72px, 8.7vw, 245px);
    line-height: 1.025;
    margin-bottom: clamp(24px, 2vw, 52px);
  }

  .hero h1 em {
    white-space: nowrap;
  }

  .hero-copy .eyebrow {
    font-size: clamp(11px, .55vw, 16px);
    margin-bottom: clamp(24px, 1.8vw, 54px);
  }

  .hero-lede {
    max-width: min(100%, 760px);
    font-size: clamp(18px, 1.03vw, 27px);
    line-height: 1.55;
    margin-bottom: clamp(28px, 2vw, 54px);
  }

  .hero-actions {
    gap: clamp(16px, 1.2vw, 30px);
  }

  .hero-actions .button {
    min-height: clamp(64px, 5vw, 96px);
    padding: clamp(20px, 1.8vw, 34px) clamp(30px, 2.2vw, 52px);
    gap: clamp(24px, 1.5vw, 42px);
    font-size: clamp(13px, .8vw, 20px);
  }

  .hero-visual {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 72svh, 1080px);
    height: auto;
    aspect-ratio: 1;
    justify-self: start;
    align-self: center;
  }

  .mascot-button {
    width: min(100%, 70svh, 1000px);
  }

  .hero-orbit-outer {
    width: 100%;
  }

  .hero-orbit-inner {
    width: 82%;
  }
}

@media (min-width: 1200px) {
  .hero-visual {
    width: min(calc(100% + 40px), 72svh, 1080px);
    margin-left: -40px;
  }
}

/* The portrait remains below the copy on compact and touch-oriented layouts. */
@media (max-width: 900px) {
  .hero-grid {
    box-sizing: border-box;
    width: calc(100% - 42px);
  }

  .hero-visual {
    max-width: 100%;
  }

  .site-header {
    padding-left: calc(21px + env(safe-area-inset-left, 0px));
    padding-right: calc(21px + env(safe-area-inset-right, 0px));
    padding-top: calc(17px + env(safe-area-inset-top, 0px));
  }

  .site-header.is-scrolled,
  .site-header.menu-active {
    padding-top: calc(13px + env(safe-area-inset-top, 0px));
  }

  .hero-grid {
    padding-top: calc(130px + env(safe-area-inset-top, 0px));
  }
}

@media (max-width: 480px) {
  .hero-grid {
    padding-top: calc(100px + env(safe-area-inset-top, 0px));
  }
}