/* ============================================
   Destinations We Cover — Premium Section
   ============================================ */

:root {
    --dw-bg: var(--xp-dark-bg, #0a0e14);
    --dw-gold: var(--xp-orange, #E67E22);
    --dw-gold-light: var(--xp-orange-light, #F6A64B);
    --dw-gold-dark: var(--xp-orange-hover, #D96C12);
    --dw-white: #ffffff;
    --dw-white-60: rgba(255, 255, 255, 0.6);
    --dw-white-40: rgba(255, 255, 255, 0.4);
    --dw-white-20: rgba(255, 255, 255, 0.2);
    --dw-white-10: rgba(255, 255, 255, 0.1);
    --dw-white-05: rgba(255, 255, 255, 0.05);
    --dw-glass: var(--xp-glass-dark, rgba(12, 15, 22, 0.80));
    --dw-glass-border: var(--xp-glass-dark-border, rgba(255, 255, 255, 0.08));
    --dw-ease: var(--xp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* ---- Section ---- */
.dw-section {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    min-height: 700px;
    max-height: 1200px;
    background: var(--dw-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: var(--xp-font-body, 'Inter', sans-serif);
    isolation: isolate;
}

.dw-section *,
.dw-section *::before,
.dw-section *::after {
    box-sizing: border-box;
}

.dw-main {
    position: relative;
    flex: 1;
    display: flex;
    align-items: stretch;
    z-index: 2;
    overflow: hidden;
    min-height: 0;
}

/* ---- Atmosphere ---- */
.dw-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.dw-atmosphere::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(20, 35, 60, 0.3) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 30%, rgba(200, 149, 108, 0.06) 0%, transparent 60%);
}

.dw-atmo-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: screen;
}

.dw-atmo-glow--warm {
    width: 50vw;
    height: 50vw;
    left: 20%;
    top: -15%;
    background: radial-gradient(circle, rgba(200, 149, 108, 0.12) 0%, transparent 65%);
    animation: dwGW 18s ease-in-out infinite alternate;
}

.dw-atmo-glow--cool {
    width: 45vw;
    height: 45vw;
    right: -10%;
    bottom: -20%;
    background: radial-gradient(circle, rgba(60, 100, 180, 0.1) 0%, transparent 65%);
    animation: dwGC 22s ease-in-out infinite alternate;
}

@keyframes dwGW {
    from {
        opacity: 0.5;
        transform: scale(1);
    }

    to {
        opacity: 0.7;
        transform: translate(-2vw, 1vw) scale(1.1);
    }
}

@keyframes dwGC {
    from {
        opacity: 0.3;
        transform: scale(1);
    }

    to {
        opacity: 0.5;
        transform: translate(1vw, -1vw) scale(1.08);
    }
}

.dw-noise {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px;
}

/* ---- Nav ---- */
.dw-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 50;
}

.dw-logo {
    display: flex;
    flex-direction: column;
}

.dw-logo-main {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--dw-white);
}

.dw-logo-sub {
    font-size: 7px;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--dw-white-40);
    margin-top: 1px;
}

.dw-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dw-nav-link {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dw-white-60);
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
    padding-bottom: 2px;
}

.dw-nav-link:hover,
.dw-nav-link.is-active {
    color: var(--dw-white);
}

.dw-nav-link.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--dw-gold);
}

.dw-nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dw-nav-lang {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dw-white-60);
    cursor: pointer;
    border: none;
    background: none;
    transition: color 0.3s;
    padding: 6px 10px;
    border-radius: 6px;
}

.dw-nav-lang:hover {
    color: var(--dw-white);
    background: var(--dw-white-05);
}

.dw-nav-lang svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.dw-nav-cta {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dw-white);
    background: transparent;
    border: 1px solid var(--dw-gold-dark);
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.35s var(--dw-ease);
    text-decoration: none;
}

.dw-nav-cta:hover {
    background: var(--dw-gold);
    border-color: var(--dw-gold);
    color: var(--dw-bg);
}

/* ---- Left Column ---- */
.dw-left {
    position: relative;
    width: clamp(280px, 22vw, 480px);
    flex-shrink: 0;
    padding: clamp(70px, 6vw, 110px) clamp(16px, 2vw, 30px) clamp(24px, 2vw, 40px) clamp(36px, 4vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
}

.dw-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dw-gold);
    margin-bottom: 24px;
}

.dw-heading {
    font-family: var(--xp-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(38px, 3.8vw, 68px);
    font-weight: 300;
    line-height: 1.05;
    color: var(--dw-white);
    margin: 0 0 28px 0;
    letter-spacing: -0.5px;
}

.dw-heading-line {
    display: block;
    overflow: hidden;
}

.dw-heading-line span {
    display: inline-block;
}

.dw-desc {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--dw-white-60);
    max-width: 300px;
    margin-bottom: 0;
}

/* ---- Compass ---- */
.dw-compass {
    position: absolute;
    left: 40px;
    bottom: 20px;
    width: 110px;
    height: 110px;
}

.dw-compass-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--dw-white-10);
}

.dw-compass-ring-inner {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    border: 1px solid var(--dw-white-05);
}

.dw-compass-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 36px;
    transform: translate(-50%, -100%);
    background: linear-gradient(to top, var(--dw-gold-dark), var(--dw-gold));
    border-radius: 1px;
}

.dw-compass-needle::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 36px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 1px;
}

.dw-compass-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dw-gold);
    box-shadow: 0 0 10px rgba(200, 149, 108, 0.5);
}

.dw-compass-dir {
    position: absolute;
    font-size: 9px;
    font-weight: 500;
    color: var(--dw-white-40);
    letter-spacing: 1px;
}

.dw-compass-dir--n {
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--dw-gold);
}

.dw-compass-dir--s {
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.dw-compass-dir--e {
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.dw-compass-dir--w {
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}

/* ---- Center (3D Canvas) ---- */
.dw-center {
    flex: 1;
    position: relative;
    z-index: 5;
    min-width: 0;
    overflow: hidden;
}

.dw-canvas-wrap {
    position: absolute;
    inset: 0;
}

#dw-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.dw-canvas-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse 30% 40% at 50% 45%, rgba(200, 149, 108, 0.04) 0%, transparent 70%);
}

/* ---- Pin Labels ---- */
.dw-pin-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: hidden;
}

.dw-pin-label {
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--dw-white);
    white-space: nowrap;
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.35s var(--dw-ease);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%);
    padding: 4px 8px;
}

.dw-pin-label::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dw-gold);
    box-shadow: 0 0 6px rgba(200, 149, 108, 0.6), 0 0 14px rgba(200, 149, 108, 0.3);
    transition: all 0.35s var(--dw-ease);
}

.dw-pin-label:hover,
.dw-pin-label.is-active {
    color: var(--dw-gold-light);
    transform: translate(-50%, -50%) scale(1.05);
}

.dw-pin-label:hover::before,
.dw-pin-label.is-active::before {
    background: var(--dw-gold-light);
    box-shadow: 0 0 10px rgba(232, 184, 138, 0.8), 0 0 20px rgba(232, 184, 138, 0.4);
    transform: translateY(-50%) scale(1.3);
}

/* ---- Right Panel ---- */
.dw-right {
    position: relative;
    width: clamp(280px, 22vw, 450px);
    flex-shrink: 0;
    padding: clamp(70px, 5.5vw, 100px) clamp(16px, 1.8vw, 32px) clamp(16px, 1.8vw, 32px) 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    z-index: 15;
}

.dw-panel {
    width: 100%;
    max-width: clamp(270px, 22vw, 420px);
    background: var(--dw-glass);
    backdrop-filter: var(--xp-blur, blur(20px)) saturate(1.3);
    -webkit-backdrop-filter: var(--xp-blur, blur(20px)) saturate(1.3);
    border: 1px solid var(--dw-glass-border);
    border-radius: var(--xp-radius-lg, 20px);
    overflow: hidden;
}

.dw-panel-header {
    padding: 20px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.dw-panel-title-wrap {
    display: flex;
    flex-direction: column;
}

.dw-panel-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dw-white);
    margin: 0;
    line-height: 1.2;
}

.dw-panel-title .dw-gold {
    color: var(--dw-gold);
}

.dw-panel-island {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dw-white-40);
    margin-top: 4px;
}

.dw-panel-close {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--dw-white-05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--dw-ease);
    flex-shrink: 0;
}

.dw-panel-close:hover {
    background: var(--dw-white-10);
    transform: rotate(90deg);
}

.dw-panel-close svg {
    width: 12px;
    height: 12px;
    stroke: var(--dw-white-60);
    stroke-width: 2;
}

.dw-panel-image {
    position: relative;
    width: calc(100% - 24px);
    margin: 14px auto 0;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
}

.dw-panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--dw-ease);
}

.dw-panel-image:hover img {
    transform: scale(1.05);
}

.dw-panel-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 15, 22, 0.4) 0%, transparent 50%);
    pointer-events: none;
}

.dw-panel-body {
    padding: 14px 20px 20px;
}

.dw-panel-desc {
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--dw-white-60);
    margin: 0 0 16px 0;
}

/* Categories */
.dw-panel-cats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 4px;
}

