/* ══════════ BASE ══════════ */
html { scroll-behavior: smooth; }

/* Safety net: clip any stray horizontal overflow so phones never side-scroll.
   overflow-x: clip (not hidden) does NOT create a scroll container, so it
   leaves position: sticky headers/tabs working. Older browsers without `clip`
   fall back to `visible` (current behaviour) — no regression. */
html, body { overflow-x: clip; }

/* ── Thailand brand colour utilities ────────────────────────────────────────
   The precompiled /assets/tailwind.css on this microsite was built from the
   main East Marvel site's theme (which uses red/blue), so Tailwind JIT
   arbitrary-value classes like bg-[#14532d], hover:bg-[#14532d],
   hover:bg-[#0f3d22], border-[#14532d], focus:ring-[#14532d]/30, text-[#b8860b], and
   text-[#f2b807] don't exist — and text-[#14532d] is even mapped to a dark
   blue. We define them here so the Thailand green/gold/yellow utility
   classes used across the site render correctly.
*/
.bg-\[\#14532d\]               { background-color: #14532d !important; }
.hover\:bg-\[\#14532d\]:hover  { background-color: #14532d !important; }
.hover\:bg-\[\#0f3d22\]:hover  { background-color: #0f3d22 !important; }
.text-\[\#14532d\]             { color: #14532d !important; }
.hover\:text-\[\#14532d\]:hover{ color: #14532d !important; }
.border-\[\#14532d\]           { border-color: #14532d !important; }
.hover\:border-\[\#14532d\]:hover { border-color: #14532d !important; }
.focus\:border-\[\#14532d\]:focus { border-color: #14532d !important; }
.focus\:ring-\[\#14532d\]\/30:focus {
    --tw-ring-color: rgba(20, 83, 45, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(20, 83, 45, 0.3);
}
.text-\[\#b8860b\] { color: #b8860b !important; }
.text-\[\#f2b807\] { color: #f2b807 !important; }

.nav-tagline-black-edge {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000;
}

/* Mobile header and menu */
#mobile-menu {
    z-index: 70;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
body.em-mobile-menu-open {
    overflow: hidden;
}
@media (max-width: 430px) {
    header nav {
        gap: 0.5rem;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    header nav > a:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }
    header nav > a:first-child img {
        width: 2rem !important;
        height: 2rem !important;
        margin-right: 0.5rem !important;
    }
    header nav > a:first-child > span {
        min-width: 0;
    }
    header nav > a:first-child > span > span:first-child,
    header nav > a:first-child > span > span:last-child {
        max-width: calc(100vw - 6.5rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    header nav > a:first-child > span > span:first-child {
        font-size: 1rem !important;
    }
    header nav > a:first-child > span > span:last-child {
        font-size: 0.625rem !important;
        letter-spacing: 0.04em !important;
    }
    #mobile-menu-button {
        flex: 0 0 auto;
        padding: 0.35rem;
    }
}
@media (max-width: 360px) {
    header nav > a:first-child > span > span:last-child {
        display: none;
    }
}

/* ══════════ HERO ══════════ */
/* Hero height is capped by page INTENT: the home page is a browse-style hub,
   so the photo sells the destination while the trust bar and the first tour
   cards stay above the fold. It used to be a full 100vh, which put literally
   nothing else on screen (measured: hero 900px in a 900px viewport). */
.hero-carousel {
    position: relative;
    height: 55vh;
    min-height: 420px;
    max-height: 520px;
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    background-size: cover;
    background-position: center;
    transform: translateZ(0); 
    backface-visibility: hidden;
    will-change: opacity;
}
.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(0,0,0,0.1) 0%,
        rgba(0,0,0,0.25) 40%,
        rgba(20,83,45,0.75) 100%
    );
}
.hero-slide.active { opacity: 1; }

.hero-content {
    position: absolute;
    bottom: 12%;
    left: 5%;
    z-index: 30;
    max-width: 660px;
}
@media (min-width: 768px) {
    .hero-content { left: 8%; bottom: 15%; }
}
.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.25);
}
@media (min-width: 768px) {
    .hero-content h1 { font-size: 3rem; }
}
.hero-content p {
    color: rgba(255,255,255,0.85);
    font-size: 1.05rem;
    margin-bottom: 1.8rem;
    max-width: 500px;
    line-height: 1.6;
}
.hero-cta {
    display: inline-block;
    padding: 14px 36px;
    background: linear-gradient(135deg, #f2b807 0%, #d4a005 100%);
    color: #14532d;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(242,184,7,0.35);
    letter-spacing: 0.3px;
}
.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(242,184,7,0.5);
}

/* Carousel controls */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.carousel-arrow:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-50%) scale(1.06);
}
.carousel-arrow.prev { left: 24px; }
.carousel-arrow.next { right: 24px; }
@media (max-width: 767px) {
    .carousel-arrow { display: none; }
}

.carousel-dots {
    position: absolute;
    bottom: 36px;
    right: 5%;
    display: flex;
    gap: 10px;
    z-index: 20;
}
@media (min-width: 768px) {
    .carousel-dots { right: 8%; }
}
.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s;
}
.carousel-dot.active {
    background: #f2b807;
    border-color: #f2b807;
    transform: scale(1.3);
}

.scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    animation: scrollBounce 2s infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}
@media (max-width: 767px) {
    .hero-carousel {
        height: 52vh;
        height: 52svh;          /* svh: excludes the mobile URL bar */
        min-height: 360px;
        max-height: 420px;
    }
    .hero-content {
        left: 1rem;
        right: 1rem;
        bottom: 5.75rem;
        max-width: none;
    }
    .hero-content h1 {
        font-size: clamp(1.7rem, 8vw, 2.1rem);
        line-height: 1.12;
        margin-bottom: 0.75rem;
    }
    .hero-content p {
        font-size: 0.98rem;
        line-height: 1.55;
        margin-bottom: 1.25rem;
        max-width: none;
    }
    .hero-cta {
        width: 100%;
        max-width: 18rem;
        text-align: center;
        padding: 0.85rem 1.25rem;
    }
    .carousel-dots {
        left: 1rem;
        right: auto;
        bottom: 1.5rem;
    }
    .scroll-hint {
        display: none;
    }
}
@media (max-width: 374px) {
    .hero-content h1 {
        font-size: 2rem;
    }
}

/* ══════════ TRUST BAR ══════════ */
/* ── Home hero copy ──────────────────────────────────────────────────────
   A gold kicker over a keyword H1, the old slogan folded into the subtitle,
   and a two-button row. Hand-written because the committed tailwind.css has
   no build step and carries none of what this needs: text-5xl,
   tracking-widest, border-white/50 and min-h-[44px] are all absent, so
   utility classes here would be silent no-ops. The page already had two such
   ghosts — the trust bar's max-w-5xl and the eyebrows' tracking-[3px] never
   did anything. .hero-content h1/p are shared with other heroes, so the
   home-only pieces are scoped to their own class names. */
.hero-content .hero-kicker {
    color: #f2b807;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.3;
    max-width: none;
    margin: 0 0 0.7rem;
}
.hero-content .hero-sub {
    font-size: 1rem;
    max-width: 560px;
    margin-bottom: 1.5rem;
}
.hero-content .hero-sub strong {
    color: #fff;
    font-weight: 600;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
.hero-cta--outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.85);
    color: #fff;
    box-shadow: none;
    padding: 12px 34px;
}
.hero-cta--outline:hover {
    background: #fff;
    border-color: #fff;
    color: #14532d;
    box-shadow: 0 6px 28px rgba(255,255,255,0.25);
}

/* ── Trust bar items ─────────────────────────────────────────────────────
   Glyph + text items instead of pipe separators, with the ASTA mark last.
   The mark is teal and grey on transparency, so it sits on a small white
   chip to stay legible on the green band. */
.trust-list {
    list-style: none;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.5rem;
}
.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    white-space: nowrap;
}
.trust-glyph {
    color: #f2b807;
    font-size: 0.95em;
    line-height: 1;
}
.trust-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 6px;
    padding: 3px 5px;
}
.trust-logo img {
    display: block;
    width: auto;
    height: 1.75rem;
}

/* ── Island hopping spotlight ────────────────────────────────────────────
   Editorial split (copy 52 / photo 48) after the tour grid. The photo frame
   matches .dest-hero-figure on the city guides. Under 900px the photo stacks
   first, as it does there. */
.island-spotlight-inner {
    display: grid;
    grid-template-columns: 52fr 48fr;
    align-items: center;
    gap: 3rem;
}
.island-eyebrow {
    color: #b8860b;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}
.island-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.15;
    color: #14532d;
    margin: 0 0 1rem;
}
.island-lead {
    color: #4b5563;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 36rem;
    margin: 0 0 1.75rem;
}
.island-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.5rem;
}
.island-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 1.75rem;
    background: #14532d;
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(15,42,26,0.25);
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.island-btn:hover {
    background: #0f3d22;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15,42,26,0.3);
}
.island-link {
    color: #14532d;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(20,83,45,0.35);
    transition: color 0.2s, border-color 0.2s;
}
.island-link:hover {
    color: #b8860b;
    border-bottom-color: #b8860b;
}
.island-spotlight-frame {
    aspect-ratio: 4 / 3;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #eef3f8;
    box-shadow: 0 25px 50px -12px rgba(15,42,26,0.35);
}
.island-spotlight-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 900px) {
    .island-spotlight-inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .island-spotlight-frame {
        order: -1;
    }
}

