/* ================================================================
   SERENGETI BUDGET SAFARI – HEADER CSS
   Floating pill navigation: transparent bar over the hero, logo on
   the bare left, white rounded nav capsule in the middle, phone +
   CTA on the right. Turns solid once the page is scrolled.
   ================================================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    background: transparent;
    transition: background var(--transition), box-shadow var(--transition);
    padding: 0 26px;
    display: flex;
    align-items: center;
    border-bottom: none;
}

.site-header.scrolled {
    background: rgba(255, 248, 235, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* The transparent bar only works over a full-bleed hero. Inner pages open
   on light content (breadcrumb, article), where white-on-white text would
   vanish — so there the header is solid from the start. `body.hero-behind-header` is
   set on pages whose hero sits directly behind the header. */
body:not(.hero-behind-header) .site-header {
    background: rgba(255, 248, 235, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

body:not(.hero-behind-header) .logo,
body:not(.hero-behind-header) .header-phone-number {
    color: var(--black);
    text-shadow: none;
}

body:not(.hero-behind-header) .logo img {
    filter: none;
}

body:not(.hero-behind-header) .header-phone-label {
    color: var(--gray-600);
    text-shadow: none;
}

body:not(.hero-behind-header) .header-phone {
    border-right-color: rgba(0, 0, 0, 0.12);
}

body:not(.hero-behind-header) .lang-toggle {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--black);
}

body:not(.hero-behind-header) .hamburger span {
    background: var(--black);
    box-shadow: none;
}

/* The markup reuses `.container`, whose 1240px cap is narrower than the
   header needs — the logo, nav pill and actions together want ~1300px, so
   the pill was being squeezed below the width of its own links.
   `.container.header-container` outranks the plain `.container` rule. */
.container.header-container,
.header-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 100%;
    min-width: 0;
}

/* The logo and the right-hand actions keep their intrinsic size; only the
   nav pill flexes. Letting every child shrink squeezed the pill below the
   width of its own links, which then spilled out under the logo. */
.header-container > .logo,
.header-container > .header-right {
    flex: 0 0 auto;
}

/* ============================================================
   LOGO – sits directly on the hero, so it needs a shadow
   ============================================================ */

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--white);
    flex: 0 0 auto;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.logo img {
    height: 46px;
    width: auto;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

.logo span {
    color: inherit;
}

.logo span span {
    color: var(--gold);
}

.scrolled .logo {
    color: var(--black);
    text-shadow: none;
}

.scrolled .logo img {
    height: 40px;
    filter: none;
}

/* ============================================================
   NAV PILL – white capsule floating over the hero
   ============================================================ */

#mainNav {
    background: var(--white);
    border-radius: 60px;
    padding: 0.55rem 1.6rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    /* `auto` basis, not 0 — with a 0 basis the pill drew at its flex share
       while the un-shrinkable links kept their intrinsic width and spilled
       out both ends, sliding under the logo. */
    flex: 0 1 auto;
    min-width: 0;
    /* Belt and braces: the capsule can never be narrower than its links. */
    width: max-content;
    max-width: 100%;
}

#mainNav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    list-style: none;
    min-width: 0;
    flex-wrap: nowrap;
}

#mainNav ul > li > a,
#mainNav ul li .mega-trigger {
    color: var(--black);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: color var(--transition);
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}

#mainNav ul > li > a:hover,
#mainNav ul > li > a.active {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
}

/* The old in-nav contact button is redundant now that the header
   has its own CTA — hide it on desktop, restore it in the mobile
   panel where the right-hand actions are not visible. */
#mainNav ul li a.btn-nav {
    display: none;
}

/* ============================================================
   HEADER RIGHT – phone block, language, CTA
   ============================================================ */

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.header-phone {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-right: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.scrolled .header-phone {
    border-right-color: rgba(0, 0, 0, 0.12);
}

.header-phone-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(212, 168, 67, 0.35);
}

.header-phone-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.header-phone-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.header-phone-number {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    transition: color var(--transition);
}

.header-phone-number:hover {
    color: var(--gold);
}

.scrolled .header-phone-label {
    color: var(--gray-600);
    text-shadow: none;
}

.scrolled .header-phone-number {
    color: var(--black);
    text-shadow: none;
}

/* CTA button */
.header-cta {
    background: var(--gold);
    color: var(--black);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.75rem 1.7rem;
    border-radius: 60px;
    white-space: nowrap;
    transition: var(--transition);
    box-shadow: 0 6px 22px rgba(212, 168, 67, 0.3);
}

.header-cta:hover {
    background: var(--gold-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(212, 168, 67, 0.4);
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */

.site-header,
.header-container,
.lang-switcher {
    overflow: visible !important;
}

.lang-switcher {
    position: relative;
    z-index: 99999;
}

.lang-toggle {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--white);
    padding: 0.4rem 0.85rem;
    border-radius: 40px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition);
}

.lang-toggle:hover {
    background: rgba(212, 168, 67, 0.9);
    border-color: var(--gold);
    color: var(--black);
}

.lang-current-code {
    font-weight: 700;
    color: inherit;
}

.scrolled .lang-toggle {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--black);
}

.scrolled .lang-toggle:hover {
    background: rgba(212, 168, 67, 0.15);
    border-color: var(--gold);
}

.lang-chevron {
    width: 10px;
    height: 10px;
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    border: 1px solid rgba(212, 168, 67, 0.3);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0;
    min-width: 160px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: var(--transition);
    box-shadow: var(--shadow-elevated);
    list-style: none;
    z-index: 100000;
}

.lang-dropdown.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.lang-dropdown li a {
    display: flex;
    justify-content: space-between;
    padding: 0.45rem 1rem;
    color: var(--gray-800);
    font-size: 0.82rem;
    transition: var(--transition);
}

.lang-dropdown li a:hover,
.lang-dropdown li a.active {
    background: rgba(212, 168, 67, 0.08);
    color: var(--gold-dark);
}

.lang-dropdown .lang-code {
    color: var(--gold-dark);
    font-weight: 600;
    font-size: 0.72rem;
}

/* ============================================================
   HAMBURGER
   ============================================================ */

.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    z-index: 1001;
    flex-shrink: 0;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
    transform-origin: center;
}

.scrolled .hamburger span,
.hamburger.open span {
    background: var(--black);
    box-shadow: none;
}

.hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* The three groups compete for one row, so each step below sheds width
   before the nav pill can collide with the phone block beside it.
   The Italian menu is the widest (ten items), so the logo wordmark is the
   first thing to go — the mark itself still links home. */
/* Below this the wordmark competes with the nav pill; the mark still links
   home, so drop the text rather than crowd the menu. */
@media (max-width: 1450px) {
    .logo span {
        display: none;
    }
}

@media (max-width: 1500px) {
    .header-container {
        gap: 1rem;
    }

    #mainNav {
        padding: 0.5rem 1.2rem;
    }

    #mainNav ul {
        gap: 1rem;
    }

    #mainNav ul li a {
        font-size: 0.82rem;
    }

    .header-cta {
        padding: 0.65rem 1.3rem;
        font-size: 0.82rem;
    }
}

/* Drop the "Call Anytime" label and number — the gold icon still links out. */
@media (max-width: 1330px) {
    .header-phone-text {
        display: none;
    }

    .header-phone {
        padding-right: 0.7rem;
    }

    #mainNav ul {
        gap: 0.85rem;
    }

    #mainNav ul li a {
        font-size: 0.78rem;
    }
}

/* Below this the row cannot hold nav + phone + language + CTA. */
@media (max-width: 1180px) {
    .header-phone {
        display: none;
    }

    #mainNav {
        padding: 0.45rem 1rem;
    }
}

/* Mobile: pill becomes a slide-in panel.
   Raised from 1024px because the Italian menu carries ten items and began
   sliding under the logo well before that width. */
@media (max-width: 1300px) {
    .hamburger {
        display: flex;
    }

    .header-phone {
        display: none;
    }

    #mainNav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        border-radius: 0;
        background: rgba(255, 248, 235, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 80px 1.5rem 1.5rem;
        transition: right var(--transition);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
        overflow-y: auto;
    }

    #mainNav.open {
        right: 0;
    }

    #mainNav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

    #mainNav ul li a {
        font-size: 1rem;
        color: var(--black);
    }

    /* Restore the contact button inside the panel */
    #mainNav ul li a.btn-nav {
        display: inline-block;
        margin-top: 0.5rem;
        background: var(--gold);
        color: var(--black);
        border-bottom: none;
        border-radius: 60px;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 0.5rem 1.6rem;
    }

    #mainNav ul li a.btn-nav:hover {
        background: var(--gold-dark);
        color: var(--white);
        border-bottom: none;
    }
}

@media (max-width: 640px) {
    .site-header {
        height: 64px;
        padding: 0 12px;
    }

    .header-right {
        gap: 0.6rem;
    }

    .logo {
        font-size: 0.85rem;
        gap: 6px;
    }

    .logo img {
        height: 34px;
    }

    .scrolled .logo img {
        height: 30px;
    }

    .header-cta {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .lang-toggle {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }

    .hamburger span {
        width: 20px;
    }

    #mainNav {
        width: 260px;
        padding: 70px 1.2rem 1.2rem;
    }

    #mainNav ul {
        gap: 0.7rem;
    }

    #mainNav ul li a {
        font-size: 0.92rem;
    }
}

/* Very small screens – drop the CTA label to keep the bar on one line */
@media (max-width: 400px) {
    .header-cta {
        padding: 0.45rem 0.85rem;
        font-size: 0.7rem;
    }

    .logo span {
        display: none;
    }
}
/* ================================================================
   SERENGETI BUDGET SAFARI – BASE CSS
   ================================================================ */

/* ============================================================
   GROUP 1 – RESET & BASE VARIABLES
   ============================================================ */

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

:root {
    /* — Primary palette: Black & Gold — */
    --black: #0d0d0d;
    --black-light: #1a1a1a;
    --black-mid: #2a2a2a;
    --gold: #d4a843;
    --gold-light: #f0d080;
    --gold-dark: #b8922f;
    --gold-glow: rgba(212, 168, 67, 0.25);

    /* — Neutrals — */
    --white: #ffffff;
    --cream: #faf7f0;
    --gray-100: #f5f5f5;
    --gray-200: #e8e8e8;
    --gray-300: #d0d0d0;
    --gray-600: #6b6b6b;
    --gray-800: #2e2e2e;

    /* — Semantic — */
    --bg-body: var(--cream);
    --text-primary: var(--black);
    --text-secondary: var(--gray-600);
    --accent: var(--gold);
    --accent-hover: var(--gold-dark);

    /* — Typography —
       The design uses one geometric sans for both headings and body, so
       --font-display now resolves to Inter as well. The Playfair stack is
       kept under --font-serif for anywhere a serif is genuinely wanted. */
    --font-display: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-playfair: 'Playfair Display', serif;

    /* — Spacing — */
    --container-max: 1240px;
    --header-height: 80px;
    --radius: 20px;
    --radius-sm: 12px;
    --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.08);
    --shadow-elevated: 0 30px 60px rgba(0, 0, 0, 0.12);
    --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ------------------------------------------------------------------
       Compatibility aliases.
       Pages written against earlier iterations of the design still call
       these names. They resolve onto the black & gold palette above so
       those pages render correctly instead of falling back to unstyled
       defaults. Prefer the canonical names in new work.
       ------------------------------------------------------------------ */

    /* Brand */
    --primary: var(--gold);
    --primary-dark: var(--gold-dark);
    --primary-light: var(--gold-light);
    --secondary: var(--black);
    --accent-gold: var(--gold);
    --color-gold: var(--gold);
    --safari-gold: var(--gold);
    --gold-gradient: linear-gradient(135deg, var(--gold), var(--gold-light));

    /* Park / page accents */
    --ngoro-gold: var(--gold);
    --ngoro-blue: #1e3a5f;
    --ngoro-dark: var(--black);
    --ngoro-green: #2f5d3a;
    --manyara-gold: var(--gold);
    --manyara-purple: #5b3f7a;
    --tarangire-gold: var(--gold);
    --tarangire-sunset: #e07b39;
    --arusha-gold: var(--gold);
    --arusha-gold-light: var(--gold-light);
    --arusha-sunset: #e07b39;
    --poland-red: #dc143c;
    --green: #2f7d4f;
    --green-light: #4aa06c;
    --safari-green: #2f7d4f;
    --safari-green-light: #4aa06c;
    --sand: var(--cream);
    --safari-cream: var(--cream);

    /* Neutrals & text */
    --dark: var(--black);
    --dark-card: var(--black-light);
    --light-gray: var(--gray-100);
    --gray: var(--gray-600);
    --text: var(--black);
    --text-dark: var(--black);
    --text-light: var(--gray-600);
    --text-muted: var(--gray-600);
    --safari-text: var(--black);
    --safari-muted: var(--gray-600);

    /* Typography */
    --font-sans: var(--font-body);
    --font-serif: var(--font-playfair);

    /* Spacing & radii */
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4.5rem;
    --radius-md: var(--radius-sm);
    --radius-card: var(--radius);
    --radius-premium: var(--radius);
    --border-radius-card: var(--radius);
    --border-radius-premium: var(--radius);

    /* Shadows & motion */
    --shadow: var(--shadow-card);
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-hover: var(--shadow-elevated);
    --shadow-premium: var(--shadow-elevated);
    --transition-premium: var(--transition);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    /* Deliberately not `overflow: hidden` — that clipped dropdowns, shadows
       and sticky children. Horizontal bleed is handled per-element instead. */
}

/* ------------------------------------------------------------------
   Headings. Previously only scoped rules set a family, so any heading
   a page didn't anticipate fell back to the browser serif.
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.1rem; letter-spacing: -0.01em; }
h5, h6 { font-size: 1rem; letter-spacing: 0; }

/* Headings inside a dark hero must not inherit the global dark text colour.
   The global h1..h6 rule added above set --text-primary everywhere, which
   turned these invisible against their own photo backgrounds. */
[class*="hero"] h1, [class*="hero"] h2, [class*="hero"] h3,
[class*="hero"] h4, [class*="hero"] p, [class*="hero"] li,
.hero h1, .hero h2, .hero h3, .hero p {
    color: inherit;
}


/* Nothing should be able to push the page sideways. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Media and tables are the usual culprits behind horizontal scroll. */
img,
video,
iframe,
svg {
    max-width: 100%;
}

table {
    max-width: 100%;
}

.section-title-left {
    margin-bottom: 2.5rem;
}

.section-title-left .section-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    background: rgba(212, 168, 67, 0.12);
    padding: 0.25rem 1rem;
    border-radius: 40px;
    margin-bottom: 0.5rem;
}

.section-title-left h2 {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--black);
}

.section-title-left p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 580px;
}

/* Centered variant — badge, heading and intro text centred as a block */
.section-title-left.centered {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-title-left.centered p {
    max-width: 640px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.8rem;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    justify-content: center;
}

.btn-primary {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
}

.btn-primary:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--gold-glow);
}

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

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

.btn-sm {
    padding: 0.4rem 1.2rem;
    font-size: 0.85rem;
}

.btn-lg {
    padding: 1rem 2.8rem;
    font-size: 1.05rem;
}

.btn-success {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}

.btn-success:hover {
    background: #1da85c;
    border-color: #1da85c;
}

.btn-secondary {
    background: var(--black);
    color: var(--white);
}

.btn-secondary:hover {
    background: var(--black-light);
}

.text-center {
    text-align: center;
}

.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}




/* ============================================================
   BACK TO TOP BUTTON – FULLY VISIBLE
   ============================================================ */

.jump-to-top {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999999 !important;  /* Super high */
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.8rem 1.5rem 0.8rem 1.2rem !important;
    background: rgba(10, 26, 43, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 2px solid #d4a843 !important;
    border-radius: 50px !important;
    color: #d4a843 !important;
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    opacity: 1 !important;  /* Always visible */
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
    letter-spacing: 0.03em !important;
}

/* Hover */
.jump-to-top:hover {
    background: rgba(212, 168, 67, 0.2) !important;
    border-color: #f0d080 !important;
    color: #ffffff !important;
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(212, 168, 67, 0.1) !important;
}

.jump-to-top i {
    font-size: 1.2rem !important;
    color: #d4a843 !important;
    transition: transform 0.3s ease !important;
}

.jump-to-top:hover i {
    transform: translateY(-3px) !important;
}

.jump-to-top .jump-label {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: color 0.3s ease !important;
}

.jump-to-top:hover .jump-label {
    color: #ffffff !important;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .jump-to-top {
        bottom: 85px !important;  /* Above sticky booking */
        right: 16px !important;
        padding: 0.6rem 0.9rem !important;
        border-radius: 50% !important;
        min-width: 52px !important;
        min-height: 52px !important;
        justify-content: center !important;
        background: rgba(10, 26, 43, 0.95) !important;
    }
    
    .jump-to-top .jump-label {
        display: none !important;
    }
    
    .jump-to-top i {
        font-size: 1.4rem !important;
    }
    
    .jump-to-top:hover {
        transform: scale(1.1) !important;
    }
}

