/* Mobile/tablet menu (≤991px, where the hamburger shows). Replaces Webflow's
   open/close interaction, which paused ~0.5s before popping the menu in.
   Toggled by src/menu.js via the .menu-open class on <html>. */
@media screen and (max-width: 991px) {
  .section.is--nav .grid_item.is--menu {
    /* Always laid out, hidden with opacity/visibility so it can transition. */
    display: flex !important;
    /* Solid: this panel sits inside the nav pill, which already has a backdrop
       blur, and browsers can't blur a second time inside it — a translucent
       background just let the page text show through. */
    background-color: #272727;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem) !important;
    transition:
      opacity 0.24s ease,
      transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.36s;
  }

  html.menu-open .section.is--nav .grid_item.is--menu {
    opacity: 1;
    visibility: visible;
    transform: none !important;
    transition:
      opacity 0.24s ease,
      transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s;
  }

  /* Links and social icons follow the panel in, lightly staggered. */
  .section.is--nav .grid_item.is--menu > * {
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.menu-open .section.is--nav .grid_item.is--menu > * {
    opacity: 1;
    transform: none;
  }

  html.menu-open .section.is--nav .grid_item.is--menu > :nth-child(1) { transition-delay: 0.04s; }
  html.menu-open .section.is--nav .grid_item.is--menu > :nth-child(2) { transition-delay: 0.07s; }
  html.menu-open .section.is--nav .grid_item.is--menu > :nth-child(3) { transition-delay: 0.1s; }
  html.menu-open .section.is--nav .grid_item.is--menu > :nth-child(4) { transition-delay: 0.13s; }
  html.menu-open .section.is--nav .grid_item.is--menu > :nth-child(5) { transition-delay: 0.16s; }
  html.menu-open .section.is--nav .grid_item.is--menu > :nth-child(6) { transition-delay: 0.19s; }

  /* Keep the page from scrolling behind the open menu. */
  html.menu-open,
  html.menu-open body {
    overflow: hidden;
  }

  .section.is--nav .grid_item.is--hamburger {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section.is--nav .grid_item.is--menu,
  .section.is--nav .grid_item.is--menu > * {
    transition: none !important;
    transform: none !important;
  }
}