:root {
            --hero-bg: #2d3e42;
            --cream: #f8f5f1;
            --dark: #1a1a1a;
            --heading: #1a1a1a;
            --body-text: #4a4a4a;
            --muted: #777777;
            --orange: #c07a42;
            --orange-lt: #d4945e;
            --gold: #9c8567;
            --nav-text: #ececed;
            --border: #e0dbd4;
            --btn-dark: #1a1a1a;
            --white: #ffffff;
            --nav-h: 75px;
            --r: 3px;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            color: var(--body-text);
            background: var(--cream);
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
        }

        img {
            display: block;
            max-width: 100%;
        }


        /* ══════════════════════════════════════
       LAYOUT HELPERS
    ══════════════════════════════════════ */
        .wrap {
            padding: 88px 0;
        }

        .wrap.dark {
            background: var(--dark);
        }

        .wrap.white {
            background: var(--white);
        }

        .container {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 48px;
        }

        .eyebrow {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--orange);
            margin-bottom: 10px;
        }

        .section-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.9rem, 3.5vw, 3rem);
            font-weight: 700;
            color: var(--heading);
            line-height: 1.2;
        }

        .section-title.light {
            color: var(--cream);
        }

        .te-rule {
            width: 44px;
            height: 2px;
            background: var(--orange);
            margin: 16px 0 28px;
        }

        .te-rule.center {
            margin-left: auto;
            margin-right: auto;
        }

        /* TourEast buttons */
        .btn {
            display: inline-block;
            padding: 11px 30px;
            border-radius: var(--r);
            font-family: 'Open Sans', sans-serif;
            font-size: 0.88rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: all .2s;
            border: 2px solid transparent;
        }

        .btn-dark {
            background: var(--btn-dark);
            color: var(--white);
            border-color: var(--btn-dark);
        }

        .btn-dark:hover {
            background: #333;
            border-color: #333;
        }

        .btn-outline-dark {
            background: transparent;
            color: var(--heading);
            border-color: var(--heading);
        }

        .btn-outline-dark:hover {
            background: var(--heading);
            color: var(--white);
        }

        .btn-orange {
            background: var(--orange);
            color: var(--white);
            border-color: var(--orange);
        }

        .btn-orange:hover {
            background: #a86535;
            border-color: #a86535;
        }

        /* ══════════════════════════════════════
       1. HERO
    ══════════════════════════════════════ */
        #hero {
            position: relative;
            height: 100vh;
            min-height: 580px;
            background: var(--hero-bg);
            overflow: hidden;
        }

        .hero-slides {
            position: absolute;
            inset: 0;
        }

        .hero-slide {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.2s ease;
        }

        .hero-slide.active {
            opacity: 1;
        }

        .hero-slide::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                    rgba(20, 30, 32, .55) 0%,
                    rgba(20, 30, 32, .45) 50%,
                    rgba(20, 30, 32, .7) 100%);
        }

        .hero-body {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 40px;
        }

        .hero-supertitle {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 18px;
        }

        .hero-body h1 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(3rem, 7vw, 6.5rem);
            font-weight: 700;
            color: var(--white);
            line-height: 1.05;
            margin-bottom: 22px;
        }

        .hero-body p {
            font-size: 1rem;
            color: rgba(255, 255, 255, .78);
            line-height: 1.8;
            max-width: 600px;
            margin-bottom: 36px;
        }

        .hero-cta {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 52px;
        }

        .hero-stats-bar {
            display: flex;
            gap: 0;
            border-top: 1px solid rgba(255, 255, 255, .15);
            padding-top: 32px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .hero-stat {
            padding: 0 36px;
            text-align: center;
            border-right: 1px solid rgba(255, 255, 255, .15);
        }

        .hero-stat:last-child {
            border-right: none;
        }

        .hero-stat strong {
            display: block;
            font-family: 'Playfair Display', serif;
            font-size: 2.2rem;
            color: var(--orange-lt);
            font-weight: 700;
            line-height: 1;
        }

        .hero-stat span {
            display: block;
            font-size: 0.68rem;
            color: rgba(255, 255, 255, .55);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-top: 5px;
        }

        /* Slider dots */
        .sdots {
            position: absolute;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 3;
        }

        .sdot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .35);
            cursor: pointer;
            transition: all .3s;
        }

        .sdot.active {
            background: var(--orange);
            width: 22px;
            border-radius: 4px;
        }

        @media (max-width: 700px) {
            .hero-stat {
                padding: 0 18px;
            }

            .hero-stat strong {
                font-size: 1.6rem;
            }
        }

        /* ══════════════════════════════════════
       2. ABOUT
    ══════════════════════════════════════ */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .about-imgs {
            position: relative;
            padding-bottom: 40px;
        }

        .about-img-main {
            width: 88%;
            height: 440px;
            object-fit: cover;
            border-radius: var(--r);
            box-shadow: 0 16px 48px rgba(0, 0, 0, .13);
        }

        .about-img-secondary {
            width: 55%;
            height: 230px;
            object-fit: cover;
            border-radius: var(--r);
            border: 5px solid var(--white);
            box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .about-text p {
            color: var(--body-text);
            font-size: 0.95rem;
            line-height: 1.9;
            margin-bottom: 16px;
        }

        .craft-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 24px;
        }

        .craft-pill {
            font-size: 0.76rem;
            font-weight: 500;
            padding: 5px 14px;
            border: 1.5px solid var(--orange);
            border-radius: 100px;
            color: var(--orange);
            background: rgba(192, 122, 66, .06);
        }

        @media (max-width: 900px) {
            .about-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .about-img-secondary {
                display: none;
            }

            .about-imgs {
                padding-bottom: 0;
            }
        }

        /* ══════════════════════════════════════
       3. MAP SECTION — Chhau Trail District Explorer
    ══════════════════════════════════════ */

        .map-warpper {
            display: grid;
            grid-template-columns: 45% 1fr;
            min-height: 100vh;
            align-items: start;
        }

        .map-panel {
            position: sticky;
            top: calc(var(--nav-h) + 32px);
            background: var(--cream);
            border-radius: 12px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, .08);
            padding: 40px 32px 28px;
        }

        .map-legend {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 18px;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .map-legend .legend-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--orange);
            display: inline-block;
        }

        svg.state-map {
            width: 100%;
            overflow: visible;
        }

        svg.state-map .cls-2 {
            fill: #BFE3DB;
            stroke: #5FA89D;
            stroke-width: 1.1;
            cursor: pointer;
            transition: fill 160ms ease, stroke 160ms ease, filter 160ms ease;
            outline: none;
        }

        svg.state-map .cls-2:hover {
            fill: #A9D6CC;
            filter: brightness(1.03) drop-shadow(0 2px 4px rgba(0, 0, 0, .1));
        }

        svg.state-map .cls-2:focus-visible {
            stroke: #C07A42;
            stroke-width: 2.2;
        }

        svg.state-map .cls-2.is-active {
            fill: #C07A42;
            stroke: #aa6d3a;
            filter: drop-shadow(0 2px 6px rgba(192, 122, 66, .35));
        }

        /* svg.state-map .cls-2.is-dim {
            opacity: 0.45;
        } */

        svg.state-map .cls-5 {
            font-family: 'Open Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: 12px;
            fill: #241C15;
            pointer-events: none;
            transition: fill 160ms ease, opacity 160ms ease;
        }

        svg.state-map .cls-5.is-active-label {
            fill: #000;
        }

        svg.state-map .cls-5.is-dim-label {
            opacity: 0.7;
        }

        /* 
        svg.state-map .cls-1 {
            fill: #241C15;
            opacity: 0.55;
        }

        svg.state-map path:not(.cls-2) {
            fill: #241C15;
            opacity: 0.55;
        } */

        /* .district-pulse {
            fill: none;
            stroke: #C07A42;
            stroke-width: 2;
            opacity: 0;
        }

        .district-pulse.run {
            animation: pulseRing 900ms ease-out;
        } */

        /* @keyframes pulseRing {
            0% {
                r: 2;
                opacity: 0.9;
                stroke-width: 3;
            }

            100% {
                r: 26;
                opacity: 0;
                stroke-width: 0.5;
            }
        } */

        /* ---------- RIGHT: DESTINATIONS PANEL ---------- */
        .list-panel {
            padding: 44px 48px 80px;
            min-width: 0;
            max-height: calc(100vh + 160px);
            overflow-y: auto;
        }

        @media (max-width: 900px) {
            .map-warpper {
                grid-template-columns: 1fr;
                min-height: auto;
            }

            .map-panel {
                position: static;
                max-height: 420px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 28px 20px 20px;
            }

            svg.state-map {
                width: auto;
                max-height: 340px;
            }

            .list-panel {
                padding: 32px 24px 60px;
                max-height: none;
                overflow-y: visible;
            }
        }

        .list-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 28px;
            padding-bottom: 22px;
            border-bottom: 1px solid rgba(36, 28, 21, 0.12);
            flex-wrap: wrap;
        }

        .list-header h2 {
            font-family: 'Fraunces', serif;
            font-weight: 600;
            font-size: clamp(24px, 2.6vw, 32px);
            margin: 0;
            display: flex;
            align-items: baseline;
            gap: 12px;
            flex-wrap: wrap;
        }

        .list-header h2 .count-tag {
            font-family: 'Open Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 0.08em;
            color: #1E5C61;
            background: #DCEEEA;
            padding: 5px 10px;
            border-radius: 999px;
            text-transform: uppercase;
        }

        .clear-btn {
            appearance: none;
            border: 1px solid rgba(36, 28, 21, 0.12);
            background: #fff;
            color: #241C15;
            font-family: 'Work Sans', sans-serif;
            font-size: 13px;
            font-weight: 500;
            padding: 9px 16px;
            border-radius: 999px;
            cursor: pointer;
            display: none;
            align-items: center;
            gap: 8px;
            transition: border-color 150ms ease, color 150ms ease;
        }

        .clear-btn.show {
            display: inline-flex;
        }

        .clear-btn:hover {
            border-color: #B5502E;
            color: #8F3D22;
        }

        .clear-btn svg {
            width: 11px;
            height: 11px;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 26px;
        }

        .district-group,
        .grid.full-width {
            grid-column: 1 / -1;
        }

        .district-group {
            margin-bottom: 40px;
        }

        .district-group:last-child {
            margin-bottom: 0;
        }

        .district-group-heading {
            font-family: 'Open Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #8F3D22;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(36, 28, 21, 0.08);
        }

        .card {
            background: #fff;
            border: 1px solid rgba(36, 28, 21, 0.12);
            border-radius: 14px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 1px 0 rgba(36, 28, 21, 0.02);
            opacity: 0;
            transform: translateY(10px);
            animation: cardIn 420ms ease forwards;
        }

        @keyframes cardIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .card .thumb {
            aspect-ratio: 4/3;
            width: 100%;
            object-fit: cover;
            display: block;
            background: #EDE2CE;
        }

        .card .body {
            padding: 18px 18px 20px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .card .district-tag {
            font-family: 'Open Sans Condensed', sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #8F3D22;
            margin-bottom: 6px;
        }

        .card h3 {
            font-family: 'Fraunces', serif;
            font-weight: 600;
            font-size: 19px;
            margin: 0 0 8px;
            line-height: 1.22;
        }

        .card p {
            font-size: 13.5px;
            line-height: 1.55;
            color: rgba(36, 28, 21, 0.7);
            margin: 0 0 16px;
            flex: 1;
        }

        .read-more {
            align-self: flex-start;
            appearance: none;
            border: 1.5px solid #B5502E;
            background: transparent;
            color: #8F3D22;
            font-family: 'Work Sans', sans-serif;
            font-size: 13px;
            font-weight: 600;
            padding: 9px 18px;
            border-radius: 999px;
            cursor: pointer;
            transition: background 150ms ease, color 150ms ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
        }

        .read-more:hover {
            background: #B5502E;
            color: #fff;
        }

        .read-more.is-inert {
            cursor: default;
            opacity: 0.5;
        }

        .read-more.is-inert:hover {
            background: transparent;
            color: #8F3D22;
        }

        .read-more svg {
            width: 12px;
            height: 12px;
            transition: transform 150ms ease;
        }

        .read-more:hover svg {
            transform: translateX(2px);
        }

        .empty-state {
            grid-column: 1/-1;
            text-align: center;
            padding: 70px 20px;
            color: rgba(36, 28, 21, 0.55);
            font-size: 14px;
        }

        .empty-state b {
            display: block;
            font-family: 'Fraunces', serif;
            font-size: 20px;
            color: #241C15;
            margin-bottom: 6px;
            font-weight: 600;
        }



        /* ══════════════════════════════════════
       4. DESTINATION Video Section
    ══════════════════════════════════════ */
        #video-sec {
            position: relative;
            height: 100vh;
            min-height: 560px;
            overflow: hidden;
        }

        #vbg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
            pointer-events: none;
        }

        .voverlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(160deg, rgba(20, 30, 32, .72) 0%, rgba(20, 30, 32, .4) 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 40px;
        }

        .vlabel {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--orange-lt);
            margin-bottom: 18px;
        }

        .voverlay h2 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(2.2rem, 5.5vw, 4.5rem);
            color: var(--white);
            font-weight: 700;
            line-height: 1.15;
            max-width: 700px;
            margin-bottom: 36px;
        }

        .voverlay h2 em {
            font-style: italic;
            color: var(--orange-lt);
        }

        .vplay {
            width: 74px;
            height: 74px;
            border-radius: 50%;
            background: rgba(192, 122, 66, .85);
            border: 2px solid rgba(255, 255, 255, .25);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform .2s, background .2s;
            box-shadow: 0 0 0 14px rgba(192, 122, 66, .15);
        }

        .vplay:hover {
            transform: scale(1.1);
            background: var(--orange);
        }

        .vplay svg {
            fill: #fff;
            margin-left: 5px;
        }

        /* modal */
        .vmodal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9998;
            background: rgba(0, 0, 0, .92);
            align-items: center;
            justify-content: center;
        }

        .vmodal.open {
            display: flex;
        }

        .vmodal-in {
            position: relative;
            width: 90%;
            max-width: 960px;
            aspect-ratio: 16/9;
        }

        .vmodal-in iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: var(--r);
        }

        .vclose {
            position: absolute;
            top: -46px;
            right: 0;
            background: none;
            border: none;
            color: rgba(255, 255, 255, .75);
            font-size: 1.8rem;
            line-height: 1;
            cursor: pointer;
            transition: color .2s;
        }

        .vclose:hover {
            color: var(--orange-lt);
        }