/* ==========================================================================
   TerraBlaze — "Cinema" theme                                css/cinema.css
   --------------------------------------------------------------------------
   A dark, photograph-led, editorial skin for the whole site: near-black
   canvas, hairline rules, huge uppercase geometric type, vertical rails,
   white "pill" accents and a single ember accent.

   It is a LAYER, not a rewrite. Every page still loads css/styles.css and its
   own sheet first; this file loads last, re-points the design tokens those
   sheets read, and restyles components on top. Delete the <link> and the old
   light theme returns.

   Contents
     1  Tokens                      8  Section scaffolding
     2  Base + typography           9  Cards, forms, tables, accordions
     3  Header + navigation        10  Page-hero families
     4  Mobile menu overlay        11  Destination (dt-*) pages
     5  Rails, frame, cursor,      12  Expeditions / Peaks (exp-*, pk-*)
        preloader, page curtain    13  Guides, International, Safari
     6  Buttons + links            14  Blog, legal, FAQ, reviews, about
     7  Reveal + motion helpers    15  Footer, accreditation, assistant
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    color-scheme: dark;

    /* Canvas */
    --cx-bg: #060606;
    --cx-bg-2: #0b0b0c;
    --cx-bg-3: #121214;
    --cx-bg-4: #19191c;

    /* Ink */
    --cx-fg: #f4f1ea;
    --cx-fg-2: rgba(244, 241, 234, 0.76);
    --cx-fg-3: rgba(244, 241, 234, 0.64);
    --cx-fg-4: rgba(244, 241, 234, 0.5);

    /* Rules */
    --cx-line: rgba(255, 255, 255, 0.14);
    --cx-line-2: rgba(255, 255, 255, 0.08);
    --cx-line-3: rgba(255, 255, 255, 0.24);

    /* Accent — ember. Fills take BLACK text (7:1); on-dark text uses it directly. */
    --cx-ember: #ff6b34;
    --cx-ember-2: #ff8f61;
    --cx-ember-deep: #d9501f;

    /* Motion */
    --cx-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --cx-ease-io: cubic-bezier(0.76, 0, 0.24, 1);
    --cx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Type */
    --cx-font: 'Montserrat', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Layout */
    --cx-gutter: clamp(1.25rem, 4vw, 3.5rem);
    --cx-header-h: 76px;

    /* ---- Legacy tokens, re-pointed ----------------------------------------
       styles.css and the page sheets read these. "primary" was the dark ink of
       the light theme (mostly used as TEXT), so it becomes the light ink; the
       few places that used it as a dark surface are re-scoped in section 9. */
    --primary: var(--cx-fg);
    --primary-dark: #040404;
    --primary-light: #1d1d20;
    --accent: var(--cx-ember);
    --accent-hover: var(--cx-ember-2);
    --accent-soft: #ffd7c4;
    --clay: var(--cx-ember-deep);
    --clay-hover: #b94416;
    --bg-light: var(--cx-bg);
    --bg-white: var(--cx-bg-2);
    --text-dark: var(--cx-fg);
    --text-muted: var(--cx-fg-3);
    --text-light: #f7f4ec;
    --border-color: var(--cx-line);
    --ink: var(--cx-bg-3);
    --ink-dark: #040404;
    --paper: var(--cx-bg-2);
    --stone: var(--cx-bg);
    --line: var(--cx-line);
    --moss: #1d1d20;

    --font-primary: var(--cx-font);
    --font-numbers: var(--cx-font);
    --font-display: var(--cx-font);
    --dt-serif: var(--cx-font);

    --weight-heading: 800;
    --track-tight: -0.02em;
    --track-snug: -0.01em;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-premium: none;
    --shadow-glass: none;
    --shadow-gold: none;
    --glass-bg: var(--cx-bg-2);
    --glass-bg-dark: var(--cx-bg);
    --glass-border: var(--cx-line);
    --glass-card: var(--cx-bg-2);
    --glass-card-border: var(--cx-line);

    --border-radius-sm: 0;
    --border-radius-md: 0;
    --border-radius-lg: 0;
    --ease-premium: var(--cx-ease);
    --max-width: 1320px;
}


/* ==========================================================================
   2. BASE + TYPOGRAPHY
   ========================================================================== */
html {
    background: var(--cx-bg);
    scroll-padding-top: calc(var(--cx-header-h) + 1rem);
}

body {
    font-family: var(--cx-font);
    font-weight: 400;
    background: var(--cx-bg);
    color: var(--cx-fg-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Page-wide film grain — barely there, but it takes the "digital" edge off
   large flat blacks. Static (no animation): zero ongoing cost. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
    background: var(--cx-ember);
    color: #050505;
}

a { transition: color 0.25s var(--cx-ease), opacity 0.25s var(--cx-ease); }

img { -webkit-user-drag: none; }

:focus-visible {
    outline: 2px solid var(--cx-ember);
    outline-offset: 3px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cx-bg); }
::-webkit-scrollbar-thumb {
    background: #2a2a2d;
    border: 2px solid var(--cx-bg);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--cx-ember-deep); }
html { scrollbar-color: #2a2a2d var(--cx-bg); scrollbar-width: thin; }

/* Headings: huge, uppercase, geometric. h3 and below stay mixed-case. */
h1, h2 {
    font-family: var(--cx-font);
    text-transform: uppercase;
    letter-spacing: -0.015em;
    line-height: 1.04;
    color: var(--cx-fg);
}

h1[class], h2[class] { font-weight: 800; }

h3, h4, h5, h6 {
    font-family: var(--cx-font);
    color: var(--cx-fg);
    letter-spacing: -0.005em;
}

strong, b { font-weight: 700; color: var(--cx-fg); }

p, li { color: inherit; }

/* Eyebrows — small, wide-tracked, flanked by a hairline */
.section-subtitle,
.dt-eyebrow,
.exp-eyebrow,
.intl-eyebrow,
.jng-eyebrow,
.gd-eyebrow,
.pk-eyebrow,
.page-hero-eyebrow,
.dt-hero-eyebrow,
.hero-tag,
.mega-eyebrow {
    font-family: var(--cx-font);
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase;
    color: var(--cx-ember) !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}

.section-subtitle::before,
.section-subtitle::after,
.dt-eyebrow::before,
.dt-eyebrow::after {
    width: 28px !important;
    height: 1px !important;
    background: var(--cx-ember) !important;
    opacity: 0.8;
}

.number,
.trust-item .number {
    font-family: var(--cx-font);
    font-variant-numeric: tabular-nums;
}

/* Vertical text utility — used by rails and decorative labels */
.cx-vert {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.cx-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}


/* ==========================================================================
   3. HEADER + NAVIGATION
   ========================================================================== */
header {
    padding: 1.15rem 0;
    background: transparent;
    transition: padding 0.45s var(--cx-ease), transform 0.6s var(--cx-ease);
}

/* Scrim over the hero so nav text always reads */
header::before {
    background: linear-gradient(to bottom, rgba(4, 4, 4, 0.72), rgba(4, 4, 4, 0));
    height: 150%;
    bottom: auto;
}

/* The solid bar lives on ::after so the header itself carries no
   backdrop-filter (that would trap the fixed mobile overlay inside it). */
header::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(6, 6, 6, 0.74);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--cx-line-2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s var(--cx-ease);
}

header.scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
    padding: 0.7rem 0;
}

header.scrolled::after { opacity: 1; }
header.scrolled::before { opacity: 0; }

/* Hide on scroll-down, return on scroll-up (class set by cinema.js) */
header.cx-hide { transform: translateY(-110%); }

.nav-container { max-width: min(1560px, 100%); }

/* Logo */
.logo-img {
    height: 36px;
    filter: none !important;
}

.logo-title {
    font-family: var(--cx-font);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff !important;
    text-shadow: none !important;
}

.logo-tagline {
    font-family: var(--cx-font);
    font-weight: 600;
    font-size: 0.56rem;
    letter-spacing: 0.34em;
    color: var(--cx-ember);
}

/* Links */
.nav-link {
    font-family: var(--cx-font);
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.035em;
    color: rgba(255, 255, 255, 0.74);
    text-shadow: none !important;
    background: transparent !important;
}

header.scrolled .nav-link { color: rgba(255, 255, 255, 0.74); }

.nav-link:hover,
header.scrolled .nav-link:hover {
    color: #fff !important;
    background: transparent !important;
}

.nav-link::after {
    height: 1px;
    bottom: 0.1rem;
    border-radius: 0;
    background: #fff;
}

.nav-link.active,
.nav-link.active:hover {
    color: #fff !important;
    font-weight: 600;
}

.nav-link.active::after { background: var(--cx-ember); height: 2px; }

/* "Enquire Now" — hairline pill, fills white on hover */
.nav-btn {
    position: relative;
    overflow: hidden;
    margin-left: 0.6rem;
    padding: 0.62rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 0;
    background: transparent;
    color: #fff !important;
    font-family: var(--cx-font);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    box-shadow: none !important;
    transition: color 0.4s var(--cx-ease), border-color 0.4s var(--cx-ease), transform 0.4s var(--cx-ease);
    isolation: isolate;
}

.nav-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    left: 0 !important;
    z-index: -1;
    background: #fff !important;
    transform: translateY(101%) !important;
    transition: transform 0.5s var(--cx-ease);
    animation: none !important;
}

.nav-btn:hover {
    background: transparent;
    color: #050505 !important;
    border-color: #fff;
    transform: none;
    box-shadow: none;
}

.nav-btn:hover::before { transform: translateY(0) !important; }

/* Mega dropdowns — dark glass */
.mega-panel {
    background: rgba(8, 8, 9, 0.94);
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
    border: 1px solid var(--cx-line);
    padding: 1.6rem;
}

.mega-panel::before { background: var(--cx-ember); height: 1px; }

.mega-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--cx-line-2);
}

.mega-card:hover,
.mega-card:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--cx-ember);
    box-shadow: none;
}

.mega-card-icon {
    background: rgba(255, 107, 52, 0.12);
    border: 1px solid rgba(255, 107, 52, 0.3);
    border-radius: 0;
}

