.hero {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: max(640px, 100svh);
  height: auto;
  max-height: none;
  padding: calc(var(--desktop-header) + 24px) var(--pad) clamp(26px, 4.5svh, 48px);
}

.hero-shade {
  background:
    linear-gradient(180deg, #080f1999, transparent 32%),
    linear-gradient(90deg, #080f19c2, #10151b40 76%),
    linear-gradient(0deg, #0b111bdb, transparent 45%);
}

.hero-grid { inset-block-start: var(--desktop-header); }

.hero-copy {
  position: relative;
  inset: auto;
  align-self: center;
  width: 100%;
  max-width: 1350px;
  margin: 0;
  padding: 30px 0 clamp(36px, 6svh, 76px);
}

.hero .hero-copy h1 {
  font-size: clamp(62px, 7.65vw, 138px);
  line-height: 1.08;
}

.hero-description { margin-top: clamp(20px, 3.5svh, 34px); }

.hero-description p {
  max-width: 38ch;
  color: #eef0f5;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.65;
}

.hero-bottom {
  position: relative;
  inset: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: clamp(24px, 6vw, 96px);
  margin: 0;
  padding-top: clamp(14px, 2.5svh, 24px);
}

.hero-bottom .explore-link,
.hero-bottom .film-link {
  min-width: 0;
  min-height: 44px;
  gap: 12px;
  padding: 0;
  border: 0;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .005em;
}

.hero-bottom .circle-arrow,
.hero-bottom .play-icon { width: 46px; height: 46px; flex: 0 0 46px; }
.hero-bottom .motion-toggle { width: 44px; height: 44px; flex: 0 0 44px; margin-left: auto; }

@media (max-width: 760px) {
  .hero {
    min-height: calc(100svh - var(--mobile-dock));
    padding: calc(var(--mobile-header) + 20px) max(var(--pad), env(safe-area-inset-right, 0px)) 22px max(var(--pad), env(safe-area-inset-left, 0px));
  }

  .hero-grid { inset-block-start: var(--mobile-header); }
  .hero-copy { padding: clamp(14px, 4svh, 48px) 0 clamp(24px, 6svh, 60px); }
  .hero .hero-copy h1 { font-size: clamp(38px, 10.7vw, 62px); line-height: 1.1; }
  .hero-description p { font-size: 15px; }
  .hero-bottom { gap: 14px; }
}

@media (max-width: 480px) {
  .hero-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 10px 12px; }
  .hero-bottom .explore-link { grid-column: 1 / -1; }
  .hero-bottom .film-link { grid-column: 1; grid-row: 2; }
  .hero-bottom .motion-toggle { grid-column: 2; grid-row: 2; }
}

@media (max-width: 360px) {
  .hero .title-mark { display: none; }
}

@media (max-width: 760px) and (max-height: 500px) and (orientation: landscape) {
  .hero { padding-block: calc(var(--mobile-header) + 10px) 14px; }
  .hero-copy { padding: 10px 0 16px; }
  .hero .hero-copy h1 { font-size: clamp(34px, 6vw, 44px); }
  .hero-description { margin-top: 14px; }
  .hero-description p { max-width: none; }
}