/* ═══════════════════════════════════════════════════════════════════════════
   rzv.studio — menu.css  (MOBILE HEADER — the burger + the panel)

   Haseeb: "Header on mobile change to just modern hamburger top right only.
   Beautiful mobile menu."

   Loads AFTER base.css on every page. Owns nothing above 760px: the desktop
   header — .nav-center, its sliding .nav-pill, .nav-meta and the motion switch
   — is untouched, and every rule that could reach it is inside the
   @media(max-width:760px) block below, which is base.css's OWN mobile
   breakpoint (base.css:651, where --header-h drops to 62px and the glass goes
   opaque). No new breakpoint was invented.

   ── THE NO-JS CONTRACT ────────────────────────────────────────────────────
   Everything that collapses the desktop header is gated on `html.menu-ready`,
   which menu.js adds at PARSE TIME and removes again if its own init throws.
   So with JS off, 404'd, or broken:
     · .burger stays display:none — a dead control never appears
     · .nav-center and .nav-meta stay exactly as they are today
     · .mnav is a closed disclosure nobody can open, and nothing links to it
   i.e. the phone keeps the cramped-but-complete header it has now. Nothing
   here is hidden in CSS waiting for JS to reveal it — the panel's hidden state
   is a closed disclosure's resting state, opened by the READER, not by a
   script running on load.

   TRAP 1 (base.css:11): no backdrop-filter anywhere in this file. .site-header
   already carries one at desktop widths and base.css strips it ≤760px; the
   panel is a genuinely opaque --bg ground with a painted wash, and it holds no
   mix-blend-mode child, so the iOS black box cannot happen here.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SCROLL LOCK ──────────────────────────────────────────────────────────
   THE SAME CLASS AND THE SAME RULE as services.css:169, deliberately — there
   must be exactly one scroll lock on this site. It is re-declared here (byte
   for byte) because services.css only ships on index.html, and the menu ships
   on all 27 pages; on index both files declare it identically, so neither can
   win a fight with the other.
   menu.js takes the lock only if nothing else holds it and releases only what
   it took, so the services modal and the menu can never both own it. ── */
body.svc-lock{overflow:hidden}

/* ═══ THE BURGER ════════════════════════════════════════════════════════
   Two lines that MORPH into a close mark — they converge to the centre and
   then rotate, and on the way back they un-rotate and then separate. No
   cross-fade, no second icon: the same two bars are the menu mark and the
   close mark. Pure CSS, so it answers the tap on a page where GSAP never
   loaded.

   The asymmetry (top 20px, bottom 13px, both left-aligned) is what stops it
   reading as a generic three-line glyph; the width closes to 20px as the bars
   converge, so the X is symmetric.

   TIMING — the two halves are sequenced by transition-delay, not by JS:
     opening   lines converge 0.24s var(--ease), THEN bars rotate 0.38s
               var(--ease-spring) at +0.18s — the overshoot lands the X
     closing   bars un-rotate 0.26s var(--ease) immediately, THEN the lines
               separate 0.30s var(--ease) at +0.18s
   ═══ */
.burger{
  display:none;                      /* ← the no-JS default. See the contract. */
  position:relative;flex:none;
  width:42px;height:42px;padding:0;
  align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.burger:hover{background:var(--surface-2);border-color:var(--border-hi)}
.burger:focus-visible{outline:2px solid var(--a2);outline-offset:3px}
.burger-box{position:relative;display:block;width:20px;height:20px}
.burger-line{
  position:absolute;left:0;top:50%;height:1.5px;margin-top:-0.75px;
  transition:transform .30s var(--ease) .18s,width .30s var(--ease) .18s;
}
.burger-line.b1{width:20px;transform:translateY(-4px)}
.burger-line.b2{width:13px;transform:translateY(4px)}
.burger-bar{
  display:block;width:100%;height:100%;border-radius:2px;
  background:currentColor;transform-origin:50% 50%;
  transition:transform .26s var(--ease);
}
html.mnav-open .burger{background:var(--surface-hi);border-color:var(--border-hi)}
html.mnav-open .burger-line{
  transform:translateY(0);width:20px;
  transition:transform .24s var(--ease),width .24s var(--ease);
}
html.mnav-open .burger-line.b1 .burger-bar{transform:rotate(45deg)}
html.mnav-open .burger-line.b2 .burger-bar{transform:rotate(-45deg)}
html.mnav-open .burger-bar{transition:transform .38s var(--ease-spring) .18s}

/* ═══ THE PANEL ═════════════════════════════════════════════════════════
   Full screen, on the site's own dark ground, UNDER the header (z 480 against
   the header's 500) so the brand and the burger stay put and visible while it
   is open — the menu opens beneath a header that never moves, rather than
   replacing it.

   The ground's fade is owned by CSS (the .open class); the CONTENT cascade is
   owned by menu.js/GSAP. That split is what makes the no-GSAP path complete:
   drop the script's half and the panel still opens, it simply arrives all at
   once. ═══ */
.mnav{
  position:fixed;inset:0;z-index:480;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--bg);
  /* The page's own aura, brought inside — two very soft ellipses off the
     corners, painted (no blur filter, no blend group). Aurora tokens only. */
  background-image:
    radial-gradient(ellipse 620px 420px at 88% 6%, rgba(79,70,229,0.14), transparent 62%),
    radial-gradient(ellipse 560px 420px at 4% 96%, rgba(167,139,250,0.10), transparent 64%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .30s var(--ease),visibility 0s linear .30s;
}
.mnav.open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s,0s}
.mnav:focus{outline:none}