@media (max-width: 480px) {
    .jump-to-top {
        bottom: 75px !important;
        right: 12px !important;
        padding: 0.5rem 0.6rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    .jump-to-top i {
        font-size: 1.2rem !important;
    }
}/* ================================================================
   SERENGETI BUDGET SAFARI – LAYOUT
   Grid, breadcrumbs, utility columns and page scaffolding shared by
   every inner page (safari, parks, zanzibar, trekking, day trips).
   Depends on the custom properties declared in base.css.
   ================================================================ */

/* ============================================================
   PAGE SCAFFOLD
   ============================================================ */

main {
    display: block;
}

.page-wrapper,
.page-content {
    padding-top: var(--header-height);
}

section {
    position: relative;
}

.bg-light {
    background: var(--gray-100);
}

.bg-cream {
    background: var(--cream);
}

.bg-dark {
    background: var(--black);
    color: var(--white);
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3 {
    color: var(--white);
}

/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb {
    padding: 1rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* The header is fixed, so a breadcrumb that is the first thing after it
   would sit underneath it. Push it clear. */
.site-header + .breadcrumb,
.site-header + * > .breadcrumb:first-child {
    margin-top: var(--header-height);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-link {
    color: var(--text-secondary);
    transition: color var(--transition);
}

.breadcrumb-link:hover {
    color: var(--gold);
}

.breadcrumb-item[aria-current="page"],
.breadcrumb-item.active {
    color: var(--black);
    font-weight: 600;
}

.breadcrumb-separator {
    color: var(--gray-300);
    font-size: 0.7rem;
}

/* ============================================================
   GENERIC GRID HELPERS (Bootstrap-like names used across pages)
   ============================================================ */

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.row > [class*="col-"] {
    padding: 0 12px;
    width: 100%;
}

.col-6 { width: 50%; }
.col-12 { width: 100%; }

.g-3 { gap: 1rem; }
.g-4 { gap: 1.5rem; }
.g-5 { gap: 2rem; }

@media (min-width: 768px) {
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.3333%; }
    .col-md-6 { width: 50%; }
    .col-md-8 { width: 66.6666%; }
    .col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.3333%; }
    .col-lg-6 { width: 50%; }
    .col-lg-8 { width: 66.6666%; }
}

/* Auto-fit card grids used throughout the site */
.grid-2,
.grid-3,
.grid-4 {
    display: grid;
    gap: 1.5rem;
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ============================================================
   SPACING & TEXT UTILITIES
   ============================================================ */

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }
.me-2 { margin-right: 0.5rem; }
.ms-2 { margin-left: 0.5rem; }
.py-4 { padding: 2rem 0; }
.py-5 { padding: 3rem 0; }

.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.text-muted { color: var(--text-secondary); }
.text-gold { color: var(--gold); }
.text-white { color: var(--white); }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.d-none { display: none; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.w-100 { width: 100%; }

/* ============================================================
   EXTRA BUTTON VARIANTS referenced by inner pages
   ============================================================ */

.btn-warning {
    background: var(--gold-light);
    color: var(--black);
    border-color: var(--gold-light);
}

.btn-warning:hover {
    background: var(--gold);
    border-color: var(--gold);
}

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

.btn-light:hover {
    background: var(--gray-200);
    border-color: var(--gray-200);
}

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

.btn-dark:hover {
    background: var(--black-light);
}

.btn-select {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
    width: 100%;
}

.btn-select:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.btn-block {
    width: 100%;
}

/* ============================================================
   BADGES & TAGS
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.9rem;
    border-radius: 40px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(212, 168, 67, 0.14);
    color: var(--gold-dark);
    white-space: nowrap;
}

.badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.8rem 0;
}

.badge.best,
.badge.diamond,
.badge.luxury {
    background: var(--black);
    color: var(--gold);
}

.badge.blue {
    background: rgba(41, 128, 185, 0.14);
    color: #2980b9;
}

.badge.green {
    background: rgba(37, 211, 102, 0.16);
    color: #1da85c;
}

.free-badge {
    background: rgba(37, 211, 102, 0.16);
    color: #1da85c;
}

.tag,
.wildlife-tag {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: 40px;
    background: var(--gray-100);
    color: var(--gray-800);
    font-size: 0.75rem;
    font-weight: 600;
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold);
    margin-bottom: 0.6rem;
}

/* ============================================================
   RESPONSIVE COLUMN COLLAPSE
   ============================================================ */

@media (max-width: 767px) {
    .row > [class*="col-"] {
        width: 100%;
    }

    .col-6 {
        width: 50%;
    }
}
/* ================================================================
   SERENGETI BUDGET SAFARI – INNER PAGE HEROES
   Inner pages each namespace their hero (zanzibar-hero, kendwa-hero,
   daytrip-hero, tarangire-hero …) but all share the same structure:
   [prefix]-hero > -bg + -overlay + -container > -content > -actions
   The attribute selectors below style every variant at once, so a new
   page only needs to follow the naming convention.
   ================================================================ */

/* ============================================================
   HERO SHELL
   ============================================================ */

[class$="-hero"],
.hero-page,
.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 52vh;
    padding: calc(var(--header-height) + 3rem) 0 3rem;
    overflow: hidden;
    color: var(--white);
    background: var(--black);
}

[class$="-hero-bg"] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transform: scale(1.03);
}

[class$="-hero-bg"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[class$="-hero-overlay"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
            rgba(13, 13, 13, 0.55) 0%,
            rgba(13, 13, 13, 0.62) 45%,
            rgba(13, 13, 13, 0.85) 100%);
}

[class$="-hero-container"],
[class$="-hero-content"] {
    position: relative;
    z-index: 2;
}

[class$="-hero-content"] {
    max-width: 760px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================================
   HERO TYPOGRAPHY
   ============================================================ */

[class$="-hero"] h1,
.page-hero h1,
.hero-page h1 {
    font-family: var(--font-body);
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: 1rem;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

[class$="-hero"] h1 span,
.page-hero h1 span {
    color: var(--gold);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1.1rem;
    margin-bottom: 1.1rem;
    border: 1px solid rgba(212, 168, 67, 0.5);
    border-radius: 40px;
    background: rgba(212, 168, 67, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--gold-light);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-sub,
.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
    max-width: 620px;
    margin: 0 auto 1.8rem;
}

/* ============================================================
   HERO ACTIONS / META / STATS
   ============================================================ */

[class$="-hero-actions"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    position: relative;
    z-index: 2;
}

[class$="-hero-meta"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem;
    margin-bottom: 1.6rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.88);
}

[class$="-hero-meta"] span,
[class$="-hero-meta"] li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
}

[class$="-hero-meta"] i {
    color: var(--gold);
}

[class$="-hero-stats"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.4rem;
    margin-top: 2rem;
    position: relative;
    z-index: 2;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-stat strong,
.hero-stat .stat-number {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
}

.hero-stat span,
.hero-stat .stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.35rem;
}

/* ============================================================
   HERO PRICE / GUIDE / FEATURE CHIPS
   ============================================================ */

.hero-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    margin-bottom: 1.4rem;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(212, 168, 67, 0.4);
}

.hero-price .from {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.hero-price .price,
.hero-price strong {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--gold);
}

.hero-features,
.hero-trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1.4rem;
    position: relative;
    z-index: 2;
}

.hero-features span,
.hero-trust-badges span,
.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.95rem;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--white);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero-features i,
.hero-trust-badges i {
    color: var(--gold);
}

.hero-guide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.6rem;
    position: relative;
    z-index: 2;
}

.hero-guide img,
.hero-guide .avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
}

.hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gold);
    font-weight: 700;
    font-size: 0.9rem;
}

/* ============================================================
   HERO SCROLL CUE
   ============================================================ */

.hero-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    animation: heroBob 2.2s ease-in-out infinite;
}

@keyframes heroBob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-indicator {
        animation: none;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    [class$="-hero"],
    .hero-page,
    .page-hero {
        min-height: 54vh;
        padding: calc(var(--header-height) + 2rem) 0 2.4rem;
    }

    [class$="-hero-stats"] {
        gap: 1.4rem;
    }

    .hero-stat strong,
    .hero-stat .stat-number {
        font-size: 1.5rem;
    }

    [class$="-hero-actions"] .btn {
        width: 100%;
    }
}
/* ================================================================
   SERENGETI BUDGET SAFARI – CONTENT SECTIONS
   Cards, itineraries, FAQ accordions, month/weather grids, package
   cards, related links and CTA blocks used by the inner pages.
   Depends on the custom properties declared in base.css.
   ================================================================ */

/* ============================================================
   SECTION SHELL
   ============================================================ */

.home-section,
.detail-section,
.guide-section,
.cta-section {
    padding: 4rem 0;
}

.home-section.bg-light,
.detail-section.bg-light {
    background: var(--gray-100);
}

.section-title,
.detail-section > .container > h2,
.home-section > .container > h2 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--black);
    margin-bottom: 0.8rem;
}

.section-title.text-center,
.text-center .section-title {
    text-align: center;
}

.subtitle,
.section-sub {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 680px;
    margin-bottom: 2.2rem;
}

.detail-section h3,
.home-section h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--black);
    margin: 1.6rem 0 0.7rem;
}

.detail-section p,
.home-section p {
    color: var(--gray-800);
    margin-bottom: 1rem;
}

.detail-section ul,
.home-section ul {
    margin: 0 0 1.2rem 1.2rem;
}

.detail-section li,
.home-section li {
    margin-bottom: 0.45rem;
    color: var(--gray-800);
}

/* ============================================================
   GENERIC CARD
   ============================================================ */

.card,
.info-card,
.stat-card,
.fact-box,
.dest-card,
.program-card,
.slider-card,
.review-card-custom,
.quick-questions-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.6rem;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover,
.info-card:hover,
.dest-card:hover,
.program-card:hover,
.slider-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.card-image,
.guide-image {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 0.22rem 0.9rem;
    border-radius: 40px;
    background: rgba(0, 0, 0, 0.72);
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 700;
}

.stat-card {
    text-align: center;
}

.stat-card strong,
.stat-card .stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold-dark);
}

.stat-card .stat-label {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Icon bubbles used across cards */
.icon-wrap,
.guide-icon,
.dest-icon,
.related-icon,
.fact-icon,
.qq-icon,
.local-icon,
.activity-icon,
.safety-icon,
.who-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(212, 168, 67, 0.14);
    color: var(--gold-dark);
    font-size: 1.15rem;
}

/* ============================================================
   ITINERARY / DAY BOXES
   ============================================================ */

.itinerary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.day-box,
.itinerary-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-card);
}

.day-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--black);
    padding-bottom: 0.8rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--gray-200);
}

.day-title i {
    color: var(--gold);
}

.time-item {
    display: flex;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--gray-200);
}

.time-item:last-child {
    border-bottom: none;
}

.time-item .time,
.itinerary-time {
    flex-shrink: 0;
    width: 62px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--gold-dark);
    font-variant-numeric: tabular-nums;
}

.time-item .desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--gray-800);
}

.arrow-route {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gold);
    font-weight: 600;
    margin: 0 0.3rem;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */

.faq-column {
    display: grid;
    gap: 0.9rem;
}

.faq-item-acc {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.faq-question-acc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    font-weight: 600;
    color: var(--black);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition);
}

.faq-question-acc:hover {
    background: var(--gray-100);
}

.faq-question-acc span i {
    color: var(--gold);
    transition: transform var(--transition);
}

.faq-item-acc.active .faq-question-acc span i,
.faq-item-acc.open .faq-question-acc span i {
    transform: rotate(180deg);
}

/* Collapsed by default; main.js toggles .active/.open */
.faq-answer-acc {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.3rem;
    transition: max-height var(--transition), padding var(--transition);
}

.faq-item-acc.active .faq-answer-acc,
.faq-item-acc.open .faq-answer-acc {
    max-height: 1200px;
    padding: 0 1.3rem 1.2rem;
}

.faq-answer-acc p {
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 0.6rem;
}

/* Pages that ship no accordion JS keep the answers readable */
.no-js .faq-answer-acc {
    max-height: none;
    padding: 0 1.3rem 1.2rem;
}

/* ============================================================
   QUICK ANSWERS
   ============================================================ */

.quick-questions,
.quick-answer {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.6rem;
    margin-bottom: 1.5rem;
}

.quick-questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.quick-question-item,
.quick-answer-item,
.answer-item {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--gray-200);
}

.quick-question-item:last-child,
.quick-answer-item:last-child,
.answer-item:last-child {
    border-bottom: none;
}

.highlight-answer {
    font-weight: 700;
    color: var(--gold-dark);
}

/* ============================================================
   MONTH / SEASON GRID
   ============================================================ */

.month-card-grid,
.month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}

.month-card,
.month-card-item,
.month-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 1.3rem;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}

.month-card:hover,
.month-card-item:hover,
.month-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.month-icon {
    font-size: 1.9rem;
    margin-bottom: 0.4rem;
}

.month-card h4,
.month-card-item h4,
.month-item h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.month-temp,
.month-price {
    font-weight: 700;
    color: var(--gold-dark);
    margin-bottom: 0.45rem;
}

.month-desc {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: 0.7rem;
}

.month-stars {
    color: var(--gold);
    letter-spacing: 0.1em;
}

.month-tag,
.season {
    display: inline-block;
    padding: 0.2rem 0.85rem;
    border-radius: 40px;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--gray-100);
    color: var(--gray-800);
}

.month-tag.good,
.season.alta,
.season.high,
.month-tag.best {
    background: rgba(37, 211, 102, 0.16);
    color: #1da85c;
}

.month-tag.mid,
.season.mid {
    background: rgba(212, 168, 67, 0.18);
    color: var(--gold-dark);
}

.month-tag.rain,
.season.rain,
.season.low {
    background: rgba(41, 128, 185, 0.14);
    color: #2980b9;
}

/* ============================================================
   PACKAGE CARDS
   ============================================================ */

.package-grid,
.packages-grid,
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.6rem;
}

.package-card-home,
.package-item,
.pkg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition);
}

.package-card-home:hover,
.package-item:hover,
.pkg-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.pkg-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.4rem;
}

.pkg-days,
.package-days {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gold-dark);
    margin-bottom: 0.4rem;
}

.pkg-dest {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 0.7rem;
}

.pkg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.7rem 0 1rem;
}

.price-tag {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--black);
}

.price-tag .from,
.price-tag small {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.pkg-link,
.package-link {
    margin-top: auto;
}

.pkg-img {
    position: relative;
    height: 190px;
    background-size: cover;
    background-position: center;
}

.pkg-badge {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--black);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    box-shadow: var(--shadow-card);
}

.pkg-badge.best {
    background: var(--gold);
    color: var(--black);
}

.pkg-badge.luxury {
    background: var(--black);
    color: var(--white);
}

.pkg-rating {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

.pkg-rating .review-stars {
    font-size: 0.85rem;
}

/* ============================================================
   SAFARI LISTING PAGE (filter bar + results grid)
   ============================================================ */

.listing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.listing-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
}

.listing-filters-label {
    font-weight: 700;
    color: var(--black);
    margin-right: 0.2rem;
}

.listing-select {
    appearance: none;
    flex: 0 1 auto;
    width: auto;
    max-width: 200px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0.6rem 2.2rem 0.6rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--black);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%23142B20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    transition: border-color var(--transition);
}

@media (max-width: 768px) {
    .listing-select {
        max-width: none;
        width: 100%;
    }
}

.listing-select:hover,
.listing-select:focus {
    border-color: var(--gold);
    outline: none;
}

.listing-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--black);
    cursor: pointer;
    transition: background var(--transition);
}

.listing-sort:hover {
    background: var(--gray-200);
}

.listing-count {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.listing-count strong {
    color: var(--black);
}

.listing-empty {
    display: none;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.listing-empty.active {
    display: block;
}

.pkg-card-hidden {
    display: none !important;
}

/* ============================================================
   FACT / INFO ROWS
   ============================================================ */

.fact-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.1rem;
}

.fact-label {
    display: block;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
}

.fact-value {
    font-weight: 700;
    color: var(--black);
}

/* ============================================================
   BEACH / LOCAL / ACTIVITY / SAFETY LISTS
   ============================================================ */

.beach-guide-grid,
.related-links,
.wildlife-grid,
.activity-grid,
.safety-grid,
.who-grid,
.local-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem;
}

.beach-guide-item,
.related-item,
.local-item,
.activity-item,
.safety-item,
.who-item,
.wildlife-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.2rem;
    transition: border-color var(--transition), transform var(--transition);
}

.beach-guide-item:hover,
.related-item:hover,
.local-item:hover,
.activity-item:hover {
    border-color: var(--gold);
    transform: translateX(4px);
}

.related-text {
    flex: 1;
}

.related-text strong {
    display: block;
    color: var(--black);
    margin-bottom: 0.2rem;
}

.related-text span,
.related-text p {
    font-size: 0.87rem;
    color: var(--text-secondary);
}

.related-cta {
    flex-shrink: 0;
    align-self: center;
    color: var(--gold);
    font-weight: 700;
}

/* ============================================================
   REVIEWS
   ============================================================ */

.review-card-custom {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.review-stars {
    color: var(--gold);
    letter-spacing: 0.08em;
}

.review-text {
    font-style: italic;
    line-height: 1.65;
    color: var(--gray-800);
}

.avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

/* ============================================================
   TABLES
   ============================================================ */

.safari-table,
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.safari-table table,
table.safari-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    background: var(--white);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.safari-table th,
.safari-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.92rem;
}

.safari-table th {
    background: var(--black);
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}

.safari-table tr:last-child td {
    border-bottom: none;
}

.safari-table tbody tr:hover {
    background: var(--gray-100);
}

/* ============================================================
   CTA BLOCKS
   ============================================================ */

.cta-section {
    background: var(--black);
    color: var(--white);
    text-align: center;
}

.cta-section h2,
.cta-section h3 {
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    margin-bottom: 0.8rem;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.82);
    max-width: 620px;
    margin: 0 auto 1.8rem;
}

.cta-contact-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem;
    margin-top: 1.6rem;
    font-size: 0.92rem;
}

.cta-contact-info a,
.cta-contact-info span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.cta-contact-info i {
    color: var(--gold);
}

.cta-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    background: rgba(212, 168, 67, 0.1);
    border: 1px solid rgba(212, 168, 67, 0.35);
    border-radius: var(--radius);
    padding: 1.4rem 1.6rem;
    margin: 2rem 0;
}

