/* ==================================================
   ASILI TRAILS AFRICA — style.css
   Mobile-first. Breakpoints: 400, 576, 768, 1024, 1280 (desktop nav), 1440 — see 1. TOKENS.

   0. Fonts (self-hosted)
   1. Tokens
   2. Base
   3. Utilities / buttons
   4. Header
   5. Mobile navigation panel
   6. Desktop navigation
   7. Hero
   8. Shared section components (eyebrow, heading, intro, links)
   9. About
   10. Featured safari packages
   11. Responsible travel band
   12. Destinations (sticky intro)
   13. Testimonials
   14. Kilimanjaro (full-screen gallery)
   15. Experiences (image grid)
   16. Contact / plan your journey + form
   17. Closing CTA band + footer
   18. Floating WhatsApp
   19. Inner pages: page hero (contact.html and future pages)
   20. Inner pages: map band
   20b. About page: why grid, our-home editorial, dark-band lead
   20c. Inner-page components: split rows, photo band, staggered experience grid, notice panel
   20d. Detail-page components: breadcrumb, facts strip, itinerary timeline, details, gallery, link rows
   20e. 404 page
   20f. Legal pages: compact text hero, sticky contents, reading column
   21. Reduced motion
   ================================================== */

/* ==================================================
   0. FONTS — self-hosted (no Google Fonts request), SIL Open Font License.
   Variable WOFF2, Latin subset, weights 300–700 in one file each.
   Cormorant Garamond (headings) + Inter (body), as used by the Ombara reference.
   ================================================== */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================================================
   1. TOKENS
   Breakpoints (min-width, mobile first) — use only these:
     400  narrow-phone tweak (side-by-side CTAs)
     576  large phone   768  tablet   1024  desktop   1280  desktop nav / wide   1440  large desktop
   ================================================== */
:root {
    /* Brand (from the official logo) */
    --color-olive: #304020;
    --color-brown: #703820;
    --color-orange: #f09820;
    --color-orange-hover: #e08a12;
    --color-orange-text: #a65a08; /* small orange text on light bg (5.1:1); brand orange is 2.3:1 */
    --color-white: #ffffff;

    /* Neutrals */
    --color-ink: #1f2416;
    --color-text: #3d4234;
    --color-muted: #5c6154;
    --color-line: rgba(48, 64, 32, 0.12);
    --color-tint: #f8f6f1;   /* warm off-white for alternating sections */
    --color-sand: #c5a880;   /* index_3 accent line (inner-page hero) */
    --color-gold: #cda434;   /* index_3 eyebrow gold (inner-page hero) */
    --radius: 6px;

    /* Typography — self-hosted web fonts (section 0) with system fallbacks */
    --font-heading: "Cormorant Garamond", "Baskerville", "Palatino Linotype", "Palatino", "Book Antiqua", Georgia, serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Type scale — the single source of sizes for every page (mobile values here;
       tablet ≥768px and desktop ≥1280px overrides below). Benchmark: contact hero. */
    --fs-display: 2rem;          /* 32 → 40 → 52  homepage hero (strongest)      */
    --fs-page-hero: 1.9rem;      /* 30.4 → 36 → 44  inner-page heroes (contact.html benchmark) */
    --fs-section: 1.875rem;      /* 30 → 36 → 44  section h1/h2                  */
    --fs-h3: 1.625rem;           /* 26 → 28 → 30  feature / large card titles    */
    --fs-card: 1.3125rem;        /* 21 → 22 → 24  small card titles              */
    --fs-body-lg: 1.0625rem;     /* 17 → 18 → 18  intro / lead copy              */
    --fs-body: 1rem;             /* 16            body                           */
    --fs-small: 0.9375rem;       /* 15            card copy                      */
    --fs-label: 0.75rem;         /* 12            uppercase eyebrows / labels (minimum UI text) */
    --fs-meta: 0.8125rem;        /* 13            nav links, meta lines, legal row, form hints */
    --fs-button: 0.875rem;       /* 14            buttons, page-hero eyebrow, small captions */
    --lh-display: 1.12;
    --lh-heading: 1.15;
    --lh-body: 1.6;

    /* Layout */
    --container-max: 1600px;                 /* header + hero only */
    --gutter: clamp(1rem, 4vw, 3.5rem);      /* header + hero only */
    --header-h: 64px;

    /* Section content grid (About downward) — see .section-container.
       Gutter steps: mobile 20–24px · tablet 32–40px · laptop 7% · desktop 11% */
    --section-max: 1480px;
    --section-gutter: clamp(20px, 5.6vw, 24px);

    /* Motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --t-fast: 250ms var(--ease);
}

@media (min-width: 576px) {
    :root { --section-gutter: clamp(32px, 5vw, 40px); }
}

@media (min-width: 1024px) {
    :root { --section-gutter: 7vw; }
}

@media (min-width: 768px) {
    :root {
        --fs-display: 2.5rem;
        --fs-page-hero: 2.25rem;
        --fs-section: 2.25rem;
        --fs-h3: 1.75rem;
        --fs-card: 1.375rem;
        --fs-body-lg: 1.125rem;
    }
}

@media (min-width: 1280px) {
    :root { --header-h: 84px; }
}

@media (min-width: 1280px) {
    :root {
        --fs-display: 3.25rem;
        --fs-page-hero: 2.75rem;
        --fs-section: 2.75rem;
        --fs-h3: 1.875rem;
        --fs-card: 1.5rem;
    }
}

@media (min-width: 1440px) {
    :root { --section-gutter: 11vw; }
}

/* ==================================================
   2. BASE
   ================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html.is-nav-open {
    overflow: hidden;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    position: relative;
}

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

a {
    color: inherit;
}

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

h1,
h2,
h3,
p {
    margin: 0;
}

/* Anchored sections clear the fixed header */
[id] {
    scroll-margin-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

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

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

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 200;
    padding: 0.6rem 1rem;
    background: var(--color-white);
    color: var(--color-olive);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: none;
}

/* ==================================================
   3. UTILITIES / BUTTONS
   ================================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Shared content width for every section below the hero.
   All section content (text, collages, grids) aligns to this one grid. */
.section-container {
    width: min(var(--section-max), 100% - 2 * var(--section-gutter));
    margin-inline: auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: var(--fs-button);
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    /* Single line at natural width; a label wider than its container wraps
       (centred, balanced) instead of overflowing on very narrow phones. */
    flex-shrink: 0;
    max-width: 100%;
    text-align: center;
    text-wrap: balance;
    cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

/* Olive text on orange = 5.3:1 contrast (white on orange would fail WCAG) */
.btn--accent {
    background: var(--color-orange);
    color: var(--color-olive);
}

.btn--accent:hover {
    background: var(--color-orange-hover);
}

.btn--ghost {
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--color-white);
}

/* Outlined button for light backgrounds */
.btn--outline {
    border-color: rgba(48, 64, 32, 0.4);
    color: var(--color-olive);
}

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

.btn--ghost:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-olive);
}

/* ==================================================
   4. HEADER
   ================================================== */
.header-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 48px;
    pointer-events: none;
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-h);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.site-header.is-scrolled,
.site-header.is-nav-open {
    background: var(--color-white);
    border-bottom-color: var(--color-line);
    box-shadow: 0 6px 24px rgba(31, 36, 22, 0.06);
}

.site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* Brand / logo */
.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

/* Height drives size; width follows the 1809:500 ratio (no distortion) */
.brand__logo {
    width: auto;
    height: 40px;          /* mobile ≈ 145px wide */
}

@media (min-width: 768px) {
    .brand__logo { height: 46px; }   /* tablet ≈ 166px wide */
}

/* Logo states: white logo over the transparent hero header, coloured logo on the
   white header. Only active once the white <img class="brand__logo--light"> is
   present in the HTML (it must come before the coloured logo). */
.brand {
    position: relative;
}

.brand__logo--light {
    position: absolute;
    top: 0;
    left: 0;
}

.brand__logo--light,
.brand__logo--light + .brand__logo {
    transition: opacity var(--t-fast);
}

.site-header:not(.is-scrolled):not(.is-nav-open) .brand__logo--light + .brand__logo,
.is-scrolled .brand__logo--light,
.is-nav-open .brand__logo--light {
    opacity: 0;
}

@media (min-width: 1280px) {
    .brand__logo { height: 56px; }   /* desktop ≈ 203px wide, in the 84px header */
}

/* Light badge behind the coloured logo over the transparent hero header (same
   treatment as .site-footer__logo--badge); dropped on the white header. The
   padding is always present and offset by a negative margin, so the logo never
   moves and the header layout is identical in both states. */
.brand {
    padding: 6px 9px;
    margin-inline: -9px;
    border-radius: 4px;
    background-color: transparent;
    transition: background-color var(--t-fast);
}

.site-header:not(.is-scrolled):not(.is-nav-open) .brand {
    background-color: #f3efe4;
}

/* Burger */
.nav-toggle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 10px;
    background: none;
    border: 0;
    border-radius: 4px;
    color: var(--color-white);
    cursor: pointer;
    transition: color var(--t-fast);
}

.is-scrolled .nav-toggle,
.is-nav-open .nav-toggle {
    color: var(--color-olive);
}

.nav-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--t-fast), opacity var(--t-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==================================================
   5. MOBILE NAVIGATION PANEL (< 1280px)
   ================================================== */
.primary-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem var(--gutter) 2.5rem;
    background: var(--color-white);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s linear 250ms;
}

.primary-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s;
}

.primary-nav__list {
    display: flex;
    flex-direction: column;
}

.primary-nav__link {
    display: block;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-heading);
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--color-olive);
    text-decoration: none;
}

.primary-nav__link:hover {
    color: var(--color-brown);
}

.primary-nav__cta {
    align-self: stretch;
    min-height: 52px;
}

/* ==================================================
   6. DESKTOP NAVIGATION (>= 1280px — 7 links + CTA need ~1280px without squeezing)
   ================================================== */
