/* NOCTURNE X — mobile first screen is content-led, not viewport-led.
   This stylesheet intentionally comes last to override old 100svh rules. */
@media (max-width: 760px) {
  .hero.hero-nocturne {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 94px 14px 17px;
  }
  .hero .hero-center {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    justify-content: flex-start;
    margin: 0 auto;
    width: 100%;
    max-width: 660px;
    padding: 0;
    flex: 0 0 auto;
  }
  .hero .hero-kicker { margin-bottom: 14px; }
  .hero .hero-emblem { width: 103px!important; height: 103px!important; }
  .hero .hero-center h1 { margin: 14px auto 7px; }
  .hero .streaming-label { margin: 19px 0 12px; }
  .hero .hero-services { max-width: 580px; }
  .hero .hero-explore { margin-top: 22px; }
  .hero .hero-bottom {
    position: relative;
    inset: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 660px;
    margin: 35px auto 0;
    padding-top: 15px;
    gap: 11px;
    flex-wrap: wrap;
  }
  .hero .hero-back-image, .hero .hero-warmth, .hero .hero-grain { pointer-events: none; }
  .hero .hero-back-image { inset: 0; }
  .hero .hero-bottom a { white-space: nowrap; }
}
@media (max-width: 360px) {
  .hero.hero-nocturne { padding-top: 88px; padding-inline: 12px; }
  .hero .hero-emblem { width: 94px!important; height: 94px!important; }
  .hero .hero-kicker { margin-bottom: 11px; }
  .hero .hero-bottom { margin-top: 27px; gap: 8px; }
}