/* =====================================================================
   Cloudy Hostel & Tourist (Ha Giang) — Scrapbook / Torn-paper design
   ===================================================================== */
:root {
    --cream:        #ece0c4;
    --cream-light:  #f5ecd5;
    --paper:        #f6f1e3;
    --teal:         #0f3a47;
    --teal-dark:    #0a2832;
    --teal-light:   #1c5666;
    --accent:       #3da9b5;
    --accent-dark:  #2e8d97;
    --flag-red:     #d12d2a;
    --gold:         #d4a049;
    --ink:          #1f2a30;
    --ink-soft:     #3a4750;
    --muted:        #74808a;
    --line:         #d9cba6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: var(--ink);
    line-height: 1.6;
    margin: 0;
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}
/* Paper grain over whole document */
body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.32 0 0 0 0 0.15 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: .55;
    mix-blend-mode: multiply;
}
header, main, footer, section { position: relative; z-index: 2; }
a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-dark); }
h1, h2, h3, h4, h5 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700; line-height: 1.15;
    color: var(--teal);
}
img { max-width: 100%; display: block; }
.container { max-width: 1240px; padding-left: 16px; padding-right: 16px; }

section { padding: 80px 0; position: relative; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Caveat', 'Playfair Display', cursive;
    color: var(--flag-red);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 6px;
}
.eyebrow::before {
    content: ''; width: 28px; height: 14px;
    background: var(--flag-red);
    clip-path: polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%);
    display: inline-block;
}
.section-title {
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    color: var(--teal);
    margin: 4px 0 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
}
.section-title em { color: var(--accent); font-style: italic; text-transform: none; position: relative; }
.section-title em::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    bottom: -10px; width: 70%; height: 10px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2,6 Q15,1 30,5 T58,5 T86,4 T114,6 T142,4 T170,6 T198,5' stroke='%233da9b5' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}

/* ===================================================================
   HEADER  (dark teal pill nav, transparent over hero)
   =================================================================== */
.site-header {
    position: absolute; top: 0; left: 0; right: 0;
    z-index: 1030; padding: 24px 0;
}
.header-inner { display: flex; align-items: center; gap: 20px; }
.brand-logo-big {
    flex: 0 0 auto;
    background: var(--teal); color: #fff;
    text-decoration: none;
    padding: 14px 24px; border-radius: 16px;
    display: flex; align-items: center; gap: 12px;
    font-family: 'Playfair Display', serif;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.brand-logo-big:hover { color: #fff; }
.brand-logo-big .logo-mark {
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px;
}
.brand-logo-big .logo-text { font-weight: 800; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; line-height: 1.1; }
.brand-logo-big .logo-text small { display: block; font-size: 10px; letter-spacing: 1px; opacity: .8; font-weight: 500; }
.brand-logo-big.has-img { padding: 10px 20px; }
.brand-logo-img {
    max-height: 110px; max-width: 220px;
    display: block; object-fit: contain;
    /* Render dark-on-transparent monochrome logos as pure white so they stand out
       on the dark teal brand pill. Works for SVG / transparent-PNG logos. */
    filter: brightness(0) invert(1);
}

.nav-pill {
    flex: 1;
    background: var(--teal);
    border-radius: 60px;
    padding: 9px 10px 9px 26px;
    display: flex; align-items: center; gap: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.pill-nav { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; flex: 1; }
.pill-nav a {
    color: #fff; opacity: .92;
    padding: 13px 20px; border-radius: 50px;
    font-weight: 600; font-size: 15px;
    display: flex; align-items: center; gap: 7px;
}
.pill-nav a:hover, .pill-nav a.active { background: rgba(255,255,255,.12); color: #fff; opacity: 1; }
.pill-nav .pin-icon { color: var(--accent); font-size: 16px; }

.btn-letstrip {
    background: var(--accent); color: #fff;
    border: 0; border-radius: 50px;
    padding: 13px 22px 13px 24px;
    font-weight: 700; font-size: 13px; letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(61,169,181,.35);
}
.btn-letstrip:hover { background: var(--accent-dark); color: #fff; }
.btn-letstrip .wa-circle {
    width: 32px; height: 32px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
}

.mobile-toggle {
    display: none;
    background: var(--teal); color: #fff;
    border: 0; border-radius: 50px;
    width: 46px; height: 46px; font-size: 22px;
}
@media (max-width: 992px) {
    .nav-pill { display: none; }
    .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; z-index: 1102; position: relative; }

    /* Full-overlay drawer when open — sits above page content so nothing bleeds through */
    .nav-pill.open {
        display: flex; flex-direction: column; align-items: stretch;
        position: fixed; inset: 0;
        background: var(--teal);
        margin: 0; padding: 88px 24px 32px;
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1100;
        animation: navDrawerIn .25s ease;
    }
    .nav-pill.open .pill-nav {
        flex-direction: column; align-items: stretch;
        gap: 4px; margin: 0; padding: 0; list-style: none;
    }
    .nav-pill.open .pill-nav a {
        display: flex; align-items: center; gap: 10px;
        padding: 16px 18px; border-radius: 12px;
        color: #fff; font-size: 17px; font-weight: 700;
        text-decoration: none;
        transition: background .15s;
    }
    .nav-pill.open .pill-nav a:hover,
    .nav-pill.open .pill-nav a.active { background: rgba(255,255,255,.10); color: #fff; }
    .nav-pill.open .btn-letstrip { margin-top: 18px; justify-content: center; padding: 16px 24px; font-size: 16px; }

    /* Backdrop behind drawer (rendered as body::before when nav is open) */
    body.nav-open::before {
        content: ''; position: fixed; inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 1099;
        animation: navBackdropIn .25s ease;
    }
    body.nav-open { overflow: hidden; }

    /* Hamburger icon swaps to a close (X) when drawer is open */
    body.nav-open .mobile-toggle i::before { content: '\F62A'; } /* bi-x-lg */
}
@keyframes navDrawerIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes navBackdropIn { from { opacity: 0; } to { opacity: 1; } }

/* ===================================================================
   HERO
   =================================================================== */
.hero {
    position: relative;
    min-height: 720px;
    background:
        linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.32)),
        url('https://images.unsplash.com/photo-1528127269322-539801943592?auto=format&fit=crop&w=1900&q=80') center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}
.hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 110px;
    background: var(--cream);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 110' preserveAspectRatio='none'><path d='M0,110 L0,55 Q30,30 60,50 T120,38 T180,55 T240,30 T300,52 T360,28 T420,50 T480,22 T540,48 T600,18 T660,45 T720,28 T780,52 T840,22 T900,50 T960,30 T1020,55 T1080,32 T1140,52 T1200,28 L1200,110 Z' fill='black'/></svg>") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 110' preserveAspectRatio='none'><path d='M0,110 L0,55 Q30,30 60,50 T120,38 T180,55 T240,30 T300,52 T360,28 T420,50 T480,22 T540,48 T600,18 T660,45 T720,28 T780,52 T840,22 T900,50 T960,30 T1020,55 T1080,32 T1140,52 T1200,28 L1200,110 Z' fill='black'/></svg>") center/100% 100% no-repeat;
    filter: drop-shadow(0 -4px 6px rgba(0,0,0,.12));
}
.hero::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 130px;
    background: rgba(255,255,255,.55);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 130' preserveAspectRatio='none'><path d='M0,130 L0,80 Q40,55 80,72 T160,60 T240,75 T320,50 T400,68 T480,44 T560,62 T640,38 T720,60 T800,42 T880,68 T960,50 T1040,72 T1120,46 T1200,62 L1200,130 Z' fill='black'/></svg>") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 130' preserveAspectRatio='none'><path d='M0,130 L0,80 Q40,55 80,72 T160,60 T240,75 T320,50 T400,68 T480,44 T560,62 T640,38 T720,60 T800,42 T880,68 T960,50 T1040,72 T1120,46 T1200,62 L1200,130 Z' fill='black'/></svg>") center/100% 100% no-repeat;
    z-index: 1;
}
.hero-flags {
    position: absolute; bottom: 90px; width: 220px; height: 320px;
    z-index: 2; pointer-events: none;
}
.hero-flags-left  { left: 2%; }
.hero-flags-right { right: 2%; transform: scaleX(-1); }
.hero-flags::before, .hero-flags::after {
    content: ''; position: absolute; bottom: 0;
    background-repeat: no-repeat; background-size: contain;
    /* Pivot near the pole top so the FLAG visibly sways while the pole stays
       roughly vertical. Two offset durations make the two flags out-of-sync. */
    transform-origin: 25px 18px;
    will-change: transform;
}
/* Vietnamese flag: solid red rectangle with a centered yellow 5-pointed star.
   Top + bottom edges have a gentle wave so the fabric reads as windblown,
   but the silhouette is the official rectangle (no swallow-tail notch). */
.hero-flags::before {
    left: 0; width: 100px; height: 280px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 280'><rect x='22' y='10' width='3' height='270' fill='%23e8d5a8'/><path d='M25 12 Q 45 7 65 12 T 95 14 L 96 56 Q 80 60 60 56 T 25 58 Z' fill='%23da251d'/><polygon points='60,25 62,32 70,32 64,36 66,43 60,39 54,43 56,36 50,32 58,32' fill='%23ffd400'/></svg>");
    filter: drop-shadow(0 6px 8px rgba(0,0,0,.35));
    animation: heroFlagSway 4.5s ease-in-out infinite;
}
.hero-flags::after {
    left: 55px; width: 100px; height: 220px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 220'><rect x='22' y='10' width='3' height='210' fill='%23e8d5a8'/><path d='M25 14 Q 42 10 60 14 T 90 16 L 91 52 Q 76 56 58 52 T 25 54 Z' fill='%23da251d'/><polygon points='57,26 59,31 65,32 60,35 62,40 57,37 52,40 54,35 49,32 55,31' fill='%23ffd400'/></svg>");
    filter: drop-shadow(0 6px 8px rgba(0,0,0,.35));
    animation: heroFlagSway 5.2s ease-in-out infinite -1.3s;
}
@keyframes heroFlagSway {
    0%, 100% { transform: rotate(0deg)    scaleX(1);    }
    25%      { transform: rotate(-1.6deg) scaleX(.97);  }
    50%      { transform: rotate(0deg)    scaleX(1.02); }
    75%      { transform: rotate(1.6deg)  scaleX(.98);  }
}
@media (prefers-reduced-motion: reduce) {
    .hero-flags::before, .hero-flags::after { animation: none; }
}
@media (max-width: 768px) { .hero-flags { display: none; } }

.hero-inner { padding: 200px 0 160px; position: relative; z-index: 2; text-align: center; }
.hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.4);
    margin-bottom: 14px;
}
.hero h1 em { color: var(--accent); font-style: italic; }
.hero-sub { font-size: 1.1rem; opacity: .94; max-width: 680px; margin: 0 auto; }

