/* Hero is deliberately a poster: type behind, PNG medallion above it. */
@media (min-width: 901px) {
  .hero { display: block; padding: 20px; }
  .hero .topline { position: absolute; inset: 20px 20px auto; height: 58px; }
  .hero .display { z-index: 1; left: 3vw; top: 14vh; font-size: clamp(120px, 17vw, 310px); color: #151612; }
  .hero .hero-copy { position: absolute; z-index: 2; left: 5vw; top: 29vh; width: min(62vw, 980px); padding: 0; }
  .hero h1 { max-width: none; font-size: clamp(58px, 6.8vw, 126px); }
  .hero .portrait-medallion { position: absolute; z-index: 4; top: 50%; right: 3vw; width: min(61vw, 72vh); height: min(61vw, 72vh); padding: 0; transform: translateY(-50%); clip-path: circle(49.2% at 50% 50%); }
  .hero .actions { position: absolute; z-index: 8; left: 5vw; bottom: 7vh; margin: 0; }
  .hero .next { position: absolute; z-index: 8; right: 3vw; bottom: 8vh; margin: 0; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .hero .hero-copy { top: 27vh; }
  .hero .portrait-medallion { width: min(58vw, 68vh); height: min(58vw, 68vh); }
  .hero .actions { bottom: 5vh; }
  .hero .next { bottom: 6vh; }
}