.mega-card:hover .mega-card-icon { background: var(--cx-ember); }
.mega-card-icon svg { fill: var(--cx-ember); }
.mega-card:hover .mega-card-icon svg { fill: #050505; }

.mega-card-title { color: #fff; font-weight: 700; }
.mega-card-desc { color: var(--cx-fg-3); }

.mega-card-count {
    background: transparent;
    border: 1px solid var(--cx-line);
    color: var(--cx-fg-2);
    border-radius: 0;
}

.mega-all {
    background: #fff;
    color: #050505;
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.mega-all:hover,
.mega-all:focus-visible { background: var(--cx-ember); color: #050505; }


/* ==========================================================================
   4. MOBILE MENU OVERLAY   (<= 1200px — the breakpoint styles.css already uses)
   ========================================================================== */

/* Menu button: a square holding a 2×2 grid of dots, as in the reference */
.mobile-nav-toggle {
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background 0.35s var(--cx-ease), border-color 0.35s var(--cx-ease);
}

.mobile-nav-toggle:hover { background: rgba(255, 255, 255, 0.2); }

.mobile-nav-toggle .hamburger-line { display: none; }

.mobile-nav-toggle::before,
.mobile-nav-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    transition: transform 0.55s var(--cx-ease), width 0.45s var(--cx-ease), height 0.45s var(--cx-ease), box-shadow 0.45s var(--cx-ease), margin 0.45s var(--cx-ease), border-radius 0.45s var(--cx-ease);
}

.mobile-nav-toggle::before {
    width: 4px;
    height: 4px;
    margin: -6.5px 0 0 -6.5px;
    border-radius: 50%;
    box-shadow: 9px 0 0 #fff, 0 9px 0 #fff, 9px 9px 0 #fff;
}

.mobile-nav-toggle::after {
    width: 22px;
    height: 2px;
    margin: -1px 0 0 -11px;
    transform: rotate(-45deg) scaleX(0);
}

.mobile-nav-toggle.active::before {
    width: 22px;
    height: 2px;
    margin: -1px 0 0 -11px;
    border-radius: 0;
    box-shadow: none;
    transform: rotate(45deg);
}

.mobile-nav-toggle.active::after { transform: rotate(-45deg) scaleX(1); }

@media (max-width: 1200px) {
    /* The drawer becomes a full-screen overlay. Sizes are explicit (not inset:0)
       because the header is the containing block for fixed children only when it
       has a filter — it does not, but explicit is safe either way. */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        right: auto;
        width: 100vw;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        padding: calc(var(--cx-header-h) + 1rem) var(--cx-gutter) 3rem;
        background: #050505;
        border: 0;
        box-shadow: none;
        justify-content: flex-start;
        gap: 0;
        counter-reset: cxnav;
        transform: translateY(-101%);
        visibility: hidden;
        transition: transform 0.85s var(--cx-ease-io), visibility 0s linear 0.85s;
        overscroll-behavior: contain;
    }

    .nav-links.active {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.85s var(--cx-ease-io), visibility 0s;
    }

    .nav-links > li {
        counter-increment: cxnav;
        border-bottom: 1px solid var(--cx-line-2);
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.5s var(--cx-ease), transform 0.7s var(--cx-ease);
    }

    .nav-links.active > li {
        opacity: 1;
        transform: none;
        transition-delay: calc(0.28s + var(--i, 0) * 0.045s);
    }

    .nav-links > li:nth-child(1) { --i: 0; }
    .nav-links > li:nth-child(2) { --i: 1; }
    .nav-links > li:nth-child(3) { --i: 2; }
    .nav-links > li:nth-child(4) { --i: 3; }
    .nav-links > li:nth-child(5) { --i: 4; }
    .nav-links > li:nth-child(6) { --i: 5; }
    .nav-links > li:nth-child(7) { --i: 6; }
    .nav-links > li:nth-child(8) { --i: 7; }
    .nav-links > li:nth-child(9) { --i: 8; }
    .nav-links > li:nth-child(10) { --i: 9; }
    .nav-links > li:nth-child(11) { --i: 10; }
    .nav-links > li:nth-child(12) { --i: 11; }
    .nav-links > li:nth-child(13) { --i: 12; }

    .nav-links > li:last-child { border-bottom: 0; margin-top: 1.6rem; }

    .nav-link {
        display: flex;
        align-items: baseline;
        gap: 1.1rem;
        padding: 0.85rem 0 !important;
        font-size: clamp(1.35rem, 5.2vw, 2.1rem);
        font-weight: 800;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        color: #fff !important;
    }

    .nav-link::before {
        content: counter(cxnav, decimal-leading-zero);
        min-width: 2.4em;
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.22em;
        color: var(--cx-ember);
        transform: translateY(-0.55em);
    }

    .nav-link::after { display: none; }
    .nav-link.active { color: var(--cx-ember) !important; }

    .nav-btn {
        display: inline-flex;
        margin-left: 0;
        padding: 1rem 1.8rem;
        font-size: 0.74rem;
    }

    .nav-btn::before { display: none !important; }

    .nav-sub-toggle {
        top: 0.9rem;
        right: 0;
        width: 2.4rem;
        height: 2.4rem;
        background: transparent;
        border: 1px solid var(--cx-line);
        border-radius: 0;
    }

    .nav-sub-toggle svg { fill: #fff; }

    .mega-panel {
        background: transparent;
        border: 0;
        padding: 0 0 1rem;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .mega-panel::before { display: none; }

    .mega-card {
        background: transparent;
        border: 0;
        border-top: 1px solid var(--cx-line-2);
        padding: 0.8rem 0;
    }

    .mega-card:hover,
    .mega-card:focus-visible { background: transparent; }

    .mega-card-title { color: #fff; font-size: 1rem; }
    .mega-all { margin-top: 0.5rem; }

    body.cx-menu-open { overflow: hidden; }

    /* The logo stays visible above the full-screen menu */
    body.cx-menu-open .logo { position: relative; z-index: 1002; }
}


/* ==========================================================================
   5. RAILS, FRAME, CURSOR, PRELOADER, PAGE CURTAIN
   Elements are created by js/cinema.js. All decorative: aria-hidden.
   ========================================================================== */

/* Scroll progress (main.js creates .scroll-progress) */
.scroll-progress {
    height: 2px;
    background: var(--cx-ember);
    box-shadow: none;
    z-index: 1300;
}

/* Frame — two hairlines down the viewport edges */
.cx-frame {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    display: none;
}

.cx-frame::before,
.cx-frame::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.11) 14%, rgba(255, 255, 255, 0.11) 86%, transparent);
}

.cx-frame::before { left: clamp(10px, 1.5vw, 26px); }
.cx-frame::after { right: clamp(10px, 1.5vw, 26px); }

/* Left rail: "01 ─── 07" + section label + prev/next */
.cx-rail {
    position: fixed;
    left: clamp(16px, 2.2vw, 40px);
    top: 50%;
    z-index: 85;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    transform: translateY(-50%);
    color: var(--cx-fg-3);
    transition: opacity 0.5s var(--cx-ease);
}

.cx-rail.is-off { opacity: 0; pointer-events: none; }

.cx-rail__txt {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.cx-rail__now {
    display: inline-block;
    min-width: 2ch;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.cx-rail__bar {
    position: relative;
    width: 1px;
    height: 44px;
    background: var(--cx-line);
}

.cx-rail__bar i {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--cx-ember);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.6s var(--cx-ease);
}

.cx-rail__total { color: var(--cx-fg-4); font-variant-numeric: tabular-nums; }

.cx-rail__label {
    /* fixed length (the text runs vertically), so changing label never moves the arrows below it */
    height: 15rem;
    color: var(--cx-fg-2);
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-rail__nav { display: flex; flex-direction: column; gap: 0.55rem; }

.cx-rail__btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--cx-line-3);
    border-radius: 50%;
    background: rgba(5, 5, 5, 0.4);
    color: #fff;
    cursor: pointer;
    transition: background 0.4s var(--cx-ease), color 0.4s var(--cx-ease), border-color 0.4s var(--cx-ease), transform 0.4s var(--cx-ease);
}

.cx-rail__btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-rail__btn:hover { background: #fff; color: #050505; border-color: #fff; }
.cx-rail__btn[disabled] { opacity: 0.3; pointer-events: none; }

/* Right rail: "Questions? Write to us:" — vertical, like the reference */
.cx-mail {
    position: fixed;
    right: clamp(16px, 2.2vw, 40px);
    top: 50%;
    z-index: 85;
    display: none;
    align-items: center;
    gap: 0.8rem;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    white-space: nowrap;
    color: var(--cx-fg-3);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: opacity 0.5s var(--cx-ease);
}

.cx-mail.is-off { opacity: 0; pointer-events: none; }
.cx-mail span { display: inline; }
.cx-mail a { color: #fff; font-weight: 700; letter-spacing: 0.12em; text-transform: none; font-size: 0.7rem; }
.cx-mail a:hover { color: var(--cx-ember); }

@media (min-width: 1340px) and (hover: hover) {
    .cx-frame { display: block; }
    .cx-rail { display: flex; }
    .cx-mail { display: flex; }
}

/* Scroll lock while a full-screen layer is up (set by cinema.js) */
html.cx-lock, html.cx-lock body { overflow: hidden !important; }


/* ==========================================================================
   6. BUTTONS + LINKS
   ========================================================================== */
.btn,
.dt-btn,
.form-submit-btn,
.email-large-btn,
.newsletter-btn,
.cx-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.05rem 2.2rem;
    border: 1px solid #fff;
    border-radius: 0 !important;
    background: #fff;
    color: #050505;
    font-family: var(--cx-font);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    box-shadow: none !important;
    transform: none !important;
    transition: color 0.45s var(--cx-ease), border-color 0.45s var(--cx-ease), background 0.45s var(--cx-ease);
}

.btn::before,
.dt-btn::before,
.form-submit-btn::before,
.email-large-btn::before,
.newsletter-btn::before,
.cx-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    left: 0 !important;
    z-index: -1;
    background: var(--cx-ember) !important;
    transform: translateY(105%) !important;
    transition: transform 0.6s var(--cx-ease) !important;
    animation: none !important;
}

.btn:hover::before,
.dt-btn:hover::before,
.form-submit-btn:hover::before,
.email-large-btn:hover::before,
.newsletter-btn:hover::before,
.cx-btn:hover::before { transform: translateY(0) !important; }

.btn:hover,
.dt-btn:hover,
.form-submit-btn:hover,
.email-large-btn:hover,
.newsletter-btn:hover,
.cx-btn:hover { color: #050505; border-color: var(--cx-ember); background: #fff; }

.btn svg, .dt-btn svg, .cx-btn svg { fill: currentColor; }

/* Outlined variants */
.btn-secondary,
.btn-outline,
.dt-btn--ghost,
.cx-btn--ghost {
    background: transparent;
    border: 1px solid var(--cx-line-3);
    color: #fff;
}

.btn-secondary:hover,
.btn-outline:hover,
.dt-btn--ghost:hover,
.cx-btn--ghost:hover { color: #050505; border-color: #fff; background: transparent; }

.btn-secondary::before,
.btn-outline::before,
.dt-btn--ghost::before,
.cx-btn--ghost::before { background: #fff !important; }

/* Chevron text link: "› Plan your trek" */
.cx-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 0;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.cx-link::before {
    content: '›';
    font-size: 1.3em;
    line-height: 0;
    color: var(--cx-ember);
    transition: transform 0.45s var(--cx-ease);
}

.cx-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0.28);
    transform-origin: left;
    transition: transform 0.6s var(--cx-ease);
}

.cx-link:hover { color: #fff; }
.cx-link:hover::before { transform: translateX(5px); }
.cx-link:hover::after { transform: scaleX(1); }

/* The white "date pill" from the reference */
.cx-pill {
    display: inline-block;
    padding: 0.28rem 0.9rem;
    background: #fff;
    color: #050505;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Existing small action links on cards */
.trek-card-btn-link,
.blog-read-more-link,
.read-more-link {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.trek-card-btn-action {
    background: #fff;
    color: #050505;
    border: 0;
    border-radius: 0;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.trek-card-btn-action:hover { background: var(--cx-ember); color: #050505; }


/* ==========================================================================
   7. REVEAL + MOTION HELPERS
   ========================================================================== */

/* main.js's reveal (class names kept): a short, small fade-up. */
.reveal-init {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: var(--reveal-delay, 0s);
}

.reveal-init.revealed { opacity: 1; transform: none; }

/* destination.js reveal: same short fade, no sideways travel */
[data-dt-reveal],
[data-dt-reveal="left"],
[data-dt-reveal="right"] {
    transform: translateY(14px);
    transition-duration: 0.5s !important;
    transition-delay: 0s !important;
}

[data-dt-reveal].dt-revealed { transform: none; }

/* Generic fade-up (js/cinema.js adds .is-in) */
[data-cx-fade] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

[data-cx-fade].is-in { opacity: 1; transform: none; }

/* Without the script, or when it is blocked, nothing stays hidden */
html:not(.cx-js) [data-cx-fade],
html:not(.cx-js) .reveal-init { opacity: 1; transform: none; }
html.cx-js:not(.cx-ready) [data-cx-fade] { animation: cxShowAll 0.01s linear 4s forwards; }
@keyframes cxShowAll { to { opacity: 1; transform: none; } }

/* Keep the page calm: no film grain flicker, no endless hero zoom, quick hero text */
.hero-grain { display: none; }
.page-hero-bg,
.hero-static .hero-poster { animation: none; }
.hero-tag, .hero-title, .hero-description, .hero-btns { animation-duration: 0.45s; animation-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
    [data-cx-fade],
    .reveal-init { transition: none !important; transform: none !important; opacity: 1 !important; }
}


/* ==========================================================================
   7b. PAGE TRANSITIONS
   --------------------------------------------------------------------------
   Browser-native cross-document View Transitions (Chrome / Edge 126+,
   Safari 18.2+). The browser keeps the old page on screen until the new one
   is ready to paint, so a click never waits on an animation (the old JS
   curtain did, and was removed). The old page dips out fast, the new one
   fades in a beat later and settles 14px upward: a short fade-through-dark.
   The old and new snapshots are blended additively, so their opacities must
   never add up to more than 1 or photos flash brighter mid-fade: the new
   page therefore waits (animation-delay) until the old one is nearly gone.
   Browsers without it get a plain fade (html.cx-pt, set by the inline
   bootstrap in <head>). Reduced motion gets neither.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}

/* The header is its own layer so it stays put instead of riding up with the
   page. Named only while a transition runs: a permanent name would turn it
   into a backdrop root and kill the blur on its ::after bar. */
:root:active-view-transition #site-header { view-transition-name: cx-header; }
::view-transition-group(cx-header) { animation: none; }
::view-transition-old(cx-header) { display: none; }
::view-transition-new(cx-header) { animation: none; }

::view-transition-old(root) { animation: cxPageOut 0.12s linear both; }
::view-transition-new(root) { animation: cxPageIn 0.38s var(--cx-ease) 0.07s both; }

@keyframes cxPageOut { to { opacity: 0; } }
@keyframes cxPageIn { from { opacity: 0; transform: translateY(14px); } }

/* No View Transitions: a short fade-in on arrival (opacity only, so fixed
   elements keep their containing block and nothing is left behind). */
@keyframes cxArrive { from { opacity: 0; } }
html.cx-pt body { animation: cxArrive 0.35s ease-out; }


/* ==========================================================================
   8. SECTION SCAFFOLDING + PAGE-HERO FAMILIES
   ========================================================================== */
.section { padding: clamp(5rem, 9vw, 8.5rem) 0; background: transparent; }

.section-bg-alt,
.accred-section {
    background: var(--cx-bg-2);
    border-top: 1px solid var(--cx-line-2);
    border-bottom: 1px solid var(--cx-line-2);
}

.container { padding-left: var(--cx-gutter); padding-right: var(--cx-gutter); }

/* Section headers read left-aligned, like the reference */
.section-header {
    max-width: 820px;
    margin: 0 0 clamp(2.6rem, 5vw, 4.5rem);
    text-align: left;
}

.section-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.3rem;
}

.section-subtitle::after { display: none !important; }

.section-title {
    font-size: clamp(2rem, 4.6vw, 4.2rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin-bottom: 1.4rem;
    text-wrap: balance;
}

.section-desc {
    max-width: 60ch;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--cx-fg-3);
}

/* Breadcrumb */
.breadcrumb {
    background: var(--cx-bg);
    border-bottom: 1px solid var(--cx-line-2);
}

.breadcrumb-list { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.breadcrumb-list a { color: var(--cx-fg-3); }
.breadcrumb-list a:hover { color: #fff; text-decoration: none; }
.breadcrumb-list [aria-current="page"] { color: #fff; font-weight: 700; }
.breadcrumb-list li + li::before { border-color: var(--cx-ember); opacity: 1; }

/* ---- Hero family: page-hero, dt-hero, exp-hero, intl-hero, jng-hero ---- */
.page-hero,
.dt-hero,
.exp-hero,
.intl-hero,
.jng-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: min(84vh, 820px);
    padding: calc(var(--cx-header-h) + 5rem) 0 clamp(3.2rem, 6vw, 5.5rem);
    text-align: left;
    color: #fff;
    background: var(--cx-bg);
    overflow: hidden;
    isolation: isolate;
}

.dt-hero { min-height: min(100vh, 900px); }

/* Photograph: darkened, a touch desaturated, so it sits inside the black */
.page-hero-bg,
.dt-hero-bg,
.exp-hero-bg,
.intl-hero-media,
.jng-hero-media {
    opacity: 1 !important;
    filter: saturate(0.88) contrast(1.06) brightness(0.82);
}

/* Veil: black rising from the foot, soft vignette, no coloured tint */
.page-hero-overlay,
.dt-hero-overlay,
.exp-hero-overlay,
.intl-hero-overlay,
.jng-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to top, var(--cx-bg) 0%, rgba(6, 6, 6, 0.72) 22%, rgba(6, 6, 6, 0.18) 58%, rgba(6, 6, 6, 0.5) 100%),
        radial-gradient(120% 90% at 70% 35%, transparent 40%, rgba(6, 6, 6, 0.55) 100%) !important;
}

.dt-hero-glow { display: none; }

[class*="-hero-content"] {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--cx-gutter) !important;
    text-align: left;
    color: #fff;
}

[class*="-hero-eyebrow"] {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.6rem;
    animation: none !important;
}

[class*="-hero-eyebrow"]::before {
    content: '';
    width: 34px;
    height: 1px;
    background: var(--cx-ember);
}

[class*="-hero-eyebrow"] svg { display: none; }

[class*="-hero-title"] {
    max-width: 13em;
    margin: 0 0 1.4rem !important;
    font-family: var(--cx-font);
    font-size: clamp(2.5rem, 6.2vw, 6rem) !important;
    font-weight: 900 !important;
    line-height: 0.96 !important;
    letter-spacing: -0.035em !important;
    text-transform: uppercase;
    color: #fff;
    text-shadow: none !important;
    text-wrap: balance;
    animation: none !important;
}

[class*="-hero-title"] em {
    font-style: normal;
    color: var(--cx-ember) !important;
}

[class*="-hero-sub"],
[class*="-hero-desc"] {
    max-width: 56ch;
    margin: 0 0 2.2rem !important;
    font-size: clamp(0.92rem, 1.15vw, 1.06rem) !important;
    font-weight: 400 !important;
    line-height: 1.85 !important;
    letter-spacing: 0.005em !important;
    text-transform: none !important;
    color: var(--cx-fg-2) !important;
    opacity: 1 !important;
    animation: none !important;
}

.dt-hero-sub {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #fff !important;
}

.dt-hero-sub span { color: var(--cx-ember); padding: 0 0.5rem; }

[class*="-hero-actions"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 0.9rem;
    margin-top: 0 !important;
    animation: none !important;
}

.page-hero-stats {
    justify-content: flex-start;
    gap: 2.6rem;
    margin-top: 2.6rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--cx-line);
}

.page-hero-stat { align-items: flex-start; }

.page-hero-stat strong {
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.page-hero-stat span { color: var(--cx-fg-3); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; }
.page-hero-stat-divider { background: var(--cx-line); height: 34px; }

.dt-hero-scroll {
    left: auto !important;
    right: var(--cx-gutter);
    bottom: 3rem !important;
    transform: none !important;
    animation: none !important;
    flex-direction: row;
    writing-mode: vertical-rl;
    color: var(--cx-fg-3);
    font-size: 0.62rem;
    letter-spacing: 0.34em;
}

.dt-hero-scroll::before { background: var(--cx-ember) !important; }

/* Quick-facts strip under the destination hero */
.dt-facts { margin-top: -3.4rem; padding: 0 var(--cx-gutter); }

.dt-facts-inner {
    max-width: var(--max-width);
    background: rgba(10, 10, 11, 0.86);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border: 1px solid var(--cx-line);
    border-radius: 0;
}

.dt-fact { border-right: 1px solid var(--cx-line-2) !important; }
.dt-fact:hover { background: rgba(255, 255, 255, 0.04); }

.dt-fact-icon {
    background: transparent;
    border: 1px solid var(--cx-line-3);
    border-radius: 50%;
    box-shadow: none;
}

.dt-fact-icon svg { fill: var(--cx-ember); }
.dt-fact-label { color: var(--cx-fg-3); letter-spacing: 0.22em; }
.dt-fact-value { color: #fff; font-weight: 700; }

/* Sticky sub-navigations carried by several page types */
.trek-meta-strip,
.filter-section,
.blog-filter-section,
.legal-nav,
.exp-tabs,
.intl-subnav,
.jng-subnav {
    background: rgba(8, 8, 9, 0.88) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-color: var(--cx-line-2) !important;
    box-shadow: none !important;
}


/* ==========================================================================
   9. CARDS, FORMS, TABLES, ACCORDIONS (global components from styles.css)
   ========================================================================== */

/* ---- Dark-surface containers: re-scope --primary so their gradients stay dark
        and nested "light button" rules keep working. ---- */
.contact-email-card,
.blog-sidebar-cta,
.blog-newsletter-card,
.sidebar-download-card,
.guide-header,
.stats-banner,
.cta-simple,
.blog-modal-enquire-cta,
.quote-band,
.value-icon,
.contact-info-icon,
.legal-section-icon,
.blog-author-avatar,
.blog-author-avatar-sm,
.modal-author-avatar,
.article-table thead {
    --primary: #1b1b1e;
    --primary-light: #26262a;
    --primary-dark: #080808;
}

.contact-email-card,
.blog-sidebar-cta,
.blog-newsletter-card,
.sidebar-download-card,
.guide-header,
.stats-banner,
.cta-simple,
.blog-modal-enquire-cta {
    background: var(--cx-bg-3) !important;
    border: 1px solid var(--cx-line) !important;
    border-radius: 0 !important;
}

.contact-email-card::before,
.blog-newsletter-card::before,
.blog-newsletter-card::after,
.stats-banner::before,
.cta-simple::before { display: none; }

.value-icon,
.contact-info-icon,
.legal-section-icon {
    background: transparent !important;
    border: 1px solid var(--cx-line-3);
    box-shadow: none !important;
    border-radius: 50%;
}

.legal-section-icon { border-radius: 0; }

.value-icon svg,
.contact-info-icon svg,
.legal-section-icon svg { fill: var(--cx-ember); }

.contact-info-icon--wa { background: rgba(37, 211, 102, 0.14) !important; border-color: rgba(37, 211, 102, 0.5); }
.contact-info-icon--wa svg { fill: #25d366; }

/* ---- Trust strip ---- */
.trust-strip {
    background: transparent;
    padding: clamp(2.6rem, 5vw, 4rem) 0;
    border-top: 1px solid var(--cx-line);
    border-bottom: 1px solid var(--cx-line);
}

.trust-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1fr;
    gap: 0;
    align-items: stretch;
}

.trust-item {
    padding: 0.4rem clamp(1rem, 2.4vw, 2.4rem);
    border-left: 1px solid var(--cx-line-2);
}

.trust-item:first-child { border-left: 0; padding-left: 0; }

.trust-item .number {
    font-size: clamp(1.6rem, 3.1vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    white-space: nowrap;
    color: #fff;
}

.trust-item:hover .number { color: var(--cx-ember); }

.trust-item p {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--cx-fg-3);
}

@media (max-width: 760px) {
    .trust-container { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
    .trust-item:nth-child(3) { border-left: 0; padding-left: 0; }
    .trust-item .number { white-space: normal; }
}

/* ---- Trek cards (treks.html catalogue + anywhere .trek-card is used) ---- */
.trek-card {
    background: var(--cx-bg-2);
    border: 1px solid var(--cx-line-2);
    border-radius: 0;
    transition: border-color 0.6s var(--cx-ease), transform 0.8s var(--cx-ease);
}

.trek-card:hover {
    transform: translateY(-6px);
    border-color: var(--cx-line-3);
    box-shadow: none;
}

.trek-card::before { display: none !important; }

.trek-card-media { height: 270px; background: #000; }

.trek-card-img { filter: saturate(0.9) contrast(1.05); transition: transform 1.2s var(--cx-ease), filter 0.8s var(--cx-ease); }
.trek-card:hover .trek-card-img { transform: scale(1.06); filter: saturate(1) contrast(1.05); }

.trek-card-badge {
    top: 0;
    left: 0;
    padding: 0.5rem 0.9rem;
    border-radius: 0;
    background: #fff;
    color: #050505;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    box-shadow: none !important;
    transform: none !important;
}

.trek-card-title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}

.trek-card-meta { color: var(--cx-fg-3); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; }
.trek-card-meta-icon { fill: var(--cx-ember); }
.trek-card-desc { color: var(--cx-fg-3); font-size: 0.9rem; line-height: 1.75; }
.trek-card-footer { border-top-color: var(--cx-line-2); }
.trek-card-download { border-top-color: var(--cx-line-2); color: var(--cx-fg-3); }
.trek-card-download:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.trek-card-price .price-amount { color: var(--cx-ember); }

/* ---- Feature boxes: three numbered columns, hairline-separated ---- */
.features-container { gap: 0; counter-reset: cxfeat; }

.feature-box {
    position: relative;
    counter-increment: cxfeat;
    padding: 3rem clamp(1.4rem, 2.6vw, 2.8rem) 3rem 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--cx-line);
    border-radius: 0;
    transition: border-color 0.6s var(--cx-ease);
}

.feature-box:hover { transform: none; box-shadow: none; border-color: var(--cx-ember); }
.feature-box::before { display: none !important; }

.feature-box::after {
    content: counter(cxfeat, decimal-leading-zero);
    position: absolute;
    top: 1.6rem;
    right: clamp(1.4rem, 2.6vw, 2.8rem);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--cx-fg-4);
}

.feature-icon-wrapper {
    width: 54px;
    height: 54px;
    margin-bottom: 1.8rem;
    background: transparent;
    border: 1px solid var(--cx-line-3);
    border-radius: 50%;
}

.feature-box:hover .feature-icon-wrapper { background: var(--cx-ember); transform: none; border-color: var(--cx-ember); }
.feature-box:hover .feature-icon { fill: #050505; }
.feature-icon { width: 24px; height: 24px; fill: var(--cx-ember); transition: fill 0.4s var(--cx-ease); }
.feature-title { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.feature-desc { color: var(--cx-fg-3); font-size: 0.93rem; line-height: 1.85; max-width: 38ch; }

/* ---- Testimonials ---- */
.testimonials-soon {
    background: transparent;
    border: 1px solid var(--cx-line);
    border-radius: 0;
    max-width: 760px;
    margin: 0;
    text-align: left;
    padding: clamp(2rem, 4vw, 3.4rem);
}

.testimonials-soon-icon { fill: var(--cx-ember); margin-bottom: 1.4rem; }
.testimonials-soon h3 { font-size: 1.6rem; font-weight: 800; color: #fff; }

.testimonial-card,
.review-card {
    background: var(--cx-bg-2);
    border: 1px solid var(--cx-line-2);
    border-radius: 0;
}

.testimonial-card:hover { transform: translateY(-4px); box-shadow: none; border-color: var(--cx-line-3); }
.testimonial-stars, .dt-testi-stars { color: var(--cx-ember); }
.testimonial-quote, .dt-testi-quote { font-family: var(--cx-font); color: var(--cx-fg-2); font-size: 0.98rem; }
.testimonial-avatar { background: var(--cx-bg-4); color: #fff; }
.testimonial-info h3 { color: #fff; }

/* ---- Quote band (dark parallax photo) ---- */
.quote-band {
    background: var(--cx-bg) !important;
    padding: clamp(6rem, 12vw, 11rem) 1.5rem;
    text-align: left;
}

.quote-band-bg { opacity: 0.5; filter: saturate(0.85) contrast(1.05); }
.quote-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--cx-bg), transparent 30%, transparent 70%, var(--cx-bg)); z-index: 1; }
.quote-band-content { max-width: var(--max-width); padding: 0 var(--cx-gutter); }

.quote-band-text {
    max-width: 24em;
    font-size: clamp(1.4rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.02em;
    text-shadow: none;
    color: #fff;
}

.quote-band-source { margin-top: 1.4rem; color: var(--cx-ember); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.28em; }

/* ---- CTA banner + enquiry card ---- */
.cta-banner-bg { background: var(--cx-bg-2); }
.cta-banner-section { color: var(--cx-fg-2); border-top: 1px solid var(--cx-line-2); border-bottom: 1px solid var(--cx-line-2); }
.cta-banner-text h2 { font-size: clamp(2rem, 4.2vw, 3.8rem); font-weight: 800; color: #fff; text-wrap: balance; }
.cta-banner-text p { color: var(--cx-fg-3); line-height: 1.85; opacity: 1; }

.email-large-btn { padding: 1.15rem 2rem; }

/* ---- Forms: underline fields, uppercase micro-labels ---- */
.form-light-container,
.enquiry-form-card,
.contact-form-card,
.dt-form-card {
    background: transparent;
    border: 1px solid var(--cx-line);
    border-radius: 0;
    box-shadow: none;
}

.enquiry-form-title,
.contact-form-card .contact-heading {
    border-bottom: 1px solid var(--cx-line) !important;
    color: #fff;
}

.form-label,
.form-light-container .form-label,
.dt-form-group label {
    margin-bottom: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cx-fg-3);
}

.form-control,
.form-light-container .form-control,
.dt-form-group input,
.dt-form-group textarea,
.newsletter-input,
.blog-search-input,
.blog-newsletter-form input {
    width: 100%;
    padding: 0.85rem 0;
    background-color: transparent !important;
    border: 0;
    border-bottom: 1px solid var(--cx-line-3);
    border-radius: 0;
    color: #fff;
    font-family: var(--cx-font);
    font-size: 0.95rem;
    box-shadow: none !important;
    transition: border-color 0.4s var(--cx-ease);
}

.form-control::placeholder,
.dt-form-group input::placeholder,
.dt-form-group textarea::placeholder,
.newsletter-input::placeholder { color: var(--cx-fg-4); }

.form-control:focus,
.form-light-container .form-control:focus,
.dt-form-group input:focus,
.dt-form-group textarea:focus,
.newsletter-input:focus,
.blog-search-input:focus,
.blog-newsletter-form input:focus {
    outline: none;
    border-bottom-color: var(--cx-ember);
    background-color: transparent !important;
    box-shadow: none !important;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.6rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.1rem center !important;
}

select.form-control option,
.form-light-container select.form-control option { background: #0c0c0d; color: #fff; }

textarea.form-control { resize: vertical; min-height: 7rem; }

/* the search field keeps room for its magnifier */
.blog-search-input { padding-left: 2.2rem; }

.form-submit-btn { width: auto; margin-top: 1.4rem; padding: 1.1rem 2.4rem; }

.newsletter-input { padding: 0.8rem 0; }
.newsletter-btn { padding: 0.8rem 1.2rem; }

.form-status { border-radius: 0; color: var(--cx-fg-2); background: rgba(255, 255, 255, 0.04); }

input[type='date'].form-control,
.dt-form-group input[type='date'] { color-scheme: dark; }

/* ---- Contact page ---- */
.contact-heading { color: #fff; font-weight: 800; }

.contact-info-item {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--cx-line);
    border-radius: 0;
    padding: 1.4rem 0;
}

.contact-info-item:hover { transform: none; border-color: var(--cx-ember); box-shadow: none; }
.contact-info-item h3 { color: #fff; font-weight: 700; }
.contact-info-item p, .contact-info-item a { color: var(--cx-fg-3); }
.contact-info-item a { text-decoration-color: rgba(255, 107, 52, 0.5); }
.contact-info-item a:hover { color: var(--cx-ember); }
.contact-email-links a { background: #fff; color: #050505; border-radius: 0; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-map-embed { background: var(--cx-bg-2); border-radius: 0; border-color: var(--cx-line); }
.contact-map-embed iframe { filter: grayscale(1) invert(0.92) contrast(0.9) brightness(0.9); }
.contact-map-embed figcaption strong { color: #fff; }
.contact-map-embed figcaption a { color: var(--cx-ember); }

/* ---- Trek detail (legacy blocks), accordion, inc/exc, gallery ---- */
.trek-meta-label { color: var(--cx-fg-3); letter-spacing: 0.2em; }
.trek-meta-value { color: #fff; }
.trek-section-title { border-left-color: var(--cx-ember); color: #fff; }

.accordion-item {
    background: transparent !important;
    border: 0;
    border-top: 1px solid var(--cx-line);
    border-radius: 0;
}

.accordion-item:last-child { border-bottom: 1px solid var(--cx-line); }
.accordion-item:hover, .accordion-item.active { border-color: var(--cx-line-3); border-top-color: var(--cx-ember); box-shadow: none; }
.accordion-header { color: #fff; padding-left: 0; padding-right: 0; font-weight: 700; }
.accordion-header:hover { background: transparent; }
.accordion-day-tag { background: #fff; color: #050505; border-radius: 0; }
.accordion-icon { fill: var(--cx-ember); }
.accordion-inner { color: var(--cx-fg-3); border-top-color: var(--cx-line-2); padding-left: 0; padding-right: 0; }
.accordion-inner strong { color: #fff; }

.inc-box, .exc-box { background: transparent; border: 1px solid var(--cx-line); border-radius: 0; }
.inc-box { border-top: 2px solid var(--cx-ember); }
.exc-box { border-top: 2px solid var(--cx-fg-4); }
.exc-list li::before { color: var(--cx-fg-3); }
.inc-list li::before { color: var(--cx-ember); }

.route-map-img { border-radius: 0; border-color: var(--cx-line); }
.gallery-item { border-radius: 0; border-color: var(--cx-line-2); }
.gallery-item img { filter: saturate(0.92) contrast(1.04); }
.sidebar-card { background: var(--cx-bg-2); border-radius: 0; border-color: var(--cx-line-2); }

/* Lightboxes */
.site-lightbox,
.dt-lightbox { background: rgba(4, 4, 4, 0.96); }
.site-lightbox img, .dt-lightbox img { border-radius: 0; }
.site-lightbox-close, .dt-lightbox-close { border-radius: 0; background: transparent; border-color: var(--cx-line-3); }

/* Breadcrumb-adjacent "related" cards */
.related { background: var(--cx-bg); border-top-color: var(--cx-line-2); }
.related-card { background: transparent; border: 0; border-top: 1px solid var(--cx-line); border-radius: 0; padding-left: 0; padding-right: 0; }
.related-card:hover, .related-card:focus-within { transform: none; box-shadow: none; border-top-color: var(--cx-ember); }
.related-eyebrow { color: var(--cx-ember); letter-spacing: 0.26em; }
.related-title { color: #fff; }
.related-link { color: #fff; font-weight: 700; }
.related-card:hover .related-link { color: var(--cx-ember); }

/* Rating / reviews */
.rating-summary-card { background: var(--cx-bg-2); border-radius: 0; border-color: var(--cx-line); }
.rating-score { color: #fff; font-weight: 900; }
.rating-bar-track { background: var(--cx-bg-4); border-radius: 0; }
.rating-bar-fill { background: var(--cx-ember); border-radius: 0; }
.rating-badge strong { color: var(--cx-ember); }
.review-trek-tag { background: transparent; border: 1px solid var(--cx-line-3); color: var(--cx-fg-2); border-radius: 0; }
.review-verified { background: transparent; border: 1px solid rgba(24, 154, 108, 0.5); border-radius: 0; color: #3ddc97; }

/* Pay panel (contact) */
.pay-panel { background: var(--cx-bg-2); border-radius: 0; border-color: var(--cx-line); }
.pay-panel::before { background: var(--cx-ember); height: 1px; }
.pay-card { background: #f1efe9; border-color: transparent; border-radius: 0; }
.pay-card:hover { transform: translateY(-4px); border-color: var(--cx-ember); }
.pay-name { color: #3a3631; }
.pay-card:hover .pay-name { color: #000; }
.pay-group-label { color: #fff; }
.pay-note-item strong, .pay-footnote a { color: #fff; }


/* ==========================================================================
   15. FOOTER, ACCREDITATIONS, RECOMMENDATION BAND, FLOATING WIDGETS
   ========================================================================== */
footer {
    background: var(--cx-bg);
    color: var(--cx-fg-2);
    border-top: 1px solid var(--cx-line);
    padding: clamp(4rem, 7vw, 6rem) 0 2rem;
}

footer::before { background: var(--cx-ember); height: 1px; width: 100%; opacity: 0.7; }

.footer-logo { background: transparent !important; padding: 0 !important; border-radius: 0; }
.footer-logo .logo-img { height: 38px; }
.footer-logo .logo-title { color: #fff !important; }
.footer-about p { color: var(--cx-fg-3); opacity: 1; line-height: 1.85; max-width: 38ch; }

.footer-social-link {
    background: transparent;
    border: 1px solid var(--cx-line-3);
    border-radius: 50%;
}

.footer-social-link svg { fill: #fff; }
.footer-social-link:hover { background: #fff; border-color: #fff; transform: none; }
.footer-social-link:hover svg { fill: #050505; }

.footer-title {
    font-family: var(--cx-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #fff;
}

.footer-title::after { background: var(--cx-ember); height: 1px; width: 28px; }

.footer-links a { color: var(--cx-fg-3); opacity: 1; font-size: 0.9rem; }
.footer-links a:hover { color: #fff; padding-left: 0.5rem; }
.footer-contact-item { color: var(--cx-fg-3); opacity: 1; }
.footer-contact-icon { fill: var(--cx-ember); }
.footer-newsletter p { color: var(--cx-fg-3); opacity: 1; }
.newsletter-form { gap: 0; }
.newsletter-input { border-bottom: 1px solid var(--cx-line-3); flex: 1 1 140px; }
.newsletter-btn { background: transparent; color: #fff; border: 1px solid var(--cx-line-3); border-bottom: 1px solid var(--cx-line-3); }
.newsletter-btn:hover { color: #050505; border-color: #fff; }

.footer-bottom { border-top-color: var(--cx-line-2); color: var(--cx-fg-3); opacity: 1; }
.footer-bottom p { color: var(--cx-fg-3); }

/* Payment ticker (footer) */
.footer-pay { border-top-color: var(--cx-line-2); }
.footer-pay-title { color: var(--cx-ember); letter-spacing: 0.26em; }
.footer-pay-link { color: var(--cx-fg-3); }
.footer-pay-link:hover { color: #fff; }
.pay-chip { background: #f1efe9; border-color: transparent; border-radius: 0; }
.pay-chip:hover { border-color: var(--cx-ember); box-shadow: none; }
.pay-chip-label { color: #1a1814; }

/* Accreditation panels */
.accred-section { background: var(--cx-bg-2); }
.accred-panel { background: transparent; border: 1px solid var(--cx-line); }
.accred-panel::before { background: var(--cx-ember); height: 1px; }
.accred-card { background: transparent; border: 1px solid var(--cx-line-2); }
.accred-card:hover { border-color: var(--cx-line-3); }
.accred-name { color: #fff; }
.accred-sub { color: var(--cx-fg-3); }
.accred-abbr { color: #fff; }
.accred-mark svg { filter: none; }
.accred-note { color: var(--cx-fg-3); border-top-color: var(--cx-line-2); }
.accred-note strong { color: #fff; }
.accred-tag { color: var(--cx-fg-2); background: transparent; border-color: var(--cx-line-3); border-radius: 0; }

/* Recommendation band */
.reco-band { background: var(--cx-bg); border-top: 1px solid var(--cx-line-2); }
.reco-label { color: var(--cx-ember); letter-spacing: 0.26em; }
.reco-label::after { background: var(--cx-ember); height: 1px; }
.reco-name { color: var(--cx-fg-2); }
.reco-reg { background: transparent; border-color: var(--cx-line); border-radius: 0; color: var(--cx-fg-3); }
.reco-reg strong { color: #fff; }

/* Floating widgets */
.floating-widgets { left: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); }

.email-float {
    width: 54px;
    height: 54px;
    background: rgba(8, 8, 9, 0.7);
    color: #fff;
    border: 1px solid var(--cx-line-3);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: none !important;
    animation: none;
    transition: background 0.45s var(--cx-ease), color 0.45s var(--cx-ease), border-color 0.45s var(--cx-ease), transform 0.45s var(--cx-ease);
}

.email-float::after { border-color: var(--cx-ember); }
.email-float:hover { background: #fff; color: #050505; border-color: #fff; transform: none; }
.email-float svg { width: 24px; height: 24px; }

.sticky-quote-btn { background: #fff; color: #050505; border: 0; border-radius: 0; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; }
.sticky-quote-btn:hover { background: var(--cx-ember); box-shadow: none; transform: none; }


/* ==========================================================================
   10b. BUTTON FAMILIES FROM THE PAGE SHEETS — same white-pill treatment
   ========================================================================== */
.exp-btn,
.intl-btn,
.jng-btn,
.gd-btn,
.exp-action--book,
.exp-action--details,
.dt-download-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 1.9rem;
    border: 1px solid #fff;
    border-radius: 0 !important;
    background: #fff;
    color: #050505;
    font-family: var(--cx-font);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: none !important;
    transform: none !important;
    transition: color 0.45s var(--cx-ease), border-color 0.45s var(--cx-ease), background 0.45s var(--cx-ease);
}

.exp-btn::before,
.intl-btn::before,
.jng-btn::before,
.exp-action--book::before,
.exp-action--details::before,
.dt-download-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--cx-ember);
    transform: translateY(105%);
    transition: transform 0.6s var(--cx-ease);
}

.exp-btn:hover::before,
.intl-btn:hover::before,
.jng-btn:hover::before,
.exp-action--book:hover::before,
.exp-action--details:hover::before,
.dt-download-btn:hover::before { transform: translateY(0); }

.exp-btn:hover,
.intl-btn:hover,
.jng-btn:hover,
.exp-action--book:hover,
.exp-action--details:hover,
.dt-download-btn:hover { color: #050505; border-color: var(--cx-ember); background: #fff; }

.exp-btn--ghost,
.intl-btn--ghost,
.jng-btn--ghost,
.exp-action--inquiry,
.intl-btn--navy,
.jng-btn--forest {
    background: transparent;
    border: 1px solid var(--cx-line-3);
    color: #fff;
}

.exp-btn--ghost::before,
.intl-btn--ghost::before,
.jng-btn--ghost::before,
.exp-action--inquiry::before,
.intl-btn--navy::before,
.jng-btn--forest::before { background: #fff; }

.exp-btn--ghost:hover,
.intl-btn--ghost:hover,
.jng-btn--ghost:hover,
.exp-action--inquiry:hover,
.intl-btn--navy:hover,
.jng-btn--forest:hover { color: #050505; border-color: #fff; background: transparent; }

.exp-action { padding: 0.85rem 1rem; font-size: 0.64rem; letter-spacing: 0.16em; font-weight: 800; text-transform: uppercase; border-radius: 0; }
.exp-btn svg, .intl-btn svg, .jng-btn svg, .exp-action svg { fill: currentColor; }


/* ==========================================================================
   11. DESTINATION PAGES (.dt-*)  — treks, Bali, Vietnam, every peak and
       expedition page. They are all token-driven, so the work is re-pointing
       the palette once for every body.dt-* variant.
   ========================================================================== */
body.dt-body {
    --dt-deep: #050505;       --dt-deep-rgb: 5, 5, 5;
    --dt-base: #ffffff;       --dt-base-rgb: 255, 255, 255;
    --dt-soft: #17171a;       --dt-soft-rgb: 23, 23, 26;
    --dt-accent: #ff6b34;     --dt-accent-rgb: 255, 107, 52;
    --dt-accent-bright: #ff8f61; --dt-accent-bright-rgb: 255, 143, 97;
    --dt-mist: #0a0a0b;
    --dt-sand: #060606;
    --dt-cream: #0c0c0d;
    --dt-ink: #ece9e2;
    --dt-muted: rgba(236, 233, 226, 0.6);
    --dt-gold: #ff6b34;
    --dt-gold-deep: #ff6b34;
    --dt-gold-soft: #ffd7c4;
    --dt-glass: rgba(255, 255, 255, 0.03);
    --dt-glass-border: rgba(255, 255, 255, 0.1);
    background-color: var(--cx-bg);
}

.dt-section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; background: transparent; }
.dt-section--tint { background: var(--cx-bg-2); border-top: 1px solid var(--cx-line-2); border-bottom: 1px solid var(--cx-line-2); }
.dt-section--dark { background: var(--cx-bg-2); border-top: 1px solid var(--cx-line-2); border-bottom: 1px solid var(--cx-line-2); }

.dt-section-head { max-width: 820px; margin: 0 0 clamp(2.4rem, 5vw, 4rem); text-align: left; }
.dt-eyebrow { display: inline-flex; margin-bottom: 1.3rem; }
.dt-eyebrow::after { display: none !important; }

.dt-title {
    font-size: clamp(2rem, 4.4vw, 3.9rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: #fff;
    text-transform: uppercase;
    text-wrap: balance;
}

.dt-sub { color: var(--cx-fg-3); line-height: 1.85; max-width: 60ch; }
.dt-route-copy .dt-title, .dt-book-info .dt-title { text-align: left; }
.dt-overview-text { color: var(--cx-fg-3); line-height: 1.9; }
.dt-points li { color: var(--cx-fg-2); }
.dt-points li svg { fill: var(--cx-ember); }
.dt-points li strong { color: #fff; }

/* Surfaces: hairline panels, no glass, no radius */
.dt-card,
.dt-itin-card,
.dt-feature,
.dt-testi,
.dt-incexc,
.dt-form-card,
.dt-download,
.dt-faq-wrap .accordion-item {
    background: var(--cx-bg-2);
    border: 1px solid var(--cx-line-2);
    border-radius: 0;
    box-shadow: none;
}

.dt-card:hover,
.dt-itin-card:hover,
.dt-feature:hover,
.dt-testi:hover { transform: translateY(-6px); border-color: var(--cx-line-3); box-shadow: none; }

.dt-card::before,
.dt-itin-card::before { background: var(--cx-ember); height: 2px; }

.dt-incexc--in { border-top: 2px solid var(--cx-ember); }
.dt-incexc--out { border-top: 2px solid var(--cx-fg-4); }
.dt-incexc--in li svg { fill: var(--cx-ember); }
.dt-incexc--out li svg { fill: var(--cx-fg-3); }
.dt-incexc:hover { transform: none; }

.dt-card-icon,
.dt-itin-icon,
.dt-feature-icon,
.dt-testi-avatar,
.dt-download-icon {
    background: transparent;
    border: 1px solid var(--cx-line-3);
    box-shadow: none;
}

.dt-card-icon svg, .dt-itin-icon svg, .dt-feature-icon svg { fill: var(--cx-ember); }
.dt-download-icon svg { fill: var(--cx-ember); }
.dt-card:hover .dt-card-icon, .dt-itin-card:hover .dt-itin-icon, .dt-feature:hover .dt-feature-icon { transform: none; background: var(--cx-ember); border-color: var(--cx-ember); }
.dt-card:hover .dt-card-icon svg, .dt-itin-card:hover .dt-itin-icon svg, .dt-feature:hover .dt-feature-icon svg { fill: #050505; }

.dt-chip { background: transparent; border: 1px solid var(--cx-line-3); color: var(--cx-fg-2); border-radius: 0; letter-spacing: 0.16em; }
.dt-card-title, .dt-itin-title, .dt-feature h3, .dt-testi-info h3, .dt-book-perk h3, .dt-download-copy h3, .dt-form-title, .dt-incexc-title { color: #fff; font-weight: 800; letter-spacing: -0.01em; }
.dt-card-desc, .dt-itin-desc, .dt-feature p, .dt-testi-info p, .dt-book-perk p, .dt-download-copy p, .dt-form-sub, .dt-form-note { color: var(--cx-fg-3); }
.dt-card-list li, .dt-incexc li, .dt-itin-facts li { color: var(--cx-fg-2); }
.dt-card-list li svg, .dt-itin-facts svg { fill: var(--cx-ember); }

/* Itinerary — the white day-pill from the reference */
.dt-itin-day {
    background: #fff;
    color: #050505;
    border-radius: 0;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.dt-itin-more { border-top-color: var(--cx-line-2); }
.dt-itin-toggle { color: var(--cx-ember); }
.dt-itin-toggle:hover { color: #fff; }
.dt-itin-panel { color: var(--cx-fg-3); }
.dt-itin-photo { border-radius: 0; }
.dt-itin-note { background: rgba(255, 107, 52, 0.08); border-left-color: var(--cx-ember); border-radius: 0; color: var(--cx-fg-2); }

.dt-g-item { border-radius: 0; background: #000; }
.dt-g-item img { filter: saturate(0.9) contrast(1.05); }
.dt-g-item:hover img { filter: saturate(1.05) contrast(1.05); }
.dt-g-caption svg { fill: var(--cx-ember); }
.dt-map-figure { border: 1px solid var(--cx-line); border-radius: 0; }

.dt-band { padding: clamp(6rem, 12vw, 11rem) 1.5rem; text-align: left; background: var(--cx-bg); }
.dt-band-bg { opacity: 0.5; filter: saturate(0.85) contrast(1.05); }
.dt-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--cx-bg), transparent 30%, transparent 70%, var(--cx-bg)); z-index: 1; pointer-events: none; }
.dt-band-content { max-width: var(--max-width); padding: 0 var(--cx-gutter); }
.dt-band-quote { max-width: 24em; font-size: clamp(1.5rem, 3.4vw, 3rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; text-shadow: none; color: #fff; }
.dt-band-source { color: var(--cx-ember); font-weight: 700; letter-spacing: 0.28em; font-size: 0.66rem; }

.dt-testi-stars { color: var(--cx-ember); }
.dt-testi-quote { font-family: var(--cx-font); }

.dt-faq-wrap { max-width: 920px; margin: 0; }
.dt-faq-wrap .accordion-item { background: transparent; border: 0; border-top: 1px solid var(--cx-line); margin-bottom: 0; }
.dt-faq-wrap .accordion-item:last-child { border-bottom: 1px solid var(--cx-line); }
.dt-faq-wrap .accordion-item.active { border-top-color: var(--cx-ember); }
.dt-faq-wrap .accordion-header { color: #fff; padding-left: 0; padding-right: 0; font-weight: 700; }
.dt-faq-wrap .accordion-header:hover { background: transparent; }
.dt-faq-wrap .accordion-icon { fill: var(--cx-ember); }
.dt-faq-wrap .accordion-inner { padding-left: 0; padding-right: 0; color: var(--cx-fg-3); }

.dt-book-perk-icon { background: transparent; border: 1px solid var(--cx-line-3); border-radius: 50%; }
.dt-book-perk-icon svg { fill: var(--cx-ember); }
.dt-download:hover { transform: none; border-color: var(--cx-ember); }
.dt-form-card { padding: clamp(1.6rem, 3vw, 2.6rem); }
.dt-form-group label { color: var(--cx-fg-3); }
.dt-form-group input[type='date'] { color-scheme: dark; }

.dt-hero-crumbs, .dt-hero-crumbs a { color: var(--cx-fg-3); text-shadow: none !important; }
.dt-hero-crumbs a:hover { color: #fff; }
.dt-hero-status { background: transparent; border: 1px solid rgba(90, 200, 150, 0.45); border-radius: 0; }
.pk-hero-permit { background: transparent; border: 1px solid var(--cx-line-3); border-radius: 0; }

/* Expedition + peak palettes carry their own scrims; keep them neutral */
body[class*="dt-exp-"] .dt-hero-overlay,
body[class*="dt-pk-"] .dt-hero-overlay { background: linear-gradient(to top, var(--cx-bg) 0%, rgba(6, 6, 6, 0.72) 22%, rgba(6, 6, 6, 0.18) 58%, rgba(6, 6, 6, 0.5) 100%), radial-gradient(120% 90% at 70% 35%, transparent 40%, rgba(6, 6, 6, 0.55) 100%) !important; }
body[class*="dt-exp-"] .dt-hero-title, body[class*="dt-exp-"] .dt-hero-sub,
body[class*="dt-pk-"] .dt-hero-title, body[class*="dt-pk-"] .dt-hero-sub { text-shadow: none !important; }

.exp-sibling { background: var(--cx-bg-2); border: 1px solid var(--cx-line-2); border-radius: 0; box-shadow: none; }
.exp-sibling:hover { transform: none; border-color: var(--cx-ember); box-shadow: none; }
.exp-sibling img { border-radius: 0; }
.exp-sibling-name { color: #fff; }


/* ==========================================================================
   12. EXPEDITIONS + PEAKS HUBS (.exp-*, .pk-*)
   ========================================================================== */
body.exp-body { background-color: var(--cx-bg); }

.exp-stats { margin-top: -3.4rem; padding: 0 var(--cx-gutter); }
.exp-stats-inner { background: rgba(10, 10, 11, 0.86); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid var(--cx-line); border-radius: 0; box-shadow: none; }
.exp-stat { border-right-color: var(--cx-line-2); }
.exp-stat:hover { background: rgba(255, 255, 255, 0.04); }
.exp-stat-icon { background: transparent; border: 1px solid var(--cx-line-3); border-radius: 50%; }
.exp-stat-icon svg { fill: var(--cx-ember); }
.exp-stat-value { color: #fff; font-weight: 800; }
.exp-stat-label { color: var(--cx-fg-3); letter-spacing: 0.2em; font-size: 0.64rem; }

.exp-filters { background: rgba(6, 6, 6, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--cx-line-2); padding: 0.9rem 0; }
.exp-filters-inner { justify-content: flex-start; padding: 0 var(--cx-gutter); }
.exp-tabs { padding: 0; gap: 0; background: transparent !important; border: 1px solid var(--cx-line) !important; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.exp-tab { padding: 0.85rem 1.5rem; border-radius: 0; color: var(--cx-fg-3); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; border-right: 1px solid var(--cx-line-2); }
.exp-tab:last-child { border-right: 0; }
.exp-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.exp-tab[aria-selected='true'] { background: #fff; color: #050505; }
.exp-tab-count { background: transparent; border: 1px solid currentColor; border-radius: 0; opacity: 0.8; font-size: 0.62rem; }
.exp-tab[aria-selected='true'] .exp-tab-count { background: transparent; }

.exp-range { padding: clamp(3.4rem, 6vw, 5.6rem) 0; }
.exp-range--tint { background: var(--cx-bg-2); border-top: 1px solid var(--cx-line-2); border-bottom: 1px solid var(--cx-line-2); }
.exp-range-head { max-width: 900px; margin: 0 0 clamp(2.2rem, 4vw, 3.4rem); text-align: left; }
.exp-eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; }
.exp-eyebrow::after { display: none !important; }
.exp-eyebrow::before { width: 28px !important; background: var(--cx-ember) !important; margin: 0 !important; }
.exp-range-title { font-size: clamp(2rem, 4.4vw, 3.9rem); font-weight: 800; letter-spacing: -0.025em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.exp-range-sub { color: var(--cx-fg-3); }
.exp-range-count { background: transparent; border: 1px solid var(--cx-line-3); border-radius: 0; color: var(--cx-fg-2); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.exp-range-count svg { fill: var(--cx-ember); }
.exp-range-desc { color: var(--cx-fg-3); margin-left: 0; max-width: 70ch; }

.exp-card { background: var(--cx-bg-2); border: 1px solid var(--cx-line-2); border-radius: 0; box-shadow: none; }
.exp-card:hover, .exp-card:focus-within { transform: translateY(-6px); border-color: var(--cx-line-3); box-shadow: none; }
.exp-card-media img { filter: saturate(0.9) contrast(1.05); }
.exp-card:hover .exp-card-media img { filter: saturate(1) contrast(1.05); }
.exp-card-media::after { background: linear-gradient(to top, rgba(6, 6, 6, 0.85) 0%, rgba(6, 6, 6, 0.05) 52%, transparent 100%); }
.exp-badge { border-radius: 0; background: #fff; color: #0c5a3a; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.exp-card-alt { border-radius: 0; background: rgba(6, 6, 6, 0.7); color: #fff; }
.exp-card-alt svg { fill: var(--cx-ember); }
.exp-card-title { color: #fff; font-weight: 800; letter-spacing: -0.01em; }
.exp-card:hover .exp-card-title { color: var(--cx-ember); }
.exp-card-desc { color: var(--cx-fg-3); }
.exp-card-meta { border-top-color: var(--cx-line-2); }
.exp-meta-item { background: transparent; border: 1px solid var(--cx-line-2); border-radius: 0; color: var(--cx-fg-2); }
.exp-meta-item svg { fill: var(--cx-ember); }
.pk-level-bar { background: var(--cx-bg-4); border-radius: 0; }
.pk-level-bar.is-on { background: var(--cx-ember); }
.pk-xref-note { background: transparent; border-color: var(--cx-line-3); border-radius: 0; color: var(--cx-fg-2); }
.pk-permit { color: var(--cx-fg-3); }

.exp-why { background: transparent; border: 1px solid var(--cx-line); border-radius: 0; box-shadow: none; }
.exp-why-title { color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.exp-why-card { background: transparent; border: 0; border-top: 1px solid var(--cx-line); border-radius: 0; }
.exp-why-card:hover { transform: none; background: transparent; border-top-color: var(--cx-ember); }
.exp-why-icon { background: transparent; border: 1px solid var(--cx-line-3); border-radius: 50%; box-shadow: none; }
.exp-why-icon svg { fill: var(--cx-ember); }
.exp-why-card h3 { color: #fff; }
.exp-why-card p { color: var(--cx-fg-3); }

.exp-cta { background: var(--cx-bg); padding: clamp(5rem, 10vw, 9rem) 0; }
.exp-cta-bg { opacity: 0.4; filter: saturate(0.85) contrast(1.05); }
.exp-cta-inner { text-align: left; max-width: var(--max-width); padding: 0 var(--cx-gutter); }
.exp-cta-title { font-size: clamp(2rem, 4.4vw, 3.9rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; max-width: 16em; }
.exp-cta-text { margin-left: 0; color: var(--cx-fg-2); max-width: 56ch; }
.exp-cta-actions { justify-content: flex-start; }

.pk-ladder { background: var(--cx-bg-2); border-top: 1px solid var(--cx-line-2); }
.pk-ladder-head { max-width: 820px; margin: 0 0 3rem; text-align: left; }
.pk-ladder-title { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; color: #fff; }
.pk-ladder-sub { color: var(--cx-fg-3); }
.pk-step { background: transparent; border: 1px solid var(--cx-line-2); border-radius: 0; }
.pk-step:hover, .pk-step:focus-visible { transform: none; background: var(--cx-bg-3); border-color: var(--cx-ember); }
.pk-step::after { border-color: var(--cx-ember); }
.pk-step-num { background: #fff; color: #050505; border-radius: 0; box-shadow: none; }
.pk-step-alt { color: var(--cx-ember); }
.pk-step h3 { color: #fff; }
.pk-step p { color: var(--cx-fg-3); }
.pk-step-link { color: #fff; }
.pk-step:hover .pk-step-link, .pk-step-link:hover { color: var(--cx-ember); }


/* ==========================================================================
   8b. ABOUT-PAGE GALLERY MOSAIC
   (the base .gallery-grid leaves holes when the last tile is .large; scoped so
   the safari and destination galleries keep their own grids)
   ========================================================================== */
.gallery-grid { grid-template-columns: repeat(6, 1fr); gap: clamp(0.7rem, 1.4vw, 1.2rem); }
.gallery-grid > .gallery-item,
.gallery-grid > .gallery-item.large { grid-column: span 3; }
.gallery-grid > .gallery-item:last-child:nth-child(odd) { grid-column: span 6; }
.gallery-grid > .gallery-item img,
.gallery-grid > .gallery-item.large img { height: clamp(220px, 28vw, 380px); }
.gallery-grid > .gallery-item:last-child:nth-child(odd) img { height: clamp(260px, 36vw, 480px); }
@media (max-width: 640px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-grid > .gallery-item,
    .gallery-grid > .gallery-item.large,
    .gallery-grid > .gallery-item:last-child:nth-child(odd) { grid-column: span 1; }
}


/* ==========================================================================
   11b. DESTINATION GALLERY — fill the mosaic for every item count
   ========================================================================== */
.dt-gallery { grid-auto-flow: dense; }
.dt-gallery:has(> :nth-child(6):last-child) .dt-g-item:nth-child(5) { grid-row: span 2; }
.dt-gallery:has(> :nth-child(6):last-child) .dt-g-item:nth-child(6) { grid-column: span 2; }
.dt-gallery:has(> :nth-child(5):last-child) .dt-g-item:nth-child(4) { grid-row: span 1; }
.dt-gallery:has(> :nth-child(4):last-child) .dt-g-item:nth-child(4) { grid-row: span 1; grid-column: span 2; }
@media (max-width: 1024px) {
    .dt-gallery .dt-g-item { grid-row: span 1 !important; grid-column: span 1 !important; }
    .dt-gallery .dt-g-item:nth-child(1) { grid-column: span 2 !important; grid-row: span 2 !important; }
}
@media (max-width: 640px) {
    .dt-gallery .dt-g-item:nth-child(1) { grid-column: span 2 !important; grid-row: span 1 !important; }
}

/* Small type over busy photography needs a whisper of shadow */
[class*="-hero-eyebrow"],
[class*="-hero-sub"],
[class*="-hero-desc"],
.dt-hero-crumbs { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65) !important; }

/* Floating "Plan This Trek" CTA keeps its fixed position; the assistant already
   shifts aside for it (.tb-chat-shift-cta in chatbot.css) */
.sticky-quote-btn { position: fixed; display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 1.6rem; z-index: 998; font-family: var(--cx-font); font-weight: 800; }
.sticky-quote-btn svg { fill: currentColor; }


/* ==========================================================================
   15b. SITE ASSISTANT (css/chatbot.css) — re-pointed through its own tokens
   ========================================================================== */
.tb-chat {
    --tbc-navy: #0d0d0f;
    --tbc-navy-dark: #060606;
    --tbc-navy-light: #1b1b1e;
    --tbc-gold: var(--cx-ember);
    --tbc-gold-soft: #ffd7c4;
    --tbc-surface: #0d0d0f;
    --tbc-canvas: #08080a;
    --tbc-ink: #f4f1ea;
    --tbc-muted: rgba(244, 241, 234, 0.6);
    --tbc-line: rgba(255, 255, 255, 0.14);
    --tbc-radius: 0px;
    font-family: var(--cx-font);
}

.tb-chat-launcher {
    background: rgba(8, 8, 9, 0.78);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--cx-line-3);
    color: #fff;
    transition: background 0.45s var(--cx-ease), color 0.45s var(--cx-ease), border-color 0.45s var(--cx-ease), transform 0.45s var(--cx-ease);
}

.tb-chat-launcher::after { border-color: rgba(255, 107, 52, 0.5); }
.tb-chat-launcher:hover,
.tb-chat-launcher:focus-visible { background: #fff; color: #050505; border-color: #fff; box-shadow: none; transform: none; }
.tb-chat-launcher-pulse { border-color: rgba(255, 107, 52, 0.5); }
.tb-chat-badge { background: var(--cx-ember); border-color: #050505; }

/* ==========================================================================
   Small corrections found in review
   ========================================================================== */
.cta-simple { border-left: 0 !important; border-right: 0 !important; }
.cta-simple-title { font-size: clamp(2rem, 4.4vw, 3.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; }
.cta-simple-desc { color: var(--cx-fg-3); }

.newsletter-input { min-width: 0; margin-right: 0.6rem; }

/* Payment chips: monochrome until hovered — logos keep their light tile */
.pay-marquee .pay-chip { filter: grayscale(1) contrast(0.95); opacity: 0.78; transition: filter 0.5s var(--cx-ease), opacity 0.5s var(--cx-ease), border-color 0.4s var(--cx-ease); }
.pay-marquee .pay-chip:hover { filter: none; opacity: 1; }

.license-item { background: transparent; border: 1px solid var(--cx-line-2); border-left: 2px solid var(--cx-ember); border-radius: 0; }
.license-item strong { color: var(--cx-fg-3); }
.license-item span { color: #fff; }
.license-panel { background: transparent; border: 1px solid var(--cx-line); border-radius: 0; }
.license-panel-label { color: var(--cx-fg-3); }

.stat-number { color: #fff; font-weight: 900; }
.stat-item { border-right-color: var(--cx-line-2); }
.stat-label { color: var(--cx-fg-3); opacity: 1; }
.stats-banner { padding: clamp(4rem, 8vw, 6rem) 0; }

.guide-card { background: var(--cx-bg-2); border-color: var(--cx-line-2); border-radius: 0; }
.guide-avatar { border-color: var(--cx-ember); background: var(--cx-bg-4); }
.guide-role { color: var(--cx-ember); }
.guide-badge { background: transparent; border-radius: 0; }
.value-card { background: var(--cx-bg-2); border-color: var(--cx-line-2); border-radius: 0; }
.value-card:hover { transform: translateY(-6px); box-shadow: none; border-color: var(--cx-ember); }
.value-title { color: #fff; }

.legal-nav-link { background: transparent; border-radius: 0; color: var(--cx-fg-3); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.legal-nav-link:hover { color: #fff; border-color: var(--cx-ember); background: transparent; }
.legal-section { background: transparent; border: 1px solid var(--cx-line-2); border-radius: 0; box-shadow: none; }
.legal-section-title { color: #fff; font-weight: 800; }
.legal-section p, .legal-section ul { color: var(--cx-fg-2); }
.legal-section ul li::before { background: var(--cx-ember); border-radius: 0; width: 6px; height: 6px; }


/* ==========================================================================
   13. GUIDES, INTERNATIONAL, JUNGLE SAFARI
   ========================================================================== */

/* ---- Guides (.gd-*) — token-driven; only the light-specific bits ---- */
.gd-trust { background: var(--cx-bg-2) !important; border-color: var(--cx-line-2) !important; }
.gd-trust-icon { background: transparent; border: 1px solid var(--cx-line-3); border-radius: 50%; }
.gd-trust-icon svg { fill: var(--cx-ember); }
.gd-trust-value { color: #fff; font-weight: 800; }
.gd-card, .gd-standard, .gd-trio-card, .gd-chip, .gd-panel, .gd-reason { background: var(--cx-bg-2) !important; border: 1px solid var(--cx-line-2); border-radius: 0 !important; box-shadow: none !important; }
.gd-card:hover, .gd-card:focus-visible, .gd-standard:hover, .gd-trio-card:hover, .gd-chip:hover, .gd-reason:hover { border-color: var(--cx-ember) !important; background: var(--cx-bg-3) !important; }
.gd-card-scrim { background: linear-gradient(to top, rgba(6, 6, 6, 0.96) 0%, rgba(6, 6, 6, 0.7) 28%, rgba(6, 6, 6, 0.1) 58%, rgba(6, 6, 6, 0.05)) !important; }
.gd-card-flag { background: rgba(6, 6, 6, 0.6); border-color: var(--cx-line-3); border-radius: 0; color: #fff; }
.gd-card-id { color: #fff; }
.gd-card-role { color: var(--cx-ember); }
.gd-card-metric strong, .gd-standard-title, .gd-trio-title, .gd-panel-title, .gd-timeline strong, .gd-reason p strong, .gd-modal-foot-text strong { color: #fff; }
.gd-tag { background: transparent; border-radius: 0; }
.gd-card-cta { color: var(--cx-ember); }
.gd-trio-icon { background: transparent; border: 1px solid var(--cx-line-3); border-radius: 50%; }
.gd-standard-num { color: var(--cx-ember); font-weight: 900; }
.gd-modal-overlay { background: rgba(4, 4, 4, 0.86); }
.gd-modal { background: var(--cx-bg-2) !important; border: 1px solid var(--cx-line); border-radius: 0 !important; }
.gd-modal-top { background: var(--cx-bg-3); }
.gd-modal-portrait::after { background: linear-gradient(100deg, transparent 55%, rgba(18, 18, 20, 0.96) 100%) !important; }
.gd-modal-eyebrow { background: transparent; border-color: var(--cx-line-3); color: var(--cx-ember); border-radius: 0; }
.gd-modal-role, .gd-block-title, .gd-signature-label { color: var(--cx-ember); }
.gd-modal-close { border-radius: 0; background: rgba(6, 6, 6, 0.7); }
.gd-pullquote { background: rgba(255, 107, 52, 0.06); border-radius: 0; color: #fff; }
.gd-timeline li::before { background: var(--cx-bg-2) !important; }
.gd-signature { background: var(--cx-bg-3); border-radius: 0; }
.gd-signature-mark { fill: var(--cx-ember); }
.gd-btn-quiet { border-radius: 0; color: #fff; }
.gd-btn-quiet:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.gd-modal-shot { border-radius: 0; }
@media (max-width: 800px) {
    .gd-modal-portrait::after { background: linear-gradient(to top, rgba(18, 18, 20, 0.96), transparent 60%) !important; }
}

/* ---- International (.intl-*) ---- */
:root {
    --intl-navy: #ffffff;
    --intl-navy-deep: #050505;
    --intl-navy-mid: #1b1b1e;
    --intl-gold: #ff6b34;
    --intl-gold-deep: #ff6b34;
    --intl-gold-soft: #ffd7c4;
    --intl-cream: #060606;
    --intl-mist: #0a0a0b;
    --intl-muted: rgba(244, 241, 234, 0.6);
    --intl-accent: #ff6b34;
    --intl-accent-soft: rgba(255, 107, 52, 0.12);
    --intl-line: rgba(255, 255, 255, 0.14);
}

.intl-theme-bali { --intl-accent: #ff9b54; --intl-accent-soft: rgba(255, 155, 84, 0.13); }
.intl-theme-vietnam { --intl-accent: #3fd0b8; --intl-accent-soft: rgba(63, 208, 184, 0.13); }

body.intl-body { background-color: var(--cx-bg); color: var(--cx-fg-2); }
.intl-section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.intl-section--white { background: var(--cx-bg); }
.intl-section--alt, .intl-section--dark { background: var(--cx-bg-2); border-top: 1px solid var(--cx-line-2); border-bottom: 1px solid var(--cx-line-2); color: var(--cx-fg-2); }
.intl-head { text-align: left; max-width: 820px; margin: 0 0 clamp(2.4rem, 5vw, 4rem); }
.intl-head--left { margin-left: 0; }
.intl-eyebrow::after { display: none !important; }
.intl-title { font-size: clamp(2rem, 4.4vw, 3.9rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.intl-title em { color: var(--intl-accent); font-style: normal; }
.intl-sub { color: var(--cx-fg-3); line-height: 1.85; }
.intl-facts, .intl-subnav { background: rgba(8, 8, 9, 0.9) !important; border-color: var(--cx-line-2) !important; }
.intl-subnav a { color: var(--cx-fg-3); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 0; }
.intl-subnav a:hover, .intl-subnav a.is-active { background: transparent; color: #fff; }
.intl-fact-icon, .intl-hl-icon, .intl-booking-perk-icon { background: transparent; border: 1px solid var(--cx-line-3); border-radius: 50%; }
.intl-fact-value, .intl-dest-title, .intl-hl h3, .intl-day-title, .intl-incexc-title, .intl-booking-perk h3, .intl-form-title, .intl-dest-link, .intl-overview-badge strong, .intl-day-list li strong { color: #fff; }
.intl-dest-card, .intl-hl, .intl-incexc-col, .intl-form-card { background: var(--cx-bg-2); border: 1px solid var(--cx-line-2); border-radius: 0; box-shadow: none; }
.intl-dest-card:hover, .intl-hl:hover { transform: translateY(-6px); border-color: var(--intl-accent); box-shadow: none; }
.intl-dest-flag { background: rgba(6, 6, 6, 0.7); border-radius: 0; }
.intl-tag { background: transparent; border: 1px solid var(--cx-line-3); border-radius: 0; color: var(--intl-accent); }
.intl-dest-action { background: #fff; color: #050505; border-radius: 0; }
.intl-dest-action:hover { background: var(--cx-ember); }
.intl-overview-badge { background: rgba(10, 10, 11, 0.86); border: 1px solid var(--cx-line); border-radius: 0; }
.intl-overview-media { border-radius: 0; }
.intl-day-note { background: rgba(255, 255, 255, 0.04); border-left-color: var(--intl-accent); border-radius: 0; color: var(--cx-fg-2); }
.intl-form-group label { color: var(--cx-fg-3); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.intl-form-group input, .intl-form-group select, .intl-form-group textarea { background: transparent !important; border: 0; border-bottom: 1px solid var(--cx-line-3); border-radius: 0; color: #fff; padding-left: 0; padding-right: 0; }
.intl-form-group input:focus, .intl-form-group select:focus, .intl-form-group textarea:focus { border-bottom-color: var(--cx-ember); box-shadow: none; outline: none; }
.intl-form-group select option { background: #0c0c0d; color: #fff; }
.intl-cta-band::after { background: linear-gradient(180deg, rgba(6, 6, 6, 0.86), rgba(6, 6, 6, 0.92)); }
.intl-cta-content { text-align: left; }
.intl-cta-content h2 { font-size: clamp(2rem, 4.4vw, 3.9rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; }

/* ---- Jungle safari (.jng-*) ---- */
:root {
    --jng-ink: #ece9e2;
    --jng-forest: #ffffff;
    --jng-forest-mid: #1b1b1e;
    --jng-leaf: #ff6b34;
    --jng-leaf-bright: #ff8f61;
    --jng-mist: #0a0a0b;
    --jng-sand: #0b0b0c;
    --jng-cream: #060606;
    --jng-gold: #ff6b34;
    --jng-gold-deep: #ff6b34;
    --jng-gold-soft: #ffd7c4;
    --jng-muted: rgba(236, 233, 226, 0.6);
    --jng-ink-soft: rgba(236, 233, 226, 0.8);
    --jng-glass: rgba(255, 255, 255, 0.04);
    --jng-glass-border: rgba(255, 255, 255, 0.1);
    --jng-line: rgba(255, 255, 255, 0.14);
}

body.jng-body { background-color: var(--cx-bg); color: var(--cx-fg-2); }
.jng-hero, .jng-cta-band { background: #050505; }
.jng-section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.jng-section--white { background: var(--cx-bg); }
.jng-section--alt, .jng-section--dark { background: var(--cx-bg-2); border-top: 1px solid var(--cx-line-2); border-bottom: 1px solid var(--cx-line-2); color: var(--cx-fg-2); }
.jng-head { text-align: left; max-width: 820px; margin: 0 0 clamp(2.4rem, 5vw, 4rem); }
.jng-eyebrow::after { display: none !important; }
.jng-title { font-size: clamp(2rem, 4.4vw, 3.9rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.jng-sub { color: var(--cx-fg-3); line-height: 1.85; }
.jng-hero-overlay { background: linear-gradient(to top, var(--cx-bg) 0%, rgba(6, 6, 6, 0.72) 22%, rgba(6, 6, 6, 0.18) 58%, rgba(6, 6, 6, 0.5) 100%), radial-gradient(120% 90% at 70% 35%, transparent 40%, rgba(6, 6, 6, 0.55) 100%) !important; }
.jng-facts-inner { background: rgba(10, 10, 11, 0.86); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid var(--cx-line); border-radius: 0; box-shadow: none; }
.jng-subnav { background: rgba(8, 8, 9, 0.9) !important; border-color: var(--cx-line-2) !important; }
.jng-subnav a { color: var(--cx-fg-3); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 0; }
.jng-subnav a:hover { background: transparent; color: #fff; }
.jng-fact-icon, .jng-card-icon, .jng-feature-icon, .jng-review-avatar { background: transparent; border: 1px solid var(--cx-line-3); box-shadow: none; }
.jng-fact-icon svg, .jng-card-icon svg, .jng-feature-icon svg { fill: var(--cx-ember); }
.jng-fact-value, .jng-card-title, .jng-species-name, .jng-day-title, .jng-incexc-title, .jng-feature h3, .jng-booking-perk h3, .jng-form-title, .jng-review-author h3, .jng-ticket-amount, .jng-stat strong, .jng-rating-strip strong, .jng-day-list li strong, .jng-overview-media-badge strong { color: #fff; }
.jng-card, .jng-species, .jng-incexc, .jng-feature, .jng-ticket, .jng-form-card, .jng-rating-strip, .jng-review, .jng-stat { background: var(--cx-bg-2); border: 1px solid var(--cx-line-2); border-radius: 0; box-shadow: none; }
.jng-card:hover, .jng-species:hover, .jng-feature:hover { transform: translateY(-6px); border-color: var(--cx-ember); background: var(--cx-bg-3); box-shadow: none; }
.jng-chip { background: transparent; border: 1px solid var(--cx-line-3); border-radius: 0; color: var(--cx-fg-2); }
.jng-species-rarity { background: transparent; border: 1px solid var(--cx-line-3); border-radius: 0; color: var(--cx-ember); }
.jng-day-note { background: rgba(255, 255, 255, 0.04); border-radius: 0; }
.jng-overview-media-badge { background: rgba(10, 10, 11, 0.86); border: 1px solid var(--cx-line); border-radius: 0; }
.jng-form-group input, .jng-form-group textarea { background: transparent !important; border: 0; border-bottom: 1px solid var(--cx-line-3); border-radius: 0; color: #fff; padding-left: 0; padding-right: 0; }
.jng-form-group input:focus, .jng-form-group textarea:focus { border-bottom-color: var(--cx-ember); box-shadow: none; outline: none; }
.jng-form-group label { color: var(--cx-fg-3); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.jng-ticket-stub { background: var(--cx-bg-3); }
.jng-cta-content { text-align: left; }
.jng-cta-content h2 { font-size: clamp(2rem, 4.4vw, 3.9rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; }
.jng-video-tile-play span { background: rgba(255, 255, 255, 0.9); color: #050505; }


/* ==========================================================================
   14. BLOG, ARTICLES, FAQ, REVIEWS
   ========================================================================== */
.blog-featured, .blog-card, .blog-sidebar-card { background: var(--cx-bg-2); border: 1px solid var(--cx-line-2); border-radius: 0; box-shadow: none; }
.blog-featured:hover, .blog-card:hover { transform: translateY(-6px); border-color: var(--cx-line-3); box-shadow: none; }
.blog-card::before { display: none !important; }
.blog-featured-title, .blog-card-title, .blog-sidebar-title, .blog-popular-item h4, .blog-author-info strong, .blog-filter-label { color: #fff; font-weight: 800; }
.blog-card:hover .blog-card-title { color: var(--cx-ember); }
.blog-featured-badge { background: #fff; color: #050505; border-radius: 0; box-shadow: none; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.blog-card-img, .blog-featured-img-wrap img { filter: saturate(0.92) contrast(1.04); }
.blog-category-tag, .blog-card-category, .blog-modal-category-tag { border-radius: 0; border: 1px solid var(--cx-line-3); background: rgba(6, 6, 6, 0.6); color: #fff; font-weight: 800; letter-spacing: 0.16em; }
.blog-category-guide, .blog-category-tips, .blog-category-health, .blog-category-gear, .blog-category-culture { background: rgba(6, 6, 6, 0.6); color: #fff; }
.blog-pill { background: transparent; border: 1px solid var(--cx-line); border-radius: 0; color: var(--cx-fg-3); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.blog-pill:hover { background: transparent; border-color: #fff; color: #fff; }
.blog-pill.active { background: #fff; color: #050505; border-color: #fff; box-shadow: none; }
.blog-card-read-btn { background: #fff; color: #050505; border-radius: 0; box-shadow: none; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.blog-card-overlay { background: linear-gradient(to top, rgba(6, 6, 6, 0.88), rgba(6, 6, 6, 0.2) 60%, transparent); }
.blog-popular-item:hover, .blog-category-item:hover { background: rgba(255, 255, 255, 0.04); }
.blog-category-count { background: transparent; border: 1px solid var(--cx-line); border-radius: 0; }
.blog-newsletter-section { background: var(--cx-bg); }
.blog-newsletter-content h2 { font-weight: 800; text-transform: uppercase; }

/* Article modal */
.blog-modal-overlay { background: rgba(4, 4, 4, 0.9); }
.blog-modal { background: var(--cx-bg-2); border: 1px solid var(--cx-line); border-radius: 0; box-shadow: none; }
.blog-modal-body { background: var(--cx-bg-2); }
.blog-modal-close { background: rgba(6, 6, 6, 0.8); border: 1px solid var(--cx-line-3); border-radius: 0; color: #fff; }
.blog-modal-close:hover { background: #fff; color: #050505; border-color: #fff; }
.blog-modal-progress-fill { background: var(--cx-ember); }
.blog-modal-hero-overlay { background: linear-gradient(to top, rgba(6, 6, 6, 0.95) 0%, rgba(6, 6, 6, 0.4) 55%, transparent 100%); }
.blog-modal-article h2 { text-transform: none; color: #fff; border-bottom-color: var(--cx-line); }
.blog-modal-article h2::after { background: var(--cx-ember); }
.blog-modal-article h3 { color: #fff; }
.blog-modal-article p, .article-highlight ul li, .article-checklist li, .article-plain-list li, .article-table tbody td { color: var(--cx-fg-2); }
.article-lead { color: #fff; font-family: var(--cx-font); border-left-color: var(--cx-ember); }
.article-highlight { background: rgba(255, 255, 255, 0.04); border-color: var(--cx-line); border-radius: 0; }
.article-tip { color: #8ee9bf; background: rgba(16, 185, 129, 0.08); border-radius: 0; }
.article-warning { color: #ffb4b4; background: rgba(239, 68, 68, 0.08); border-radius: 0; }
.article-checklist li { background: rgba(255, 255, 255, 0.03); border-radius: 0; }
.check-box { background: #fff; color: #050505; border-radius: 0; }
.article-table-wrap { border-radius: 0; }
.article-table thead { background: #fff; color: #050505; }
.table-total td { background: rgba(255, 255, 255, 0.05); color: #fff; }
.blog-modal-author-card { background: rgba(255, 255, 255, 0.03); border-radius: 0; }

/* FAQ page + generic accordions already restyled; page chrome */
.faq-category, .faq-item { border-radius: 0; }


/* ==========================================================================
   Sticky sub-navigations ride just under the header — and slide up with it
   when js/cinema.js hides the header on the way down (html.cx-hdr-off)
   ========================================================================== */
:root { --cx-sticky-top: 66px; }
html.cx-hdr-off { --cx-sticky-top: 0px; }

.exp-filters,
.trek-meta-strip,
.blog-filter-section,
.legal-nav,
.intl-subnav,
.jng-subnav {
    top: var(--cx-sticky-top) !important;
    transition: top 0.55s var(--cx-ease);
}

.blog-sidebar,
.trek-sidebar {
    top: calc(var(--cx-sticky-top) + 90px) !important;
    transition: top 0.55s var(--cx-ease);
}


/* ==========================================================================
   Assistant: elements that used its "navy" token as TEXT on a light surface
   ========================================================================== */
.tb-chat-chip,
.tb-chat-link--ghost { color: #fff; border-radius: 0; background: transparent; }

.tb-chat-chip:hover,
.tb-chat-chip:focus-visible,
.tb-chat-link--ghost:hover { background: #fff; border-color: #fff; color: #050505; transform: none; }

.tb-chat-msg--user .tb-chat-bubble { background: #1d1d20; border: 1px solid var(--cx-line-3); color: #fff; }
.tb-chat-bubble { border-radius: 0; }
.tb-chat-link { border-radius: 0; color: #050505; font-weight: 800; letter-spacing: 0.04em; }
.tb-chat-head { border-bottom-color: var(--cx-line); }
.tb-chat-panel { border: 1px solid var(--cx-line); border-radius: 0; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); }

/* Cross-reference badge on peak cards: dark text on its white chip */
.exp-card--xref .exp-badge { color: #050505; }
.exp-card--xref .exp-badge-dot { background: var(--cx-ember); box-shadow: 0 0 0 3px rgba(255, 107, 52, 0.25); }


/* ==========================================================================
   Skip link (inserted by js/cinema.js) + programmatic focus targets
   ========================================================================== */
.cx-skip {
    position: fixed;
    top: 0.8rem;
    left: 0.8rem;
    z-index: 100000;
    padding: 0.85rem 1.3rem;
    background: #fff;
    color: #050505;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transform: translateY(-220%);
    transition: transform 0.35s var(--cx-ease);
}

.cx-skip:focus { transform: none; outline: 2px solid var(--cx-ember); outline-offset: 2px; }
[tabindex='-1']:focus { outline: none; }


/* The mega menu opens on keyboard focus; its items showed focus only by a colour change.
   Give them the same ring as every other control. */
.mega-card:focus-visible,
.mega-all:focus-visible,
.nav-sub-toggle:focus-visible {
    outline: 2px solid var(--cx-ember);
    outline-offset: 2px;
}