@media (min-width: 1280px) {
    .nav-toggle {
        display: none;
    }

    .primary-nav,
    .primary-nav.is-open {
        position: static;
        height: auto;
        overflow: visible;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(1.5rem, 3vw, 3rem);
        padding: 0;
        background: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .primary-nav__list {
        flex-direction: row;
        align-items: center;
        gap: clamp(1.25rem, 2.2vw, 2.5rem);
    }

    .primary-nav__link {
        position: relative;
        padding: 0.5rem 0;
        border: 0;
        font-family: var(--font-body);
        font-size: var(--fs-meta);
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-white);
        transition: color var(--t-fast);
    }

    .primary-nav__link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.15rem;
        height: 1px;
        background: var(--color-orange);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--t-fast);
    }

    .primary-nav__link:hover {
        color: var(--color-white);
    }

    .primary-nav__link:hover::after,
    .primary-nav__link[aria-current="page"]::after {
        transform: scaleX(1);
    }

    .is-scrolled .primary-nav__link,
    .is-scrolled .primary-nav__link:hover {
        color: var(--color-olive);
    }

    .primary-nav__cta {
        align-self: auto;
        min-height: 44px;
        font-size: var(--fs-meta); /* 13px: header CTA only, gives the 7-link menu room at 1280px */
    }
}

/* ==================================================
   7. HERO
   ================================================== */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--header-h) + 2rem);
    padding-bottom: clamp(1.75rem, 5vh, 3.5rem);
    background: var(--color-ink); /* shown while the image loads */
    color: var(--color-white);
    overflow: hidden;
}

/* Background layers: main.js cross-fades two .hero__slide layers (1s, like index_5) */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero__slide.is-active {
    z-index: 1;
    opacity: 1;
}

/* The incoming layer fades in on top while the outgoing one stays fully opaque
   underneath until the fade has finished — the dark background never shows through */
.hero__slide:not(.is-active) {
    transition-delay: 1s;
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Per-image crops: main.js copies the ticker card's data-hero-key onto the layer.
   Phones see only ~⅓ of each landscape photo, so the subject is placed explicitly. */
.hero__slide[data-hero-key="safaris"] .hero__img {
    object-position: 25% 50%; /* impala's horns and head sit left of centre */
}

.hero__slide[data-hero-key="destinations"] .hero__img {
    object-position: 36% 50%; /* lead mother's face + calf */
}

.hero__slide[data-hero-key="story"] .hero__img {
    object-position: 46% 50%; /* leopard's head just left of centre */
}

/* Controlled overlay. Phones: copy fills most of the height, so the tint is
   more even. Tablet/desktop override it below so the sky stays bright. */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(20, 22, 14, 0.55) 0%,
        rgba(20, 22, 14, 0.42) 35%,
        rgba(20, 22, 14, 0.55) 65%,
        rgba(20, 22, 14, 0.85) 100%);
}

.hero__eyebrow,
.hero__title,
.hero__lead {
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
}

.hero__content {
    display: grid;
    gap: 2rem;
}

.hero__main,
.hero__aside {
    min-width: 0;
}

.hero__eyebrow {
    margin-bottom: 1rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.hero__title {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: var(--lh-display);
    letter-spacing: -0.01em;
    color: var(--color-white);
    text-wrap: balance;
}

.hero__title-line {
    display: block;
}

.hero__title em {
    font-style: italic;
    color: var(--color-orange);
}

.hero__lead {
    max-width: 34rem;
    margin-top: 1.1rem;
    font-size: var(--fs-body-lg);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
}

.hero__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* Features: 1 column on the smallest phones */
.hero__features {
    display: grid;
    gap: 0.9rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero-feature__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--color-orange);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-feature__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.hero-feature__text strong {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-white);
}

.hero-feature__text span {
    font-size: var(--fs-meta);
    color: rgba(255, 255, 255, 0.68);
}

/* Aside: pill + destination ticker */
.hero__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
}

.hero__pill {
    padding: 0.4rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(20, 22, 14, 0.35);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

/* Destination ticker — index_5 behaviour, rebuilt without dependencies.
   The whole track slides left; set 2 duplicates set 1, so translating by
   -50% - 7.5px (one set + one gap = 5 × 135px = 675px) loops seamlessly.
   675px / 25s = 27px/s, the original index_5 pace (810px / 30s). */
.hero-ticker {
    width: 100%;
    max-width: 660px; /* visible window must stay narrower than one set (675px − 15px gap) */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
}

.hero-ticker__track {
    display: flex;
    gap: 15px;
    width: max-content;
    animation: hero-ticker 25s linear infinite;
}

.hero-ticker__track:hover,
.hero-ticker__track:focus-within {
    animation-play-state: paused;
}

@keyframes hero-ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 7.5px)); }
}

.hero-ticker__card {
    flex-shrink: 0;
    width: 120px;
    height: 160px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hero-ticker__btn {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.hero-ticker__btn:focus-visible {
    outline-offset: -3px;
}

.hero-ticker__btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-ticker__card:hover img {
    transform: scale(1.1);
}

/* --- >= 400px: CTAs side by side, features 2 + 1 --- */
@media (min-width: 400px) {
    .hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hero__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.25rem;
    }

    .hero-feature:last-child {
        grid-column: 1 / -1;
    }
}

/* --- >= 768px: feature row with dividers --- */
@media (min-width: 768px) {
    .hero__overlay {
        background:
            linear-gradient(180deg, rgba(20, 22, 14, 0.45) 0%, rgba(20, 22, 14, 0) 22%),
            linear-gradient(0deg, rgba(20, 22, 14, 0.82) 0%, rgba(20, 22, 14, 0.45) 45%, rgba(20, 22, 14, 0.1) 75%);
    }

    .hero__features {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 0;
        border-top: 0;
        padding-top: 0;
        margin-top: 2.5rem;
    }

    .hero-feature {
        padding-right: 1.5rem;
        margin-right: 1.5rem;
        border-right: 1px solid rgba(255, 255, 255, 0.25);
    }

    .hero-feature:last-child {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
    }

    .hero__slide[data-hero-key="safaris"] .hero__img {
        object-position: 35% 50%;
    }

    .hero__slide[data-hero-key="destinations"] .hero__img {
        object-position: 50% 50%;
    }
}

/* --- >= 1280px: two-column composition (copy left, ticker right) --- */
@media (min-width: 1280px) {
    .hero {
        padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
    }

    .hero__overlay {
        background:
            linear-gradient(180deg, rgba(20, 22, 14, 0.45) 0%, rgba(20, 22, 14, 0) 20%),
            linear-gradient(90deg, rgba(20, 22, 14, 0.55) 0%, rgba(20, 22, 14, 0) 60%),
            linear-gradient(0deg, rgba(20, 22, 14, 0.78) 0%, rgba(20, 22, 14, 0.25) 45%, rgba(20, 22, 14, 0) 70%);
    }

    .hero__content {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: end;
        gap: 3rem;
    }

    .hero__aside {
        align-items: flex-end;
    }

    .hero__pill {
        margin-right: 1rem; /* index_5: pill sits 1rem in from the ticker's right edge */
    }

}

/* ==================================================
   8. SHARED SECTION COMPONENTS
   ================================================== */
.section {
    padding-block: clamp(4.5rem, 3rem + 6vw, 8rem);
    background: var(--color-white);
}

.section--tint {
    background: var(--color-tint);
}

/* Script-style eyebrow: italic serif with a short orange rule
   (no web font; swap for a self-hosted script face later if wanted) */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--color-brown);
}

.eyebrow::before {
    content: "";
    width: 2rem;
    height: 1px;
    background: var(--color-orange);
}

.section-heading {
    font-family: var(--font-heading);
    font-size: var(--fs-section);
    font-weight: 400;
    line-height: var(--lh-heading);
    letter-spacing: -0.01em;
    color: var(--color-olive);
    text-wrap: balance;
}

.section-heading__line {
    display: block;
}

.section-heading em {
    font-style: italic;
    color: var(--color-brown);
}

.section-intro {
    max-width: 40rem;
    margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
    text-align: center;
}

.section-intro .eyebrow::after {
    content: "";
    width: 2rem;
    height: 1px;
    background: var(--color-orange);
}

.section-intro__lead {
    max-width: 34rem;
    margin: 1.25rem auto 0;
    font-size: var(--fs-body-lg);
    color: var(--color-muted);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.5rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-olive);
    transition: color var(--t-fast);
}

.link-arrow__icon {
    font-size: var(--fs-body);
    letter-spacing: 0;
    color: var(--color-orange);
    transition: transform var(--t-fast);
}

.link-arrow:hover {
    color: var(--color-brown);
}

.link-arrow:hover .link-arrow__icon {
    transform: translateX(3px);
}

/* ==================================================
   9. ABOUT
   ================================================== */
.about__inner {
    display: grid;
    gap: clamp(3rem, 2rem + 4vw, 5rem);
}

.about__content,
.about__collage {
    min-width: 0;
}

.about__body {
    max-width: 36rem; /* comfortable reading width */
    margin-top: 1.5rem;
    color: var(--color-text);
}

.about__body p + p {
    margin-top: 1rem;
}

.about__features {
    display: grid;
    gap: 1.5rem;
    max-width: 36rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-line);
}

.feature-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.feature-row__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(240, 152, 32, 0.12);
}

.feature-row__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--color-orange);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-row__title {
    margin-bottom: 0.3rem;
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-olive);
}

.feature-row__text p {
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--color-muted);
}

/* Collage — phones: large image full width, two smaller images side by side */
.about__collage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.about__img {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-tint);
}

.about__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about__img--large {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
}

.about__img--top,
.about__img--bottom {
    aspect-ratio: 1 / 1;
}

/* >= 576px: editorial collage — tall image left, two stacked right */
@media (min-width: 576px) {
    .about__collage {
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        aspect-ratio: 6 / 5;
    }

    .about__img--large {
        grid-column: 1;
        grid-row: 1 / span 2;
        aspect-ratio: auto;
    }

    .about__img--top,
    .about__img--bottom {
        aspect-ratio: auto;
    }
}

/* >= 1024px: text left, collage right */
@media (min-width: 1024px) {
    .about__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: center;
    }

    .about__collage {
        aspect-ratio: 1 / 1.05;
    }
}

@media (min-width: 1440px) {
    .about__inner {
        gap: 7rem;
    }
}

/* ==================================================
   10. FEATURED SAFARI PACKAGES
   ================================================== */
.package-grid {
    display: grid;
    gap: 1.5rem;
}

