.staggered-menu-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 40;
}

.staggered-menu-wrapper.fixed-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 40;
  overflow: hidden;
}

.staggered-menu-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2em;
  background: transparent;
  pointer-events: none;
  z-index: 20;
}

.staggered-menu-header > * {
  pointer-events: auto;
}

.sm-logo {
  display: flex;
  align-items: center;
  user-select: none;
}

.sm-logo-img {
  display: block;
  height: 32px;
  width: auto;
  object-fit: contain;
}

.sm-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #e9e9ef;
  font-weight: 500;
  line-height: 1;
  overflow: visible;
}

.sm-toggle:focus-visible {
  outline: 2px solid #ffffffaa;
  outline-offset: 4px;
  border-radius: 4px;
}

.sm-line:last-of-type {
  margin-top: 6px;
}

.sm-toggle-textWrap {
  position: relative;
  display: inline-block;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  width: var(--sm-toggle-width, auto);
  min-width: var(--sm-toggle-width, auto);
}

.sm-toggle-textInner {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.sm-toggle-line {
  display: block;
  height: 1em;
  line-height: 1;
}

.sm-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.sm-panel-itemWrap {
  position: relative;
  overflow: hidden;
  line-height: 1;
}

.sm-icon-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.sm-line {
  display: none !important;
}

.staggered-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(260px, 38vw, 420px);
  height: 100%;
  background: white;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  padding: 6em 2em 2em 2em;
  overflow-y: auto;
  z-index: 10;
}

[data-position='left'] .staggered-menu-panel {
  right: auto;
  left: 0;
}

.sm-prelayers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(260px, 38vw, 420px);
  pointer-events: none;
  z-index: 5;
}

[data-position='left'] .sm-prelayers {
  right: auto;
  left: 0;
}

.sm-prelayer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform: translateX(0);
}

.sm-panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sm-socials {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sm-socials-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--sm-accent, #ff0000);
}

.sm-socials-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.sm-socials-list .sm-socials-link {
  opacity: 1;
}

.sm-socials-list:hover .sm-socials-link {
  opacity: 0.35;
}

.sm-socials-list:hover .sm-socials-link:hover {
  opacity: 1;
}

