@media (max-width: 760px) {
  html {
    --mobile-nav-height: 88px;
    scroll-padding-top: 100px;
  }

  .heritage-nav {
    height: var(--mobile-nav-height);
  }

  .heritage-nav .brandword {
    font-size: 48px;
  }

  .heritage-nav .brand-subtitle {
    margin-top: 4px;
  }

  .heritage-nav .brand-location {
    margin-top: 6px;
  }

  .heritage-nav .navlinks {
    top: 100%;
    max-height: calc(100dvh - var(--mobile-nav-height) - 81px - env(safe-area-inset-bottom));
  }

  .heritage-nav .navlinks.open {
    animation: mobile-menu-open 180ms cubic-bezier(.2, .65, .35, 1);
  }

  .mobile-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
  }

  .mobile-toggle span {
    position: absolute;
    top: calc(50% - .75px);
    left: 9px;
    width: 26px;
    height: 1.5px;
    margin: 0;
    transform-origin: center;
    transition: transform 180ms ease;
  }

  .mobile-toggle span:first-child { transform: translateY(-3.5px); }
  .mobile-toggle span:last-child { transform: translateY(3.5px); }
  .mobile-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .mobile-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
}

@keyframes mobile-menu-open {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-toggle span { transition: none; }
  .heritage-nav .navlinks.open { animation: none; }
}