/* --- DESIGN SYSTEM --- */
        :root {
            --bg-main: #FFF8E1;
            --bg-soft: #FAF3DC;
            --bg-alt: #F5EABC;
            --surface: #FFFFFF;
            --primary: #2E3A1E;
            --secondary: #5D4037;
            --accent: #E8650A;
            --accent-2: #2E7D32;
            --line: rgba(46, 58, 30, 0.14);

            --map-heritage: #C0392B;
            --map-spiritual: #E8650A;
            --map-nature: #2E7D32;
            --map-hover: #C9960C;

            /* Typography — Brand Book v1.0 */
            --font-display: 'Playfair Display', Georgia, serif;
            --font-head: 'Playfair Display', Georgia, serif;
            --font-card: 'Playfair Display', serif;
            --font-body: 'Inter', sans-serif;
            --font-quote: 'Lora', serif;
            --transition: cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-body);
            color: var(--secondary);
            background:
              radial-gradient(900px 600px at 10% -10%, rgba(232, 101, 10, 0.12) 0%, transparent 60%),
              radial-gradient(700px 500px at 90% 10%, rgba(201, 150, 12, 0.16) 0%, transparent 55%),
              linear-gradient(180deg, var(--bg-main) 0%, var(--bg-alt) 100%);
            line-height: 1.7;
            overflow-x: hidden;
        }

        /* Background Texture */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(var(--primary) 1.5px, transparent 1.5px);
            background-size: 40px 40px;
            opacity: 0.1;
            z-index: -1;
            pointer-events: none;
        }

        h1,
        h2,
        h3,
        h4,
        .brand {
            font-family: var(--font-head);
            text-transform: none;
            color: var(--primary);
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition);
        }

        /* --- NAVBAR --- */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: #ffffff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            transition: var(--transition);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3rem;
        }

        .site-header.scrolled {
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.12);
        }

        .brand {
            font-weight: 700;
            font-size: 1.4rem;
            color: var(--primary);
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-links {
            display: flex;
            gap: 2.5rem;
            align-items: center;
            flex: 1;
            justify-content: center;
        }

        .nav-links a {
            color: var(--primary);
            font-size: 0.9rem;
            font-weight: 600;
            position: relative;
            padding: 0.5rem 0;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--primary);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary);
            transition: width 0.3s ease;
        }

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

     .nav-btn {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  padding: 2px 15px 2px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: all 0.3s ease;
  border: 1.5px solid rgba(255, 255, 255, 0.82);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

        .mobile-menu-btn {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* --- SECTION 1: CURATED EXPERIENCES (Infinite Slider) --- */
        .curated-section {
            background-color: #F5F0E8;
            padding: 7rem 0 3rem 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .section-head {
            margin-bottom: 2rem;
            text-align: center;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 5%;
        }

        .section-head .section-label {
            display: inline-flex;
            padding: 6px 20px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.06);
            color: #555;
            font-size: 0.75rem;
            letter-spacing: 2.2px;
            font-weight: 700;
            text-transform: none;
            margin-bottom: 0.8rem;
        }

        .section-head h2 {
            font-size: 3rem;
            line-height: 1.1;
            color: var(--primary);
            font-weight: 900;
            margin-bottom: 0.8rem;
        }

        .section-head p {
            color: #4a4a4a;
            font-size: 1.05rem;
            max-width: 650px;
            margin: 0 auto;
        }

        /* Slider Container */
        .curated-grid {
            position: relative;
            width: 100%;
            overflow: hidden;
            display: flex;
            padding: 1rem 0 2.5rem 0;
            mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        }

        .train-track {
            display: flex;
            gap: 2rem;
            width: max-content;
            animation: trainScroll 40s linear infinite;
        }

        .train-track:hover {
            animation-play-state: paused;
        }

        @keyframes trainScroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* Cards */
        .curated-card {
            min-width: 260px;
            height: 360px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            box-shadow: 0 8px 25px rgba(0, 31, 63, 0.12);
            background: #fff;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .curated-card:hover {
            box-shadow: 0 15px 40px rgba(0, 31, 63, 0.2);
            transform: translateY(-8px);
        }

        .curated-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .curated-card:hover img {
            transform: scale(1.1);
        }

        .curated-card-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1.5rem;
        }

        .curated-card h3 {
            color: #fff;
            font-size: 1.4rem;
            margin-bottom: 0.4rem;
            font-weight: 700;
        }

        .curated-card p {
            color: rgba(255, 255, 255, 0.95);
            font-size: 0.9rem;
            opacity: 1;
        }

        .btn-center {
            display: flex;
            justify-content: center;
            margin-top: 1rem;
        }

        .btn-primary {
            background: var(--primary);
            color: #fff;
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 700;
            text-transform: none;
            letter-spacing: 1px;
            border: none;
            cursor: pointer;
        }

        .btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }


        /* --- SECTION 2: MAP & DISTRICTS --- */
        .map-section {
            background-color: #DDD4C5;
            padding: 5rem 5%;
            text-align: center;
        }

        .legend-container {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 4px;
        }

        .map-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            max-width: 900px;
            margin: 0 auto;
            /* Neumorphic style container for the map */
            background: #e8dfd0;
            border-radius: 30px;
            padding: 20px;
            box-shadow: 20px 20px 60px #c5bdc1, -20px -20px 60px #ffffff;
        }

        .map-svg {
            width: 100%;
            height: auto;
        }

        /* Map Path Styles */
        .district-path {
            stroke: #fff;
            stroke-width: 1.5;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        /* Assign Colors based on Category */
        .district-path[data-category="heritage"] {
            fill: var(--map-heritage);
        }

        .district-path[data-category="spiritual"] {
            fill: var(--map-spiritual);
        }

        .district-path[data-category="nature"] {
            fill: var(--map-nature);
        }

        .district-path:hover {
            fill: var(--map-hover);
            transform: translateY(-2px);
            filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
            stroke: #000;
            z-index: 10;
        }

        /* Custom Tooltip */
        .map-tooltip {
            position: absolute;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
        }

        /* --- FOOTER --- */
        footer {
            background: #001F3F;
            color: #bcccdc;
            padding: 5rem 8% 2rem;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
            margin-bottom: 3rem;
        }

        .socials a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin-right: 10px;
            color: #fff;
        }

        .socials a:hover {
            background: #C7B9A0;
            color: #001F3F;
        }

        @media(max-width: 900px) {
            .nav-links {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: #FDF6E9;
                backdrop-filter: blur(12px);
                padding: 1rem 2rem 1.5rem;
                flex-direction: column;
                gap: 1rem;
                display: none;
                border-top: 1px solid rgba(199, 185, 160, 0.3);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            }

            .site-header.nav-open .nav-links {
                display: flex;
            }

            .nav-links a {
                color: var(--primary);
                font-size: 1rem;
                padding: 0.75rem 0;
                width: 100%;
                text-align: left;
                border-bottom: 1px solid rgba(199, 185, 160, 0.2);
            }

            .nav-links a::after {
                display: none;
            }

            .nav-links a:hover,
            .nav-links a.active {
                color: var(--map-heritage);
            }

            .mobile-menu-btn {
                display: block;
                background: transparent;
                border: none;
                font-size: 1.5rem;
                cursor: pointer;
                padding: 8px;
                color: var(--primary);
            }

            .nav-actions {
                display: flex;
                align-items: center;
                gap: 1rem;
            }

            .site-header .nav-btn {
                display: inline-block;
                background: var(--map-heritage);
                color: #fff;
                padding: 10px 20px;
                border-radius: 6px;
                font-size: 0.85rem;
                font-weight: 600;
            }

            .section-head h2 {
                font-size: 2rem;
            }
        }

