/* Keep the two film characters at a comparable scale and reserve a clear text column. */
.stage .intro h1 {
  font-size: clamp(52px, 5.4vw, 105px);
  max-width: 46vw;
}
.stage.has-hero-film .intro-bottom {
  bottom: var(--hero-copy-bottom, 17vh);
  right: auto;
  width: min(43vw, 430px);
}
html[lang="ko"] .stage .intro h1 {
  font-size: clamp(45px, 4.6vw, 88px);
  max-width: 48vw;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .stage .intro h1 { font-size: clamp(46px, 5.7vw, 63px); max-width: 46vw; }
  .stage.has-hero-film .intro-bottom { width: min(42vw, 360px); }
  .stage .intro-copy, .stage .intro-copy p { max-width: 100%; }
}

@media (max-width: 760px) {
  .thread-story-media {
    left: auto;
    right: 0;
    width: var(--thread-media-width, 100vw);
    transform: translateY(-50%);
  }
  .stage .intro h1 {
    font-size: clamp(39px, 11.5vw, 62px);
    max-width: none;
  }
  html[lang="ko"] .stage .intro h1 {
    font-size: clamp(34px, 9.4vw, 54px);
    max-width: none;
  }
  .stage.has-hero-film .intro-bottom {
    left: 25px;
    width: calc(100% - 50px);
  }
  .melli-hero-film__media, .melli-hero-film__ending {
    left: var(--hero-band-left);
    right: auto;
    top: var(--hero-band-top);
    width: var(--hero-band-width);
    height: var(--hero-band-height);
    aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  }
  .melli-hero-film__greet {
    left: 8%;
    right: auto;
    top: var(--hero-band-top);
    width: 84%;
    height: var(--hero-band-height);
  }
}

@media (max-width: 760px) and (max-height: 740px) {
  .stage .intro { padding-top: clamp(88px, 14vh, 110px); }
  .stage .intro > .eyebrow { margin-bottom: 10px; }
  .stage .intro h1 { font-size: clamp(37px, 10.7vw, 53px); }
  .stage .intro-copy p { font-size: 11px; line-height: 1.48; margin-bottom: 10px; }
  .stage .hero-services { margin-bottom: 10px; }
  .stage .primary { padding: 11px 15px; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .stage .intro h1 { font-size: clamp(31px, 4.5vw, 57px); max-width: 42vw; }
  .stage.has-hero-film .intro-bottom { width: min(40vw, 360px); }
}

@media (max-width: 760px) and (max-height: 600px) and (orientation: portrait) {
  .stage.has-hero-film .intro-bottom { width: 42vw; }
  .stage .intro-copy, .stage .intro-copy p { max-width: 100%; }
  .stage .intro-copy p { font-size: 10px; line-height: 1.34; margin-bottom: 12px; }
  .stage .hero-services, .stage .intro-actions .secondary-link { display: none; }
  .stage .intro-actions .primary { width: 100%; padding: 10px; gap: 5px; font-size: 9px; }
  .melli-hero-film__media, .melli-hero-film__ending {
    -webkit-mask-image: radial-gradient(ellipse 72% 75% at 60% 50%, #000 65%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 75% at 60% 50%, #000 65%, transparent 100%);
  }
}