/* ============================================================
   MISC
   ============================================================ */

.line {
    height: 1px;
    background: var(--gray-200);
    border: none;
    margin: 2rem 0;
}

.dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

.stop {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.7rem 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .home-section,
    .detail-section,
    .guide-section,
    .cta-section {
        padding: 2.6rem 0;
    }

    .itinerary-grid,
    .month-card-grid,
    .package-grid,
    .packages-grid {
        grid-template-columns: 1fr;
    }

    .time-item {
        gap: 0.7rem;
    }

    .time-item .time,
    .itinerary-time {
        width: 54px;
        font-size: 0.8rem;
    }

    .cta-inline {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}
/* ================================================================
   SERENGETI BUDGET SAFARI – FOOTER CSS
   ================================================================ */

/* ============================================================
   GROUP 6 – FOOTER
   ============================================================ */

.mega-footer {
    background: var(--black);
    color: var(--gray-300);
    padding: 4.5rem 0 1.5rem;
    border-top: 1px solid rgba(212, 168, 67, 0.12);
    position: relative;
}

.mega-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(212, 168, 67, 0.05) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
    pointer-events: none;
}

.mega-footer .container {
    position: relative;
}

.mega-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 0.8fr 1.2fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.mega-footer-col h3,
.mega-footer-col h4 {
    font-family: var(--font-display);
    color: var(--white);
    margin-bottom: 1.1rem;
}

.mega-footer-col h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: relative;
    padding-bottom: 0.7rem;
}

.mega-footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26px;
    height: 2px;
    background: var(--gold);
}

.mega-footer-col h3 span {
    color: var(--gold);
}

.mega-footer-col p {
    font-size: 0.9rem;
    line-height: 1.65;
    opacity: 0.7;
}

.mega-footer-col ul {
    list-style: none;
}

.mega-footer-col ul li {
    margin-bottom: 0.55rem;
}

.mega-footer-col ul li a {
    font-size: 0.9rem;
    transition: var(--transition);
    opacity: 0.75;
    position: relative;
}

.mega-footer-col ul li a:hover {
    opacity: 1;
    color: var(--gold);
    padding-left: 4px;
}

.mega-footer-col ul li i {
    color: var(--gold);
    width: 20px;
    opacity: 0.75;
}

.social-links {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--white);
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
    transform: translateY(-3px);
}

.mega-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    opacity: 0.65;
}

.mega-footer-legal {
    display: flex;
    gap: 1.2rem;
}

.mega-footer-legal a:hover {
    color: var(--gold);
    opacity: 1;
}

/* ============================================================
   STICKY BOOKING MOBILE – Ivory background
   ============================================================ */

.sticky-booking {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 248, 235, 0.96);  /* ivory with slight transparency */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    justify-content: space-around;
    padding: 0.5rem 0.5rem;
    border-top: 1px solid rgba(212, 168, 67, 0.25);
    z-index: 999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

/* Sticky buttons – dark text for ivory background */
.sticky-booking .sticky-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 60px;
    transition: var(--transition);
    text-decoration: none;
}

/* WhatsApp button – keep green */
.sticky-btn.whatsapp {
    background: #25D366;
    color: #ffffff;
    border: none;
}

.sticky-btn.whatsapp:hover {
    background: #1da85c;
    transform: scale(1.02);
}

/* Quote button – gold on ivory */
.sticky-btn.quote {
    background: var(--gold);
    color: var(--black);
    border: 1px solid var(--gold);
}

.sticky-btn.quote:hover {
    background: var(--gold-dark);
    color: var(--white);
    border-color: var(--gold-dark);
    transform: scale(1.02);
}

/* Safari button – subtle dark on ivory */
.sticky-btn.safari {
    background: rgba(10, 26, 43, 0.08);
    color: var(--black);
    border: 1px solid rgba(10, 26, 43, 0.1);
}

.sticky-btn.safari:hover {
    background: rgba(10, 26, 43, 0.15);
    transform: scale(1.02);
}

/* Show on mobile only */
@media (max-width: 768px) {
    .sticky-booking {
        display: flex;
    }
}

/* Extra small – even smaller buttons */
@media (max-width: 480px) {
    .sticky-booking {
        padding: 0.4rem 0.3rem;
    }
    .sticky-booking .sticky-btn {
        font-size: 0.65rem;
        padding: 0.3rem 0.6rem;
        gap: 0.2rem;
        border-radius: 40px;
    }
    .sticky-booking .sticky-btn i {
        font-size: 0.8rem;
    }
}/* ================================================================
   SERENGETI BUDGET SAFARI – REMAINING COMPONENTS
   Classes used across the inner pages that had no rule anywhere.
   Written against the tokens in base.css so everything matches.
   Loaded after the other modules.
   ================================================================ */

/* ============================================================
   PAGE CHROME (pages using their own header/footer markup)
   ============================================================ */

.header-inner,
.footer-inner,
.breadcrumb-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-height);
}

.logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.1;
}

.logo-text span {
    color: var(--gold);
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
    list-style: none;
}

.nav-links a {
    font-size: .92rem;
    font-weight: 600;
    transition: color var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--gold);
}

.nav-cta {
    flex-shrink: 0;
}

.footer-copy {
    font-size: .85rem;
    color: var(--text-secondary);
}

/* ============================================================
   LANGUAGE SWITCHER extras
   (.lang-dropdown li a is styled in header.css; these are the
    inner spans and standalone variants)
   ============================================================ */

.lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .5rem .9rem;
    font-size: .88rem;
    transition: background var(--transition), color var(--transition);
}

.lang-option:hover,
.lang-option.active {
    background: rgba(212, 168, 67, .12);
    color: var(--gold-dark);
}

.lang-name {
    font-weight: 600;
}

.lang-current {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: .82rem;
}

.flag {
    display: inline-block;
    width: 1.15em;
    text-align: center;
    flex-shrink: 0;
}

/* ============================================================
   ARTICLE / GUIDE BODY
   ============================================================ */

.article-body {
    max-width: 780px;
}

.article-body h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    margin-top: 2.4rem;
    margin-bottom: .7rem;
}

.article-body h3 {
    margin-top: 1.6rem;
    font-size: 1.12rem;
}

.article-lead {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--gray-800);
}

.article-updated {
    display: inline-block;
    margin-bottom: 1.4rem;
    padding: .32rem 1rem;
    border-radius: 40px;
    background: var(--gray-100);
    font-size: .8rem;
    color: var(--text-secondary);
}

.key-box,
.info-box,
.highlight,
.author-box {
    margin: 1.6rem 0;
    padding: 1.3rem 1.5rem;
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    background: rgba(212, 168, 67, .09);
}

.key-box p:last-child,
.info-box p:last-child {
    margin-bottom: 0;
}

.section-title-center {
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 720px;
}

.section-title-center h2 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight: 800;
    margin-bottom: .6rem;
}

/* ============================================================
   DAY / ITINERARY VARIANTS
   ============================================================ */

.day-card,
.day-item,
.day-story {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
}

.day-num,
.day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--black);
    font-weight: 800;
    font-size: .9rem;
}

.day-content,
.day-text {
    flex: 1;
}

.day-content h3,
.day-content h4 {
    margin: 0 0 .4rem;
    font-family: var(--font-display);
    font-size: 1.08rem;
}

.day-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .6rem;
    font-size: .82rem;
    color: var(--text-secondary);
}

.day-meta i {
    color: var(--gold);
    margin-right: .3rem;
}

/* ============================================================
   OVERVIEW / GUIDE SPLIT LAYOUTS
   ============================================================ */

.overview-grid,
.park-guide-grid,
.beach-guide-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: center;
}

.overview-image img,
.park-guide-image img {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
}

.overview-caption {
    margin-top: .5rem;
    font-size: .82rem;
    color: var(--text-secondary);
    font-style: italic;
}

.overview-text p,
.park-guide-text p {
    margin-bottom: 1rem;
}

/* Beach guide blocks on the Zanzibar pages */
[class$="-beach-guide"],
[class$="-overview"],
[class$="-faq"],
[class$="-related"],
[class$="-final-cta"] {
    padding: 3.4rem 0;
}

[class$="-final-cta"] {
    background: var(--black);
    color: var(--white);
    text-align: center;
}

[class$="-final-cta"] h2,
[class$="-final-cta"] h3 {
    color: var(--white);
    font-family: var(--font-display);
}

[class$="-final-cta"] p {
    color: rgba(255, 255, 255, .82);
    max-width: 620px;
    margin: 0 auto 1.6rem;
}

/* ============================================================
   REVIEWS
   ============================================================ */

.reviews-grid-custom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.4rem;
}

.review-header {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .7rem;
}

.review-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-name,
.author-name {
    font-weight: 700;
    color: var(--black);
    line-height: 1.2;
}

.review-date {
    font-size: .78rem;
    color: var(--text-secondary);
}

/* ============================================================
   HOTELS / RESTAURANTS / CHECKLISTS
   ============================================================ */

.hotel-item,
.restaurant-item,
.checklist-item,
.free-activity-item,
.eeat-item,
.related-card,
.blog-card,
.list-group-item {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.3rem;
    margin-bottom: .9rem;
    transition: border-color var(--transition), transform var(--transition);
}

.hotel-item:hover,
.restaurant-item:hover,
.related-card:hover,
.blog-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
}

.hotel-badge,
.guide-badge,
.category {
    display: inline-block;
    padding: .18rem .8rem;
    border-radius: 40px;
    background: rgba(212, 168, 67, .16);
    color: var(--gold-dark);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.checklist-item::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #1da85c;
    flex-shrink: 0;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    color: var(--gold-dark);
    font-weight: 700;
    font-size: .88rem;
}

.related-content,
.related-image {
    min-width: 0;
}

.related-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: .7rem;
}

/* ============================================================
   PACKAGE / PRICE VARIANTS
   ============================================================ */

.package-card-fly {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition);
}

.package-card-fly:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.pkg-type,
.pkg-route {
    font-size: .82rem;
    color: var(--text-secondary);
}

.pkg-type {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gold-dark);
}

.pkg-note {
    font-size: .8rem;
    color: var(--text-secondary);
    font-style: italic;
}

.starting {
    font-size: .78rem;
    color: var(--text-secondary);
}

.hero-price-tag {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(212, 168, 67, .4);
    color: var(--gold);
    font-weight: 800;
}

.price-table-wrapper,
.summary-grid,
.inclusion-grid,
.traveler-types,
.experience-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.2rem;
}

.price-table-wrapper {
    display: block;
    overflow-x: auto;
}

.route-visual {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.2rem;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .9rem;
}

.trust-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    font-size: .85rem;
    color: var(--text-secondary);
}

.trust-bar i {
    color: var(--gold);
    margin-right: .35rem;
}

/* ============================================================
   FAQ GRID VARIANTS
   ============================================================ */

.faq-grid-home,
.faq-grid-2col,
.faq-grid-acc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* ============================================================
   TEAM
   ============================================================ */

.team-info {
    text-align: center;
}

.team-info h3 {
    margin: .6rem 0 .2rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.team-info span,
.team-info p {
    font-size: .88rem;
    color: var(--text-secondary);
}

/* ============================================================
   SMALL SEMANTIC HELPERS used inline across pages
   ============================================================ */

.sub,
.details,
.meta {
    font-size: .88rem;
    color: var(--text-secondary);
}

.title {
    font-weight: 700;
    color: var(--black);
}

.left { text-align: left; }
.right { text-align: right; }
.shadow { box-shadow: var(--shadow-card); }
.h-100 { height: 100%; }
.gold { color: var(--gold-dark); }
.card-body { padding: 1.3rem; }

.wildlife-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(212, 168, 67, .14);
    color: var(--gold-dark);
    flex-shrink: 0;
}

/* Season / price level chips (alta, medium, bassa, budget, comfort, luxury) */
.month-availability .alta,
.month-availability .high,
.season-level.alta,
.alta { color: #1da85c; font-weight: 700; }

.medium,
.month-availability .medium { color: var(--gold-dark); font-weight: 700; }

.bassa,
.month-availability .bassa { color: #2980b9; font-weight: 700; }

.budget  { color: #1da85c; }
.comfort { color: var(--gold-dark); }

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.2rem;
}

.eeat-section {
    padding: 3rem 0;
    background: var(--gray-100);
}

.included {
    color: #1da85c;
    font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .header-inner {
        flex-wrap: wrap;
        gap: .8rem;
    }

    .nav-links {
        gap: .9rem;
        font-size: .88rem;
    }

    .overview-grid,
    .park-guide-grid,
    .faq-grid-home,
    .faq-grid-2col,
    .faq-grid-acc {
        grid-template-columns: 1fr;
    }

    .day-card,
    .day-item,
    .day-story {
        flex-direction: column;
        gap: .7rem;
    }

    .trust-bar {
        gap: .8rem;
        font-size: .8rem;
    }

    .right { text-align: left; }
}
/* ================================================================
   SERENGETI BUDGET SAFARI – GLOBAL RESPONSIVE RULES
   Loaded last so it can safely tighten layout on small screens.
   ================================================================ */

/* ============================================================
   IMAGES & MEDIA never overflow
   ============================================================ */

img,
video,
iframe,
table {
    max-width: 100%;
}

iframe {
    border: 0;
}

/* Wide content scrolls inside itself instead of the page */
.table-wrap,
.safari-table,
.scroll-x {
    overflow-x: auto;
}

/* ============================================================
   TABLET  (<= 992px)
   ============================================================ */

@media (max-width: 992px) {
    :root {
        --header-height: 72px;
    }

    .container {
        padding: 0 20px;
    }

    .section-title,
    .section-title-left h2 {
        font-size: 1.9rem;
    }

    .grid-4 {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }
}

/* ============================================================
   MOBILE  (<= 768px)
   ============================================================ */

@media (max-width: 768px) {
    :root {
        --radius: 16px;
        --radius-sm: 10px;
    }

    .container {
        padding: 0 16px;
    }

    h1 {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    h2 {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
    }

    h3 {
        font-size: 1.2rem;
    }

    .section-title-left p,
    .subtitle {
        font-size: 1rem;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .btn-group {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-lg {
        padding: 0.85rem 1.8rem;
        font-size: 1rem;
    }

    /* Long words / URLs must not blow out the layout */
    p, li, td, th, h1, h2, h3, h4 {
        overflow-wrap: break-word;
    }
}

/* ============================================================
   SMALL MOBILE  (<= 480px)
   ============================================================ */

@media (max-width: 480px) {
    .container {
        padding: 0 14px;
    }

    .card,
    .info-card,
    .stat-card,
    .day-box,
    .quick-questions,
    .quick-answer {
        padding: 1.1rem;
    }

    .badge,
    .tag,
    .wildlife-tag {
        font-size: 0.68rem;
    }

    .price-tag {
        font-size: 1.35rem;
    }

    .cta-contact-info {
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
    .site-header,
    .mega-footer,
    .jump-to-top,
    .sticky-booking,
    .whatsapp-float,
    [class$="-hero-bg"],
    [class$="-hero-overlay"],
    video {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

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

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.faq-question-acc:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}
/* ================================================================
   SERENGETI BUDGET SAFARI – HOME CSS
   (Hero, Components, Sections, Storytelling, Map, Shorts, Utilities)
   ================================================================ */

/* ============================================================
   GROUP 3 – HERO
   ============================================================ */

/* ============================================================
   HERO – PREMIUM VIDEO + POSTER IMAGE (WORKING)
   ============================================================ */

.hero {
    position: relative;
    height: 72vh;
    min-height: 480px;
    max-height: 720px;
    overflow: hidden;
    width: 100%;
}

/* Video wrapper – fills entire hero */
.hero-video-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Video – full screen, VISIBLE */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;  /* Ensure video is visible */
    background: #0a1a2b;  /* Fallback color while loading */
}

/* Poster image shows while video loads */
.hero-video[poster] {
    background-size: cover;
    background-position: center;
}

/* Overlay layers – on top of video */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
    pointer-events: none;
}

.hero-gradient-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: 
        linear-gradient(135deg, rgba(10, 26, 43, 0.2) 0%, transparent 50%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
}

/* ============================================================
   HERO CONTENT – CENTRED
   ============================================================ */

.hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--header-height) 1.5rem 4rem;
    color: var(--white);
    animation: slideUpFade 1s ease 0.3s both;
}

/* Handwritten eyebrow above the headline */
.hero-eyebrow {
    font-family: 'Caveat', var(--font-display), cursive;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.6rem;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero-heading {
    font-family: var(--font-body);
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 16ch;
    margin: 0 0 2rem;
    color: var(--white);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.hero-heading span {
    color: var(--gold);
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--gold);
    color: var(--black);
    font-weight: 700;
    font-size: 1rem;
    padding: 1rem 2.4rem;
    border-radius: 60px;
    box-shadow: 0 10px 34px rgba(212, 168, 67, 0.35);
    transition: var(--transition);
}

.hero-cta:hover {
    background: var(--gold-dark);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(212, 168, 67, 0.45);
}

.hero-cta i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.hero-cta:hover i {
    transform: translateX(4px);
}

/* Legacy glass card – kept for any page still using it */
.hero-glass-card {
    position: absolute;
    bottom: 80px;
    left: 50px;
    z-index: 2;
    max-width: 340px;
    width: 90%;
    padding: 0;
    text-align: left;
    color: var(--white);
    animation: slideUpFade 1s ease 0.3s both;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.glass-content {
    background: rgba(13, 13, 13, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 168, 67, 0.2);
    border-radius: 16px;
    padding: 1.5rem 1.8rem;
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Gold glow border on hover */
.glass-content::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, transparent 40%, rgba(212, 168, 67, 0.3), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.glass-content:hover::before {
    opacity: 1;
}

.glass-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

/* Badge */
.glass-badge {
    display: inline-block;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold);
    background: rgba(212, 168, 67, 0.12);
    padding: 0.15rem 0.8rem;
    border-radius: 30px;
    margin-bottom: 0.6rem;
    border: 1px solid rgba(212, 168, 67, 0.08);
    font-weight: 600;
}

/* Title */
.glass-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.3rem;
    letter-spacing: -0.01em;
}

.glass-title span {
    color: var(--gold);
}

.glass-title::after {
    content: '';
    display: block;
    width: 45px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    margin: 0.5rem 0 0.5rem;
    border-radius: 3px;
}

/* Subtitle */
.glass-sub {
    font-size: 0.75rem;
    opacity: 0.85;
    max-width: 100%;
    margin: 0 0 1rem 0;
    line-height: 1.5;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
}

/* Buttons */
.glass-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.glass-actions .btn-hero {
    padding: 0.4rem 1.2rem;
    font-size: 0.7rem;
    border-radius: 40px;
    gap: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.glass-actions .btn-hero i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.glass-actions .btn-hero:hover i {
    transform: translateX(3px);
}

.glass-actions .btn-primary {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
    box-shadow: 0 4px 20px rgba(212, 168, 67, 0.2);
}

.glass-actions .btn-primary:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(212, 168, 67, 0.3);
}

.glass-actions .btn-outline {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--white);
    padding: 0.4rem 1.2rem;
    font-size: 0.7rem;
}

.glass-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-2px);
}

/* ============================================================
   SCROLL INDICATOR
   ============================================================ */

.hero-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: bounceDown 2.5s ease-in-out infinite;
    font-weight: 300;
}

