/* Preserve the desktop navigation; give the mobile menu its own full-screen stage. */
.hamburger { border: 0; background: transparent; padding: 10px; color: inherit; }
@media (max-width: 768px) {
    #navbar.nav-open, #navbar.scrolled.nav-open {
        z-index: 1300;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border-bottom-color: transparent;
    }
    .navbar .nav-logo, .navbar .hamburger { position: relative; z-index: 3; }
    .navbar .hamburger { width: 44px; height: 44px; align-items: center; justify-content: center; flex-shrink: 0; }
    .hamburger span { transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
    .hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
    .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
    .navbar .nav-menu, .navbar.scrolled .nav-menu, .navbar:not(.scrolled) .nav-menu.active {
        position: fixed;
        inset: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        z-index: 2;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        text-align: left;
        padding: max(120px, calc(env(safe-area-inset-top) + 100px)) 32px max(30px, env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: radial-gradient(ellipse at 100% 0%, #7b2cbf20, transparent 55%), #0b0a0e;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-18px);
        transition: opacity .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1), visibility 0s .5s;
        counter-reset: mobile-links;
    }
    .navbar .nav-menu.active, .navbar.scrolled .nav-menu.active, .navbar:not(.scrolled) .nav-menu.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
    .nav-menu::before { content: 'EXPLORE HYDRO.ne'; color: #b38bd8; font-size: .65rem; letter-spacing: .2em; padding-bottom: 22px; border-bottom: 1px solid #ffffff15; }
    .nav-menu > li { opacity: 0; transform: translateY(18px); transition: opacity .24s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
    .nav-menu.active > li { opacity: 1; transform: translateY(0); transition-duration: .55s; transition-delay: calc(var(--nav-order, 0) * 45ms + 100ms); }
    .nav-menu .nav-link { display: flex; align-items: center; width: 100%; gap: 20px; padding: 13px 0; color: #f5f0fa; font-size: clamp(1.7rem, 6vw, 2.5rem); font-weight: 500; letter-spacing: -.02em; text-transform: none; border-bottom: 1px solid #ffffff12; }
    .nav-menu .nav-link::before { counter-increment: mobile-links; content: '0' counter(mobile-links); font: 400 .65rem 'Inter', sans-serif; color: #aa8bbf; letter-spacing: .04em; }
    .nav-menu .nav-link::after { content: '↗'; position: static; width: auto; height: auto; background: none; margin-left: auto; font: 400 1.1rem 'Inter', sans-serif; color: #bd91e9; }
    .nav-menu .nav-link:hover { color: #cfa8f4; }
    .nav-menu .cta-btn { margin-top: 20px; padding: 15px 20px !important; border-radius: 10px; font-size: 1.15rem; letter-spacing: 0; }
    .nav-menu .cta-btn::before { display: none; }
    .nav-menu .cta-btn::after { color: #fff; }
    .nav-menu .mobile-nav-details { margin-top: auto; padding-top: 28px; }
    .mobile-nav-details p { font-size: .72rem; color: #aaa1b3; line-height: 1.7; }
    .mobile-nav-details a { display: inline-block; padding: 10px 0; color: #d6b0fa; font-size: .85rem; }
}
@media (min-width: 769px) { .mobile-nav-details { display: none; } }
@media (max-width: 768px) and (max-height: 650px) {
    .navbar .nav-menu { padding-top: 100px; }
    .nav-menu::before { padding-bottom: 12px; }
    .nav-menu .nav-link { font-size: 1.55rem; padding-block: 9px; }
    .nav-menu .cta-btn { margin-top: 12px; }
    .nav-menu .mobile-nav-details { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    #navbar .nav-menu, #navbar .nav-menu > li, #navbar .hamburger span { transition: none; }
    #navbar .nav-menu, #navbar .nav-menu > li { transform: none; }
}