.mnav-inner{
  flex:1 0 auto;display:flex;flex-direction:column;
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding:calc(var(--header-h) + 34px) var(--gutter)
          calc(26px + env(safe-area-inset-bottom,0px));
}
.mnav-eyebrow{color:var(--dim);margin-bottom:22px}

.mnav-list{list-style:none;margin:0;padding:0}
.mnav-item{position:relative}
/* The mask the line rides out from behind. The negative margin pays back the
   descender room the padding buys, so the rows keep their true rhythm and
   "Journey" still has a tail. */
.mnav-mask{display:block;overflow:hidden;padding-bottom:0.10em;margin-bottom:-0.10em}
.mnav-link{
  display:block;padding:14px 0;text-decoration:none;color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
/* Full --text at rest, NOT --muted: this is a touch surface with no hover
   state to reveal anything, so a dim resting colour would simply be five dim
   links. The press feedback is an opacity dip instead. */
.mnav-line{
  display:flex;align-items:baseline;gap:16px;
  font-size:clamp(34px,11.5vw,54px);font-weight:300;letter-spacing:-0.04em;
  line-height:1.02;color:var(--text);
  transition:opacity .35s var(--ease);
}
.mnav-link:active .mnav-line{opacity:0.55;transition-duration:.08s}
.mnav-link:focus-visible{outline:2px solid var(--a2);outline-offset:6px;border-radius:6px}
/* HOUSE RULE: mono, uppercase, tracked. Same family as every overline on the
   site, sized to sit as an index numeral beside a 54px word. */
.mnav-idx{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.16em;
  color:var(--dim);flex:none;transition:color .35s var(--ease);
}
/* Current page — stamped by menu.js off location.pathname, so no page has to
   carry its own copy of the markup. The whole row is already at full --text,
   so the mark is the index numeral going periwinkle: the same job the header's
   .nav-pill does on desktop, done with the one element that is spare. */
.mnav-link.is-current .mnav-idx{color:var(--a2)}
.mnav-rule{display:block;height:1px;background:var(--border);transform-origin:0 50%}

.mnav-foot{
  margin-top:auto;padding-top:34px;
  display:flex;flex-direction:column;gap:20px;
}
.mnav-motion{display:flex;align-items:center;justify-content:space-between;gap:14px}
.mnav-motion .overline{color:var(--dim)}
.mnav-socials{display:flex;flex-wrap:wrap;gap:18px}
.mnav-social{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  transition:color .3s var(--ease);
}
.mnav-social:hover,.mnav-social:focus-visible{color:var(--text)}

/* ═══ THE COLLAPSE — base.css's own ≤760px breakpoint ═══════════════════ */
@media(max-width:760px){
  /* .menu-ready is menu.js saying "I parsed, I am wired". Everything that
     TAKES SOMETHING AWAY from the header hangs off it, so a page without a
     working menu.js loses nothing. */
  html.menu-ready .nav-center,
  html.menu-ready .nav-meta{display:none}
  html.menu-ready .burger{display:inline-flex}
  /* base.css:697 drops the wordmark ≤460px because the nav was crowding it.
     It is not any more — THE BRAND STAYS, per the brief. */
  html.menu-ready .brand-text{display:block}
}

/* Above the breakpoint the panel is not a thing that can exist — belt and
   braces for a menu left open when a phone is rotated into a tablet layout or
   a desktop window is dragged wider (menu.js also closes it on that change). */
@media(min-width:761px){
  .burger{display:none!important}
  .mnav{display:none}
}

/* Freeze, don't remove (base.css trap 3). The global reduced-motion block
   already collapses every duration here to ~0; this only makes sure the
   burger's sequencing delays go with them, so the mark snaps rather than
   waiting 0.18s to do nothing. */
@media(prefers-reduced-motion:reduce){
  .burger-line,.burger-bar,html.mnav-open .burger-line,html.mnav-open .burger-bar{
    transition-delay:0s!important;
  }
}
html.rzv-no-motion .burger-line,
html.rzv-no-motion .burger-bar,
html.rzv-no-motion.mnav-open .burger-line,
html.rzv-no-motion.mnav-open .burger-bar{transition-delay:0s}