.hero-scroll-indicator i {
    font-size: 0.7rem;
    color: rgba(212, 168, 67, 0.6);
}

@keyframes bounceDown {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateX(-50%) translateY(8px);
        opacity: 1;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .hero-glass-card {
        bottom: 60px;
        left: 35px;
        max-width: 300px;
    }
    .glass-title {
        font-size: 1.4rem;
    }
    .glass-content {
        padding: 1.3rem 1.5rem;
    }
    .glass-sub {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 420px;
        height: 62vh;
    }

    .hero-content {
        padding: var(--header-height) 1.2rem 3rem;
    }

    .hero-heading {
        max-width: 14ch;
        margin-bottom: 1.5rem;
    }

    .hero-cta {
        font-size: 0.9rem;
        padding: 0.85rem 1.9rem;
    }

    .hero-glass-card {
        bottom: 50px;
        left: 20px;
        max-width: 260px;
        width: 88%;
    }

    .glass-content {
        padding: 1rem 1.2rem;
        border-radius: 14px;
    }

    .glass-title {
        font-size: 1.2rem;
    }

    .glass-title::after {
        width: 35px;
        height: 2.5px;
        margin: 0.4rem 0 0.4rem;
    }

    .glass-sub {
        font-size: 0.65rem;
        margin-bottom: 0.8rem;
    }

    .glass-badge {
        font-size: 0.5rem;
        padding: 0.1rem 0.6rem;
    }

    .glass-actions {
        gap: 0.4rem;
    }

    .glass-actions .btn-hero {
        padding: 0.3rem 0.9rem;
        font-size: 0.6rem;
    }

    .glass-actions .btn-outline {
        padding: 0.3rem 0.9rem;
        font-size: 0.6rem;
    }

    .hero-scroll-indicator {
        bottom: 18px;
        font-size: 0.5rem;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 360px;
        height: 56vh;
    }

    .hero-eyebrow {
        margin-bottom: 0.4rem;
    }

    .hero-heading {
        max-width: 100%;
        margin-bottom: 1.3rem;
    }

    .hero-cta {
        font-size: 0.82rem;
        padding: 0.75rem 1.6rem;
    }

    .hero-glass-card {
        bottom: 40px;
        left: 14px;
        max-width: 210px;
        width: 92%;
    }

    .glass-content {
        padding: 0.7rem 0.9rem;
        border-radius: 12px;
    }

    .glass-title {
        font-size: 1rem;
    }

    .glass-title::after {
        width: 28px;
        height: 2px;
        margin: 0.3rem 0 0.3rem;
    }

    .glass-sub {
        font-size: 0.55rem;
        margin-bottom: 0.6rem;
        line-height: 1.3;
    }

    .glass-badge {
        font-size: 0.4rem;
        padding: 0.05rem 0.5rem;
        margin-bottom: 0.3rem;
    }

    .glass-actions .btn-hero {
        padding: 0.2rem 0.6rem;
        font-size: 0.5rem;
        gap: 0.2rem;
    }

    .glass-actions .btn-hero i {
        font-size: 0.4rem;
    }

    .glass-actions .btn-outline {
        padding: 0.2rem 0.6rem;
        font-size: 0.5rem;
    }

    .hero-scroll-indicator {
        bottom: 14px;
        font-size: 0.45rem;
    }
}


/* ============================================================
   GROUP 4 – COMPONENTS
   ============================================================ */

/* ---------- Story badge ---------- */
.story-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    background: rgba(212, 168, 67, 0.12);
    padding: 0.2rem 1rem;
    border-radius: 40px;
    margin-bottom: 0.8rem;
}

/* ============================================================
   STORY SECTIONS – FIXED OVERFLOW (NO CUTOFF)
   ============================================================ */

/* ---------- Story sections – contain overflow ---------- */
.leopard-story-section,
.kilimanjaro-story-section,
.maasai-story-section,
.ngorongoro-daytrip-section {
    padding: 4rem 0;
    background: var(--white);
    overflow: hidden;  /* PREVENT OVERFLOW */
    width: 100%;
    max-width: 100%;
}

.leopard-story-section {
    background: var(--cream);
}

.kilimanjaro-story-section {
    background: var(--white);
}

.maasai-story-section {
    background: var(--cream);
}

.ngorongoro-daytrip-section {
    background: var(--white);
}

/* ---------- Story wrapper – contain inside container ---------- */
.leopard-story-wrapper,
.kilimanjaro-story-wrapper,
.maasai-story-wrapper,
.ngorongoro-story-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;  /* Prevent grid overflow */
}

/* ---------- Video container – prevent overflow ---------- */
.leopard-video-container {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-elevated);
    aspect-ratio: 4/3;
    background: var(--black);
    max-width: 100%;
}

.leopard-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: 100%;
}

/* ---------- Story content – prevent text overflow ---------- */
.story-content {
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
}

.story-content h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.8rem;
    max-width: 100%;
}

.story-content h3 span {
    color: var(--gold);
}

.story-content p {
    max-width: 100%;
    overflow-wrap: break-word;
}

.story-content em {
    display: block;
    max-width: 100%;
}

/* ---------- Guide quote – fix overflow ---------- */
.guide-quote {
    background: rgba(212, 168, 67, 0.06);
    padding: 1.2rem 1.8rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--gold);
    margin: 1rem 0;
    font-style: italic;
    color: var(--gray-800);
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
}

/* ---------- Story meta ---------- */
.story-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
    margin: 1rem 0 1.2rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    max-width: 100%;
}

.story-meta .highlight-tag {
    background: var(--gold-glow);
    color: var(--gold-dark);
    padding: 0.1rem 0.8rem;
    border-radius: 40px;
    font-weight: 500;
    white-space: nowrap;
}

/* ---------- Story CTA ---------- */
.story-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.2rem;
    max-width: 100%;
}

.story-cta .btn {
    white-space: nowrap;
}

/* ---------- Image inside stories (Kilimanjaro, Maasai) ---------- */
.kilimanjaro-story-wrapper img,
.maasai-story-wrapper img,
.ngorongoro-story-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

.kili-image,
.maasai-image {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

/* ---------- Image badge ---------- */
.image-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.2rem 1rem;
    border-radius: 40px;
    font-size: 0.7rem;
    z-index: 5;
    pointer-events: none;
}

/* ---------- Reverse layout for some stories ---------- */
.kilimanjaro-story-wrapper .story-content,
.maasai-story-wrapper .story-content,
.ngorongoro-story-wrapper .story-content {
    order: -1;
}

/* ============================================================
   ABOUT US – "WHO ARE WE" SECTION
   Two staggered photos on the left, intro copy on the right.
   ============================================================ */

.about-us-section {
    padding: 5rem 0;
    background: var(--black);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.about-us-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.about-us-photos {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
}

.about-us-photos img {
    display: block;
    border-radius: var(--radius);
    box-shadow: var(--shadow-elevated);
    object-fit: cover;
}

.about-us-photo-main {
    width: 68%;
    height: 420px;
    position: relative;
    z-index: 1;
}

.about-us-photo-secondary {
    width: 46%;
    height: 260px;
    position: absolute;
    right: 0;
    bottom: -2.5rem;
    z-index: 2;
    border: 6px solid var(--black);
}

.about-us-content .story-badge {
    background: rgba(212, 168, 67, 0.16);
}

.about-us-content h2 {
    font-family: var(--font-display);
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--white);
    margin-bottom: 1.1rem;
}

.about-us-content h2 span {
    color: var(--gold);
}

.about-us-content p {
    color: var(--gray-300);
    line-height: 1.8;
    margin-bottom: 1.6rem;
    max-width: 100%;
}

.about-us-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.about-us-call {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.about-us-call .call-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--white);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-us-call span {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-300);
}

.about-us-call a {
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 992px) {
    .about-us-wrapper {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .about-us-photos {
        min-height: 360px;
    }

    .about-us-photo-secondary {
        bottom: -2rem;
    }

    .about-us-content h2 {
        font-size: 1.9rem;
    }
}

@media (max-width: 576px) {
    .about-us-section {
        padding: 3.5rem 0;
    }

    .about-us-photos {
        min-height: 300px;
    }

    .about-us-photo-main {
        height: 300px;
    }

    .about-us-photo-secondary {
        height: 190px;
        bottom: -1.5rem;
    }
}

/* ============================================================
   STORIES SLIDER – wraps the leopard / kilimanjaro / maasai
   story sections into one swipeable carousel.
   ============================================================ */

.stories-slider-section {
    padding: 4rem 0 5rem;
    background: var(--cream);
    overflow: hidden;
}

.stories-slider-section .section-title-left {
    margin-bottom: 2rem;
}

.stories-slider {
    position: relative;
    overflow: hidden;
}

.stories-slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.story-slide {
    flex: 0 0 92%;
    max-width: 92%;
    margin-right: 2rem;
}

/* Story sections lose their own section padding/background inside the slider — the
   slide wrapper now owns spacing so cards read as one continuous track. */
.story-slide.leopard-story-section,
.story-slide.kilimanjaro-story-section,
.story-slide.maasai-story-section {
    padding: 2rem;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.stories-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    border: none;
    box-shadow: var(--shadow-card);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s, color 0.2s;
}

.stories-slider-arrow:hover {
    background: var(--gold);
    color: var(--white);
}

.stories-slider-arrow.prev {
    left: 0.5rem;
}

.stories-slider-arrow.next {
    right: 0.5rem;
}

.stories-slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2rem;
}

.stories-slider-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--gray-300);
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.stories-slider-dots button.active {
    background: var(--gold);
    transform: scale(1.3);
}

@media (max-width: 992px) {
    .story-slide {
        flex-basis: 96%;
        max-width: 96%;
        margin-right: 1.2rem;
    }

    .stories-slider-arrow {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 576px) {
    .stories-slider-section {
        padding: 3rem 0 3.5rem;
    }

    .story-slide {
        flex-basis: 100%;
        max-width: 100%;
        margin-right: 0.8rem;
    }

    .story-slide.leopard-story-section,
    .story-slide.kilimanjaro-story-section,
    .story-slide.maasai-story-section {
        padding: 1.2rem;
    }

    .stories-slider-arrow {
        display: none;
    }
}

/* ============================================================
   SAFARI TYPES SLIDER – dark image cards, "types of safari we run"
   ============================================================ */

.safari-types-section {
    padding: 5rem 0;
    background: var(--white);
    overflow: hidden;
}

.safari-types-section .section-title-left {
    margin-bottom: 2rem;
}

.safari-types-slider {
    position: relative;
    overflow: hidden;
}

.safari-types-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.safari-type-card {
    position: relative;
    flex: 0 0 calc(25% - 1.125rem);
    max-width: calc(25% - 1.125rem);
    height: 320px;
    border-radius: var(--radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    isolation: isolate;
}

.safari-type-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 13, 13, 0.15) 0%, rgba(13, 13, 13, 0.55) 55%, rgba(13, 13, 13, 0.92) 100%);
    z-index: -1;
    transition: background 0.3s;
}

.safari-type-card:hover::before {
    background: linear-gradient(180deg, rgba(212, 168, 67, 0.15) 0%, rgba(13, 13, 13, 0.55) 55%, rgba(13, 13, 13, 0.92) 100%);
}

.safari-type-card .type-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.safari-type-card h3 {
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.safari-type-card p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    line-height: 1.5;
}

.safari-types-slider .stories-slider-arrow {
    top: 50%;
}

@media (max-width: 992px) {
    .safari-type-card {
        flex: 0 0 calc(50% - 0.75rem);
        max-width: calc(50% - 0.75rem);
        height: 280px;
    }
}

@media (max-width: 576px) {
    .safari-types-section {
        padding: 3.5rem 0;
    }

    /* Below the JS slider's smallest breakpoint the arrows are cramped and
       swiping is what mobile visitors actually try first — switch to native
       horizontal scroll-snap instead of relying on transform + tap targets. */
    .safari-types-slider {
        overflow: visible;
    }

    .safari-types-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
        margin: 0 -1.25rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .safari-types-track.js-transform-disabled {
        transform: none !important;
    }

    .safari-type-card {
        flex: 0 0 78%;
        max-width: 78%;
        height: 260px;
        scroll-snap-align: start;
    }

    .safari-types-slider .stories-slider-arrow {
        display: none;
    }
}

/* ============================================================
   TRUE STORIES – simple preview cards + read-more modal
   (replaces the old full-width leopard/kilimanjaro/maasai slider)
   ============================================================ */

.stories-grid-section {
    padding: 4rem 0 5rem;
    background: var(--cream);
}

.stories-grid-section .section-title-left {
    margin-bottom: 2rem;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.story-preview-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    border: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    padding: 0;
    font: inherit;
    color: inherit;
}

.story-preview-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.story-preview-card .story-preview-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.story-preview-card .story-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.story-preview-card:hover .story-preview-image img {
    transform: scale(1.06);
}

.story-preview-card .story-preview-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(13, 13, 13, 0.75);
    color: var(--gold-light);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.8rem;
    border-radius: 40px;
}