.trust-bar {
    background: #14532d;
    color: rgba(255,255,255,0.9);
    padding: 18px 0;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.trust-divider {
    color: #f2b807;
    margin: 0 12px;
    font-weight: 300;
}
@media (min-width: 768px) {
    .trust-divider { margin: 0 20px; }
}
@media (max-width: 767px) {
    .trust-bar {
        padding: 0.9rem 0;
        font-size: 0.78rem;
        line-height: 1.55;
    }
    .trust-bar .max-w-5xl {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem 0.6rem;
    }
    .trust-divider {
        display: none;
    }
}

/* ══════════ TOUR CARDS ══════════ */
.tour-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: block;
    text-decoration: none;
    transform: translateZ(0);
    will-change: transform, box-shadow;
}

.tour-card:hover {
    transform: translateY(-6px) translateZ(0);
    box-shadow: 0 20px 44px -10px rgba(20,83,45,0.25);
}

.tour-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
    transform: translateZ(0);
    will-change: transform;
}

.tour-card:hover .tour-card-img {
    transform: scale(1.05) translateZ(0);
}

.tour-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.8) 0%,
        rgba(0,0,0,0.3) 50%,
        rgba(0,0,0,0.02) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    color: white;
}

.tour-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(20,83,45,0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transform: translateZ(0);
    color: white;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    z-index: 5;
}

