@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Montserrat:wght@300;400;600&display=swap');

    :root {
        --gold: #d4af37;
        --gold-deep: #b8860b;
        --ink: #0a0a0a;
    }

    * {
        box-sizing: border-box
    }

    body {
        font-family: 'Montserrat', sans-serif;
        letter-spacing: .2px;
        overflow-x: hidden;
        background: #0b0b0b;
         width: 100%;
      margin: 0;
      padding: 0;
    }

    /* ========== CUSTOM SCROLLBAR STYLING ========== */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: #0b0b0b;
        border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb {
        background: #d4af37;
        border-radius: 5px;
        border: 2px solid #0b0b0b;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #b8860b;
    }

    ::-webkit-scrollbar-corner {
        background: #0b0b0b;
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: #d4af37 #0b0b0b;
    }

    html {
        scroll-behavior: smooth;
    }

    .cormorant {
        font-family: 'Cormorant Garamond', serif
    }


    /* Subtle float */
    .float-slow {
        animation: float 8s ease-in-out infinite
    }

    .float-slower {
        animation: float 10s ease-in-out infinite 1.2s
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-10px)
        }
    }

    /* Reveal */
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: all .8s cubic-bezier(.25, .46, .45, .94)
    }

    .reveal.show {
        opacity: 1;
        transform: translateY(0)
    }

    /* Luxury card hover */
    .lux-card {
        transition: transform .5s cubic-bezier(.25, .46, .45, .94), box-shadow .5s
    }

    .lux-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 50px rgba(0, 0, 0, .18)
    }

    /* Gold outline on hover */
    .lux-glow {
        position: relative
    }

    .lux-glow:before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 999px;
        background: linear-gradient(45deg, var(--gold), #f0d97c, var(--gold-deep));
        z-index: -1;
        opacity: 0;
        transition: opacity .3s;
    }

    .lux-glow:hover:before {
        opacity: .6
    }

    /* Fluid headings (keeps proportions on mobile) */
    .h1-fluid {
        font-size: clamp(2.2rem, 5.5vw, 5rem)
    }

    .h2-fluid {
        font-size: clamp(1.8rem, 3.8vw, 3rem)
    }

    .h3-fluid {
        font-size: clamp(1.25rem, 2.2vw, 1.75rem)
    }

    /* Navbar blur on scroll */
    .nav-blur {
        backdrop-filter: blur(14px);
        background: rgba(12, 12, 12, .75);
        border-bottom: 1px solid rgba(212, 175, 55, .15)
    }

    /* Bottle subtle glow */
    .bottle-glow {
        filter: drop-shadow(0 0 22px rgba(212, 175, 55, .28))
    }

    /* Mobile menu animation */
    .mobile-panel {
        transform-origin: top;
        transform: scaleY(0);
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: transform .3s ease, opacity .3s ease, max-height .3s ease;
    }

    .mobile-panel.open {
        transform: scaleY(1);
        opacity: 1;
        max-height: 500px;
        /* adjust if menu is taller */
        pointer-events: auto;
    }


.hero-gradient {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
  position: relative;
  z-index: 0;
}

.hero-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="0.5" fill="%23ffffff" opacity="0.02"/><circle cx="80" cy="40" r="0.3" fill="%23ffffff" opacity="0.01"/><circle cx="40" cy="80" r="0.4" fill="%23ffffff" opacity="0.015"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

    .timeline-line {
        position: relative;
    }

    .timeline-line::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, #d4af37, #b8860b, #d4af37);
        transform: translateX(-50%);
    }

    .timeline-dot {
        position: relative;
        z-index: 10;
        background: #d4af37;
        border: 4px solid white;
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    }

    @media (max-width: 768px) {
        .timeline-line::before {
            left: 20px;

        }

        .timeline-dot {
            display: none;
        }
    }

/* ========== COMPREHENSIVE RESPONSIVE STYLES ========== */

/* Large Tablets and Small Desktops (769px - 1024px) */
@media (max-width: 1024px) {
  
  
  .map-container {
    width: 95vw;
  }
}

/* Tablets (481px - 768px) */
@media (max-width: 768px) {
  
  
  .map-container {
    width: 95vw;
  }
  
  .map_text-overlay,
  .map_text-overlay2 {
    font-size: 16px;
  }
  
  .timeline-line::before {
    left: 20px;
  }
  
  .timeline-dot {
    display: none;
  }
  body {
      scroll-padding-top: 100px;
      /* Account for fixed header */
    }

    /* Smooth scroll behavior for anchor links */
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      overflow-y: auto;
    }
}

/* Mobile Devices (up to 480px) */
@media (max-width: 480px) {
 
  .map-container {
    width: 100vw;
  }
  
  .map_text-overlay {
    top: 30%;
    left: 20%;
    font-size: 12px;
  }
  
  .map_text-overlay2 {
    top: 68%;
    left: 90%;
    font-size: 12px;
  }
  
  
}

/* Extra Small Devices (up to 360px) */
@media (max-width: 360px) {
  
  .map_text-overlay,
  .map_text-overlay2 {
    font-size: 10px;
  }
}

/* Landscape Orientation for Mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-gradient {
    padding: 1.5rem 1rem;
  }
  
  .map-container {
    max-height: 50vh;
  }
  
  .mobile-panel {
    max-height: 300px;
  }
  body {
      scroll-padding-top: 100px;
      /* Account for fixed header */
    }

    /* Smooth scroll behavior for anchor links */
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      overflow-y: auto;
    }
}
        #map-body {
      margin: 0;
      background: #eee;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .map-container {
      position: relative;
      width: 90vw;
      max-width: 1365px;
      aspect-ratio: 1365 / 668;
    }
    .map-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #map-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .debug-path {
      fill: none;
    } 
    .map_text-overlay, .map_text-overlay2 {
      position: absolute;
      font-weight: bold;
      font-size: 20px;
      color: rgb(0, 0, 0);
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0);
    }
    .map_text-overlay {
      top: 33%;
      left: 23%;
      transform: translate(-50%, -50%) rotate(-8deg);
    }
    .map_text-overlay2 {
      top: 70%;
      left: 92%;
      transform: translate(-50%, -50%) rotate(-7deg);
    }