.story-preview-card .story-preview-body {
    padding: 1.4rem 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.story-preview-card .story-preview-author {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.story-preview-card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 0.6rem;
    color: var(--text-primary);
}

.story-preview-card .story-preview-excerpt {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.2rem;
    flex-grow: 1;
}

.story-preview-card .story-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.story-preview-card .story-preview-time {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.story-preview-card .story-preview-time strong {
    display: block;
    color: var(--text-primary);
}

.story-preview-card .story-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.2rem;
    border-radius: 40px;
    border: 1px solid var(--gray-300);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.story-preview-card:hover .story-read-btn {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
}

@media (max-width: 992px) {
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .stories-grid-section {
        padding: 3rem 0 3.5rem;
    }

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

/* ---------- Story modal ---------- */
.story-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 13, 13, 0.72);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.story-modal-overlay.open {
    display: flex;
}

.story-modal {
    background: var(--white);
    border-radius: var(--radius);
    max-width: 720px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    padding: 2.2rem;
}

.story-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--gray-100);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.story-modal-close:hover {
    background: var(--gold);
    color: var(--white);
}

.story-modal .story-content h3 {
    font-size: 1.8rem;
}

@media (max-width: 576px) {
    .story-modal {
        padding: 1.5rem;
        max-height: 92vh;
    }

    .story-modal .story-content h3 {
        font-size: 1.4rem;
    }
}

/* ============================================================
   RESPONSIVE – FIXED
   ============================================================ */

@media (max-width: 992px) {
    .leopard-story-wrapper,
    .kilimanjaro-story-wrapper,
    .maasai-story-wrapper,
    .ngorongoro-story-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .kilimanjaro-story-wrapper .story-content,
    .maasai-story-wrapper .story-content,
    .ngorongoro-story-wrapper .story-content {
        order: 0;
    }
    
    .story-content h3 {
        font-size: 1.6rem;
    }
    
    .leopard-video-container {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 768px) {
    .leopard-story-section,
    .kilimanjaro-story-section,
    .maasai-story-section,
    .ngorongoro-daytrip-section {
        padding: 2.5rem 0;
    }
    
    .story-content h3 {
        font-size: 1.3rem;
    }
    
    .guide-quote {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
    
    .story-meta {
        font-size: 0.75rem;
        gap: 0.4rem 0.8rem;
    }
    
    .story-meta .highlight-tag {
        white-space: normal;
        font-size: 0.7rem;
    }
    
    .story-cta .btn {
        white-space: normal;
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
    }
    
    .video-badge {
        font-size: 0.6rem;
        padding: 0.15rem 0.7rem;
    }
    
    .video-duration {
        font-size: 0.6rem;
        padding: 0.15rem 0.6rem;
    }
}

@media (max-width: 480px) {
    .leopard-story-section,
    .kilimanjaro-story-section,
    .maasai-story-section,
    .ngorongoro-daytrip-section {
        padding: 2rem 0;
    }
    
    .story-content h3 {
        font-size: 1.1rem;
    }
    
    .guide-quote {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .story-meta {
        font-size: 0.65rem;
        gap: 0.3rem 0.6rem;
    }
    
    .story-meta span {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
    }
    
    .story-cta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .story-cta .btn {
        width: 100%;
        justify-content: center;
        font-size: 0.75rem;
        padding: 0.35rem 0.8rem;
    }
    
    .video-badge {
        font-size: 0.5rem;
        padding: 0.1rem 0.5rem;
        top: 8px;
        left: 8px;
    }
    
    .video-duration {
        font-size: 0.5rem;
        padding: 0.1rem 0.4rem;
        bottom: 8px;
        right: 8px;
    }
    
    .kilimanjaro-story-wrapper img,
    .maasai-story-wrapper img,
    .ngorongoro-story-wrapper img {
        border-radius: 14px;
    }
}

/* ---------- Testimonials ---------- */
.testimonials-section {
    padding: 4rem 0;
    background: var(--white);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: var(--cream);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
}

.testimonial-avatar-fallback {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: var(--gold-dark);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.testimonial-name {
    font-weight: 700;
}

.testimonial-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.testimonial-video {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--black);
    margin-bottom: 0.8rem;
    cursor: pointer;
}

.testimonial-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    color: var(--white);
    font-size: 2rem;
    transition: var(--transition);
}

.play-icon:hover {
    background: rgba(0, 0, 0, 0.5);
}

.testimonial-card blockquote {
    font-style: italic;
    font-size: 0.95rem;
    margin: 0.6rem 0;
    color: var(--gray-800);
}

.testimonial-rating {
    color: var(--gold);
    font-size: 1rem;
    letter-spacing: 2px;
}

/* ---------- FAQ ---------- */
.faq-mega {
    padding: 4rem 0;
    background: var(--cream);
}

.faq-mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.faq-item {
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 0;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: var(--transition);
}

.faq-item:hover {
    box-shadow: var(--shadow-elevated);
}

.faq-question {
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 1rem 1.5rem;
    transition: var(--transition);
    background: var(--white);
    gap: 1rem;
}

.faq-question:hover {
    color: var(--gold);
}

.faq-question::after {
    content: '\f067';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--gold);
    transition: var(--transition);
    flex-shrink: 0;
}

.faq-item.active .faq-question::after {
    content: '\f068';
    transform: rotate(180deg);
}

.faq-item.active .faq-question {
    background: rgba(212, 168, 67, 0.05);
    border-bottom: 1px solid rgba(212, 168, 67, 0.15);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: var(--transition);
    color: var(--text-secondary);
    font-size: 0.95rem;
    padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
    max-height: 400px;
    padding: 1rem 1.5rem 1.5rem;
}

.faq-answer a {
    color: var(--gold-dark);
    font-weight: 600;
}

.faq-answer a:hover {
    color: var(--gold);
}

@media (max-width: 768px) {
    .faq-mega-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   GROUP 5 – SECTIONS
   ============================================================ */

/* ---------- Trust authority ---------- */
.trust-authority {
    padding: 4.5rem 0 5rem;
    background-color: var(--cream);
    background-image: radial-gradient(rgba(212, 168, 67, 0.35) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    position: relative;
    overflow: hidden;
}

.trust-authority-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.trust-authority-intro .section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold-dark);
    background: rgba(212, 168, 67, 0.12);
    padding: 0.3rem 1.1rem;
    border-radius: 40px;
    margin-bottom: 1rem;
}

.trust-authority-intro h2 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--black);
}

.trust-authority-panel {
    background: var(--black);
    border-radius: var(--radius);
    padding: 2.5rem 2rem 2rem;
    box-shadow: var(--shadow-elevated);
}

.trust-authority-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.trust-stat {
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 1.6rem 1.2rem;
    text-align: center;
    transition: transform 0.3s;
}

.trust-stat:hover {
    transform: translateY(-4px);
}

.trust-stat .trust-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(212, 168, 67, 0.14);
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin: 0 auto 0.9rem;
}

.trust-stat .trust-number {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--black);
}

.trust-stat .trust-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 1.8rem;
    margin-top: 1.8rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8rem;
}

.trust-badges .badge-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gray-300);
}

.trust-badges .badge-item i {
    color: var(--gold);
}

@media (max-width: 992px) {
    .trust-authority-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .trust-authority {
        padding: 3.5rem 0;
    }

    .trust-authority-intro h2 {
        font-size: 1.7rem;
    }

    .trust-authority-panel {
        padding: 2rem 1.2rem 1.6rem;
    }

    .trust-authority-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.9rem;
    }

    .trust-stat {
        padding: 1.2rem 0.8rem;
    }
}

/* ============================================================
   TOP DESTINATIONS
   ============================================================ */

.top-destinations-section {
    padding: 4.5rem 0 5rem;
    background: var(--white);
}

.top-destinations-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.top-destinations-header .section-title-left {
    margin-bottom: 0;
}

.top-destinations-header .btn-outline {
    flex-shrink: 0;
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.destination-card {
    position: relative;
    display: block;
    height: 340px;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
    box-shadow: var(--shadow-card);
    transition: transform 0.35s, box-shadow 0.35s;
}

.destination-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.destination-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 0.5s;
}

.destination-card:hover img {
    transform: scale(1.08);
}

.destination-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 13, 13, 0) 40%, rgba(13, 13, 13, 0.88) 100%);
    z-index: -1;
}

.destination-card .destination-count {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--black);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.85rem;
    border-radius: 40px;
}

.destination-card .destination-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.3rem 1.4rem;
}

.destination-card h3 {
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.destination-card .destination-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--black);
    font-size: 0.8rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s, transform 0.3s;
}

.destination-card:hover .destination-arrow {
    opacity: 1;
    transform: translateX(0);
}

.destination-card .destination-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 992px) {
    .destinations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .top-destinations-section {
        padding: 3.5rem 0;
    }

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

    .destination-card {
        height: 280px;
    }
}

/* ============================================================
   BEST PACKAGES – dark panel, intro left, sliding cards right
   ============================================================ */

.best-packages-section {
    padding: 4.5rem 0;
    background: var(--black);
    color: var(--white);
    overflow: hidden;
}

.best-packages-section .container {
    max-width: 1360px;
}

.best-packages-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.best-packages-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.best-packages-intro .section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    background: rgba(212, 168, 67, 0.16);
    padding: 0.3rem 1.1rem;
    border-radius: 40px;
    margin-bottom: 1rem;
}

.best-packages-intro h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 0.9rem;
}

.best-packages-intro p {
    font-size: 0.92rem;
    color: var(--gray-300);
    line-height: 1.6;
    margin-bottom: 1.6rem;
}

.best-packages-intro .btn {
    margin-top: 0.4rem;
    margin-bottom: 2.5rem;
}

.best-packages-slider {
    position: relative;
    overflow: hidden;
}

.best-packages-slider::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 70px;
    background: linear-gradient(90deg, transparent 0%, var(--black) 100%);
    pointer-events: none;
    z-index: 5;
}

@media (max-width: 576px) {
    .best-packages-slider::after {
        width: 36px;
    }
}

.best-packages-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.package-card {
    position: relative;
    flex: 0 0 400px;
    max-width: 400px;
    height: 480px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-elevated);
    text-decoration: none;
    color: inherit;
    display: block;
    background: var(--gray-800);
}

.package-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s;
}

.package-card:hover img {
    transform: scale(1.06);
}

.package-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 13, 13, 0) 35%, rgba(13, 13, 13, 0.55) 70%, rgba(13, 13, 13, 0.92) 100%);
    z-index: 2;
}

.package-card .package-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--black);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 40px;
    z-index: 3;
}

.package-card .package-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: var(--white);
    padding: 1.4rem 1.4rem 1.6rem;
    z-index: 3;
}

.package-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.package-card .package-meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s, opacity 0.3s, margin 0.35s, padding 0.35s;
}

.package-card:first-child .package-meta,
.package-card:hover .package-meta,
.package-card:focus-visible .package-meta {
    max-height: 60px;
    opacity: 1;
}

.package-card .package-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.package-card .package-price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--gold-light);
}

.package-card .package-price small {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    display: block;
}

.package-card .package-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--white);
    color: var(--black);
    font-size: 0.8rem;
    transition: background 0.2s, color 0.2s;
}

.package-card:hover .package-arrow {
    background: var(--gold);
    color: var(--black);
}

.best-packages-arrows {
    display: none;
}

.best-packages-slider .slider-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--white);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    z-index: 6;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s, background 0.2s, color 0.2s;
}

.best-packages-section:hover .slider-nav-arrow {
    opacity: 1;
    visibility: visible;
}

.slider-nav-arrow:hover {
    background: var(--gold);
    color: var(--black);
}

.slider-nav-arrow.prev {
    left: 12px;
}

.slider-nav-arrow.next {
    right: 12px;
}

@media (max-width: 992px) {
    .package-card {
        flex-basis: 340px;
        max-width: 340px;
        height: 420px;
    }
}

@media (max-width: 576px) {
    .best-packages-section {
        padding: 3.5rem 0;
    }

    .package-card {
        flex-basis: 280px;
        max-width: 280px;
        height: 380px;
    }
}

/* ---------- AI Planner (chat style) ---------- */
.ai-planner {
    padding: 6rem 0;
    background: var(--black);
    position: relative;
    overflow: hidden;
}

.ai-planner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(212, 168, 67, 0.16) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
    pointer-events: none;
}

.ai-planner .container {
    position: relative;
}

.ai-planner .section-title-left .section-badge {
    background: rgba(212, 168, 67, 0.14);
}

.ai-planner .section-title-left h2 {
    color: var(--white);
}

.ai-planner .section-title-left p {
    color: rgba(255, 255, 255, 0.65);
}

.planner-chat {
    max-width: 640px;
    margin: 3rem auto 0;
    background: var(--white);
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    border: 1px solid rgba(212, 168, 67, 0.25);
}

.planner-chat-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(135deg, #161616, #0d0d0d);
    color: var(--white);
}

.planner-chat-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gold);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    padding: 7px;
}

.planner-chat-avatar img,
.planner-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.planner-chat-header-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    margin-right: auto;
}

.planner-chat-header-text strong {
    font-size: 0.98rem;
}

.planner-chat-status {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.planner-chat-status i {
    font-size: 0.45rem;
    color: #3ecf6a;
}

.planner-chat-progress {
    display: flex;
    gap: 0.4rem;
}

.planner-progress-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: var(--transition);
}

.planner-progress-dot.done {
    background: var(--gold);
}

.planner-progress-dot.current {
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.25);
}

.planner-chat-thread {
    padding: 1.6rem 1.5rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 420px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.planner-chat-thread::-webkit-scrollbar {
    width: 6px;
}

.planner-chat-thread::-webkit-scrollbar-thumb {
    background: var(--gray-100);
    border-radius: 10px;
}

.planner-msg {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    animation: plannerMsgIn 0.35s ease both;
}

@keyframes plannerMsgIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.planner-msg-avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--black);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.planner-msg-bot .planner-msg-avatar {
    background: var(--gold);
    padding: 3px;
}

.planner-msg-bubble {
    background: var(--gray-100);
    color: var(--black);
    padding: 0.8rem 1.1rem;
    border-radius: 16px 16px 16px 4px;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 78%;
}

.planner-msg-user {
    flex-direction: row-reverse;
}

.planner-msg-user .planner-msg-bubble {
    background: var(--gold);
    color: var(--black);
    border-radius: 16px 16px 4px 16px;
    font-weight: 600;
}

.planner-msg-user .planner-msg-avatar {
    background: var(--gold);
    color: var(--black);
}

.planner-typing .planner-msg-bubble {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.9rem 1.1rem;
}

.planner-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    animation: plannerTyping 1.1s infinite ease-in-out;
}

.planner-typing-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.planner-typing-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes plannerTyping {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.planner-form {
    padding: 1rem 1.5rem 1.6rem;
    border-top: 1px solid var(--gray-100);
}

.planner-step {
    display: none;
}

.planner-step.active {
    display: block;
    animation: plannerMsgIn 0.3s ease both;
}

.planner-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.planner-options button {
    background: var(--white);
    border: 2px solid var(--gray-100);
    padding: 0.6rem 1.3rem;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-body);
    color: var(--black);
}

.planner-options button:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.planner-options button.selected {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
    box-shadow: 0 6px 16px var(--gold-glow);
}

.planner-restart {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.4rem 0;
}

.planner-restart:hover {
    color: var(--gold-dark);
}

.planner-result {
    margin: 0 1.5rem 1.6rem;
    display: none;
}

.planner-result.show {
    display: block;
    animation: plannerMsgIn 0.4s ease both;
}

.planner-result-content {
    background: var(--black);
    color: var(--white);
    padding: 1.6rem 1.5rem;
    border-radius: 18px;
    border-left: 4px solid var(--gold);
}

.planner-result-content .rec-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin: 1rem 0;
}

.planner-result-content .rec-price {
    color: var(--gold);
    font-weight: 800;
}

@media (max-width: 576px) {
    .planner-chat {
        border-radius: 20px;
        margin-top: 2rem;
    }

    .planner-msg-bubble {
        max-width: 85%;
        font-size: 0.9rem;
    }

    .planner-result-content .rec-details {
        grid-template-columns: 1fr;
    }
}

/* ---------- Featured Safaris 3D ---------- */
.featured-safaris-3d {
    padding: 4rem 0;
    background: var(--white);
}

.safari-3d-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.safari-3d-card {
    background: var(--cream);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-card);
    transform: perspective(1000px) rotateY(0) rotateX(0);
}

.safari-3d-card:hover {
    transform: perspective(1000px) rotateY(4deg) rotateX(-4deg) translateY(-8px);
    box-shadow: var(--shadow-elevated);
}

.safari-3d-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.safari-3d-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--black);
    color: var(--gold);
    padding: 0.2rem 1rem;
    border-radius: 40px;
    font-size: 0.7rem;
    font-weight: 600;
}

.safari-3d-content {
    padding: 1.5rem;
}

.safari-3d-content h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.safari-3d-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0.2rem 0 0.6rem;
}

.safari-3d-price {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--gold-dark);
    margin-bottom: 0.8rem;
}

/* ---------- Immersive gallery (bento grid) ---------- */
.immersive-gallery {
    padding: 5rem 0;
    background: var(--cream);
}

.gallery-masonry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 190px;
    grid-auto-flow: dense;
    gap: 1rem;
}

.gallery-masonry-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    isolation: isolate;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.gallery-masonry-item.tall {
    grid-row: span 2;
}

.gallery-masonry-item.wide {
    grid-column: span 2;
}

.gallery-masonry-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-masonry-item:hover img {
    transform: scale(1.08);
}

.gallery-masonry-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 70%);
    display: flex;
    align-items: flex-end;
    padding: 1.1rem;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.gallery-masonry-item:hover .gallery-masonry-overlay {
    opacity: 1;
}

.gallery-masonry-caption {
    color: var(--white);
    font-weight: 600;
    font-size: 0.95rem;
    transform: translateY(6px);
    transition: transform 0.35s ease;
}

.gallery-masonry-item:hover .gallery-masonry-caption {
    transform: translateY(0);
}

@media (max-width: 992px) {
    .gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
    }

    .gallery-masonry-item.tall {
        grid-row: span 1;
    }
}

/* ---------- Immersive gallery (uniform grid, no gaps) ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.gallery-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    isolation: isolate;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    aspect-ratio: 1 / 1;
}

.gallery-grid-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-grid-item:hover img {
    transform: scale(1.08);
}

.gallery-grid-item .gallery-masonry-overlay {
    opacity: 1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, transparent 55%);
}

@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 576px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
}

/* ---------- Signature experiences ---------- */
/* ---------- Signature experiences (slider) ---------- */
.experiences-slider-section {
    padding: 5rem 0;
    background: var(--white);
    overflow: hidden;
}

.experiences-slider-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.experiences-slider-header .section-title-left {
    margin-bottom: 0;
}

.experiences-slider-nav {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.experiences-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--gray-100);
    background: var(--white);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
}

.experiences-arrow:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
}

.experiences-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.experiences-arrow:disabled:hover {
    background: var(--white);
    border-color: var(--gray-100);
    color: var(--black);
}

.experiences-slider {
    overflow: hidden;
}

.experiences-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.experience-item {
    flex: 0 0 calc(20% - 1.2rem);
    max-width: calc(20% - 1.2rem);
    text-align: center;
    padding: 2rem 1.2rem;
    background: var(--cream);
    border: 1px solid rgba(212, 168, 67, 0.12);
    border-radius: var(--radius);
    transition: var(--transition);
}

.experience-item:hover {
    background: var(--white);
    border-color: var(--gold);
    box-shadow: var(--shadow-card);
    transform: translateY(-6px);
}

.experience-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: rgba(212, 168, 67, 0.1);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: var(--transition);
}

.experience-item:hover .experience-icon {
    background: var(--gold);
    color: var(--black);
}

.experience-item h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--black);
}

.experience-item p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.experiences-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.experiences-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--gray-100);
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}

.experiences-dots button.active {
    background: var(--gold);
    width: 22px;
    border-radius: 4px;
}

@media (max-width: 992px) {
    .experience-item {
        flex: 0 0 calc(33.333% - 1rem);
        max-width: calc(33.333% - 1rem);
    }
}

@media (max-width: 768px) {
    .experiences-slider-header {
        flex-direction: column;
        align-items: stretch;
    }

    .experiences-slider-nav {
        align-self: center;
    }

    .experience-item {
        flex: 0 0 calc(50% - 0.75rem);
        max-width: calc(50% - 0.75rem);
        padding: 1.5rem 0.8rem;
    }

    .experience-icon {
        width: 52px;
        height: 52px;
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .experience-item {
        flex: 0 0 calc(100% - 0px);
        max-width: 100%;
    }
}

/* ---------- Comparison ---------- */
.comparison {
    padding: 5rem 0;
    background: var(--cream);
}

.comparison-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 920px;
    margin: 0 auto;
}