.tour-card-category {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #f2b807;
    margin-bottom: 6px;
}

.tour-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0;
}

.tour-card-desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 14px;
    line-height: 1.45;
}

.tour-card-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.tour-card-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: #f2b807;
}

.tour-card-price small {
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    margin-left: 4px;
}

.tour-card-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s;
}

.tour-card:hover .tour-card-link { 
    color: #f2b807; 
}

/* Filter */
.filter-btn {
    transition: all 0.25s ease;
    border: 1px solid transparent;
}
.filter-btn.active {
    background: #14532d !important;
    color: white !important;
    border-color: #14532d;
    box-shadow: 0 2px 10px rgba(20,83,45,0.3);
}
.filter-btn:not(.active):hover {
    border-color: #14532d;
    color: #14532d;
}

/* ---------- WHY SECTION ---------- */
.why-section {
    background-color: #1a3252;
    background-image: radial-gradient(circle at top right, rgba(242,184,7,0.08) 0%, transparent 60%), linear-gradient(135deg, #14532d 0%, #051a0f 100%);
    color: white;
    position: relative;
    overflow: hidden;
    margin-top: 5rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
}


.why-subtitle {
    color: #f2b807;
    font-size: 0.95rem; 
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.why-icon-box {
    width: 52px;
    height: 52px;
    background: rgba(242,184,7,0.1);
    border: 1px solid rgba(242,184,7,0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ══════════ TESTIMONIALS ══════════ */
.testimonial-card {
    background: white;
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.06);
    position: relative;
}
.testimonial-card::before {
    content: "\201C";
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: rgba(20,83,45,0.08);
    position: absolute;
    top: 10px;
    left: 22px;
    line-height: 1;
}
.stars { color: #f2b807; font-size: 0.85rem; letter-spacing: 2px; }

/* ══════════ VISA ══════════ */
.visa-accordion {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.visa-accordion:hover { border-color: rgba(20,83,45,0.3); }

/* ══════════ SCROLL REVEAL ══════════ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
/* ══════════ CUSTOM BUTTONS ══════════ */
.dest-btn {
    border: 2px solid #14532d;
    color: #14532d;
    background-color: transparent;
}
.dest-btn:hover {
    background-color: #14532d;
    color: #ffffff;
}

/* ══════════ FOOTER ══════════ */
.site-footer {
    background-color: #1e293b;
    color: #f8fafc;
}
.footer-brand {
    color: #f2b807; 
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.footer-heading {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.footer-link {
    color: #94a3b8; 
    transition: color 0.3s ease;
}
.footer-link:hover {
    color: #ffffff; 
}
.footer-text {
    color: #94a3b8;
    line-height: 1.6;
}
/* ══════════ 6 · CTA SECTION ══════════ */
.cta-section {
    
    background-color: #1a3252;
    background-image: radial-gradient(circle at top right, rgba(242,184,7,0.08) 0%, transparent 60%), linear-gradient(135deg, #14532d 0%, #051a0f 100%);
    color: white;
   
    padding-top: 6rem;
    padding-bottom: 6rem;
    position: relative;
    overflow: hidden;
}

/* Solid page top banner typography (matches destination marketing hero). Skip on photo heroes. */
.page-banner-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}
.page-banner-lead {
    color: #cbd5e1;
    line-height: 1.6;
}
.page-banner-note {
    color: rgba(203, 213, 225, 0.95);
    line-height: 1.65;
}
.page-banner-side-label {
    color: rgba(203, 213, 225, 0.9);
}
.page-banner-side-muted {
    color: rgba(203, 213, 225, 0.78);
}
.cta-section.page-banner--compact {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.cta-section.page-banner--py16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
@media (max-width: 767px) {
    /* Home hero on phones: the keyword H1 is longer than the slogan it
       replaced, so the kicker, subtitle and both buttons step down to stay
       inside the 55vh hero. These live in the LAST 767px block on purpose —
       this file has four, and only the last one wins. */
    .hero-content .hero-kicker {
        font-size: 0.66rem;
        margin-bottom: 0.4rem;
    }
    .hero-content .hero-sub {
        font-size: 0.86rem;
        line-height: 1.45;
        margin-bottom: 0.8rem;
    }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        max-width: 22rem;
    }
    .hero-actions .hero-cta {
        width: 100%;
        min-height: 44px;
        padding: 10px 1rem;
        /* 16px wrapped "Design a Custom Journey →" onto a second line at 375px,
           leaving one 44px button beside one 72px button. */
        font-size: 0.9rem;
        text-align: center;
        justify-content: center;
    }
    .trust-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem 0.75rem;
    }
    .trust-item {
        white-space: normal;
        text-align: left;
    }
    .trust-item--logo {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .cta-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .cta-section.page-banner--compact {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .cta-section.page-banner--py16 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .page-banner-title {
        overflow-wrap: anywhere;
    }
    .page-banner-lead {
        font-size: 1rem !important;
    }
    main article[id^="pkg-"] {
        gap: 1.25rem;
        padding-bottom: 2.5rem;
        scroll-margin-top: 5rem;
    }
    main article[id^="pkg-"] img {
        height: 13rem;
    }
    main article[id^="pkg-"] h2 {
        font-size: 1.35rem;
        line-height: 1.25;
    }
    #contact-form {
        padding: 1.25rem !important;
        border-radius: 0.75rem !important;
    }
    #contact-form .grid {
        gap: 1.25rem !important;
    }
    #contact-form textarea {
        min-height: 10rem !important;
    }
}

/* Package detail — closing “Ready to start…” band: no gradient / brand fill */
.cta-section.cta-section--plain {
    background-color: #f8fafc;
    background-image: none;
    color: #0f172a;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.cta-section.cta-section--plain .page-banner-title {
    color: #1e293b;
}
.cta-section.cta-section--plain .page-banner-lead {
    color: #475569;
}
.cta-section.cta-section--plain .page-banner-note {
    color: #64748b;
}

/* Take The Next Step — supporting copy */
.cta-prose {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}
.cta-prose-lead {
    font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.45;
    letter-spacing: 0.02em;
    margin: 0 0 1rem;
}
.cta-prose-body {
    font-size: clamp(0.9375rem, 1.9vw, 1.0625rem);
    color: #cbd5e1;
    line-height: 1.7;
    margin: 0 0 1.25rem;
}
.cta-prose-body strong {
    color: #f2b807;
    font-weight: 700;
}
/* Opens floating trip list (includes/trip-cart.js) */
.cta-prose-trip-list-btn {
    font: inherit;
    font-size: inherit;
    font-weight: 700;
    color: #f2b807;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    display: inline;
    vertical-align: baseline;
    transition: color 0.2s ease;
}
.cta-prose-trip-list-btn:hover {
    color: #fff;
}
.cta-prose-trip-list-btn:focus-visible {
    outline: 2px solid #f2b807;
    outline-offset: 2px;
    border-radius: 2px;
}
.cta-prose-link {
    color: #f2b807;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 0.2s ease;
}
.cta-prose-link:hover {
    color: #fff;
}
.cta-prose-note {
    font-size: clamp(0.875rem, 1.65vw, 1rem);
    color: rgba(203, 213, 225, 0.9);
    line-height: 1.65;
    margin: 0;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.cta-prose-note strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}


.cta-button-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 2.5rem;
}
@media (min-width: 640px) {
    .cta-button-group:not(.cta-button-group--split) {
        flex-direction: row;
        gap: 1.5rem;
    }
}

/* Take The Next Step: three browse buttons in a row; Contact Us primary below (always visible) */
.cta-button-group--split {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 1rem;
}
.cta-button-group-browse {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
}
.cta-cta-contact {
    flex-shrink: 0;
    width: 100%;
    max-width: 22rem;
}
@media (min-width: 640px) {
    .cta-button-group-browse {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
        align-items: stretch;
    }
    .cta-button-group-browse .cta-btn {
        min-width: 0;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 44px;
        padding: 10px 6px;
        font-size: 0.75rem;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
        box-sizing: border-box;
    }
    .cta-cta-contact {
        width: auto;
        min-width: min(240px, 100%);
        max-width: none;
    }
}
@media (min-width: 900px) {
    .cta-button-group-browse {
        gap: 0.65rem;
    }
    .cta-button-group-browse .cta-btn {
        padding: 12px 12px;
        font-size: 0.875rem;
        min-height: 48px;
    }
}
@media (max-width: 639px) {
    .cta-button-group-browse .cta-btn {
        width: 100%;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
    }
}


.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 36px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    width: 100%;
}
@media (min-width: 640px) {
    .cta-btn {
        width: auto;
        min-width: 240px; 
    }
}


.cta-btn.primary {
    background: linear-gradient(135deg, #f2b807 0%, #d4a005 100%);
    color: #14532d;
    box-shadow: 0 4px 20px rgba(242,184,7,0.35);
    border: 2px solid transparent;
}
.cta-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(242,184,7,0.5);
}


.cta-btn.secondary {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.4);
}
.cta-btn.secondary:hover {
    background: white;
    color: #14532d;
    border-color: white;
    transform: translateY(-2px);
}