/* Search widget */
.search-widget {
    position: relative; z-index: 5;
    background: #fff; border-radius: 80px;
    padding: 12px 12px 12px 22px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    max-width: 1100px; margin: -80px auto 0;
    display: flex; align-items: center; gap: 4px;
}
.search-widget .field { flex: 1; min-width: 0; padding: 6px 18px; position: relative; display: flex; align-items: center; gap: 12px; }
.search-widget .field + .field::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: #e7e0cf;
}
.search-widget .field-icon {
    width: 42px; height: 42px; border-radius: 50%;
    background: #f0fbfd; color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.search-widget .field-text { flex: 1; min-width: 0; }
.search-widget .field label {
    font-size: 10px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 2px;
}
.search-widget .field select, .search-widget .field input {
    border: 0; padding: 0; box-shadow: none;
    font-weight: 600; color: var(--ink); background: transparent; outline: 0;
    font-size: 14.5px; width: 100%; appearance: none;
}
.search-widget .submit-circle {
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--accent); color: #fff; border: 0; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer;
    box-shadow: 0 6px 16px rgba(61,169,181,.4);
}
.search-widget .submit-circle:hover { background: var(--accent-dark); }
@media (max-width: 768px) {
    .search-widget { flex-direction: column; border-radius: 24px; padding: 14px; }
    .search-widget .field { width: 100%; padding: 12px 8px; border-bottom: 1px solid #eee; }
    .search-widget .field + .field::before { display: none; }
    .search-widget .submit-circle { width: 100%; height: 52px; border-radius: 50px; margin-top: 10px; }
}

/* ===================================================================
   INTRO BLOCK + 4 FEATURES + decorations
   =================================================================== */
.intro-block {
    background: var(--cream);
    padding: 110px 0 60px;
    position: relative;
    overflow: hidden;
}
.intro-block::before {
    content: ''; position: absolute; left: -30px; top: 0; width: 320px; height: 100%;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 800' preserveAspectRatio='xMinYMin slice'><g stroke='%234a2d15' stroke-linecap='round' fill='none'><path d='M60,-10 Q80,80 65,170 Q50,250 75,330 Q95,400 70,480 Q55,560 90,640 Q120,710 160,780' stroke-width='5'/><path d='M65,90 Q35,100 15,120' stroke-width='3'/><path d='M70,180 Q40,200 18,225' stroke-width='3'/><path d='M62,280 Q40,300 22,330' stroke-width='3'/><path d='M82,380 Q60,395 38,420' stroke-width='3'/><path d='M70,470 Q50,485 25,510' stroke-width='3'/><path d='M85,560 Q105,575 125,595' stroke-width='3'/><path d='M105,660 Q135,670 165,685' stroke-width='3'/></g><g fill='%23d12d2a'><circle cx='70' cy='5' r='12'/><circle cx='55' cy='25' r='10'/><circle cx='80' cy='35' r='11'/><circle cx='45' cy='45' r='9'/><circle cx='25' cy='105' r='10'/><circle cx='15' cy='125' r='12'/><circle cx='38' cy='135' r='11'/><circle cx='28' cy='150' r='9'/><circle cx='25' cy='205' r='11'/><circle cx='15' cy='225' r='12'/><circle cx='40' cy='230' r='10'/><circle cx='30' cy='250' r='11'/><circle cx='30' cy='305' r='11'/><circle cx='18' cy='325' r='12'/><circle cx='42' cy='335' r='9'/><circle cx='50' cy='350' r='10'/><circle cx='42' cy='400' r='11'/><circle cx='30' cy='420' r='12'/><circle cx='55' cy='430' r='9'/><circle cx='65' cy='450' r='10'/><circle cx='38' cy='480' r='11'/><circle cx='25' cy='505' r='12'/><circle cx='50' cy='520' r='10'/><circle cx='115' cy='580' r='11'/><circle cx='130' cy='600' r='12'/><circle cx='150' cy='590' r='10'/><circle cx='110' cy='615' r='9'/><circle cx='155' cy='680' r='11'/><circle cx='175' cy='695' r='12'/><circle cx='195' cy='685' r='10'/><circle cx='140' cy='710' r='9'/></g><g fill='%23ffe5e8' opacity='.5'><circle cx='70' cy='5' r='5'/><circle cx='55' cy='25' r='4'/><circle cx='80' cy='35' r='5'/><circle cx='15' cy='125' r='5'/><circle cx='15' cy='225' r='5'/><circle cx='18' cy='325' r='5'/><circle cx='30' cy='420' r='5'/><circle cx='25' cy='505' r='5'/><circle cx='130' cy='600' r='5'/><circle cx='175' cy='695' r='5'/></g></svg>") top left/contain no-repeat;
    pointer-events: none; z-index: 1; opacity: .95;
}
.intro-block::after {
    content: ''; position: absolute; right: -10px; top: 80px; width: 170px; height: 420px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 420'><g fill='%231c5666'><rect x='75' y='40' width='20' height='340'/><polygon points='65,40 105,40 110,30 60,30'/><polygon points='60,30 110,30 100,15 70,15'/><polygon points='70,15 100,15 90,5 80,5'/><rect x='70' y='80' width='30' height='30' fill='%23ece0c4'/><rect x='70' y='130' width='30' height='30' fill='%23ece0c4'/><rect x='70' y='180' width='30' height='30' fill='%23ece0c4'/><rect x='70' y='230' width='30' height='30' fill='%23ece0c4'/><rect x='60' y='370' width='50' height='20'/></g><g><rect x='86' y='-15' width='40' height='25' fill='%23d12d2a'/><polygon points='106,-3 110,-1 106,1' fill='%23ffd84a'/></g></svg>") top right/contain no-repeat;
    pointer-events: none; z-index: 1; opacity: .85;
}
.intro-block .container { max-width: 1000px; text-align: center; position: relative; z-index: 2; }
.intro-block .intro-lead {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 1.9vw, 1.8rem);
    color: var(--teal);
    line-height: 1.45; font-weight: 600;
    max-width: 900px; margin: 0 auto 50px;
}
.intro-block .intro-lead em { color: var(--accent); font-style: italic; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 30px; }
.feature-item { text-align: center; padding: 0 10px; }
.feature-item .icon-circle {
    width: 86px; height: 86px; border-radius: 50%;
    background: var(--paper);
    border: 2px dashed var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 36px; color: var(--accent);
    margin-bottom: 14px;
    position: relative;
}
.feature-item .icon-circle::after {
    content: ''; position: absolute; inset: -8px; border-radius: 50%;
    border: 1px dotted var(--line);
}
.feature-item h6 {
    font-family: 'Playfair Display', serif; font-weight: 700;
    color: var(--teal); font-size: 15px; margin: 8px 0 6px;
    text-transform: uppercase; letter-spacing: 1px;
}
.feature-item p { color: var(--ink-soft); font-size: 13px; line-height: 1.55; max-width: 220px; margin: 0 auto; }
@media (max-width: 768px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }

/* Watermark */
.watermark {
    text-align: right;
    font-family: 'Caveat', cursive;
    font-size: clamp(56px, 8vw, 120px);
    color: rgba(15,58,71,.22);
    line-height: .9; padding: 30px 60px 0;
    font-style: italic; font-weight: 700;
    letter-spacing: 2px;
    position: relative; z-index: 2;
    transform: rotate(-2deg);
}

/* ===================================================================
   DISCOVER DARK  (1 large + 3 small)
   =================================================================== */
.discover-dark { background: var(--teal); color: #fff; padding: 90px 0 110px; position: relative; }
.discover-dark::before, .discover-dark::after {
    content: ''; position: absolute; left: 0; right: 0; height: 50px; background: var(--cream);
}
.discover-dark::before {
    top: -1px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,28 Q1140,8 1080,22 T960,18 T840,30 T720,14 T600,28 T480,16 T360,30 T240,18 T120,30 T0,16 Z' fill='black'/></svg>") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,28 Q1140,8 1080,22 T960,18 T840,30 T720,14 T600,28 T480,16 T360,30 T240,18 T120,30 T0,16 Z' fill='black'/></svg>") center/100% 100% no-repeat;
}
.discover-dark::after {
    bottom: -1px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'><path d='M0,50 L1200,50 L1200,22 Q1140,42 1080,28 T960,32 T840,20 T720,36 T600,22 T480,34 T360,20 T240,32 T120,20 T0,34 Z' fill='black'/></svg>") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'><path d='M0,50 L1200,50 L1200,22 Q1140,42 1080,28 T960,32 T840,20 T720,36 T600,22 T480,34 T360,20 T240,32 T120,20 T0,34 Z' fill='black'/></svg>") center/100% 100% no-repeat;
}
.discover-dark h2, .discover-dark h3, .discover-dark h5 { color: #fff; }
.discover-dark .eyebrow { color: var(--accent); }
.discover-dark .eyebrow::before { background: var(--accent); }
.discover-dark .section-title em { color: var(--accent); }

.discover-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 18px; margin-top: 30px; min-height: 600px;
}
.discover-grid .feat-tall { grid-column: 1; grid-row: 1 / span 3; }
.discover-card-img {
    position: relative; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    border: 3px solid #fff;
    transform: rotate(-1deg);
    min-height: 180px;
    transition: transform .25s ease;
}
.discover-card-img > img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.discover-card-img:nth-child(even) { transform: rotate(1.5deg); }
.discover-card-img::before {
    content: ''; position: absolute; top: -12px; left: 22px;
    width: 70px; height: 20px;
    background-color: rgba(212,160,73,.85);
    background-image: linear-gradient(135deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%);
    background-size: 10px 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    transform: rotate(-8deg);
    z-index: 4;
}
.discover-card-img:nth-child(even)::before { left: auto; right: 22px; transform: rotate(8deg); background-color: rgba(61,169,181,.85); }
.discover-card-img:hover { transform: rotate(0) translateY(-4px); }
.discover-card-img .card-overlay {
    position: absolute; inset: auto 0 0 0; padding: 14px;
    background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
    color: #fff; border-radius: 0 0 6px 6px;
}
.discover-card-img .card-overlay h6 { color: #fff; font-size: 13px; margin: 0 0 4px; font-weight: 700; }
.discover-card-img .card-overlay small { opacity: .85; font-size: 11px; }
.discover-card-img .btn-discover {
    position: absolute; bottom: 14px; right: 14px;
    background: var(--accent); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 6px 10px; border-radius: 50px; z-index: 4;
}
@media (max-width: 768px) { .discover-grid { grid-template-columns: 1fr; grid-template-rows: auto; min-height: auto; } .discover-grid .feat-tall { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; } .discover-card-img { aspect-ratio: 4/3; } }

/* ===================================================================
   FEATURED TOURS  (scrapbook card with hot badge + duration pill)
   =================================================================== */
.featured-tours { background: var(--cream); padding: 90px 0; }
.featured-tours .section-title { color: var(--teal); }
.tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tour-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    /* two-layer shadow: tight 1px ring + soft elevation, both teal-tinted to harmonize with the cream bg */
    box-shadow:
        0 1px 0 rgba(15,58,71,.04),
        0 6px 14px rgba(15,58,71,.10),
        0 22px 38px rgba(15,58,71,.16);
    transition: transform .25s, box-shadow .25s;
    border: 1px solid rgba(15,58,71,.10);
    display: flex; flex-direction: column; height: 100%;
}
.tour-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 1px 0 rgba(15,58,71,.05),
        0 10px 20px rgba(15,58,71,.14),
        0 30px 54px rgba(15,58,71,.22);
}
.tour-card .tour-img {
    position: relative; aspect-ratio: 4/3; overflow: hidden; display: block; background: #ddd;
}
.tour-card .tour-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tour-card:hover .tour-img img { transform: scale(1.05); }
.tour-card .hot-badge {
    position: absolute; top: 14px; left: 14px;
    background: var(--flag-red); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 12px; border-radius: 50px;
    box-shadow: 0 4px 12px rgba(209,45,42,.4);
    z-index: 2;
}
.tour-card .duration-pill {
    position: absolute; bottom: 14px; left: 14px;
    background: rgba(15,58,71,.85); color: #fff;
    font-size: 11px; font-weight: 600;
    padding: 5px 12px; border-radius: 50px;
    display: inline-flex; align-items: center; gap: 4px;
    backdrop-filter: blur(6px);
    z-index: 2;
}
.tour-card .tour-body { background: #fff; padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.tour-card .tour-cat {
    color: var(--flag-red); font-size: 12px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px;
}
.tour-card h5 { font-size: 18.5px; margin: 0 0 10px; line-height: 1.35; min-height: 50px; color: var(--teal); }
.tour-card h5 a { color: var(--teal); }
.tour-card h5 a:hover { color: var(--accent); }
.tour-card .tour-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.tour-card .tour-meta i { color: var(--accent); margin-right: 4px; }
.tour-card .tour-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 12px; border-top: 1px dashed var(--line);
    margin-top: auto;
}
.tour-card .tour-price small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.tour-card .tour-price strong { color: var(--accent); font-size: 22px; font-family: 'Playfair Display', serif; }
.tour-card .tour-price sup { font-size: 11px; color: var(--muted); }
.tour-card .detail-link { color: var(--teal); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.tour-card .detail-link:hover { color: var(--accent); }
@media (max-width: 992px) { .tour-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tour-grid { grid-template-columns: 1fr; } .tour-card h5 { min-height: auto; } }

/* ===================================================================
   MAP / EXPERIENCE  (hand-drawn watercolor map)
   =================================================================== */
.map-section { background: var(--cream); padding: 90px 0; }
.map-section .map-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: center; }
.map-section h2 { font-size: clamp(1.6rem, 2.3vw, 2.2rem); margin-bottom: 18px; }
.map-section .lead-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem; color: var(--ink); line-height: 1.55;
    margin-bottom: 24px;
}
.map-section .lead-text em { color: var(--accent); font-style: italic; }
.map-section .btn-explore {
    background: var(--accent); color: #fff;
    padding: 12px 26px; border-radius: 50px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; font-size: 12px;
    display: inline-flex; align-items: center; gap: 10px;
    box-shadow: 0 6px 18px rgba(61,169,181,.35);
}
.map-section .small-thumb {
    margin-top: 30px; max-width: 220px;
    border: 4px solid #fff; box-shadow: 0 10px 22px rgba(0,0,0,.15);
    transform: rotate(-2deg);
}
.map-section .small-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.map-section .small-thumb .cap { text-align: center; font-family: 'Caveat', cursive; color: var(--teal); font-size: 18px; padding: 6px 0; }
.map-illustration {
    position: relative;
    background: radial-gradient(ellipse at 40% 35%, #e8f0d3 0%, #c8d8a5 45%, #8fa872 90%);
    border-radius: 12px; aspect-ratio: 4/3;
    box-shadow: 0 20px 40px rgba(0,0,0,.22);
    overflow: hidden; transform: rotate(1deg);
    border: 8px solid #fdfaf0;
}
.map-svg { width: 100%; height: 100%; display: block; }

/* Pins — pulse + hover label + active state */
.map-pin { cursor: pointer; outline: none; }
.map-pin .pin-pulse { transform-origin: center; transform-box: fill-box; animation: pinPulse 2.6s infinite ease-out; }
@keyframes pinPulse {
    0%   { transform: scale(.8); opacity: .35; }
    70%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(.8); opacity: 0; }
}
.map-pin .pin-dot { transition: transform .2s ease, r .2s ease; transform-origin: center; transform-box: fill-box; }
.map-pin:hover .pin-dot,
.map-pin:focus .pin-dot { transform: scale(1.25); }
.map-pin .pin-label {
    opacity: 0; transition: opacity .2s ease, transform .2s ease;
    transform: translateY(4px); transform-origin: center; transform-box: fill-box;
}
.map-pin:hover .pin-label,
.map-pin:focus .pin-label { opacity: 1; transform: translateY(0); }