/* Wavy "vs" divider between the two cards — the stroke draws itself in as
   this section scrolls through view (JS toggles .is-drawn, see main.js). */
.comparison-divider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.comparison-divider path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.comparison-grid.is-drawn .comparison-divider path {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .comparison-divider path {
        transition: none;
        stroke-dashoffset: 0;
    }
}

.comparison-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    padding: 2.4rem 2rem 2rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.comparison-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.comparison-card.featured {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.comparison-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--black);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 1.1rem;
    border-radius: 40px;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(212, 168, 67, 0.35);
}

.comparison-card-head {
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-100);
}

.comparison-card.featured .comparison-card-head {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.comparison-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.9rem;
    border-radius: 50%;
    background: rgba(212, 168, 67, 0.12);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.comparison-card.featured .comparison-icon {
    background: var(--gold);
    color: var(--black);
}

.comparison-card-head h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.comparison-tagline {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.comparison-card.featured .comparison-tagline {
    color: rgba(255, 255, 255, 0.65);
}

.comparison-card ul {
    list-style: none;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.comparison-card ul li {
    padding: 0.45rem 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.95rem;
}

.comparison-card ul li i {
    color: var(--gold);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.comparison-price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 1.2rem;
}

.comparison-card.featured .comparison-price {
    color: var(--gold);
}

.comparison-price-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.comparison-card.featured .comparison-price-label {
    color: rgba(255, 255, 255, 0.55);
}

.comparison-price-unit {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.comparison-card.featured .comparison-price-unit {
    color: rgba(255, 255, 255, 0.55);
}

.comparison-card .btn {
    width: 100%;
}

.comparison-card.featured .btn-outline {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--white);
}

.comparison-card.featured .btn-outline:hover {
    background: var(--white);
    color: var(--black);
}

@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .comparison-divider {
        display: none;
    }
}

/* ---------- Travel guides hub ---------- */
.travel-guides-hub {
    padding: 5rem 0;
    background: var(--white);
}

.guides-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.guide-hub-card {
    background: var(--cream);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.guide-hub-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

/* Icon-on-gradient header, replacing the old placeholder images */
.guide-hub-image {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    color: rgba(255, 255, 255, 0.92);
    position: relative;
    overflow: hidden;
}

.guide-hub-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
}

.guide-hub-image i {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.guide-hub-card:hover .guide-hub-image i {
    transform: scale(1.12) rotate(-4deg);
}

.guide-hub-image.hue-climate { background: linear-gradient(135deg, #1d2a3a, #0d1420); }
.guide-hub-image.hue-budget { background: linear-gradient(135deg, #4a3a12, #1a1408); }
.guide-hub-image.hue-family { background: linear-gradient(135deg, #2b2116, #0f0c07); }
.guide-hub-image.hue-visa { background: linear-gradient(135deg, #1f2937, #0a0f17); }
.guide-hub-image.hue-packing { background: linear-gradient(135deg, #3a2a1a, #150f08); }
.guide-hub-image.hue-weather { background: linear-gradient(135deg, #16283a, #060d15); }

.guide-hub-content {
    padding: 1.2rem 1.3rem 1.4rem;
}

.guide-tag {
    display: inline-block;
    background: var(--gold-glow);
    color: var(--gold-dark);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.8rem;
    border-radius: 40px;
    margin-bottom: 0.5rem;
}

.guide-hub-content h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.guide-hub-content h3 a {
    transition: var(--transition);
}

.guide-hub-content h3 a:hover {
    color: var(--gold-dark);
}

.guide-hub-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.guide-link {
    display: inline-block;
    margin-top: 0.6rem;
    font-weight: 700;
    color: var(--gold-dark);
    transition: var(--transition);
}

.guide-hub-card:hover .guide-link {
    letter-spacing: 0.02em;
}

.guides-hub-cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* ---------- Final CTA ---------- */
.final-cta-emotional {
    padding: 6rem 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.82) 55%, rgba(10, 10, 10, 0.94) 100%),
        url('/images/gallery/elefante-acacia.jpg');
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-align: center;
    position: relative;
    border-top: 2px solid rgba(212, 168, 67, 0.2);
    border-bottom: 2px solid rgba(212, 168, 67, 0.2);
}

.final-cta-content {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.final-cta-quote {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--gold);
    margin-bottom: 1.2rem;
    position: relative;
    line-height: 1.5;
}

.final-cta-quote::before {
    content: '\201C';
    display: block;
    font-family: Georgia, serif;
    font-size: 3.5rem;
    font-style: normal;
    color: rgba(212, 168, 67, 0.35);
    line-height: 1;
    margin-bottom: -0.5rem;
}

.final-cta-content h2 {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 0.6rem;
    color: var(--white);
}

.final-cta-content p {
    font-size: 1.1rem;
    opacity: 0.85;
    margin-bottom: 2rem;
    color: var(--gray-300);
}

.final-cta-content .btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
}

.final-cta-content .btn-primary {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
}

.final-cta-content .btn-primary:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    color: var(--white);
}

.final-cta-content .btn-success {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}

.final-cta-content .btn-success:hover {
    background: #1da85c;
    border-color: #1da85c;
}


/* ============================================================
   GROUP 7 – STORYTELLING FLOW
   ============================================================ */

.storytelling-flow {
    padding: 4rem 0;
    background: var(--cream);
}

.story-chapter {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 2.5rem;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.story-chapter:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
}

.story-chapter.reverse {
    grid-template-columns: 2fr 1fr;
}

.story-chapter.reverse .story-chapter-image {
    order: 2;
}

.story-chapter.reverse .story-chapter-content {
    order: 1;
}

.story-chapter-image {
    height: 280px;
    background-size: cover;
    background-position: center;
    min-height: 200px;
}

.story-chapter-content {
    padding: 2rem 2.5rem 2rem 2rem;
}

.story-chapter-content .chapter-number {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gold);
    background: rgba(212, 168, 67, 0.12);
    padding: 0.2rem 0.8rem;
    border-radius: 40px;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.story-chapter-content h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--black);
}

.story-chapter-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.8rem;
}

.story-chapter-content blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--gold-dark);
    border-left: 3px solid var(--gold);
    padding-left: 1.2rem;
    margin-top: 0.5rem;
}

@media (max-width: 992px) {
    .story-chapter {
        grid-template-columns: 1fr !important;
    }
    .story-chapter.reverse {
        grid-template-columns: 1fr !important;
    }
    .story-chapter.reverse .story-chapter-image {
        order: 0;
    }
    .story-chapter.reverse .story-chapter-content {
        order: 0;
    }
    .story-chapter-image {
        height: 180px;
        min-height: 140px;
    }
    .story-chapter-content {
        padding: 1.5rem;
    }
    .story-chapter-content h3 {
        font-size: 1.3rem;
    }
}

/* ============================================================
   JOURNEY STEPS – compact replacement for the old 8-chapter flow
   ============================================================ */

.journey-steps-section {
    padding: 4rem 0 4.5rem;
    background: var(--cream);
}

.journey-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 1.5rem;
    position: relative;
}

.journey-step {
    position: relative;
    background: var(--white);
    border-radius: var(--radius);
    padding: 0 1.3rem 1.6rem;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    isolation: isolate;
}

/* Offset gold layer behind each card, as in the reference infographic */
.journey-step::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    background: var(--gold);
    transform: translate(9px, 9px);
    z-index: -1;
}

.journey-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
}

/* Rounded-bottom icon panel sitting inside the top of the card */
.journey-step .journey-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 58px;
    margin: 0 auto 1.1rem;
    border-radius: 0 0 38px 38px;
    background: var(--black);
    color: var(--gold);
    font-size: 1.4rem;
}

.journey-step h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 0.45rem;
}

.journey-step p {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

@media (max-width: 992px) {
    .journey-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .journey-steps-section {
        padding: 3rem 0 3.5rem;
    }

    .journey-steps-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* ============================================================
   GROUP 8 – INTERACTIVE MAP
   ============================================================ */

.interactive-map {
    padding: 4rem 0;
    background: var(--white);
}

.map-interactive {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-elevated);
    background: var(--cream);
}

.map-svg-container {
    position: relative;
    width: 100%;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f4ec 0%, #e8e0d4 100%);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-svg {
    max-width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}

.map-marker {
    position: absolute;
    cursor: pointer;
    transition: var(--transition);
}

.map-marker:hover {
    transform: scale(1.1);
    z-index: 10;
}

.marker-dot {
    display: block;
    width: 16px;
    height: 16px;
    background: var(--gold);
    border-radius: 50%;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.map-marker:hover .marker-dot {
    box-shadow: 0 0 0 6px rgba(212, 168, 67, 0.5), 0 4px 20px rgba(0, 0, 0, 0.3);
}

.marker-label {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--white);
    background: rgba(0, 0, 0, 0.7);
    padding: 0.1rem 0.6rem;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
}

.map-marker:hover .marker-label {
    opacity: 1;
}

.marker-popup {
    position: absolute;
    bottom: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-elevated);
    min-width: 180px;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    border: 1px solid rgba(212, 168, 67, 0.2);
}

.map-marker:hover .marker-popup {
    opacity: 1;
    pointer-events: auto;
    bottom: calc(100% + 28px);
}

.marker-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--white);
}

.marker-popup h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    margin-bottom: 0.2rem;
    color: var(--black);
}

.marker-popup p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.marker-popup a {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold-dark);
    transition: var(--transition);
}

.marker-popup a:hover {
    color: var(--gold);
}

@media (max-width: 768px) {
    .map-svg-container {
        padding: 1rem;
        min-height: 280px;
    }
    .marker-label {
        display: none;
    }
    .marker-popup {
        min-width: 120px;
        padding: 0.5rem 0.6rem;
        bottom: calc(100% + 10px);
    }
    .map-marker:hover .marker-popup {
        bottom: calc(100% + 14px);
    }
    .marker-dot {
        width: 10px;
        height: 10px;
        border-width: 2px;
    }
}


/* ============================================================
   GROUP 9 – YOUTUBE SHORTS (AUTO-STOP PLAYER)
   ============================================================ */

.youtube-shorts-section {
    padding: 5rem 0;
    background:
        radial-gradient(ellipse 900px 500px at 15% 0%, rgba(212, 168, 67, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 700px 500px at 100% 100%, rgba(255, 0, 0, 0.08) 0%, transparent 60%),
        linear-gradient(160deg, #0d1f33 0%, #0a1a2b 45%, #081321 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Dot-grid texture, faded at the edges so it reads as background noise */
.youtube-shorts-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.youtube-shorts-section .container {
    position: relative;
    z-index: 2;
}

/* Scattered film/play iconography, purely decorative background flourish */
.youtube-shorts-bg-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.youtube-shorts-bg-icons i {
    position: absolute;
    color: rgba(212, 168, 67, 0.10);
}

.youtube-shorts-bg-icons i:nth-child(1) { top: 6%;  left: 6%;   font-size: 2.6rem; transform: rotate(-12deg); }
.youtube-shorts-bg-icons i:nth-child(2) { top: 14%; left: 42%;  font-size: 1.8rem; transform: rotate(8deg); color: rgba(255, 0, 0, 0.10); }
.youtube-shorts-bg-icons i:nth-child(3) { top: 8%;  right: 8%;  font-size: 3.4rem; transform: rotate(15deg); }
.youtube-shorts-bg-icons i:nth-child(4) { top: 48%; left: 3%;   font-size: 2.2rem; transform: rotate(-8deg); }
.youtube-shorts-bg-icons i:nth-child(5) { top: 55%; right: 5%;  font-size: 2.8rem; transform: rotate(-18deg); color: rgba(255, 0, 0, 0.10); }
.youtube-shorts-bg-icons i:nth-child(6) { bottom: 8%; left: 16%; font-size: 2.2rem; transform: rotate(10deg); }
.youtube-shorts-bg-icons i:nth-child(7) { bottom: 6%; right: 20%; font-size: 1.8rem; transform: rotate(-6deg); }
.youtube-shorts-bg-icons i:nth-child(8) { bottom: 16%; right: 42%; font-size: 2.4rem; transform: rotate(20deg); }

@media (max-width: 768px) {
    .youtube-shorts-bg-icons i {
        display: none;
    }
    .youtube-shorts-bg-icons i:nth-child(1),
    .youtube-shorts-bg-icons i:nth-child(3),
    .youtube-shorts-bg-icons i:nth-child(5) {
        display: block;
        font-size: 1.8rem;
    }
}

.youtube-shorts-section .section-title-left {
    text-align: center;
    margin-bottom: 3rem;
}

.youtube-shorts-section .section-title-left .section-badge {
    background: rgba(255, 0, 0, 0.12);
    color: #ff0000;
    padding: 0.3rem 1.2rem;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
}

.youtube-shorts-section .section-title-left h2 {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0.5rem 0;
    position: relative;
    display: inline-block;
}

.youtube-shorts-section .section-title-left h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #ff0000, #d4a843);
    border-radius: 4px;
}

.youtube-shorts-section .section-title-left p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
    max-width: 600px;
    margin: 1rem auto 0;
}

/* ============================================================
   SHORTS GRID
   ============================================================ */
.shorts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Each short item – relative container */
.short-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 9/16;
    background: #1a1a2e;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

.short-item:hover {
    transform: scale(1.03) translateY(-6px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
    border-color: rgba(212, 168, 67, 0.2);
}

/* Thumbnail wrapper – covers entire card */
.thumbnail-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: opacity 0.4s ease;
}

.thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play button overlay */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 3;
}

.short-item:hover .play-btn {
    color: #ffffff;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Video wrapper – hidden by default, shows when playing */
.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* When video is playing – show iframe, hide thumbnail */
.short-item.playing .thumbnail-wrapper {
    opacity: 0;
    pointer-events: none;
}

.short-item.playing .video-wrapper {
    opacity: 1;
    pointer-events: auto;
}

.short-item.playing .play-btn {
    opacity: 0;
}

/* Badge – top left */
.short-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #d4a843;
    padding: 0.15rem 0.7rem;
    border-radius: 20px;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(212, 168, 67, 0.15);
    z-index: 10;
    pointer-events: none;
}

/* Overlay – bottom with gradient */
.short-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 0.6rem 0.8rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    z-index: 10;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   CHANNEL BUTTON
   ============================================================ */
.youtube-shorts-section .text-center a {
    background: #ff0000;
    color: #ffffff;
    padding: 0.8rem 2.5rem;
    border-radius: 60px;
    border: none;
    transition: all 0.3s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-size: 1rem;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.2);
}

.youtube-shorts-section .text-center a:hover {
    background: #cc0000;
    transform: translateY(-4px);
    box-shadow: 0 8px 35px rgba(255, 0, 0, 0.35);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .shorts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }
    .youtube-shorts-section .section-title-left h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .youtube-shorts-section {
        padding: 3rem 0;
    }
    .youtube-shorts-section .section-title-left h2 {
        font-size: 1.8rem;
    }
    .youtube-shorts-section .section-title-left p {
        font-size: 0.95rem;
    }
    .shorts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.8rem;
    }
    .short-item {
        border-radius: 12px;
    }
    .short-overlay {
        font-size: 0.6rem;
        padding: 1.5rem 0.4rem 0.5rem;
    }
    .short-badge {
        font-size: 0.45rem;
        top: 6px;
        left: 6px;
        padding: 0.1rem 0.5rem;
    }
    .play-btn {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .youtube-shorts-section {
        padding: 2rem 0;
    }
    .youtube-shorts-section .section-title-left h2 {
        font-size: 1.4rem;
    }
    .youtube-shorts-section .section-title-left p {
        font-size: 0.8rem;
    }
    .youtube-shorts-section .section-title-left .section-badge {
        font-size: 0.6rem;
        padding: 0.15rem 0.8rem;
    }
    .shorts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
    .short-item {
        border-radius: 10px;
    }
    .short-overlay {
        font-size: 0.5rem;
        padding: 1rem 0.3rem 0.4rem;
    }
    .short-badge {
        font-size: 0.4rem;
        top: 4px;
        left: 4px;
        padding: 0.05rem 0.4rem;
    }
    .play-btn {
        font-size: 2.2rem;
    }
}

/* ============================================================
   GROUP 10 – UTILITIES
   ============================================================ */

/* ---------- Scroll animations ---------- */
/* Scroll-reveal. These start hidden and are revealed by the observer in
   main.js. The `js` class is set on <html> by that script, so if JavaScript
   is unavailable — or the observer misses an element — the content stays
   visible instead of leaving a blank page. */
.js .story-chapter,
.js .safari-3d-card,
.js .signature-item,
.js .guide-hub-card,
.js .testimonial-card,
.js .migration-month,
.js .award-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    .js .story-chapter,
    .js .safari-3d-card,
    .js .signature-item,
    .js .guide-hub-card,
    .js .testimonial-card,
    .js .migration-month,
    .js .award-item {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Image badges ---------- */
.image-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.2rem 1rem;
    border-radius: 40px;
    font-size: 0.7rem;
}