.dw-panel-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.3s var(--dw-ease);
}

.dw-panel-cat:hover {
    transform: translateY(-2px);
}

.dw-panel-cat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--dw-white-05);
    border: 1px solid var(--dw-white-05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--dw-ease);
}

.dw-panel-cat:hover .dw-panel-cat-icon {
    background: rgba(200, 149, 108, 0.1);
    border-color: rgba(200, 149, 108, 0.2);
}

.dw-panel-cat-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--dw-white-60);
    stroke-width: 1.5;
    fill: none;
    transition: stroke 0.3s;
}

.dw-panel-cat:hover .dw-panel-cat-icon svg {
    stroke: var(--dw-gold);
}

.dw-panel-cat-label {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dw-white-40);
    transition: color 0.3s;
}

.dw-panel-cat:hover .dw-panel-cat-label {
    color: var(--dw-gold);
}

/* Experiences */
.dw-panel-exp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dw-panel-exp-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dw-white);
}

.dw-panel-exp-arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--dw-white-10);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--dw-ease);
}

.dw-panel-exp-arrow:hover {
    border-color: var(--dw-gold);
    background: rgba(200, 149, 108, 0.1);
}

.dw-panel-exp-arrow svg {
    width: 10px;
    height: 10px;
    stroke: var(--dw-white-40);
    stroke-width: 2;
    fill: none;
}

.dw-panel-exp-arrow:hover svg {
    stroke: var(--dw-gold);
}

.dw-panel-exp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.dw-panel-exp-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.dw-panel-exp-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--dw-ease);
}

.dw-panel-exp-item:hover img {
    transform: scale(1.1);
}

.dw-panel-exp-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 60%);
    pointer-events: none;
}

.dw-panel-exp-name {
    position: absolute;
    bottom: 6px;
    left: 7px;
    right: 7px;
    font-size: 8.5px;
    font-weight: 500;
    color: var(--dw-white);
    z-index: 1;
    line-height: 1.3;
}

/* CTA */
.dw-panel-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, var(--dw-gold-dark), var(--dw-gold));
    border: none;
    border-radius: 10px;
    font-family: var(--xp-font-body, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dw-white);
    cursor: pointer;
    transition: all 0.4s var(--dw-ease);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.dw-panel-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--dw-gold), var(--dw-gold-light));
    opacity: 0;
    transition: opacity 0.4s;
}

.dw-panel-cta:hover::before {
    opacity: 1;
}

.dw-panel-cta span,
.dw-panel-cta svg {
    position: relative;
    z-index: 1;
}

.dw-panel-cta svg {
    width: 14px;
    height: 14px;
    stroke: var(--dw-white);
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s var(--dw-ease);
}

.dw-panel-cta:hover svg {
    transform: translateX(4px);
}

/* ---- Bottom Carousel ---- */
.dw-carousel {
    position: relative;
    height: 76px;
    border-top: 1px solid var(--dw-white-05);
    display: flex;
    align-items: center;
    z-index: 20;
    background: rgba(7, 10, 16, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
    overflow: hidden;
}

.dw-weather {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    border-right: 1px solid var(--dw-white-05);
    height: 100%;
    flex-shrink: 0;
    min-width: 150px;
}

.dw-weather-icon {
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

.dw-weather-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--dw-white-60);
    fill: none;
    stroke-width: 1.5;
}

.dw-weather-info {
    display: flex;
    flex-direction: column;
}

.dw-weather-temp {
    font-size: 18px;
    font-weight: 300;
    color: var(--dw-white);
    line-height: 1;
}

.dw-weather-city {
    font-size: 10px;
    font-weight: 400;
    color: var(--dw-white-40);
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.dw-carousel-nav {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
}

.dw-carousel-btn {
    width: 38px;
    height: 100%;
    border: none;
    background: transparent;
    border-right: 1px solid var(--dw-white-05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
}

.dw-carousel-btn:hover {
    background: var(--dw-white-05);
}

.dw-carousel-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--dw-white-40);
    stroke-width: 2;
    fill: none;
    transition: stroke 0.3s;
}

.dw-carousel-btn:hover svg {
    stroke: var(--dw-white);
}

.dw-carousel-track {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    min-width: 0;
}

.dw-carousel-track::-webkit-scrollbar {
    display: none;
}

.dw-carousel-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 100%;
    flex-shrink: 0;
    cursor: pointer;
    border-right: 1px solid var(--dw-white-05);
    transition: all 0.35s var(--dw-ease);
    position: relative;
}

.dw-carousel-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(200, 149, 108, 0.06), transparent);
    opacity: 0;
    transition: opacity 0.35s;
}

.dw-carousel-card:hover::before,
.dw-carousel-card.is-active::before {
    opacity: 1;
}

.dw-carousel-card.is-active {
    background: rgba(200, 149, 108, 0.05);
}

.dw-carousel-card-img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--dw-white-05);
    transition: border-color 0.3s;
}

.dw-carousel-card:hover .dw-carousel-card-img,
.dw-carousel-card.is-active .dw-carousel-card-img {
    border-color: var(--dw-gold-dark);
}

.dw-carousel-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--dw-ease);
}

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

.dw-carousel-card-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--dw-white-60);
    white-space: nowrap;
    transition: color 0.3s;
    position: relative;
    z-index: 1;
}

.dw-carousel-card:hover .dw-carousel-card-name,
.dw-carousel-card.is-active .dw-carousel-card-name {
    color: var(--dw-white);
}

.dw-carousel-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 100%;
    flex-shrink: 0;
}

.dw-carousel-sep svg {
    width: 8px;
    height: 8px;
    stroke: var(--dw-white-20);
    stroke-width: 2;
    fill: none;
}

.dw-carousel-viewall {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 100%;
    flex-shrink: 0;
    cursor: pointer;
    border-left: 1px solid var(--dw-white-05);
    transition: background 0.3s;
    background: none;
    border-top: none;
    border-bottom: none;
    border-right: none;
}

.dw-carousel-viewall:hover {
    background: var(--dw-white-05);
}

.dw-carousel-viewall-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--dw-gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--dw-ease);
}

.dw-carousel-viewall:hover .dw-carousel-viewall-icon {
    background: var(--dw-gold);
    border-color: var(--dw-gold);
}

.dw-carousel-viewall-icon svg {
    width: 10px;
    height: 10px;
    stroke: var(--dw-gold);
    stroke-width: 2;
    fill: none;
}

.dw-carousel-viewall:hover .dw-carousel-viewall-icon svg {
    stroke: var(--dw-bg);
}

.dw-carousel-viewall-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dw-white-60);
    white-space: nowrap;
    transition: color 0.3s;
}

.dw-carousel-viewall:hover .dw-carousel-viewall-text {
    color: var(--dw-white);
}

/* ---- GSAP animation classes ---- */
.dw-hidden {
    opacity: 0;
    transform: translateY(25px);
}

.dw-hidden-heading {
    opacity: 0;
    transform: translateY(100%);
}

/* ---- Responsive ---- */
@media (max-width: 1400px) {
    .dw-left {
        width: 280px;
        padding-left: 40px;
    }

    .dw-right {
        width: 280px;
        padding-right: 16px;
    }

    .dw-panel {
        max-width: 260px;
    }
}

@media (max-width: 1200px) {
    .dw-right {
        position: absolute;
        right: 16px;
        top: 80px;
        width: 290px;
        padding: 0;
        z-index: 25;
    }

    .dw-left {
        width: 300px;
    }
}

@media (max-width: 1024px) {
    .dw-section {
        height: auto;
        min-height: 100vh;
        max-height: none;
    }

    .dw-main {
        flex-direction: column;
    }

    .dw-left {
        width: 100%;
        padding: 100px 30px 30px;
    }

    .dw-center {
        width: 100%;
        height: 50vh;
        min-height: 400px;
    }

    .dw-right {
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        padding: 20px;
        display: flex;
        justify-content: center;
    }

    .dw-panel {
        max-width: 400px;
    }

    .dw-compass {
        display: none;
    }

    .dw-nav {
        display: none;
    }
}

@media (max-width: 768px) {
    .dw-carousel {
        height: auto;
        flex-wrap: wrap;
        padding: 8px 0;
    }

    .dw-weather {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--dw-white-05);
        padding: 10px 20px;
    }

    .dw-carousel-track {
        width: 100%;
    }

    .dw-carousel-nav {
        display: none;
    }

    .dw-left {
        padding: 80px 20px 20px;
    }
}

@media (max-width: 480px) {
    .dw-heading {
        font-size: 28px;
    }

    .dw-panel {
        max-width: 100%;
    }
}

