/* Mobile navigation viewport and spacing fix for Safari and other mobile browsers. */
@media (max-width: 900px) {
  .mobile-nav[open] {
    /* Keep the oversized shell used by the original menu. In iOS Safari this
       continues behind the dynamic bottom toolbar, so the page below cannot
       show through while the toolbar expands or collapses. */
    inset: -100lvh 0;
    width: 100vw;
    height: auto;
    min-height: 300lvh;
    overflow: hidden;
  }

  .mobile-nav nav {
    width: 100vw;
    height: 100vh;
    height: 100lvh;
    min-height: 100vh;
    min-height: 100lvh;
    padding-top: max(calc(88px + env(safe-area-inset-top)), 9dvh);
    padding-right: clamp(28px, 7vw, 58px);
    padding-bottom: max(calc(28px + env(safe-area-inset-bottom)), 4dvh);
    padding-left: clamp(28px, 7vw, 58px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav nav > a,
  .mobile-nav__service-group > a {
    padding-top: clamp(15px, 2.1dvh, 22px);
    padding-bottom: clamp(15px, 2.1dvh, 22px);
  }

  .mobile-nav__service-links {
    gap: clamp(4px, 0.7dvh, 9px);
    padding: 4px 2px clamp(17px, 2dvh, 24px) calc(2px + 1em);
  }

  .mobile-nav nav .mobile-nav__service-links a,
  .mobile-nav nav .mobile-nav__service-links > span {
    padding: clamp(4px, 0.6dvh, 7px) 0;
    font-size: clamp(0.82rem, 3.4vw, 1rem);
    line-height: 1.45;
  }
}