.package-grid > li {
    display: flex;
    min-width: 0;
}

.package-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}

@media (hover: hover) {
    .package-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(31, 36, 22, 0.08);
    }

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

.package-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-tint);
}

.package-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-fast);
}

.package-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.package-card__duration {
    margin-bottom: 0.6rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.package-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-olive);
}

.package-card__text {
    margin-top: 0.75rem;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--color-muted);
}

/* Actions pinned to the bottom so all cards align */
.package-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--color-line);
}

.package-card__text {
    margin-bottom: 1.5rem;
}

.link-quick {
    display: inline-flex;
    align-items: center;
    padding-block: 0.5rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: rgba(166, 90, 8, 0.35);
    text-underline-offset: 4px;
    color: var(--color-orange-text);
    transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

.link-quick:hover {
    color: var(--color-brown);
    text-decoration-color: currentColor;
}

/* >= 768px: two columns, third card centred below */
@media (min-width: 768px) {
    .package-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .package-grid > li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 0.75rem);
    }
}

/* >= 1024px: three in a row */
@media (min-width: 1024px) {
    .package-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.5rem, 2vw, 2.25rem);
    }

    .package-grid > li:last-child:nth-child(odd) {
        grid-column: auto;
        width: auto;
    }

    /* Exactly two cards: same card width as the 3-up grid, centred (no empty third column) */
    .package-grid:has(> li:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: calc((100% - 2 * clamp(1.5rem, 2vw, 2.25rem)) * 2 / 3 + clamp(1.5rem, 2vw, 2.25rem));
        margin-inline: auto;
    }
}

/* ==================================================
   11. RESPONSIBLE TRAVEL BAND
   index_3 "Eco-Luxury" layout: photo + dark overlay, centred intro,
   three narrow centred columns. Padding comes from .section
   (≈72px mobile · ≈95–110px tablet · 128px desktop).
   ================================================== */
.impact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-ink); /* shown until the lazy image arrives */
    color: var(--color-white);
    text-align: center;
}

.impact__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.impact__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Warm dark overlay (not pure black) so detail still shows through */
.impact__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 22, 14, 0.78);
}

.impact__intro {
    margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.impact .eyebrow {
    color: var(--color-orange);
}

.impact .section-heading {
    color: var(--color-white);
}

.impact .section-heading em {
    color: var(--color-orange);
}

.impact__grid {
    display: grid;
    gap: 2.75rem;
    max-width: 62rem;
    margin-inline: auto;
}

.impact-item {
    max-width: 22rem;
    margin-inline: auto;
}

.impact-item__icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 1.1rem;
    fill: none;
    stroke: var(--color-orange);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.impact-item__title {
    margin-bottom: 0.65rem;
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-white);
}

.impact-item p {
    font-size: var(--fs-small);
    line-height: 1.65;
    color: rgba(245, 240, 230, 0.74); /* soft warm off-white */
}

/* >= 768px: three equal columns */
@media (min-width: 768px) {
    .impact__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(2rem, 4vw, 4.5rem);
    }

    .impact-item {
        max-width: none;
    }
}

/* ==================================================
   12. DESTINATIONS (STICKY INTRO)
   index_3 "gallery scroll": sticky intro column (0.88fr) beside a column
   of large cards (1.12fr) in normal flow; cards 2 and 4 align right.
   Below 1024px everything stacks, no sticky.
   ================================================== */
.destinations__shell {
    display: grid;
    gap: 2.5rem;
}

.destinations__intro,
.destinations__track {
    min-width: 0;
}

.destinations__lead {
    max-width: 30rem;
    margin-top: 1.5rem;
    font-size: var(--fs-body-lg);
    color: var(--color-text);
}

.destinations__copy {
    max-width: 26rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line);
    font-size: var(--fs-small);
    color: var(--color-muted);
}

.destinations__track {
    display: grid;
    gap: 24px;
}

.destination-card {
    width: min(100%, 760px);
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.destination-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-tint);
}

.destination-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* index_3: light shade on the image */
.destination-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 22, 14, 0.24), rgba(20, 22, 14, 0.04));
    pointer-events: none;
}

.destination-card__body {
    display: grid;
    gap: 0.6rem;
    padding: 1.4rem 1.25rem 1.5rem;
}

.destination-card__label {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.destination-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-olive);
}

.destination-card__link {
    justify-self: start;
    margin-top: 0.35rem;
}

.destination-card__text {
    max-width: 36rem;
    font-size: var(--fs-small);
    line-height: 1.85;
    color: var(--color-muted);
}

/* >= 1024px: two columns, sticky intro, staggered cards */
@media (min-width: 1024px) {
    .destinations__shell {
        grid-template-columns: minmax(260px, 0.88fr) minmax(0, 1.12fr);
        gap: clamp(2.4rem, 5vw, 5.5rem);
        align-items: start;
    }

    .destinations__intro {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--header-h) + 2rem); /* clears the fixed header */
    }

    .destinations__track {
        gap: 32px;
    }

    .destination-card:nth-child(2),
    .destination-card:nth-child(4) {
        justify-self: end;
    }

    /* index_3 media range (340–520px tall), as a fixed height so the image box
       always matches the card width (aspect-ratio + min-height would overflow it) */
    .destination-card__media {
        aspect-ratio: auto;
        height: clamp(340px, 30vw, 520px);
    }

    .destination-card__body {
        gap: 0.65rem;
        padding: 1.7rem 1.8rem 1.85rem;
    }
}

/* index_3 card reveal (slanted clip + rise), CSS-only via scroll-driven
   animation where supported; other browsers simply show the cards. */
@keyframes destination-reveal {
    from {
        clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
        transform: translateY(54px);
        opacity: 0;
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: none;
        opacity: 1;
    }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .destination-card {
            animation: destination-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 80%;
        }
    }
}

/* ==================================================
   13. TESTIMONIALS
   index_3 "Voices" layout: centred cards on the warm tint, small stars,
   italic serif quote, round avatar + name/meta. Grid mirrors the
   package grid (1 → 2 + 1 centred from 768px → 3 from 1024px).
   ================================================== */
.testimonial-grid {
    display: grid;
    gap: 1.5rem;
}

.testimonial-grid > li {
    display: flex;
    min-width: 0;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: clamp(2rem, 1.6rem + 1.5vw, 2.75rem) clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    text-align: center;
}

.testimonial-card__stars {
    display: inline-flex;
    gap: 3px;
}

.testimonial-card__stars svg {
    width: 14px;
    height: 14px;
    fill: var(--color-orange);
}

.testimonial-card__quote {
    margin: 1.25rem 0 0;
}

.testimonial-card__quote p {
    max-width: 30rem;
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    font-style: italic;
    line-height: 1.55;
    color: var(--color-olive);
}

/* Author pinned to the bottom so the three cards line up */
.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: auto;
    padding-top: 1.75rem;
    text-align: left;
}

.testimonial-card__avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(112, 56, 32, 0.25);
    border-radius: 50%;
    background: var(--color-tint);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-brown);
}

.testimonial-card__who {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.testimonial-card__name {
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-olive);
}

.testimonial-card__meta {
    font-size: var(--fs-meta);
    color: var(--color-muted);
}

/* >= 768px: two columns, third card centred below */
@media (min-width: 768px) {
    .testimonial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .testimonial-grid > li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 0.75rem);
    }
}

/* >= 1280px: three in a row (at 1024 three columns squeeze quotes to ~23 characters a line) */
@media (min-width: 1280px) {
    .testimonial-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.5rem, 2vw, 2.25rem);
    }

    .testimonial-grid > li:last-child:nth-child(odd) {
        grid-column: auto;
        width: auto;
    }
}

/* ==================================================
   14. KILIMANJARO (FULL-SCREEN GALLERY)
   index_3 "feature gallery" look on a single 100svh stage (no 500vh pin):
   crossfading backgrounds, cream centre card, count left, Skip right,
   Prev / progress / Next bottom. Desktop layout from 1280px; below that
   the image, card and controls stack. Behaviour: main.js §4.
   ================================================== */
.kili {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-areas: "intro" "media" "card" "progress";
    padding-bottom: 3.5rem;
    background: var(--color-ink);
    color: var(--color-white);
}

.kili__slides {
    grid-area: media;
    position: relative;
    aspect-ratio: 4 / 3;
    z-index: 0;
}

.kili__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.kili__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0s linear 0s;
}

.kili__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kili__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 22, 14, 0.15), rgba(20, 22, 14, 0.35));
}

/* Overlay wrapper only matters on desktop; below it its children join the grid */
.kili__overlay {
    display: contents;
}

.kili__intro {
    grid-area: intro;
    width: min(var(--section-max), 100% - 2 * var(--section-gutter));
    margin-inline: auto;
    padding-block: clamp(4.5rem, 3rem + 6vw, 6rem) 2.25rem;
}

.kili .eyebrow {
    color: var(--color-orange);
}

.kili__heading {
    font-family: var(--font-heading);
    font-size: var(--fs-section);
    font-weight: 400;
    line-height: 1.08;
    color: var(--color-white);
}

.kili__heading em {
    color: var(--color-orange);
}

.kili__lead {
    max-width: 26rem;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.82);
}

.kili__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.kili__count {
    margin-top: 1.75rem;
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.76);
}

.kili__count-sep {
    margin-inline: 0.35rem;
}

.kili__card {
    grid-area: card;
    position: relative;
    z-index: 1;
    justify-self: center;
    width: min(420px, 100% - 2 * var(--section-gutter));
    margin-top: -4rem;
    padding: 1.6rem 1.3rem 1.8rem;
    background: #f3efe4;
    color: var(--color-olive);
    text-align: center;
    box-shadow: 0 26px 72px rgba(0, 0, 0, 0.16);
}