/* ============================================================
   TOKENS
============================================================ */
:root {
    --orange: var(--xp-orange, #E67E22);
    --orange-d: var(--xp-orange-hover, #D96C12);
    --teal: var(--xp-teal, #2A8C8C);
    --navy: var(--xp-navy, #0F1E2E);
    --white: #FFFFFF;
    --light: #F8F9FA;
    --gray: var(--xp-body, #667085);
    --border: var(--xp-border, rgba(15, 30, 46, 0.08));
    --shadow: var(--xp-shadow-lg, 0 20px 60px rgba(15, 30, 46, 0.10));
    --r: var(--xp-duration, 0.4s) ease;
}

/* ============================================================
   SCOPED RESET (partner section only)
============================================================ */
.partner *,
.partner *::before,
.partner *::after {
    box-sizing: border-box;
}

.partner ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.partner button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--xp-font-body, 'Inter', sans-serif);
}

.partner input {
    font-family: var(--xp-font-body, 'Inter', sans-serif);
}

/* ============================================================
   SECTION SHELL
============================================================ */
.partner {
    display: flex;
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    font-family: var(--xp-font-body, 'Inter', sans-serif);
    z-index: 1;
}

/* ============================================================
   LEFT PANEL
============================================================ */
.left-panel {
    position: relative;
    width: 50%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Light landscape background */
.left-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 60%, rgba(200, 225, 210, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 30%, rgba(190, 210, 230, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(210, 230, 220, 0.5) 0%, transparent 60%),
        linear-gradient(160deg, #f0f4f1 0%, #e8eef3 35%, #edf2f5 60%, #f5f7f9 100%);
    z-index: 0;
}

/* Mountain silhouettes — light version */
.left-bg::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    background:
        radial-gradient(ellipse at 20% 100%, rgba(180, 200, 190, 0.6) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 100%, rgba(190, 210, 195, 0.55) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 100%, rgba(175, 195, 185, 0.6) 0%, transparent 38%);
    clip-path: polygon(0 100%, 0 55%, 8% 40%, 20% 25%, 30% 38%, 42% 15%, 55% 35%, 65% 20%, 78% 32%, 88% 18%, 100% 28%, 100% 100%);
    z-index: 1;
}

/* Lake reflection — light version */
.left-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28%;
    background: linear-gradient(180deg, rgba(180, 210, 225, 0.3) 0%, rgba(190, 215, 230, 0.35) 100%);
    z-index: 1;
}

.left-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.2) 100%);
    z-index: 2;
}

#threeCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0.7;
}

/* Airplane path SVG */
.plane-path-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

/* Animated airplane emoji */
.airplane {
    position: absolute;
    font-size: 26px;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
    transform-origin: center center;
}

/* NZ Map */
.nz-map-silhouette {
    position: absolute;
    bottom: 40px;
    right: 30px;
    width: 70px;
    z-index: 5;
    opacity: 0.08;
    pointer-events: none;
}

.nz-map-silhouette svg {
    fill: rgba(15, 30, 46, 0.15);
}

/* Logo */
.xplore-logo {
    position: absolute;
    top: 32px;
    left: 40px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: fadeUp 0.7s 0.3s ease forwards;
}

.logo-mark {
    width: 36px;
    height: 36px;
    background: var(--orange);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--xp-font-display, 'Fraunces', Georgia, serif);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-text span {
    font-family: var(--xp-font-body, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--xp-heading, #1F2937);
}

.logo-text small {
    font-family: var(--xp-font-body, 'Inter', sans-serif);
    font-size: 8.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: rgba(15, 30, 46, 0.5);
    text-transform: uppercase;
}

/* Left Content */
.left-content {
    position: relative;
    z-index: 10;
    margin-top: auto;
    margin-bottom: auto;
    padding: clamp(3rem, 5vw, 6rem) clamp(2rem, 4vw, 5rem);
    display: flex;
    flex-direction: column;
    gap: var(--xp-space-md, 1.5rem);
}

/* Heading */
.main-heading {
    font-family: var(--xp-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--xp-heading, #1F2937);
    opacity: 0;
    animation: fadeUp 0.8s 0.5s ease forwards;
}

.heading-orange {
    color: #cf4836;
    font-style: italic;
    font-weight: 700;
}

.heading-white {
    color: var(--xp-heading, #1F2937);
}

/* Subtext */
.subtext {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--xp-body, #667085);
    font-style: italic;
    border-left: 2px solid var(--orange);
    padding-left: 18px;
    max-width: 380px;
    opacity: 0;
    animation: fadeUp 0.8s 0.7s ease forwards;
}

/* Checklist */
.check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    opacity: 0;
    animation: fadeUp 0.8s 0.9s ease forwards;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--xp-heading, #1F2937);
    letter-spacing: 0.01em;
}

.chk {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(230, 126, 34, 0.12);
    border: 1.5px solid var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--orange);
    flex-shrink: 0;
}

/* CTA Button */
.cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.95rem 1.5rem 0.95rem 1.75rem;
    background: var(--xp-orange-hover, #D96C12);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: var(--xp-font-body, 'Inter', sans-serif);
    letter-spacing: 0.01em;
    border-radius: var(--xp-radius-pill, 999px);
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease, transform 0.18s ease, box-shadow 0.4s ease;
    box-shadow: 0 12px 30px -10px rgba(230, 126, 34, 0.35);
    align-self: flex-start;
    margin-top: 4px;
    opacity: 0;
    animation: fadeUp 0.8s 1.1s ease forwards;
}

.cta-btn:hover {
    background: var(--xp-orange-hover, #D96C12);
    box-shadow: 0 18px 40px -12px rgba(230, 126, 34, 0.45);
}

.cta-btn:active {
    transform: scale(0.97)
}

.cta-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
}

/* Dashed arrow */
.dashed-arrow {
    width: 160px;
    opacity: 0;
    animation: fadeUp 0.8s 1.3s ease forwards;
}

/* ============================================================
   RIGHT PANEL
============================================================ */
.right-panel {
    width: 50%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem);
    background: var(--xp-bg-alt);
    position: relative;
}

/* Chat notice */
.chat-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-family: var(--xp-font-body, 'Inter', sans-serif);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--orange);
    letter-spacing: 0.03em;
    animation: fadeUp 0.7s 0.6s ease both;
}

.notice-arrow {
    font-size: 18px;
    letter-spacing: 2px;
    opacity: 0.5;
}

.notice-text {
    background: rgba(230, 126, 34, 0.07);
    border: 1px dashed rgba(230, 126, 34, 0.5);
    border-radius: var(--xp-radius-pill, 999px);
    padding: 6px 18px;
    white-space: nowrap;
}

/* Chat Card */
.chat-card {
    width: 100%;
    max-width: clamp(420px, 32vw, 640px);
    height: min(clamp(520px, 42vw, 780px), 82vh);
    background: #fff;
    border-radius: var(--xp-radius-lg, 20px);
    box-shadow: var(--xp-shadow-lg, 0 20px 60px rgba(15, 30, 46, 0.10));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cardIn 0.9s 0.8s ease both;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

/* Chat Header */
.chat-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}

.chat-avatar-wrap {
    position: relative
}

.chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #1a1a1a;
    flex-shrink: 0;
}

.chat-avatar svg {
    width: 100%;
    height: 100%
}

.chat-hdr-info {
    flex: 1
}

.chat-hdr-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--xp-heading, #1F2937);
    line-height: 1.3;
    margin: 0;
}

.chat-hdr-role {
    font-size: 12px;
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.4;
    margin: 0;
}

.online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25D366;
    display: inline-block;
    animation: pulseDot 2s infinite;
}

.online-txt {
    color: #25D366;
    font-weight: 500
}

@keyframes pulseDot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: 0.6;
        transform: scale(0.85)
    }
}

.chat-hdr-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.chat-hdr-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
}

/* Messages wrap */
.messages-wrap {
    flex: 1;
    overflow: hidden;
    padding: 18px 18px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Chips track (collapsed answers) */
.chips-track {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 0;
}

.answer-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(42, 140, 140, 0.09);
    border: 1px solid rgba(42, 140, 140, 0.22);
    border-radius: 16px;
    font-size: 11px;
    color: var(--teal);
    font-weight: 500;
    animation: chipPop 0.3s ease;
}

@keyframes chipPop {
    from {
        opacity: 0;
        transform: scale(0.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.answer-chip .dbl-tick {
    font-size: 10px;
    color: #2196F3
}

/* Live messages */
.messages-live {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    min-height: 0;
}

/* Bubble wrappers */
.bwrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    animation: bubUp 0.35s ease;
}

@keyframes bubUp {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

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

.bwrap.mgr {
    align-items: flex-start
}

.bwrap.usr {
    align-items: flex-end
}

/* Manager has avatar row */
.mgr-row {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.mgr-mini-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1a1a1a;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--orange);
    font-family: var(--xp-font-display, 'Fraunces', Georgia, serif);
    align-self: flex-end;
}

.bubble {
    max-width: 76%;
    padding: 11px 15px;
    font-size: 13.5px;
    line-height: 1.55;
    border-radius: 18px;
    position: relative;
}

.bubble.mgr {
    background: #F5F3EF;
    color: var(--xp-heading, #1F2937);
    border-bottom-left-radius: 5px;
}

.bubble.usr {
    background: #25D366;
    color: #fff;
    border-bottom-right-radius: 5px;
}

.btime {
    font-size: 10px;
    color: var(--gray);
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tick {
    transition: color 0.4s ease;
    font-size: 11px;
    color: var(--gray)
}

.tick.blue {
    color: #2196F3
}

/* Typing indicator */
.typing-bub {
    background: #F5F3EF;
    border-radius: 18px;
    border-bottom-left-radius: 5px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    animation: bubUp 0.3s ease;
}

.tdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gray);
    animation: tBounce 1.2s infinite ease-in-out;
}

.tdot:nth-child(2) {
    animation-delay: 0.2s
}

.tdot:nth-child(3) {
    animation-delay: 0.4s
}

@keyframes tBounce {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.45
    }

    40% {
        transform: translateY(-6px);
        opacity: 1
    }
}

/* ============================================================
   CHIPS BAR (progress)
============================================================ */
.chips-bar {
    display: flex;
    gap: 4px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.chips-bar::-webkit-scrollbar {
    display: none
}

.chip-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 16px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--gray);
    background: #F5F3EF;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: all var(--r);
    flex-shrink: 0;
}

