/* Mobile homepage: compact masthead and an immersive, edge-to-edge film. */
@media (max-width: 820px) {
  .home-page .header-inner { height: 60px; width: calc(100% - 36px); gap: 16px; }
  .home-page .brand img { width: 185px; }
  .home-page .menu-toggle { position: relative; width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 0; flex-shrink: 0; }
  .home-page .menu-toggle::before,
  .home-page .menu-toggle::after { content: ''; position: absolute; left: 11px; width: 22px; height: 1px; background: #333; transition: transform .2s ease; }
  .home-page .menu-toggle::before { top: 15px; box-shadow: 0 7px #333; }
  .home-page .menu-toggle::after { top: 29px; }
  .home-page .menu-toggle[aria-expanded="true"]::before { top: 22px; box-shadow: none; transform: rotate(45deg); }
  .home-page .menu-toggle[aria-expanded="true"]::after { top: 22px; transform: rotate(-45deg); }
  .home-page .nav { padding: 12px 24px 24px; max-height: calc(100vh - 60px); max-height: calc(100svh - 60px); }
  .home-page .hero .film { height: calc(100vh - 60px); height: calc(100svh - 60px); overflow: hidden; background: #000; }
  .home-page .hero .film video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; background: #000; }
}