.kili__kicker {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.kili__title {
    margin: 1rem 0 1.15rem;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1;
    color: var(--color-olive);
}

.kili__inset {
    aspect-ratio: 1.48;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(48, 64, 32, 0.08);
}

.kili__inset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kili__text {
    margin-top: 1rem;
    font-size: var(--fs-small);
    line-height: 1.72;
    color: var(--color-muted);
}

/* index_3 card content reveal on slide change */
.kili__card.is-revealing .kili__kicker,
.kili__card.is-revealing .kili__title,
.kili__card.is-revealing .kili__text {
    animation: kili-mask-reveal 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.kili__card.is-revealing .kili__title { animation-delay: 60ms; }
.kili__card.is-revealing .kili__text { animation-delay: 220ms; }

.kili__card.is-revealing .kili__inset {
    animation: kili-media-reveal 0.82s cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.kili__card.is-revealing .kili__inset img {
    animation: kili-image-reveal 1.2s cubic-bezier(0.2, 0.7, 0, 1) 160ms both;
}

@keyframes kili-mask-reveal {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes kili-media-reveal {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes kili-image-reveal {
    from { transform: scale(1.08); }
    to { transform: none; }
}

.kili__aside {
    display: none;
}

.kili__skip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--t-fast);
}

.kili__skip svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.kili__skip:hover {
    color: var(--color-white);
}

.kili__progress {
    grid-area: progress;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(560px, 100% - 2 * var(--section-gutter));
    margin: 1.5rem auto 0;
}

.kili__progress[hidden] {
    display: none;
}

.kili__nav {
    min-width: 44px;
    min-height: 44px;
    padding: 0.25rem 0;
    background: none;
    border: 0;
    font: 600 0.75rem/1 var(--font-body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: color var(--t-fast);
}

.kili__nav:hover {
    color: var(--color-white);
}

.kili__track {
    position: relative;
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.26);
}

.kili__fill {
    position: absolute;
    inset: 0;
    background: var(--color-orange);
    transform: scaleX(0.25);
    transform-origin: left center;
    transition: transform 0.6s var(--ease);
}

@media (min-width: 768px) {
    .kili__slides {
        aspect-ratio: 16 / 9;
    }

    .kili__card {
        margin-top: -6rem;
        padding: 30px 28px 36px;
    }
}

/* >= 1280px: the full-screen index_3 stage */
@media (min-width: 1280px) {
    .kili {
        display: block;
        height: 100vh;
        height: 100svh;
        min-height: 680px;
        padding-bottom: 0;
    }

    .kili__slides {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        z-index: -1;
    }

    .kili__slide::after {
        background:
            linear-gradient(90deg, rgba(20, 22, 14, 0.62) 0%, rgba(20, 22, 14, 0.2) 42%, rgba(20, 22, 14, 0.42) 100%),
            linear-gradient(180deg, rgba(20, 22, 14, 0.18), rgba(20, 22, 14, 0.24));
    }

    .kili__overlay {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 392px) minmax(0, 1fr);
        align-items: center;
        gap: 30px;
        width: min(var(--section-max), 100% - 2 * var(--section-gutter));
        height: 100%;
        margin-inline: auto;
        padding: var(--header-h) 0 72px;
    }

    /* Explicit positions (the stacked layout's named areas don't exist in this grid) */
    .kili__intro {
        grid-area: 1 / 1;
        width: auto;
        margin: 0;
        padding: 0;
        justify-self: start;
    }

    .kili__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .kili__card {
        grid-area: 1 / 2;
        width: min(100%, 392px);
        margin: 0;
    }

    .kili__aside {
        display: block;
        grid-area: 1 / 3;
        justify-self: end;
    }

    .kili__progress {
        position: absolute;
        left: 50%;
        bottom: 20px;
        width: min(560px, 100% - 80px);
        margin: 0;
        transform: translateX(-50%);
    }
}

/* ==================================================
   15. EXPERIENCES (IMAGE GRID)
   One large feature tile + five supporting tiles. 1 column → 2 columns
   (feature and last tile full width) → 3-column grid with a 2×2 feature.
   ================================================== */
.experiences__head {
    display: grid;
    gap: 1.25rem;
    margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.experiences__lead {
    max-width: 30rem;
    color: var(--color-muted);
}

.exp-grid {
    display: grid;
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

.exp-tile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--color-tint);
}

.exp-tile img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.exp-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(20, 22, 14, 0.8) 0%, rgba(20, 22, 14, 0.25) 50%, rgba(20, 22, 14, 0) 72%);
}

.exp-tile__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem 1.4rem 1.35rem;
    color: var(--color-white);
}

.exp-tile__num {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--color-orange);
}

.exp-tile__title {
    margin-top: 0.35rem;
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-white);
}

.exp-tile--feature .exp-tile__title {
    font-size: var(--fs-h3);
}

.exp-tile__text {
    margin-top: 0.3rem;
    font-size: var(--fs-button);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

@media (hover: hover) {
    .exp-tile:hover img {
        transform: scale(1.03);
    }
}

@media (min-width: 768px) {
    .exp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exp-tile--feature,
    .exp-tile:last-child {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 8;
    }
}

@media (min-width: 1024px) {
    .experiences__head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        gap: 3rem;
    }

    .experiences__lead {
        justify-self: end;
    }
}

@media (min-width: 1280px) {
    .exp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: clamp(220px, 18vw, 300px);
    }

    .exp-tile,
    .exp-tile:last-child {
        grid-column: auto;
        aspect-ratio: auto;
    }

    .exp-tile--feature {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
        aspect-ratio: auto;
    }

    .exp-tile--feature .exp-tile__body {
        padding: 2rem 2.25rem 2.1rem;
    }
}

/* ==================================================
   16. CONTACT / PLAN YOUR JOURNEY + FORM
   Ombara register split (image story left, form right) inside the section grid.
   ================================================== */
.contact__shell {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.contact__panel {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 26rem;
    padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
    color: var(--color-white);
}

.contact__panel-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(20, 22, 14, 0.9) 0%, rgba(20, 22, 14, 0.66) 55%, rgba(20, 22, 14, 0.4) 100%);
}

.contact__panel .eyebrow {
    color: var(--color-orange);
}

.contact__panel .section-heading {
    color: var(--color-white);
}

.contact__panel .section-heading em {
    color: var(--color-orange);
}

.contact__lead {
    max-width: 30rem;
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, 0.84);
}

.contact__methods {
    margin-top: 2rem;
}

.contact__methods li {
    display: grid;
    gap: 0.15rem;
    padding-block: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.contact__method-label {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.contact__methods a {
    font-size: var(--fs-body);
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--t-fast);
}

.contact__methods a:hover {
    color: var(--color-orange);
}

.contact__form-wrap {
    padding: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.25rem, 1rem + 3vw, 3.5rem);
    background: var(--color-white);
}

.contact-form__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    color: var(--color-olive);
}

.contact-form__hint {
    margin-top: 0.4rem;
    font-size: var(--fs-meta);
    color: var(--color-muted);
}

.contact-form__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__grid {
    display: grid;
    gap: 1.1rem 1.25rem;
    margin-top: 1.75rem;
}

.field label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-olive);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(48, 64, 32, 0.24);
    border-radius: 4px;
    background: var(--color-white);
    font: 400 1rem/1.4 var(--font-body); /* 16px avoids iOS zoom on focus */
    color: var(--color-ink);
    transition: border-color var(--t-fast);
}

.field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23304020' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 14px;
}

.field textarea {
    min-height: 140px;
    resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: rgba(48, 64, 32, 0.45);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--color-orange);
}

.field input:user-invalid,
.field textarea:user-invalid {
    border-color: #a3261e;
}

.contact-form__submit {
    width: 100%;
    min-height: 52px;
    margin-top: 1.75rem;
}

.contact-form__submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.contact-form__status {
    min-height: 1.5em;
    margin-top: 1rem;
    font-size: var(--fs-small);
}

.contact-form__status.is-success {
    color: var(--color-olive);
    font-weight: 600;
}

.contact-form__status.is-error {
    color: #a3261e;
}

@media (min-width: 576px) {
    .contact-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field--full {
        grid-column: 1 / -1;
    }

    .contact-form__submit {
        width: auto;
    }
}

@media (min-width: 1024px) {
    .contact__shell {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .contact__panel {
        min-height: 100%;
    }
}

/* ==================================================
   17. CLOSING CTA BAND + FOOTER
   Image-backed earth-brown CTA band (lioness photo under a brown / olive
   tint, desktop parallax in main.js §7) → deep olive footer
   (4 / 2 / 1 columns), one subtle savannah horizon silhouette at the very bottom.
   ================================================== */
.cta-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
    background: #3e2717; /* shown until the image arrives */
    color: var(--color-white);
}

/* Decorative photo layer: lioness on the right, open grass on the left (copy zone) */
.cta-band__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.cta-band__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 63% 50%; /* phones: her face right of the heading, whole body in frame */
}

/* Brand tint: earth brown over the copy, easing slightly towards the lioness,
   settling into the footer's deep olive at the bottom edge */
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(38, 50, 25, 0) 55%, rgba(38, 50, 25, 0.55) 100%),
        linear-gradient(90deg, rgba(46, 30, 17, 0.88) 0%, rgba(46, 30, 17, 0.8) 45%, rgba(46, 30, 17, 0.58) 100%);
}

.cta-band__inner {
    display: grid;
    gap: 2rem;
    align-items: end;
}

.cta-band .eyebrow {
    color: var(--color-orange);
}

.cta-band__heading {
    font-family: var(--font-heading);
    font-size: var(--fs-section);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-white);
}

.cta-band__heading em {
    color: var(--color-orange);
}

.cta-band__text {
    max-width: 32rem;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.cta-band__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 400px) {
    .cta-band__media img {
        object-position: 58% 50%;
    }

    .cta-band__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (min-width: 768px) {
    .cta-band {
        min-height: 380px;
    }

    .cta-band__media img {
        object-position: 66% 45%;
    }
}

@media (min-width: 1024px) {
    .cta-band {
        min-height: 460px;
    }

    /* 56px taller than the band at each edge: room for the ±45px parallax travel */
    .cta-band__media {
        inset: -56px 0;
    }

    /* Wide screens show only a horizontal slice: keep her head and ears in it,
       even at the top of the parallax travel */
    .cta-band__media img {
        object-position: 66% 30%;
    }
}

/* Only where main.js §7 actually animates the layer */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .cta-band__media img {
        will-change: transform;
    }
}

/* Copy left / actions right from 1280 (at 1024 the narrower container would
   put the copy over her face and the buttons over her back) */
