/* Mobile Menu Styling */
/* Hamburger Button */
.hh-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hh-hamburger:hover { opacity: 0.7; }
.hh-hamburger span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 0; transition: transform 0.3s ease, opacity 0.2s ease, background 0.3s ease; transform-origin: center; }

/* Mobile Menu Drawer */
.hh-mobile-menu { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--navy); z-index: 500; overflow-y: auto; padding: 24px; transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.34s cubic-bezier(0.4,0,0.2,1), opacity 0.34s ease, visibility 0s linear 0.34s; }
.hh-mobile-menu.open { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.34s cubic-bezier(0.4,0,0.2,1), opacity 0.34s ease; }
.hh-mobile-close { position: absolute; top: 24px; right: 24px; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; padding: 0; z-index: 10; line-height: 1; }
.hh-mobile-close:hover { opacity: 0.7; }
.hh-mobile-logo { margin-bottom: 32px; opacity: 0; transform: translateX(16px); transition: opacity 0.35s ease, transform 0.35s ease; }
.hh-mobile-logo img { height: 64px; }
.hh-mobile-section { border-top: 1px solid rgba(255,255,255,0.15); padding: 16px 0; opacity: 0; transform: translateX(16px); transition: opacity 0.35s ease, transform 0.35s ease; }
.hh-mobile-section-title { color: var(--orange); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; }
.hh-mobile-link { display: block; color: #fff; font-size: 1.1rem; font-weight: 600; padding: 10px 0; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hh-mobile-link:last-child { border-bottom: none; }
.hh-mobile-link:hover { color: var(--orange); }
.hh-mobile-sub { display: block; color: rgba(255,255,255,0.7); font-size: 0.9rem; font-weight: 400; padding: 8px 16px; text-decoration: none; }
.hh-mobile-sub:hover { color: var(--orange); }
.hh-mobile-cta { display: block; background: var(--orange); color: #fff; text-align: center; padding: 16px; font-weight: 700; text-decoration: none; margin-top: 24px; font-size: 1rem; opacity: 0; transform: translateX(16px); transition: opacity 0.35s ease, transform 0.35s ease; }

/* Stagger animation delays */
.hh-mobile-menu.open .hh-mobile-logo { opacity: 1; transform: none; transition-delay: 0.05s; }
.hh-mobile-menu.open .hh-mobile-section:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.08s; }
.hh-mobile-menu.open .hh-mobile-section:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.11s; }
.hh-mobile-menu.open .hh-mobile-section:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.14s; }
.hh-mobile-menu.open .hh-mobile-section:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.17s; }
.hh-mobile-menu.open .hh-mobile-section:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.20s; }
.hh-mobile-menu.open .hh-mobile-cta { opacity: 1; transform: none; transition-delay: 0.23s; }

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  .hh-hamburger span, .hh-mobile-menu, .hh-mobile-logo, .hh-mobile-section, .hh-mobile-cta { transition: none !important; }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .hh-hamburger { display: flex; }
}
