@media (max-width: 991px) {
  /* Hide native Webflow behaviour and implement custom mobile navigation */
  .nav_menu {
    /* display: none !important; /* REPLACED with visibility/opacity for animation */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease-out;
    
    display: flex !important; /* Kept for internal layout when visible */
    flex-direction: column !important;      /* vertical links */
    align-items: center !important;
    justify-content: flex-start !important; /* Changed from center to flex-start */
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 60px 20px 40px;               /* Reduced top padding from 100px to 60px */
    gap: 20px;
    background: rgba(10, 25, 53, 0.95);     /* dark translucent background */
    z-index: 9998;                          /* below the toggle button */
  }

  /* Visible when the menu is opened via JS */
  .nav_menu.open {
    /* display: flex !important; /* This is already in .nav_menu base style */
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  /* Ensure links are easily tappable */
  .nav_menu .nav_link {
    font-size: 22px !important;
    padding: 12px 0 !important;
  }

  /* Burger button */
  .bn_menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 10000; /* above the nav menu */
    background: none;
    border: none;
  }

  /* Swap burger / close icons */
  .bn_menu .icon_close_nav {
    display: none;
  }

  .bn_menu.open .icon_close_nav {
    display: block;
  }

  /* Prevent background scroll when menu is open */
  body.no-scroll {
    overflow: hidden;
  }

  /* Size & centering for icons */
  .bn_menu .icon_burger_nav svg,
  .bn_menu .icon_close_nav img {
    width: 85%;
    height: 85%;
    display: block;
    margin: 0 auto;
  }

  .mobile-burger-menu {
    margin-top: 0.8cm !important; /* ≈30.5px downward */
  }
} 

/* === Liquid Glass / Glassmorphism Enhancements === */
/*
  Apply a modern "liquid glass" appearance to the main navigation pill
  (wrap_nav_links) and the call-to-action buttons (bn_nav, bn_icon_main).
  We purposely override any inline background colours using !important.
*/
.wrap_nav_links,
.bn_nav,
.bn_icon_main {
  /* Glass effect with gradient */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.006) 0%,
    rgba(255, 255, 255, 0.002) 100%
  ) !important;
  background-color: rgba(255, 255, 255, 0.004) !important;
  
  /* Strong blur for glass effect */
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  
  /* Refined border with gradient */
  border: 1px solid transparent !important;
  background-image: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.002) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.006) 100%) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  
  /* Multi-layered shadow for depth */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -1px 1px rgba(0, 0, 0, 0.1) !important;
  
  /* Smooth transitions */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Add subtle inner glow */
.wrap_nav_links::before,
.bn_nav::before,
.bn_icon_main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(255, 255, 255, 0.02) 0%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0.2;
  transition: opacity 0.4s ease;
}

/* Subtle lift on hover/focus */
.wrap_nav_links:hover,
.bn_nav:hover,
.bn_icon_main:hover,
.wrap_nav_links:focus-within,
.bn_nav:focus,
.bn_icon_main:focus {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.01) 0%,
    rgba(255, 255, 255, 0.005) 100%
  ) !important;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -1px 1px rgba(0, 0, 0, 0.1) !important;
}

/* Enhance inner glow on hover */
.wrap_nav_links:hover::before,
.bn_nav:hover::before,
.bn_icon_main:hover::before {
  opacity: 1;
}

/* Active / pressed state */
.wrap_nav_links:active,
.bn_nav:active,
.bn_icon_main:active {
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Mobile-specific adjustments */
@media (max-width: 991px) {
  /* Mobile menu overlay glass effect */
  .nav_menu.open {
    background: linear-gradient(
      135deg,
      rgba(10, 25, 53, 0.85) 0%,
      rgba(10, 25, 53, 0.95) 100%
    ) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  }
  
  /* Mobile nav links glass effect */
  .nav_menu .nav_link {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(255, 255, 255, 0.005) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.012);
    border-radius: 15px;
    margin: 5px 0;
    transition: all 0.3s ease;
  }
  
  .nav_menu .nav_link:hover {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.015) 0%,
      rgba(255, 255, 255, 0.008) 100%
    );
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }
}

/* Mobile menu button glass effect */
.mobile-nav-link.get-in-touch-mobile {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.012) 0%,
    rgba(255, 255, 255, 0.005) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.025) !important;
  border-radius: 30px !important;
  padding: 12px 24px !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.025) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-link.get-in-touch-mobile:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(255, 255, 255, 0.01) 100%
  ) !important;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

/* === Text styling for menu and buttons === */
/* Menu links styling */
.nav_link,
.text_bn_nav,
.text_bn_main,
.mobile-nav-link {
  font-weight: bold !important;
  text-shadow: 
    -1px -1px 0 rgba(0, 0, 0, 0.8),
    1px -1px 0 rgba(0, 0, 0, 0.8),
    -1px 1px 0 rgba(0, 0, 0, 0.8),
    1px 1px 0 rgba(0, 0, 0, 0.8),
    0 0 2px rgba(0, 0, 0, 0.5) !important;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.6);
}

/* Mobile menu links specific styling */
.nav_menu .nav_link {
  font-weight: bold !important;
  text-shadow: 
    -1px -1px 0 rgba(0, 0, 0, 0.8),
    1px -1px 0 rgba(0, 0, 0, 0.8),
    -1px 1px 0 rgba(0, 0, 0, 0.8),
    1px 1px 0 rgba(0, 0, 0, 0.8),
    0 0 2px rgba(0, 0, 0, 0.5) !important;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.6);
}

/* Get in touch mobile button text */
.mobile-nav-link.get-in-touch-mobile {
  font-weight: bold !important;
  text-shadow: 
    -1px -1px 0 rgba(0, 0, 0, 0.8),
    1px -1px 0 rgba(0, 0, 0, 0.8),
    -1px 1px 0 rgba(0, 0, 0, 0.8),
    1px 1px 0 rgba(0, 0, 0, 0.8),
    0 0 2px rgba(0, 0, 0, 0.5) !important;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.6);
}

/* === Vertical offset for nav links & Get in Touch (desktop) === */
@media (min-width: 992px) {
  .wrap_bn_links_nav {
    margin-top: 0.65cm !important; /* ≈24.6px */
  }
}