@media (min-width: 1280px) {
    /* 12% wider on the left so the lioness sits clear of the stacked buttons */
    .cta-band__media {
        inset: -56px 0 -56px -12%;
    }

    .cta-band__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3rem;
    }

    /* Stacked buttons stay right of the lioness (~56–74% across after the shift above) */
    .cta-band__actions {
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

/* Footer */
.site-footer {
    --footer-text: rgba(243, 239, 228, 0.78);
    --footer-link: rgba(243, 239, 228, 0.9);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(4rem, 3rem + 3vw, 5.5rem) 0 calc(1.75rem + 72px); /* room for the WhatsApp button */
    background: #263219;
    color: var(--footer-text);
}

.site-footer__grid {
    display: grid;
    gap: 2.75rem 2.5rem;
}

.site-footer__logo {
    display: inline-block;
}

.site-footer__logo img {
    width: auto;
    height: 46px;
}

/* Small light badge so the coloured logo reads on olive (until a white logo exists) */
.site-footer__logo--badge {
    padding: 7px 10px;
    border-radius: 4px;
    background: #f3efe4;
}

.site-footer__logo--badge img {
    height: 40px;
}

.site-footer__tagline {
    margin-top: 1.25rem;
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-style: italic;
    color: var(--color-orange);
}

.site-footer__text {
    max-width: 23rem;
    margin-top: 0.6rem;
    font-size: var(--fs-small);
    line-height: 1.75;
}

.site-footer__label {
    margin-bottom: 1.25rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #d9bd92; /* warm sand */
}

.site-footer__col li + li {
    margin-top: 0.7rem;
}

.site-footer a {
    color: var(--footer-link);
    text-decoration: none;
    transition: color var(--t-fast);
}

.site-footer a:hover {
    color: var(--color-orange);
}

.site-footer__col a {
    display: inline-block;
    padding-block: 0.15rem;
    font-size: var(--fs-small);
}

.site-footer__location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-small);
}

.site-footer__location svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--color-orange);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Social row under the location line. 40px tap targets; the negative inline
   margin lines the first icon up with the text above it. */
.site-footer__social {
    display: flex;
    margin: 0.3rem 0 0 -11px;
}

.site-footer__social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #f09821;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
    color: #f5bc6f; /* lighter tint of the same Asili orange */
}

.site-footer__social svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Solid marks (TripAdvisor) are filled rather than outlined */
.site-footer__social .site-footer__social-mark {
    fill: currentColor;
    stroke: none;
}

/* Bókun wordmark: supplied PNG, shown as is. Side padding matches the visual
   gap of the 18px icons in their 40px targets. */
.site-footer__social .site-footer__social-wordmark {
    width: auto;
    padding-inline: 11px;
}

.site-footer__social-wordmark img {
    width: auto;
    height: 24px;
    transition: filter var(--t-fast);
}

.site-footer__social-wordmark:hover img,
.site-footer__social-wordmark:focus-visible img {
    filter: brightness(1.15);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 2rem;
    margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem);
    padding-top: 1.4rem;
    border-top: 1px solid rgba(243, 239, 228, 0.12);
    font-size: var(--fs-meta);
    color: rgba(243, 239, 228, 0.62);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
}

/* Savannah horizon: very faint, behind everything */
.site-footer__horizon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 110px;
    fill: rgba(243, 239, 228, 0.045);
    pointer-events: none;
}

@media (min-width: 576px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
        gap: 2.5rem;
    }
}

/* From 1280px the WhatsApp button sits clear of the container edge */
@media (min-width: 1280px) {
    .site-footer {
        padding-bottom: 1.9rem;
    }
}

/* ==================================================
   18. FLOATING WHATSAPP
   ================================================== */
.wa-float {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 90;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1e9e4f; /* deeper WhatsApp green: white icon ≥ 3:1 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    transition: background-color var(--t-fast), transform var(--t-fast);
}

.wa-float svg {
    width: 28px;
    height: 28px;
    fill: var(--color-white);
}

.wa-float:hover {
    background: #168a43;
}

@media (hover: hover) {
    .wa-float:hover {
        transform: translateY(-2px);
    }
}

html.is-nav-open .wa-float {
    visibility: hidden;
}

/* ==================================================
   19. INNER PAGES: PAGE HERO
   Strict recreation of Ombara index_3's hero (values taken from its CSS):
   .hero-wrapper-v3      height: 100vh
   img                   object-fit: cover (centre), .brightness-70 → filter: brightness(0.7)
   .bg-gradient-v3       lower 50%: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 50%, transparent 100%)
   content box           .p-5 .pb-5 .mb-4 → 48px sides, 72px above the bottom; flex, space-between, align end
   .border-left-gold     3px solid #c5a880 + padding-left 2rem; .max-w-800
   eyebrow               .small .fw-bold .letter-spacing-3 uppercase, .text-gold #cda434, mb 1rem
   h1                    .display-5 .fw-light (Cormorant Garamond 300, lh 1.2), .text-shadow-strong, mb 1rem
   p                     .fs-5 (1.25rem), Ombara p (300, lh 1.6), .opacity-75, .text-shadow-light
   CTA                   .register-submit-btn (pill, 46px, .78rem 1.5rem, 1rem/600, .015em)
   Asili-specific: text, orange italic "Adventure.", CTA colour (Asili orange instead of #f2c94c).
   Below 768px the CTA stacks under the copy (index_3 overflows the screen there).
   ================================================== */
.page-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 100vh;
    min-height: 100svh; /* phones: never clip, grow if needed */
    overflow: hidden;
    background: #000;
    color: var(--color-white);
}

.page-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* <picture> wrapper (responsive sources) must fill the media box too */
.page-hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.page-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    filter: brightness(0.7);
}

/* Contact hero: the giraffe group sits right of centre — keep both adults in frame on narrow screens */
.page-hero--contact .page-hero__media img {
    object-position: 57% 50%;
}

/* Destinations hero: phones see only the middle third of the 3:2 elephant photo —
   centre the lead mother's face and the calf instead of the gap between faces */
.page-hero--destinations .page-hero__media img {
    object-position: 36% 50%;
}

@media (min-width: 768px) {
    .page-hero--destinations .page-hero__media img {
        object-position: 50% 50%;
    }
}

/* Safaris hero: the impala's horns and head sit left of centre — on narrow
   screens a centred crop shows only its back (no effect once width-scaled, ≥1280) */
.page-hero--safaris .page-hero__media img,
.page-hero--safari-zanzibar .page-hero__media img,
.page-hero--mikumi .page-hero__media img {
    object-position: 25% 50%;
}

@media (min-width: 768px) {
    .page-hero--safaris .page-hero__media img,
    .page-hero--safari-zanzibar .page-hero__media img,
    .page-hero--mikumi .page-hero__media img {
        object-position: 35% 50%;
    }
}

/* Detail-page heroes reuse the final photography: one rule per photo, so every page
   showing the same image gets the same crop */
.page-hero--wildlife .page-hero__media img,
.page-hero--tarangire .page-hero__media img,
.page-hero--nyerere-mikumi .page-hero__media img {
    object-position: 36% 50%; /* elephants: lead mother + calf on phones */
}

.page-hero--photography .page-hero__media img,
.page-hero--serengeti .page-hero__media img,
.page-hero--northern-safari .page-hero__media img {
    object-position: 57% 50%; /* giraffe group sits right of centre */
}

/* Portrait source (1600×2000): phones see the baobab; wider screens show a band
   across the canopy and trunk rather than the vehicle bonnet below it */
.page-hero--culture .page-hero__media img {
    object-position: 45% 50%;
}

@media (min-aspect-ratio: 4/5) {
    .page-hero--culture .page-hero__media img {
        object-position: 50% 25%;
    }
}

@media (min-width: 768px) {
    .page-hero--wildlife .page-hero__media img,
    .page-hero--tarangire .page-hero__media img,
    .page-hero--nyerere-mikumi .page-hero__media img {
        object-position: 50% 50%;
    }
}

/* Typographic hero: for a destination still awaiting dedicated photography (no stand-in
   image that would misrepresent the place). Brand deep olive + a warm low glow. */
.page-hero--text {
    min-height: 78vh;
    min-height: 78svh;
    background:
        radial-gradient(ellipse 70% 55% at 85% 100%, rgba(240, 152, 32, 0.2), transparent 70%),
        radial-gradient(ellipse 60% 70% at 0% 0%, rgba(197, 168, 128, 0.12), transparent 60%),
        #263219;
}

.page-hero__shade {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    pointer-events: none;
}

.page-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding: calc(var(--header-h) + 1.5rem) 1.5rem 4.5rem; /* 72px above the bottom, as index_3 */
}

.page-hero__copy {
    max-width: 800px;
    padding-left: 2rem;
    border-left: 3px solid var(--color-sand);
}

.page-hero__eyebrow {
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: var(--fs-button);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold);
}

.page-hero__title {
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    font-size: var(--fs-page-hero); /* 30.4 / 36 / 44px — approved inner-page hero scale */
    font-weight: 300;
    line-height: 1.15;
    color: var(--color-white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.page-hero__title em {
    font-style: italic;
    color: var(--color-orange);
}

.page-hero__lead {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg); /* 17px on phones */
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-white);
    opacity: 0.75;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* index_3 .register-submit-btn (shape + type); Asili orange instead of #f2c94c */
.page-hero__cta {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 46px;
    margin-top: 1.15rem;
    padding: 0.78rem 1.5rem;
    border: none;
    border-radius: 999px;
    background: var(--color-orange);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.015em;
    color: var(--color-olive);
    text-decoration: none;
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.page-hero__cta:hover {
    background: #f4ad4a;
    transform: translateY(-1px);
}

@media (min-width: 576px) {
    .page-hero__content {
        padding-inline: 3rem; /* index_3 .p-5 */
    }
}

/* >= 768px: index_3 content box — absolute at the bottom, 72px up, copy left / CTA right */
@media (min-width: 768px) {
    .page-hero {
        height: 100vh; /* index_3 .hero-wrapper-v3 */
        min-height: 0;
    }

    .page-hero__lead {
        font-size: var(--fs-body-lg); /* 18px tablet + desktop */
    }

    .page-hero__content {
        position: absolute;
        left: 0;
        bottom: 0;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 1.5rem; /* .mb-4 */
        padding: 3rem;         /* .p-5 + .pb-5 */
    }
}

/* Contact panel: plain-text value (e.g. Location) styled like the linked values */
.contact__method-value {
    font-size: var(--fs-body);
    color: var(--color-white);
}

/* ==================================================
   20. INNER PAGES: MAP BAND
   Full-bleed lazy map with a small label card aligned to the section grid.
   Google's embed uses cooperative gestures, so it doesn't trap page scrolling.
   ================================================== */
.map-band {
    position: relative;
    height: clamp(320px, 230px + 20vw, 520px);
    overflow: hidden;
    background: var(--color-tint);
}

.map-band__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.35) sepia(0.12);
}