/* Inline styles extracted from HTML */
.u-inline-1 { display: flex; align-items: center; gap: 20px; }
.u-inline-2 { background: var(--map-heritage); }
.u-inline-3 { background: var(--map-spiritual); }
.u-inline-4 { background: var(--map-nature); }
.u-inline-5 { background-color:#00000000 }
.u-inline-6 { filter: url("#zr2322-shadow-190"); }
.u-inline-7 { filter: url("#zr2322-shadow-191"); }
.u-inline-8 { filter: url("#zr2322-shadow-192"); }
.u-inline-9 { filter: url("#zr2322-shadow-193"); }
.u-inline-10 { filter: url("#zr2322-shadow-194"); }
.u-inline-11 { filter: url("#zr2322-shadow-195"); }
.u-inline-12 { filter: url("#zr2322-shadow-196"); }
.u-inline-13 { filter: url("#zr2322-shadow-197"); }
.u-inline-14 { filter: url("#zr2322-shadow-198"); }
.u-inline-15 { filter: url("#zr2322-shadow-199"); }
.u-inline-16 { filter: url("#zr2322-shadow-200"); }
.u-inline-17 { filter: url("#zr2322-shadow-201"); }
.u-inline-18 { filter: url("#zr2322-shadow-202"); }
.u-inline-19 { filter: url("#zr2322-shadow-203"); }
.u-inline-20 { filter: url("#zr2322-shadow-204"); }
.u-inline-21 { filter: url("#zr2322-shadow-205"); }
.u-inline-22 { filter: url("#zr2322-shadow-206"); }
.u-inline-23 { filter: url("#zr2322-shadow-207"); }
.u-inline-24 { filter: url("#zr2322-shadow-208"); }
.u-inline-25 { filter: url("#zr2322-shadow-209"); }
.u-inline-26 { filter: url("#zr2322-shadow-210"); }
.u-inline-27 { filter: url("#zr2322-shadow-211"); }
.u-inline-28 { filter: url("#zr2322-shadow-212"); }
.u-inline-29 { filter: url("#zr2322-shadow-213"); }
.u-inline-30 { filter: url("#zr2322-shadow-214"); }
.u-inline-31 { filter: url("#zr2322-shadow-215"); }
.u-inline-32 { filter: url("#zr2322-shadow-216"); }
.u-inline-33 { filter: url("#zr2322-shadow-217"); }
.u-inline-34 { filter: url("#zr2322-shadow-218"); }
.u-inline-35 { filter: url("#zr2322-shadow-219"); }
.u-inline-36 { filter: url("#zr2322-shadow-220"); }
.u-inline-37 { filter: url("#zr2322-shadow-221"); }
.u-inline-38 { filter: url("#zr2322-shadow-222"); }
.u-inline-39 { filter: url("#zr2322-shadow-223"); }
.u-inline-40 { filter: url("#zr2322-shadow-224"); }
.u-inline-41 { filter: url("#zr2322-shadow-225"); }
.u-inline-42 { filter: url("#zr2322-shadow-226"); }
.u-inline-43 { filter: url("#zr2322-shadow-227"); }
.u-inline-44, .u-inline-45, .u-inline-46, .u-inline-47, .u-inline-48, .u-inline-49,
.u-inline-50, .u-inline-51, .u-inline-52, .u-inline-53, .u-inline-54, .u-inline-55,
.u-inline-56, .u-inline-57, .u-inline-58, .u-inline-59, .u-inline-60, .u-inline-61,
.u-inline-62, .u-inline-63, .u-inline-64, .u-inline-65, .u-inline-66, .u-inline-67,
.u-inline-68, .u-inline-69, .u-inline-70, .u-inline-71, .u-inline-72, .u-inline-73,
.u-inline-74, .u-inline-75, .u-inline-76, .u-inline-77, .u-inline-78, .u-inline-79,
.u-inline-80, .u-inline-81, .u-inline-82, .u-inline-83, .u-inline-84, .u-inline-85 {
  font-family: var(--font-body);
  font-size: 11px;
}
.u-inline-86 { margin-bottom: 1.5rem; color: #fff; }
.u-inline-87 { color: #fff; }
.u-inline-88 { color: #bcccdc; }
.u-inline-89 { display: flex; margin-top: 1rem; }
.u-inline-90 { padding: 12px; border-radius: 30px 0 0 30px; border: none; width: 100%; }
.u-inline-91 { padding: 12px 20px; border-radius: 0 30px 30px 0; border: none; background: #C7B9A0; cursor: pointer; }