/* Mobile menu — iOS-style grouped list (authoritative layer, load last) */

html body.mobile-menu-open {
  overflow: hidden !important;
  cursor: auto !important;
}

html body.mobile-menu-open .cursor,
html body.mobile-menu-open .cursor-ring {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ─── Backdrop ───────────────────────────────────────────────────── */
html body .mobile-menu-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99990 !important;
  background: rgba(0, 0, 0, 0.48) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  transition: opacity 0.32s ease !important;
}

html body .mobile-menu-backdrop.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ─── Drawer shell ───────────────────────────────────────────────── */
html body aside.mobile-menu-drawer,
html body #mobileMenuDrawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99991 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 100dvh !important;
  min-height: 100svh !important;
  height: 100dvh !important;
  height: 100svh !important;
  margin: 0 !important;
  padding:
    max(12px, env(safe-area-inset-top, 0px))
    max(20px, env(safe-area-inset-right, 0px))
    max(24px, env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px)) !important;
  box-sizing: border-box !important;
  color: #f5f5f7 !important;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201, 169, 110, 0.14) 0%, transparent 52%),
    rgba(12, 12, 14, 0.98) !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 14px, 0) scale(0.985) !important;
  transition:
    transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.32s ease,
    visibility 0.32s ease !important;
  overflow: hidden !important;
  touch-action: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body aside.mobile-menu-drawer.open,
html body #mobileMenuDrawer.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* ─── Header ─────────────────────────────────────────────────────── */
html body .mobile-menu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex: 0 0 auto !important;
  padding: 4px 0 20px !important;
  border-bottom: none !important;
  background: transparent !important;
}

html body .mobile-menu-header-start {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body .mobile-menu-brand {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  color: #f5f5f7 !important;
  text-decoration: none !important;
}

html body .mobile-menu-brand span {
  color: #c9a96e !important;
}

html body .mobile-menu-eyebrow {
  margin: 0 !important;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
  font-size: clamp(2rem, 8vw, 2.125rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #f5f5f7 !important;
  line-height: 1.1 !important;
}

html body .mobile-menu-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(120, 120, 128, 0.28) !important;
  color: rgba(235, 235, 245, 0.82) !important;
  font-family: system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(201, 169, 110, 0.18) !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

html body .mobile-menu-close:active {
  transform: scale(0.94) !important;
  background: rgba(120, 120, 128, 0.42) !important;
}

/* ─── Body + iOS grouped list ────────────────────────────────────── */
html body .mobile-menu-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 8px 0 12px !important;
  background: transparent !important;
}

html body .mobile-menu-section-label {
  margin: 0 0 8px 4px !important;
  padding: 0 !important;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(235, 235, 245, 0.52) !important;
}

html body .mobile-menu-group {
  position: relative !important;
  z-index: 2 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(44, 44, 46, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.22) !important;
  pointer-events: auto !important;
}

html body .mobile-nav-links {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .mobile-nav-links li {
  margin: 0 !important;
  padding: 0 !important;
}

html body .mobile-nav-links li + li {
  border-top: 0.5px solid rgba(255, 255, 255, 0.08) !important;
}

html body .mobile-menu-drawer .mobile-nav-links a,
html body .mobile-menu-drawer .mobile-nav-links a:visited,
html body.services-page .mobile-menu-drawer .mobile-nav-links a,
html body.home-page .mobile-menu-drawer .mobile-nav-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  position: relative !important;
  z-index: 3 !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #f5f5f7 !important;
  background: transparent !important;
  -webkit-text-fill-color: #f5f5f7 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  transition: background 0.18s ease !important;
  -webkit-tap-highlight-color: rgba(201, 169, 110, 0.18) !important;
}

html body .mobile-menu-link-label,
html body .mobile-menu-chevron {
  pointer-events: none !important;
}

html body .mobile-menu-link-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body .mobile-menu-chevron {
  flex-shrink: 0 !important;
  width: 8px !important;
  height: 14px !important;
  opacity: 0.38 !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none'%3E%3Cpath d='M1 1l6 6-6 6' stroke='%23ebebf5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
}

html body .mobile-menu-drawer .mobile-nav-links a::after {
  display: none !important;
  content: none !important;
}

html body .mobile-menu-drawer .mobile-nav-links a:active {
  background: rgba(255, 255, 255, 0.08) !important;
}

html body .mobile-menu-drawer .mobile-nav-links a.is-active {
  color: #c9a96e !important;
  -webkit-text-fill-color: #c9a96e !important;
  background: rgba(201, 169, 110, 0.1) !important;
}

html body .mobile-menu-drawer .mobile-nav-links a.is-active .mobile-menu-chevron {
  opacity: 0.72 !important;
}

/* ─── Footer CTA ─────────────────────────────────────────────────── */
html body .mobile-menu-footer {
  flex: 0 0 auto !important;
  padding-top: 16px !important;
  border-top: none !important;
  background: transparent !important;
}

html body .mobile-menu-drawer .mobile-nav-cta,
html body .mobile-menu-drawer .mobile-nav-cta:visited {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: 14px !important;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #1a1206 !important;
  background: #c9a96e !important;
  -webkit-text-fill-color: #1a1206 !important;
  box-shadow: 0 4px 16px rgba(201, 169, 110, 0.28) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  transition: transform 0.18s ease, filter 0.18s ease !important;
  -webkit-tap-highlight-color: rgba(201, 169, 110, 0.18) !important;
}

html body .mobile-menu-drawer .mobile-nav-cta:active {
  transform: scale(0.985) !important;
  filter: brightness(1.05) !important;
}

html body.mobile-menu-open .sfug-ma-fab {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .mobile-menu-backdrop,
  html body aside.mobile-menu-drawer,
  html body #mobileMenuDrawer {
    transition: none !important;
  }

  html body aside.mobile-menu-drawer,
  html body #mobileMenuDrawer {
    transform: none !important;
    opacity: 1 !important;
  }
}