/* Touch targets and notched screens share the same visual language. */
.hero-copy { container-type: inline-size; }
.hero h1 {
  font-size: clamp(32px, 5vw, 91px);
  font-size: clamp(32px, 14cqi, 91px);
  word-spacing: .1em;
}
.section-shell,
.site-header {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.motion-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
.nav-contact, .text-link, .role-picker button, .message-helper summary,
.copy-message, .role-apply, .wordmark { min-height: 44px; }
.scene-progress { display: none; }
.button:active, .role-picker button:active, .copy-message:active { transform: scale(.97); }

@media (max-width: 999px) {
  /* Both complete frames remain in normal flow without motion or JavaScript. */
  .has-mobile-cinema { display: block; }
  .has-mobile-cinema .world-copy { margin-bottom: 42px; max-width: 620px; }
  .has-mobile-cinema .world-copy > p:not(.eyebrow) { max-width: 440px; font-size: 14px; }
  .has-mobile-cinema .world-progress { display: block; margin-top: 26px; }
  .has-mobile-cinema .world-stage {
    position: relative;
    height: min(64svh, 560px);
    min-height: 280px;
    width: 100%;
    isolation: isolate;
  }
  .has-mobile-cinema .world-shot {
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .has-mobile-cinema .shot-image { flex: 1; min-height: 0; aspect-ratio: auto; }
  .has-mobile-cinema .shot-image img { height: 112%; object-position: 35% 42%; }
  .has-mobile-cinema .close-shot img { object-position: 60% 30%; }
  .has-mobile-cinema .world-shot figcaption { font-size: 13px; margin-top: 14px; }
  .has-mobile-cinema .world-shot > p { font-size: 11px; margin-top: 7px; padding-bottom: 22px; }
  .has-mobile-cinema .shot-number { font-size: 9px; }
  .has-mobile-cinema .scene-progress {
    display: block;
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: 2px;
    background: #ffffff22;
    z-index: 2;
  }
  .scene-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left;
  }
  .has-mobile-cinema .concept-note { margin-top: 20px; max-width: 300px; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 90px; }
  .site-header { gap: 8px; }
  .header-actions { gap: 8px; }
  .nav-contact { padding-inline: 6px; gap: 9px; white-space: nowrap; }
  .hero-bottom { display: flex; margin-top: 25px; gap: 13px; max-width: 340px; }
  .hero-bottom p { font-size: 10px; }
  .small-orbit { width: 30px; height: 30px; }
  .scroll-cue { width: 44px; height: 44px; }
  .role-lead { font-size: 14px; }
  .teacher-panel .role-title,
  .is-enhanced .role-panel.teacher-panel .role-title { font-size: clamp(32px, 10vw, 43px); }
  .role-columns li { font-size: 13px; line-height: 1.7; }
  .role-columns h3 { font-size: 10px; }
  .mobile-contact {
    left: max(14px, env(safe-area-inset-left, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(13px + env(safe-area-inset-bottom, 0px));
    min-height: 56px;
    transform: translateY(calc(110px + env(safe-area-inset-bottom, 0px)));
  }
  .toast { bottom: calc(85px + env(safe-area-inset-bottom, 0px)); }
  .site-footer { padding-bottom: calc(33px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 370px) {
  .site-header { padding-inline: 16px; }
  .header-actions { gap: 4px; }
  .nav-contact { font-size: 10.5px; padding-inline: 2px; gap: 8px; }
  .hero-buttons { gap: 10px; }
}

@media (max-width: 999px) and (max-height: 540px) {
  .has-mobile-cinema .world-stage { height: calc(100svh - 136px); min-height: 160px; }
  .has-mobile-cinema .world-shot .shot-image { flex-basis: 100%; }
  .has-mobile-cinema .shot-image::after {
    content: '';
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(transparent, #080b0cdd);
    pointer-events: none;
  }
  .has-mobile-cinema .shot-image { position: relative; }
  .has-mobile-cinema .world-shot figcaption { position: absolute; bottom: 35px; inset-inline: 16px; }
  .has-mobile-cinema .world-shot > p { position: absolute; bottom: 12px; left: 16px; padding: 0; }
  .has-mobile-cinema .scene-progress { bottom: -8px; }
}