/* ============================================================
   USDM1 desktop navigation (Webflow code component build)
   Runs inside the component's shadow root. Site classes don't
   reach in here, but Webflow design variables (CSS custom
   properties) do — every brand value below reads the site token
   with a literal fallback, so a token edit in Webflow restyles
   the nav and a deleted token degrades to today's exact look.
   Theme is driven by one modifier on the header: .m1nav--dark
   ============================================================ */

:host {
  display: block;
  width: 100%;
}

/* ---- Theme tokens ------------------------------------------------ */
/* Dark values come from the Figma frames (USDM1 -> Site, 3069:2047-2049).
   Glass surfaces are mixed from the site's ink/white tokens so the
   alphas track the brand color. Shadows have no site token — those
   literals are intentional. */
.m1nav,
.m1nav-scrim,
.m1nav-moverlay {
  /* FOUC gate: the header carries inline `display: var(--m1nav-disp,
     none)` and the overlay inline `display: var(--m1nav-mdisp, none)`.
     Until this stylesheet is applied those vars are unset, so the raw
     markup never paints; this rule (and the mobile overlay rule for
     --m1nav-mdisp) turns the nav on the moment styles exist. The gate
     is display, deliberately not visibility: the page hides the nav
     wrapper via inherited `visibility: hidden` while a Webflow IX3
     load animation waits to reveal it, and an explicit visibility on
     the header would override that inheritance and flash the nav. */
  --m1nav-disp: flex;
  --m1nav-white: var(--fill--neutral--0, #ffffff);
  --m1nav-ink-base: var(--fill--slate--900, #121316);
  /* No hover states on touch, so the OS gray tap flash is the only
     non-designed feedback left — suppress it */
  -webkit-tap-highlight-color: transparent;
  /* The site's page embed sets `* { -webkit-font-smoothing: antialiased }`;
     that selector can't pierce the shadow root, so declare it here too —
     otherwise light-on-dark text renders noticeably heavier than the site */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.m1nav {
  --m1nav-ink: var(--m1nav-ink-base);
  --m1nav-ink-dim: var(--fill--neutral--700, #636161); /* resting carets + siblings while a menu is open */
  --m1nav-pill-bg: color-mix(in srgb, var(--m1nav-white) 85%, transparent);
  --m1nav-pill-bg-open: color-mix(in srgb, var(--m1nav-white) 90%, transparent);
  --m1nav-panel-bg: color-mix(in srgb, var(--m1nav-white) 90%, transparent);
  --m1nav-hover-bg: color-mix(in srgb, var(--m1nav-ink-base) 6%, transparent);
  --m1nav-card-hover-bg: color-mix(in srgb, var(--m1nav-ink-base) 11%, transparent);
  --m1nav-panel-shadow: 0 12px 32px rgba(18, 19, 22, 0.12);
  --m1nav-accent: var(--fill--slate--primary, #99cbff);
  --m1nav-radius: var(--space--2xs, 0.5rem); /* the site's standard 8px */
  /* easeInOutQuad, used by every animated property */
  --m1nav-ease: cubic-bezier(0.45, 0, 0.55, 1);
}
.m1nav--dark {
  --m1nav-ink: var(--m1nav-white);
  --m1nav-ink-dim: var(--fill--neutral--500, #afadac);
  --m1nav-pill-bg: color-mix(in srgb, var(--m1nav-ink-base) 55%, transparent);
  --m1nav-pill-bg-open: color-mix(in srgb, var(--m1nav-ink-base) 90%, transparent);
  --m1nav-panel-bg: color-mix(in srgb, var(--m1nav-ink-base) 90%, transparent);
  --m1nav-hover-bg: var(--fill--neutral--800, #222325);
  --m1nav-card-hover-bg: #2e2f31; /* one lightness step above neutral/800; no site token */
  --m1nav-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* ---- Header shell ------------------------------------------------ */
/* Full width, no positioning of its own: the Webflow wrapper section
   owns fixed/sticky placement, side padding, and max-width. That
   wrapper must be pointer-events: none (the nav re-enables its own
   children below) so the page between logo, pill, and CTA stays
   clickable. */
.m1nav {
  position: relative;
  z-index: 1; /* above the sibling scrim */
  display: flex;
  align-items: center;
  gap: var(--space--sm, 1.5rem);
  width: 100%;
  padding: var(--space--xs, 1rem) 0;
  color: var(--m1nav-ink);
  font-family: var(--font--body, "At Hauss", Arial, sans-serif);
  font-feature-settings: "case" 1, "cpsp" 1;
  transition: color 0.25s var(--m1nav-ease);
  pointer-events: none; /* children re-enable; lets the page show through gaps */
}
.m1nav > * {
  pointer-events: auto;
}

/* ---- Logo: spark mark + collapsing wordmark ---------------------- */
.m1nav-logo {
  display: block;
  flex: none;
  width: 152px;
  height: 30px;
  overflow: hidden;
  color: var(--m1nav-ink);
  transition: width 0.3s var(--m1nav-ease), color 0.2s var(--m1nav-ease);
}
/* Match the live site's logo hover: the whole logo (wordmark or the
   naked mark when collapsed) dims to the secondary ink over 200ms */
.m1nav-logo:hover,
.m1nav-logo:focus-visible {
  color: var(--m1nav-ink-dim);
}
.m1nav-logo svg {
  display: block;
  width: 152px;
  height: 30px;
}
.m1nav-logo-letters {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.2s var(--m1nav-ease), transform 0.3s var(--m1nav-ease);
}
.m1nav--scrolled .m1nav-logo {
  width: 30px;
}
.m1nav--scrolled .m1nav-logo-letters {
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}

/* ---- Glass pill --------------------------------------------------- */
.m1nav-menu {
  position: relative;
  z-index: 0;
  display: flex;
  padding: 0 12px;
  border-radius: var(--m1nav-radius);
}
/* The glass lives on a pseudo-element, NOT on the pill itself: an
   element with backdrop-filter becomes the backdrop root for all of its
   descendants, so a blur on the pill would leave the panels inside it
   sampling nothing (their backdrop blur silently no-ops and the page
   ghosts through sharply). The ::before has no descendants, so the
   panels blur the real page. */
.m1nav-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--m1nav-radius);
  background-color: var(--m1nav-pill-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.25s var(--m1nav-ease);
}
/* The pill deepens while a menu is open, matching the panel surface */
.m1nav-menu.has-open::before {
  background-color: var(--m1nav-pill-bg-open);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .m1nav {
    --m1nav-pill-bg: color-mix(in srgb, var(--m1nav-white) 94%, transparent);
    --m1nav-pill-bg-open: color-mix(in srgb, var(--m1nav-white) 98%, transparent);
    --m1nav-panel-bg: color-mix(in srgb, var(--m1nav-white) 98%, transparent);
  }
  .m1nav--dark {
    --m1nav-pill-bg: color-mix(in srgb, var(--m1nav-ink-base) 92%, transparent);
    --m1nav-pill-bg-open: color-mix(in srgb, var(--m1nav-ink-base) 98%, transparent);
    --m1nav-panel-bg: color-mix(in srgb, var(--m1nav-ink-base) 98%, transparent);
  }
}

.m1nav-list {
  display: flex;
  gap: var(--space--sm, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.m1nav-item {
  position: relative;
  display: flex;
}
/* Keep the active panel painting above a sibling's exiting panel while
   they cross-fade (DOM order would otherwise decide) */
.m1nav-item.is-open {
  z-index: 1;
}

/* ---- Triggers ------------------------------------------------------ */
.m1nav-trigger {
  display: flex;
  align-items: center;
  gap: var(--space--2xs, 0.5rem);
  padding: 6px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--height--140, 1.4);
  letter-spacing: var(--letter-spacing--body, 0.01em);
  font-feature-settings: inherit;
  color: var(--m1nav-ink);
  cursor: pointer;
  transition: color 0.25s var(--m1nav-ease);
}
/* Elevator chevron: the caret scrolls out of a clipped window while the
   up caret scrolls in, each fading in/out on the same curve. The glyph
   is the Figma caret: 8x4, 1.5px stroke (drawn in a 10x6 box so the
   stroke isn't clipped). */
.m1nav-chevron {
  display: block;
  width: 10px;
  height: 6px;
  flex: none;
  overflow: hidden;
  /* Carets rest lighter than the label (neutral/500 dark, neutral/700
     light) and take the full ink on hover or while open */
  color: var(--m1nav-ink-dim);
  transition: color 0.2s var(--m1nav-ease);
}
.m1nav-trigger:hover .m1nav-chevron,
.m1nav-trigger:focus-visible .m1nav-chevron,
.m1nav-item.is-open .m1nav-chevron {
  color: var(--m1nav-ink);
}
.m1nav-chevron-rail {
  display: flex;
  flex-direction: column;
  transition: transform 0.28s var(--m1nav-ease);
}
.m1nav-chevron-rail svg {
  display: block;
  width: 10px;
  height: 6px;
  flex: none;
  transition: opacity 0.28s var(--m1nav-ease);
}
.m1nav-chevron-down {
  opacity: 1;
}
.m1nav-chevron-up {
  opacity: 0;
}
.m1nav-item.is-open .m1nav-chevron-rail {
  transform: translateY(-6px);
}
.m1nav-item.is-open .m1nav-chevron-down {
  opacity: 0;
}
.m1nav-item.is-open .m1nav-chevron-up {
  opacity: 1;
}
/* Recede the siblings while one menu is open (color swap, per Figma) */
.m1nav-menu.has-open .m1nav-item:not(.is-open) .m1nav-trigger {
  color: var(--m1nav-ink-dim);
}

/* ---- Direct-link items (Single link layout) ------------------------ */
/* The trigger is an <a> instead of a <button>: same type, padding, and
   color transitions, no chevron, no dropdown. Hovering (or keyboard-
   focusing) it dims the siblings the same way an open dropdown does,
   while the link itself keeps full ink — but nothing opens: no panel,
   no scrim, and the pill stays at resting depth. */
.m1nav-item--link .m1nav-trigger {
  text-decoration: none;
}
.m1nav-list:has(.m1nav-item--link:hover, .m1nav-item--link .m1nav-trigger:focus-visible)
  .m1nav-item:not(:hover):not(:focus-within)
  .m1nav-trigger {
  color: var(--m1nav-ink-dim);
}

/* ---- Dropdown panels ------------------------------------------------ */
/* Each menu owns its own glass panel, anchored to its trigger 12px below
   the pill and overhanging it by the 12px content padding (so the first
   item's panel lands flush with the pill's left edge, per Figma). Opening
   fades it in with a small drop; switching menus simply cross-fades — the
   outgoing panel keeps .is-exiting so it fades out in place while the new
   one fades in. */
.m1nav-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: -12px;
  display: flex;
  align-items: flex-start;
  gap: var(--space--sm, 1.5rem);
  width: max-content;
  padding: 12px;
  border-radius: var(--m1nav-radius);
  background-color: var(--m1nav-panel-bg);
  box-shadow: var(--m1nav-panel-shadow);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--m1nav-ease), transform 0.18s var(--m1nav-ease),
    visibility 0s linear 0.18s, background-color 0.25s var(--m1nav-ease);
  text-align: left;
}
.m1nav-item.is-open .m1nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.18s var(--m1nav-ease), transform 0.18s var(--m1nav-ease),
    visibility 0s, background-color 0.25s var(--m1nav-ease);
}
/* Cross-fade: while another menu takes over, this panel stays visible
   and flat, only its opacity animating down */
.m1nav-panel.is-exiting {
  visibility: visible;
  transform: translateY(0);
}
/* Columns hug their longest link (links are nowrap) so panels shrink
   to fit, with an 11.25rem floor so short-word menus don't look slim */
.m1nav-panel-col {
  display: flex;
  flex-direction: column;
  min-width: 11.25rem;
}
.m1nav-panel-link {
  display: block;
  padding: 12px;
  border-radius: 4px; /* no 4px token on the site; matches its bare .25rem usage */
  font-size: 0.9375rem;
  line-height: var(--height--140, 1.4);
  letter-spacing: var(--letter-spacing--body, 0.01em);
  white-space: nowrap;
  color: var(--m1nav-ink);
  text-decoration: none;
  transition: background-color 0.15s var(--m1nav-ease), color 0.25s var(--m1nav-ease);
}
.m1nav-panel-link:hover,
.m1nav-panel-link:focus-visible {
  background-color: var(--m1nav-hover-bg);
}
/* Card column (e.g. Newsroom in About): title + short description on
   the hover surface; the whole card is the link */
.m1nav-panel-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 306px;
  padding: 12px;
  border-radius: 4px;
  background-color: var(--m1nav-hover-bg);
  text-decoration: none;
  transition: background-color 0.2s var(--m1nav-ease);
}
.m1nav-panel-card:hover,
.m1nav-panel-card:focus-visible {
  background-color: var(--m1nav-card-hover-bg);
}
.m1nav-panel-card-title {
  font-size: 0.9375rem;
  line-height: var(--height--140, 1.4);
  letter-spacing: var(--letter-spacing--body, 0.01em);
  color: var(--m1nav-ink);
}
.m1nav-panel-card-desc {
  font-size: 0.75rem;
  line-height: var(--height--140, 1.4);
  letter-spacing: var(--letter-spacing--body, 0.01em);
  color: var(--m1nav-ink-dim);
}

/* Visual overview card (Use Cases): full bleed brand graphic, text on a
   bottom gradient that matches the image's near-black base, title is the
   link element (name + arrow), image zooms slightly on hover. The card
   is image-dark in both themes; the hairline border separates it from
   the solid dark panel. Width and radius per the Figma slot (3074:2335).
   Gradient stops stay literal: they're anchored to the image's black. */
.m1nav-panel-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
  width: 400px;
  min-height: 300px;
  border-radius: var(--m1nav-radius);
  border: 1px solid var(--m1nav-hover-bg);
  overflow: hidden;
  background-color: var(--m1nav-ink-base);
  text-decoration: none;
}
.m1nav-panel-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--m1nav-ease);
}
.m1nav-panel-visual:hover img,
.m1nav-panel-visual:focus-visible img {
  transform: scale(1.04);
}
.m1nav-panel-visual-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 44px 14px 14px;
  background: linear-gradient(
    180deg,
    rgba(18, 19, 22, 0) 0%,
    rgba(18, 19, 22, 0.85) 55%,
    rgba(18, 19, 22, 0.95) 100%
  );
}
.m1nav-panel-visual-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  line-height: var(--height--140, 1.4);
  letter-spacing: var(--letter-spacing--body, 0.01em);
  color: var(--m1nav-white);
}
.m1nav-panel-visual-title .m1nav-arr {
  transition: transform 0.2s var(--m1nav-ease);
}
.m1nav-panel-visual:hover .m1nav-arr,
.m1nav-panel-visual:focus-visible .m1nav-arr {
  transform: translateX(3px);
}
.m1nav-panel-visual-desc {
  font-size: 0.75rem;
  line-height: var(--height--140, 1.4);
  letter-spacing: var(--letter-spacing--body, 0.01em);
  color: var(--fill--neutral--500, #afadac);
}

/* ---- Right side CTA ------------------------------------------------ */
.m1nav-actions {
  display: flex;
  margin-left: auto;
}
.m1nav-cta {
  display: block;
  padding: 12px var(--space--sm, 1.5rem);
  border-radius: var(--m1nav-radius);
  background-color: var(--m1nav-accent);
  color: var(--fill--slate--900, #121316); /* ink text in both themes */
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--height--140, 1.4);
  letter-spacing: var(--letter-spacing--body, 0.01em);
  text-decoration: none;
  transition: transform 0.2s var(--m1nav-ease), background-color 0.2s var(--m1nav-ease);
}
.m1nav-cta:hover {
  /* the site's own .button-primary hover color */
  background-color: var(--fill--slate--600, #b0c3e1);
}

/* ---- Page scrim while a dropdown is open --------------------------- */
.m1nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 0; /* under the z-1 nav row; the wrapper's own z-index puts both above the page */
  background-color: var(--m1nav-ink-base);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.45, 0, 0.55, 1);
}
.m1nav-scrim.is-active {
  opacity: 0.14;
}