.chip-item.active {
    background: rgba(230, 126, 34, 0.1);
    border-color: rgba(230, 126, 34, 0.35);
    color: var(--orange);
}

.chip-item.done {
    background: rgba(42, 140, 140, 0.09);
    border-color: rgba(42, 140, 140, 0.25);
    color: var(--teal);
}

.chip-item.done::after {
    /* content: '✓'; */
    font-size: 10px;
    margin-left: 2px;
}

.chip-ico {
    font-size: 12px
}

/* ============================================================
   INPUT ROW
============================================================ */
.chat-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    height: 44px;
    padding: 0 18px;
    border-radius: 22px;
    border: 1.5px solid rgba(15, 30, 46, 0.12);
    background: #f8f9fa;
    font-size: 13.5px;
    color: var(--xp-heading, #1F2937);
    outline: none;
    transition: border-color var(--r);
}

.chat-input::placeholder {
    color: var(--gray)
}

.chat-input:focus {
    border-color: rgba(42, 140, 140, 0.5)
}

button.send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--orange-d);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--r), transform 0.15s ease, box-shadow var(--r);
    box-shadow: 0 4px 16px rgba(230, 126, 34, 0.4);
}

.send-btn:hover {
    background: var(--orange-d);
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.5)
}

.send-btn:active {
    transform: scale(0.92)
}

.send-btn svg {
    width: 17px;
    height: 17px;
    transform: translateX(1px)
}

.chat-input.shake {
    animation: inputShake 0.4s ease;
    border-color: #e74c3c !important;
}

@keyframes inputShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

.bubble.mgr.error-bubble {
    background: #fff5f5;
    border: 1px solid rgba(231, 76, 60, 0.2);
    color: #c0392b;
}

/* ============================================================
   SUCCESS OVERLAY
============================================================ */
.success-overlay {
    position: absolute;
    inset: 0;
    background: rgba(250, 249, 246, 0.96);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    border-radius: 0;
}

.success-overlay.show {
    opacity: 1;
    pointer-events: auto
}

.success-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.success-plane {
    color: var(--xp-orange, #E67E22);
    animation: soarPlane 2.5s ease-in-out infinite;
}

@keyframes soarPlane {

    0%,
    100% {
        transform: translateY(0) rotate(-5deg)
    }

    50% {
        transform: translateY(-14px) rotate(5deg)
    }
}

.success-inner h3 {
    font-family: var(--xp-font-display, 'Fraunces', Georgia, serif);
    font-size: 30px;
    font-weight: 600;
    color: var(--xp-heading, #1F2937);
    margin: 0;
}

.success-inner p {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.75;
    margin: 0;
}

/* ============================================================
   PAPER PLANE FX
============================================================ */
.pfx {
    position: fixed;
    font-size: 22px;
    pointer-events: none;
    z-index: 9999;
}

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

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

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:900px) {
    .partner {
        flex-direction: column;
    }

    .left-panel {
        width: 100%;
        min-height: auto;
    }

    .right-panel {
        width: 100%;
        min-height: auto;
        padding: 2rem 1.25rem;
    }

    .left-content {
        padding: 3rem 1.5rem 2.5rem;
    }

    .check-list {
        grid-template-columns: 1fr 1fr;
    }

    .chat-card {
        max-width: 100%;
        height: 520px;
    }

    .notice-text {
        font-size: 11px;
        padding: 5px 12px;
    }

    .xplore-logo {
        top: 20px;
        left: 24px;
    }

    .dashed-arrow {
        display: none;
    }
}

@media(max-width:480px) {
    .left-content {
        padding: 2.5rem 1.25rem 2rem;
        gap: 1.25rem;
    }

    .main-heading {
        font-size: 32px;
    }

    .right-panel {
        padding: 1.5rem 1rem;
    }

    .chat-card {
        height: 460px;
    }

    .chips-bar {
        padding: 8px 10px;
        gap: 3px;
    }

    .chip-item {
        font-size: 10.5px;
        padding: 4px 8px;
    }

    .check-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .subtext br {
        display: none;
    }
}

/* =============================================================
   ULTRA-WIDE & LARGE DISPLAY RESPONSIVE — Partner & Destinations
============================================================= */

@media (min-width: 1600px) {
    .dw-panel {
        border-radius: 20px;
    }

    .dw-panel-desc {
        font-size: 13.5px;
    }

    .dw-panel-title {
        font-size: 22px;
    }

    .dw-label {
        font-size: 12px;
    }

    .dw-desc {
        font-size: 15px;
        max-width: 340px;
    }

    .bubble {
        font-size: 14px;
    }

    .chat-hdr-name {
        font-size: 15px;
    }

    .subtext {
        font-size: 15px;
        max-width: 420px;
    }

    .check-list li {
        font-size: 14px;
    }

    .cta-btn {
        font-size: 15px;
        padding: 16px 38px;
    }
}

@media (min-width: 1920px) {
    .dw-heading {
        font-size: clamp(38px, 3.8vw, 76px);
    }

    .dw-desc {
        font-size: 15.5px;
        max-width: 360px;
    }

    .dw-panel-title {
        font-size: 24px;
    }

    .dw-panel-desc {
        font-size: 14px;
    }

    .left-content {
        gap: 32px;
    }

    .subtext {
        font-size: 15.5px;
        max-width: 440px;
    }

    .check-list li {
        font-size: 14.5px;
    }

    .bubble {
        font-size: 14.5px;
    }

    .chat-input {
        font-size: 14.5px;
        height: 48px;
    }
}

@media (min-width: 2560px) {
    .left-content {
        gap: 36px;
    }

    .subtext {
        font-size: 16.5px;
        max-width: 480px;
    }

    .check-list li {
        font-size: 15.5px;
        gap: 12px;
    }

    .chk {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .cta-btn {
        font-size: 16px;
        padding: 18px 42px;
    }

    .chat-notice {
        font-size: 14px;
    }

    .bubble {
        font-size: 15px;
        padding: 13px 18px;
    }

    .chat-hdr-name {
        font-size: 16px;
    }

    .chat-hdr-role {
        font-size: 13px;
    }

    .chat-input {
        font-size: 15px;
        height: 50px;
    }

    .chip-item {
        font-size: 12.5px;
        padding: 6px 14px;
    }

    .dw-heading {
        font-size: clamp(38px, 3.8vw, 84px);
    }

    .dw-desc {
        font-size: 16px;
        max-width: 400px;
    }

    .dw-panel-title {
        font-size: 26px;
    }

    .dw-panel-desc {
        font-size: 14.5px;
    }

    .dw-panel-exp-name {
        font-size: 10px;
    }

    .dw-panel-cat-label {
        font-size: 9px;
    }

    .dw-panel-cat-icon {
        width: 42px;
        height: 42px;
    }
}

@media (min-width: 3440px) {
    .left-content {
        gap: 40px;
    }

    .subtext {
        font-size: 18px;
        max-width: 520px;
    }

    .check-list li {
        font-size: 16.5px;
    }

    .cta-btn {
        font-size: 17px;
        padding: 20px 46px;
    }

    .bubble {
        font-size: 16px;
        padding: 14px 20px;
    }

    .chat-hdr-name {
        font-size: 17px;
    }

    .chat-input {
        font-size: 16px;
        height: 54px;
    }

    .chip-item {
        font-size: 13px;
    }

    .dw-desc {
        font-size: 17px;
        max-width: 440px;
    }

    .dw-panel-title {
        font-size: 28px;
    }

    .dw-panel-desc {
        font-size: 15px;
    }
}

/* ============================================================
   DESTINATION INTRO — premium editorial header before the map
============================================================ */
.dest-intro {
    position: relative;
    background: var(--xp-bg, #FAF9F7);
    padding: clamp(5rem, 10vh, 9rem) 1.5rem clamp(4rem, 8vh, 7rem);
    text-align: center;
    overflow: hidden;
}

.dest-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--xp-bg, #FCFBF8) 0%, var(--xp-bg-alt, #F8F7F4) 100%);
    pointer-events: none;
}

.dest-intro::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg, transparent 0%, rgba(30, 24, 16, 0.05) 100%);
    pointer-events: none;
}

