/* Site menu for the Webflow landing page.
   Mirrors the "menu-toggle" / "mobile-menu" rules in assets/css/site.css so the
   expanded menu is identical on every page. Keep the two in sync. */
.menu-toggle, .mobile-menu {
  --ink: #050505; --paper: #f5f5f5; --mute: #8c949a; --signal: #0bafe1;
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(16px, 3.4vw, 48px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

.menu-toggle { display: none; width: 44px; height: 44px; position: relative; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--paper); transition: transform .45s var(--ease-out); }
.menu-toggle span:nth-child(1) { top: 17px; } .menu-toggle span:nth-child(2) { top: 25px; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 1000001; background: var(--ink); color: var(--paper); /* above Webflow's 1000000 layers */
  padding: calc(96px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-in-out); visibility: hidden;
}
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; }
.mobile-menu ul { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mobile-menu a.big {
  display: block; color: inherit; text-decoration: none;
  font-family: var(--display); font-weight: 650; font-stretch: 112%; text-transform: uppercase;
  font-size: clamp(2.4rem, 11vw, 4.5rem); line-height: 1.02; letter-spacing: -.02em;
  transform: translateY(40px); opacity: 0; transition: transform .7s var(--ease-out), opacity .7s var(--ease-out);
}
.menu-open .mobile-menu a.big { transform: none; opacity: 1; transition-delay: calc(.15s + var(--i, 0) * .06s); }
.mobile-menu a.big[aria-current="page"] { color: var(--signal); }
.mobile-menu .meta-line { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.mobile-menu > ul, .mobile-menu > .meta-line { position: relative; z-index: 1; } /* above the glyph-swell canvas */

/* Webflow collapses this navbar at 991px; swap its menu for the site menu there */
@media (max-width: 991px) {
  .menu-toggle { display: block; }
  .menu-open .navbar { position: fixed; z-index: 1000002; opacity: 1 !important; } /* close button must stay visible even mid Webflow fade-in */
}