/* ---------- Responsive extras ---------- */
@media (max-width: 640px) {
    .container {
        padding: 0 14px;
    }
    .section-title-left h2 {
        font-size: 1.6rem;
    }
    .section-title-left p {
        font-size: 0.95rem;
    }
    .glass-title {
        font-size: 1.8rem;
    }
    .glass-sub {
        font-size: 0.9rem;
    }
    .planner-result-content .rec-details {
        grid-template-columns: 1fr;
    }
    .mega-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .planner-result-content {
        padding: 1rem;
    }
    .story-content h3 {
        font-size: 1.4rem;
    }
    .guide-quote {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
    .story-meta {
        font-size: 0.75rem;
        gap: 0.4rem 0.8rem;
    }
    .final-cta-content h2 {
        font-size: 1.6rem;
    }
    .final-cta-quote {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .mega-footer-grid {
        grid-template-columns: 1fr;
    }
    .trust-authority-grid {
        gap: 0.8rem 1.5rem;
    }
    .trust-stat .trust-number {
        font-size: 1.6rem;
    }
    .gallery-masonry {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 130px;
        gap: 0.6rem;
    }
    .gallery-masonry-item.tall {
        grid-row: span 2;
    }
    .gallery-masonry-item.wide {
        grid-column: span 2;
    }
    .glass-content {
        padding: 1rem 0.6rem;
    }
    .glass-title {
        font-size: 1.4rem;
    }
    .glass-badge {
        font-size: 0.55rem;
        padding: 0.1rem 0.8rem;
    }
    .glass-actions .btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.8rem;
    }
    .hero {
        min-height: 420px;
        height: 80vh;
    }
    .final-cta-content .btn {
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
    }
    .sticky-booking .sticky-btn {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .shorts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .safari-3d-grid {
        grid-template-columns: 1fr;
    }
    .comparison-card {
        padding: 1.2rem;
    }
    .comparison-card h3 {
        font-size: 1.2rem;
    }
}

/* ---------- Safari listing: quick-pick chips ---------- */
.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.quick-filter-chip {
    appearance: none;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.quick-filter-chip:hover {
    border-color: var(--gold);
}

.quick-filter-chip.active {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.more-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: var(--gray-600);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.4rem 0;
    margin-bottom: 1rem;
}

.more-filters-toggle i {
    transition: transform 0.2s;
}

.more-filters-toggle.open i {
    transform: rotate(180deg);
}

.more-filters-panel {
    display: none;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
}

.more-filters-panel.open {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}

/* ---------- Safari listing: popular packages ---------- */
.popular-packages-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.popular-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (max-width: 900px) {
    .popular-packages-grid {
        grid-template-columns: 1fr;
    }
}

.popular-package-card {
    display: block;
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--transition), box-shadow var(--transition);
}

.popular-package-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.popular-package-card .popular-package-img {
    position: relative;
    aspect-ratio: 4 / 3;
}

.popular-package-card .popular-package-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.popular-package-badge {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    background: var(--gold);
    color: var(--black);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    box-shadow: var(--shadow-card);
}

.popular-package-body {
    padding: 1.1rem 1.2rem 1.3rem;
}

.popular-package-body h3 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    color: var(--black);
}

.popular-package-body .pkg-dest {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
}

.popular-package-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gray-200);
    padding-top: 0.7rem;
}

.popular-package-body .price-tag {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--black);
}

.popular-package-body .price-tag small {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.popular-package-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--black);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ---------- Safari page: included/excluded icon grid ---------- */
.included-icon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 700px) {
    .included-icon-grid {
        grid-template-columns: 1fr;
    }
}

.included-icon-list {
    list-style: none;
    padding: 0;
    margin: 0.8rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.included-icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

.included-icon-list.yes li i {
    color: #2f9e44;
    margin-top: 0.2rem;
}

.included-icon-list.no li i {
    color: var(--gray-600);
    margin-top: 0.2rem;
}

/* ---------- Safari listing: main package grid (same card language as Popular Now) ---------- */
.package-grid-home {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 900px) {
    .package-grid-home {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .package-grid-home {
        grid-template-columns: 1fr;
    }
}

.package-card-home.pkg-card-hidden {
    display: none;
}

.pkg-body {
    padding: 1.1rem 1.2rem 1.3rem;
}

.pkg-body h3 {
    font-size: 1.05rem;
    margin: 0 0 0.3rem;
    color: var(--black);
}

.pkg-body .pkg-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gray-200);
    padding-top: 0.7rem;
    margin-top: 0.8rem;
}

.pkg-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--black);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    text-decoration: none;
    transition: background var(--transition);
}

.pkg-arrow:hover {
    background: var(--gold-dark);
}

/* ---------- Park preview cards (Read about the parks first) ---------- */
.park-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3rem;
    margin: 1.5rem 0 2.5rem;
}

.park-preview-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .park-preview-grid,
    .park-preview-grid.cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .park-preview-grid,
    .park-preview-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}

.park-preview-card {
    display: block;
    background: var(--white);
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--transition), box-shadow var(--transition);
}

.park-preview-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.park-preview-img {
    position: relative;
    aspect-ratio: 4 / 3;
}

.park-preview-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.park-preview-days {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--black);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
}

.park-preview-body {
    padding: 1rem 1.1rem 1.2rem;
}

.park-preview-body h3 {
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
    color: var(--black);
}

.park-preview-body p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 0.9rem;
}

.park-preview-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gold-dark);
}

.park-preview-link i {
    font-size: 0.72rem;
    transition: transform var(--transition);
}

.park-preview-card:hover .park-preview-link i {
    transform: translateX(3px);
}

/* ---------- Mega menu ---------- */
.has-mega {
    position: relative;
}

.mega-trigger {
    appearance: none;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: color var(--transition);
}

.mega-trigger i {
    font-size: 0.65rem;
    transition: transform 0.2s;
}

#mainNav ul li .has-mega:hover .mega-trigger,
#mainNav ul li .has-mega.open .mega-trigger {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
}

.has-mega:hover .mega-trigger i,
.has-mega.open .mega-trigger i {
    transform: rotate(180deg);
}

.mega-panel {
    position: absolute;
    top: calc(100% + 1.3rem);
    left: 0;
    transform: translateY(8px);
    width: min(640px, 90vw);
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    padding: 1.6rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 200;
}

.has-mega:hover .mega-panel,
.has-mega.open .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mega-panel-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 1.8rem;
}

.mega-col {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mega-col-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.mega-link {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.5rem 0.4rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background var(--transition);
}

.mega-link:hover {
    background: var(--gray-100);
}

.mega-link-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.mega-link strong {
    display: block;
    font-size: 0.88rem;
    color: var(--black);
    font-weight: 700;
}

.mega-link small {
    display: block;
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.mega-link-plain {
    display: block;
    padding: 0.45rem 0.4rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.mega-link-plain:hover {
    background: var(--gray-100);
    color: var(--gold-dark);
}

.mega-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gold-dark);
    text-decoration: none;
}

.mega-cta i {
    font-size: 0.7rem;
    transition: transform var(--transition);
}

.mega-cta:hover i {
    transform: translateX(3px);
}

.mega-feature {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: var(--white);
    min-height: 220px;
}

.mega-feature img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-feature::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 55%, transparent 80%);
}

.mega-feature-badge {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 2;
    background: var(--gold);
    color: var(--black);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}

.mega-feature-body {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
}

.mega-feature-body strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.mega-feature-body small {
    display: block;
    font-size: 0.75rem;
    opacity: 0.85;
    margin-bottom: 0.5rem;
}

.mega-feature-price {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--gold-light);
}

@media (max-width: 992px) {
    .mega-panel {
        position: static;
        transform: none;
        width: 100%;
        box-shadow: none;
        border-radius: 12px;
        background: var(--gray-100);
        padding: 1rem;
        margin-top: 0.5rem;
        display: none;
    }

    .has-mega.open .mega-panel {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mega-panel-inner {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .mega-feature {
        min-height: 140px;
    }

    .mega-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 0.5rem 0;
    }
}

/* ---------- Zanzibar: at-a-glance strip under hero ---------- */
.glance-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.2rem;
    background: var(--white);
    border-radius: 18px;
    box-shadow: var(--shadow-elevated);
    padding: 1.3rem 2rem;
    margin: -3.5rem auto 0;
    max-width: 900px;
    position: relative;
    z-index: 5;
}

.glance-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-align: left;
}

.glance-item i {
    font-size: 1.2rem;
    color: var(--gold-dark);
}

.glance-item strong {
    display: block;
    font-size: 0.92rem;
    color: var(--black);
}

.glance-item span {
    display: block;
    font-size: 0.76rem;
    color: var(--text-secondary);
}

@media (max-width: 700px) {
    .glance-strip {
        margin-top: -2.5rem;
        gap: 1.2rem 1.6rem;
        padding: 1.1rem 1.4rem;
    }
}

/* ---------- Zanzibar: why-add three-up callouts ---------- */
.why-add-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 700px) {
    .why-add-grid {
        grid-template-columns: 1fr;
    }
}

.why-add-item {
    text-align: center;
    padding: 1.5rem 1.2rem;
}

.why-add-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 1rem;
}

.why-add-item h3 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.why-add-item p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ---------- Zanzibar: beach cards (image + tide note) ---------- */
.beach-card {
    display: block;
    background: var(--white);
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.beach-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
}

.beach-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.beach-card-region {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--black);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
}

.beach-card-body {
    padding: 1.2rem 1.3rem 1.4rem;
}

.beach-card-body h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.beach-card-body p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 0.7rem;
}

.beach-card-best {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gold-dark);
}

/* ---------- Zanzibar: featured package banner ---------- */
.featured-package-banner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    color: var(--white);
    min-height: 280px;
    display: flex;
    align-items: flex-end;
}

.featured-package-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-package-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 55%, transparent 85%);
}

.featured-package-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    max-width: 560px;
}

.featured-package-badge {
    display: inline-block;
    background: var(--gold);
    color: var(--black);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    margin-bottom: 0.8rem;
}

.featured-package-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.featured-package-content p {
    font-size: 0.92rem;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.featured-package-price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--gold-light);
    margin-bottom: 1.2rem;
}

/* ---------- Trekking: route cards ---------- */
.route-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .route-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .route-grid {
        grid-template-columns: 1fr;
    }
}

.route-grid.featured {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
    .route-grid.featured {
        grid-template-columns: 1fr;
    }
}

.route-card {
    display: block;
    background: var(--white);
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--transition), box-shadow var(--transition);
}

.route-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.route-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
}

.route-card.featured .route-card-img {
    aspect-ratio: 16 / 9;
}

.route-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.route-card-days {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--black);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
}

.route-card-success {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.route-card-success.highest { background: #2f9e44; color: var(--white); }
.route-card-success.high { background: var(--gold); color: var(--black); }
.route-card-success.good { background: var(--gray-800); color: var(--white); }
.route-card-success.lower { background: var(--gray-300); color: var(--black); }

.route-card-body {
    padding: 1.1rem 1.2rem 1.3rem;
}

.route-card-tagline {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold-dark);
    margin-bottom: 0.3rem;
}

.route-card-body h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.route-card-body p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ---------- Trekking: mountain cards (Meru, Lengai, Usambara) ---------- */
.mountain-card {
    display: block;
    background: var(--white);
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.mountain-card-img {
    aspect-ratio: 4 / 3;
}

.mountain-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mountain-card-body {
    padding: 1.1rem 1.2rem 1.3rem;
}

.mountain-card-body h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.mountain-card-body p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ---------- Group safaris: how-it-works steps ---------- */
.how-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .how-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .how-steps-grid {
        grid-template-columns: 1fr;
    }
}

.how-step {
    position: relative;
    text-align: center;
    padding: 1.6rem 1.2rem;
    background: var(--white);
    border-radius: var(--radius-md, 16px);
    box-shadow: var(--shadow-card);
}

.how-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--black);
    color: var(--gold);
    font-weight: 800;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.how-step h3 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.how-step p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ---------- Group safaris: departure calendar table ---------- */
.departures-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md, 16px);
    box-shadow: var(--shadow-card);
}

.departures-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    font-size: 0.9rem;
}

.departures-table th {
    background: var(--black);
    color: var(--white);
    text-align: left;
    padding: 0.9rem 1.1rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.departures-table td {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.departures-table tr:last-child td {
    border-bottom: none;
}

.departures-table tr:hover td {
    background: var(--gray-100);
}

.departure-seats {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.82rem;
}

.departure-seats.open { color: #2f9e44; }
.departure-seats.filling { color: var(--gold-dark); }
.departure-seats.full { color: #c0392b; }

.departure-seats i {
    font-size: 0.6rem;
}

.departures-note {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Group safaris: availability request card ---------- */
.availability-card {
    background: var(--black);
    color: var(--white);
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.availability-card h2 {
    color: var(--white);
    font-size: 1.6rem;
    margin-bottom: 0.7rem;
}

.availability-card p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin-bottom: 1.6rem;
}

.availability-stats {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
}

.availability-stat strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gold);
}

.availability-stat span {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.2rem;
}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float {
    position: fixed;
    right: 1.3rem;
    bottom: 1.3rem;
    z-index: 500;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition);
    animation: whatsapp-pulse 2.4s ease-out infinite;
}

.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.55);
}

@keyframes whatsapp-pulse {
    0% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.45); }
    70% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 600px) {
    .whatsapp-float {
        right: 1rem;
        bottom: 1rem;
        width: 52px;
        height: 52px;
        font-size: 1.35rem;
    }
}

/* ---------- Price calculator widget ---------- */
.price-calc {
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-elevated);
    padding: 1.8rem;
}

.price-calc-heading {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 0.3rem;
}

.price-calc-subtext {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 1.3rem;
}

.price-calc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.price-calc-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--black);
}

.price-calc-stepper {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--gray-100);
    border-radius: 999px;
    padding: 0.3rem;
}

.price-calc-stepper button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--black);
    color: var(--white);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}

.price-calc-stepper button:hover {
    background: var(--gold-dark);
}

.price-calc-people {
    width: 42px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 800;
    color: var(--black);
    font-family: var(--font-body);
}

.price-calc-breakdown {
    border-top: 1px solid var(--gray-200);
    padding-top: 1.2rem;
    margin-bottom: 1.4rem;
}

.price-calc-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.price-calc-line span:first-child {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.price-calc-per-person {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--black);
}

.price-calc-total-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--gray-200);
}

.price-calc-total-line span:first-child {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--black);
}

.price-calc-total {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gold-dark);
}

.price-calc .btn {
    width: 100%;
    justify-content: center;
}

.price-calc-tiers-note {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 0.9rem;
}

/* ============================================================
   SAFARI DETAIL PAGE (booking-style layout)
   ============================================================ */

.safari-detail-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 992px) {
    .safari-detail-layout {
        grid-template-columns: 1fr;
    }
}

.safari-detail-main {
    min-width: 0;
}

/* ---------- Detail hero ---------- */
.detail-hero {
    position: relative;
    padding: calc(var(--header-height) + 2.5rem) 0 2.5rem;
    color: var(--white);
    overflow: hidden;
}

.detail-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.detail-hero-content {
    position: relative;
    z-index: 2;
}

.detail-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.7rem;
}

.detail-hero-meta .dot {
    opacity: 0.5;
}

.detail-hero h1 {
    color: var(--white);
    font-size: 2.2rem;
    margin-bottom: 0.8rem;
}

.detail-hero-route {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.4rem;
}

.detail-hero-price {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1.4rem;
}

.detail-hero-price strong {
    display: block;
    font-size: 1.6rem;
    color: var(--gold-light);
    font-weight: 800;
}

.detail-hero-quickfacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.detail-hero-quickfacts span {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- Photo gallery with "view all" ---------- */
.detail-gallery {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: repeat(2, 140px);
    gap: 0.6rem;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.detail-gallery a {
    position: relative;
    display: block;
}

.detail-gallery a:first-child {
    grid-row: span 2;
}

.detail-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.detail-gallery-more {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
}

@media (max-width: 700px) {
    .detail-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 110px);
    }

    .detail-gallery a:first-child {
        grid-column: span 2;
        grid-row: span 1;
    }
}

/* ---------- Why you'll love it ---------- */
.love-list {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

@media (max-width: 560px) {
    .love-list {
        grid-template-columns: 1fr;
    }
}

.love-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.love-list li i {
    color: #2f9e44;
    margin-top: 0.2rem;
}

/* ---------- Safari route strip ---------- */
.route-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
}

.route-strip-stop {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 90px;
}

.route-strip-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--black);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.route-strip-stop span {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--black);
}

.route-strip-arrow {
    color: var(--gray-300);
    font-size: 1.1rem;
    flex-shrink: 0;
    padding: 0 0.3rem;
}

@media (max-width: 700px) {
    .route-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .route-strip-arrow {
        transform: rotate(90deg);
        align-self: center;
        padding: 0.3rem 0;
    }
}

/* ---------- Day-by-day accordion ---------- */
.itinerary-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.itinerary-day {
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.itinerary-day-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: none;
    border: none;
    text-align: left;
    padding: 1.1rem 1.3rem;
    cursor: pointer;
    font-family: var(--font-body);
}

.itinerary-day-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--gold-dark);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.itinerary-day-heading {
    flex: 1;
}

.itinerary-day-heading strong {
    display: block;
    font-size: 0.98rem;
    color: var(--black);
}

.itinerary-day-heading small {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.itinerary-day-toggle i {
    color: var(--gray-600);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.itinerary-day.open .itinerary-day-toggle i {
    transform: rotate(180deg);
}

.itinerary-day-body {
    display: none;
    padding: 0 1.3rem 1.3rem 4.2rem;
}

.itinerary-day.open .itinerary-day-body {
    display: block;
}

.itinerary-day-body p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.9rem;
}

.itinerary-day-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.itinerary-day-tags span {
    background: var(--gray-100);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
    color: var(--black);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.itinerary-day-accommodation {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--cream);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
}

.itinerary-day-accommodation i {
    color: var(--gold-dark);
}

/* ---------- Safari features grid ---------- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.feature-tile {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.feature-tile i {
    font-size: 1.15rem;
    color: var(--gold-dark);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.feature-tile span {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.feature-tile strong {
    display: block;
    font-size: 0.9rem;
    color: var(--black);
}

/* ---------- Wildlife / activity tag clouds ---------- */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tag-cloud span {
    background: var(--white);
    box-shadow: var(--shadow-card);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--black);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Getting there ---------- */
.getting-there-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

@media (max-width: 700px) {
    .getting-there-grid {
        grid-template-columns: 1fr;
    }
}

.getting-there-item {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 1.2rem;
}

.getting-there-item i {
    color: var(--gold-dark);
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
    display: block;
}

.getting-there-item strong {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.getting-there-item span {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--black);
}

/* ---------- Why book with us ---------- */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.3rem;
}

