/* Federation — mobile menu upgrade.
   Turns the two-tier menu into a full-screen, two-page pager on small screens:
   tier 1 = page one, tier 2 = a second page you scroll/swipe to.
   Desktop (>1024px) keeps the original design untouched. */

@media (max-width: 1024px) {

  /* ---------- overlay: full-bleed cover ---------- */
  .two-side-menu.show-new-slide-menu {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 99999 !important;
    animation: fedOverlayIn .4s cubic-bezier(.16, 1, .3, 1) both;
  }
  .two-side-menu.show-new-slide-menu > .brxe-container {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .show-new-slide-menu .animated-menu-section {
    height: 100dvh !important;
    background:
      radial-gradient(120% 60% at 85% -10%, rgba(71, 70, 52, .55) 0%, rgba(40, 40, 40, 0) 55%),
      linear-gradient(165deg, #191919 0%, #232323 60%, #282828 100%) !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  /* ---------- close ---------- */
  .show-new-slide-menu .new-slide-menu-opan-icon {
    display: flex !important;
    position: absolute !important;
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: 16px !important;
    width: 46px !important;
    height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
    color: #fff !important;
    z-index: 12 !important;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .2s ease;
  }
  .show-new-slide-menu .new-slide-menu-opan-icon:active {
    transform: rotate(90deg);
    color: #ea3323 !important;
  }

  /* ---------- header / logo ---------- */
  .show-new-slide-menu .header-two {
    padding: calc(16px + env(safe-area-inset-top)) 26px 4px !important;
    text-align: left !important;
  }
  #brxe-uytpig .animated-menu-section .header-two .logo-two,
  .show-new-slide-menu .logo-two {
    width: 168px !important;
    margin: 30px 0 0 0 !important;
    animation: fedLogoIn .65s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: .08s;
  }

  /* ---------- pager ---------- */
  .show-new-slide-menu .menu-container-two {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }
  .show-new-slide-menu .menu-wrapper-two {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .show-new-slide-menu .menu-wrapper-two::-webkit-scrollbar { display: none; }

  .show-new-slide-menu .main-menu-two,
  .show-new-slide-menu .submenu-two {
    position: static !important;
    transform: none !important;
    transition: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 8px 26px calc(48px + env(safe-area-inset-bottom)) !important;
  }

  /* ---------- items: editorial, numbered, left-aligned ---------- */
  .show-new-slide-menu .main-menu-two,
  .show-new-slide-menu .submenu-two { counter-reset: fedmenu; }

  .show-new-slide-menu .menu-item-two {
    text-align: left !important;
    border-bottom: 1px solid rgba(194, 187, 169, .16) !important;
    counter-increment: fedmenu;
  }
  .show-new-slide-menu .menu-item-two:last-child { border-bottom: none !important; }

  .show-new-slide-menu .menu-item-two a {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 17px 2px !important;
    font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    line-height: 1.15 !important;
    color: #fff !important;
    transition: color .25s ease;
  }
  .show-new-slide-menu .menu-item-two a::before {
    content: counter(fedmenu, decimal-leading-zero);
    font-family: Inter, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: #ea3323;
    min-width: 2.6ch;
    margin-right: 16px;
    align-self: center;
    flex: 0 0 auto;
  }
  .show-new-slide-menu .menu-item-two a:active { color: #c2bba9 !important; }

  .show-new-slide-menu .arrow-icon-svg-two {
    margin-left: auto !important;
    width: 26px !important;
    height: 26px !important;
    stroke: #ea3323 !important;
    flex: 0 0 auto;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  .show-new-slide-menu .menu-item-two a:active .arrow-icon-svg-two {
    transform: translateX(7px);
  }

  /* ---------- page two: back pill + section label ---------- */
  .show-new-slide-menu .back-btn-two {
    border-bottom: none !important;
    counter-increment: none;
    margin: 4px 0 10px !important;
  }
  .show-new-slide-menu .back-btn-two a {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px;
    padding: 0 18px 0 12px !important;
    background: transparent !important;
    border: 1px solid rgba(194, 187, 169, .38) !important;
    border-radius: 999px !important;
    color: #c2bba9 !important;
    font-family: Inter, sans-serif !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    transition: border-color .25s ease, color .25s ease;
  }
  .show-new-slide-menu .back-btn-two a::after { content: 'Back to menu'; }
  .show-new-slide-menu .back-btn-two a::before { content: none !important; }
  .show-new-slide-menu .back-btn-two a:active {
    border-color: #ea3323 !important;
    color: #fff !important;
  }
  .show-new-slide-menu .back-btn-two svg {
    stroke: #c2bba9 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }

  .show-new-slide-menu .back-btn-two::after {
    display: block;
    margin: 26px 2px 10px;
    font-family: Inter, sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #c2bba9;
  }
  .show-new-slide-menu #submenu1 .back-btn-two::after { content: 'Our Services'; }
  .show-new-slide-menu #submenu2 .back-btn-two::after { content: 'Industries'; }

  /* ---------- staggered entrances ---------- */
  .show-new-slide-menu .fed-animate li {
    animation: fedItemIn .55s cubic-bezier(.16, 1, .3, 1) both;
  }
  .show-new-slide-menu .fed-animate li:nth-child(1)  { animation-delay: .06s; }
  .show-new-slide-menu .fed-animate li:nth-child(2)  { animation-delay: .11s; }
  .show-new-slide-menu .fed-animate li:nth-child(3)  { animation-delay: .16s; }
  .show-new-slide-menu .fed-animate li:nth-child(4)  { animation-delay: .21s; }
  .show-new-slide-menu .fed-animate li:nth-child(5)  { animation-delay: .26s; }
  .show-new-slide-menu .fed-animate li:nth-child(6)  { animation-delay: .31s; }
  .show-new-slide-menu .fed-animate li:nth-child(7)  { animation-delay: .36s; }
  .show-new-slide-menu .fed-animate li:nth-child(8)  { animation-delay: .41s; }
  .show-new-slide-menu .fed-animate li:nth-child(9)  { animation-delay: .46s; }
  .show-new-slide-menu .fed-animate li:nth-child(10) { animation-delay: .51s; }

  html.fed-menu-open, html.fed-menu-open body {
    overflow: hidden !important;
    height: 100% !important;
  }
}

@keyframes fedOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fedLogoIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes fedItemIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .two-side-menu.show-new-slide-menu,
  .show-new-slide-menu .logo-two,
  .show-new-slide-menu .fed-animate li {
    animation: none !important;
  }
  .show-new-slide-menu .menu-wrapper-two { scroll-behavior: auto !important; }
}