:root{
  --bg: #0f0f0f; /* deep charcoal */
  --bg-alt: #161616; 
  --text: #f7f4ef; /* warm ivory */
  --muted: #c6c0b5;
  --gold: #c8a968; /* soft gold */
  --gold-2: #b69144;
  --accent: #9bd6cf; /* spa aqua tint for subtle highlights */
  --card: #151515;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;scroll-behavior:smooth}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;line-height:1.12;margin:0 0 .4rem}
p{line-height:1.7;color:var(--muted)}
a{color:var(--text);text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin-inline:auto}

/* ======= NAVBAR ======= */
.nav{position:fixed;inset-inline:0;top:0;z-index:40;display:flex;align-items:center;justify-content:center;transition:all .4s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1200px,92%);padding:18px 0}
.logo{display:flex;align-items:center;gap:12px;font-family:"Playfair Display",serif;font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase}
.logo .mark{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-2));box-shadow:0 0 0 2px rgba(255,255,255,.06)}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{opacity:.85}
.nav.cta-shadow{backdrop-filter:saturate(180%) blur(14px);background:rgba(15,15,15,.55);box-shadow:0 6px 30px rgba(0,0,0,.35);}

/* Mobile Navigation */
.mobile-menu-toggle {
  display: none;
  position: relative;
  cursor: pointer;
  z-index: 100; /* Higher z-index than mobile-nav */
}

.mobile-menu-icon {
  width: 50px;
  height: 50px;
  position: relative;
  overflow: visible; /* Changed from hidden to visible */
  border-radius: 50%;
  border: 1px solid rgba(200,169,104,.3);
  background: rgba(21,21,21,.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu-icon::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--gold);
  border-radius: 50%;
  transform: scale(0.4);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 1;
}

.mobile-menu-icon.active::before {
  transform: scale(1.5);
  opacity: 0.3;
}

/* X close button */
.mobile-menu-icon .close-x {
  position: absolute;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101; /* Increased z-index */
  opacity: 0; /* Hide the X by default */
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(0);
}

.mobile-menu-icon.active .close-x {
  opacity: 1; /* Show the X when menu is active */
  transform: scale(1);
}

.mobile-menu-icon .close-x::before,
.mobile-menu-icon .close-x::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: #ffffff; /* Changed to white for better visibility */
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform: rotate(0);
  opacity: 0;
}

.mobile-menu-icon.active .close-x::before,
.mobile-menu-icon.active .close-x::after {
  opacity: 1;
}

.mobile-menu-icon.active .close-x::before {
  transform: rotate(45deg);
}

.mobile-menu-icon.active .close-x::after {
  transform: rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: rgba(15,15,15,.98);
  backdrop-filter: blur(15px);
  z-index: 80; /* Lowered z-index to be below mobile-menu-toggle */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto; /* Allow scrolling within the menu if needed */
  overscroll-behavior: contain; /* Prevent scroll chaining */
}

.mobile-nav.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  position: relative;
}

.mobile-nav-links::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  left: -40px;
  opacity: 0.3;
}

.mobile-nav-links::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  right: -40px;
  opacity: 0.3;
}

.mobile-nav-links a {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  color: var(--text);
  text-decoration: none;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i) * 0.1s);
}

.mobile-nav.active .mobile-nav-links a {
  opacity: 1;
  transform: translateY(0);
}

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

.mobile-nav-links a:hover::after {
  width: 100%;
}

.mobile-nav-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(200,169,104,.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.5;
}

/* Mobile Nav Close Button */
.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 200;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.2s;
}

.mobile-nav.active .mobile-nav-close {
  opacity: 1;
  transform: scale(1);
}

.nav-close-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(21,21,21,.8);
  border: 1px solid rgba(200,169,104,.3);
  backdrop-filter: blur(5px);
}

.nav-close-icon .close-x {
  position: relative;
  width: 20px;
  height: 20px;
}

.nav-close-icon .close-x::before,
.nav-close-icon .close-x::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: #ffffff;
  top: 50%;
  left: 0;
}

.nav-close-icon .close-x::before {
  transform: rotate(45deg);
}

.nav-close-icon .close-x::after {
  transform: rotate(-45deg);
}

.mobile-nav-footer {
  position: absolute;
  bottom: 40px;
  display: flex;
  gap: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.5s;
}

.mobile-nav.active .mobile-nav-footer {
  opacity: 0.7;
  transform: translateY(0);
}

.mobile-nav-footer a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(200,169,104,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.mobile-nav-footer a:hover {
  background: rgba(200,169,104,.1);
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  
  .mobile-menu-toggle {
    display: block;
  }
}

.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;border-radius:999px;border:1px solid rgba(200,169,104,.35);color:var(--text);transition:.25s;background:linear-gradient(180deg,rgba(200,169,104,.15),rgba(200,169,104,.05));}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(0,0,0,.35)}

/* ======= Subtle reveal animation ======= */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1)}
.reveal.on{opacity:1;transform:none}

/* Luxury scroll animations for different elements */
.fade-in-up {animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; opacity: 0;}
.fade-in-right {animation: fadeInRight 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; opacity: 0;}
.fade-in-left {animation: fadeInLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; opacity: 0;}
.zoom-in {animation: zoomIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; opacity: 0;}

/* Animation delay classes */
.delay-100 {animation-delay: 0.1s;}
.delay-200 {animation-delay: 0.2s;}
.delay-300 {animation-delay: 0.3s;}
.delay-400 {animation-delay: 0.4s;}
.delay-500 {animation-delay: 0.5s;}

/* Animation keyframes */
@keyframes fadeInUp {
  from {opacity: 0; transform: translateY(40px);}
  to {opacity: 1; transform: translateY(0);}
}

@keyframes fadeInRight {
  from {opacity: 0; transform: translateX(-40px);}
  to {opacity: 1; transform: translateX(0);}
}

@keyframes fadeInLeft {
  from {opacity: 0; transform: translateX(40px);}
  to {opacity: 1; transform: translateX(0);}
}

@keyframes zoomIn {
  from {opacity: 0; transform: scale(0.95);}
  to {opacity: 1; transform: scale(1);}
}

/* ======= FOOTER ======= */
footer{padding:3.2rem 0;background:linear-gradient(180deg,#0d0d0d,#0a0a0a);border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
.foot-logo{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.muted{color:#b7b1a7}
.foot-col a{display:block;margin:.35rem 0;color:var(--muted)}
.foot-col a:hover{color:var(--text)}

@media (max-width: 900px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 540px){
  .footer-grid{grid-template-columns:1fr}
}

/* Body class for when mobile menu is open */
body.menu-open {
  overflow: hidden !important;
  height: 100vh;
  position: fixed;
  width: 100%;
  touch-action: none;
}