.trust-item {
    display: flex;
    gap: 0.9rem;
}

.trust-item i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.trust-item strong {
    display: block;
    font-size: 0.92rem;
    color: var(--black);
    margin-bottom: 0.2rem;
}

.trust-item p {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ---------- Sticky booking card ---------- */
.booking-card-wrap {
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
}

.booking-card {
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-elevated);
    padding: 1.6rem;
    border: 1px solid var(--gray-200);
}

.booking-card-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 0.9rem;
}

.booking-card-from {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.1rem;
}

.booking-card-price {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 1.2rem;
}

.booking-card-price small {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.booking-card-field {
    margin-bottom: 1rem;
}

.booking-card-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 0.4rem;
}

.booking-card-field input[type="date"],
.booking-card-field select {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--black);
    background: var(--white);
}

.booking-card-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--gray-100);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
}

.booking-card-stepper button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--black);
    color: var(--white);
    font-size: 1rem;
    cursor: pointer;
}

.booking-card-stepper button:hover {
    background: var(--gold-dark);
}

.booking-card-stepper input {
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 800;
    font-size: 1rem;
    width: 40px;
    font-family: var(--font-body);
}

.booking-card-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px dashed var(--gray-200);
    padding-top: 0.9rem;
    margin: 0.3rem 0 1.2rem;
}

.booking-card-total span:first-child {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--black);
}

.booking-card-total strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--gold-dark);
}

.booking-card .btn {
    width: 100%;
    justify-content: center;
}

.booking-card-whatsapp {
    margin-top: 0.7rem;
}

/* ---------- Mobile sticky bottom bar ---------- */
.mobile-booking-bar {
    display: none;
}

@media (max-width: 992px) {
    .mobile-booking-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 400;
        background: var(--white);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
        padding: 0.8rem 1rem;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .mobile-booking-bar-price {
        font-size: 0.78rem;
        color: var(--text-secondary);
    }

    .mobile-booking-bar-price strong {
        display: block;
        font-size: 1.1rem;
        color: var(--black);
    }

    .mobile-booking-bar .btn {
        flex-shrink: 0;
    }

    /* leave room so the fixed bar doesn't cover the final CTA/footer */
    body.has-mobile-booking-bar {
        padding-bottom: 70px;
    }
}

.route-strip-stop.linked {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform var(--transition);
}

.route-strip-stop.linked:hover {
    transform: translateY(-3px);
}

.route-strip-stop.linked:hover span:last-child {
    color: var(--gold-dark);
}

.route-strip-stop.linked .route-strip-dot {
    transition: background var(--transition);
}

.route-strip-stop.linked:hover .route-strip-dot {
    background: var(--gold-dark);
}

/* ---------- Save safari button ---------- */
.save-safari-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.save-safari-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.save-safari-btn.saved {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
}

.save-safari-btn i {
    font-size: 0.95rem;
}

.saved-safaris-pill {
    position: fixed;
    top: calc(var(--header-height) + 0.8rem);
    right: 1.3rem;
    z-index: 450;
    background: var(--black);
    color: var(--white);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    display: none;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: var(--shadow-elevated);
}

.saved-safaris-pill.visible {
    display: inline-flex;
}

.saved-safaris-pill i {
    color: var(--gold);
}

@media (max-width: 700px) {
    .saved-safaris-pill {
        top: auto;
        bottom: 5.5rem;
        right: 1rem;
    }
}

/* ---------- Migration season badge ---------- */
.migration-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.35);
    border-radius: 12px;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    color: var(--black);
    margin-top: 1rem;
}

.migration-badge i {
    color: var(--gold-dark);
}

.migration-badge strong {
    color: var(--gold-dark);
}

/* ---------- Saved safaris page ---------- */
.saved-safaris-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .saved-safaris-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .saved-safaris-grid {
        grid-template-columns: 1fr;
    }
}

.saved-safari-card {
    background: var(--white);
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.saved-safari-img {
    aspect-ratio: 4 / 3;
}

.saved-safari-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.saved-safari-body {
    padding: 1.1rem 1.2rem 1.3rem;
}

.saved-safari-body h3 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.saved-safari-price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--gold-dark);
    margin-bottom: 0.9rem;
}

.saved-safari-actions {
    display: flex;
    gap: 0.6rem;
}

.saved-safari-actions .btn {
    flex: 1;
    justify-content: center;
    font-size: 0.82rem;
    padding: 0.5rem 0.8rem;
}

.saved-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.saved-empty-state i {
    font-size: 2.5rem;
    color: var(--gray-300);
    margin-bottom: 1rem;
}

.saved-empty-state h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.saved-empty-state p {
    color: var(--text-secondary);
    margin-bottom: 1.3rem;
}

/* ---------- Contact page ---------- */
.contact-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

.contact-form-card {
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-elevated);
    padding: 2rem;
}

.contact-form-card h2 {
    font-size: 1.3rem;
    margin-bottom: 1.4rem;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 560px) {
    .contact-form-row {
        grid-template-columns: 1fr;
    }
}

.contact-field {
    margin-bottom: 1.1rem;
}

.contact-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 0.4rem;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--black);
    background: var(--white);
    transition: border-color var(--transition);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--gold);
}

.contact-field textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-privacy-note {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.8rem;
}

.contact-form-error {
    display: none;
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.25);
    color: #c0392b;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1.1rem;
}

.contact-form-error.visible {
    display: block;
}

.contact-success {
    display: none;
    text-align: center;
    padding: 2rem 1rem;
}

.contact-success.visible {
    display: block;
}

.contact-success i {
    font-size: 2.5rem;
    color: #2f9e44;
    margin-bottom: 1rem;
}

.contact-success h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.contact-success p {
    color: var(--text-secondary);
    margin-bottom: 1.3rem;
}

/* ---------- Contact info list ---------- */
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.contact-info-item {
    display: flex;
    gap: 1rem;
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: 1.1rem 1.2rem;
}

.contact-info-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
}

.contact-info-item strong {
    display: block;
    font-size: 0.92rem;
    color: var(--black);
    margin-bottom: 0.15rem;
}

.contact-info-item a {
    color: var(--gold-dark);
    font-weight: 700;
    font-size: 0.9rem;
}

/* ---------- Day trip: quick info bar ---------- */
.quick-info-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    margin-top: -3.5rem;
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.quick-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 1.2rem 0.8rem;
    border-right: 1px solid var(--gray-200);
}

.quick-info-item:last-child {
    border-right: none;
}

.quick-info-item i {
    color: var(--gold-dark);
    font-size: 1.1rem;
}

.quick-info-item span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.quick-info-item strong {
    font-size: 0.92rem;
    color: var(--black);
}

@media (max-width: 860px) {
    .quick-info-bar {
        grid-template-columns: repeat(2, 1fr);
        margin-top: -2rem;
    }

    .quick-info-item {
        border-bottom: 1px solid var(--gray-200);
    }
}

/* ---------- Day trip: timeline ---------- */
.day-timeline {
    position: relative;
    padding-left: 2.6rem;
}

.day-timeline::before {
    content: '';
    position: absolute;
    left: 0.65rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--gray-200);
}

.day-timeline-item {
    position: relative;
    padding-bottom: 1.8rem;
}

.day-timeline-item:last-child {
    padding-bottom: 0;
}

.day-timeline-dot {
    position: absolute;
    left: -2.6rem;
    top: 0.15rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--gold-dark);
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--gold-dark);
}

.day-timeline-time {
    font-weight: 800;
    color: var(--gold-dark);
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}

.day-timeline-item strong {
    display: block;
    color: var(--black);
    margin-bottom: 0.2rem;
}

.day-timeline-item p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ---------- Day trip: listing card ---------- */
.day-trip-card {
    display: block;
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--transition), box-shadow var(--transition);
}

.day-trip-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.day-trip-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
}

.day-trip-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.day-trip-card-duration {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    background: rgba(0, 0, 0, 0.65);
    color: var(--white);
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}

.day-trip-card-body {
    padding: 1.1rem 1.2rem 1.3rem;
}

.day-trip-card-body h3 {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
    color: var(--black);
}

.day-trip-card-body p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.9rem;
}

.day-trip-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gray-200);
    padding-top: 0.7rem;
}

.day-trip-card-footer .price-tag {
    font-size: 1rem;
    font-weight: 800;
    color: var(--black);
}

.day-trip-card-footer .price-tag small {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.contact-info-item p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0.15rem 0 0;
}

/* ---------- About: story timeline (years) ---------- */
.story-timeline {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding-left: 2.8rem;
}

.story-timeline::before {
    content: '';
    position: absolute;
    left: 0.9rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: var(--gray-200);
}

.story-timeline-item {
    position: relative;
    padding-bottom: 2.2rem;
}

.story-timeline-item:last-child {
    padding-bottom: 0;
}

.story-timeline-dot {
    position: absolute;
    left: -2.8rem;
    top: 0.15rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--black);
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--gold);
}

.story-timeline-year {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--gold-dark);
    margin-bottom: 0.3rem;
}

.story-timeline-item strong {
    display: block;
    color: var(--black);
    margin-bottom: 0.3rem;
    font-size: 1.05rem;
}

.story-timeline-item p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 600px) {
    .story-timeline {
        padding-left: 2.2rem;
    }

    .story-timeline-dot {
        left: -2.2rem;
    }
}

/* ---------- About: team cards ---------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.6rem;
}

.team-card {
    background: var(--white);
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.team-card-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.team-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-card-body {
    padding: 1.2rem 1.1rem 1.4rem;
}

.team-card-body h3 {
    font-size: 1.05rem;
    color: var(--black);
    margin-bottom: 0.2rem;
}

.team-card-role {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

.team-card-body p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ---------- About: destination pill links ---------- */
.about-destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.2rem;
}

.about-destination-pill {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    text-decoration: none;
    color: var(--white);
}

.about-destination-pill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition);
}

.about-destination-pill:hover img {
    transform: scale(1.06);
}

.about-destination-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
}

.about-destination-pill-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.9rem;
    z-index: 2;
    text-align: center;
    padding: 0 0.5rem;
}

.about-destination-pill-label strong {
    display: block;
    font-size: 1rem;
}

.about-destination-pill-label small {
    font-size: 0.72rem;
    opacity: 0.85;
}

/* ---------- Blog: featured article ---------- */
.featured-article-card {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: stretch;
    background: var(--white);
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-elevated);
}

.featured-article-img {
    position: relative;
    min-height: 320px;
}

.featured-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.featured-article-tag {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    background: var(--gold);
    color: var(--black);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
}

.featured-article-body {
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-article-body h2 {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
}

.featured-article-body p {
    color: var(--text-secondary);
    margin-bottom: 1.3rem;
}

@media (max-width: 860px) {
    .featured-article-card {
        grid-template-columns: 1fr;
    }

    .featured-article-img {
        min-height: 220px;
    }
}

/* ---------- Blog: category pills ---------- */
.blog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.blog-category-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.blog-category-pill:hover,
.blog-category-pill.active {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

@media (max-width: 700px) {
    .blog-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.4rem;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- Blog: article card ---------- */
.blog-card {
    display: block;
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--transition), box-shadow var(--transition);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}

.blog-card-img {
    aspect-ratio: 16 / 10;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card-body {
    padding: 1.2rem 1.3rem 1.4rem;
}

.blog-card-meta {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

.blog-card-meta .dot {
    opacity: 0.5;
    margin: 0 0.3rem;
    color: var(--text-secondary);
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
}

.blog-card-body h3 {
    font-size: 1.08rem;
    margin-bottom: 0.5rem;
    color: var(--black);
}

.blog-card-body p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 0.9rem;
}

.blog-card-read {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--black);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- Blog: popular guide link rows ---------- */
.popular-guides-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.9rem;
}

.popular-guide-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    text-decoration: none;
    color: var(--black);
    font-weight: 600;
    font-size: 0.92rem;
    transition: border-color var(--transition), transform var(--transition);
}

.popular-guide-link:hover {
    border-color: var(--gold);
    transform: translateX(4px);
}

.popular-guide-link i.fa-arrow-right {
    color: var(--gold-dark);
    flex-shrink: 0;
}

/* ---------- Blog: before-you-go tip links ---------- */
.tip-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.tip-link-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: var(--black);
    transition: border-color var(--transition), transform var(--transition);
}

.tip-link-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
}

.tip-link-card i {
    font-size: 1.3rem;
    color: var(--gold-dark);
    flex-shrink: 0;
}

.tip-link-card span {
    font-weight: 600;
    font-size: 0.88rem;
}

/* ---------- Blog: newsletter (UI only, no backend yet) ---------- */
.newsletter-card {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    background: var(--white);
    border-radius: var(--radius-md, 16px);
    box-shadow: var(--shadow-card);
    padding: 2.4rem 2rem;
}

.newsletter-form {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.3rem;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form input[type="email"] {
    flex: 1;
    padding: 0.85rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    font-size: 0.9rem;
    font-family: var(--font-body);
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--gold);
}

.newsletter-note {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.8rem;
}

@media (max-width: 480px) {
    .newsletter-form {
        flex-direction: column;
    }
}

/* ---------- Article: table of contents ---------- */
.article-toc {
    background: var(--gray-100);
    border-radius: var(--radius-md, 16px);
    padding: 1.5rem 1.7rem;
    margin: 0 0 2rem;
}

.article-toc h3 {
    font-size: 1rem;
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem 1.5rem;
}

.article-toc a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-toc a:hover {
    color: var(--gold-dark);
}

/* ---------- Article: meta bar (author/date/reading time) ---------- */
.article-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.3rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    margin-top: 1rem;
}

.article-meta-bar span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- Article: price/data table ---------- */
.article-table-wrap {
    overflow-x: auto;
    margin: 1.2rem 0 1.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
}

.article-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.article-table th,
.article-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.article-table th {
    background: var(--gray-100);
    font-weight: 700;
    color: var(--black);
}

.article-table tr:last-child td {
    border-bottom: none;
}

.article-table tr:last-child td strong {
    color: var(--black);
}

/* ---------- Article: related-safari CTA embed ---------- */
.article-safari-cta {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    background: var(--black);
    color: var(--white);
    border-radius: var(--radius-md, 16px);
    padding: 1.4rem 1.6rem;
    margin: 2rem 0;
}

.article-safari-cta img {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.article-safari-cta-body {
    flex: 1;
}

.article-safari-cta-body span {
    display: block;
    font-size: 0.75rem;
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
}

.article-safari-cta-body strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.article-safari-cta-body em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .article-safari-cta {
        flex-direction: column;
        text-align: center;
    }
}

/* ---------- Article: related-articles links ---------- */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
}

.related-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    text-decoration: none;
    color: var(--black);
    font-weight: 600;
    font-size: 0.88rem;
    transition: border-color var(--transition), transform var(--transition);
}

.related-link:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
}

.related-link i {
    color: var(--gold-dark);
    flex-shrink: 0;
}

/* ---------- Legal pages (privacy/terms/cookies) ---------- */
.legal-body {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 0;
}

.legal-body h2 {
    margin-top: 2.4rem;
    font-size: 1.35rem;
}

.legal-body h3 {
    margin-top: 1.6rem;
    font-size: 1.1rem;
}

.legal-body ul {
    margin: 0.8rem 0 0.8rem 1.3rem;
}

.legal-body li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

.legal-body p {
    line-height: 1.7;
}

.legal-updated {
    display: inline-block;
    margin-bottom: 1.6rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background: var(--gray-100);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.legal-note,
.legal-contact {
    padding: 1.3rem 1.5rem;
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    background: rgba(212, 168, 67, 0.09);
}

.legal-note {
    margin: 1.4rem 0;
}

.legal-contact {
    margin-top: 2.4rem;
}

.legal-contact p {
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Booking flow: 4-step progress + panels                              */
/* ------------------------------------------------------------------ */
.booking-steps {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    gap: 0.5rem;
}

.booking-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    color: var(--gray-500, #9a9a9a);
    font-size: 0.85rem;
    font-weight: 600;
}

.booking-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gray-100, #f0f0f0);
    color: inherit;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.booking-step.active { color: var(--gold-dark, #b8922f); }
.booking-step.active .booking-step-num { background: var(--gold, #d4a843); color: #fff; }
.booking-step.done { color: var(--dark, #1c1f26); }
.booking-step.done .booking-step-num { background: #1e824c; color: #fff; }

.booking-step-label { display: none; }

@media (min-width: 640px) {
    .booking-step-label { display: inline; }
}

.booking-panel { display: none; }
.booking-panel.active { display: block; animation: bookingFadeIn 0.2s ease; }

@keyframes bookingFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.booking-step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
}

.booking-review-card {
    background: var(--gray-50, #fafafa);
    border: 1px solid var(--gray-100, #eee);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.booking-review-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100, #eee);
    font-size: 0.92rem;
}

.booking-review-row:last-child { border-bottom: none; }
.booking-review-row span { color: #777; }

.booking-review-total {
    background: #fff;
    border: 1px solid var(--gray-100, #eee);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.booking-review-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}

.booking-review-note {
    color: #777;
    font-size: 0.82rem;
    margin: 0.4rem 0 0;
}

@media (max-width: 600px) {
    .booking-steps { gap: 0.25rem; }
    .booking-step-num { width: 24px; height: 24px; font-size: 0.78rem; }
    .booking-step-actions { flex-direction: column-reverse; align-items: stretch; }
    .booking-step-actions .btn { width: 100%; }
    .booking-review-row { flex-direction: column; gap: 0.15rem; }
}