/* MOBILE NAVIGATION — isolated final implementation */
@media (max-width: 900px) {
  html.mobile-nav-active,
  body.mobile-nav-active {
    overflow: hidden !important;
  }

  /* Belt-and-braces scroll lock: overflow:hidden alone does not stop
     touch-drag scrolling on iOS Safari, which lets the page scroll behind
     the open drawer (the footer becomes visible through/under it). JS
     sets body.style.top to the negative scroll offset when opening. */
  body.mobile-nav-active {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  #masthead.masthead {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: #0b1930 !important;
    overflow: visible !important;
    z-index: 5000 !important;
  }

  #masthead.masthead > div:first-child {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 5004 !important;
  }

  #masthead .masthead-logo {
    display: flex !important;
    align-items: center !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 62px) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #masthead .masthead-logo img,
  #masthead .masthead-logo .boxed-brand-logo {
    display: block !important;
    width: auto !important;
    height: 68px !important;
    max-width: min(270px, 70vw) !important;
    max-height: 68px !important;
    object-fit: contain !important;
    transform: none !important;
  }

  #masthead .masthead-toggle {
    display: flex !important;
    flex: 0 0 46px !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    inset: auto !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(250,248,242,.2) !important;
    border-radius: 50% !important;
    background: transparent !important;
    transform: none !important;
    z-index: 5006 !important;
  }

  #masthead .masthead-toggle span,
  #masthead .masthead-toggle span::before,
  #masthead .masthead-toggle span::after {
    width: 18px !important;
    height: 1.5px !important;
    background: #faf8f2 !important;
  }

  #masthead .masthead-toggle span {
    position: relative !important;
    display: block !important;
  }

  #masthead .masthead-toggle span::before,
  #masthead .masthead-toggle span::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
  }

  #masthead .masthead-toggle span::before { top: -6px !important; }
  #masthead .masthead-toggle span::after { top: 6px !important; }

  /* Desktop CTA is never part of the closed mobile header. */
  #masthead .masthead-cta {
    display: none !important;
  }

  /* Right-side drawer: hidden by transform, never centered. */
  #masthead .masthead-nav {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    inset-inline: auto 0 !important;
    width: min(84vw, 360px) !important;
    max-width: 360px !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 104px 24px 100px !important;
    box-sizing: border-box !important;
    background: #071426 !important;
    border: 0 !important;
    border-left: 1px solid rgba(250,248,242,.1) !important;
    box-shadow: -24px 0 56px rgba(0,0,0,.34) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translate3d(105%,0,0) !important;
    translate: none !important;
    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .32s cubic-bezier(.16,.84,.24,1),
                visibility .32s ease !important;
    z-index: 5003 !important;
  }

  #masthead.mobile-menu-open .masthead-nav {
    transform: translate3d(0,0,0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #masthead .masthead-nav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    transform: none !important;
  }

  #masthead .masthead-nav li {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #masthead .masthead-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(250,248,242,.1) !important;
    background: transparent !important;
    color: rgba(250,248,242,.78) !important;
    font-family: 'Manrope','Helvetica Neue',Arial,sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: normal !important;
    transform: none !important;
  }

  #masthead .masthead-nav a::before {
    display: none !important;
    content: none !important;
  }

  #masthead .masthead-nav a::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -1px !important;
    width: 0 !important;
    height: 2px !important;
    background: #c69238 !important;
  }

  #masthead .masthead-nav a[aria-current="page"] {
    color: #fffaf0 !important;
  }

  #masthead .masthead-nav a[aria-current="page"]::after {
    width: 40px !important;
  }

  /* Explicit overlay element inserted by mobile-nav.js, appended to
     <body> (a sibling of #masthead, not a descendant). #masthead has its
     own z-index (5000) which caps everything inside it — the toggle,
     nav links, drawer CTA declare higher values (5003–5007) but those
     only rank *within* #masthead's own stacking context. Compared
     against this overlay from outside, only #masthead's own 5000 counts.
     The overlay's z-index MUST stay below 5000, otherwise it paints over
     the entire header/drawer and silently swallows every tap on it
     (menu becomes visible but completely unclickable). */
  .mobile-nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4900 !important;
    background: rgba(2,8,16,.58) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .28s ease, visibility .28s ease !important;
  }

  .mobile-nav-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Close X while drawer is open. */
  #masthead.mobile-menu-open .masthead-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 5007 !important;
    background: #0b1930 !important;
  }

  #masthead.mobile-menu-open .masthead-toggle span {
    background: transparent !important;
  }

  #masthead.mobile-menu-open .masthead-toggle span::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }

  #masthead.mobile-menu-open .masthead-toggle span::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }

  /* Drawer-only CTA, inserted by JS as a direct child of <body> (not
     #masthead — #masthead is `position: sticky`, which becomes the
     containing block for `position: fixed` descendants, so a `bottom`
     offset here would resolve against the short header box instead of
     the viewport). */
  .mobile-drawer-cta {
    display: none !important;
  }

  body.mobile-nav-active .mobile-drawer-cta {
    display: block !important;
    position: fixed !important;
    right: 24px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(calc(84vw - 48px), 312px) !important;
    max-width: 312px !important;
    z-index: 5006 !important;
  }

  .mobile-drawer-cta .btn {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
  }

  body.mobile-nav-active .floating-email {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Content starts after real mobile header without strange bars. */
  .content {
    margin: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 480px) {
  #masthead.masthead,
  #masthead.masthead > div:first-child {
    height: 84px !important;
    min-height: 84px !important;
  }

  #masthead .masthead-logo img,
  #masthead .masthead-logo .boxed-brand-logo {
    height: 64px !important;
    max-width: min(248px, 69vw) !important;
    max-height: 64px !important;
  }

  #masthead .masthead-nav {
    width: 86vw !important;
    max-width: 350px !important;
    padding: 98px 22px 96px !important;
  }

  body.mobile-nav-active .mobile-drawer-cta {
    right: 22px !important;
    width: min(calc(86vw - 44px), 306px) !important;
  }
}