.main-header {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1050;
   padding: 28px 0;
   background-color: transparent;
   transition: var(--transition);
 }

 .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

 /* Scrolled state - added via JS */
 .main-header.scrolled {
   position: fixed;
   background-color: rgba(10, 10, 10, 0.96);
   backdrop-filter: blur(12px);
   padding: 16px 0;
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
   border-bottom: 1px solid rgba(212, 175, 55, 0.2);
 }

 .main-header.scrolled .nav-link {
   color: var(--white);
 }

 .main-header.scrolled .mobile-toggle span {
   background-color: var(--white);
 }

 .main-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
   width: 100%;
 }

 /* Navigation Left & Right - desktop */
 .nav-left,
 .nav-right {
   display: flex;
   gap: 44px;
   align-items: center;
   z-index: 10;
 }

 .nav-center {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   z-index: 5;
   pointer-events: none;
   /* allows clicks to pass through if needed, but links inside need pointer-events auto */
 }

 .nav-center .logo-link {
   pointer-events: auto;
   display: inline-block;
   text-decoration: none;
 }

 .logo-img {
   max-width: 190px;
   height: auto;
   filter: brightness(0) invert(1);
   transition: var(--transition);
 }

 .main-header.scrolled .logo-img {
   filter: brightness(0) invert(1);
   /* keep white on dark scrolled header */
 }

 .nav-link {
   color: var(--white);
   font-family: 'Montserrat', sans-serif;
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-weight: 600;
   transition: var(--transition);
   text-decoration: none;
   position: relative;
   padding-bottom: 4px;
 }

 .nav-link::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 2px;
   background-color: var(--gold);
   transition: width 0.3s ease;
 }

 .nav-link:hover {
   color: var(--gold);
 }

 .nav-link:hover::after {
   width: 100%;
 }

 /* Mobile toggle button */
 .mobile-toggle {
   display: none;
   background: none;
   border: none;
   width: 34px;
   height: 24px;
   position: relative;
   cursor: pointer;
   z-index: 1100;
   flex-direction: column;
   justify-content: space-between;
 }

 .mobile-toggle span {
   display: block;
   width: 100%;
   height: 2px;
   background-color: var(--white);
   transition: all 0.3s ease;
   border-radius: 4px;
 }

 .main-header.scrolled .mobile-toggle span {
   background-color: var(--white);
 }

 .mobile-toggle.active span:nth-child(1) {
   transform: translateY(10px) rotate(45deg);
 }

 .mobile-toggle.active span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0.7);
 }

 .mobile-toggle.active span:nth-child(3) {
   transform: translateY(-12px) rotate(-45deg);
 }

 /* Mobile Menu Overlay (Fullscreen) */
 .mobile-menu-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: rgba(10, 10, 10, 0.98);
   backdrop-filter: blur(20px);
   z-index: 1040;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
   flex-direction: column;
   gap: 2.5rem;
 }

 .mobile-menu-overlay.active {
   opacity: 1;
   visibility: visible;
 }

 .mobile-nav-link {
   color: var(--white);
   font-size: 2rem;
   font-family: 'Cormorant Garamond', serif;
   font-weight: 500;
   text-decoration: none;
   letter-spacing: 2px;
   transition: 0.2s;
   padding: 12px 24px;
   border-bottom: 1px solid transparent;
 }

 .mobile-nav-link:hover {
   color: var(--gold);
   transform: translateX(8px);
   border-bottom-color: var(--gold);
 }

 /* Responsive breakpoints */
 @media (max-width: 1024px) {

   .nav-left,
   .nav-right {
     gap: 32px;
   }

   .logo-img {
     max-width: 160px;
   }
 }

 @media (max-width: 880px) {

   .nav-left,
   .nav-right {
     display: none;
     /* Hide desktop navigation */
   }

   .nav-center {
     position: relative;
     left: 0;
     transform: none;
     margin: 0 auto;
     text-align: center;
   }

   .mobile-toggle {
     display: flex;
   }

   .main-nav {
     justify-content: space-between;
   }

   .main-header {
     padding: 20px 0;
   }

   .container {
     padding: 0 24px;
   }
 }

 @media (max-width: 480px) {
   .logo-img {
     max-width: 140px;
   }

   .mobile-nav-link {
     font-size: 1.7rem;
   }
 }