/* Left info panel — flash transition when pin clicked + active pin highlight */
.map-info { transition: opacity .25s ease; }
.map-info.flash {
    animation: mapInfoFlash .45s ease-out;
}
@keyframes mapInfoFlash {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.map-info .eyebrow {
    color: var(--flag-red);
    transition: color .25s ease;
}
.map-info[data-default-active="false"] .eyebrow { color: var(--accent); }
.map-info[data-default-active="false"] .eyebrow::before { background: var(--accent); }

/* Reset button */
.map-reset {
    margin-top: 16px;
    background: transparent; border: 1px dashed var(--accent);
    color: var(--accent);
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 8px 14px; border-radius: 50px;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
}
.map-reset:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Active pin highlight (currently selected on left panel) */
.map-pin.is-active .pin-dot {
    fill: var(--accent);
    r: 11;
    filter: drop-shadow(0 0 8px var(--accent));
}
.map-pin.is-active .pin-pulse {
    fill: var(--accent);
    opacity: .45;
    animation-duration: 1.6s;
}
.map-pin.is-active .pin-label {
    opacity: 1; transform: translateY(-2px);
    fill: var(--accent);
}

/* Compass slight wobble for charm */
.map-compass { animation: compassWobble 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes compassWobble {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

@media (max-width: 768px) {
    .map-popup { width: calc(100% - 16px); bottom: 8px; }
    .map-pin .pin-label { font-size: 16px !important; }
}

/* ===================================================================
   DISCOVER TABS + ROUND CARDS
   =================================================================== */
.discover-tabs-section { background: var(--teal); color: #fff; padding: 100px 0; position: relative; text-align: center; }
.discover-tabs-section h2, .discover-tabs-section h3, .discover-tabs-section h5 { color: #fff; }
.discover-tabs-section .eyebrow { color: var(--accent); }
.discover-tabs-section .eyebrow::before { background: var(--accent); }
.discover-tabs-section .section-title { max-width: 720px; margin-left: auto; margin-right: auto; }
.discover-tabs-section::before, .discover-tabs-section::after {
    content: ''; position: absolute; left: 0; right: 0; height: 50px; background: var(--cream);
}
.discover-tabs-section::before {
    top: -1px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,28 Q1140,8 1080,22 T960,18 T840,30 T720,14 T600,28 T480,16 T360,30 T240,18 T120,30 T0,16 Z' fill='black'/></svg>") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,28 Q1140,8 1080,22 T960,18 T840,30 T720,14 T600,28 T480,16 T360,30 T240,18 T120,30 T0,16 Z' fill='black'/></svg>") center/100% 100% no-repeat;
}
.discover-tabs-section::after {
    bottom: -1px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'><path d='M0,50 L1200,50 L1200,22 Q1140,42 1080,28 T960,32 T840,20 T720,36 T600,22 T480,34 T360,20 T240,32 T120,20 T0,34 Z' fill='black'/></svg>") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'><path d='M0,50 L1200,50 L1200,22 Q1140,42 1080,28 T960,32 T840,20 T720,36 T600,22 T480,34 T360,20 T240,32 T120,20 T0,34 Z' fill='black'/></svg>") center/100% 100% no-repeat;
}
.tabs-row { display: inline-flex; gap: 4px; background: rgba(255,255,255,.08); padding: 6px; border-radius: 50px; margin: 18px 0 44px; }
.tabs-row .tab {
    background: transparent; color: #fff;
    padding: 9px 20px; border-radius: 50px;
    font-size: 12px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; cursor: pointer; border: 0;
    transition: all .2s;
}
.tabs-row .tab.active, .tabs-row .tab:hover { background: var(--accent); color: #fff; }
.round-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.round-card { text-align: center; animation: roundFade .35s ease both; }
.round-card.is-hidden { display: none; }
@keyframes roundFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.round-card .round-img {
    position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 14px 30px rgba(0,0,0,.3);
    margin-bottom: 14px;
}
.round-card .round-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.round-card:hover .round-img img { transform: scale(1.06); }
.round-card h6 { color: #fff; font-size: 14px; margin: 0 0 4px; font-weight: 700; }
.round-card small { opacity: .8; font-size: 11px; display: block; }
@media (max-width: 768px) { .round-cards { grid-template-columns: 1fr 1fr; } }

.btn-load-more {
    background: #fff; color: var(--teal);
    padding: 12px 28px; border-radius: 50px;
    font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 10px;
}

/* ===================================================================
   CATEGORIES (Bridge/Transport/Food/Industry)
   =================================================================== */
.categories-section { background: var(--accent); color: #fff; padding: 90px 0; position: relative; }
.categories-section::before {
    content: ''; position: absolute; left: 6%; top: 22%; width: 80px; height: 110px;
    background: rgba(255,255,255,.12);
    border-radius: 50% 50% 50% 0; transform: rotate(-30deg); pointer-events: none;
}
.categories-section::after {
    content: ''; position: absolute; right: 8%; bottom: 18%; width: 60px; height: 90px;
    background: rgba(15,58,71,.15);
    border-radius: 50% 50% 50% 0; transform: rotate(45deg); pointer-events: none;
}
.categories-section h2 { color: #fff; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.cat-card {
    text-align: center;
    background: rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 30px 18px;
    transition: all .2s;
    backdrop-filter: blur(6px);
}
.cat-card:hover { background: rgba(255,255,255,.16); transform: translateY(-4px); }
.cat-card .cat-icon {
    width: 92px; height: 92px;
    border-radius: 50%;
    background: #fff;
    color: var(--accent);
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
    overflow: hidden; border: 4px solid #fff;
}
.cat-card .cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.cat-card h6 { color: #fff; font-size: 14px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; }
.cat-card p { color: rgba(255,255,255,.85); font-size: 12.5px; margin: 0; line-height: 1.5; }
@media (max-width: 768px) { .cat-grid { grid-template-columns: 1fr 1fr; } }

/* ===================================================================
   JOURNEY (organic clip-path shapes)
   =================================================================== */
.journey-block { background: var(--cream); padding: 80px 0; text-align: center; }
.journey-block h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); color: var(--teal); margin-bottom: 30px; }
.journey-block h3 em { color: var(--accent); font-style: italic; }
.journey-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
.journey-cards .jc { position: relative; aspect-ratio: 1/1; background: transparent; }
.journey-cards .jc img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.22));
    transition: transform .35s ease;
}
.journey-cards .jc:nth-child(1) img { clip-path: path('M 140 8 C 220 -2 280 60 282 140 C 286 220 220 282 140 286 C 60 290 -2 220 8 140 C 16 70 60 18 140 8 Z'); transform: rotate(-3deg); }
.journey-cards .jc:nth-child(2) img { clip-path: path('M 80 30 C 200 10 285 80 280 170 C 275 250 200 295 110 280 C 30 268 10 180 30 110 C 42 70 50 38 80 30 Z'); transform: rotate(2deg); }
.journey-cards .jc:nth-child(3) img { clip-path: path('M 150 5 C 240 20 295 100 280 190 C 268 260 200 295 130 285 C 50 275 5 200 18 120 C 30 60 80 12 150 5 Z'); transform: rotate(-2deg); }
.journey-cards .jc:nth-child(4) img { clip-path: path('M 100 12 C 200 0 290 70 285 160 C 282 240 220 290 140 285 C 60 280 8 210 12 130 C 16 70 50 22 100 12 Z'); transform: rotate(3deg); }
.journey-cards .jc:hover img { transform: rotate(0deg) translateY(-6px); }
@media (max-width: 768px) { .journey-cards { grid-template-columns: 1fr 1fr; } }

/* ===================================================================
   TESTIMONIALS  (Google badge style)
   =================================================================== */
.testimonials { background: var(--cream); padding: 80px 0; text-align: center; }
.testimonials h2 { color: var(--teal); margin-bottom: 40px; font-size: clamp(1.6rem, 2.2vw, 2.1rem); text-transform: uppercase; letter-spacing: 2px; }
.testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; }
.testimonial-card {
    background: #fff; border-radius: 12px;
    padding: 28px 26px; text-align: left;
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
    position: relative;
}
.testimonial-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.testimonial-card .head strong { color: var(--teal); font-size: 15px; }
.testimonial-card .head .stars { color: #f4b300; font-size: 13px; }
.testimonial-card .head .stars i { margin-right: 2px; }
.testimonial-card p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; margin: 0; }
.testimonial-card .gl {
    position: absolute; bottom: 16px; right: 18px;
    width: 22px; height: 22px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%234285F4" d="M43.6 20.5H42V20H24v8h11.3c-1.7 4.7-6.2 8-11.3 8c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C33.6 6.1 29 4 24 4C12.9 4 4 12.9 4 24s8.9 20 20 20s20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z"/></svg>') center/contain no-repeat;
}
.cta-row { display: flex; justify-content: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.btn-pill-dark, .btn-pill-google {
    border: 0; border-radius: 50px; padding: 12px 22px; font-weight: 700; letter-spacing: 1px;
    font-size: 12px; text-transform: uppercase; cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
}
.btn-pill-dark { background: var(--teal); color: #fff; }
.btn-pill-dark:hover { background: var(--teal-dark); color: #fff; }
.btn-pill-google { background: #fff; color: var(--teal); border: 2px solid var(--teal); }
@media (max-width: 768px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   TRUST BADGES  (TripAdvisor / Google / Stats + review quotes)
   =================================================================== */
.trust-section { background: var(--cream); padding: 90px 0; position: relative; }
.trust-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; margin-top: 30px; align-items: stretch; }
.trust-card {
    position: relative;
    background: #fff;
    border: 2px dashed var(--line);
    border-radius: 16px;
    padding: 22px 22px 60px;
    text-decoration: none;
    color: var(--ink);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    overflow: visible;
}
.trust-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.1); border-color: var(--accent); color: var(--ink); }
/* Washi tape decoration */
.trust-washi {
    position: absolute; top: -10px; left: 32px;
    width: 70px; height: 18px;
    background-color: rgba(212,160,73,.85);
    background-image: linear-gradient(135deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%);
    background-size: 10px 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,.18);
    transform: rotate(-7deg);
}
.trust-card-google .trust-washi { background-color: rgba(61,169,181,.85); left: auto; right: 32px; transform: rotate(7deg); }
.trust-stats-card .trust-washi  { background-color: rgba(209,45,42,.8); left: 50%; transform: translateX(-50%) rotate(-3deg); }

.trust-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.trust-icon { width: 60px; height: 60px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.trust-icon svg { display: block; }
.trust-brand { line-height: 1.2; }
.trust-brand small {
    color: var(--muted); font-size: 10px; letter-spacing: 1.5px;
    text-transform: uppercase; font-weight: 700; display: block;
}
.trust-brand strong { color: var(--teal); font-family: 'Playfair Display', serif; font-size: 20px; }

.trust-rating { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.trust-rating .stars { display: inline-flex; gap: 3px; }
.trust-rating .stars .dot { width: 16px; height: 16px; border-radius: 50%; background: #1f7a4d; }
.trust-card-google .trust-rating .stars .dot { background: #f4b300; border-radius: 0; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); width: 18px; height: 18px; }
.trust-rating .rating-num { font-family: 'Playfair Display', serif; font-size: 30px; color: var(--teal); font-weight: 800; line-height: 1; }
.trust-rating .rating-num small { font-size: 14px; color: var(--muted); font-weight: 400; }

.trust-foot { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.reviews-count { font-weight: 600; }
.trust-badge-chip {
    background: var(--paper);
    color: #1f7a4d;
    font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 50px;
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid #d2e6dc;
}
.trust-card-google .trust-badge-chip { color: var(--accent); border-color: #c4e6ea; }

.trust-cta {
    position: absolute; bottom: 18px; left: 22px; right: 22px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    color: var(--accent); font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px;
}
.trust-card:hover .trust-cta { color: var(--accent-dark); }

/* Stats card */
.trust-stats-card { padding: 22px 22px 26px; cursor: default; }
.trust-stats-card:hover { transform: none; }
.trust-stats-card h6 {
    font-family: 'Playfair Display', serif; color: var(--teal);
    font-size: 18px; margin: 0 0 14px;
}
.trust-stats-card .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 14px; }
.trust-stats-card .stat strong {
    font-family: 'Playfair Display', serif;
    color: var(--flag-red); font-size: 24px; line-height: 1; display: block;
}
.trust-stats-card .stat small { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.trust-stats-card .trust-footnote { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }

/* Quotes row */
.trust-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; max-width: 1080px; margin-left: auto; margin-right: auto; }
.t-quote {
    background: #fff;
    border-left: 4px solid #1f7a4d;
    border-radius: 4px 12px 12px 4px;
    padding: 20px 24px;
    margin: 0;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
    position: relative;
}
.t-quote .quote-source {
    display: inline-block;
    color: #1f7a4d;
    font-size: 11px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 10px;
}
.t-quote .stars-inline { color: #f4b300; letter-spacing: 1px; }
.t-quote p {
    font-family: 'Playfair Display', serif;
    color: var(--ink); font-style: italic;
    font-size: 15px; line-height: 1.6; margin: 0 0 12px;
}
.t-quote footer { font-size: 12px; color: var(--muted); font-weight: 600; }
.t-quote footer span { color: var(--ink-soft); font-weight: 400; }

@media (max-width: 992px) { .trust-row { grid-template-columns: 1fr 1fr; } .trust-stats-card { grid-column: span 2; } }
@media (max-width: 700px) { .trust-row { grid-template-columns: 1fr; } .trust-stats-card { grid-column: auto; } .trust-quotes { grid-template-columns: 1fr; } }

/* ===================================================================
   MOUNTAIN BAND  (parallax)
   =================================================================== */
.mountain-band {
    height: 420px;
    background: url('https://images.unsplash.com/photo-1571401835393-8c5f35328320?auto=format&fit=crop&w=1900&q=80') center/cover no-repeat;
    background-attachment: fixed;
    position: relative;
}
.mountain-band::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(236,224,196,.0) 0%, rgba(236,224,196,.0) 60%, var(--cream) 100%),
        linear-gradient(180deg, rgba(15,58,71,.12), rgba(15,58,71,.35));
}
@media (max-width: 992px) { .mountain-band { background-attachment: scroll; height: 300px; } }

/* ===================================================================
   GUIDE TRAVEL  (with ribbon + HA GIANG block letter card)
   =================================================================== */
.guide-section { background: var(--teal); color: #fff; padding: 90px 0 110px; position: relative; text-align: center; }
.guide-section::before {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 50px; background: var(--cream);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,28 Q1140,8 1080,22 T960,18 T840,30 T720,14 T600,28 T480,16 T360,30 T240,18 T120,30 T0,16 Z' fill='black'/></svg>") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,28 Q1140,8 1080,22 T960,18 T840,30 T720,14 T600,28 T480,16 T360,30 T240,18 T120,30 T0,16 Z' fill='black'/></svg>") center/100% 100% no-repeat;
}
.guide-section h2, .guide-section h3 { color: #fff; }
.guide-section .eyebrow { color: var(--accent); }
.guide-section .eyebrow::before { background: var(--accent); }
.ribbon-title {
    position: relative; display: inline-block;
    background: var(--flag-red); color: #fff !important;
    font-family: 'Playfair Display', serif; font-weight: 800;
    padding: 12px 38px; margin: 18px 0 30px;
    letter-spacing: 3px; text-transform: uppercase;
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    box-shadow: 0 8px 22px rgba(209,45,42,.35);
}
.ribbon-title::before, .ribbon-title::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 20px; background: var(--flag-red);
}
.ribbon-title::before { left: -20px; clip-path: polygon(0 50%, 100% 0, 100% 100%); filter: brightness(.85); }
.ribbon-title::after  { right: -20px; clip-path: polygon(0 0, 100% 50%, 0 100%); filter: brightness(.85); }

.guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; text-align: left; }
.guide-card {
    background: #fff; color: var(--ink);
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 16px 30px rgba(0,0,0,.25);
    transition: transform .25s; position: relative;
}
.guide-card:hover { transform: translateY(-6px); color: var(--ink); }
.guide-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; background: #ddd; }
.guide-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.guide-card .body { padding: 16px 18px 20px; }
.guide-card h6 { font-family: 'Playfair Display', serif; color: var(--teal); font-size: 15px; margin: 0 0 8px; line-height: 1.35; min-height: 40px; }
.guide-card p { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; line-height: 1.5; }
.guide-card .meta { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; }

/* Feature card 1: HA GIANG block letter overlay */
.guide-card.guide-card-feature .img-wrap { position: relative; aspect-ratio: 1; }
.guide-card.guide-card-feature .img-wrap::after {
    content: attr(data-feature-label);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: clamp(28px, 3vw, 56px);
    color: #ffd84a;
    text-shadow:
        4px 4px 0 #0f3a47, -2px -2px 0 #0f3a47,
        2px -2px 0 #0f3a47, -2px 2px 0 #0f3a47;
    letter-spacing: 4px; text-transform: uppercase;
    background: linear-gradient(135deg, rgba(15,58,71,.3), rgba(209,45,42,.25));
    text-align: center; line-height: .95; padding: 10px;
}
.guide-card.guide-card-feature .body { display: none; }

.more-btn-wrap { text-align: center; margin-top: 36px; }
@media (max-width: 992px) { .guide-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .guide-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   TRIP CTA
   =================================================================== */
.trip-cta { background: var(--accent); padding: 70px 0; text-align: center; color: #fff; }
.trip-cta h3 {
    color: #fff; font-family: 'Playfair Display', serif; font-style: italic;
    font-size: clamp(1.4rem, 2vw, 2rem); margin-bottom: 18px;
}
.trip-cta .email-pill {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; color: var(--teal);
    padding: 10px 22px; border-radius: 50px;
    font-weight: 700; font-size: 15px;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.trip-cta .btn-cta {
    margin-top: 22px;
    background: var(--teal); color: #fff;
    padding: 13px 32px; border-radius: 50px;
    font-weight: 700; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 10px;
}
.trip-cta .btn-cta:hover { background: var(--teal-dark); color: #fff; }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer { background: var(--teal-dark); color: #d4d8d4; padding: 60px 0 0; }
.site-footer h5 {
    color: #fff; text-transform: uppercase; letter-spacing: 2px;
    font-size: 13px; font-weight: 800; margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
}
.site-footer .footer-brand { color: #fff; }
.site-footer .footer-brand .logo-text { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 18px; letter-spacing: 2px; }
.site-footer .footer-brand .logo-text small { display: block; opacity: .7; font-size: 11px; letter-spacing: 1px; font-weight: 500; }
.site-footer .contact-info { list-style: none; padding: 0; margin: 0; }
.site-footer .contact-info li { padding: 4px 0; font-size: 13px; display: flex; align-items: flex-start; gap: 8px; }
.site-footer .contact-info i { color: var(--accent); margin-top: 3px; }
.site-footer .contact-info a { color: #d4d8d4; }
.site-footer .contact-info a:hover { color: var(--accent); }
.site-footer .quick-links a { color: #d4d8d4; margin-right: 14px; font-size: 13px; }
.site-footer .quick-links a:hover { color: var(--accent); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px;
    padding: 16px 0; display: flex; justify-content: space-between; flex-wrap: wrap;
    font-size: 12px; opacity: .75; gap: 10px;
}

/* WhatsApp floating */
.whatsapp-float {
    position: fixed; bottom: 24px; right: 24px;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; z-index: 1040; box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.whatsapp-float:hover { color: #fff; }

/* ===================================================================
   PRESS BAR
   =================================================================== */
.press-bar { background: var(--paper); padding: 22px 0; border-bottom: 1px dashed var(--line); border-top: 1px dashed var(--line); }
.press-bar .container { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.press-bar .press-label {
    color: var(--muted); font-size: 11px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
}
.press-bar .press-logos { list-style: none; padding: 0; margin: 0; display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.press-bar .press-logos li {
    font-family: 'Playfair Display', serif;
    font-style: italic; font-weight: 700;
    color: var(--teal); font-size: 18px;
    opacity: .55; transition: opacity .2s, color .2s;
    cursor: default;
}
.press-bar .press-logos li:hover { opacity: 1; color: var(--accent); }

/* ===================================================================
   HOW IT WORKS
   =================================================================== */
.how-it-works { background: var(--paper); padding: 90px 0; }
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.step-grid::before {
    content: ''; position: absolute; top: 60px; left: 12%; right: 12%; height: 2px;
    background: repeating-linear-gradient(to right, var(--accent) 0 8px, transparent 8px 16px);
    z-index: 0;
}
.step { position: relative; text-align: center; padding: 0 8px; z-index: 1; }
.step .step-num {
    font-family: 'Playfair Display', serif; font-style: italic;
    color: var(--flag-red); font-size: 16px; font-weight: 800;
    letter-spacing: 1px; margin-bottom: 8px;
}
.step .step-icon {
    width: 84px; height: 84px; border-radius: 50%;
    background: #fff; color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 32px; margin-bottom: 16px;
    border: 3px solid var(--accent);
    box-shadow: 0 8px 20px rgba(61,169,181,.18);
    position: relative;
}
.step .step-icon::after {
    content: ''; position: absolute; inset: -8px; border-radius: 50%;
    border: 1px dotted var(--line);
}
.step h6 {
    font-family: 'Playfair Display', serif; color: var(--teal);
    font-size: 16px; margin: 0 0 8px;
    text-transform: uppercase; letter-spacing: 1px;
}
.step p { color: var(--ink-soft); font-size: 13px; line-height: 1.55; margin: 0; max-width: 220px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .step-grid { grid-template-columns: 1fr 1fr; } .step-grid::before { display: none; } }

/* ===================================================================
   PRACTICAL INFO (Best time + Visa)
   =================================================================== */
.practical-info { background: var(--cream); padding: 90px 0; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.info-card {
    background: #fff; border: 2px dashed var(--line);
    border-radius: 16px; padding: 28px 28px 24px;
}
.info-card h6 {
    font-family: 'Playfair Display', serif; color: var(--teal);
    font-size: 18px; margin: 0 0 18px;
    display: flex; align-items: center; gap: 10px;
}
.info-card h6 i { color: var(--flag-red); font-size: 24px; }

.season-list, .visa-list { list-style: none; padding: 0; margin: 0; }
.season-list .season {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 12px; align-items: center;
    padding: 12px 0;
    border-top: 1px dashed var(--line);
}
.season-list .season:first-child { border-top: 0; padding-top: 0; }
.season-list .season strong { font-family: 'Playfair Display', serif; color: var(--teal); font-size: 15px; }
.season-list .season span { color: var(--ink-soft); font-size: 13px; }
.season-list .season .tag {
    font-style: normal; font-size: 10px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 50px;
}
.season-list .ideal .tag { background: #d2efd9; color: #1f7a4d; }
.season-list .ok    .tag { background: #e8e0cf; color: var(--ink-soft); }
.season-list .warn  .tag { background: #ffe2cf; color: #b9530a; }

.visa-list li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0; border-top: 1px dashed var(--line);
    font-size: 13.5px; color: var(--ink-soft);
}
.visa-list li:first-child { border-top: 0; padding-top: 0; }
.visa-list .flag { font-size: 18px; line-height: 1; flex-shrink: 0; min-width: 100px; letter-spacing: 2px; }
.info-note {
    margin: 16px 0 0; font-size: 12px; color: var(--muted);
    padding: 10px 14px; background: var(--paper); border-radius: 10px;
    display: flex; gap: 8px; align-items: flex-start;
    line-height: 1.5;
}
.info-note i { color: var(--accent); }
@media (max-width: 768px) { .info-grid { grid-template-columns: 1fr; } .season-list .season { grid-template-columns: 90px 1fr; row-gap: 4px; } .season-list .season .tag { grid-column: 2; justify-self: start; margin-top: 4px; } }

/* ===================================================================
   SAFETY & INSURANCE
   =================================================================== */
.safety-section { background: var(--paper); padding: 90px 0; }
.safety-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 20px; }
.safety-card {
    background: #fff; border-radius: 14px;
    padding: 26px 22px; text-align: center;
    border: 1px solid var(--line);
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
    transition: transform .25s;
}
.safety-card:hover { transform: translateY(-4px); }
.safety-card .safety-icon {
    width: 64px; height: 64px; border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--teal));
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(15,58,71,.2);
}
.safety-card h6 {
    font-family: 'Playfair Display', serif; color: var(--teal);
    font-size: 15px; margin: 0 0 8px;
    text-transform: uppercase; letter-spacing: 1px;
}
.safety-card p { color: var(--ink-soft); font-size: 13px; line-height: 1.55; margin: 0; }
@media (max-width: 768px) { .safety-grid { grid-template-columns: 1fr 1fr; } }

/* ===================================================================
   INSTAGRAM FEED
   =================================================================== */
.instagram-section { background: var(--cream); padding: 80px 0; }
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ig-cell {
    position: relative; aspect-ratio: 1; border-radius: 8px;
    overflow: hidden; display: block;
    box-shadow: 0 8px 18px rgba(0,0,0,.1);
}
.ig-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.ig-cell:hover img { transform: scale(1.08); }
.ig-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(193,53,132,.7), rgba(15,58,71,.6));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 32px; opacity: 0; transition: opacity .25s;
}
.ig-cell:hover .ig-overlay { opacity: 1; }
@media (max-width: 768px) { .ig-grid { grid-template-columns: 1fr 1fr; } }

/* ===================================================================
   FAQ ACCORDION
   =================================================================== */
.faq-section { background: var(--paper); padding: 90px 0; }
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item {
    background: #fff; border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    box-shadow: 0 6px 14px rgba(0,0,0,.04);
    overflow: hidden;
    transition: box-shadow .2s;
}
.faq-item[open] { box-shadow: 0 14px 28px rgba(0,0,0,.08); border-color: var(--accent); }
.faq-item summary {
    list-style: none; cursor: pointer;
    padding: 18px 22px;
    font-family: 'Playfair Display', serif; font-weight: 700;
    color: var(--teal); font-size: 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { color: var(--accent); transition: transform .25s; font-size: 18px; }
.faq-item[open] summary i { transform: rotate(180deg); }
.faq-item .faq-a {
    padding: 0 22px 22px;
    color: var(--ink-soft); font-size: 14px; line-height: 1.65;
}
.faq-item .faq-a p { margin: 0; }

/* ===================================================================
   NEWSLETTER
   =================================================================== */
.newsletter-section { background: var(--cream); padding: 60px 0; }
.newsletter-card {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
    color: #fff;
    border-radius: 22px;
    padding: 44px 50px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px; align-items: center;
    position: relative; overflow: hidden;
    box-shadow: 0 24px 48px rgba(15,58,71,.25);
}
.newsletter-card::before {
    content: ''; position: absolute; right: -50px; top: -50px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(61,169,181,.18); pointer-events: none;
}
.newsletter-card::after {
    content: ''; position: absolute; left: -30px; bottom: -60px;
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(212,160,73,.18); pointer-events: none;
}
.newsletter-text { position: relative; z-index: 1; }
.newsletter-text .eyebrow { color: var(--accent); }
.newsletter-text .eyebrow::before { background: var(--accent); }
.newsletter-text h3 {
    color: #fff; font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin: 6px 0 10px;
}
.newsletter-text h3 em { color: var(--accent); font-style: italic; }
.newsletter-text p { opacity: .88; margin: 0; font-size: 14px; }
.newsletter-form { position: relative; z-index: 1; }
.newsletter-input-row {
    background: #fff; border-radius: 50px;
    padding: 6px 6px 6px 16px;
    display: flex; align-items: center; gap: 6px;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.newsletter-input-row i { color: var(--accent); font-size: 18px; }
.newsletter-input-row input {
    flex: 1; min-width: 0; border: 0; outline: 0;
    padding: 10px 8px; font-size: 14px; background: transparent;
    color: var(--ink);
}
.newsletter-input-row button {
    background: var(--accent); color: #fff; border: 0;
    padding: 12px 22px; border-radius: 50px;
    font-weight: 700; font-size: 13px; letter-spacing: 1px;
    text-transform: uppercase; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.newsletter-input-row button:hover { background: var(--accent-dark); }
.newsletter-note { display: block; margin-top: 10px; font-size: 11px; opacity: .8; }
.newsletter-note a { color: var(--accent); }
@media (max-width: 768px) { .newsletter-card { grid-template-columns: 1fr; padding: 30px 26px; } }

/* ===================================================================
   STICKY HEADER (added when scroll > hero)
   =================================================================== */
body.scrolled .site-header {
    position: fixed; top: 0; left: 0; right: 0;
    background: rgba(15,58,71,.96);
    backdrop-filter: blur(10px);
    padding: 10px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    animation: stickyDown .35s ease;
}
body.scrolled .site-header .brand-logo-big { padding: 6px 14px; }
body.scrolled .site-header .brand-logo-img { max-height: 70px; }
body.scrolled .site-header .nav-pill { background: transparent; box-shadow: none; padding: 4px 8px; }
@keyframes stickyDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
body.scrolled main { padding-top: 0; }

/* ===================================================================
   COOKIE BANNER
   =================================================================== */
.cookie-banner {
    position: fixed; bottom: 16px; left: 16px; right: 16px;
    max-width: 720px; margin: 0 auto;
    background: var(--teal); color: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    box-shadow: 0 18px 40px rgba(0,0,0,.3);
    z-index: 1050;
    transform: translateY(140%);
    transition: transform .35s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .ck-icon { font-size: 26px; color: var(--gold); flex-shrink: 0; }
.cookie-banner .ck-text { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.5; }
.cookie-banner .ck-text strong { display: block; font-family: 'Playfair Display', serif; color: #fff; font-size: 15px; margin-bottom: 2px; }
.cookie-banner .ck-text a { color: var(--accent); }
.cookie-banner .ck-actions { display: flex; gap: 8px; }
.cookie-banner .ck-actions button {
    border: 0; padding: 9px 16px; border-radius: 50px;
    font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer;
}
.cookie-banner .ck-accept { background: var(--accent); color: #fff; }
.cookie-banner .ck-accept:hover { background: var(--accent-dark); }
.cookie-banner .ck-reject { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.cookie-banner .ck-reject:hover { background: rgba(255,255,255,.08); }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===================================================================
   DISCOVER DARK card budget tiers (Saving / Budget / Plus)
   =================================================================== */
.discover-card-link { display: block; height: 100%; }
.discover-card-img .card-tiers {
    list-style: none; padding: 0; margin: 10px 0 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.discover-card-img .card-tiers a {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,.16); backdrop-filter: blur(6px);
    color: #fff; font-size: 11px; font-weight: 600;
    padding: 5px 10px; border-radius: 50px;
    transition: all .2s;
}
.discover-card-img .card-tiers a:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.discover-card-img .card-tiers a i { font-size: 9px; opacity: .8; }
.discover-card-img .feat-tall .card-tiers a, .discover-card-img.feat-tall .card-tiers a { font-size: 12px; padding: 6px 12px; }

/* ===================================================================
   HA GIANG DEEP-DIVE  (1 large 21:9)
   =================================================================== */
.deepdive-section { background: var(--cream); padding: 60px 0; }
.deepdive-card {
    position: relative;
    aspect-ratio: 21/9;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0,0,0,.22);
    color: #fff; text-decoration: none;
    display: block;
    transition: transform .25s, box-shadow .25s;
}
.deepdive-card:hover { transform: translateY(-4px); box-shadow: 0 28px 56px rgba(0,0,0,.28); color: #fff; }
.deepdive-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.deepdive-card:hover img { transform: scale(1.04); }
.deepdive-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(15,58,71,.85) 0%, rgba(15,58,71,.55) 40%, rgba(15,58,71,.1) 70%, transparent 100%);
}
.deepdive-card .body {
    position: absolute; left: 6%; top: 50%; transform: translateY(-50%);
    z-index: 2; max-width: 460px;
}
.deepdive-card .dd-eyebrow {
    color: var(--accent); font-size: 11px; font-weight: 800;
    letter-spacing: 3px; text-transform: uppercase;
    display: inline-block; margin-bottom: 6px;
}
.deepdive-card h2 {
    color: #fff; font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3.6rem); font-style: italic;
    margin: 0 0 14px; line-height: 1;
    text-shadow: 0 2px 22px rgba(0,0,0,.4);
}
.deepdive-card p { opacity: .92; margin: 0 0 22px; max-width: 420px; font-size: 14.5px; line-height: 1.6; }
.deepdive-card .dd-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: #fff;
    padding: 11px 22px; border-radius: 50px;
    font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(61,169,181,.4);
}
.deepdive-card:hover .dd-cta { background: var(--accent-dark); }
.deepdive-card .dd-tag-corner {
    position: absolute; bottom: 24px; right: 24px;
    background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
    color: #fff; font-family: 'Caveat', cursive;
    font-size: 22px; padding: 4px 16px; border-radius: 50px;
    transform: rotate(-3deg);
    z-index: 2;
}
@media (max-width: 768px) {
    .deepdive-card { aspect-ratio: 4/5; }
    .deepdive-card::after { background: linear-gradient(180deg, transparent 30%, rgba(15,58,71,.9) 100%); }
    .deepdive-card .body { left: 8%; right: 8%; top: auto; bottom: 8%; transform: none; }
    .deepdive-card .dd-tag-corner { top: 18px; right: 18px; bottom: auto; }
}

/* ===================================================================
   TAG CLOUD (landmarks pill list)
   =================================================================== */
.tag-cloud-section { background: var(--paper); padding: 80px 0; }
.tag-list {
    list-style: none; padding: 0; margin: 30px 0 0;
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
}
.tag-list li a {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff;
    color: var(--teal);
    padding: 9px 16px; border-radius: 50px;
    font-size: 13px; font-weight: 600;
    border: 1px dashed var(--line);
    transition: all .2s;
}
.tag-list li a i { color: var(--flag-red); font-size: 12px; }
.tag-list li a:hover {
    background: var(--teal); color: #fff;
    border-color: var(--teal);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15,58,71,.18);
}
.tag-list li a:hover i { color: var(--accent); }
/* Vary background slightly to make it look hand-laid */
.tag-list li:nth-child(3n) a { background: var(--cream); }
.tag-list li:nth-child(5n) a { transform: rotate(-1deg); }
.tag-list li:nth-child(7n) a { transform: rotate(1deg); }
.tag-list li:nth-child(5n) a:hover, .tag-list li:nth-child(7n) a:hover { transform: rotate(0) translateY(-2px); }

/* ===================================================================
   GUIDE GRID  4-col on wide screens (was 4-col, fits 12 cards nicely)
   =================================================================== */
.guide-section .guide-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .guide-section .guide-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .guide-section .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .guide-section .guide-grid { grid-template-columns: 1fr; } }
.guide-section .guide-card .img-wrap { aspect-ratio: 16/10; }
.guide-section .guide-card h6 { min-height: auto; font-size: 14px; }
.guide-section .guide-card .body { padding: 14px 16px 16px; }
.guide-section .guide-card p { font-size: 12px; line-height: 1.5; }
.guide-section .guide-card .meta { font-size: 10.5px; }

/* ===================================================================
   TOUR DETAIL PAGE
   =================================================================== */
.tour-hero {
    position: relative;
    min-height: 540px;
    background-size: cover; background-position: center;
    color: #fff;
    display: flex; align-items: flex-end;
    padding: 160px 0 70px;
}
.tour-hero-inner { position: relative; z-index: 2; }
.tour-breadcrumb { font-size: 13px; opacity: .9; margin-bottom: 18px; }
.tour-breadcrumb a { color: #fff; }
.tour-breadcrumb a:hover { color: var(--accent); }
.tour-breadcrumb span { opacity: .8; }
.tour-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.tour-hero-text { flex: 1; min-width: 280px; }
.tour-hero-cat {
    display: inline-block; background: var(--flag-red); color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    padding: 5px 12px; border-radius: 50px; margin-bottom: 12px;
}
.tour-hero h1 {
    color: #fff; font-size: clamp(1.9rem, 3.6vw, 3.2rem);
    text-shadow: 0 2px 20px rgba(0,0,0,.4); margin: 0 0 14px; max-width: 760px;
}
.tour-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; margin-bottom: 22px; }
.tour-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.tour-hero-meta i { color: var(--accent); }
.tour-hero-rating i { color: #ffd84a; }
.tour-hero-rating small { opacity: .8; }
.tour-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-book-now {
    background: var(--accent); color: #fff;
    padding: 13px 28px; border-radius: 50px;
    font-weight: 800; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 8px 22px rgba(61,169,181,.4);
}
.btn-book-now:hover { background: var(--accent-dark); color: #fff; }
.btn-wa-trip {
    background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
    color: #fff; padding: 10px 10px 10px 22px; border-radius: 50px;
    font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 12px;
}
.btn-wa-trip:hover { background: rgba(255,255,255,.26); color: #fff; }
.btn-wa-trip .wa-circle { width: 30px; height: 30px; border-radius: 50%; background: #25d366; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.tour-hero-price {
    background: rgba(255,255,255,.95); color: var(--teal);
    border-radius: 16px; padding: 18px 26px; text-align: center;
    box-shadow: 0 14px 30px rgba(0,0,0,.25); flex-shrink: 0;
}
.tour-hero-price small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.tour-hero-price strong { font-family: 'Playfair Display', serif; font-size: 38px; color: var(--flag-red); line-height: 1; }
.tour-hero-price span { display: block; font-size: 12px; color: var(--muted); }
.tour-hero-price .price-old { display: block; font-size: 12px; color: var(--muted); text-decoration: line-through; margin-top: 4px; }
@media (max-width: 768px) { .tour-hero { padding: 130px 0 50px; min-height: 480px; } .tour-hero-price { align-self: flex-start; } }

/* Sticky sub-nav */
.tour-subnav {
    position: sticky; top: 0; z-index: 1020;
    background: var(--teal);
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.tour-subnav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 4px; overflow-x: auto;
}
.tour-subnav a {
    display: inline-block; white-space: nowrap;
    color: rgba(255,255,255,.82); padding: 16px 18px;
    font-size: 13px; font-weight: 600;
    border-bottom: 3px solid transparent;
}
.tour-subnav a:hover { color: #fff; }
.tour-subnav a.active { color: #fff; border-bottom-color: var(--accent); }

/* Layout */
.tour-body { background: var(--cream); padding: 70px 0; }
.tour-layout { display: grid; grid-template-columns: 1fr 360px; gap: 50px; align-items: start; }
.tour-h2 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); color: var(--teal); margin: 0 0 18px; line-height: 1.25; }
.tour-h2 .eyebrow { font-size: 26px; }
.tour-h2.center { text-align: center; }
.tour-h2.center .eyebrow { justify-content: center; }
.tour-summary { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--ink); line-height: 1.55; margin-bottom: 18px; }
.tour-description { color: var(--ink-soft); line-height: 1.75; }
.tour-description p { margin: 0 0 14px; }

.tour-highlights { margin: 28px 0; }
.tour-highlights h4 { color: var(--teal); font-size: 18px; margin: 0 0 14px; }
.highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.highlight {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 14px 16px; font-size: 13.5px; color: var(--ink-soft);
    display: flex; align-items: center; gap: 10px;
}
.highlight i { color: var(--accent); font-size: 20px; }

.tour-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.tour-gallery .g-cell { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,.1); }
.tour-gallery .g-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tour-gallery .g-cell:hover img { transform: scale(1.08); }

/* Sidebar */
.tour-aside { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 20px; }
.book-box { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 16px 34px rgba(0,0,0,.1); border: 1px solid var(--line); }
.book-price { padding-bottom: 16px; border-bottom: 1px dashed var(--line); margin-bottom: 16px; }
.book-price small { color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.book-price strong { font-family: 'Playfair Display', serif; font-size: 34px; color: var(--flag-red); }
.book-price span { color: var(--muted); font-size: 13px; }
.book-price em { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; font-style: normal; }
.book-facts { list-style: none; padding: 0; margin: 0 0 18px; }
.book-facts li { padding: 7px 0; font-size: 13.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--cream); }
.book-facts i { color: var(--accent); width: 18px; text-align: center; }
.btn-book-side { display: block; text-align: center; background: var(--accent); color: #fff; padding: 14px; border-radius: 50px; font-weight: 800; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
.btn-book-side:hover { background: var(--accent-dark); color: #fff; }
.btn-ask-side { display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--teal); border: 2px solid var(--teal); padding: 12px; border-radius: 50px; font-weight: 700; font-size: 13px; }
.btn-ask-side:hover { background: var(--teal); color: #fff; }

.mini-map { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 34px rgba(0,0,0,.1); border: 1px solid var(--line); }
.mini-map-head { padding: 14px 18px; font-family: 'Playfair Display', serif; font-weight: 700; color: var(--teal); display: flex; align-items: center; gap: 8px; }
.mini-map-head i { color: var(--flag-red); }
.mini-map-svg { width: 100%; height: 200px; display: block; }
.mini-map-note { font-size: 11px; color: var(--muted); padding: 10px 18px; margin: 0; }
@media (max-width: 992px) { .tour-layout { grid-template-columns: 1fr; } .tour-aside { position: static; } .highlight-grid { grid-template-columns: 1fr; } }

/* Itinerary timeline */
.tour-itinerary { background: var(--paper); padding: 80px 0; }
.timeline { max-width: 820px; margin: 30px auto 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 70px; top: 10px; bottom: 10px; width: 2px; background: repeating-linear-gradient(var(--accent) 0 6px, transparent 6px 12px); }
.timeline-item { display: grid; grid-template-columns: 90px 1fr; gap: 20px; margin-bottom: 22px; position: relative; }
.timeline-marker {
    background: var(--teal); color: #fff;
    border-radius: 10px; padding: 10px 6px; text-align: center;
    font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
    height: fit-content; position: relative; z-index: 2;
}
.timeline-content { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.timeline-content h5 { color: var(--teal); font-size: 16px; margin: 0 0 8px; }
.timeline-content p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin: 0; }
@media (max-width: 600px) { .timeline::before { left: 30px; } .timeline-item { grid-template-columns: 60px 1fr; gap: 12px; } .timeline-marker { font-size: 10px; padding: 8px 4px; } }

/* Packages */
.tour-packages { background: var(--cream); padding: 80px 0; }
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; align-items: stretch; }
.package-card {
    background: #fff; border: 2px solid var(--line); border-radius: 16px;
    padding: 28px 26px; position: relative;
    display: flex; flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}
.package-card:hover { transform: translateY(-4px); box-shadow: 0 20px 38px rgba(0,0,0,.1); }
.package-card.is-popular { border-color: var(--accent); box-shadow: 0 20px 40px rgba(61,169,181,.2); }
.pkg-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 5px 16px; border-radius: 50px; }
.pkg-name { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--teal); font-size: 20px; margin-bottom: 8px; }
.pkg-price { margin-bottom: 18px; }
.pkg-price strong { font-family: 'Playfair Display', serif; font-size: 34px; color: var(--flag-red); }
.pkg-price span { color: var(--muted); font-size: 13px; }
.pkg-feat { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.pkg-feat li { padding: 8px 0; font-size: 13.5px; color: var(--ink-soft); display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--cream); }
.pkg-feat i { color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.pkg-cta { display: block; text-align: center; background: var(--teal); color: #fff; padding: 12px; border-radius: 50px; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.pkg-cta:hover { background: var(--teal-dark); color: #fff; }
.package-card.is-popular .pkg-cta { background: var(--accent); }
.package-card.is-popular .pkg-cta:hover { background: var(--accent-dark); }
@media (max-width: 768px) { .package-grid { grid-template-columns: 1fr; } }

/* Includes */
.tour-includes { background: var(--paper); padding: 70px 0; }
.includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 980px; margin: 0 auto; }
.includes-col { background: #fff; border-radius: 16px; padding: 28px 30px; border: 1px solid var(--line); }
.includes-col h4 { color: var(--teal); font-size: 18px; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.includes-col h4 i { color: #1f7a4d; }
.includes-col.excluded h4 i { color: var(--flag-red); }
.includes-col ul { list-style: none; padding: 0; margin: 0; }
.includes-col li { padding: 9px 0 9px 26px; font-size: 14px; color: var(--ink-soft); position: relative; border-bottom: 1px dashed var(--line); }
.includes-col li::before { content: '\2713'; position: absolute; left: 0; color: #1f7a4d; font-weight: 800; }
.includes-col.excluded li::before { content: '\2715'; color: var(--flag-red); }
@media (max-width: 768px) { .includes-grid { grid-template-columns: 1fr; } }

/* Homestay */
.tour-stay { background: var(--cream); padding: 80px 0; }
.center-lead { text-align: center; color: var(--ink-soft); max-width: 720px; margin: 0 auto 36px; }
.stay-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.stay-cell { border-radius: 14px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 12px 26px rgba(0,0,0,.12); aspect-ratio: 4/3; }
.stay-cell.big { grid-row: span 2; aspect-ratio: auto; }
.stay-cell img { width: 100%; height: 100%; object-fit: cover; }
.stay-amenities { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }
.stay-amenities span { display: inline-flex; align-items: center; gap: 8px; background: #fff; padding: 9px 18px; border-radius: 50px; font-size: 13px; font-weight: 600; color: var(--teal); border: 1px solid var(--line); }
.stay-amenities i { color: var(--accent); }
@media (max-width: 768px) { .stay-grid { grid-template-columns: 1fr 1fr; } .stay-cell.big { grid-column: span 2; grid-row: auto; aspect-ratio: 16/9; } }

/* Tour FAQ (reuse home faq styles, scoped bg) */
.tour-faq { background: var(--cream); padding: 80px 0; }
.tour-faq .faq-list { max-width: 880px; margin: 30px auto 0; }

/* ===================================================================
   BOOKING CONFIGURATOR  (interactive, live price)
   =================================================================== */
.tour-book { background: var(--teal); color: #fff; padding: 80px 0; }
.tour-book .tour-h2, .tour-book .tour-h2 .eyebrow { color: #fff; }
.tour-book .eyebrow { color: var(--accent); }
.tour-book .eyebrow::before { background: var(--accent); }

.configurator { display: grid; grid-template-columns: 1fr 380px; gap: 30px; margin-top: 30px; align-items: start; }
.config-main { display: flex; flex-direction: column; gap: 18px; }
.config-step { background: #fff; border-radius: 16px; padding: 24px 26px; color: var(--ink); }
.config-step h4 {
    display: flex; align-items: center; gap: 12px;
    color: var(--teal); font-size: 17px; margin: 0 0 18px;
}
.config-step .step-n {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; font-family: 'Inter', sans-serif;
    flex-shrink: 0;
}
.config-step .step-optional {
    font-size: 11px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 1px;
    background: var(--cream); padding: 3px 10px; border-radius: 50px;
}

/* Package / accommodation cards */
.opt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.opt-cards-3 { grid-template-columns: repeat(3, 1fr); }
.opt-card { position: relative; cursor: pointer; display: block; }
.opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card .opt-inner {
    display: block; border: 2px solid var(--line); border-radius: 12px;
    padding: 18px 16px; text-align: center; transition: all .2s; height: 100%;
    position: relative;
}
.opt-card:hover .opt-inner { border-color: var(--accent); }
.opt-card input:checked + .opt-inner { border-color: var(--accent); background: #f6fdfe; box-shadow: 0 8px 20px rgba(61,169,181,.18); }
.opt-card input:checked + .opt-inner::after {
    content: '\2713'; position: absolute; top: 8px; right: 8px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.opt-card input:focus-visible + .opt-inner { outline: 2px solid var(--teal); outline-offset: 2px; }
.opt-flag { display: inline-block; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 50px; margin-bottom: 6px; }
.opt-icon { display: block; font-size: 26px; color: var(--accent); margin-bottom: 6px; }
.opt-title { display: block; font-family: 'Playfair Display', serif; font-weight: 700; color: var(--teal); font-size: 16px; }
.opt-desc { display: block; font-size: 11.5px; color: var(--muted); margin: 4px 0 8px; line-height: 1.4; }
.opt-price { display: block; font-family: 'Playfair Display', serif; font-weight: 800; color: var(--flag-red); font-size: 18px; }
.opt-price small { font-size: 11px; color: var(--muted); font-weight: 400; }
@media (max-width: 600px) { .opt-cards, .opt-cards-3 { grid-template-columns: 1fr; } }

/* Transport / add-on rows */
.opt-rows { display: flex; flex-direction: column; gap: 10px; }
.opt-row {
    display: flex; align-items: center; gap: 14px;
    border: 2px solid var(--line); border-radius: 12px;
    padding: 14px 18px; cursor: pointer; transition: all .2s;
}
.opt-row:hover { border-color: var(--accent); }
.opt-row:has(input:checked) { border-color: var(--accent); background: #f6fdfe; box-shadow: 0 6px 16px rgba(61,169,181,.15); }
.opt-row input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.opt-row .r-icon { width: 46px; height: 46px; border-radius: 10px; background: var(--cream); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.opt-row .r-body { flex: 1; min-width: 0; }
.opt-row .r-body strong { display: block; color: var(--teal); font-family: 'Playfair Display', serif; font-size: 15px; }
.opt-row .r-body small { color: var(--muted); font-size: 12px; }
.opt-row .r-price { font-family: 'Playfair Display', serif; font-weight: 800; color: var(--flag-red); font-size: 15px; white-space: nowrap; text-align: right; }
.opt-row .r-price small { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }
@media (max-width: 600px) { .opt-row { flex-wrap: wrap; } .opt-row .r-price { margin-left: auto; } }

/* Form fields (shared) */
.bf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bf-field { margin-bottom: 14px; }
.bf-field:last-child { margin-bottom: 0; }
.bf-field label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.bf-field input, .bf-field select, .bf-field textarea {
    width: 100%; border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; font-size: 14px; color: var(--ink); outline: 0;
    font-family: inherit; background: var(--paper);
}
.bf-field input:focus, .bf-field select:focus, .bf-field textarea:focus { border-color: var(--accent); background: #fff; }
.field-hint { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Quantity stepper */
.qty { display: flex; align-items: stretch; max-width: 160px; }
.qty-btn { width: 44px; border: 1px solid var(--line); background: var(--cream); color: var(--teal); font-size: 20px; font-weight: 700; cursor: pointer; }
.qty-btn:first-child { border-radius: 10px 0 0 10px; }
.qty-btn:last-child { border-radius: 0 10px 10px 0; }
.qty-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.qty input { width: 64px; text-align: center; border-left: 0; border-right: 0; border-radius: 0; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Live summary (sticky) */
.config-summary {
    position: sticky; top: 80px;
    background: #fff; color: var(--ink);
    border-radius: 18px; padding: 26px;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.config-summary h5 { color: var(--teal); font-size: 18px; margin: 0 0 12px; }
.cs-tour { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.3; padding-bottom: 14px; border-bottom: 1px dashed var(--line); margin-bottom: 14px; }
.cs-tour span { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.summary-lines { list-style: none; padding: 0; margin: 0 0 14px; }
.summary-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--ink-soft); border-bottom: 1px solid var(--cream); }
.summary-lines li span em { font-style: normal; color: var(--muted); font-size: 11px; }
.summary-lines li b { color: var(--teal); white-space: nowrap; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 6px; border-top: 2px solid var(--line); }
.summary-total span { font-weight: 700; color: var(--ink); }
.summary-total span em { display: block; font-style: normal; font-size: 11px; color: var(--muted); font-weight: 400; }
.summary-total strong { font-family: 'Playfair Display', serif; font-size: 30px; color: var(--flag-red); }
.summary-deposit { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.summary-deposit strong { color: var(--teal); }
.btn-checkout { width: 100%; background: var(--flag-red); color: #fff; border: 0; padding: 16px; border-radius: 50px; font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 24px rgba(209,45,42,.35); }
.btn-checkout:hover { background: #b9261f; }
.bf-note { font-size: 11.5px; color: var(--muted); margin: 14px 0 0; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.bf-note i { color: #1f7a4d; margin-top: 2px; }
.cs-help { font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.cs-help i { color: var(--accent); }
.cs-help a { color: var(--accent); font-weight: 600; }
@media (max-width: 992px) { .configurator { grid-template-columns: 1fr; } .config-summary { position: static; } }
@media (max-width: 600px) { .bf-row { grid-template-columns: 1fr; } }

/* Traveller stepper rows */
.trav-rows { display: flex; flex-direction: column; gap: 10px; }
.trav-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px;
}
.trav-info strong { display: block; color: var(--teal); font-family: 'Playfair Display', serif; font-size: 15px; }
.trav-info small { color: var(--muted); font-size: 12px; }

/* Transport: outbound / return columns */
.transport-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.transport-head { font-weight: 700; color: var(--teal); font-size: 13.5px; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.transport-head i { color: var(--accent); }
.transport-col .opt-row { padding: 12px 14px; }
.transport-col .opt-row .r-body strong { font-size: 14px; }
@media (max-width: 768px) { .transport-cols { grid-template-columns: 1fr; } }

/* Package sub-line on cards */
.pkg-sub { font-size: 12.5px; color: var(--muted); margin: -8px 0 14px; line-height: 1.4; }
.pkg-feat li span { line-height: 1.4; }
.pkg-feat li b { color: var(--teal); }

/* Package comparison table (collapsible accordion) */
.pkg-compare-acc { max-width: 900px; margin: 40px auto 0; background: #fff; border-radius: 16px; box-shadow: 0 14px 32px rgba(0,0,0,.07); overflow: hidden; }
.pkg-compare-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 20px 26px; color: var(--teal); font-family: 'Playfair Display', serif; font-weight: 700; font-size: 19px; }
.pkg-compare-title::-webkit-details-marker { display: none; }
.pkg-compare-title::marker { content: ''; }
.pkg-compare-title i { transition: transform .25s; color: var(--accent); flex-shrink: 0; }
.pkg-compare-acc[open] .pkg-compare-title i { transform: rotate(180deg); }
.pkg-compare-title:hover { background: var(--paper); }
.pkg-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 16px; }
.pkg-compare { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; background: #fff; }
.pkg-compare th, .pkg-compare td { padding: 14px 18px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--cream); vertical-align: top; }
.pkg-compare thead th { background: var(--teal); color: #fff; font-family: 'Playfair Display', serif; font-size: 16px; text-align: center; }
.pkg-compare thead th.is-popular { background: var(--accent); }
.pkg-compare tbody th { color: var(--teal); font-weight: 700; width: 150px; background: var(--paper); }
.pkg-compare tbody td { color: var(--ink-soft); text-align: center; }
.pkg-compare tbody td small { display: block; color: var(--flag-red); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; }
.pkg-compare tbody tr:last-child th, .pkg-compare tbody tr:last-child td { border-bottom: 0; }

/* Itinerary meta + destination checklist */
.timeline-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accent-dark); background: #f0f8f9; padding: 4px 12px; border-radius: 50px; margin-bottom: 10px; }
.timeline-meta i { color: var(--accent); }
.day-destinations { margin-top: 14px; background: var(--paper); border-radius: 12px; padding: 14px 18px; }
.dd-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.day-destinations ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.day-destinations li { font-size: 13.5px; color: var(--ink-soft); display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; }
.day-destinations li i { color: #1f7a4d; font-size: 15px; flex-shrink: 0; margin-top: 1px; }
@media (max-width: 600px) { .day-destinations ul { grid-template-columns: 1fr; } }

/* Reviews */
.tour-reviews { background: var(--cream); padding: 80px 0; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.review-card { background: #fff; border-radius: 16px; padding: 26px; box-shadow: 0 14px 30px rgba(0,0,0,.07); }
.review-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.review-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.review-head strong { display: block; color: var(--teal); font-family: 'Playfair Display', serif; font-size: 15px; }
.review-head small { color: var(--muted); font-size: 12px; }
.review-stars { color: #ffd84a; font-size: 13px; margin-bottom: 10px; }
.review-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.65; margin: 0; }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }

/* Policy */
.tour-policy { background: var(--paper); padding: 70px 0; }
.policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 980px; margin: 0 auto; }
.policy-col { background: #fff; border-radius: 16px; padding: 28px 30px; border: 1px solid var(--line); }
.policy-col h5 { color: var(--teal); font-size: 17px; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.policy-col h5 i { color: var(--accent); }
.policy-col ul { list-style: none; padding: 0; margin: 0; }
.policy-col li { padding: 8px 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; border-bottom: 1px dashed var(--line); }
.policy-col li strong { color: var(--teal); }
@media (max-width: 768px) { .policy-grid { grid-template-columns: 1fr; } }

/* Related */
.tour-related { background: var(--cream); padding: 80px 0; }
.tour-related .tour-grid { margin-top: 30px; }

/* Skip link (accessibility) */
.skip-link {
    position: absolute; left: -9999px; top: 8px; z-index: 9999;
    background: var(--teal); color: #fff;
    padding: 10px 18px; border-radius: 8px;
    font-weight: 700; font-size: 13px;
}
.skip-link:focus { left: 8px; color: #fff; }

/* Utility */
.bg-cream { background: var(--cream); }
.bg-paper { background: var(--paper); }

/* ===================================================================
   TOURS LISTING PAGE  (/tours)
   =================================================================== */
.tours-hero {
    position: relative; background-size: cover; background-position: center;
    color: #fff; text-align: center; padding: 120px 0 90px;
}
.tours-hero-inner { max-width: 760px; }
.tours-hero .th-eyebrow {
    display: inline-block; font-family: 'Caveat', cursive; font-size: 24px; color: var(--accent);
    background: rgba(255,255,255,.12); padding: 2px 18px; border-radius: 50px; margin-bottom: 10px;
}
.tours-hero h1 {
    color: #fff;
    font-family: 'Playfair Display', serif; font-weight: 800; font-size: clamp(34px, 6vw, 64px);
    line-height: 1.05; margin: 0 0 16px; text-shadow: 0 3px 8px rgba(0,0,0,.45), 0 8px 30px rgba(0,0,0,.35);
}
.tours-hero h1 em { font-family: 'Caveat', cursive; font-style: normal; color: var(--gold); font-weight: 700; }
.tours-hero p { font-size: 16px; color: rgba(255,255,255,.9); max-width: 620px; margin: 0 auto; }
.scroll-cue {
    display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
    margin-top: 34px; color: #fff; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: .9;
}
.scroll-cue:hover { color: #fff; opacity: 1; }
.scroll-cue .mouse { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.8); border-radius: 14px; display: flex; justify-content: center; padding-top: 6px; }
.scroll-cue .wheel { width: 4px; height: 8px; background: #fff; border-radius: 2px; animation: scrollWheel 1.4s infinite; }
@keyframes scrollWheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue .wheel { animation: none; } }

/* The Best Choose — featured carousel */
.best-choose { background: var(--paper); padding: 70px 0; }
.bc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; gap: 16px; }
.bc-head .section-title { margin: 0; }
.carousel-arrows { display: flex; gap: 10px; flex-shrink: 0; }
.ca-btn {
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
    background: #fff; color: var(--teal); font-size: 18px; cursor: pointer; transition: all .2s;
    display: inline-flex; align-items: center; justify-content: center;
}
.ca-btn:hover:not(:disabled) { background: var(--teal); color: #fff; border-color: var(--teal); }
.ca-btn:disabled { opacity: .35; cursor: default; }
.tour-carousel {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
    gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
}
.tour-carousel::-webkit-scrollbar { display: none; }
.tour-carousel .tc-item { scroll-snap-align: start; }
@media (min-width: 992px) { .tour-carousel { grid-auto-columns: calc((100% - 72px) / 4); } }

/* Discovery your trip */
.discovery-trip { background: var(--cream); padding: 70px 0 90px; }
.discovery-trip .search-widget { margin: 10px auto 26px; }

/* Custom filter dropdowns */
.cdrop-toggle {
    width: 100%; background: transparent; border: 0; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink); text-align: left;
}
.cdrop-toggle .bi-chevron-down { font-size: 12px; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
.cdrop.open .cdrop-toggle .bi-chevron-down { transform: rotate(180deg); }
.cdrop-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdrop-menu {
    position: absolute; top: calc(100% + 16px); left: 0; min-width: 240px; z-index: 40;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 22px 48px rgba(15,58,71,.18); padding: 8px; margin: 0; list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s;
    max-height: 320px; overflow-y: auto;
}
.cdrop.open .cdrop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cdrop-menu li {
    padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--ink-soft);
    cursor: pointer; transition: background .15s, color .15s;
}
.cdrop-menu li:hover { background: var(--cream); color: var(--teal); }
.cdrop-menu li.is-sel { background: var(--accent); color: #fff; font-weight: 600; }
@media (max-width: 768px) {
    .cdrop-menu { left: 0; right: 0; min-width: 0; }
}

/* ===================================================================
   BLOG LISTING + DETAIL
   =================================================================== */
/* Featured post */
.blog-featured { background: var(--paper); padding: 64px 0 30px; }
.bf-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.bf-img { display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 18px 40px rgba(0,0,0,.14); }
.bf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bf-img:hover img { transform: scale(1.05); }
.bf-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.bf-cat { background: var(--flag-red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 14px; border-radius: 50px; }
.bf-date { color: var(--muted); font-size: 13px; }
.bf-body h2 { font-family: 'Playfair Display', serif; font-weight: 800; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.18; margin: 0 0 16px; }
.bf-body h2 a { color: var(--teal); }
.bf-body h2 a:hover { color: var(--accent); }
.bf-body p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin: 0 0 22px; }
@media (max-width: 768px) { .bf-grid { grid-template-columns: 1fr; gap: 24px; } }

/* News list + tabs */
.blog-list { background: var(--cream); padding: 60px 0 90px; }
.bl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; }
.bl-head .section-title { margin: 0; }
.blog-tabs { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.blog-tabs a { position: relative; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding-bottom: 6px; }
.blog-tabs a:hover { color: var(--teal); }
.blog-tabs a.active { color: var(--teal); }
.blog-tabs a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 3px; }
.bl-tools { display: flex; align-items: center; gap: 16px 22px; flex-wrap: wrap; }
.blog-search { position: relative; display: flex; align-items: center; }
.blog-search i { position: absolute; left: 14px; color: var(--muted); font-size: 14px; pointer-events: none; }
.blog-search input { border: 1px solid var(--line); background: #fff; border-radius: 50px; padding: 9px 36px 9px 38px; font-size: 13px; color: var(--ink); outline: 0; width: 210px; transition: border-color .2s, width .2s; }
.blog-search input:focus { border-color: var(--accent); width: 240px; }
.bs-clear { position: absolute; right: 12px; color: var(--muted); font-size: 18px; line-height: 1; text-decoration: none; }
.bs-clear:hover { color: var(--flag-red); }
.bl-results { color: var(--ink-soft); font-size: 14px; margin: 0 0 24px; }
.bl-results strong { color: var(--teal); }

/* Post cards (editorial) */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.related-grid { grid-template-columns: repeat(3, 1fr); }
.post-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
    box-shadow: 0 10px 28px rgba(15,58,71,.06); transition: transform .28s, box-shadow .28s; color: var(--ink);
}
.post-card:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(15,58,71,.14); color: var(--ink); }
.post-card .pc-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.post-card .pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.post-card:hover .pc-img img { transform: scale(1.06); }
.pc-cat {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: var(--bc, var(--accent)); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    padding: 5px 13px; border-radius: 50px; box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.pc-body { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.pc-date { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.pc-date i { color: var(--accent); margin-right: 5px; }
.pc-title {
    font-family: 'Playfair Display', serif; font-weight: 700; font-size: 19px; line-height: 1.3;
    color: var(--teal); margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card:hover .pc-title { color: var(--accent); }
.pc-excerpt {
    font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-more { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; transition: gap .2s; }
.post-card:hover .pc-more { gap: 10px; color: var(--accent); }
@media (max-width: 992px) { .blog-grid, .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid, .related-grid { grid-template-columns: 1fr; } }

/* Blog detail hero */
.post-hero { position: relative; background-size: cover; background-position: center; color: #fff; padding: 150px 0 96px; text-align: center; }
.post-hero-inner { max-width: 820px; margin: 0 auto; }
.post-breadcrumb { font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 20px; }
.post-breadcrumb a { color: rgba(255,255,255,.9); }
.post-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.post-cat { display: inline-block; background: var(--flag-red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 18px; border-radius: 50px; margin-bottom: 22px; }
.post-cat:hover { color: #fff; background: #b9261f; }
.post-hero h1 { color: #fff; font-family: 'Playfair Display', serif; font-weight: 800; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.18; margin: 0 0 22px; text-shadow: 0 6px 28px rgba(0,0,0,.45); }
.post-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; color: rgba(255,255,255,.95); }
.post-meta i { margin-right: 6px; color: var(--gold); }

/* Blog detail article + sidebar layout */
.post-body { background: var(--paper); padding: 44px 0 80px; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; align-items: start; }
.post-article { margin: 0; background: #fff; border-radius: 20px; padding: clamp(32px, 4vw, 56px); box-shadow: 0 18px 44px rgba(15,58,71,.08); }

/* Blog detail sidebar */
.post-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 22px; }
.ps-box { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: 0 10px 26px rgba(15,58,71,.05); }
.ps-title { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--teal); font-size: 18px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.ps-cats { list-style: none; padding: 0; margin: 0; }
.ps-cats li + li { margin-top: 4px; }
.ps-cats a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink-soft); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.ps-cats a:hover { background: var(--cream); color: var(--teal); }
.ps-cats a span { background: var(--paper); color: var(--muted); font-size: 11px; font-weight: 700; min-width: 24px; height: 24px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.ps-post { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cream); }
.ps-post:last-child { border-bottom: 0; }
.ps-thumb { width: 62px; height: 62px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.ps-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-post-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ps-post-body strong { font-family: 'Playfair Display', serif; font-weight: 600; color: var(--teal); font-size: 14px; line-height: 1.35; }
.ps-post:hover .ps-post-body strong { color: var(--accent); }
.ps-post-body small { color: var(--muted); font-size: 12px; margin-top: 4px; }
.ps-cta { background: var(--teal); border-color: var(--teal); color: #fff; text-align: center; }
.ps-cta .ps-title { color: #fff; border-bottom-color: rgba(255,255,255,.2); }
.ps-cta p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.88); margin: 0 0 18px; }
.ps-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--flag-red); color: #fff; font-weight: 700; font-size: 13px; padding: 11px 22px; border-radius: 50px; }
.ps-cta-btn:hover { background: #b9261f; color: #fff; }
@media (max-width: 900px) {
    .post-layout { grid-template-columns: 1fr; }
    .post-aside { position: static; }
}
.post-lead { font-family: 'Playfair Display', serif; font-size: 22px; line-height: 1.6; color: var(--teal); font-weight: 600; margin: 0 0 30px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.blog-prose { color: var(--ink-soft); font-size: 17px; line-height: 1.9; }
.blog-prose > *:first-child { margin-top: 0; }
.blog-prose h2 { font-family: 'Playfair Display', serif; color: var(--teal); font-size: 27px; margin: 44px 0 16px; }
.blog-prose h3 { font-family: 'Playfair Display', serif; color: var(--teal); font-size: 22px; margin: 36px 0 12px; }
.blog-prose p { margin: 0 0 24px; }
.blog-prose ul, .blog-prose ol { margin: 0 0 24px; padding-left: 24px; }
.blog-prose li { margin-bottom: 12px; padding-left: 4px; }
.blog-prose li::marker { color: var(--accent); }
.blog-prose a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.blog-prose img { max-width: 100%; height: auto; border-radius: 16px; margin: 28px 0; }
.blog-prose blockquote { margin: 30px 0; padding: 18px 26px; border-left: 4px solid var(--accent); background: var(--paper); border-radius: 0 14px 14px 0; color: var(--ink); font-style: italic; font-size: 18px; }
.post-tags { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.post-tags > i { color: var(--accent); }
.post-tag { background: var(--cream); color: var(--teal); font-size: 12.5px; font-weight: 600; padding: 6px 16px; border-radius: 50px; }
.post-tag:hover { background: var(--accent); color: #fff; }
.post-back { margin-top: 32px; }

/* ===================================================================
   FAQ PAGE
   =================================================================== */
.faq-page { background: var(--cream); padding: 56px 0 90px; }
.faq-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.faq-filter button {
    border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
    font-size: 13px; font-weight: 700; letter-spacing: .5px; padding: 9px 22px;
    border-radius: 50px; cursor: pointer; transition: all .2s;
}
.faq-filter button:hover { border-color: var(--accent); color: var(--teal); }
.faq-filter button.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.faq-layout .faq-list { max-width: none; margin: 0; }
.faq-contact { list-style: none; padding: 0; margin: 0; }
.faq-contact li { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 14px; color: var(--ink-soft); border-bottom: 1px solid var(--cream); }
.faq-contact li:last-child { border-bottom: 0; }
.faq-contact i { color: var(--accent); width: 18px; text-align: center; }
.faq-contact a { color: var(--ink); font-weight: 600; }
.faq-contact a:hover { color: var(--accent); }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } .faq-aside { position: static; } }

/* ===================================================================
   ABOUT PAGE
   =================================================================== */
.about-story { background: var(--paper); padding: 80px 0; }
.about-story-grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: 48px; align-items: center; }
.about-img { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 46px rgba(15,58,71,.16); aspect-ratio: 4/5; }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-text .eyebrow { margin-bottom: 6px; }
.about-text h2 { font-family: 'Playfair Display', serif; color: var(--teal); font-size: clamp(24px, 3vw, 34px); line-height: 1.2; margin: 0 0 18px; }
@media (max-width: 820px) { .about-story-grid { grid-template-columns: 1fr; gap: 28px; } .about-img { aspect-ratio: 16/10; max-height: 360px; } }

.about-stats { background: var(--teal); padding: 46px 0; }
.about-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.about-stat { text-align: center; color: #fff; position: relative; }
.about-stat + .about-stat::before { content: ''; position: absolute; left: -10px; top: 10%; bottom: 10%; width: 1px; background: rgba(255,255,255,.18); }
.about-stat strong { display: block; font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 40px); color: var(--gold); line-height: 1; }
.about-stat span { font-size: 13px; color: rgba(255,255,255,.85); margin-top: 8px; display: block; letter-spacing: .5px; }
@media (max-width: 600px) { .about-stats-row { grid-template-columns: 1fr 1fr; gap: 28px; } .about-stat + .about-stat::before { display: none; } }

.about-values { background: var(--cream); padding: 80px 0; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; }
.value-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; text-align: center; transition: transform .25s, box-shadow .25s; }
.value-card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(15,58,71,.1); }
.value-icon { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: var(--paper); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.value-card h5 { color: var(--teal); font-family: 'Playfair Display', serif; font-size: 18px; margin: 0 0 8px; }
.value-card p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .values-grid { grid-template-columns: 1fr; } }

.about-cta { background: var(--paper); padding: 80px 0 96px; text-align: center; }
.about-cta h2 { font-family: 'Playfair Display', serif; color: var(--teal); font-size: clamp(26px, 3.6vw, 38px); margin: 0 0 16px; }
.about-cta p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; max-width: 540px; margin: 0 auto 34px; }
.about-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.about-cta .btn-explore {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--teal); color: #fff;
    padding: 15px 32px; border-radius: 50px;
    font-weight: 700; font-size: 14.5px; letter-spacing: .3px;
    box-shadow: 0 12px 26px rgba(15,58,71,.22); transition: transform .2s, box-shadow .2s, background .2s;
}
.about-cta .btn-explore:hover { background: var(--teal-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(15,58,71,.3); }
.about-cta .btn-explore i { transition: transform .2s; }
.about-cta .btn-explore:hover i { transform: translateX(3px); }
.about-cta .btn-explore.alt { background: #fff; color: var(--teal); border: 2px solid var(--teal); box-shadow: 0 8px 20px rgba(15,58,71,.08); }
.about-cta .btn-explore.alt:hover { background: var(--teal); color: #fff; }
/* outline variant for other pages (kept) */
.btn-explore.alt { background: transparent; color: var(--teal); border: 1px solid var(--teal); }
.btn-explore.alt:hover { background: var(--teal); color: #fff; }

/* ===================================================================
   CONTACT PAGE
   =================================================================== */
.contact-page { background: var(--cream); padding: 70px 0 0; }
.contact-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 36px; align-items: stretch; }
.contact-card { background: var(--teal); color: #fff; border-radius: 18px; padding: 34px 32px; display: flex; flex-direction: column; }
.contact-card h3 { font-family: 'Playfair Display', serif; font-size: 24px; margin: 0 0 12px; color: #fff; }
.contact-card > p { color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.7; margin: 0 0 22px; }
.contact-card .faq-contact li { color: rgba(255,255,255,.92); border-bottom-color: rgba(255,255,255,.12); }
.contact-card .faq-contact i { color: var(--gold); }
.contact-card .faq-contact a { color: #fff; }
.contact-card .faq-contact a:hover { color: var(--gold); }
.contact-socials { display: flex; gap: 12px; margin-top: auto; padding-top: 24px; }
.contact-socials a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; transition: background .2s, transform .2s; }
.contact-socials a:hover { background: var(--accent); color: #fff; transform: translateY(-3px); }
.contact-form-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(26px, 4vw, 40px); box-shadow: 0 16px 40px rgba(15,58,71,.07); }
.contact-alert { border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; font-size: 14px; }
.contact-alert.ok { background: #e6f4ec; color: #1f7a4d; }
.contact-alert.ok i { margin-right: 6px; }
.contact-alert.err { background: #fdecec; color: var(--flag-red); }
.btn-contact-send { margin-top: 6px; background: var(--flag-red); color: #fff; border: 0; padding: 14px 30px; border-radius: 50px; font-weight: 800; font-size: 14px; letter-spacing: .5px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 10px 24px rgba(209,45,42,.3); }
.btn-contact-send:hover { background: #b9261f; }
.contact-map { margin-top: 60px; line-height: 0; }
.contact-map iframe { width: 100%; height: 380px; border: 0; filter: grayscale(.15); }
@media (max-width: 820px) { .contact-layout { grid-template-columns: 1fr; } }

/* ===================================================================
   BOOKING PAGE
   =================================================================== */
.booking-page { background: var(--cream); padding: 70px 0 90px; }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; align-items: start; }
.bk-step { display: flex; align-items: center; gap: 12px; font-family: 'Playfair Display', serif; color: var(--teal); font-size: 19px; margin: 0 0 18px; }
.bk-step:not(:first-child) { margin-top: 30px; padding-top: 26px; border-top: 1px dashed var(--line); }
.bk-step span { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.contact-form-card .btn-contact-send { margin-top: 24px; }
.bk-note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; display: flex; align-items: flex-start; gap: 8px; line-height: 1.6; }
.bk-note i { color: #1f7a4d; margin-top: 2px; }

/* Booking sidebar */
.bk-tour { padding: 0; overflow: hidden; }
.bk-tour-img { aspect-ratio: 16/10; overflow: hidden; }
.bk-tour-img img { width: 100%; height: 100%; object-fit: cover; }
.bk-tour-eyebrow { display: block; padding: 18px 22px 0; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--flag-red); }
.bk-tour-title { display: block; padding: 4px 22px 0; font-family: 'Playfair Display', serif; font-size: 17px; line-height: 1.3; color: var(--teal); }
.bk-tour-facts { list-style: none; padding: 14px 22px 0; margin: 0; }
.bk-tour-facts li { font-size: 13px; color: var(--ink-soft); padding: 5px 0; display: flex; align-items: center; gap: 8px; }
.bk-tour-facts i { color: var(--accent); width: 16px; }
.bk-tour-link { display: inline-flex; align-items: center; gap: 6px; margin: 12px 22px 22px; font-size: 13px; font-weight: 700; color: var(--teal); }
.bk-tour-link:hover { color: var(--accent); }
.bk-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: bk; }
.bk-steps li { position: relative; padding: 0 0 16px 38px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; counter-increment: bk; }
.bk-steps li:last-child { padding-bottom: 0; }
.bk-steps li::before { content: counter(bk); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); color: var(--teal); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.bk-steps li strong { color: var(--teal); }
@media (max-width: 900px) { .booking-layout { grid-template-columns: 1fr; } }

/* ===================================================================
   BOOKING THANK-YOU PAGE
   =================================================================== */
.thanks-page { background: var(--cream); padding: 80px 0; }
.thanks-card { max-width: 620px; margin: 0 auto; background: #fff; border-radius: 22px; padding: clamp(32px, 5vw, 56px); text-align: center; box-shadow: 0 24px 60px rgba(15,58,71,.1); }
.thanks-check { width: 86px; height: 86px; margin: 0 auto 20px; border-radius: 50%; background: #e6f4ec; color: #1f7a4d; display: flex; align-items: center; justify-content: center; font-size: 46px; box-shadow: 0 0 0 8px rgba(31,122,77,.08); }
.thanks-card .eyebrow { margin-bottom: 8px; }
.thanks-card h1 { font-family: 'Playfair Display', serif; font-weight: 800; color: var(--teal); font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; }
.thanks-lead { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin: 0 auto 30px; max-width: 470px; }
.thanks-lead strong { color: var(--teal); }
.thanks-summary { text-align: left; background: var(--paper); border-radius: 14px; padding: 18px 24px; margin: 0 0 28px; }
.ts-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.ts-row:last-child { border-bottom: 0; }
.ts-row span { color: var(--muted); white-space: nowrap; }
.ts-row strong { color: var(--teal); text-align: right; }
.ts-row strong.red { color: var(--flag-red); font-family: 'Playfair Display', serif; font-size: 18px; }
.thanks-next { text-align: left; margin: 0 0 30px; }
.thanks-next h4 { font-family: 'Playfair Display', serif; color: var(--teal); font-size: 18px; margin: 0 0 16px; }
.thanks-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.thanks-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--teal); color: #fff; padding: 13px 26px; border-radius: 50px; font-weight: 700; font-size: 14px; transition: transform .2s, background .2s; }
.thanks-btn:hover { background: #0a2b35; color: #fff; transform: translateY(-2px); }
.thanks-btn.alt { background: #fff; color: var(--teal); border: 2px solid var(--teal); }
.thanks-btn.alt:hover { background: var(--teal); color: #fff; }
.thanks-btn.wa { background: #25d366; }
.thanks-btn.wa:hover { background: #1da851; }
.thanks-note { margin: 24px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.thanks-note i { color: #1f7a4d; margin-right: 4px; }
.thanks-note strong { color: var(--ink); }

/* Newsletter feedback */
.newsletter-ok, .newsletter-err { border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; }
.newsletter-ok { background: rgba(255,255,255,.92); color: #1f7a4d; }
.newsletter-ok i { margin-right: 6px; }
.newsletter-err { background: rgba(255,255,255,.92); color: var(--flag-red); }
.discovery-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 24px; }
.dt-count { margin: 0; color: var(--ink-soft); font-size: 14px; }
.dt-count strong { color: var(--teal); }
.dt-sort { display: flex; align-items: center; gap: 8px; }
.dt-sort label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.dt-sort select { border: 1px solid var(--line); border-radius: 50px; padding: 8px 16px; font-size: 13px; color: var(--ink); background: #fff; cursor: pointer; outline: 0; }
.discovery-trip .tour-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1100px) { .discovery-trip .tour-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .discovery-trip .tour-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .discovery-trip .tour-grid { grid-template-columns: 1fr; } }
.tours-empty { grid-column: 1 / -1; text-align: center; padding: 50px 20px; color: var(--ink-soft); }
.tours-empty i { font-size: 46px; color: var(--accent); }
.tours-empty h4 { color: var(--teal); margin: 14px 0 6px; }
.tours-pagination { margin-top: 36px; display: flex; justify-content: center; }
.tours-pagination .pagination { display: flex; gap: 6px; list-style: none; padding: 0; }
.tours-pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--teal); background: #fff; text-decoration: none; }
.tours-pagination .active .page-link, .tours-pagination .page-item.active .page-link { background: var(--teal); color: #fff; border-color: var(--teal); }
.tours-pagination .disabled .page-link { opacity: .4; }

/* ===================================================================
   MOBILE BOTTOM BAR — fixed quick-action nav, only on small screens
   =================================================================== */
.mobile-bottom-bar { display: none; }

@media (max-width: 768px) {
    .mobile-bottom-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
        display: flex; justify-content: space-around; align-items: stretch;
        background: var(--teal);
        border-top: 2px solid rgba(212, 160, 73, .3);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, .22);
        padding: 10px 2px 14px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        min-height: 68px;
    }
    .mbb-item {
        flex: 1; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        padding: 4px 2px;
        color: rgba(255, 255, 255, .78);
        font-size: 11px; font-weight: 700; letter-spacing: .3px;
        text-decoration: none;
        text-align: center; line-height: 1.1;
        white-space: nowrap;
        transition: color .2s, transform .15s;
    }
    .mbb-item:hover, .mbb-item:focus { color: #fff; }
    .mbb-item:active { transform: scale(.92); }
    .mbb-item i { font-size: 22px; line-height: 1; }
    .mbb-item.is-active { color: #fff; }
    .mbb-item.is-active i { color: var(--gold, #d4a049); }
    .mbb-call i { color: #ffd84a; }
    .mbb-wa   i { color: #25d366; }

    /* Reserve space at the bottom of the page so content isn't covered by the bar */
    body { padding-bottom: 84px; }

    /* Hide the desktop floating WhatsApp button — duplicate of the bar's WhatsApp */
    .whatsapp-float { display: none !important; }

    /* Lift the cookie banner above the bottom bar so both are visible */
    .cookie-banner { bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 12px); }

    /* Mobile: prevent any rogue horizontal overflow from clipping the bottom bar's last item */
    html, body { overflow-x: hidden; }
    .cookie-banner .ck-text { min-width: 0; }
}