.map-band__inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
    pointer-events: none;
}

.map-band__card {
    padding: 1.1rem 1.4rem 0.9rem;
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: 0 10px 30px rgba(31, 36, 22, 0.14);
    pointer-events: auto;
}

.map-band__eyebrow {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.map-band__title {
    margin-top: 0.2rem;
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    font-weight: 400;
    color: var(--color-olive);
}

/* ==================================================
   20b. ABOUT PAGE COMPONENTS (reusable on future inner pages)
   - .why       editorial 4-up grid: hairline top rules, large Cormorant numerals
   - .local     asymmetric image/text editorial with an inset detail image
   - .impact__lead  light intro copy for the dark .impact band
   ================================================== */
.impact .impact__lead {
    color: rgba(245, 240, 230, 0.78);
}

/* Why travel with us */
.why__head {
    display: grid;
    gap: 1.25rem;
    margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.why__lead {
    max-width: 30rem;
    font-size: var(--fs-body-lg);
    color: var(--color-muted);
}

.why__grid {
    display: grid;
    gap: 2.5rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.why-item {
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line);
}

.why-item__num {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-section);
    font-weight: 300;
    line-height: 1;
    color: var(--color-sand);
}

.why-item__title {
    margin-top: 1rem;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-olive);
}

.why-item__text {
    margin-top: 0.75rem;
    max-width: 30rem;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--color-muted);
}

@media (min-width: 768px) {
    .why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem 3rem;
    }
}

@media (min-width: 1024px) {
    .why__head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        gap: 3rem;
    }

    .why__lead {
        justify-self: end;
    }
}

@media (min-width: 1280px) {
    .why__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2.5rem;
    }
}

/* Our home — asymmetric editorial */
.local__inner {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.local__media {
    position: relative;
    min-width: 0;
    margin-bottom: 2.5rem; /* room for the inset image on small screens */
}

.local__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--color-line);
}

.local__detail {
    position: absolute;
    right: 1rem;
    bottom: -2.5rem;
    width: 46%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 6px solid var(--color-tint);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(31, 36, 22, 0.14);
    background: var(--color-line);
}

.local__content {
    min-width: 0;
}

.local__body {
    max-width: 34rem;
    margin-top: 1.5rem;
}

.local__body p + p {
    margin-top: 1rem;
}

.local__lead {
    font-size: var(--fs-body-lg);
    color: var(--color-text);
}

.local__body p:not(.local__lead) {
    color: var(--color-muted);
}

.local__link {
    margin-top: 2rem;
}

@media (min-width: 576px) {
    .local__img {
        aspect-ratio: 16 / 11;
    }
}

@media (min-width: 1024px) {
    .local__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: clamp(4rem, 2rem + 4vw, 7rem);
    }

    .local__media {
        margin-bottom: 0;
    }

    .local__img {
        aspect-ratio: 4 / 5;
    }

    .local__detail {
        right: -3rem;
        bottom: 3rem;
        width: 42%;
    }
}

/* Meet the team — two editorial portrait cards (stacked below 1024px) */
.team__grid {
    display: grid;
    gap: 3rem;
    max-width: 26rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.team-card {
    min-width: 0;
}

.team-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--color-line);
}

.team-card__name {
    margin-top: 1.5rem;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-olive);
}

.team-card__role {
    margin-top: 0.5rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--color-muted);
}

@media (min-width: 1024px) {
    .team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(3rem, 1rem + 4vw, 6rem);
        max-width: 64rem;
    }
}

/* Partner with us — compact editorial row (heading left, copy + button right) */
.partner {
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.partner__inner {
    display: grid;
    gap: 1.5rem;
}

.partner__body {
    max-width: 34rem;
    font-size: var(--fs-body-lg);
    color: var(--color-muted);
}

.partner__btn {
    margin-top: 1.75rem;
}

@media (min-width: 1024px) {
    .partner__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        gap: 3rem;
    }

    .partner__body {
        justify-self: end;
    }
}

/* ==================================================
   20c. INNER-PAGE COMPONENTS (safaris / destinations / kilimanjaro / experiences)
   - .split-list / .split   alternating image + text rows (index_3 editorial split);
                            .split--card = bordered white card variant
   - .why__grid--3          three-column variant of the numbered editorial grid
   - .why-rows / .link-cols  numbered divider rows beside a heading; two labelled columns of .link-rows
   - .photo-band            full-width photographic band with left-aligned copy
   - .exp-list              two-column staggered image grid
   - .notice-panel          honest "coming soon" content panel
   ================================================== */
.section-intro--left {
    margin-inline: 0;
    text-align: left;
}

.section-intro--left .eyebrow::after {
    display: none;
}

/* Split rows */
.split-list {
    display: grid;
    gap: clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

.split {
    display: grid;
    gap: 1.75rem;
    align-items: center;
    min-width: 0;
}

.split__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--color-tint);
}

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

.split__body {
    min-width: 0;
}

.split__num {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
    font-size: var(--fs-section);
    font-weight: 300;
    line-height: 1;
    color: var(--color-sand);
}

.split__label {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.split__title {
    margin-top: 0.5rem;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-olive);
}

.split__text {
    max-width: 32rem;
    margin-top: 0.9rem;
    color: var(--color-muted);
}

.split__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.75rem;
    margin-top: 1.5rem;
}

@media (hover: hover) {
    .split:hover .split__media img {
        transform: scale(1.02);
    }
}

@media (min-width: 1024px) {
    .split {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: clamp(3rem, 1rem + 4vw, 6rem);
    }

    .split:nth-child(even) .split__media {
        order: 2;
    }

    .split:nth-child(even) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    }
}

/* Card variant (featured safaris) */
.split--card {
    gap: 0;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.split--card .split__media {
    aspect-ratio: 16 / 11;
    border-radius: 0;
}

.split--card .split__body {
    padding: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
}

@media (min-width: 1024px) {
    .split--card,
    .split--card:nth-child(even) {
        gap: 0;
    }

    .split--card .split__media {
        height: 100%;
        aspect-ratio: auto;
        min-height: 360px;
    }
}

/* Numbered grid — 3 columns */
@media (min-width: 1280px) {
    .why__grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3rem;
    }
}

/* Numbered divider rows — single-sentence points (destination "Why Visit") */
.why-rows {
    display: grid;
    gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.why-rows__head {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.why-rows__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--color-line);
}

.why-row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
    padding-block: 1.25rem;
    border-top: 1px solid var(--color-line);
}

.why-row__num {
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    font-weight: 300;
    line-height: 1;
    color: var(--color-sand);
}

.why-row__text {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-olive);
}

@media (min-width: 768px) {
    .why-row {
        grid-template-columns: 4rem minmax(0, 1fr);
        padding-block: 1.6rem;
    }
}

/* Optional supporting line under a row title (Tailor-Made "Journey Styles") */
.why-row__meta {
    margin-top: 0.4rem;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--color-muted);
}

@media (min-width: 1024px) {
    .why-rows {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 4rem;
        align-items: start;
    }
}

/* Two labelled columns of .link-rows (Tailor-Made "What Can Your Journey Include?") */
.link-cols {
    display: grid;
    gap: 2.5rem;
}

.link-cols__title {
    margin-bottom: 1rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

@media (min-width: 1024px) {
    .link-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4rem;
        align-items: start;
    }
}

/* Photo band */
.photo-band {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 60vh, 640px);
    padding-block: clamp(4.5rem, 3rem + 6vw, 7rem);
    overflow: hidden;
    background: var(--color-ink);
    color: var(--color-white);
}

.photo-band__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.photo-band__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-band__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 22, 14, 0.82) 0%, rgba(20, 22, 14, 0.55) 55%, rgba(20, 22, 14, 0.25) 100%);
}

.photo-band .section-container {
    position: relative;
}

.photo-band__copy {
    max-width: 36rem;
}

.photo-band .eyebrow {
    color: var(--color-orange);
}

.photo-band .section-heading {
    color: var(--color-white);
}

.photo-band .section-heading em {
    color: var(--color-orange);
}

.photo-band__text {
    margin-top: 1.25rem;
    font-size: var(--fs-body-lg);
    color: rgba(255, 255, 255, 0.84);
}

.photo-band__actions {
    margin-top: 2rem;
}

/* Staggered experience grid */
.exp-list {
    display: grid;
    gap: 3.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exp-item__media {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--color-tint);
}

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

.exp-item__head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-top: 1.5rem;
}

.exp-item__num {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 300;
    line-height: 1;
    color: var(--color-sand);
}

.exp-item__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-olive);
}

.exp-item__text {
    max-width: 32rem;
    margin-top: 0.75rem;
    color: var(--color-muted);
}

.exp-item .link-arrow {
    margin-top: 1rem;
}

@media (hover: hover) {
    .exp-item:hover .exp-item__media img {
        transform: scale(1.02);
    }
}

@media (min-width: 768px) {
    .exp-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4rem clamp(2rem, 4vw, 4.5rem);
    }

    .exp-item:nth-child(even) {
        margin-top: clamp(3rem, 8vw, 7rem); /* editorial stagger */
    }
}

/* Notice panel */
.notice-panel {
    max-width: 46rem;
    margin-inline: auto;
    padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    border: 1px dashed var(--color-sand);
    border-radius: var(--radius);
    background: var(--color-white);
    text-align: center;
}

.notice-panel__text {
    max-width: 34rem;
    margin: 0 auto;
    color: var(--color-muted);
}

.notice-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* ==================================================
   20d. DETAIL-PAGE COMPONENTS (master templates for package / destination /
   Kilimanjaro / experience detail pages)
   ================================================== */
