@media (max-width: 767px) {
  :root { --mobile-screen-height: 100vh; }
  /* Keep document geometry stable while mobile browser toolbars animate. */
  @supports (height: 100svh) {
    :root { --mobile-screen-height: 100svh; }
  }

  main > section,
  .about-grid,
  .services-stage,
  .contact-grid { min-height: var(--mobile-screen-height); }

  .hero {
    height: var(--mobile-screen-height);
    min-height: min(560px, var(--mobile-screen-height));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }

  #work.is-project-scene .work-stage {
    height: var(--mobile-screen-height);
    min-height: var(--mobile-screen-height);
  }
}