/* ---- Focus visibility ----------------------------------------------- */
.m1nav-trigger:focus-visible,
.m1nav-cta:focus-visible,
.m1nav-panel-link:focus-visible,
.m1nav-panel-card:focus-visible,
.m1nav-panel-visual:focus-visible,
.m1nav-logo:focus-visible {
  outline: 2px solid var(--fill--slate--primary, #99cbff);
  outline-offset: 2px;
}

/* ---- Mobile ---------------------------------------------------------- */
/* Same component, same props, below the site's 992px breakpoint (Figma
   3092:4614 / 4561 / 4669 and 3094:5053). The closed bar — logo plus one
   glass pill holding the optional direct link and the Menu toggle —
   follows the section theme exactly like desktop; the full-screen menu
   overlay is always dark (it covers the page). Geometry note: the
   overlay's 24px gutters and the bar assume the Webflow wrapper uses
   24px side padding below 992px. */

/* Hidden at desktop widths; the media query below flips the split.
   The overlay's display is owned by its inline FOUC gate — desktop
   simply never defines --m1nav-mdisp, so it stays display: none. */
.m1nav-mbar {
  display: none;
}

@media (max-width: 991px) {
  .m1nav-menu,
  .m1nav-actions,
  .m1nav-scrim {
    display: none;
  }

  /* Logo renders at 24px height on mobile (122px wordmark), same
     scroll-collapse to the bare mark; the overlay being open also
     forces the mark-only state, per the open-menu frame */
  .m1nav-logo,
  .m1nav-logo svg {
    width: 122px;
    height: 24px;
  }
  .m1nav--scrolled .m1nav-logo,
  .m1nav--mopen .m1nav-logo {
    width: 24px;
  }
  .m1nav--mopen .m1nav-logo-letters {
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
  }

  /* Bar pills (Figma 3106:6008): the direct link and the menu toggle are
     TWO separate glass pills with an 8px gap — one shared pill read as a
     single action button, so each control now carries its own glass.
     The recipe is unchanged: the desktop panel glass (blur, 70% fill so
     the blurred page reads through while scrolling) rimmed like Apple's
     glass — a "glint" inset shadow along the top inner edge where light
     catches the glass (Kyle picked it in harness/pill-tests.html; a
     quiet ring instead = set the ring vars to rgba(59,58,60,.35) dark /
     8% ink light and drop the glint). Box-shadow interpolates, so theme
     flips fade with the fill (a gradient-stroke ring was tried first:
     background-image, snaps). The vars live on the row so both pills
     inherit one theme flip. */
  .m1nav-mbar {
    --m1nav-mbar-ring: color-mix(in srgb, var(--m1nav-ink-base) 8%, transparent);
    --m1nav-mbar-glint: transparent;
    --m1nav-mbar-bg: color-mix(in srgb, var(--m1nav-white) 70%, transparent);
    display: flex;
    align-items: center;
    gap: var(--space--2xs, 0.5rem);
    margin-left: auto;
  }
  .m1nav--dark .m1nav-mbar {
    --m1nav-mbar-ring: rgba(59, 58, 60, 0.35);
    --m1nav-mbar-glint: transparent;
    --m1nav-mbar-bg: color-mix(in srgb, var(--m1nav-ink-base) 70%, transparent);
  }
  /* Without backdrop blur a 70% fill is illegible over busy content;
     fall back to near-opaque like the desktop panels do */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .m1nav .m1nav-mbar {
      --m1nav-mbar-bg: color-mix(in srgb, var(--m1nav-white) 98%, transparent);
    }
    .m1nav--dark .m1nav-mbar {
      --m1nav-mbar-bg: color-mix(in srgb, var(--m1nav-ink-base) 98%, transparent);
    }
  }
  .m1nav-mbar-link,
  .m1nav-mbar-toggle {
    position: relative; /* anchors the ::after touch-target extender */
    display: flex;
    align-items: center;
    box-sizing: border-box; /* 34px includes the border, per the Figma */
    height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--m1nav-radius);
    background-color: var(--m1nav-mbar-bg);
    /* Glint first: earlier shadows paint on top, so the top edge is one
       line that brightens rather than a dark ring stacked over the glint */
    box-shadow:
      inset 0 1px 0 0 var(--m1nav-mbar-glint),
      inset 0 0 0 1px var(--m1nav-mbar-ring);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: var(--height--140, 1.4);
    letter-spacing: var(--letter-spacing--body, 0.01em);
    font-feature-settings: inherit;
    color: var(--m1nav-ink-dim);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s var(--m1nav-ease), background-color 0.25s var(--m1nav-ease),
      box-shadow 0.25s var(--m1nav-ease);
  }
  /* No :hover states anywhere in the mobile UI — on touch they just
     stick after a tap. :focus-visible stays for keyboard users. */
  .m1nav-mbar-link:focus-visible,
  .m1nav-mbar-toggle:focus-visible {
    color: var(--m1nav-ink);
  }
  /* Touch targets: an invisible hit-area extender on each pill, grown
     to 44px tall without moving any visual geometry. Sideways each pill
     claims 4px — meeting in the middle of the 8px gap between them. */
  .m1nav-mbar-link::after,
  .m1nav-mbar-toggle::after {
    content: "";
    position: absolute;
    inset: -5px -4px;
  }
  /* Hamburger <-> X (Figma 3103:5928 / 3103:5923): both glyphs are two
     14x2 bars in the same 14x14 wrapper, so the pill never changes
     size. Two-step choreography: opening slides the bars to the middle
     (0.15s), then scissors them into the X (0.15s); closing un-rotates
     first and slides back second — the same gesture reversed. The bar
     is the translate wrapper, the rot core carries the ink + rotation,
     and the delays swap by state to order the legs. currentColor keeps
     the bars on the toggle's dim/hover ink. */
  .m1nav-mburger {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
  }
  .m1nav-mburger-bar {
    position: absolute;
    left: 0;
    width: 14px;
    height: 2px;
    transition: transform 0.15s var(--m1nav-ease) 0.15s;
  }
  .m1nav-mburger-bar:first-child {
    top: 2px; /* bar centers at y 3 and 11 = 2px bars with a 6px gap */
  }
  .m1nav-mburger-bar:last-child {
    top: 10px;
  }
  .m1nav-mburger-rot {
    position: absolute;
    inset: 0;
    background: currentColor;
    transition: transform 0.15s var(--m1nav-ease) 0s;
  }
  .m1nav--mopen .m1nav-mburger-bar {
    transition-delay: 0s;
  }
  .m1nav--mopen .m1nav-mburger-rot {
    transition-delay: 0.15s;
  }
  .m1nav--mopen .m1nav-mburger-bar:first-child {
    transform: translateY(4px);
  }
  .m1nav--mopen .m1nav-mburger-bar:last-child {
    transform: translateY(-4px);
  }
  .m1nav--mopen .m1nav-mburger-bar:first-child .m1nav-mburger-rot {
    transform: rotate(45deg);
  }
  .m1nav--mopen .m1nav-mburger-bar:last-child .m1nav-mburger-rot {
    transform: rotate(-45deg);
  }

  /* Full-screen overlay: always the dark design. Lives outside .m1nav,
     so it declares the shared literals it needs itself. */
  .m1nav-moverlay {
    --m1nav-ease: cubic-bezier(0.45, 0, 0.55, 1);
    --m1nav-mdisp: block; /* resolves the inline FOUC-gate display */
    position: fixed;
    inset: 0;
    z-index: 0; /* under the z-1 header row: logo + bar pill stay on top */
    background-color: var(--fill--slate--900, #121316);
    font-family: var(--font--body, "At Hauss", Arial, sans-serif);
    font-feature-settings: "case" 1, "cpsp" 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* the wrapper is pointer-events: none anyway */
    transition: opacity 0.25s var(--m1nav-ease), visibility 0s linear 0.25s;
  }
  .m1nav-moverlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s var(--m1nav-ease), visibility 0s;
  }

  /* Scroll region: 48px below the bar pill (pill bottom lands at 52px)
     down to the Contact button (48px bottom margin + 53px button), so
     links clip exactly at the button's top edge like the Figma. It's a
     clip for the two drill panels, which scroll independently. */
  .m1nav-moverlay-scroll {
    position: absolute;
    top: 100px;
    left: 24px;
    right: 24px;
    bottom: 101px;
    overflow: hidden;
  }
  /* Drill panels: root slips out left as the sub slides in from the
     right (and back again), a short travel + fade rather than a full
     viewport slide. Shown state transitions visibility instantly;
     hidden states delay it so the leaving panel stays rendered
     through its fade. */
  .m1nav-mpanel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition:
      transform 0.3s var(--m1nav-ease),
      opacity 0.3s var(--m1nav-ease),
      visibility 0s;
  }
  .m1nav-moverlay-scroll.is-sub .m1nav-mpanel--root,
  .m1nav-moverlay-scroll:not(.is-sub) .m1nav-mpanel--sub {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.3s var(--m1nav-ease),
      opacity 0.3s var(--m1nav-ease),
      visibility 0s linear 0.3s;
  }
  .m1nav-moverlay-scroll.is-sub .m1nav-mpanel--root {
    transform: translateX(-32px);
  }
  .m1nav-moverlay-scroll:not(.is-sub) .m1nav-mpanel--sub {
    transform: translateX(32px);
  }
  .m1nav-msections {
    display: flex;
    flex-direction: column;
    gap: var(--space--sm, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Hairline between sections: a horizontal gradient that brightens to
     the same #3b3a3c literal at its center */
  .m1nav-msection:not(:last-child)::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: var(--space--sm, 1.5rem);
    background: linear-gradient(
      90deg,
      rgba(59, 58, 60, 0.3),
      #3b3a3c 50%,
      rgba(59, 58, 60, 0.3)
    );
  }
  /* Section heads: the site's display face in the resting dimmed ink;
     tapping one drills into its sub panel */
  .m1nav-msection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font--display, "FK Grotesk Neue", "At Hauss", Arial, sans-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    font-feature-settings: "ss02" 1;
    color: var(--fill--neutral--500, #afadac);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.25s var(--m1nav-ease);
  }
  .m1nav-msection-head:focus-visible {
    color: var(--fill--neutral--0, #ffffff);
  }
  /* Sideways chevrons: 8x13 at a 2px stroke, matching the Figma glyph
     1:1. Inherits color so it dims and lights with its label. */
  .m1nav-chevron-side {
    flex: none;
    width: 8px;
    height: 13px;
    color: inherit;
  }

  /* ---- Sub panel (Figma 3102:5612) ---- */
  /* Back row: left chevron + the section name, one step smaller than
     the root rows and in the same dimmed ink */
  .m1nav-mback {
    display: flex;
    align-items: center;
    gap: var(--space--xs, 1rem);
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font--display, "FK Grotesk Neue", "At Hauss", Arial, sans-serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    font-feature-settings: "ss02" 1;
    color: var(--fill--neutral--500, #afadac);
    text-align: left;
    cursor: pointer;
    transition: color 0.25s var(--m1nav-ease);
  }
  .m1nav-mback:focus-visible {
    color: var(--fill--neutral--0, #ffffff);
  }
  /* Same edge-fading hairline as between the root rows */
  .m1nav-mrule {
    height: 1px;
    margin: var(--space--sm, 1.5rem) 0;
    background: linear-gradient(
      90deg,
      rgba(59, 58, 60, 0.3),
      #3b3a3c 50%,
      rgba(59, 58, 60, 0.3)
    );
  }
  /* Section links: the display face at 18px, full ink; align-self
     keeps tap targets hugging the text */
  .m1nav-msublinks {
    display: flex;
    flex-direction: column;
    gap: var(--space--sm, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .m1nav-msublinks li {
    display: flex;
  }
  .m1nav-msublink {
    align-self: flex-start;
    font-family: var(--font--display, "FK Grotesk Neue", "At Hauss", Arial, sans-serif);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    font-feature-settings: "ss02" 1;
    color: var(--fill--neutral--0, #ffffff);
    text-decoration: none;
    transition: color 0.2s var(--m1nav-ease);
  }
  .m1nav-msublink:focus-visible {
    color: var(--fill--neutral--500, #afadac);
  }

  /* Links scroll away behind this fade and the anchored Contact button */
  .m1nav-mfade {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 101px;
    height: 64px;
    background: linear-gradient(to top, var(--fill--slate--900, #121316), transparent);
    pointer-events: none;
  }
  .m1nav-mcta {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 53px;
    border-radius: var(--space--2xs, 0.5rem);
    background-color: var(--fill--slate--primary, #99cbff);
    color: var(--fill--slate--900, #121316);
    font-size: 0.9375rem;
    line-height: var(--height--140, 1.4);
    letter-spacing: var(--letter-spacing--body, 0.01em);
    text-decoration: none;
  }

  .m1nav-mbar-toggle:focus-visible,
  .m1nav-mbar-link:focus-visible,
  .m1nav-msection-head:focus-visible,
  .m1nav-mback:focus-visible,
  .m1nav-msublink:focus-visible,
  .m1nav-mcta:focus-visible {
    outline: 2px solid var(--fill--slate--primary, #99cbff);
    outline-offset: 2px;
  }
}

/* ---- Reduced motion ---------------------------------------------------- */
/* Every state change still happens (theme swap, open/close, drill), just
   without the choreography: near-zero durations so transitionend-style
   timing still resolves, zero delays so the sequenced legs (burger,
   drill visibility hand-off) collapse to instant. Pseudo-elements carry
   their own transitions, so they're listed alongside the descendants. */
@media (prefers-reduced-motion: reduce) {
  .m1nav,
  .m1nav *,
  .m1nav *::before,
  .m1nav-menu::before,
  .m1nav-scrim,
  .m1nav-moverlay,
  .m1nav-moverlay * {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
}