.dest-intro__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.dest-intro__eyebrow {
    display: inline-block;
    font-family: var(--xp-font-body, 'Inter', sans-serif);
    font-size: var(--xp-eyebrow-size, 0.72rem);
    font-weight: var(--xp-eyebrow-weight, 600);
    letter-spacing: var(--xp-eyebrow-tracking, 0.20em);
    text-transform: uppercase;
    color: var(--xp-orange, #E67E22);
    margin-bottom: 1.25rem;
    opacity: 0;
    transform: translateY(20px);
}

.dest-intro__heading {
    font-family: var(--xp-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--xp-heading, #1F2937);
    margin: 0 0 1.5rem;
    opacity: 0;
    transform: translateY(24px);
}

.dest-intro__sub {
    font-family: var(--xp-font-body, 'Inter', sans-serif);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--xp-body, #667085);
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(24px);
}

@media (max-width: 768px) {
    .dest-intro {
        padding: clamp(3.5rem, 8vh, 5rem) 1.25rem clamp(3rem, 6vh, 4rem);
    }

    .dest-intro__heading {
        font-size: clamp(1.7rem, 6vw, 2.2rem);
    }

    .dest-intro__sub {
        font-size: 0.92rem;
    }
}

/* =============================================================
   SPRINT 4 — PRODUCTION RESPONSIVE QA FIXES
   Complete responsive coverage: 320px → 3840px
   No redesign — only layout, spacing, overflow, and scaling fixes
============================================================= */

/* ---- Global overflow prevention ---- */
html,
body {
    max-width: 100vw;
}

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

img {
    max-width: 100%;
    height: auto;
}

/* =============================================================
   320px — SMALLEST MOBILE
============================================================= */
@media (max-width: 360px) {
    .hero-content .hero-title {
        font-size: clamp(24px, 8vw, 32px);
    }

    .hero-content .hero-sub-title {
        font-size: clamp(11px, 3.5vw, 13px);
    }

    .xp-hero-desc {
        font-size: 12px;
        line-height: 1.65;
    }

    .xp-hero-badges {
        gap: 4px;
    }

    .xp-hero-badges span {
        font-size: 8px;
        padding: 3px 8px;
    }

    .hero-btn .theme-btn {
        font-size: 12px;
        padding: 10px 18px;
    }

    .xp-hero-btn2 {
        font-size: 12px;
    }

    /* Trust stats */
    .xp-stat-value {
        font-size: 28px;
    }

    .xp-stat-suffix {
        font-size: 16px;
    }

    .xp-stat-label {
        font-size: 11px;
    }

    .xp-stat-col {
        padding: 0 8px;
    }

    /* Who We Are */
    .wwa__container {
        padding: 2.5rem 1rem;
    }

    .wwa__heading {
        font-size: 1.8rem;
        white-space: normal;
    }

    .wwa__lede {
        font-size: 0.88rem;
    }

    .wwa__cta {
        padding: 0.8rem 1.2rem 0.8rem 1.4rem;
        font-size: 0.82rem;
    }

    /* Services */
    .xp-sv-content {
        padding: 0 16px 50px;
    }

    .xp-sv-title {
        font-size: 24px;
    }

    .xp-sv-desc {
        font-size: 13px;
    }

    .xp-sv-tags span {
        font-size: 10px;
        padding: 4px 10px;
    }

    .xp-sv-bar {
        padding: 16px 16px;
    }

    /* Journal */
    .jrnl {
        padding: var(--xp-space-3xl) 1rem;
    }

    .jrnl-title {
        font-size: 1.8rem;
    }

    .jrnl-lede {
        font-size: 0.88rem;
    }

    .jrnl-feature__title {
        font-size: 1.2rem;
    }

    .jrnl-feature__excerpt {
        font-size: 0.82rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .jrnl-card__title {
        font-size: 0.88rem;
    }

    /* How We Deliver */
    .hwd-heading {
        font-size: 1.5rem;
    }

    .hwd-step__num {
        font-size: 1.6rem;
    }

    .hwd-step__title {
        font-size: 1rem;
    }

    .hwd-step__desc {
        font-size: 0.8rem;
    }

    .hwd-panel {
        padding: 1rem;
    }

    /* Partner */
    .left-content {
        padding: 2rem 1rem 1.5rem;
        gap: 1rem;
    }

    .main-heading {
        font-size: 28px;
    }

    .subtext {
        font-size: 13px;
    }

    .check-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .check-list li {
        font-size: 12px;
    }

    .cta-btn {
        font-size: 0.82rem;
        padding: 0.8rem 1.2rem 0.8rem 1.4rem;
    }

    .right-panel {
        padding: 1.25rem 0.75rem;
    }

    .chat-card {
        height: 420px;
    }

    .chat-input {
        height: 40px;
        font-size: 12.5px;
        padding: 0 14px;
    }

    button.send-btn {
        width: 44px;
        height: 44px;
    }

    .chip-item {
        font-size: 9.5px;
        padding: 3px 7px;
    }

    .bubble {
        font-size: 12.5px;
        padding: 9px 12px;
        max-width: 82%;
    }

    /* Footer */
    .footer-widget-wrap {
        padding: 60px 0 40px;
    }

    .footer-widget-box p {
        font-size: 13px;
    }

    .footer-widget-title {
        font-size: 16px;
    }

    .footer-list li a {
        font-size: 13px;
    }

    /* Destination Experience */
    .dest-list__name {
        font-size: 13px;
    }

    .dest-detail {
        padding: 0.8rem;
    }

    .dest-detail__name {
        font-size: 1.2rem;
    }
}

/* =============================================================
   375px — iPHONE SE / STANDARD MOBILE
============================================================= */
@media (min-width: 361px) and (max-width: 390px) {
    .hero-content .hero-title {
        font-size: clamp(26px, 7.5vw, 34px);
    }

    .xp-hero-desc {
        font-size: 12.5px;
    }

    .wwa__heading {
        font-size: 2rem;
        white-space: normal;
    }

    .jrnl-title {
        font-size: 2rem;
    }

    .main-heading {
        font-size: 30px;
    }

    .chat-card {
        height: 440px;
    }
}

/* =============================================================
   391px–430px — LARGER PHONES (iPhone Pro, Pixel)
============================================================= */
@media (min-width: 391px) and (max-width: 430px) {
    .xp-hero-desc {
        font-size: 13px;
    }

    .wwa__heading {
        font-size: 2.1rem;
        white-space: normal;
    }

    .main-heading {
        font-size: 32px;
    }

    .chat-card {
        height: 460px;
    }

    .jrnl-feature__excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* =============================================================
   431px–540px — PHABLETS / SMALL TABLETS
============================================================= */
@media (min-width: 431px) and (max-width: 540px) {
    .wwa__heading {
        font-size: 2.2rem;
        white-space: normal;
    }

    .wwa__showcase {
        aspect-ratio: 1 / 1;
    }

    .check-list {
        grid-template-columns: 1fr 1fr;
    }

    .chat-card {
        height: 480px;
    }

    .jrnl-feature__link {
        min-height: 22rem;
    }

    .hwd-stage__inner {
        padding: 1.5rem 1.25rem;
    }
}

/* =============================================================
   541px–640px — LARGE PHABLET / SMALL TABLET PORTRAIT
============================================================= */
@media (min-width: 541px) and (max-width: 640px) {
    .partner {
        flex-direction: column;
    }

    .left-panel,
    .right-panel {
        width: 100%;
        min-height: auto;
    }

    .left-content {
        padding: 3rem 2rem 2.5rem;
    }

    .chat-card {
        max-width: 100%;
        height: 500px;
    }

    .wwa__heading {
        font-size: 2.4rem;
    }

    .wwa__showcase {
        aspect-ratio: 4 / 3;
    }

    .jrnl-stories {
        grid-template-columns: 1fr;
    }

    .xp-sv-content {
        padding: 0 24px 60px;
    }

    .dest-detail {
        width: calc(100% - 1.6rem);
    }
}

/* =============================================================
   641px–768px — TABLET PORTRAIT (iPad Mini, Fire)
============================================================= */
@media (min-width: 641px) and (max-width: 768px) {
    .hero-content .hero-title {
        font-size: clamp(32px, 5vw, 42px);
    }

    .xp-hero-desc {
        font-size: 14px;
        max-width: 80%;
    }

    .wwa__container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .wwa__heading {
        font-size: 2.6rem;
    }

    .wwa__showcase {
        aspect-ratio: 16 / 11;
        max-height: 50vh;
    }

    .xp-sv-content {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 80px 30px 60px;
    }

    .jrnl-grid {
        grid-template-columns: 1fr;
    }

    .jrnl-stories {
        grid-template-columns: 1fr 1fr;
    }

    .jrnl-feature__link {
        min-height: 24rem;
    }

    .hwd-stage__inner {
        grid-template-columns: 1fr;
    }

    .hwd-left {
        height: auto;
        padding-right: 0;
    }

    .partner {
        flex-direction: column;
    }

    .left-panel,
    .right-panel {
        width: 100%;
        min-height: auto;
    }

    .chat-card {
        max-width: 480px;
        height: 520px;
    }

    .dw-main {
        flex-direction: column;
    }

    .dw-left {
        width: 100%;
        padding: 80px 30px 24px;
    }

    .dw-center {
        width: 100%;
        height: 50vh;
        min-height: 350px;
    }

    .dw-right {
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        padding: 16px;
        display: flex;
        justify-content: center;
    }

    .dw-panel {
        max-width: 380px;
    }

    .footer-widget-wrap .row {
        gap: 2rem 0;
    }
}

/* =============================================================
   769px–820px — TABLET (iPad standard portrait)
============================================================= */
@media (min-width: 769px) and (max-width: 820px) {
    .wwa__container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .wwa__showcase {
        aspect-ratio: 16 / 10;
        max-height: 55vh;
    }

    .xp-sv-content {
        flex: 0 0 48%;
        max-width: 48%;
    }

    .jrnl-grid {
        grid-template-columns: 1fr;
    }

    .jrnl-feature__link {
        min-height: 26rem;
    }

    .hwd-stage__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .hwd-left {
        height: auto;
        padding-right: 0;
    }

    .dw-right {
        width: 260px;
    }

    .partner {
        flex-direction: column;
    }

    .left-panel,
    .right-panel {
        width: 100%;
        min-height: auto;
    }

    .chat-card {
        max-width: 500px;
    }
}

/* =============================================================
   821px–912px — TABLET LANDSCAPE / SURFACE (Surface Pro, iPad Air)
============================================================= */
@media (min-width: 821px) and (max-width: 912px) {
    .wwa__container {
        grid-template-columns: 45% 55%;
        gap: 2rem;
    }

    .wwa__heading {
        font-size: 2.4rem;
    }

    .wwa__pill {
        font-size: 0.76rem;
        padding: 7px 15px 7px 9px;
        gap: 8px;
    }

    .wwa__pill-icon {
        width: 25px;
        height: 25px;
        font-size: 0.62rem;
    }

    .wwa__glass-stat {
        padding: 13px 18px;
    }

    .wwa__gs-num {
        font-size: 1.5rem;
    }

    .wwa__gs-label {
        font-size: 0.56rem;
    }

    .wwa__pill--2 {
        top: 46%;
        right: -6%;
    }

    .wwa__gs--2 {
        bottom: -8%;
        right: -4%;
    }

    .wwa__sat--3 {
        bottom: 16%;
        right: 2%;
        width: 28%;
    }

    .xp-sv-content {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 90px 30px 70px;
    }

    .jrnl-grid {
        grid-template-columns: 1fr .9fr;
    }

    .hwd-stage__inner {
        grid-template-columns: 42% 58%;
    }

    .dw-left {
        width: 260px;
        padding-left: 30px;
    }

    .dw-right {
        width: 260px;
    }

    .dw-panel {
        max-width: 240px;
    }

    .partner {
        flex-direction: row;
    }

    .left-panel {
        width: 50%;
    }

    .right-panel {
        width: 50%;
    }

    .chat-card {
        max-width: 100%;
    }
}

/* =============================================================
   913px–1024px — SMALL LAPTOP / TABLET LANDSCAPE (iPad Pro)
============================================================= */
@media (min-width: 913px) and (max-width: 1024px) {
    .wwa__container {
        grid-template-columns: 44% 56%;
        gap: 2.5rem;
    }

    .wwa__heading {
        font-size: 2.5rem;
    }

    .xp-sv-content {
        flex: 0 0 48%;
        max-width: 48%;
        padding: 100px 36px 80px;
    }

    .jrnl-grid {
        grid-template-columns: 1.1fr .9fr;
    }

    .hwd-stage__inner {
        grid-template-columns: 40% 60%;
    }

    .dw-left {
        width: 260px;
    }

    .dw-right {
        width: 270px;
    }
}

/* =============================================================
   1025px–1152px — STANDARD LAPTOP (HD)
============================================================= */
@media (min-width: 1025px) and (max-width: 1152px) {
    .wwa__container {
        grid-template-columns: 42% 58%;
        gap: 3rem;
    }

    .dw-left {
        width: 260px;
    }

    .dw-right {
        width: 270px;
    }

    .xp-sv-content {
        flex: 0 0 46%;
        max-width: 46%;
    }
}

/* =============================================================
   1153px–1280px — STANDARD LAPTOP (HD+)
============================================================= */
@media (min-width: 1153px) and (max-width: 1280px) {
    .dw-left {
        width: 270px;
    }

    .dw-right {
        width: 280px;
    }

    .wwa__container {
        grid-template-columns: 42% 58%;
    }
}

/* =============================================================
   1281px–1440px — LAPTOP (FHD / MacBook)
============================================================= */
@media (min-width: 1281px) and (max-width: 1440px) {
    .dw-left {
        width: clamp(280px, 20vw, 350px);
    }

    .dw-right {
        width: clamp(280px, 20vw, 360px);
    }
}

/* =============================================================
   1441px–1600px — LARGE LAPTOP / EXTERNAL DISPLAY
============================================================= */
@media (min-width: 1441px) and (max-width: 1600px) {
    .container {
        max-width: 1400px;
    }

    .dw-left {
        width: clamp(300px, 22vw, 420px);
    }

    .dw-right {
        width: clamp(300px, 22vw, 420px);
    }
}

/* =============================================================
   HEADER / NAVIGATION — Full breakpoint coverage
============================================================= */
@media (max-width: 991px) {
    .header-3 .navbar .container {
        padding: 0 16px;
    }

    .nav-right {
        display: none;
    }
}

@media (max-width: 575px) {
    .header-3 .navbar .container {
        padding: 0 12px;
    }

    .navbar-brand img {
        max-height: 36px;
    }

    .offcanvas-header {
        padding: 16px;
    }

    .offcanvas-body .navbar-nav .nav-link {
        font-size: 15px;
        padding: 12px 16px;
    }
}

/* =============================================================
   HERO SECTION — Fine-tuned for all mobile/tablet
============================================================= */
@media (max-width: 767px) {
    .hero-section .hero-single {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
    }

    .heading-2 {
        bottom: 10px;
    }

    .hero-content {
        padding-top: 100px;
    }

    .hero-btn {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .hero-btn .theme-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .text-shape {
        font-size: clamp(50px, 12vw, 120px) !important;
    }

    .wwa__heading {
        white-space: normal;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hero-content {
        padding-top: 120px;
    }

    .hero-content .hero-title {
        font-size: clamp(36px, 5vw, 48px);
    }
}

/* =============================================================
   TRUST / STATS — Fluid across all sizes
============================================================= */
@media (max-width: 480px) {
    .xp-stats-row {
        gap: 0;
    }

    .xp-stat-col {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 8px;
        margin-bottom: 28px;
    }

    .xp-stat-col:nth-last-child(-n+2) {
        margin-bottom: 0;
    }

    .xp-stat-value {
        font-size: 32px;
    }

    .xp-stat-suffix {
        font-size: 18px;
    }

    .xp-stat-label {
        font-size: 12px;
    }
}

@media (min-width: 481px) and (max-width: 640px) {
    .xp-stat-col {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 30px;
    }

    .xp-stat-col:nth-last-child(-n+2) {
        margin-bottom: 0;
    }
}

/* =============================================================
   WHO WE ARE — Showcase scaling & overflow
============================================================= */
@media (max-width: 400px) {
    .wwa__pill {
        font-size: 0.7rem;
        padding: 6px 13px 6px 8px;
    }

    .wwa__pill-icon {
        width: 24px;
        height: 24px;
        font-size: 0.58rem;
    }

    .wwa__glass-stat {
        padding: 12px 17px;
    }

    .wwa__gs-num {
        font-size: 1.3rem;
    }

    .wwa__gs-label {
        font-size: 0.55rem;
    }

    .wwa__main-badge {
        font-size: 0.62rem;
        padding: 4px 10px 4px 8px;
    }

    .wwa__sat-tag {
        font-size: 0.58rem;
        padding: 3px 9px;
    }

    .wwa__pill--3 {
        left: 24%;
    }

    .wwa__gs--2 {
        right: -6%;
    }
}

/* =============================================================
   SERVICES — Mobile content visibility & card layout
============================================================= */
@media (max-width: 480px) {
    .xp-sv-pin {
        height: 100vh;
        height: 100dvh;
    }

    .xp-sv-watermark {
        font-size: 80px;
    }

    .xp-sv-meta {
        gap: 8px;
        margin-bottom: 12px;
    }

    .xp-sv-icon {
        width: 30px;
        height: 30px;
    }

    .xp-sv-icon svg {
        width: 14px;
        height: 14px;
    }

    .xp-sv-title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .xp-sv-accent {
        margin-bottom: 14px;
        width: 35px;
    }

    .xp-sv-desc {
        font-size: 12.5px;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .xp-sv-tags {
        gap: 5px;
        margin-bottom: 18px;
    }

    .xp-sv-cta {
        font-size: 13px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .xp-sv-pin {
        height: 100vh;
        height: 100dvh;
    }

    .xp-sv-watermark {
        font-size: 120px;
    }
}

/* =============================================================
   DESTINATION EXPERIENCE — Canvas & panels responsive
============================================================= */
@media (max-width: 480px) {
    #destination-experience {
        height: 80vh;
        min-height: 500px;
    }

    .dest-list {
        padding: 0.5rem 0.6rem;
        gap: 0.2rem;
    }

    .dest-list__item {
        padding: 0.35rem 0.6rem;
    }

    .dest-list__name {
        font-size: 12px;
    }

    .dest-detail {
        padding: 0.8rem;
        max-height: 45%;
    }

    .dest-detail__name {
        font-size: 1.1rem;
    }

    .dest-detail__stats {
        gap: 1rem;
    }

    .dest-detail__stat b {
        font-size: 1.2rem;
    }

    .dest-detail__stat span {
        font-size: 0.55rem;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #destination-experience {
        height: 85vh;
        min-height: 550px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .dest-detail {
        width: 320px;
        padding: 1rem 1.2rem;
    }

    .dest-list {
        max-height: calc(100% - 2rem);
    }
}

/* =============================================================
   JOURNAL — Grid stability at intermediate widths
============================================================= */
@media (min-width: 621px) and (max-width: 920px) {
    .jrnl-stories {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .jrnl-card__title {
        font-size: 0.92rem;
    }
}

@media (max-width: 620px) {
    .jrnl-feature__panel {
        padding: 1rem;
    }

    .jrnl-feature__title {
        font-size: 1.15rem;
    }

    .jrnl-meta {
        font-size: 0.7rem;
    }

    .jrnl-cta {
        font-size: 0.78rem;
    }
}

/* =============================================================
   HOW WE DELIVER — Mobile layout fixes
============================================================= */
@media (max-width: 480px) {
    .hwd {
        min-height: 450vh;
    }

    .hwd-eyebrow {
        font-size: 0.65rem;
    }

    .hwd-progress__count {
        font-size: 0.72rem;
    }

    .hwd-right {
        min-height: 38vh;
    }
}

@media (min-width: 481px) and (max-width: 820px) {
    .hwd {
        min-height: 500vh;
    }

    .hwd-right {
        min-height: 40vh;
    }
}

/* =============================================================
   PARTNER / ENQUIRY — Two-panel responsiveness
============================================================= */
@media (max-width: 359px) {
    .chat-header {
        padding: 12px 14px;
        gap: 10px;
    }

    .chat-avatar {
        width: 36px;
        height: 36px;
    }

    .chat-hdr-name {
        font-size: 13px;
    }

    .chat-hdr-role {
        font-size: 11px;
    }

    .messages-wrap {
        padding: 12px 12px 6px;
    }

    .chips-bar {
        padding: 6px 8px;
    }

    .chat-input-row {
        padding: 10px 12px;
        gap: 8px;
    }

    .chat-notice {
        font-size: 11px;
    }

    .notice-arrow {
        display: none;
    }
}

@media (min-width: 541px) and (max-width: 900px) {
    .right-panel {
        padding: 2rem 1.5rem;
    }

    .chat-card {
        max-width: 480px;
        height: min(540px, 75vh);
    }
}

/* =============================================================
   FOOTER — Column stacking & spacing
============================================================= */
@media (max-width: 575px) {
    .footer-widget-wrap {
        padding: 50px 0 30px;
    }

    .footer-widget-box.about-us p {
        font-size: 13px;
        line-height: 1.7;
    }

    .footer-contact-item .content h5 {
        font-size: 13px;
    }

    .footer-contact-item .content a {
        font-size: 12px;
    }

    .footer-social li a {
        width: 36px;
        height: 36px;
    }

    .copyright-text {
        font-size: 12px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .footer-widget-wrap .row .col-lg-5 {
        margin-bottom: 2rem;
    }
}

/* =============================================================
   SCROLL-TOP BUTTON — Touch target & positioning
============================================================= */
#scroll-top {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {
    #scroll-top {
        bottom: 20px;
        right: 16px;
    }
}

/* =============================================================
   ULTRAWIDE — max-width containers & proportional scaling
============================================================= */
@media (min-width: 1920px) {
    .hero-section .container {
        max-width: min(85vw, 1800px);
    }

    .xp-trust-area .container {
        max-width: min(85vw, 1800px);
    }

    .footer-area .container {
        max-width: min(85vw, 1800px);
    }
}

@media (min-width: 2560px) {
    .hero-section .container {
        max-width: min(80vw, 2200px);
    }

    .hero-content .hero-title {
        font-size: clamp(52px, 3.5vw, 80px);
    }

    .xp-hero-desc {
        font-size: clamp(16px, 1vw, 22px);
        max-width: 580px;
    }

    .xp-trust-area .container {
        max-width: min(80vw, 2200px);
    }

    .footer-area .container {
        max-width: min(80vw, 2200px);
    }

    .dest-intro__inner {
        max-width: 900px;
    }

    .dest-intro__heading {
        font-size: clamp(2.8rem, 3.5vw, 4.2rem);
    }

    .dest-intro__sub {
        font-size: clamp(1.05rem, 1vw, 1.3rem);
        max-width: 700px;
    }

    #destination-experience {
        height: 100vh;
    }

    .dest-detail {
        width: clamp(420px, 22vw, 560px);
    }

    .dest-detail__name {
        font-size: 2.6rem;
    }

    .dest-detail__copy {
        font-size: 1rem;
    }

    .dest-list__heading {
        font-size: 28px;
    }

    .dest-list__name {
        font-size: 20px;
    }
}

@media (min-width: 3440px) {
    .hero-section .container {
        max-width: min(75vw, 2800px);
    }

    .hero-content .hero-title {
        font-size: clamp(60px, 3vw, 90px);
    }

    .xp-hero-desc {
        font-size: clamp(18px, 0.9vw, 24px);
        max-width: 640px;
    }

    .xp-trust-area .container {
        max-width: min(75vw, 2800px);
    }

    .xp-stat-value {
        font-size: clamp(56px, 2.8vw, 90px);
    }

    .xp-stat-suffix {
        font-size: clamp(32px, 1.6vw, 52px);
    }

    .xp-stat-label {
        font-size: clamp(16px, 0.8vw, 24px);
    }

    .footer-area .container {
        max-width: min(75vw, 2800px);
    }

    .dest-intro__inner {
        max-width: 1100px;
    }

    .dest-intro__heading {
        font-size: clamp(3.2rem, 3vw, 4.8rem);
    }

    #destination-experience {
        height: 100vh;
    }

    .dest-detail {
        width: clamp(500px, 20vw, 680px);
    }

    .dest-detail__name {
        font-size: 3rem;
    }

    .dest-detail__copy {
        font-size: 1.1rem;
    }

    .dest-list__heading {
        font-size: 32px;
    }

    .dest-list__name {
        font-size: 22px;
    }
}

@media (min-width: 3840px) {
    .hero-section .container {
        max-width: min(70vw, 3200px);
    }

    .xp-trust-area .container {
        max-width: min(70vw, 3200px);
    }

    .footer-area .container {
        max-width: min(70vw, 3200px);
    }

    .dest-detail {
        width: clamp(560px, 18vw, 740px);
    }
}

/* =============================================================
   TOUCH TARGETS — Accessibility minimum 44px
============================================================= */
@media (pointer: coarse) {

    .theme-btn,
    .xp-sv-cta,
    .wwa__cta,
    .jrnl-all,
    .cta-btn,
    .dw-panel-cta,
    .dw-carousel-card {
        min-height: 44px;
    }

    .xp-sv-dots button {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dest-list__item {
        min-height: 44px;
    }

    .dw-carousel-btn {
        min-width: 44px;
    }

    .chip-item {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }

    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
    }

    .footer-social li a {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* =============================================================
   SAFE AREA — iOS notch/Dynamic Island support
============================================================= */
@supports (padding: env(safe-area-inset-top)) {
    .header-3 {
        padding-top: env(safe-area-inset-top);
    }

    .footer-area {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .offcanvas {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
    }
}

/* =============================================================
   MOBILE NAVIGATION OVERLAY — Scroll lock & safe area
============================================================= */
.offcanvas.show~.offcanvas-backdrop {
    opacity: 0.5;
}

@media (max-width: 991px) {
    .offcanvas {
        max-width: 85vw;
    }

    .offcanvas-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .offcanvas-body .navbar-nav {
        gap: 0;
    }

    .offcanvas-body .navbar-nav .nav-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .offcanvas-body .navbar-nav .nav-link {
        padding: 14px 16px;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* =============================================================
   PREVENT HORIZONTAL OVERFLOW — Section-level containment
============================================================= */

.xp-trust-area,
.wwa,
.dest-intro,
#destination-experience,
.jrnl,
.partner,
.footer-area {
    overflow-x: hidden;
    max-width: 100vw;
}

.xp-sv-area,
.hwd {
    overflow: visible;
    max-width: 100vw;
}

/* =============================================================
   THREE.JS CANVAS — Responsive resize handling
============================================================= */
#destination-experience #stage canvas,
#threeCanvas,
.hwd-canvas,
.wwa__particles {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}

/* =============================================================
   LANDSCAPE MOBILE — Prevent cramped layouts
============================================================= */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section .hero-single {
        min-height: 100vh;
        padding-top: 60px;
    }

    .hero-content .hero-title {
        font-size: clamp(24px, 4vh, 36px);
    }

    .xp-hero-badges {
        display: none;
    }

    .xp-sv-pin {
        height: 100vh;
    }

    .xp-sv-content {
        padding-top: 70px;
        padding-bottom: 50px;
    }

    #destination-experience {
        height: 100vh;
    }

    .hwd-stage {
        height: 100vh;
    }

    .partner {
        min-height: auto;
    }

    .left-panel,
    .right-panel {
        min-height: auto;
    }
}

/* =============================================================
   HIGH-DPI — Crisp rendering
============================================================= */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .dw-noise,
    .wwa__noise,
    .jrnl-bg__grain,
    .hwd-bg__grain {
        background-size: 128px;
    }
}

/* =============================================================
   COLOR POLISH — replace the main hero image's dark scrim (defined
   in assets/css/style.css) with a slight white wash instead, so the
   photo stays bright while the overlaid text stays readable.
============================================================= */
.hero-section .hero-single::before {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 100%);
}

/* =============================================================
   HERO HEADING ACCENT — warm gradient fill instead of the flat
   blue stroke-outline, for a more premium/attractive look.
============================================================= */
.hs-1 .hero-single .hero-content .hero-title span {
    color: transparent;
    -webkit-text-stroke: 0;
    background: linear-gradient(90deg, #F6A64B 0%, #E67E22 55%, #D96C12 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =============================================================
   GLASS-BLUR FLOATING HEADER — pill-shaped frosted navbar,
   inset from the viewport edges so it "floats" over the hero.
============================================================= */
@media (min-width: 992px) {
    .header-3 .navbar {
        margin: 8px 17px 0;
        padding: 0px 19px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        border: 1px solid rgba(255, 255, 255, 0.28);
        box-shadow: 0 10px 34px rgba(15, 15, 10, 0.14);
        transition: background 0.4s ease, box-shadow 0.4s ease, margin 0.4s ease, border-radius 0.4s ease;
    }

    .header-3 .navbar .container {
        max-width: 100%;
    }

    .header-3 .navbar.fixed-top {
        margin: 0;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
    }
}

@media (max-width: 991px) {
    .header-3 .navbar {
        margin: 8px 7px 0;
        padding: 0px 19px;
        border-radius: 26px;
        background: rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(16px) saturate(1.4);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        border: 1px solid rgba(255, 255, 255, 0.28);
        box-shadow: 0 8px 26px rgba(15, 15, 10, 0.14);
        transition: background 0.4s ease, box-shadow 0.4s ease, margin 0.4s ease, border-radius 0.4s ease;
    }

    .header-3 .navbar.fixed-top {
        margin: 0;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.92);
    }
}

/* Remove the inner nav-links pill's own glass/blur — the links now sit
   directly on the outer header pill instead of a separate inner capsule. */
.header-3 .navbar-nav {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
}

/* =============================================================
   PREMIUM WHITE PILL NAVIGATION — brand-colour refinement
   -------------------------------------------------------------
   The floating pill above was a near-transparent white
   (rgba(255,255,255,0.14)) glass panel, so it picked up whatever
   colour sat behind it on the hero (reading as a low-contrast
   "blue glass" against sky/water photography). This swaps it for
   a consistently opaque white-glass panel — same pill shape,
   same margins/padding/radius, same sticky (.fixed-top) mechanic
   — and re-colours the nav text/icons to the Xplore brand palette
   (deep logo blue, orange on hover/active) so they read clearly
   against white in both the floating and sticky states.
============================================================= */
@media (min-width: 992px) {
    .header-3 .navbar {
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(16px) saturate(1.4);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        border: 1px solid rgba(255, 255, 255, 0.65);
        box-shadow: 0 10px 34px rgba(30, 79, 138, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .header-3 .navbar.fixed-top {
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(16px) saturate(1.4);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        box-shadow: 0 10px 34px rgba(30, 79, 138, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
}

@media (max-width: 991px) {
    .header-3 .navbar {
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(16px) saturate(1.4);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        border: 1px solid rgba(255, 255, 255, 0.65);
        box-shadow: 0 8px 26px rgba(30, 79, 138, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .header-3 .navbar.fixed-top {
        background: rgba(255, 255, 255, 0.92);
    }

    .header-3 .navbar.light .navbar-toggler span,
    .header-3 .navbar.light.fixed-top .navbar-toggler span {
        border-color: #1E4F8A;
    }

    .header-3 .navbar.light .mobile-menu-right .nav-right-link,
    .header-3 .navbar.light.fixed-top .mobile-menu-right .nav-right-link {
        color: #1E4F8A;
    }

    .header-3 .navbar.light .mobile-menu-right .nav-right-link:hover {
        color: var(--theme-color);
    }
}

@media (min-width: 992px) {
    .header-3 .navbar.light .nav-item .nav-link,
    .header-3 .navbar.light.fixed-top .nav-item .nav-link,
    .header-3 .navbar.light .nav-right-link,
    .header-3 .navbar.light.fixed-top .nav-right-link {
        color: #1E4F8A;
    }

    .header-3 .navbar.light .nav-item .nav-link {
        position: relative;
        transition: color 0.28s ease-out;
    }

    .header-3 .navbar.light .nav-item .nav-link::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -4px;
        width: 0;
        height: 2px;
        background: var(--theme-color);
        border-radius: 2px;
        transform: translateX(-50%);
        transition: width 0.28s ease-out;
    }

    .header-3 .navbar.light .nav-item .nav-link:hover,
    .header-3 .navbar.light .nav-item .nav-link.active {
        color: var(--theme-color);
    }

    .header-3 .navbar.light .nav-item .nav-link:hover::after,
    .header-3 .navbar.light .nav-item .nav-link.active::after {
        width: 60%;
    }

    .header-3 .navbar.light .nav-right-link:hover {
        color: var(--theme-color);
    }
}

/* =============================================================
   HERO — hotfix: keep the eyebrow clear of the sticky header on
   short desktop/laptop windows.
   -------------------------------------------------------------
   The header (.header-3.h-abs) is absolutely positioned OVER the
   hero. On short desktop viewports the bottom-aligned hero content
   used to rise up under the header, hiding the eyebrow. Here we only
   top-anchor the content below the header footprint and add top
   spacing; the flex layout stays a ROW (so all hero imagery renders
   exactly as before). Scoped to short desktop heights only, so tall
   monitors are pixel-identical and tablet/mobile are untouched.
============================================================= */
@media (min-width: 992px) and (max-height: 860px) {
    .hs-1 .hero-single {
        min-height: 100vh;
        height: auto;         /* allow the hero to grow a little so nothing clips */
        padding-top: 180px;   /* push hero content clear of the sticky header (~50px gap) */
    }
}

/* =============================================================
   HERO IMAGERY — subtle quality lift on the new HD photos.
   CSS-only; touches only the hero's floating gallery images.
   Natural colours — a light brightness/contrast/saturation nudge,
   nothing artificial. No layout / structure change.
============================================================= */
.hs-1 .hero-single .xp-fl-img img {
    filter: saturate(1.06) contrast(1.04) brightness(1.02);
}

/* =============================================================
   LARGE-SCREEN LAYOUT CAP — every major section must always match
   the laptop (1441-1600px) view, never grow beyond it. Backgrounds
   (.hero-section, .xp-trust-area, .wwa__bg, .jrnl-bg, .hwd-bg, the
   Partner section's photo panel, etc.) all stay full-bleed since
   they're separate absolutely-positioned layers behind these
   containers — only the content containers themselves are capped.
   Placed at the very end of the file so it always wins the cascade,
   including over the earlier unconditional ".partner{max-width:100vw}"
   overflow-containment rule.
============================================================= */
@media (min-width: 1441px) {
    .hero-section .container,
    .xp-trust-area .container,
    .footer-area .container,
    .container {
        max-width: 1400px;
    }

    :root {
        --xp-container: min(90vw, 1400px);
    }

    .xp-sv-stage,
    .partner {
        width: 100%;
        max-width: 1400px;
        margin-inline: auto;
    }
}

/* =============================================================
   FOOTER — LARGE-SCREEN TYPOGRAPHY & SPACING OPTIMIZATION
   Laptop (≤1600px) is untouched — this only tightens the footer's
   heading/body type, column gutters and about-us paragraph width
   on bigger monitors, since the same sizes that look right on a
   laptop start reading oversized/loose once the section is capped
   to the laptop width. Structure, content, colors and icons are
   unchanged — font-size / line-height / gutter / max-width only.
============================================================= */
@media (min-width: 1600px) {
    .footer-area .footer-widget-title {
        font-size: 22px;
    }

    .footer-area .footer-widget-box p {
        font-size: 14.5px;
        line-height: 1.7;
    }

    .footer-area .footer-widget-box.about-us p {
        max-width: 340px;
    }

    .footer-area .footer-list li a {
        font-size: 14.5px;
    }

    .footer-area .footer-contact .content h5 {
        font-size: 14.5px;
    }

    .footer-area .footer-contact .content p,
    .footer-area .footer-contact .content a {
        font-size: 15px;
    }

    .footer-area .copyright .copyright-text {
        font-size: 14.5px;
    }

    .footer-area .footer-widget-wrap .row {
        --bs-gutter-x: 1.3rem;
    }
}