/* Subtle breadcrumb at the top of the first content section */
.breadcrumb {
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 0.4rem;
    color: var(--color-sand);
}

.breadcrumb a {
    color: var(--color-olive);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--color-brown);
}

/* Facts strip (verified facts only) */
.facts {
    display: grid;
    margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.facts__item {
    padding: 1.25rem 0;
}

.facts__item + .facts__item {
    border-top: 1px solid var(--color-line);
}

.facts dt {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.facts dd {
    margin: 0.35rem 0 0;
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    color: var(--color-olive);
}

.facts dd a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-sand);
    text-underline-offset: 0.2em;
}

.facts dd a:hover,
.facts dd a:focus-visible {
    color: var(--color-orange-text);
}

.facts dd.is-pending {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-style: italic;
    color: var(--color-muted);
}

@media (min-width: 768px) {
    .facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .facts__item {
        padding: 1.5rem 1.5rem 1.5rem 0;
    }

    .facts__item + .facts__item {
        padding-left: 1.5rem;
        border-top: 0;
        border-left: 1px solid var(--color-line);
    }

    /* Four facts (safari journeys): 2 × 2 on tablets, one row from 1024px */
    .facts--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .facts--4 .facts__item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .facts--4 .facts__item:nth-child(n + 3) {
        border-top: 1px solid var(--color-line);
    }
}

@media (min-width: 1024px) {
    .facts--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .facts--4 .facts__item:nth-child(3) {
        padding-left: 1.5rem;
        border-left: 1px solid var(--color-line);
    }

    .facts--4 .facts__item:nth-child(n + 3) {
        border-top: 0;
    }
}

/* Pending-content tag */
.pending-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px dashed var(--color-sand);
    border-radius: 999px;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

/* Itinerary timeline */
.timeline {
    position: relative;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 7px;
    width: 1px;
    background: var(--color-line);
}

.timeline__day {
    position: relative;
    display: grid;
    gap: 0.4rem;
    padding: 0 0 2.25rem 2.25rem;
}

/* Closing note under a journey timeline (e.g. "routing confirmed during planning") */
.timeline__note {
    max-width: 56rem;
    margin: 0.5rem auto 0;
    padding-left: 2.25rem;
    font-size: var(--fs-small);
    font-style: italic;
    color: var(--color-muted);
}

.timeline__day::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid var(--color-sand);
    border-radius: 50%;
    background: var(--color-white);
}

.timeline__label {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.timeline__title {
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-olive);
}

.timeline__text {
    max-width: 38rem;
    color: var(--color-muted);
}

@media (min-width: 768px) {
    .timeline::before {
        left: 9.5rem;
    }

    .timeline__day {
        grid-template-columns: 8rem minmax(0, 1fr);
        column-gap: 3rem;
        padding-left: 0;
    }

    .timeline__day::before {
        left: calc(9.5rem - 7px);
    }

    .timeline__label {
        grid-row: 1 / span 3;
        padding-top: 0.3rem;
        text-align: right;
    }
}

/* Journey details (included / not included) */
.details-cols {
    display: grid;
    gap: 1.5rem;
}

.details-col {
    padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-white);
}

.details-col__title {
    margin-bottom: 1rem;
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-olive);
}

.details-col__text {
    margin-top: 0.85rem;
    color: var(--color-muted);
}

@media (min-width: 768px) {
    .details-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Gallery mosaic */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-grid li {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--color-tint);
}

.gallery-grid li:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: clamp(160px, 14vw, 240px);
        gap: 1rem;
    }

    .gallery-grid li,
    .gallery-grid li:first-child {
        aspect-ratio: auto;
    }

    .gallery-grid li:first-child {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }
}

/* Editorial link rows (e.g. where to experience it) */
.link-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-line);
}

.link-rows a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-line);
    text-decoration: none;
    color: var(--color-olive);
    transition: color var(--t-fast);
}

.link-rows__num {
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    font-weight: 300;
    color: var(--color-sand);
}

.link-rows__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
}

.link-rows__meta {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--color-muted);
}

.link-rows__arrow {
    font-size: 1.25rem;
    color: var(--color-orange);
    transition: transform var(--t-fast);
}

.link-rows a:hover {
    color: var(--color-brown);
}

.link-rows a:hover .link-rows__arrow {
    transform: translateX(4px);
}

/* Photo band: secondary actions + small note */
.photo-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.photo-band__note {
    margin-top: 1.25rem;
    font-size: var(--fs-small);
    font-style: italic;
    color: rgba(255, 255, 255, 0.72);
}

/* Card links: on navigational cards the image and the title open the same page as
   the card's own CTA (.card-media-link wraps the image; .card-title-link sits inside
   the existing heading). Titles keep their typography; quiet zoom + earth orange. */
.card-media-link {
    position: relative;
    display: block;
}

/* Wrapped images fill their frame; .package-card__media is itself the frame
   (aspect-ratio) and keeps its own sizing */
.card-media-link:not(.package-card__media) {
    height: 100%;
}

.card-media-link img {
    transition: transform 0.5s var(--ease);
}

/* Focus ring drawn inside the image frame (the frames clip overflow). It is an overlay
   above the image: a plain outline would be painted over by the scaled (composited) img. */
.card-media-link:focus-visible {
    outline: none;
}

.card-media-link:focus-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--color-orange), inset 0 0 0 4px rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.card-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--ease);
}

.card-title-link:hover,
.card-title-link:focus-visible {
    color: var(--color-orange-text);
}

.card-media-link:focus-visible img {
    transform: scale(1.03);
}

@media (hover: hover) {
    .card-media-link:hover img {
        transform: scale(1.03);
    }
}

/* Homepage experience tile: stretched link (whole tile clickable) */
.exp-tile__link {
    color: inherit;
    text-decoration: none;
}

.exp-tile__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.exp-tile__link:focus-visible {
    outline: none;
}

.exp-tile:has(.exp-tile__link:focus-visible) {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
}

/* ==================================================
   20e. 404 PAGE — no hero: clear the fixed header, centre the message
   ================================================== */
.not-found {
    display: grid;
    align-items: center;
    min-height: 70vh;
    min-height: 70svh;
    padding-top: calc(var(--header-h) + 3rem);
}

.not-found__intro {
    margin-bottom: 2rem;
}

.not-found__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* ==================================================
   20f. LEGAL PAGES (privacy policy / terms & conditions)
   Compact hero (~half height) over the darkened Contact photograph, under
   the normal transparent inner-page header (sentinel as on other pages, white once
   scrolled); contents list beside a full-width article column aligned to the header
   container from 1024px; the contents column is sticky from 1024px and a normal
   block above the text on smaller screens.
   ================================================== */
.page-hero--legal {
    min-height: 0;
}

.page-hero--legal .page-hero__content {
    padding-top: calc(var(--header-h) + clamp(3.5rem, 2.5rem + 5vw, 6.5rem));
    padding-bottom: clamp(3rem, 2.5rem + 3vw, 4.5rem);
}

/* Contact photograph as atmosphere only: the shared 0.7 brightness plus a full-height
   deep-olive wash (~80% dark overall). The shallow box crops into the giraffe band
   rather than Contact's full-height framing. */
.page-hero--legal .page-hero__media img {
    object-position: 62% 62%;
}

.page-hero--legal .page-hero__shade {
    height: 100%;
    background: linear-gradient(to bottom, rgba(31, 40, 20, 0.7) 0%, rgba(31, 40, 20, 0.76) 100%);
}

@media (min-width: 768px) {
    .page-hero--legal .page-hero__media img {
        object-position: 55% 56%;
    }
}

/* >= 768px the shared hero is 100vh with absolutely placed copy: legal pages keep normal flow */
@media (min-width: 768px) {
    .page-hero--legal {
        height: auto;
    }

    .page-hero--legal .page-hero__content {
        position: relative;
        margin-bottom: 0;
    }
}

.page-hero__updated {
    margin-top: 1.25rem;
    font-size: var(--fs-meta);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-sand);
}

.legal {
    display: grid;
    gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.legal__toc {
    padding: 1.5rem 1.5rem 1.25rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-tint);
}

.legal__toc-title {
    margin-bottom: 0.85rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.legal__toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.legal__toc li {
    counter-increment: toc;
}

.legal__toc a {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    padding: 0.4rem 0;
    font-size: var(--fs-meta);
    line-height: 1.45;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--t-fast);
}

.legal__toc a::before {
    content: counter(toc, decimal-leading-zero);
    color: var(--color-sand);
    font-variant-numeric: tabular-nums;
}

.legal__toc a:hover {
    color: var(--color-brown);
}

.legal__body {
    width: 100%;
    min-width: 0;
}

/* One continuous article column: At a Glance, every section (headings, text, lists,
   dividers) and the help box all share the full width of the right grid column */
.legal__summary,
.legal__section,
.legal__section p,
.legal__section ul,
.legal__section h3,
.legal__contact,
.legal-help {
    width: 100%;
    max-width: none;
}

.legal__summary {
    margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    border-left: 3px solid var(--color-sand);
    background: var(--color-tint);
}

.legal__summary-title {
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    font-weight: 400;
    color: var(--color-olive);
}

.legal__section {
    padding-block: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
    border-top: 1px solid var(--color-line);
}

.legal__section:last-child {
    border-bottom: 1px solid var(--color-line);
}

.legal__section h2 {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: baseline;
    margin-bottom: 1.1rem;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-olive);
}

.legal__num {
    font-size: var(--fs-card);
    font-weight: 300;
    color: var(--color-sand);
}

.legal__section h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--color-ink);
}

.legal__section p,
.legal__section li,
.legal__summary li {
    line-height: var(--lh-body);
    color: var(--color-text);
}

.legal__section p + p,
.legal__section ul + p,
.legal__section p + ul {
    margin-top: 0.9rem;
}

.legal__section ul,
.legal__summary ul {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal__section li,
.legal__summary li {
    position: relative;
    padding-left: 1.4rem;
}

.legal__section li::before,
.legal__summary li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 0.6rem;
    height: 1px;
    background: var(--color-orange);
}

.legal__body a {
    color: var(--color-brown);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    overflow-wrap: anywhere;
}

.legal__body a:hover {
    color: var(--color-orange-text);
}

