/* Mobile hero composition; desktop uses the existing shared layout. */
@media (max-width: 767px) {
  .hero .hero-stage {
    flex: none;
    min-height: 0;
    height: clamp(34rem, calc(155vw + 4rem), 56rem);
    margin: 2rem 0 1.5rem;
    padding-bottom: 3.5rem;
    isolation: isolate;
    container-type: inline-size;
  }

  .hero .hero-name {
    position: absolute;
    inset: 0 0 3.5rem;
    width: 100%;
    justify-content: space-between;
    font-size: 39.5cqw;
    line-height: .86;
    letter-spacing: -.025em;
    z-index: 1;
    pointer-events: none;
  }

  .hero .hero-name > .name-line:first-child {
    position: absolute;
    top: min(42%, calc(100% - 100cqw));
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.49em;
  }

  .hero .hero-name > .name-line:last-child {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
  }

  .hero .hero-image {
    left: 50%;
    top: auto;
    bottom: 4rem;
    width: 100%;
    height: calc(100% - 44vw - 2.5rem);
    max-height: none;
    transform: translateX(-50%);
    z-index: 2;
  }

  .hero .hero-image img { object-fit: contain; object-position: center bottom; }
  .hero .hero-subtitle { bottom: 0; z-index: 4; }
}