.sm-socials-link:focus-visible {
  outline: 2px solid var(--sm-accent, #ff0000);
  outline-offset: 3px;
}

.sm-socials-list:focus-within .sm-socials-link {
  opacity: 0.35;
}

.sm-socials-list:focus-within .sm-socials-link:focus-visible {
  opacity: 1;
}

.sm-socials-link {
  font-size: 1.2rem;
  font-weight: 500;
  color: #111;
  text-decoration: none;
  position: relative;
  padding: 2px 0;
  display: inline-block;
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
}

.sm-socials-link:hover {
  color: var(--sm-accent, #ff0000);
}

.sm-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
}

.sm-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sm-panel-item {
  position: relative;
  color: #000;
  font-weight: 600;
  font-size: 3.5rem;
  cursor: pointer;
  line-height: 1;
  letter-spacing: -2px;
  text-transform: uppercase;
  transition:
    background 0.25s,
    color 0.25s;
  display: inline-block;
  text-decoration: none;
  padding-right: 1.4em;
}

.staggered-menu-panel .sm-socials-list .sm-socials-link {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.staggered-menu-panel .sm-socials-list:hover .sm-socials-link:not(:hover) {
  opacity: 0.35;
}

.staggered-menu-panel .sm-socials-list:focus-within .sm-socials-link:not(:focus-visible) {
  opacity: 0.35;
}

.staggered-menu-panel .sm-socials-list .sm-socials-link:hover,
.staggered-menu-panel .sm-socials-list .sm-socials-link:focus-visible {
  opacity: 1;
}

.sm-panel-itemLabel {
  display: inline-block;
  will-change: transform;
  transform-origin: 50% 100%;
}

.sm-panel-item:hover {
  color: var(--sm-accent, #5227ff);
}

.sm-panel-list[data-numbering] {
  counter-reset: smItem;
}

.sm-panel-list[data-numbering] .sm-panel-item::after {
  counter-increment: smItem;
  content: counter(smItem, decimal-leading-zero);
  position: absolute;
  top: 0.1em;
  right: 2.8em;
  font-size: 18px;
  font-weight: 400;
  color: var(--sm-accent, #5227ff);
  letter-spacing: 0;
  pointer-events: none;
  user-select: none;
  opacity: var(--sm-num-opacity, 0);
}

@media (max-width: 1024px) {
  .staggered-menu-panel {
    width: 100%;
    left: 0;
    right: 0;
  }

  .staggered-menu-wrapper[data-open] .sm-logo-img {
    filter: invert(100%);
  }
}

@media (max-width: 640px) {
  .staggered-menu-panel {
    width: 100%;
    left: 0;
    right: 0;
  }

  .staggered-menu-wrapper[data-open] .sm-logo-img {
    filter: invert(100%);
  }
}
/* ===== StaggeredMenu overrides: sticky header + visible toggle ===== */
:root { --sm-nav-h: 72px; }

/* Give the page space for the fixed header */
body { padding-top: var(--sm-nav-h); }

/* Make header fixed + translucent on light pages */
.staggered-menu-header{
  position: fixed;          /* was absolute */
  top: 0; left: 0; right: 0;
  height: var(--sm-nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e6e9ef;
  z-index: 1000;
}

/* Ensure the toggle is readable on light background */
.sm-toggle{ color:#0b1324; }

/* When menu is open: let the sweep/panel color show through and flip ink to white */
.staggered-menu-wrapper[data-open] .staggered-menu-header{
  background: transparent;
  border-bottom-color: transparent;
  color:#fff;
}
.staggered-menu-wrapper[data-open] .sm-toggle{ color:#fff; }
/* Optional: invert a dark logo when menu open (remove if you have a light-on-dark logo) */
.staggered-menu-wrapper[data-open] .sm-logo-img{ filter: invert(100%); }

/* Small screens: a touch more padding for the hit target */
@media (max-width: 640px){
  .staggered-menu-header{ padding: 12px 16px; }
}
/* ===== FIX: kill the big gap & make Close visible ===== */

/* The wrapper should not consume a full viewport height */
.staggered-menu-wrapper{
  height:auto !important;
}

/* Make the sliding panel & color prelayers fixed to the viewport,
   so they no longer depend on wrapper height */
.staggered-menu-panel,
.sm-prelayers{
  position:fixed !important;
  top:0; height:100dvh;
  z-index:999; /* below header, above page content */
}

/* Respect left/right placement */
[data-position="right"] .staggered-menu-panel,
[data-position="right"] .sm-prelayers{ right:0; left:auto; }
[data-position="left"]  .staggered-menu-panel,
[data-position="left"]  .sm-prelayers{ left:0; right:auto; }

/* Sticky header bar */
:root{ --sm-nav-h:72px; }
body{ padding-top:var(--sm-nav-h); }

.staggered-menu-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--sm-nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid #e6e9ef;
  z-index:1000;
  color:#0b1324; /* base ink */
}

/* Make the toggle clearly visible (black) in both states */
.sm-toggle{ color:#000 !important; }
.staggered-menu-wrapper[data-open] .sm-toggle{ color:#000 !important; }

/* Optional: if your logo became too light when open, remove any invert */
.staggered-menu-wrapper[data-open] .sm-logo-img{ filter:none !important; }

/* Small screens: tighter padding */
@media (max-width:640px){
  .staggered-menu-header{ padding:12px 16px; }
}
/* ===== Make Menu/Close text clearly visible ===== */
.staggered-menu-header .sm-toggle{
  color:#0b1324 !important;   /* dark ink */
  font-weight:800;
  font-size:14px;
  letter-spacing:.02em;
}

/* ensure the text lines and icon use the same ink */
.staggered-menu-header .sm-toggle .sm-toggle-line{ color:inherit; }
.staggered-menu-header .sm-icon-line{ background: currentColor !important; }

/* keep it dark even when the drawer is open */
.staggered-menu-wrapper[data-open] .staggered-menu-header .sm-toggle{
  color:#0b1324 !important;
}
/* Sticky header look */
:root { --sm-nav-h: 72px; }
body { padding-top: var(--sm-nav-h); }

.staggered-menu-header{
  position: fixed; top:0; left:0; right:0; z-index:1000;
  height: var(--sm-nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid #e6e9ef;
}

/* Make Menu/Close text + icon LINES black and always visible */
.staggered-menu-header .sm-toggle{ color:#0b1324 !important; font-weight:800; }
.staggered-menu-header .sm-toggle .sm-toggle-line{ color:inherit; }
.staggered-menu-header .sm-icon-line{ background: currentColor !important; }

/* Full-screen panel & color layers are fixed so they don't affect layout */
.staggered-menu-panel,
.sm-prelayers{
  position: fixed !important;
  top:0; bottom:0; height:100dvh; z-index:999;
}
[data-position="right"] .staggered-menu-panel,
[data-position="right"] .sm-prelayers{ right:0; left:auto; }
[data-position="left"] .staggered-menu-panel,
[data-position="left"] .sm-prelayers{ left:0; right:auto; }
/* Make the label auto-size; no clipping */
.staggered-menu-header .sm-toggle-textWrap{
  width:auto !important;
  min-width:auto !important;
  height:1em;            /* still only shows one line at a time */
  overflow:hidden;
}

/* Readable label + icon */
.staggered-menu-header .sm-toggle{
  color:#0b1324 !important;   /* black */
  font-weight:800;
  font-size:16px;             /* tweak as you like */
  letter-spacing:0;           /* keep crisp */
}
.staggered-menu-header .sm-icon-line{ background: currentColor !important; }
/* =========================
   Dark Nav Inversion (black bg / white text)
   Paste AFTER your existing StaggeredMenu CSS
========================= */
:root{
  --sm-bg:    #000;         /* nav surface */
  --sm-ink:   #fff;         /* primary ink */
  --sm-border:#1a1f2b;      /* subtle divider on black */
}

/* Sticky header: black + translucent + white ink */
.staggered-menu-header{
  background: rgba(0,0,0,.82) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sm-border) !important;
  color: var(--sm-ink) !important;
}

/* Toggle label + icon lines in white */
.sm-toggle{ color:#fff !important; }
.staggered-menu-header .sm-toggle .sm-toggle-line{ color:inherit; }
.staggered-menu-header .sm-icon-line{ background: currentColor !important; }

/* Keep it white when the drawer is open too */
.staggered-menu-wrapper[data-open] .staggered-menu-header{
  background: rgba(0,0,0,0) !important;
  border-bottom-color: transparent !important;
  color:#fff !important;
}
.staggered-menu-wrapper[data-open] .sm-toggle{ color:#fff !important; }

/* Slide-out panel: black */
.staggered-menu-panel{
  background: rgba(0,0,0,.94) !important;
  color:#fff !important;
}

/* Big menu items: white by default, accent on hover */
.sm-panel-item{
  color:#fff !important;
}
.sm-panel-item:hover{
  color: var(--sm-accent, #5227ff) !important;
}

/* “Socials” area: keep readable on black */
.sm-socials-title{
  color: var(--sm-accent, #5227ff) !important;
}
.sm-socials-link{
  color:#fff !important;
}
.sm-socials-list:hover .sm-socials-link:not(:hover),
.sm-socials-list:focus-within .sm-socials-link:not(:focus-visible){
  opacity:.45; /* subtle deemphasis, still readable on black */
}
.sm-socials-link:hover{ color: var(--sm-accent, #5227ff) !important; }
.sm-socials-link:focus-visible{
  outline: 2px solid #ffffffb3 !important;
  outline-offset: 3px !important;
}

/* Optional: flip a dark logo to light on black.
   Remove this if you already use a light-on-dark logo */
.sm-logo-img{ filter: invert(100%) contrast(105%); }

/* Mobile padding keeps same look */
@media (max-width:640px){
  .staggered-menu-header{ padding:12px 16px; }
}
/* =======================================================
   MIRAI STUDIOS — Dark Nav + White Text Theme Override
   (for StaggeredMenu)
   Paste AFTER all previous menu CSS
======================================================= */

/* === Global color variables === */
:root {
  --sm-bg: #000;             /* Navbar + panel background */
  --sm-ink: #fff;            /* Primary text/icon color */
  --sm-border: #1a1f2b;      /* Subtle divider on black */
  --sm-accent: #8b6cff;      /* Accent purple hover */
}

/* === HEADER / NAVBAR === */
.staggered-menu-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--sm-nav-h, 72px);
  background: var(--sm-bg) !important;
  color: var(--sm-ink) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--sm-border);
  z-index: 1000;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Logo — invert dark logo to appear light on black */
.sm-logo-img {
  filter: invert(100%) brightness(1.2);
}

/* === TOGGLE BUTTON (Menu / Close) === */
.sm-toggle {
  color: var(--sm-ink) !important;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.sm-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Toggle icon lines */
.sm-icon-line {
  background: var(--sm-ink) !important;
}

/* Text inside toggle (Menu / Close) */
.sm-toggle-textWrap {
  color: var(--sm-ink) !important;
}

/* Keep text white when menu is open */
.staggered-menu-wrapper[data-open] .sm-toggle,
.staggered-menu-wrapper[data-open] .sm-toggle-textWrap {
  color: var(--sm-ink) !important;
}

/* === SLIDE-OUT PANEL === */
.staggered-menu-panel {
  background: var(--sm-bg) !important;
  color: var(--sm-ink) !important;
  border-left: 1px solid var(--sm-border);
}

/* Menu items */
.sm-panel-item {
  color: var(--sm-ink) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 3.5rem;
  letter-spacing: -2px;
  line-height: 1;
}

.sm-panel-item:hover {
  color: var(--sm-accent) !important;
}

/* Numbering accent (still purple) */
.sm-panel-list[data-numbering] .sm-panel-item::after {
  color: var(--sm-accent) !important;
}

/* === SOCIAL LINKS AREA === */
.sm-socials-title {
  color: var(--sm-accent) !important;
  font-weight: 600;
}

.sm-socials-link {
  color: var(--sm-ink) !important;
  font-size: 1.1rem;
  font-weight: 500;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.sm-socials-link:hover {
  color: var(--sm-accent) !important;
}

.sm-socials-list:hover .sm-socials-link:not(:hover),
.sm-socials-list:focus-within .sm-socials-link:not(:focus-visible) {
  opacity: 0.45;
}

.sm-socials-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
}

/* === OPEN STATE === */
.staggered-menu-wrapper[data-open] .staggered-menu-header {
  background: var(--sm-bg) !important;
  border-bottom-color: var(--sm-border);
  color: var(--sm-ink);
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 640px) {
  .staggered-menu-header {
    padding: 12px 16px;
  }
  .sm-panel-item {
    font-size: 2.8rem;
  }
}
/* Start hidden (no transforms here) */
.staggered-menu-panel,
.sm-prelayers { 
  opacity: 0;
  pointer-events: none; /* prevents accidental clicks pre-init */
}

/* Reveal only after JS preps positions */
.staggered-menu-wrapper[data-ready] .staggered-menu-panel,
.staggered-menu-wrapper[data-ready] .sm-prelayers {
  opacity: 1;
  pointer-events: auto;
}
/* Force the hamburger/cross + label to white on the dark header */
.staggered-menu-header .sm-toggle,
.staggered-menu-wrapper[data-open] .staggered-menu-header .sm-toggle{
  color:#fff !important;
}

/* Make the cross bars themselves white (they use currentColor) */
.staggered-menu-header .sm-icon-line{
  background:#fff !important;
}

/* Keep the Menu/Close text in sync */
.staggered-menu-header .sm-toggle .sm-toggle-line{
  color:inherit !important;
}

/* Optional: stronger focus ring on dark */
.staggered-menu-header .sm-toggle:focus-visible{
  outline:2px solid rgba(255,255,255,.7);
  outline-offset:3px;
  border-radius:4px;
}
/* --- Kill invisible blockers from the staggered menu on mobile --- */
#staggeredMenu .sm-prelayers,
#staggeredMenu .sm-prelayer {
  pointer-events: none !important; /* these are purely visual sweeps */
}

/* Panel is off-screen by default: don't let it eat taps */
#staggeredMenu .staggered-menu-panel[aria-hidden="true"] {
  pointer-events: none !important;
}

/* When the menu is closed (no data-open), nothing should capture taps */
#staggeredMenu:not([data-open]) .staggered-menu-panel {
  pointer-events: none !important;
}

/* Only when menu is actually open should the panel accept taps */
#staggeredMenu[data-open] .staggered-menu-panel {
  pointer-events: auto !important;
}

/* Belt & suspenders: if anything else is aria-hidden in the menu, make it untouchable */
#staggeredMenu [aria-hidden="true"] {
  pointer-events: none !important;
}

/* Keep hero CTA unquestionably on top and tappable */
#top .hero__actions { position: relative; z-index: 1001; }
#top .link-cta,
#top .btn { pointer-events: auto !important; touch-action: manipulation; }
#prism, #prism * { pointer-events: none !important; } /* your canvas layer never intercepts taps */
  /* ================== SAFETY: kill invisible blockers ================== */
  /* Color sweeps are visual only */
  #staggeredMenu .sm-prelayers,
  #staggeredMenu .sm-prelayer { pointer-events:none !important; }

  /* Panel is off-screen/closed by default → don't eat taps */
  #staggeredMenu .staggered-menu-panel[aria-hidden="true"] { pointer-events:none !important; }
  #staggeredMenu:not([data-open]) .staggered-menu-panel    { pointer-events:none !important; }

  /* Only accept taps when the menu is actually open */
  #staggeredMenu[data-open] .staggered-menu-panel { pointer-events:auto !important; }

  /* Prevent first-frame flash before GSAP sets positions */
  #staggeredMenu .staggered-menu-panel,
  #staggeredMenu .sm-prelayers{
    opacity:0; visibility:hidden; will-change:transform,opacity;
  }
  #staggeredMenu[data-ready] .staggered-menu-panel,
  #staggeredMenu[data-ready] .sm-prelayers{
    opacity:1; visibility:visible;
    /* NOTE: no pointer-events:auto here — panel stays inert until [data-open] */
    transition: opacity .15s ease;
  }

  /* Bigger logo */
  #staggeredMenu .sm-logo-img{ height:56px !important; width:auto; }
  @media (min-width:900px){ #staggeredMenu .sm-logo-img{ height:72px !important; } }

  /* Toggle icon color */
  #staggeredMenu .sm-toggle{ color:#fff !important; }
  #staggeredMenu .sm-icon-line{ background: currentColor !important; }

  /* Optional: tweak logo top padding */
  #staggeredMenu .sm-logo { display:flex; align-items:center; padding-top:12px; }
  /* Visual only – never eat taps */
  #staggeredMenu .sm-prelayers,
  #staggeredMenu .sm-prelayer { pointer-events:none !important; }

  /* Panel inert unless menu is open */
  #staggeredMenu .staggered-menu-panel[aria-hidden="true"],
  #staggeredMenu:not([data-open]) .staggered-menu-panel { pointer-events:none !important; }
  #staggeredMenu[data-open] .staggered-menu-panel { pointer-events:auto !important; }

  /* No CSS fade here — GSAP will handle everything */
  #staggeredMenu .staggered-menu-panel,
  #staggeredMenu .sm-prelayers{
    opacity:0; visibility:hidden;
  }
  #staggeredMenu[data-ready] .staggered-menu-panel,
  #staggeredMenu[data-ready] .sm-prelayers{
    opacity:1; visibility:visible;
  }

  /* Smoother transforms */
  #staggeredMenu .staggered-menu-panel,
  #staggeredMenu .sm-prelayer{
    backface-visibility:hidden;
    transform:translateZ(0);
  }

  /* Bigger logo */
  #staggeredMenu .sm-logo-img{ height:56px !important; width:auto; }
  @media (min-width:900px){ #staggeredMenu .sm-logo-img{ height:72px !important; } }

  /* Toggle icon color */
  #staggeredMenu .sm-toggle{ color:#fff !important; }
  #staggeredMenu .sm-icon-line{ background: currentColor !important; }

  /* Optional: logo top padding */
  #staggeredMenu .sm-logo { display:flex; align-items:center; padding-top:12px; }

  /* Prelayers are visual only */
  #staggeredMenu .sm-prelayers,
  #staggeredMenu .sm-prelayer { pointer-events:none !important; }

  /* Panel: NEVER clickable unless open */
  #staggeredMenu .staggered-menu-panel {
    pointer-events:none !important;
    contain: paint;               /* isolate paint/clip region */
    will-change: transform;
    z-index: 999;                 /* below header, above page */
  }
  /* When closed, collapse the clickable area entirely */
  #staggeredMenu .staggered-menu-panel[aria-hidden="true"] {
    clip-path: inset(0 0 0 100%) !important; /* zero width */
  }
  /* Only when open restore full hitbox */
  #staggeredMenu[data-open] .staggered-menu-panel {
    pointer-events:auto !important;
    clip-path: inset(0 0 0 0) !important;
  }

  /* Keep the logo larger */
  #staggeredMenu .sm-logo-img{ height:56px !important; width:auto; }
  @media (min-width:900px){ #staggeredMenu .sm-logo-img{ height:72px !important; } }

  /* Toggle icon color */
  #staggeredMenu .sm-toggle{ color:#fff !important; }
  #staggeredMenu .sm-icon-line{ background: currentColor !important; }
/* Smooth slide + iOS safe-area */
:root { --nav-h: 72px; }
.staggered-menu-header{
  transition: transform .24s ease, background-color .2s ease, border-color .2s ease;
  will-change: transform;
  padding-top: max(0px, env(safe-area-inset-top)); /* a little safer on iOS */
}

/* Hidden state */
.staggered-menu-header.header--hidden{
  transform: translateY(calc(-1 * var(--nav-h)));
}
/* smooth slide + keep GPU layer */
.staggered-menu-header{
  transition: transform .24s ease, background-color .2s ease, border-color .2s ease;
  will-change: transform;
}

/* hidden state (slide up by nav height) */
.staggered-menu-header.header--hidden{
  transform: translateY(calc(-1 * var(--nav-h))) translateZ(0);
}