.legal__contact {
    margin-top: 0.9rem;
    font-style: normal;
    line-height: var(--lh-body);
    color: var(--color-text);
}

.legal-help {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.legal-help__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    color: var(--color-olive);
}

.legal-help__text {
    margin-top: 0.6rem;
    color: var(--color-muted);
}

.legal-help__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    margin-top: 1.25rem;
}

@media (min-width: 576px) {
    .legal__toc ol {
        columns: 2;
        column-gap: 2rem;
    }

    .legal__toc li {
        break-inside: avoid;
    }
}

@media (min-width: 1024px) {
    /* Desktop: same box as the header (.container), so the legal grid starts under the
       logo and ends under the Plan Your Safari button */
    .section-container.legal-wrap {
        width: 100%;
        max-width: var(--container-max);
        padding-inline: var(--gutter);
    }

    .legal {
        grid-template-columns: minmax(15rem, 17.5rem) minmax(0, 1fr);
        gap: clamp(3rem, 1rem + 4vw, 5rem);
        align-items: start;
    }

    .legal__toc {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
        max-height: calc(100vh - var(--header-h) - 3rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .legal__toc ol {
        columns: 1;
    }

    .legal__toc a {
        padding: 0.28rem 0;
    }
}

/* ==================================================
   20g. KILIMANJARO ROUTE EXPLORER (kilimanjaro.html #routes)
   Small screens: route panel → itineraries → next route, normal flow.
   >= 1024px: each .route-group is a two-column grid; its .route-panel is sticky
   inside that group only, so it holds while the route's itineraries scroll and is
   pushed out by the next group (no scroll trapping). With JS (.is-enhanced) the
   panels of routes not currently in view are softened and the 01–06 indicator
   follows the current route.
   ================================================== */
.route-nav {
    margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
}

.route-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.route-nav__link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-size: var(--fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}

.route-nav__num {
    font-size: var(--fs-label);
    color: var(--color-orange-text);
    font-variant-numeric: tabular-nums;
}

.route-nav__link:hover,
.route-nav__link:focus-visible {
    border-color: var(--color-sand);
    background: var(--color-tint);
    color: var(--color-brown);
}

.route-note {
    max-width: 44rem;
    margin: 1.5rem auto 0;
    padding-left: 1rem;
    border-left: 2px solid var(--color-sand);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--color-muted);
}

.route-explorer {
    margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.route-progress {
    display: none;
}

.route-group {
    display: grid;
    gap: 1.75rem;
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.route-group + .route-group {
    margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    border-top: 1px solid var(--color-line);
}

/* Route identity panel */
.route-panel__num {
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    color: var(--color-orange-text);
    font-variant-numeric: tabular-nums;
}

.route-panel__num span {
    color: var(--color-sand);
}

.route-panel__label {
    margin-top: 1rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.route-panel__title {
    margin-top: 0.4rem;
    font-family: var(--font-heading);
    font-size: var(--fs-section);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-olive);
}

.route-panel__alias {
    margin-top: 0.35rem;
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    font-style: italic;
    color: var(--color-brown);
}

.route-panel__badge {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-brown);
    border-radius: 999px;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-brown);
}

.route-panel__text {
    max-width: 34rem;
    margin-top: 1rem;
    line-height: var(--lh-body);
    color: var(--color-text);
}

.route-panel__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    max-width: 34rem;
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-line);
}

.route-panel__facts dt {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.route-panel__facts dd {
    margin: 0.25rem 0 0;
    font-size: var(--fs-small);
    color: var(--color-ink);
}

/* Itinerary chapters */
.route-itins {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.route-itin {
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-white);
}

.route-itin__head {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-line);
}

.route-itin__days {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.route-itin__title {
    margin: 0.4rem 0 0; /* h4: not covered by the base margin reset */
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-olive);
}

.route-itin__summary {
    margin-top: 0.5rem;
    font-size: var(--fs-meta);
    color: var(--color-muted);
}

.route-itin__tag {
    display: inline-block;
    margin-top: 0.85rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--color-tint);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-olive);
}

.route-days {
    margin: 0;
    padding: 0;
    list-style: none;
}

.route-day {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: 0.75rem;
    padding-block: 1.1rem;
}

.route-day + .route-day {
    border-top: 1px solid var(--color-line);
}

.route-day:last-child {
    padding-bottom: 0;
}

.route-day__num {
    padding-top: 0.2rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-orange-text);
    font-variant-numeric: tabular-nums;
}

.route-day__stage {
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    line-height: var(--lh-heading);
    color: var(--color-ink);
}

.route-day__text {
    margin-top: 0.35rem;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--color-muted);
}

.route-day__zone {
    margin-top: 0.4rem;
    font-size: var(--fs-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-sand);
}

/* Inline planning block */
.route-plan {
    display: grid;
    gap: 1.5rem;
    margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    border: 1px solid var(--color-line);
    border-left: 3px solid var(--color-orange);
    border-radius: var(--radius);
    background: var(--color-tint);
}

.route-plan__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-olive);
}

.route-plan__title em {
    color: var(--color-brown);
}

.route-plan__text {
    max-width: 36rem;
    margin-top: 0.6rem;
    color: var(--color-muted);
}

.route-plan__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
}

@media (min-width: 576px) {
    .route-day {
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 768px) {
    .route-plan {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .route-explorer {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: clamp(1.5rem, 0.5rem + 2vw, 3rem);
    }

    /* Indicator: sticky beside the whole explorer */
    .route-progress {
        position: sticky;
        top: calc(var(--header-h) + 3rem);
        align-self: start;
        display: grid;
        gap: 0.35rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .route-progress__link {
        display: block;
        padding: 0.35rem 0 0.35rem 0.6rem;
        border-left: 2px solid var(--color-line);
        font-size: var(--fs-label);
        font-weight: 600;
        letter-spacing: 0.08em;
        color: var(--color-muted);
        text-decoration: none;
        font-variant-numeric: tabular-nums;
        transition: color var(--t-fast), border-color var(--t-fast);
    }

    .route-progress__link:hover,
    .route-progress__link.is-current {
        border-left-color: var(--color-orange);
        color: var(--color-orange-text);
    }

    .route-group {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: clamp(2.5rem, 1rem + 3vw, 5rem);
        align-items: start;
    }

    .route-panel {
        position: sticky;
        top: calc(var(--header-h) + 3rem);
    }

    .route-explorer.is-enhanced .route-panel {
        transition: opacity 450ms var(--ease), transform 450ms var(--ease);
    }

    .route-explorer.is-enhanced .route-group:not(.is-current) .route-panel {
        opacity: 0.35;
        transform: translateY(0.75rem);
    }
}

/* ==================================================
   20h. PRICING — indicative "From" starting prices (registry: tools/pricing.json)
   One quiet treatment everywhere: label + amount stay together on one line, the
   unit may drop below on narrow cards. Never a sale/discount style.
   ================================================== */
.price {
    margin: 0;
    font-size: var(--fs-meta);
    line-height: 1.4;
    color: var(--color-muted);
}

.price__main {
    white-space: nowrap;
}

.price__from {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.price__amount {
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    font-weight: 500;
    color: var(--color-olive);
}

/* Package cards: price sits just above the pinned actions row so cards align */
.package-card__body > .price {
    margin-top: auto;
}

.package-card__body > .price + .package-card__actions {
    margin-top: 0.75rem;
}

.split__body > .price {
    margin-top: 1rem;
}

.link-rows__price {
    display: block;
    margin-top: 0.35rem;
}

.route-itin__head > .price {
    margin-top: 0.6rem;
}

/* Quiet footnote for price bases and disclaimers */
.price-note {
    max-width: 48rem;
    margin-top: 1.25rem;
    font-size: var(--fs-meta);
    font-style: italic;
    line-height: 1.6;
    color: var(--color-muted);
}

.price-note a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-sand);
    text-underline-offset: 0.2em;
}

.price-note a:hover,
.price-note a:focus-visible {
    color: var(--color-orange-text);
}

.section-intro + .price-note,
.split-list + .price-note,
.package-grid + .price-note,
.link-rows + .price-note {
    margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}

/* Journey overview: the price is a full-width last row of the facts strip */
.facts__item--price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1.25rem;
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-line);
}

.facts__item--price dd {
    margin: 0;
}

.facts__item--price .facts__note {
    flex: 1 1 18rem;
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-style: italic;
    color: var(--color-muted);
}

.facts dd.facts__cta {
    font-family: var(--font-body);
}

.facts dd.facts__cta a {
    color: var(--color-olive);
    text-decoration: none;
}

@media (min-width: 768px) {
    .facts .facts__item.facts__item--price {
        padding-left: 0;
        border-top: 1px solid var(--color-line);
        border-left: 0;
    }
}

/* Optional activities: name + starting price rows (not products, no pages) */
.activity-prices {
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line);
}

.activity-prices__label {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange-text);
}

.activity-prices__list {
    display: grid;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.activity-prices__list li {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-line);
}

.activity-prices__name {
    font-family: var(--font-heading);
    font-size: var(--fs-card);
    line-height: var(--lh-heading);
    color: var(--color-olive);
}

.activity-prices__text {
    max-width: 40rem;
    font-size: var(--fs-small);
    color: var(--color-muted);
}

.details-col > .price {
    margin-top: 0.75rem;
}

.details-col > .price-note {
    margin-top: 0.5rem;
}

.activity-prices .price-note {
    margin-top: 1rem;
}

.activity-prices .link-arrow {
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .activity-prices__list--cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
    }
}

@media (min-width: 1280px) {
    .activity-prices__list--cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==================================================
   21. REDUCED MOTION
   ================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    /* Hero ticker: no auto-scroll (matches Ombara's reduced-motion rule) */
    .hero-ticker__track {
        animation: none !important;
    }

    /* No movement on hover */
    .package-card:hover,
    .package-card:hover .package-card__media img,
    .hero-ticker__card:hover img,
    .exp-tile:hover img,
    .split:hover .split__media img,
    .link-rows a:hover .link-rows__arrow,
    .exp-item:hover .exp-item__media img,
    .wa-float:hover,
    .page-hero__cta:hover,
    .link-arrow:hover .link-arrow__icon,
    .card-media-link:hover img,
    .card-media-link:focus-visible img {
        transform: none !important;
    }
}