:root {
    --ink: #151515;
    --muted: #77736d;
    --paper: #f3f1ec;
    --white: #fff;
    --accent: #ef6b31;
    --dark: #141915;
    --radius-xl: 38px;
    --radius-lg: 30px;
    --radius-md: 22px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

button {
    font: inherit;
}

.site-header {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    height: 92px;
    padding: 0 clamp(24px, 5.5vw, 86px);
    display: flex;
    align-items: center;
    gap: 34px;
    color: #fff;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
}

.brand-mark {
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(10px);
}

.brand-copy {
    display: grid;
    line-height: 1;
}

.brand-copy strong {
    font-size: 17px;
    letter-spacing: -.025em;
}

.brand-copy small {
    margin-top: 5px;
    opacity: .58;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.desktop-nav {
    display: flex;
    gap: 29px;
    font-size: 12px;
    font-weight: 650;
}

.desktop-nav a {
    position: relative;
    opacity: .72;
    transition: opacity .22s ease;
}

.desktop-nav a:hover {
    opacity: 1;
}

.header-cta {
    padding: 13px 20px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(14px);
    font-size: 12px;
    font-weight: 750;
}

.menu-button {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.11);
    backdrop-filter: blur(13px);
}

.menu-button span {
    display: block;
    width: 18px;
    height: 1.5px;
    margin: 5px auto;
    background: #fff;
}

.hero-slider {
    position: relative;
    min-height: min(930px, calc(100vh - 16px));
    margin: 8px;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #141915;
    color: #fff;
}

.hero-stage {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .85s cubic-bezier(.22,.61,.36,1),
        visibility .85s;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hero-media {
    position: absolute;
    inset: 0;
    background-image: var(--hero-image);
    background-position: center center;
    background-size: cover;
    transform: scale(1.11);
    transition:
        transform 7s cubic-bezier(.16,1,.3,1),
        filter .9s ease;
    filter: saturate(.93) contrast(1.03);
}

.hero-slide.is-active .hero-media {
    transform: scale(1.02);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7,10,8,.80) 0%,
            rgba(7,10,8,.59) 32%,
            rgba(7,10,8,.19) 68%,
            rgba(7,10,8,.05) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5,8,6,.58) 0%,
            transparent 44%
        );
}

.hero-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: min(930px, calc(100vh - 16px));
    display: flex;
    align-items: center;
    padding:
        clamp(135px, 17vh, 190px)
        clamp(28px, 7vw, 110px)
        155px;
}

.hero-copy {
    width: min(780px, 63vw);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 26px;
    opacity: 0;
    transform: translateY(16px);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .21em;
    text-transform: uppercase;
}

.hero h1,
.hero h2.hero-slide-heading {
    margin: 0;
    overflow: hidden;
    font-size: clamp(68px, 8.1vw, 128px);
    line-height: .82;
    letter-spacing: -.066em;
    font-weight: 680;
}

.hero h1 span,
.hero h2.hero-slide-heading span {
    display: block;
    opacity: 0;
    transform: translateY(105%);
}

.hero h1 .line-accent,
.hero h2.hero-slide-heading .line-accent {
    padding-bottom: .09em;
    font-weight: 300;
    font-style: italic;
}

.hero-copy p {
    max-width: 570px;
    margin: 32px 0 30px;
    opacity: 0;
    transform: translateY(18px);
    color: rgba(255,255,255,.78);
    font-size: clamp(15px, 1.3vw, 19px);
    line-height: 1.72;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    opacity: 0;
    transform: translateY(16px);
}

.hero-slide.is-active .eyebrow {
    animation: revealUp .65s .16s forwards;
}

.hero-slide.is-active h1 .line-primary,
.hero-slide.is-active h2.hero-slide-heading .line-primary {
    animation: revealTitle .82s .22s forwards;
}

.hero-slide.is-active h1 .line-accent,
.hero-slide.is-active h2.hero-slide-heading .line-accent {
    animation: revealTitle .82s .30s forwards;
}

.hero-slide.is-active .hero-copy p {
    animation: revealUp .7s .42s forwards;
}

.hero-slide.is-active .hero-actions {
    animation: revealUp .7s .52s forwards;
}

.button {
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.button-primary {
    background: var(--accent);
    color: #fff;
}

.button-glass {
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.08);
    color: #fff;
    backdrop-filter: blur(12px);
}

.button-dark {
    background: var(--dark);
    color: #fff;
}

.hero-ui {
    position: absolute;
    z-index: 8;
    right: clamp(24px, 5.5vw, 88px);
    bottom: 34px;
    left: clamp(24px, 7vw, 110px);
    pointer-events: none;
}

.hero-card-rail {
    position: absolute;
    right: 0;
    bottom: 84px;
    width: min(355px, 30vw);
    display: grid;
    gap: 9px;
    pointer-events: auto;
}

.destination-card {
    width: 100%;
    min-height: 86px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 21px;
    display: flex;
    align-items: flex-end;
    gap: 17px;
    text-align: left;
    color: #fff;
    background: rgba(11,15,12,.22);
    backdrop-filter: blur(15px);
    cursor: pointer;
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        background .35s ease,
        border-color .35s ease;
}

.destination-card:hover {
    background: rgba(255,255,255,.12);
}

.destination-card.is-active {
    transform: translateX(-18px);
    border-color: rgba(255,255,255,.27);
    background: rgba(255,255,255,.15);
}

.destination-number {
    padding-bottom: 2px;
    opacity: .46;
    font-size: 10px;
    font-weight: 750;
}

.destination-copy {
    display: grid;
}

.destination-copy small {
    margin-bottom: 5px;
    opacity: .56;
    font-size: 10px;
}

.destination-copy strong {
    font-size: 15px;
    letter-spacing: -.015em;
}

.hero-bottom-bar {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    pointer-events: auto;
}

.hero-progress {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 10px;
    font-weight: 700;
}

.current-slide {
    min-width: 18px;
}

.total-slides {
    opacity: .48;
}

.progress-track {
    width: clamp(80px, 10vw, 145px);
    height: 1px;
    overflow: hidden;
    background: rgba(255,255,255,.25);
}

.progress-fill {
    display: block;
    width: 33.333%;
    height: 100%;
    background: #fff;
    transform-origin: left center;
    transition: transform .65s cubic-bezier(.16,1,.3,1);
}

.hero-arrows {
    display: flex;
    gap: 7px;
}

.slider-arrow {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.19);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: background .2s ease;
}

.slider-arrow:hover {
    background: rgba(255,255,255,.17);
}

.intro {
    padding:
        clamp(100px, 12vw, 165px)
        clamp(24px, 8vw, 130px)
        80px;
}

.section-label {
    display: block;
    margin-bottom: 34px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.intro-grid {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(300px,.62fr);
    gap: 9vw;
    align-items: end;
}

.intro h2 {
    margin: 0;
    max-width: 900px;
    font-size: clamp(52px, 6.4vw, 92px);
    line-height: .92;
    letter-spacing: -.06em;
}

.intro h2 span {
    display: block;
    font-weight: 330;
}

.intro-copy p {
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 800;
}

.text-link span {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
}

.category-grid {
    padding: 0 clamp(18px, 6vw, 95px) 120px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 13px;
}

.category-card {
    position: relative;
    min-height: 310px;
    padding: 28px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0 18px 65px rgba(35,29,20,.035);
}

.category-card.featured {
    color: #fff;
    background: var(--dark);
}

.card-index,
.category-card small {
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.card-index {
    color: var(--accent);
}

.category-card small {
    color: var(--muted);
}

.category-card.featured small {
    color: rgba(255,255,255,.52);
}

.category-card h3 {
    margin: 10px 0 13px;
    font-size: clamp(26px, 2.2vw, 35px);
    line-height: 1;
    letter-spacing: -.045em;
}

.category-card p {
    max-width: 380px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

.category-card.featured p {
    color: rgba(255,255,255,.62);
}

.category-card > a {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--paper);
    font-size: 14px;
}

.category-card.featured > a {
    color: var(--dark);
    background: var(--accent);
}

.plan-strip {
    margin: 8px;
    padding:
        clamp(54px, 7vw, 90px)
        clamp(26px, 7vw, 110px);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    background: #e5e1d8;
}

.plan-strip small {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.plan-strip strong {
    font-size: clamp(34px, 4vw, 62px);
    letter-spacing: -.052em;
}

@keyframes revealTitle {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {

    .site-header {
        position: absolute;
        height: 76px;
        padding:
            env(safe-area-inset-top)
            18px
            0;
        gap: 12px;
    }

    .desktop-nav,
    .header-cta {
        display: none;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
        font-size: 11px;
    }

    .brand-copy strong {
        font-size: 15px;
    }

    .menu-button {
        display: block;
    }

    .hero-slider {
        min-height: 100svh;
        margin: 0;
        border-radius: 0 0 28px 28px;
    }

    .hero-inner {
        min-height: 100svh;
        padding:
            130px
            20px
            255px;
        align-items: flex-end;
    }

    .hero-copy {
        width: 100%;
    }

    .eyebrow {
        margin-bottom: 18px;
        font-size: 9px;
    }

    .hero h1,
.hero h2.hero-slide-heading {
        max-width: 96%;
        font-size: clamp(56px, 16.4vw, 82px);
        line-height: .86;
    }

    .hero-copy p {
        max-width: 92%;
        margin: 22px 0;
        font-size: 14px;
        line-height: 1.62;
    }

    .button {
        min-height: 48px;
        padding: 0 19px;
        font-size: 11px;
    }

    .hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(6,9,7,.88) 0%,
                rgba(6,9,7,.55) 43%,
                rgba(6,9,7,.15) 75%
            ),
            linear-gradient(
                90deg,
                rgba(6,9,7,.25),
                transparent 70%
            );
    }

    .hero-ui {
        right: 0;
        bottom: 24px;
        left: 0;
    }

    .hero-card-rail {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        padding-left: 20px;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(230px, 72vw);
        gap: 9px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .hero-card-rail::-webkit-scrollbar {
        display: none;
    }

    .destination-card {
        min-height: 88px;
        scroll-snap-align: start;
    }

    .destination-card.is-active {
        transform: none;
    }

    .hero-bottom-bar {
        padding: 14px 20px 0;
    }

    .hero-arrows {
        display: none;
    }

    .progress-track {
        width: 94px;
    }

    .intro {
        padding: 88px 20px 55px;
    }

    .section-label {
        margin-bottom: 25px;
    }

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .intro h2 {
        font-size: clamp(46px, 13vw, 66px);
    }

    .intro-copy p {
        max-width: 94%;
        font-size: 15px;
    }

    .category-grid {
        padding: 0 12px 75px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .category-card {
        min-height: 245px;
        padding: 24px;
    }

    .category-card h3 {
        font-size: 30px;
    }

    .plan-strip {
        margin: 0 8px 8px;
        padding: 50px 22px;
        flex-direction: column;
        align-items: flex-start;
    }
}

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

/* =====================================================
   AL BADI HERO V2
   ===================================================== */

.destination-card {
    position: relative;
    grid-template-columns: 62px 30px 1fr;
    align-items: center;
    min-height: 94px;
    padding: 14px 18px 14px 14px;
    overflow: hidden;
}

.destination-thumb {
    width: 62px;
    height: 62px;
    min-width: 62px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.08);
    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        inset 0 0 0 1px rgba(255,255,255,.08);
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        border-color .35s ease;
}

.destination-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 5s ease;
}

.destination-card:hover .destination-thumb img,
.destination-card.is-active .destination-thumb img {
    transform: scale(1.14);
}

.destination-card.is-active .destination-thumb {
    transform: scale(1.055);
    border-color: rgba(255,255,255,.62);
}

.destination-card.is-active {
    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.21),
            rgba(255,255,255,.11)
        );
}

.destination-indicator {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
}

.destination-indicator i {
    display: block;
    width: 0;
    height: 100%;
    background: rgba(255,255,255,.90);
}

.destination-card.is-active .destination-indicator i {
    animation: cardProgress 4.2s linear forwards;
}

.hero-slide {
    transition:
        opacity .68s cubic-bezier(.22,.61,.36,1),
        visibility .68s;
}

.hero-media {
    transition:
        transform 5s cubic-bezier(.16,1,.3,1),
        filter .68s ease;
}

.hero-slide.is-active .hero-media {
    transform: scale(1.025);
}

.progress-fill {
    width: 100%;
    transform: scaleX(.2);
}

@keyframes cardProgress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@media (max-width: 900px) {

    .hero-card-rail {
        grid-auto-columns: minmax(278px, 79vw);
    }

    .destination-card {
        grid-template-columns: 58px 28px 1fr;
        min-height: 90px;
        padding: 13px 16px 13px 13px;
    }

    .destination-thumb {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

    .destination-copy strong {
        font-size: 14px;
    }

    .hero-inner {
        padding-bottom: 270px;
    }
}

@media (max-width: 420px) {

    .hero-card-rail {
        grid-auto-columns: 82vw;
    }

    .destination-card {
        min-height: 86px;
    }

    .destination-thumb {
        width: 54px;
        height: 54px;
        min-width: 54px;
    }
}

/* =====================================================
   AL BADI HERO V4 — RESPONSIVE LAYOUT
   ===================================================== */

.hero-slider {
    --hero-transition: 520ms;
}

/*
 * Hero UI now fills the whole hero.
 * This lets the card rail use a real top position
 * instead of calculating from the bottom.
 */
.hero-ui {
    top: 0 !important;
    right: clamp(22px, 5.5vw, 88px) !important;
    bottom: 0 !important;
    left: clamp(22px, 7vw, 110px) !important;
}

/* Bottom navigation always stays at hero bottom */
.hero-bottom-bar {
    position: absolute !important;
    right: 0;
    bottom: 28px;
    left: 0;
}

/* ============================================
   LARGE DESKTOP
   ============================================ */

.hero-card-rail {
    position: absolute !important;

    top: clamp(118px, 14vh, 150px) !important;
    right: 0 !important;
    bottom: auto !important;

    width: min(340px, 28vw) !important;
    max-height: calc(100% - 245px);

    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    transform: none !important;
}

/*
 * Slightly smaller cards allow five slides
 * to fit without reaching the header.
 */
.destination-card {
    position: relative;

    min-height: 78px !important;
    height: 78px;

    padding: 9px 15px 9px 9px !important;

    grid-template-columns: 54px 28px minmax(0, 1fr) !important;
    gap: 11px !important;

    border-radius: 21px !important;

    transform: none !important;

    transition:
        background-color var(--hero-transition) ease,
        border-color var(--hero-transition) ease,
        opacity var(--hero-transition) ease,
        box-shadow var(--hero-transition) ease !important;
}

.destination-card.is-active {
    transform: none !important;

    border-color: rgba(255,255,255,.35) !important;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.10)
        ) !important;

    box-shadow:
        0 18px 42px rgba(0,0,0,.15);
}

.destination-thumb {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;

    border-radius: 50% !important;

    border: 2px solid rgba(255,255,255,.38) !important;
}

.destination-number {
    font-size: 10px !important;
}

.destination-copy {
    min-width: 0;
}

.destination-copy small {
    margin-bottom: 4px !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.destination-copy strong {
    display: block;

    font-size: 14px !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Faster visual change.
 */
.hero-slide {
    transition:
        opacity var(--hero-transition) cubic-bezier(.22,.61,.36,1),
        visibility var(--hero-transition) !important;
}

.hero-slide.is-active .hero-media {
    transform: scale(1.035) !important;
}

.hero-media {
    transition:
        transform 3.8s cubic-bezier(.16,1,.3,1),
        filter var(--hero-transition) ease !important;
}


/* ============================================
   COMPACT DESKTOP / TABLET
   ============================================ */

@media (max-width: 1180px) {

    /*
     * Menu becomes compact earlier.
     * Prevents header from becoming crowded.
     */
    .desktop-nav,
    .header-cta {
        display: none !important;
    }

    .menu-button {
        display: block !important;
    }

    /*
     * Cards become horizontal instead of
     * being forced into a vertical stack.
     */
    .hero-card-rail {
        top: auto !important;
        right: 0 !important;
        bottom: 88px !important;
        left: 0 !important;

        width: auto !important;
        max-height: none !important;

        display: grid !important;

        grid-auto-flow: column !important;
        grid-template-columns: none !important;

        grid-auto-columns:
            minmax(250px, 32vw) !important;

        gap: 9px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }

    .hero-card-rail::-webkit-scrollbar {
        display: none;
    }

    .destination-card {
        width: auto !important;

        min-height: 82px !important;
        height: 82px !important;

        scroll-snap-align: start;
    }

    /*
     * Hero text must leave room for card rail.
     */
    .hero-inner {
        padding-bottom: 205px !important;
    }

    .hero-bottom-bar {
        bottom: 25px;
    }
}


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

@media (max-width: 900px) {

    .site-header {
        height: 76px !important;

        padding:
            max(12px, env(safe-area-inset-top))
            18px
            0 !important;
    }

    .hero-slider {
        min-height: 100svh !important;

        margin: 0 !important;

        border-radius:
            0 0 28px 28px !important;
    }

    .hero-ui {
        right: 0 !important;
        left: 0 !important;
    }

    /*
     * Mobile shows roughly one card plus
     * part of the next one.
     */
    .hero-card-rail {
        right: 0 !important;
        bottom: 76px !important;
        left: 0 !important;

        width: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        grid-auto-columns:
            minmax(250px, 78vw) !important;

        gap: 9px !important;
    }

    .destination-card {
        min-height: 78px !important;
        height: 78px !important;

        padding: 9px 13px 9px 9px !important;

        grid-template-columns:
            52px 26px minmax(0,1fr) !important;

        border-radius: 20px !important;
    }

    .destination-thumb {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }

    .destination-copy strong {
        font-size: 14px !important;
    }

    .hero-inner {
        min-height: 100svh !important;

        padding:
            118px
            18px
            190px !important;

        align-items: flex-end !important;
    }

    /*
     * Mobile typography is deliberately smaller
     * so it doesn't compete with slide cards.
     */
    .hero h1,
.hero h2.hero-slide-heading {
        max-width: 96%;

        font-size:
            clamp(48px, 14vw, 72px) !important;

        line-height: .87 !important;
    }

    .hero-copy p {
        max-width: 94% !important;

        margin:
            18px 0 20px !important;

        font-size: 14px !important;

        line-height: 1.58 !important;
    }

    .hero-actions {
        gap: 8px !important;
    }

    .button {
        min-height: 46px !important;

        padding:
            0 17px !important;
    }

    .hero-bottom-bar {
        right: 18px !important;
        bottom: 22px !important;
        left: 18px !important;
    }

    .hero-arrows {
        display: none !important;
    }
}


/* ============================================
   SMALL MOBILE
   ============================================ */

@media (max-width: 520px) {

    .brand-copy small {
        display: none;
    }

    .hero-inner {
        padding:
            108px
            16px
            184px !important;
    }

    .hero h1,
.hero h2.hero-slide-heading {
        font-size:
            clamp(43px, 13.5vw, 60px) !important;
    }

    .hero-card-rail {
        bottom: 72px !important;

        padding-left: 14px !important;

        grid-auto-columns:
            minmax(238px, 82vw) !important;
    }

    .destination-card {
        min-height: 74px !important;
        height: 74px !important;

        grid-template-columns:
            48px 24px minmax(0,1fr) !important;
    }

    .destination-thumb {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }

    .destination-copy small {
        font-size: 9px !important;
    }

    .destination-copy strong {
        font-size: 13px !important;
    }
}


/* ============================================
   SHORT SCREENS / LAPTOP HEIGHT
   ============================================ */

@media (min-width: 1181px) and (max-height: 790px) {

    .hero-card-rail {
        top: 105px !important;

        gap: 6px !important;
    }

    .destination-card {
        min-height: 68px !important;
        height: 68px !important;
    }

    .destination-thumb {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    .hero-inner {
        padding-top: 120px !important;
        padding-bottom: 110px !important;
    }
}

/* =====================================================
   END HERO V4
   ===================================================== */

/* ==========================================================
   AL BADI HOMEPAGE API V1
   ========================================================== */

.product-showcase {
    padding:
        20px
        clamp(18px, 6vw, 95px)
        clamp(90px, 10vw, 150px);
}

.product-section-head {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, .55fr);
    gap: clamp(30px, 7vw, 110px);
    align-items: end;
    margin-bottom: 42px;
}

.product-section-head h2 {
    max-width: 900px;
    margin: 12px 0 0;
    font-size: clamp(42px, 5.4vw, 78px);
    line-height: .94;
    letter-spacing: -.055em;
}

.product-section-head h2 span {
    display: block;
    font-weight: 330;
}

.product-section-head > p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.safari-heading {
    margin-top: clamp(90px, 10vw, 150px);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.product-grid-safaris {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.travel-product-card {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 18px 65px rgba(35, 29, 20, .045);
}

.travel-product-media {
    position: relative;
    display: block;
    aspect-ratio: 1.28 / 1;
    overflow: hidden;
    background: #ddd8ce;
}

.travel-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.22,.61,.36,1);
}

.travel-product-card:hover .travel-product-media img {
    transform: scale(1.045);
}

.travel-product-badge {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 8px 11px;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 15, 14, .68);
    backdrop-filter: blur(10px);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.travel-product-body {
    padding: 22px;
}

.travel-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    margin-bottom: 11px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.travel-product-body h3 {
    margin: 0 0 12px;
    font-size: clamp(23px, 2vw, 31px);
    line-height: 1.03;
    letter-spacing: -.04em;
}

.travel-product-body > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.travel-product-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(25, 22, 18, .08);
}

.travel-product-foot strong {
    font-size: 12px;
}

.travel-product-foot a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
}

.travel-product-foot a span {
    font-size: 14px;
}

.product-api-fallback {
    padding: clamp(28px, 5vw, 55px);
    border-radius: var(--radius-md);
    background: #fff;
}

.product-api-fallback strong {
    display: block;
    margin-bottom: 10px;
    font-size: clamp(25px, 3vw, 38px);
    letter-spacing: -.04em;
}

.product-api-fallback p {
    max-width: 700px;
    color: var(--muted);
    line-height: 1.7;
}

.product-api-fallback a {
    display: inline-block;
    margin-top: 8px;
    font-weight: 800;
    font-size: 12px;
}

@media (max-width: 1050px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .product-showcase {
        padding:
            15px
            18px
            85px;
    }

    .product-section-head {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 28px;
    }

    .product-section-head h2 {
        font-size: clamp(40px, 12vw, 62px);
    }

    .product-section-head > p {
        max-width: 580px;
    }

    .safari-heading {
        margin-top: 85px;
    }
}

@media (max-width: 620px) {
    .product-grid,
    .product-grid-safaris {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        margin-right: -18px;
        padding-right: 18px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .product-grid::-webkit-scrollbar {
        display: none;
    }

    .travel-product-card {
        flex: 0 0 min(84vw, 350px);
        scroll-snap-align: start;
    }

    .travel-product-media {
        aspect-ratio: 1.15 / 1;
    }

    .travel-product-body {
        padding: 19px;
    }

    .travel-product-foot {
        align-items: flex-end;
    }
}

/* END HOMEPAGE API V1 */

/* ==========================================================
   AL BADI — TOUR DETAIL V1
   ========================================================== */

.tour-detail-page {
    background: var(--paper);
}

.tour-header {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:
        calc(22px + env(safe-area-inset-top))
        clamp(18px, 5vw, 76px)
        22px;
    color: #fff;
}

.tour-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.tour-header-brand > span:last-child {
    display: flex;
    flex-direction: column;
}

.tour-header-brand strong {
    font-size: 15px;
    line-height: 1;
}

.tour-header-brand small {
    margin-top: 5px;
    color: rgba(255,255,255,.68);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tour-header-back {
    font-size: 11px;
    font-weight: 800;
}

.tour-detail-hero {
    padding: 8px;
}

.tour-detail-image {
    position: relative;
    min-height: min(82vh, 860px);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #252521;
}

.tour-detail-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-detail-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.18) 0%,
            rgba(0,0,0,.04) 35%,
            rgba(0,0,0,.72) 100%
        );
}

.tour-detail-hero-copy {
    position: absolute;
    z-index: 2;
    left: clamp(22px, 6vw, 92px);
    right: clamp(22px, 35vw, 520px);
    bottom: clamp(38px, 7vw, 90px);
    color: #fff;
}

.tour-detail-eyebrow {
    display: block;
    margin-bottom: 17px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.tour-detail-hero-copy h1 {
    max-width: 1050px;
    margin: 0;
    font-size: clamp(50px, 7.5vw, 112px);
    line-height: .88;
    letter-spacing: -.065em;
}

.tour-detail-hero-copy p {
    max-width: 650px;
    margin: 27px 0 0;
    color: rgba(255,255,255,.76);
    font-size: 15px;
    line-height: 1.75;
}

.tour-detail-layout {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(310px,420px);
    gap: clamp(45px, 8vw, 130px);
    padding:
        clamp(65px, 9vw, 130px)
        clamp(18px, 7vw, 110px)
        clamp(90px, 10vw, 150px);
    align-items: start;
}

.tour-facts {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    border-top: 1px solid rgba(20,20,18,.1);
    border-bottom: 1px solid rgba(20,20,18,.1);
}

.tour-facts > div {
    padding: 24px 18px 24px 0;
}

.tour-facts small,
.tour-booking-card > small,
.tour-note small {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.tour-facts strong {
    font-size: 15px;
}

.tour-info-section {
    padding-top: clamp(65px, 8vw, 110px);
}

.tour-info-section h2 {
    max-width: 700px;
    margin: 12px 0 30px;
    font-size: clamp(37px, 4.5vw, 66px);
    line-height: .96;
    letter-spacing: -.055em;
}

.tour-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.tour-highlight-item {
    min-height: 110px;
    padding: 22px;
    border-radius: 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
}

.tour-highlight-item span {
    color: var(--accent);
    font-weight: 900;
}

.tour-highlight-item strong {
    font-size: 14px;
    line-height: 1.5;
}

.tour-list-numbered {
    margin: 0;
    padding-left: 22px;
}

.tour-list-numbered li {
    padding: 14px 0 14px 8px;
    border-bottom: 1px solid rgba(20,20,18,.08);
    line-height: 1.7;
}

.tour-two-columns {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.tour-two-columns > div {
    padding: 28px;
    border-radius: 20px;
    background: #fff;
}

.tour-two-columns h3 {
    margin: 0 0 19px;
    font-size: 22px;
}

.tour-check-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.6;
}

.tour-check-list.muted {
    color: var(--muted);
}

.tour-note {
    padding: 22px 0;
    border-bottom: 1px solid rgba(20,20,18,.09);
}

.tour-note p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.tour-booking-card {
    position: sticky;
    top: 24px;
    padding: 31px;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 22px 70px rgba(35,29,20,.06);
}

.tour-booking-card h2 {
    margin: 11px 0 30px;
    font-size: clamp(31px, 3vw, 44px);
    line-height: .98;
    letter-spacing: -.05em;
}

.tour-price {
    padding: 20px 0;
    border-top: 1px solid rgba(20,20,18,.08);
    border-bottom: 1px solid rgba(20,20,18,.08);
}

.tour-price span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 10px;
}

.tour-price strong {
    font-size: 25px;
}

.tour-booking-card p {
    margin: 24px 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.tour-booking-button {
    width: 100%;
    justify-content: center;
}

.tour-small-link {
    display: block;
    margin-top: 20px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
}

.tour-not-found {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(30px,8vw,120px);
}

.tour-not-found h1 {
    max-width: 800px;
    margin: 15px 0;
    font-size: clamp(50px,8vw,110px);
    line-height: .9;
    letter-spacing: -.065em;
}

.tour-not-found p {
    margin-bottom: 30px;
    color: var(--muted);
}

@media (max-width: 900px) {

    .tour-detail-image {
        min-height: 78svh;
    }

    .tour-detail-hero-copy {
        right: 22px;
        bottom: 42px;
    }

    .tour-detail-hero-copy h1 {
        font-size: clamp(48px,14vw,78px);
    }

    .tour-detail-layout {
        grid-template-columns: 1fr;
        padding:
            65px
            18px
            90px;
    }

    .tour-booking-card {
        position: static;
    }
}

@media (max-width: 620px) {

    .tour-header {
        padding-left: 18px;
        padding-right: 18px;
    }

    .tour-header-back {
        font-size: 9px;
    }

    .tour-detail-hero {
        padding: 0;
    }

    .tour-detail-image {
        min-height: 82svh;
        border-radius: 0 0 24px 24px;
    }

    .tour-detail-hero-copy {
        left: 18px;
        right: 18px;
        bottom: 36px;
    }

    .tour-detail-hero-copy p {
        margin-top: 20px;
        font-size: 13px;
    }

    .tour-facts {
        grid-template-columns: 1fr;
    }

    .tour-facts > div {
        border-bottom: 1px solid rgba(20,20,18,.08);
    }

    .tour-highlight-grid,
    .tour-two-columns {
        grid-template-columns: 1fr;
    }
}

/* END TOUR DETAIL V1 */

/* ==========================================================
   AL BADI — REQUEST THIS TRIP V1
   ========================================================== */

.trip-request-form {
    display: grid;
    gap: 15px;
    margin-top: 25px;
}

.trip-request-form label {
    display: grid;
    gap: 7px;
}

.trip-request-form label > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.trip-request-form input,
.trip-request-form textarea {
    width: 100%;
    border: 1px solid rgba(20,20,18,.11);
    border-radius: 12px;
    background: #faf9f6;
    padding: 13px 14px;
    color: inherit;
    font: inherit;
    font-size: 13px;
    outline: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.trip-request-form textarea {
    resize: vertical;
    min-height: 105px;
}

.trip-request-form input:focus,
.trip-request-form textarea:focus {
    border-color: rgba(20,20,18,.35);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20,20,18,.045);
}

.trip-request-row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

.trip-guests {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

.trip-addons {
    display: grid;
    gap: 9px;
    padding: 16px;
    border-radius: 14px;
    background: #f6f4ef;
}

.trip-addons-title {
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.trip-addons label {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 12px;
}

.trip-addons label > span {
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.trip-addons input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
}

.trip-request-note {
    display: block;
    text-align: center;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.55;
}

.trip-request-error {
    margin: 18px 0 4px;
    padding: 13px 14px;
    border-radius: 12px;
    background: #fff2ef;
    font-size: 11px;
    line-height: 1.6;
}

.trip-request-success {
    display: grid;
    gap: 12px;
    margin-top: 22px;
    padding: 22px;
    border-radius: 16px;
    background: #f1f5ee;
}

.trip-request-success small {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.trip-request-success strong {
    font-size: 19px;
    line-height: 1.25;
}

.trip-request-success p,
.trip-request-success span {
    margin: 0;
    font-size: 12px;
}

.trip-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 620px) {

    .trip-request-row {
        grid-template-columns: 1fr;
    }

    .trip-guests {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .tour-booking-card {
        padding: 23px 18px;
        border-radius: 18px;
    }

    .trip-request-form input,
    .trip-request-form textarea {
        font-size: 16px;
    }
}

/* END REQUEST THIS TRIP V1 */

/* ==========================================================
   AL BADI — TRACK REQUEST V1
   ========================================================== */

.track-request-page {
    min-height: 100svh;
    background: #f5f3ee;
}

.track-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:
        calc(22px + env(safe-area-inset-top))
        clamp(18px, 5vw, 72px)
        22px;
}

.track-page-header .tour-header-brand {
    color: var(--ink);
}

.track-page-header .tour-header-brand small {
    color: var(--muted);
}

.track-home-link {
    font-size: 10px;
    font-weight: 800;
}

.track-request-shell {
    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(420px, .7fr);
    gap: clamp(55px, 9vw, 150px);
    align-items: start;
    padding:
        clamp(55px, 8vw, 120px)
        clamp(18px, 7vw, 110px)
        clamp(90px, 10vw, 150px);
}

.track-request-intro {
    position: sticky;
    top: 50px;
}

.track-request-intro h1 {
    max-width: 760px;
    margin: 15px 0 25px;
    font-size: clamp(58px, 8vw, 120px);
    line-height: .88;
    letter-spacing: -.065em;
}

.track-request-intro p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.track-request-card {
    padding: clamp(25px, 4vw, 42px);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(37,29,18,.07);
}

.track-request-form {
    display: grid;
    gap: 17px;
}

.track-request-form label {
    display: grid;
    gap: 8px;
}

.track-request-form label > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.track-request-form input {
    width: 100%;
    border: 1px solid rgba(20,20,18,.12);
    border-radius: 13px;
    background: #faf9f6;
    padding: 15px 16px;
    color: inherit;
    font: inherit;
    font-size: 14px;
    outline: none;
}

.track-request-form input:focus {
    border-color: rgba(20,20,18,.38);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20,20,18,.045);
}

.track-submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

.track-privacy-note {
    display: block;
    color: var(--muted);
    text-align: center;
    font-size: 9px;
    line-height: 1.55;
}

.track-alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.6;
}

.track-alert-error {
    background: #fff2ef;
}

.track-result {
    display: grid;
    gap: 30px;
}

.track-result-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(20,20,18,.09);
}

.track-result-top small,
.track-result-name small,
.track-result-grid small {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.track-result-top strong {
    font-size: 15px;
}

.track-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.track-status.is-pending {
    background: #f6f0dc;
}

.track-status.is-review {
    background: #e9eff3;
}

.track-status.is-confirmed {
    background: #e9f2e6;
}

.track-result-name h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: .98;
    letter-spacing: -.045em;
}

.track-result-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.track-result-grid > div {
    min-height: 105px;
    padding: 18px;
    border-radius: 15px;
    background: #f7f5f0;
}

.track-result-grid strong {
    font-size: 13px;
    line-height: 1.5;
}

.track-result-note {
    padding: 19px;
    border-radius: 14px;
    background: #f2f1ed;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

.track-another-link {
    font-size: 10px;
    font-weight: 800;
}

@media (max-width: 900px) {

    .track-request-shell {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .track-request-intro {
        position: static;
    }
}

@media (max-width: 620px) {

    .track-page-header {
        padding-left: 18px;
        padding-right: 18px;
    }

    .track-request-shell {
        padding:
            42px
            18px
            80px;
    }

    .track-request-intro h1 {
        font-size: clamp(54px, 16vw, 82px);
    }

    .track-request-card {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .track-request-form input {
        font-size: 16px;
    }

    .track-result-grid {
        grid-template-columns: 1fr;
    }

    .track-result-top {
        flex-direction: column;
    }
}

/* END TRACK REQUEST V1 */

/* ==========================================================
   AL BADI — UI V5A HOMEPAGE ARCHITECTURE
   ========================================================== */

.v5-intro {
    padding:
        clamp(82px, 9vw, 128px)
        clamp(20px, 7vw, 110px)
        clamp(72px, 8vw, 110px);
}

.v5-intro-kicker {
    display: grid;
    grid-template-columns: auto minmax(50px, 1fr) auto;
    gap: 22px;
    align-items: center;
    margin-bottom: clamp(42px, 6vw, 74px);
}

.v5-intro-kicker .section-label {
    margin: 0;
}

.v5-intro-kicker small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.v5-intro-line {
    height: 1px;
    background: rgba(20,20,18,.11);
}

.v5-intro-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, .55fr);
    gap: clamp(45px, 9vw, 145px);
    align-items: end;
}

.v5-intro h2 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(48px, 5.6vw, 82px);
    line-height: .94;
    letter-spacing: -.058em;
}

.v5-intro h2 span {
    display: block;
    font-weight: 330;
}

.v5-intro-copy {
    max-width: 560px;
}

.v5-intro-copy p {
    margin: 0 0 17px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.78;
}

.v5-intro-copy .text-link {
    margin-top: 12px;
}


/* ---------- SERVICE ARCHITECTURE ---------- */

.v5-service-section {
    padding:
        0
        clamp(12px, 5.5vw, 88px)
        clamp(95px, 10vw, 145px);
}

.v5-section-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, .52fr);
    gap: clamp(35px, 8vw, 125px);
    align-items: end;
    padding:
        0
        clamp(8px, 1vw, 18px)
        clamp(38px, 5vw, 60px);
}

.v5-section-heading h2 {
    max-width: 950px;
    margin: 13px 0 0;
    font-size: clamp(42px, 5.1vw, 76px);
    line-height: .95;
    letter-spacing: -.055em;
}

.v5-section-heading h2 span {
    display: block;
    font-weight: 330;
}

.v5-section-heading > p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.v5-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 13px;
}

.v5-service-card {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px;
    color: #fff;
    isolation: isolate;
    background:
        var(--service-image)
        center / cover no-repeat;
    box-shadow: 0 22px 70px rgba(27,24,19,.08);
}

.v5-service-card-large {
    grid-column: span 2;
}

.v5-service-card::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        var(--service-image)
        center / cover no-repeat;
    transition:
        transform .7s cubic-bezier(.22,.61,.36,1);
}

.v5-service-card:hover::before {
    transform: scale(1.045);
}

.v5-service-shade {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(7,10,8,.16) 0%,
            rgba(7,10,8,.12) 32%,
            rgba(7,10,8,.82) 100%
        );
}

.v5-service-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.v5-service-top span {
    color: #ff6935;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
}

.v5-service-top small {
    color: rgba(255,255,255,.73);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.v5-service-copy {
    max-width: 520px;
}

.v5-service-copy h3 {
    margin: 0 0 13px;
    font-size: clamp(29px, 3vw, 46px);
    line-height: .98;
    letter-spacing: -.05em;
}

.v5-service-copy p {
    max-width: 500px;
    margin: 0 0 21px;
    color: rgba(255,255,255,.73);
    font-size: 13px;
    line-height: 1.65;
}

.v5-service-copy a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 800;
}

.v5-service-copy a span {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--dark);
    background: rgba(255,255,255,.93);
}


/* ---------- TRUST SECTION ---------- */

.v5-trust-section {
    margin: 0 8px clamp(95px, 10vw, 145px);
    padding:
        clamp(65px, 8vw, 110px)
        clamp(22px, 7vw, 105px);
    border-radius: 30px;
    background: #141915;
    color: #fff;
}

.v5-trust-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(250px, .5fr);
    gap: 50px;
    margin-bottom: clamp(50px, 7vw, 85px);
}

.v5-trust-heading .section-label {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.v5-trust-heading h2 {
    grid-column: 1 / -1;
    max-width: 1000px;
    margin: 0;
    font-size: clamp(43px, 5.4vw, 79px);
    line-height: .94;
    letter-spacing: -.055em;
}

.v5-trust-heading h2 span {
    display: block;
    color: rgba(255,255,255,.58);
    font-weight: 330;
}

.v5-trust-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

.v5-trust-grid > div {
    min-height: 220px;
    padding: 28px;
    border-top: 1px solid rgba(255,255,255,.15);
}

.v5-trust-grid span {
    display: block;
    margin-bottom: 42px;
    color: #ff6935;
    font-size: 10px;
    font-weight: 850;
}

.v5-trust-grid strong {
    display: block;
    margin-bottom: 13px;
    font-size: 21px;
    letter-spacing: -.025em;
}

.v5-trust-grid p {
    max-width: 360px;
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    line-height: 1.75;
}


/* ---------- PRODUCT SHOWCASE V5 ---------- */

.product-showcase {
    padding-top: 0;
}

.product-section-head {
    margin-bottom: 34px;
}

.product-section-head h2 {
    font-size: clamp(42px, 4.8vw, 70px);
}

.travel-product-card {
    border-radius: 22px;
    box-shadow: 0 20px 65px rgba(35,29,20,.055);
}

.travel-product-media {
    aspect-ratio: 1.45 / 1;
}

.travel-product-body {
    padding: 20px 21px 22px;
}

.travel-product-body h3 {
    font-size: clamp(22px,1.8vw,29px);
}

.travel-product-body > p {
    min-height: 66px;
}


/* ---------- FINAL CTA ---------- */

.plan-strip {
    margin:
        0
        8px
        8px;
    min-height: 340px;
    padding:
        clamp(55px,7vw,95px)
        clamp(24px,7vw,110px);
    border-radius: 30px;
    background:
        linear-gradient(
            115deg,
            #e5e1d8 0%,
            #eeeae2 100%
        );
}

.plan-strip strong {
    display: block;
    max-width: 980px;
    font-size: clamp(39px,4.8vw,70px);
    line-height: .97;
}


/* ---------- MOBILE ---------- */

@media (max-width: 900px) {

    .v5-intro {
        padding:
            76px
            20px
            72px;
    }

    .v5-intro-kicker {
        grid-template-columns: 1fr auto;
        gap: 15px;
        margin-bottom: 38px;
    }

    .v5-intro-line {
        display: none;
    }

    .v5-intro-grid,
    .v5-section-heading {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .v5-intro h2 {
        font-size: clamp(46px,12vw,66px);
    }

    .v5-intro-copy p {
        font-size: 14px;
    }

    .v5-service-section {
        padding:
            0
            12px
            80px;
    }

    .v5-section-heading {
        padding:
            0
            8px
            32px;
    }

    .v5-section-heading h2 {
        font-size: clamp(40px,11vw,60px);
    }

    .v5-service-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .v5-service-card-large {
        grid-column: auto;
    }

    .v5-service-card {
        min-height: 330px;
        padding: 22px;
        border-radius: 22px;
    }

    .v5-service-copy h3 {
        font-size: 32px;
    }

    .v5-trust-section {
        margin:
            0
            8px
            80px;
        padding:
            62px
            20px;
        border-radius: 24px;
    }

    .v5-trust-heading {
        display: block;
        margin-bottom: 42px;
    }

    .v5-trust-heading h2 {
        font-size: clamp(43px,11vw,62px);
    }

    .v5-trust-grid {
        grid-template-columns: 1fr;
    }

    .v5-trust-grid > div {
        min-height: auto;
        padding:
            26px
            0;
    }

    .v5-trust-grid span {
        margin-bottom: 22px;
    }

    .travel-product-media {
        aspect-ratio: 1.25 / 1;
    }

    .plan-strip {
        min-height: 300px;
    }
}

@media (max-width: 620px) {

    .v5-intro-kicker small {
        font-size: 8px;
    }

    .v5-service-card {
        min-height: 300px;
    }

    .v5-service-copy p {
        max-width: 92%;
        font-size: 12px;
    }

    .product-showcase {
        padding-bottom: 75px;
    }

    .product-section-head h2 {
        font-size: clamp(40px,11.5vw,58px);
    }

    .plan-strip strong {
        font-size: clamp(38px,10.5vw,53px);
    }
}

/* END UI V5A */

/* ==========================================================
   AL BADI — UI V5B TOUR DETAIL ARCHITECTURE
   ========================================================== */

.tour-detail-page {
    background: #f5f3ee;
}


/* ---------- HERO ---------- */

.tour-detail-hero {
    padding: 8px;
}

.tour-detail-image {
    min-height: min(70vh, 720px);
    border-radius: 30px;
}

.tour-detail-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.15) 0%,
            rgba(0,0,0,.03) 34%,
            rgba(0,0,0,.76) 100%
        );
}

.tour-detail-hero-copy {
    left: clamp(24px, 5.5vw, 82px);
    right: clamp(24px, 30vw, 470px);
    bottom: clamp(36px, 5.5vw, 72px);
}

.tour-detail-hero-copy h1 {
    max-width: 1000px;
    font-size: clamp(48px, 6.5vw, 96px);
    line-height: .9;
}

.tour-detail-hero-copy p {
    max-width: 610px;
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.65;
}


/* ---------- MAIN LAYOUT ---------- */

.tour-detail-layout {
    grid-template-columns:
        minmax(0,1fr)
        minmax(320px,400px);
    gap: clamp(38px, 6vw, 90px);
    padding:
        clamp(58px, 7vw, 95px)
        clamp(18px, 6vw, 95px)
        clamp(85px, 9vw, 125px);
}


/* ---------- OVERVIEW ---------- */

.tour-v5-overview {
    padding-bottom: clamp(48px, 6vw, 76px);
}

.tour-v5-overview .section-label {
    margin-bottom: 26px;
}

.tour-v5-overview-grid {
    display: grid;
    grid-template-columns:
        minmax(0,1.05fr)
        minmax(280px,.65fr);
    gap: clamp(35px, 7vw, 95px);
    align-items: end;
}

.tour-v5-overview h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(40px, 4.7vw, 68px);
    line-height: .96;
    letter-spacing: -.055em;
}

.tour-v5-overview h2 span {
    display: block;
    font-weight: 330;
}

.tour-v5-overview p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.tour-v5-support-copy {
    padding-top: 13px;
    border-top: 1px solid rgba(20,20,18,.09);
}


/* ---------- FACTS ---------- */

.tour-facts {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(20,20,18,.08);
    background: #fff;
}

.tour-facts > div {
    padding: 22px;
}

.tour-facts > div + div {
    border-left: 1px solid rgba(20,20,18,.08);
}

.tour-facts strong {
    display: block;
    max-width: 190px;
    font-size: 14px;
    line-height: 1.35;
}


/* ---------- CONTENT SECTIONS ---------- */

.tour-info-section {
    padding-top: clamp(58px, 6vw, 82px);
}

.tour-info-section .section-label {
    margin-bottom: 18px;
}

.tour-info-section h2 {
    max-width: 760px;
    margin: 0 0 30px;
    font-size: clamp(36px, 4vw, 58px);
    line-height: .98;
}

.tour-info-section h2 span {
    display: block;
    font-weight: 330;
}

.tour-highlight-grid {
    gap: 10px;
}

.tour-highlight-item {
    min-height: 96px;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(35,29,20,.025);
}

.tour-highlight-item strong {
    font-size: 13px;
}

.tour-list-numbered {
    padding-left: 0;
    list-style: none;
    counter-reset: tour-step;
}

.tour-list-numbered li {
    position: relative;
    counter-increment: tour-step;
    padding:
        18px
        18px
        18px
        56px;
    border-bottom: 1px solid rgba(20,20,18,.08);
}

.tour-list-numbered li::before {
    content: counter(tour-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 18px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 850;
}

.tour-two-columns > div {
    padding: 24px;
    border-radius: 17px;
}

.tour-two-columns h3 {
    font-size: 20px;
}


/* ---------- BOOKING CARD ---------- */

.tour-booking-card {
    top: 18px;
    padding: 26px;
    border-radius: 22px;
    box-shadow: 0 20px 65px rgba(35,29,20,.07);
}

.tour-booking-card h2 {
    margin: 9px 0 22px;
    font-size: clamp(28px, 2.7vw, 39px);
    line-height: .98;
}

.tour-price {
    padding: 17px 0;
}

.tour-price strong {
    font-size: 23px;
}

.tour-booking-card > p {
    margin: 19px 0;
    font-size: 12px;
    line-height: 1.65;
}


/* ---------- FORM COMPACT ---------- */

.trip-request-form {
    gap: 12px;
    margin-top: 20px;
}

.trip-request-form input,
.trip-request-form textarea {
    padding: 12px 13px;
    border-radius: 10px;
    background: #faf9f6;
}

.trip-request-form textarea {
    min-height: 90px;
}

.trip-addons {
    padding: 13px;
    border-radius: 11px;
}

.trip-request-note {
    font-size: 8px;
}


/* ---------- MOBILE ---------- */

@media (max-width: 900px) {

    .tour-detail-image {
        min-height: 70svh;
    }

    .tour-detail-layout {
        grid-template-columns: 1fr;
        gap: 55px;
        padding:
            58px
            18px
            85px;
    }

    .tour-v5-overview-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .tour-v5-overview h2 {
        font-size: clamp(39px, 10vw, 58px);
    }

    .tour-booking-card {
        position: static;
    }
}

@media (max-width: 620px) {

    .tour-detail-hero {
        padding: 0;
    }

    .tour-detail-image {
        min-height: 72svh;
        border-radius: 0 0 24px 24px;
    }

    .tour-detail-hero-copy {
        left: 18px;
        right: 18px;
        bottom: 30px;
    }

    .tour-detail-hero-copy h1 {
        font-size: clamp(43px, 13vw, 67px);
    }

    .tour-detail-hero-copy p {
        font-size: 12px;
        line-height: 1.58;
    }

    .tour-v5-overview {
        padding-bottom: 44px;
    }

    .tour-v5-overview .section-label {
        margin-bottom: 20px;
    }

    .tour-v5-overview h2 {
        font-size: clamp(38px, 11vw, 54px);
    }

    .tour-v5-overview p {
        font-size: 13px;
    }

    .tour-facts {
        grid-template-columns: 1fr;
        border-radius: 15px;
    }

    .tour-facts > div {
        padding: 18px;
    }

    .tour-facts > div + div {
        border-left: 0;
        border-top: 1px solid rgba(20,20,18,.08);
    }

    .tour-info-section {
        padding-top: 52px;
    }

    .tour-info-section h2 {
        font-size: clamp(35px, 10vw, 50px);
    }

    .tour-highlight-grid,
    .tour-two-columns {
        grid-template-columns: 1fr;
    }

    .tour-highlight-item {
        min-height: auto;
    }

    .tour-booking-card {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .trip-request-row {
        grid-template-columns: 1fr;
    }
}

/* END UI V5B */

/* ==========================================================
   AL BADI — UI V6A MOBILE AUTO CAROUSELS
   ========================================================== */

.mobile-auto-carousel {
    scroll-behavior: smooth;
}

/*
 * Mobile service cards:
 * one premium card + preview of next card.
 */
@media (max-width: 700px) {

    .v5-service-section {
        overflow: hidden;
        padding-left: 0;
        padding-right: 0;
    }

    .v5-section-heading {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 28px;
    }

    .v5-section-heading h2 {
        max-width: 94%;
        font-size: clamp(39px, 10.8vw, 53px);
        line-height: .96;
    }

    .v5-section-heading > p {
        max-width: 92%;
        font-size: 13px;
        line-height: 1.7;
    }

    .v5-service-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;

        margin: 0;
        padding:
            0
            20px
            12px;

        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .v5-service-grid::-webkit-scrollbar {
        display: none;
    }

    .v5-service-card,
    .v5-service-card-large {
        flex:
            0
            0
            min(84vw, 355px);

        min-height: 420px;
        grid-column: auto;

        border-radius: 24px;
        scroll-snap-align: start;
        scroll-snap-stop: always;

        box-shadow:
            0
            18px
            46px
            rgba(29,25,19,.10);
    }

    .v5-service-copy {
        max-width: 95%;
    }

    .v5-service-copy h3 {
        margin-bottom: 11px;
        font-size: 31px;
        line-height: .98;
    }

    .v5-service-copy p {
        max-width: 95%;
        margin-bottom: 18px;
        font-size: 12.5px;
        line-height: 1.6;
    }

    .v5-service-copy a {
        font-size: 11px;
    }


    /*
     * Tours + Safaris:
     * clean card, same visual rhythm as reference.
     */
    .product-showcase {
        overflow: hidden;
        padding-left: 0;
        padding-right: 0;
    }

    .product-section-head {
        padding-left: 20px;
        padding-right: 20px;
    }

    .product-section-head > p {
        max-width: 92%;
        font-size: 13px;
        line-height: 1.65;
    }

    .product-grid,
    .product-grid-safaris {
        display: flex;
        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        margin:
            0
            0
            0;

        padding:
            0
            20px
            13px;

        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .product-grid::-webkit-scrollbar,
    .product-grid-safaris::-webkit-scrollbar {
        display: none;
    }

    .travel-product-card {
        flex:
            0
            0
            min(85vw, 360px);

        scroll-snap-align: start;
        scroll-snap-stop: always;

        border-radius: 23px;
        overflow: hidden;

        border: 1px solid rgba(25,22,18,.055);

        box-shadow:
            0
            18px
            46px
            rgba(29,25,19,.075);
    }

    .travel-product-media {
        aspect-ratio: 1.28 / 1;
    }

    .travel-product-body {
        padding:
            18px
            18px
            17px;
    }

    .travel-product-meta {
        margin-bottom: 9px;
        gap: 6px 12px;

        font-size: 9px;
    }

    .travel-product-body h3 {
        margin-bottom: 10px;

        font-size: 25px;
        line-height: 1.02;
    }

    .travel-product-body > p {
        min-height: 61px;

        font-size: 12.5px;
        line-height: 1.6;

        -webkit-line-clamp: 3;
    }

    .travel-product-foot {
        margin-top: 18px;
        padding-top: 15px;
    }

    .travel-product-foot strong,
    .travel-product-foot a {
        font-size: 10.5px;
    }

    .travel-product-badge {
        top: 13px;
        left: 13px;

        padding: 7px 10px;

        font-size: 8px;
    }

}


/*
 * Small phones
 */
@media (max-width: 390px) {

    .v5-service-card,
    .v5-service-card-large,
    .travel-product-card {
        flex-basis: 86vw;
    }

    .v5-service-card {
        min-height: 395px;
    }

    .travel-product-body h3 {
        font-size: 23px;
    }
}

/* END UI V6A */

/* ==========================================================
   AL BADI — UI V6B MOBILE POLISH
   ========================================================== */

@media (max-width: 700px) {

    /*
     * Overall section rhythm
     */
    .v5-intro {
        padding-bottom: 58px;
    }

    .v5-service-section {
        padding-bottom: 62px;
    }

    .product-showcase {
        padding-bottom: 56px;
    }

    .product-section-head {
        margin-bottom: 25px;
    }

    /*
     * Services cards
     */
    .v5-service-card,
    .v5-service-card-large {
        flex-basis: min(82vw, 350px);
        min-height: 390px;
    }

    .v5-service-copy h3 {
        font-size: 29px;
    }

    .v5-service-copy p {
        font-size: 12px;
        line-height: 1.55;
    }

    /*
     * Tour + safari cards:
     * keep width premium but reduce unnecessary height.
     */
    .travel-product-card {
        flex-basis: min(83vw, 350px);
    }

    .travel-product-media {
        aspect-ratio: 1.45 / 1;
    }

    .travel-product-body {
        padding:
            17px
            17px
            16px;
    }

    .travel-product-body h3 {
        font-size: 23px;
        line-height: 1.03;
        margin-bottom: 9px;
    }

    .travel-product-body > p {
        min-height: 50px;
        font-size: 12px;
        line-height: 1.55;
        -webkit-line-clamp: 2;
    }

    .travel-product-meta {
        margin-bottom: 8px;
    }

    .travel-product-foot {
        margin-top: 14px;
        padding-top: 13px;
    }

    /*
     * Trust section
     */
    .v5-trust-section {
        margin-bottom: 65px;
        padding-top: 54px;
        padding-bottom: 52px;
    }

    .v5-trust-heading {
        margin-bottom: 34px;
    }

    .v5-trust-heading h2 {
        font-size: clamp(39px, 10vw, 52px);
        line-height: .98;
    }

    .v5-trust-grid > div {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    /*
     * Final CTA spacing
     */
    .plan-strip {
        min-height: 260px;
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

@media (max-width: 390px) {

    .v5-service-card,
    .v5-service-card-large {
        flex-basis: 84vw;
        min-height: 375px;
    }

    .travel-product-card {
        flex-basis: 84vw;
    }

    .travel-product-media {
        aspect-ratio: 1.4 / 1;
    }

    .travel-product-body h3 {
        font-size: 22px;
    }
}

/* END UI V6B */

/* ==========================================================
   AL BADI — UI V6C PREMIUM PRODUCT CARDS
   ========================================================== */

.travel-product-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(21, 20, 18, .06);
    border-radius: 24px;

    box-shadow:
        0 18px 55px rgba(32, 27, 20, .055);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.travel-product-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 26px 70px rgba(32, 27, 20, .09);

    border-color:
        rgba(255, 105, 53, .16);
}


/* ---------- IMAGE ---------- */

.travel-product-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.45 / 1;
    background: #e7e3dc;
}

.travel-product-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1);
}

.travel-product-card:hover
.travel-product-media img {
    transform: scale(1.045);
}

.travel-product-media::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8,8,7,.04) 0%,
            rgba(8,8,7,0) 52%,
            rgba(8,8,7,.14) 100%
        );

    pointer-events: none;
}


/* ---------- BADGE ---------- */

.travel-product-badge {
    top: 16px;
    left: 16px;

    padding: 8px 11px;

    border-radius: 999px;

    background:
        rgba(22, 25, 22, .82);

    color: #fff;

    backdrop-filter: blur(10px);

    font-size: 8px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}


/* ---------- BODY ---------- */

.travel-product-body {
    padding:
        23px
        24px
        21px;
}

.travel-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 13px;

    margin-bottom: 12px;

    color: #756f66;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.travel-product-meta span {
    position: relative;
}

.travel-product-meta span + span::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;

    width: 3px;
    height: 3px;

    border-radius: 50%;
    background: #ff6935;

    transform: translateY(-50%);
}

.travel-product-body h3 {
    margin:
        0
        0
        12px;

    color: #11120f;

    font-size: clamp(25px, 2vw, 32px);
    line-height: 1.02;
    letter-spacing: -.042em;
}

.travel-product-body > p {
    margin: 0;

    min-height: 64px;

    color: #777067;

    font-size: 13px;
    line-height: 1.66;
}


/* ---------- FOOTER ---------- */

.travel-product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-top: 21px;
    padding-top: 17px;

    border-top:
        1px solid rgba(20,20,18,.085);
}

.travel-product-foot strong {
    color: #151511;

    font-size: 11px;
    font-weight: 800;
}

.travel-product-foot a {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #151511;

    font-size: 10.5px;
    font-weight: 850;
}

.travel-product-foot a::after {
    content: "↗";

    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #11120f;
    background: #ff6935;

    font-size: 12px;

    transition:
        transform .2s ease,
        background .2s ease;
}

.travel-product-foot a:hover::after {
    transform: translate(2px,-2px);
    background: #ff7b4a;
}


/* ---------- FEATURED PRODUCT EMPHASIS ---------- */

.product-grid
.travel-product-card:first-child {
    border-color:
        rgba(255,105,53,.12);
}


/* ---------- SECTION TIGHTENING ---------- */

.product-section-head {
    align-items: end;
}

.product-section-head h2 {
    max-width: 850px;
}

.product-section-head > p {
    max-width: 500px;
}


/* ---------- DESKTOP ---------- */

@media (min-width: 901px) {

    .product-grid {
        gap: 16px;
    }

    .travel-product-card {
        min-height: 100%;
    }

    .travel-product-body {
        display: flex;
        flex-direction: column;
        min-height: 245px;
    }

    .travel-product-foot {
        margin-top: auto;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .travel-product-card {
        border-radius: 22px;

        box-shadow:
            0 16px 44px rgba(32,27,20,.07);
    }

    .travel-product-media {
        aspect-ratio: 1.5 / 1;
    }

    .travel-product-badge {
        top: 13px;
        left: 13px;

        padding:
            7px
            10px;
    }

    .travel-product-body {
        padding:
            17px
            17px
            16px;
    }

    .travel-product-meta {
        gap: 6px 12px;
        margin-bottom: 9px;
    }

    .travel-product-body h3 {
        margin-bottom: 9px;

        font-size: 22px;
        line-height: 1.04;
    }

    .travel-product-body > p {
        min-height: 46px;

        font-size: 12px;
        line-height: 1.55;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .travel-product-foot {
        margin-top: 14px;
        padding-top: 13px;
    }

    .travel-product-foot strong {
        font-size: 10.5px;
    }

    .travel-product-foot a {
        gap: 7px;
        font-size: 10px;
    }

    .travel-product-foot a::after {
        width: 29px;
        height: 29px;
    }
}


/* ---------- VERY SMALL MOBILE ---------- */

@media (max-width: 390px) {

    .travel-product-body h3 {
        font-size: 21px;
    }

    .travel-product-foot {
        gap: 8px;
    }
}

/* END UI V6C */

/* ==========================================================
   AL BADI — UI V6D SPACING & COMPOSITION
   ========================================================== */

/*
 * Global homepage rhythm
 */

.v5-intro {
    padding-top:
        clamp(72px, 7vw, 104px);

    padding-bottom:
        clamp(62px, 6.5vw, 92px);
}

.v5-intro-kicker {
    margin-bottom:
        clamp(34px, 4vw, 54px);
}

.v5-intro-grid {
    gap:
        clamp(42px, 7vw, 105px);
}

.v5-intro-copy p:last-of-type {
    margin-bottom: 24px;
}


/*
 * Services section
 */

.v5-service-section {
    padding-bottom:
        clamp(75px, 8vw, 110px);
}

.v5-section-heading {
    padding-bottom:
        clamp(30px, 4vw, 46px);
}

.v5-section-heading h2 {
    max-width: 930px;
}

.v5-service-grid {
    gap: 14px;
}


/*
 * Better desktop composition:
 * 01 large
 * 02 supporting card
 * 03 / 04 / 05 equal
 * 06 full-width closing card
 */

@media (min-width: 901px) {

    .v5-service-grid {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }

    .v5-service-card {
        min-height: 390px;
    }

    .v5-service-card:nth-child(1) {
        grid-column: span 4;
    }

    .v5-service-card:nth-child(2) {
        grid-column: span 2;
    }

    .v5-service-card:nth-child(3),
    .v5-service-card:nth-child(4),
    .v5-service-card:nth-child(5) {
        grid-column: span 2;
    }

    .v5-service-card:nth-child(6) {
        grid-column: span 6;
        min-height: 310px;
    }

    .v5-service-card:nth-child(6)
    .v5-service-copy {
        max-width: 620px;
    }

    .v5-service-card:nth-child(6)
    .v5-service-copy h3 {
        font-size:
            clamp(36px, 3.5vw, 54px);
    }

}


/*
 * Trust section
 */

.v5-trust-section {
    margin-bottom:
        clamp(76px, 8vw, 110px);

    padding-top:
        clamp(65px, 7vw, 92px);

    padding-bottom:
        clamp(62px, 7vw, 88px);
}

.v5-trust-heading {
    margin-bottom:
        clamp(42px, 5vw, 64px);
}

.v5-trust-grid > div {
    min-height: 190px;
}


/*
 * Product sections
 */

.product-showcase {
    padding-top: 0;

    padding-bottom:
        clamp(72px, 8vw, 108px);
}

.product-section-head {
    margin-bottom:
        clamp(28px, 3vw, 40px);
}

.product-section-head h2 {
    margin-bottom: 0;
}

.product-grid {
    gap: 16px;
}


/*
 * Prevent excessive vertical gaps
 * between excursions and safari sections.
 */

#live-experiences + .product-showcase,
.product-showcase + .product-showcase {
    padding-top:
        clamp(12px, 2vw, 28px);
}


/*
 * Final planning CTA
 */

.plan-strip {
    margin-top:
        clamp(4px, 1vw, 15px);

    margin-bottom: 8px;

    min-height: 300px;
}


/*
 * Tour detail global rhythm
 */

.tour-detail-layout {
    padding-top:
        clamp(50px, 6vw, 78px);

    padding-bottom:
        clamp(75px, 8vw, 110px);
}

.tour-v5-overview {
    padding-bottom:
        clamp(40px, 5vw, 60px);
}

.tour-info-section {
    padding-top:
        clamp(48px, 5vw, 66px);
}


/*
 * Mobile rhythm
 */

@media (max-width: 700px) {

    .v5-intro {
        padding:
            60px
            20px
            52px;
    }

    .v5-intro-kicker {
        margin-bottom: 30px;
    }

    .v5-intro-grid {
        gap: 25px;
    }

    .v5-intro-copy p {
        margin-bottom: 14px;
    }

    .v5-service-section {
        padding-bottom: 54px;
    }

    .v5-section-heading {
        padding-bottom: 24px;
    }

    .v5-service-grid {
        gap: 11px;
    }

    .v5-trust-section {
        margin-top: 0;
        margin-bottom: 54px;

        padding-top: 48px;
        padding-bottom: 46px;
    }

    .v5-trust-heading {
        margin-bottom: 28px;
    }

    .product-showcase {
        padding-bottom: 50px;
    }

    .product-section-head {
        margin-bottom: 22px;
    }

    #live-experiences + .product-showcase,
    .product-showcase + .product-showcase {
        padding-top: 0;
    }

    .plan-strip {
        min-height: 245px;
        margin-top: 0;
    }

    .tour-detail-layout {
        padding-top: 48px;
        padding-bottom: 74px;
    }

    .tour-v5-overview {
        padding-bottom: 38px;
    }

    .tour-info-section {
        padding-top: 45px;
    }

}


/*
 * Small phones
 */

@media (max-width: 390px) {

    .v5-intro {
        padding-top: 54px;
        padding-bottom: 48px;
    }

    .v5-service-section {
        padding-bottom: 48px;
    }

    .product-showcase {
        padding-bottom: 46px;
    }

}

/* END UI V6D */

/* ==========================================================
   AL BADI — UI V6E REFERENCE-STYLE TOUR / SAFARI CARDS
   ========================================================== */

/*
 * Reference direction:
 * image
 * small destination/meta
 * title
 * full-width orange price/action strip
 */

.travel-product-card {
    overflow: visible;

    background: transparent;
    border: 0;
    border-radius: 0;

    box-shadow: none;

    transition: none;
}

.travel-product-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}


/* ---------- IMAGE ---------- */

.travel-product-media {
    aspect-ratio: 1.62 / 1;

    overflow: hidden;

    border-radius: 22px;

    background: #e5e1d8;
}

.travel-product-media img {
    border-radius: inherit;
}

.travel-product-media::after {
    background:
        linear-gradient(
            180deg,
            rgba(7,8,7,.02) 0%,
            rgba(7,8,7,.08) 100%
        );
}

.travel-product-card:hover
.travel-product-media img {
    transform: scale(1.025);
}


/*
 * Reference doesn't use the large category badge.
 * Keep category information in metadata instead.
 */
.travel-product-badge {
    display: none;
}


/* ---------- TEXT AREA ---------- */

.travel-product-body {
    min-height: 0 !important;

    padding:
        11px
        2px
        0;
}

.travel-product-meta {
    position: relative;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px 10px;

    margin:
        0
        0
        6px;

    padding-left: 15px;

    color: #716b62;

    font-size: 8.5px;
    font-weight: 650;
    letter-spacing: .015em;
    text-transform: none;
}


/*
 * Small orange location mark, inspired by reference.
 */
.travel-product-meta::before {
    content: "";

    position: absolute;
    left: 1px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f87916;

    transform: translateY(-50%);

    box-shadow:
        0 0 0 3px rgba(248,121,22,.10);
}


.travel-product-meta span + span::before {
    display: none;
}


.travel-product-body h3 {
    margin:
        0
        0
        11px;

    color: #171715;

    font-size: clamp(20px, 1.65vw, 25px);
    line-height: 1.05;
    letter-spacing: -.033em;

    font-weight: 760;
}


/*
 * Reference cards are intentionally compact.
 * Full descriptive copy remains on detail page.
 */
.travel-product-body > p {
    display: none;
}


/* ---------- ORANGE ACTION STRIP ---------- */

.travel-product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    gap: 16px;

    margin: 0;
    padding:
        8px
        13px
        8px
        14px;

    border: 0;
    border-radius: 999px;

    background: #f87916;

    color: #fff;

    min-height: 40px;

    box-shadow:
        0 7px 16px rgba(248,121,22,.15);
}


.travel-product-foot strong {
    color: #fff;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}


.travel-product-foot a {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #fff;

    font-size: 9.5px;
    font-weight: 700;

    white-space: nowrap;
}


/*
 * Remove old circular orange arrow.
 * Arrow now lives naturally inside orange strip.
 */
.travel-product-foot a::after {
    content: "›";

    display: inline;

    width: auto;
    height: auto;

    border-radius: 0;

    color: #fff;
    background: transparent;

    font-size: 17px;
    line-height: 1;

    transform: none;
}


.travel-product-foot a:hover::after {
    transform: translateX(2px);
    background: transparent;
}


/* ---------- PRODUCT GRID ---------- */

@media (min-width: 901px) {

    .product-grid {
        gap:
            clamp(18px, 2vw, 28px);
    }

    .travel-product-card {
        min-height: 0;
    }

    .travel-product-body {
        display: block;
    }
}


/* ---------- MOBILE CAROUSEL ---------- */

@media (max-width: 700px) {

    .travel-product-card {
        flex-basis:
            min(78vw, 335px);

        border-radius: 0;

        box-shadow: none;
    }

    .travel-product-media {
        aspect-ratio: 1.5 / 1;

        border-radius: 21px;
    }

    .travel-product-body {
        padding:
            10px
            1px
            0;
    }

    .travel-product-meta {
        margin-bottom: 6px;

        font-size: 8.5px;
    }

    .travel-product-body h3 {
        margin-bottom: 10px;

        font-size: 21px;
    }

    .travel-product-foot {
        min-height: 39px;

        padding:
            8px
            12px
            8px
            13px;
    }

    .travel-product-foot strong {
        font-size: 9.5px;
    }

    .travel-product-foot a {
        font-size: 9px;
    }
}


@media (max-width: 390px) {

    .travel-product-card {
        flex-basis: 80vw;
    }

    .travel-product-body h3 {
        font-size: 20px;
    }
}

/* END UI V6E */

/* =====================================================
   UI V6F — CARD IMAGE SHAPE POLISH
   Zanzibar excursions:
   - square top-left
   - rounded top-right
   - rounded bottom-left
   - square bottom-right

   Tanzania safaris:
   - rounded top-left
   - rounded top-right
   - square bottom-left
   - square bottom-right
   ===================================================== */

.product-grid-excursions .travel-product-media,
.product-grid-excursions .travel-product-media img,
.product-grid-excursions .travel-product-media::after {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 28px !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 28px !important;
}

.product-grid-safaris .travel-product-media,
.product-grid-safaris .travel-product-media img,
.product-grid-safaris .travel-product-media::after {
    border-top-left-radius: 28px !important;
    border-top-right-radius: 28px !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Keep shape a bit tighter on smaller screens */
@media (max-width: 768px) {
    .product-grid-excursions .travel-product-media,
    .product-grid-excursions .travel-product-media img,
    .product-grid-excursions .travel-product-media::after {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 22px !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 22px !important;
    }

    .product-grid-safaris .travel-product-media,
    .product-grid-safaris .travel-product-media img,
    .product-grid-safaris .travel-product-media::after {
        border-top-left-radius: 22px !important;
        border-top-right-radius: 22px !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
}

/* =====================================================
   UI V6G — STRONGER CORNER ROUND REFINEMENT
   ===================================================== */

/*
 * EXCURSIONS
 * Keep:
 * - top-left square
 * - bottom-right square
 *
 * Increase round:
 * - top-right
 * - bottom-left
 */
.product-grid-excursions .travel-product-media,
.product-grid-excursions .travel-product-media img,
.product-grid-excursions .travel-product-media::after {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 42px !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 42px !important;
}


/*
 * SAFARIS
 * Keep bottom corners square.
 * Increase both top rounded corners more strongly.
 */
.product-grid-safaris .travel-product-media,
.product-grid-safaris .travel-product-media img,
.product-grid-safaris .travel-product-media::after {
    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}


/* Mobile tuning */
@media (max-width: 768px) {

    .product-grid-excursions .travel-product-media,
    .product-grid-excursions .travel-product-media img,
    .product-grid-excursions .travel-product-media::after {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 34px !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 34px !important;
    }

    .product-grid-safaris .travel-product-media,
    .product-grid-safaris .travel-product-media img,
    .product-grid-safaris .travel-product-media::after {
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
}

/* END UI V6G */

/* ==========================================================
   AL BADI — UI V6H CONTENT WIDTH + ENTRANCE MOTION
   Hero intentionally excluded.
   ========================================================== */

:root {
    --albadi-content-max: 1480px;
    --albadi-content-gutter: clamp(22px, 5.5vw, 88px);
}


/* ----------------------------------------------------------
   ONE CONSISTENT WIDTH BELOW HERO
   ---------------------------------------------------------- */

.v5-intro,
.v5-service-section,
.product-showcase {
    width: min(
        calc(100% - 32px),
        var(--albadi-content-max)
    );

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/*
 * Dark trust block and final CTA:
 * same outer width as the other content sections.
 */
.v5-trust-section,
.plan-strip {
    width: min(
        calc(100% - 32px),
        var(--albadi-content-max)
    );

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box;
}


/*
 * Intro: use identical inner horizontal rhythm.
 */
.v5-intro {
    padding-left: var(--albadi-content-gutter);
    padding-right: var(--albadi-content-gutter);
}


/*
 * Service section already owns cards,
 * so align heading and card rail to same visual axis.
 */
.v5-service-section {
    padding-left: 0;
    padding-right: 0;
}

.v5-section-heading {
    padding-left: var(--albadi-content-gutter);
    padding-right: var(--albadi-content-gutter);
}

.v5-service-grid {
    margin-left: var(--albadi-content-gutter);
    margin-right: var(--albadi-content-gutter);
}


/*
 * Product sections:
 * title and product grid share exactly one content axis.
 */
.product-showcase {
    padding-left: var(--albadi-content-gutter);
    padding-right: var(--albadi-content-gutter);
}

.product-section-head,
.product-grid,
.product-grid-safaris {
    width: 100%;
    box-sizing: border-box;
}


/*
 * Trust section internal spacing.
 */
.v5-trust-section {
    padding-left: var(--albadi-content-gutter);
    padding-right: var(--albadi-content-gutter);
}


/*
 * Final planning CTA.
 */
.plan-strip {
    padding-left: var(--albadi-content-gutter);
    padding-right: var(--albadi-content-gutter);
}


/* ----------------------------------------------------------
   ENTRANCE ANIMATION SYSTEM
   ---------------------------------------------------------- */

.albadi-reveal {
    opacity: 1;
    transform: none;
}


/*
 * Only hide items once JS explicitly enables motion.
 * This prevents blank content if JS ever fails.
 */
html.albadi-motion-ready .albadi-reveal:not(.is-visible) {
    opacity: 0;

    transform:
        translate3d(
            0,
            32px,
            0
        );

    transition:
        opacity
        .72s
        cubic-bezier(.22,.61,.36,1),

        transform
        .82s
        cubic-bezier(.22,.61,.36,1);

    transition-delay:
        var(--reveal-delay, 0ms);

    will-change:
        opacity,
        transform;
}


html.albadi-motion-ready .albadi-reveal.is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


/*
 * Headings enter slightly softer.
 */
html.albadi-motion-ready
.albadi-reveal.reveal-heading:not(.is-visible) {
    transform:
        translate3d(
            0,
            24px,
            0
        );
}


/*
 * Cards use slightly shorter travel.
 */
html.albadi-motion-ready
.albadi-reveal.reveal-card:not(.is-visible) {
    transform:
        translate3d(
            0,
            20px,
            0
        );
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    :root {
        --albadi-content-gutter: 22px;
    }

    .v5-intro,
    .v5-service-section,
    .product-showcase,
    .v5-trust-section,
    .plan-strip {
        width: min(
            calc(100% - 20px),
            var(--albadi-content-max)
        );
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    :root {
        --albadi-content-gutter: 18px;
    }

    .v5-intro,
    .v5-service-section,
    .product-showcase,
    .v5-trust-section,
    .plan-strip {
        width: calc(100% - 16px);
    }


    /*
     * Carousel rails need edge-to-edge swipe,
     * but headings remain aligned to 18px.
     */
    .v5-service-grid {
        margin-left: 0;
        margin-right: 0;

        padding-left: 18px;
        padding-right: 18px;
    }


    .product-showcase {
        padding-left: 0;
        padding-right: 0;
    }

    .product-section-head {
        padding-left: 18px;
        padding-right: 18px;
    }

    .product-grid,
    .product-grid-safaris {
        padding-left: 18px;
        padding-right: 18px;
    }


    /*
     * Keep entrance motion elegant on smaller screens.
     */
    html.albadi-motion-ready
    .albadi-reveal:not(.is-visible) {
        transform:
            translate3d(
                0,
                20px,
                0
            );

        transition-duration:
            .62s;
    }

}


/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .albadi-reveal,
    html.albadi-motion-ready
    .albadi-reveal,
    html.albadi-motion-ready
    .albadi-reveal:not(.is-visible),
    html.albadi-motion-ready
    .albadi-reveal.is-visible {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }

}

/* END UI V6H */

/* ==========================================================
   AL BADI — UI V6I PREMIUM HEADER + MOBILE MENU
   ========================================================== */

.desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 30px);
}

.desktop-nav a {
    position: relative;
    font-size: 11px;
    font-weight: 720;
    opacity: .74;
    transition:
        opacity .2s ease,
        transform .2s ease;
}

.desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 1px;
    background: #fff;
    transition: right .25s ease;
}

.desktop-nav a:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.desktop-nav a:hover::after {
    right: 0;
}

.header-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(14px);
}


/* ---------- MOBILE MENU ---------- */

.mobile-menu {
    position: fixed;
    z-index: 200;
    inset: 0;

    display: flex;
    justify-content: flex-end;

    visibility: hidden;
    pointer-events: none;

    background: rgba(10,13,11,0);

    transition:
        background .34s ease,
        visibility .34s ease;
}

.mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
    background: rgba(10,13,11,.55);
}

.mobile-menu-panel {
    width: min(92vw, 430px);
    height: 100%;

    display: flex;
    flex-direction: column;

    padding:
        calc(26px + env(safe-area-inset-top))
        24px
        calc(25px + env(safe-area-inset-bottom));

    background: #111713;
    color: #fff;

    transform: translateX(102%);

    transition:
        transform .42s
        cubic-bezier(.22,.61,.36,1);
}

.mobile-menu.is-open .mobile-menu-panel {
    transform: translateX(0);
}

.mobile-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 26px;

    border-bottom:
        1px solid rgba(255,255,255,.12);
}

.mobile-menu-top > span {
    color: rgba(255,255,255,.55);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mobile-menu-close {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;

    background: transparent;
    color: #fff;

    font-size: 23px;
    line-height: 1;
}

.mobile-menu-nav {
    display: grid;

    margin-top: 28px;
}

.mobile-menu-nav a {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;

    min-height: 68px;

    border-bottom:
        1px solid rgba(255,255,255,.10);

    color: #fff;

    font-size: clamp(25px, 7vw, 34px);
    font-weight: 690;
    letter-spacing: -.04em;
}

.mobile-menu-nav a span {
    color: #ff6935;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
}

.mobile-menu-footer {
    margin-top: auto;
    padding-top: 30px;
}

.mobile-menu-footer p {
    max-width: 330px;

    margin:
        0
        0
        22px;

    color: rgba(255,255,255,.55);

    font-size: 12px;
    line-height: 1.7;
}

.mobile-menu-cta {
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0
        18px;

    border-radius: 999px;

    background: #ff6935;
    color: #11130f;

    font-size: 11px;
    font-weight: 850;
}

.mobile-menu-cta span {
    font-size: 17px;
}

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


/* ---------- MENU BUTTON OPEN STATE ---------- */

.menu-button[aria-expanded="true"] span:first-child {
    transform: translateY(3.25px) rotate(45deg);
}

.menu-button[aria-expanded="true"] span:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
}

.menu-button span {
    transition:
        transform .25s ease;
}


/* ---------- FINAL CTA ---------- */

.plan-strip {
    position: relative;
    overflow: hidden;
}

.plan-strip::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: 8%;
    top: -45%;

    border-radius: 50%;

    background:
        rgba(255,255,255,.35);

    filter: blur(1px);
}

.plan-strip > * {
    position: relative;
    z-index: 1;
}

.plan-strip small {
    display: block;
    margin-bottom: 16px;

    color: #777168;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* menu is mobile/tablet only */
@media (min-width: 901px) {
    .mobile-menu {
        display: none;
    }
}

@media (max-width: 900px) {
    .mobile-menu {
        display: flex;
    }
}

/* END UI V6I */

/* ==========================================================
   AL BADI — UI V6J HOMEPAGE CONTENT + FOOTER
   ========================================================== */


/* ==========================================================
   JOURNEY PROCESS
   ========================================================== */

.journey-process {
    width: min(100% - 48px, 1320px);
    margin: 0 auto;

    padding:
        clamp(88px, 9vw, 138px)
        0;
}

.journey-process-head {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, .55fr);

    gap: clamp(42px, 8vw, 125px);

    align-items: end;

    margin-bottom:
        clamp(46px, 6vw, 76px);
}

.journey-process-head h2,
.destination-editorial-head h2,
.faq-preview-head h2,
.about-editorial-copy h2 {
    margin:
        10px
        0
        0;

    font-size:
        clamp(44px, 5vw, 76px);

    line-height: .94;
    letter-spacing: -.055em;

    color: #171715;
}

.journey-process-head h2 span,
.destination-editorial-head h2 span,
.faq-preview-head h2 span,
.about-editorial-copy h2 span {
    display: block;

    color: #878076;

    font-weight: 450;
}

.journey-process-head > p,
.destination-editorial-head > p {
    margin: 0;

    max-width: 470px;

    color: #69645d;

    font-size: 15px;
    line-height: 1.75;
}

.journey-steps {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid rgba(28,27,24,.14);
}

.journey-steps article {
    position: relative;

    min-height: 290px;

    padding:
        26px
        25px
        30px
        0;

    border-right:
        1px solid rgba(28,27,24,.11);
}

.journey-steps article:not(:first-child) {
    padding-left: 25px;
}

.journey-steps article:last-child {
    border-right: 0;
}

.journey-steps article > span {
    display: block;

    margin-bottom: 70px;

    color: #f87916;

    font-size: 12px;
    font-weight: 800;
}

.journey-steps small {
    display: block;

    margin-bottom: 9px;

    color: #817a70;

    font-size: 9px;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.journey-steps h3 {
    margin:
        0
        0
        11px;

    max-width: 240px;

    color: #171715;

    font-size: 23px;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.journey-steps p {
    margin: 0;

    max-width: 250px;

    color: #716b63;

    font-size: 13px;
    line-height: 1.65;
}


/* ==========================================================
   ABOUT
   ========================================================== */

.about-editorial {
    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(0, .98fr);

    width: min(100% - 48px, 1320px);

    margin:
        0
        auto
        clamp(92px, 10vw, 150px);

    background: #f1eee7;

    border-radius: 34px;

    overflow: hidden;
}

.about-editorial-media {
    position: relative;

    min-height: 690px;

    overflow: hidden;
}

.about-editorial-media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02),
            rgba(0,0,0,.12)
        );
}

.about-editorial-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.about-editorial-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(56px, 6vw, 95px);
}

.about-editorial-copy h2 {
    font-size:
        clamp(42px, 4.5vw, 67px);

    margin-bottom: 30px;
}

.about-editorial-copy p {
    margin:
        0
        0
        18px;

    max-width: 570px;

    color: #69645d;

    font-size: 14px;
    line-height: 1.75;
}

.about-editorial-copy .about-lead {
    color: #25231f;

    font-size: 17px;
    line-height: 1.65;
}

.about-points {
    display: grid;

    gap: 0;

    margin:
        25px
        0
        32px;

    border-top:
        1px solid rgba(30,28,24,.12);
}

.about-points > div {
    display: grid;

    grid-template-columns:
        minmax(150px, .62fr)
        minmax(0, 1fr);

    gap: 28px;

    padding:
        17px
        0;

    border-bottom:
        1px solid rgba(30,28,24,.12);
}

.about-points strong {
    color: #1d1b18;

    font-size: 12px;
}

.about-points span {
    color: #706a61;

    font-size: 12px;
    line-height: 1.6;
}

.editorial-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    color: #171715;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.editorial-link span {
    display: grid;

    place-items: center;

    width: 31px;
    height: 31px;

    border-radius: 50%;

    background: #f87916;

    color: #fff;
}


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

.destination-editorial {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto;

    padding-bottom:
        clamp(92px, 10vw, 150px);
}

.destination-editorial-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, .55fr);

    gap: clamp(42px, 8vw, 125px);

    align-items: end;

    margin-bottom:
        clamp(40px, 5vw, 64px);
}

.destination-editorial-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 14px;
}

.destination-tile {
    position: relative;

    grid-column: span 3;

    min-height: 510px;

    overflow: hidden;

    border-radius: 28px;

    background-image:
        var(--destination-image);

    background-size: cover;
    background-position: center;

    color: #fff;

    text-decoration: none;
}

.destination-tile-wide {
    grid-column: span 3;
}

.destination-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,8,7,.08) 15%,
            rgba(7,8,7,.22) 52%,
            rgba(7,8,7,.79) 100%
        );
}

.destination-top {
    position: absolute;

    top: 24px;
    left: 24px;
    right: 24px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    z-index: 2;
}

.destination-top small,
.destination-top span {
    font-size: 9px;
    font-weight: 750;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.destination-top span {
    padding:
        7px
        10px;

    border:
        1px solid rgba(255,255,255,.45);

    border-radius: 999px;

    backdrop-filter: blur(8px);
}

.destination-copy {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 26px;

    z-index: 2;
}

.destination-copy h3 {
    margin:
        0
        0
        10px;

    max-width: 460px;

    color: #fff;

    font-size:
        clamp(30px, 3.2vw, 49px);

    line-height: .97;
    letter-spacing: -.045em;
}

.destination-copy p {
    max-width: 480px;

    margin:
        0
        0
        18px;

    color: rgba(255,255,255,.82);

    font-size: 12.5px;
    line-height: 1.6;
}

.destination-copy strong {
    font-size: 10px;

    color: #fff;

    text-transform: uppercase;
    letter-spacing: .08em;
}


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

.faq-preview {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto;

    padding:
        clamp(76px, 8vw, 110px)
        clamp(34px, 5vw, 70px);

    border-radius: 34px;

    background: #171715;

    color: #fff;
}

.faq-preview-head {
    margin-bottom:
        clamp(42px, 6vw, 68px);
}

.faq-preview-head .section-label {
    color: #f87916;
}

.faq-preview-head h2 {
    color: #fff;
}

.faq-preview-head h2 span {
    color: #85817a;
}

.faq-preview-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 55px;
}

.faq-preview details {
    border-top:
        1px solid rgba(255,255,255,.17);
}

.faq-preview details:last-child,
.faq-preview details:nth-last-child(2) {
    border-bottom:
        1px solid rgba(255,255,255,.17);
}

.faq-preview summary {
    display: grid;

    grid-template-columns:
        1fr
        auto;

    gap: 20px;

    align-items: center;

    padding:
        24px
        0;

    cursor: pointer;

    color: #fff;

    list-style: none;

    font-size: 14px;
    font-weight: 650;
}

.faq-preview summary::-webkit-details-marker {
    display: none;
}

.faq-preview summary span {
    display: grid;

    place-items: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.35);

    color: #f87916;

    transition:
        transform .25s ease;
}

.faq-preview details[open] summary span {
    transform: rotate(45deg);
}

.faq-preview details p {
    max-width: 550px;

    margin:
        -6px
        45px
        24px
        0;

    color: rgba(255,255,255,.63);

    font-size: 12.5px;
    line-height: 1.7;
}

.faq-preview-action {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 24px;

    margin-top: 39px;
}

.faq-preview-action span {
    color: rgba(255,255,255,.55);

    font-size: 11px;
}

.faq-preview-action a {
    color: #fff;

    font-size: 11px;
    font-weight: 750;

    text-decoration: none;
}


/* ==========================================================
   FINAL CTA REBALANCE AFTER FAQ
   ========================================================== */

.faq-preview + .plan-strip {
    margin-top:
        clamp(22px, 3vw, 42px);
}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
    margin-top:
        clamp(60px, 7vw, 100px);

    padding:
        clamp(64px, 7vw, 94px)
        max(24px, calc((100vw - 1320px) / 2));

    padding-bottom: 28px;

    background: #11110f;

    color: #fff;
}

.footer-main {
    display: grid;

    grid-template-columns:
        minmax(300px, 1.6fr)
        repeat(3, minmax(140px, .65fr));

    gap:
        clamp(40px, 6vw, 90px);

    padding-bottom:
        clamp(65px, 7vw, 92px);
}

.footer-brand {
    max-width: 400px;
}

.footer-logo {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    color: #fff;

    text-decoration: none;
}

.footer-logo .brand-mark {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    border-radius: 50%;

    background: #f87916;

    color: #fff;

    font-size: 11px;
    font-weight: 850;
}

.footer-logo > span:last-child {
    display: flex;
    flex-direction: column;
}

.footer-logo strong {
    font-size: 17px;
    line-height: 1;
}

.footer-logo small {
    margin-top: 5px;

    color: rgba(255,255,255,.52);

    font-size: 8px;
    letter-spacing: .1em;

    text-transform: uppercase;
}

.footer-brand p {
    margin:
        30px
        0
        26px;

    max-width: 360px;

    color: rgba(255,255,255,.56);

    font-size: 12.5px;
    line-height: 1.7;
}

.footer-plan-link {
    display: inline-flex;

    gap: 10px;

    color: #fff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 750;
}

.footer-plan-link span {
    color: #f87916;
}

.footer-column {
    display: flex;

    flex-direction: column;

    gap: 13px;
}

.footer-column > strong {
    margin-bottom: 10px;

    color: #fff;

    font-size: 10px;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.footer-column a {
    color: rgba(255,255,255,.57);

    font-size: 11px;

    text-decoration: none;

    transition:
        color .2s ease;
}

.footer-column a:hover {
    color: #fff;
}

.footer-bottom {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding-top: 24px;

    border-top:
        1px solid rgba(255,255,255,.12);

    color: rgba(255,255,255,.38);

    font-size: 9.5px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 980px) {

    .journey-process-head,
    .destination-editorial-head {
        grid-template-columns: 1fr;

        gap: 24px;
    }

    .journey-steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .journey-steps article:nth-child(2) {
        border-right: 0;
    }

    .journey-steps article:nth-child(3),
    .journey-steps article:nth-child(4) {
        border-top:
            1px solid rgba(28,27,24,.11);
    }

    .about-editorial {
        grid-template-columns: 1fr;
    }

    .about-editorial-media {
        min-height: 520px;
    }

    .destination-tile,
    .destination-tile-wide {
        grid-column: span 3;
    }

    .footer-main {
        grid-template-columns:
            1fr
            1fr
            1fr;
    }

    .footer-brand {
        grid-column:
            1
            / -1;
    }
}


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

@media (max-width: 700px) {

    .journey-process,
    .destination-editorial {
        width:
            calc(100% - 40px);
    }

    .journey-process {
        padding:
            66px
            0;
    }

    .journey-process-head {
        margin-bottom: 34px;
    }

    .journey-process-head h2,
    .destination-editorial-head h2,
    .faq-preview-head h2,
    .about-editorial-copy h2 {
        font-size: 42px;

        line-height: .96;
    }

    .journey-process-head > p,
    .destination-editorial-head > p {
        font-size: 13px;

        line-height: 1.65;
    }

    .journey-steps {
        display: block;
    }

    .journey-steps article,
    .journey-steps article:not(:first-child) {
        display: grid;

        grid-template-columns:
            38px
            1fr;

        column-gap: 16px;

        min-height: 0;

        padding:
            20px
            0;

        border-right: 0;

        border-top:
            1px solid rgba(28,27,24,.12);
    }

    .journey-steps article:last-child {
        border-bottom:
            1px solid rgba(28,27,24,.12);
    }

    .journey-steps article > span {
        grid-row:
            1
            / 5;

        margin: 0;

        padding-top: 2px;
    }

    .journey-steps small,
    .journey-steps h3,
    .journey-steps p {
        grid-column: 2;
    }

    .journey-steps h3 {
        margin-bottom: 7px;

        font-size: 21px;
    }

    .journey-steps p {
        max-width: none;

        font-size: 12px;
    }


    /* About mobile */

    .about-editorial {
        display: flex;

        flex-direction: column;

        width:
            calc(100% - 24px);

        margin-bottom: 70px;

        border-radius: 27px;
    }

    .about-editorial-media {
        min-height: 380px;
    }

    .about-editorial-copy {
        padding:
            42px
            22px
            46px;
    }

    .about-editorial-copy h2 {
        margin-bottom: 24px;
    }

    .about-editorial-copy .about-lead {
        font-size: 15px;
    }

    .about-points > div {
        display: block;

        padding:
            15px
            0;
    }

    .about-points strong {
        display: block;

        margin-bottom: 6px;
    }


    /* Destinations mobile */

    .destination-editorial {
        padding-bottom: 72px;
    }

    .destination-editorial-head {
        margin-bottom: 28px;
    }

    .destination-editorial-grid {
        display: flex;

        gap: 12px;

        overflow-x: auto;

        padding:
            0
            20px
            8px;

        margin:
            0
            -20px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;
    }

    .destination-editorial-grid::-webkit-scrollbar {
        display: none;
    }

    .destination-tile,
    .destination-tile-wide {
        flex:
            0
            0
            min(82vw, 355px);

        min-height: 470px;

        border-radius: 25px;

        scroll-snap-align: start;
    }

    .destination-copy h3 {
        font-size: 35px;
    }


    /* FAQ mobile */

    .faq-preview {
        width:
            calc(100% - 24px);

        padding:
            51px
            21px
            42px;

        border-radius: 28px;
    }

    .faq-preview-head {
        margin-bottom: 34px;
    }

    .faq-preview-grid {
        display: block;
    }

    .faq-preview details:nth-last-child(2) {
        border-bottom: 0;
    }

    .faq-preview summary {
        padding:
            19px
            0;

        font-size: 12.5px;
    }

    .faq-preview details p {
        margin-right: 25px;

        font-size: 12px;
    }

    .faq-preview-action {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;

        margin-top: 30px;
    }


    /* Footer mobile */

    .site-footer {
        margin-top: 55px;

        padding:
            56px
            20px
            25px;
    }

    .footer-main {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            42px
            30px;

        padding-bottom: 55px;
    }

    .footer-brand {
        grid-column:
            1
            / -1;
    }

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

    .footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }

}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media (max-width: 390px) {

    .journey-process-head h2,
    .destination-editorial-head h2,
    .faq-preview-head h2,
    .about-editorial-copy h2 {
        font-size: 38px;
    }

    .about-editorial-media {
        min-height: 335px;
    }

    .destination-tile,
    .destination-tile-wide {
        flex-basis: 84vw;

        min-height: 440px;
    }

}

/* END UI V6J */

/* ==========================================================
   AL BADI — V6K REAL CONTENT PAGES
   ========================================================== */

.content-page {
    background: #f8f5ef;
    color: #171715;
}

.inner-site-header {
    background: rgba(248,245,239,.93);
    backdrop-filter: blur(18px);
}

.inner-hero {
    width: min(100% - 48px, 1320px);

    margin:
        36px
        auto
        0;

    display: grid;
    grid-template-columns:
        minmax(0,.92fr)
        minmax(0,1.08fr);

    min-height: 660px;

    overflow: hidden;

    border-radius: 34px;

    background: #ece8df;
}

.inner-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(55px, 7vw, 100px);
}

.inner-hero h1 {
    margin:
        13px
        0
        26px;

    font-size:
        clamp(57px, 7vw, 102px);

    line-height: .88;
    letter-spacing: -.065em;
}

.inner-hero h1 span {
    display: block;

    color: #8a8378;

    font-weight: 430;
}

.inner-hero-copy > p {
    max-width: 510px;

    margin:
        0
        0
        30px;

    color: #676159;

    font-size: 15px;
    line-height: 1.75;
}

.inner-hero-link {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    width: fit-content;

    color: #171715;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.inner-hero-link span {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #f87916;
    color: #fff;
}

.inner-hero-image {
    min-height: 660px;
}

.inner-hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* About page */

.story-section {
    width: min(100% - 48px, 1180px);

    margin: 0 auto;

    padding:
        clamp(92px,10vw,155px)
        0;
}

.story-kicker {
    margin-bottom: 32px;

    color: #f87916;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.story-main {
    display: grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(300px,.62fr);

    gap:
        clamp(65px,10vw,155px);
}

.story-main h2,
.about-split-copy h2 {
    margin: 0;

    font-size:
        clamp(48px,5.5vw,80px);

    line-height: .94;
    letter-spacing: -.055em;
}

.story-main h2 span,
.about-split-copy h2 span {
    display: block;

    color: #888176;

    font-weight: 430;
}

.story-copy p {
    margin:
        0
        0
        18px;

    color: #6c665e;

    font-size: 14px;
    line-height: 1.75;
}

.story-copy .story-lead {
    color: #22201c;

    font-size: 17px;
}

.about-values {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto
        clamp(95px,10vw,150px);

    display: grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));

    border-top:
        1px solid rgba(25,23,20,.15);

    border-bottom:
        1px solid rgba(25,23,20,.15);
}

.about-values article {
    padding:
        31px
        34px
        42px;

    border-right:
        1px solid rgba(25,23,20,.12);
}

.about-values article:first-child {
    padding-left: 0;
}

.about-values article:last-child {
    border-right: 0;
}

.about-values span {
    display: block;

    margin-bottom: 65px;

    color: #f87916;

    font-size: 11px;
    font-weight: 800;
}

.about-values strong {
    display: block;

    margin-bottom: 12px;

    font-size: 24px;
    letter-spacing: -.035em;
}

.about-values p {
    max-width: 310px;

    margin: 0;

    color: #706a62;

    font-size: 13px;
    line-height: 1.7;
}

.about-split {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto
        clamp(90px,10vw,145px);

    display: grid;
    grid-template-columns:
        1.08fr
        .92fr;

    min-height: 620px;

    border-radius: 32px;

    overflow: hidden;

    background: #171715;
}

.about-split-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.about-split-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(50px,6vw,85px);
}

.about-split-copy .section-label {
    color: #f87916;
}

.about-split-copy h2 {
    color: #fff;

    margin:
        14px
        0
        27px;

    font-size:
        clamp(43px,4.8vw,68px);
}

.about-split-copy h2 span {
    color: #85817a;
}

.about-split-copy > p {
    max-width: 500px;

    margin:
        0
        0
        31px;

    color: rgba(255,255,255,.62);

    font-size: 14px;
    line-height: 1.75;
}

.about-split-links {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.about-split-links a {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding:
        12px
        16px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 999px;

    color: #fff;

    font-size: 10px;
    font-weight: 750;

    text-decoration: none;
}

.about-split-links a:first-child {
    background: #f87916;
    border-color: #f87916;
}

.inner-final-cta {
    width: min(100% - 48px, 1180px);

    margin:
        0
        auto
        70px;

    text-align: center;

    padding:
        clamp(60px,8vw,105px)
        20px;
}

.inner-final-cta small {
    color: #f87916;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .12em;
}

.inner-final-cta h2 {
    max-width: 900px;

    margin:
        15px
        auto
        31px;

    font-size:
        clamp(48px,6vw,82px);

    line-height: .92;
    letter-spacing: -.06em;
}

.inner-final-cta h2 span {
    display: block;

    color: #898277;

    font-weight: 430;
}

.inner-final-cta > a {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding:
        13px
        18px;

    border-radius: 999px;

    background: #171715;

    color: #fff;

    text-decoration: none;

    font-size: 10px;
    font-weight: 750;
}


/* Excursions page */

.excursions-hero .inner-hero-image img {
    object-position: center;
}

.excursion-intro {
    width: min(100% - 48px, 1320px);

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0,1.1fr)
        minmax(300px,.52fr);

    gap:
        clamp(45px,8vw,120px);

    align-items: end;

    padding:
        clamp(85px,9vw,130px)
        0
        clamp(48px,6vw,72px);
}

.excursion-intro h2 {
    margin:
        12px
        0
        0;

    font-size:
        clamp(47px,5vw,74px);

    line-height: .94;
    letter-spacing: -.055em;
}

.excursion-intro h2 span {
    display: block;

    color: #898277;

    font-weight: 430;
}

.excursion-intro > p {
    margin: 0;

    color: #6b655d;

    font-size: 14px;
    line-height: 1.75;
}

.all-excursions {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto;

    padding-bottom:
        clamp(90px,10vw,145px);
}

.excursion-page-grid {
    grid-template-columns:
        repeat(3,minmax(0,1fr));

    row-gap: 55px;
}

.excursion-page-grid
.travel-product-card {
    min-width: 0;
}

.excursion-guide-strip {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto
        75px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding:
        37px
        42px;

    border-radius: 27px;

    background: #ece7de;
}

.excursion-guide-strip small {
    display: block;

    margin-bottom: 7px;

    color: #8a8277;

    font-size: 9px;

    text-transform: uppercase;
    letter-spacing: .11em;
}

.excursion-guide-strip strong {
    font-size:
        clamp(20px,2vw,29px);

    letter-spacing: -.035em;
}

.excursion-guide-strip > a {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    flex: 0 0 auto;

    padding:
        12px
        17px;

    border-radius: 999px;

    background: #171715;
    color: #fff;

    font-size: 10px;
    font-weight: 750;

    text-decoration: none;
}


/* 404 */

.not-found-shell {
    min-height: 72vh;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding:
        80px
        22px;
}

.not-found-shell > span {
    color: #f87916;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: .15em;
}

.not-found-shell h1 {
    max-width: 820px;

    margin:
        15px
        0
        20px;

    font-size:
        clamp(55px,8vw,105px);

    line-height: .86;
    letter-spacing: -.065em;
}

.not-found-shell h1 em {
    display: block;

    color: #898277;

    font-style: normal;
    font-weight: 430;
}

.not-found-shell p {
    color: #716b63;
}

.not-found-shell a {
    margin-top: 18px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding:
        12px
        17px;

    border-radius: 999px;

    background: #171715;
    color: #fff;

    text-decoration: none;

    font-size: 10px;
    font-weight: 750;
}


/* ==========================================================
   V6K TABLET
   ========================================================== */

@media (max-width: 980px) {

    .inner-hero {
        grid-template-columns: 1fr;
    }

    .inner-hero-image {
        min-height: 500px;
    }

    .story-main,
    .excursion-intro {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .about-split {
        grid-template-columns: 1fr;
    }

    .about-split-media {
        min-height: 500px;
    }

    .excursion-page-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* ==========================================================
   V6K MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .inner-hero {
        width: calc(100% - 24px);

        margin-top: 15px;

        display: flex;
        flex-direction: column;

        min-height: 0;

        border-radius: 27px;
    }

    .inner-hero-copy {
        padding:
            48px
            21px
            43px;
    }

    .inner-hero h1 {
        font-size: 52px;
    }

    .inner-hero-copy > p {
        font-size: 13px;
    }

    .inner-hero-image {
        min-height: 360px;
    }

    .story-section {
        width: calc(100% - 40px);

        padding:
            70px
            0;
    }

    .story-main {
        gap: 26px;
    }

    .story-main h2,
    .about-split-copy h2 {
        font-size: 43px;
    }

    .about-values {
        width: calc(100% - 40px);

        display: block;

        margin-bottom: 72px;
    }

    .about-values article,
    .about-values article:first-child {
        padding:
            24px
            0;

        border-right: 0;

        border-bottom:
            1px solid rgba(25,23,20,.12);
    }

    .about-values article:last-child {
        border-bottom: 0;
    }

    .about-values span {
        margin-bottom: 27px;
    }

    .about-split {
        width: calc(100% - 24px);

        margin-bottom: 68px;

        border-radius: 27px;
    }

    .about-split-media {
        min-height: 355px;
    }

    .about-split-copy {
        padding:
            43px
            21px
            47px;
    }

    .inner-final-cta {
        width: calc(100% - 40px);

        margin-bottom: 35px;
    }

    .inner-final-cta h2 {
        font-size: 45px;
    }

    .excursion-intro {
        width: calc(100% - 40px);

        padding:
            68px
            0
            36px;
    }

    .excursion-intro h2 {
        font-size: 43px;
    }

    .all-excursions {
        width: calc(100% - 40px);

        padding-bottom: 70px;
    }

    .excursion-page-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 42px;
    }

    .excursion-page-grid
    .travel-product-card {
        width: 100%;
        max-width: none;

        flex-basis: auto;
    }

    .excursion-guide-strip {
        width: calc(100% - 24px);

        margin-bottom: 55px;

        align-items: flex-start;

        flex-direction: column;

        padding:
            29px
            22px;
    }

    .inner-site-footer {
        margin-top: 40px;
    }

}


/* SMALL PHONE */

@media (max-width: 390px) {

    .inner-hero h1 {
        font-size: 47px;
    }

    .story-main h2,
    .about-split-copy h2,
    .excursion-intro h2 {
        font-size: 39px;
    }

}

/* END V6K REAL CONTENT PAGES */

/* ==========================================================
   AL BADI — V6L REAL SAFARIS PAGE
   ========================================================== */

.safari-cinematic-hero {
    position: relative;

    width: min(100% - 48px, 1320px);

    min-height: 760px;

    margin:
        35px
        auto
        0;

    overflow: hidden;

    border-radius: 34px;

    color: #fff;
}

.safari-cinematic-media,
.safari-cinematic-media img,
.safari-cinematic-shade {
    position: absolute;
    inset: 0;
}

.safari-cinematic-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.safari-cinematic-shade {
    background:
        linear-gradient(
            90deg,
            rgba(8,9,7,.78) 0%,
            rgba(8,9,7,.48) 42%,
            rgba(8,9,7,.12) 72%,
            rgba(8,9,7,.22) 100%
        ),
        linear-gradient(
            0deg,
            rgba(8,9,7,.58) 0%,
            rgba(8,9,7,0) 45%
        );
}

.safari-cinematic-copy {
    position: relative;

    z-index: 2;

    max-width: 790px;

    padding:
        clamp(100px, 11vw, 160px)
        clamp(45px, 7vw, 92px)
        150px;
}

.safari-cinematic-copy .section-label {
    color: #f87916;
}

.safari-cinematic-copy h1 {
    margin:
        15px
        0
        28px;

    font-size:
        clamp(68px, 9vw, 125px);

    line-height: .84;
    letter-spacing: -.07em;

    color: #fff;
}

.safari-cinematic-copy h1 span {
    display: block;

    color: rgba(255,255,255,.57);

    font-weight: 420;
}

.safari-cinematic-copy p {
    max-width: 520px;

    margin:
        0
        0
        34px;

    color: rgba(255,255,255,.76);

    font-size: 14.5px;
    line-height: 1.75;
}

.safari-cinematic-copy > a {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    padding:
        12px
        16px;

    border:
        1px solid rgba(255,255,255,.28);

    border-radius: 999px;

    color: #fff;

    font-size: 10px;
    font-weight: 750;

    text-decoration: none;

    backdrop-filter: blur(12px);
}

.safari-cinematic-copy > a span {
    color: #f87916;
}

.safari-cinematic-meta {
    position: absolute;

    z-index: 3;

    left: clamp(45px, 7vw, 92px);
    right: clamp(45px, 7vw, 92px);
    bottom: 34px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid rgba(255,255,255,.24);

    padding-top: 22px;
}

.safari-cinematic-meta > div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.safari-cinematic-meta small {
    color: rgba(255,255,255,.48);

    font-size: 8px;
    font-weight: 750;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.safari-cinematic-meta strong {
    color: #fff;

    font-size: 13px;
}


/* Intro */

.safari-intro {
    width: min(100% - 48px, 1180px);

    margin: 0 auto;

    padding:
        clamp(95px, 10vw, 155px)
        0
        clamp(70px, 8vw, 115px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, .56fr);

    gap:
        clamp(55px, 9vw, 135px);
}

.safari-intro h2,
.safari-list-head h2,
.safari-planning-copy h2 {
    margin:
        12px
        0
        0;

    font-size:
        clamp(51px, 5.7vw, 82px);

    line-height: .93;
    letter-spacing: -.058em;
}

.safari-intro h2 span,
.safari-list-head h2 span,
.safari-planning-copy h2 span {
    display: block;

    color: #888176;

    font-weight: 430;
}

.safari-intro-copy p {
    margin:
        0
        0
        18px;

    color: #6d675f;

    font-size: 14px;
    line-height: 1.75;
}


/* Destination band */

.safari-destination-band {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto
        clamp(95px, 10vw, 145px);

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    background: #171715;

    border-radius: 30px;

    overflow: hidden;
}

.safari-destination-band article {
    min-height: 315px;

    padding:
        28px
        26px
        31px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right:
        1px solid rgba(255,255,255,.11);
}

.safari-destination-band article:last-child {
    border-right: 0;
}

.safari-destination-band article > span {
    color: #f87916;

    font-size: 10px;
    font-weight: 850;
}

.safari-destination-band small {
    display: block;

    margin-bottom: 7px;

    color: rgba(255,255,255,.43);

    font-size: 8px;
    font-weight: 750;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.safari-destination-band h3 {
    margin:
        0
        0
        10px;

    color: #fff;

    font-size:
        clamp(29px, 3vw, 43px);

    letter-spacing: -.045em;
}

.safari-destination-band p {
    margin: 0;

    color: rgba(255,255,255,.56);

    font-size: 11.5px;
    line-height: 1.65;
}


/* Safari cards */

.all-safaris {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto;

    padding-bottom:
        clamp(100px, 11vw, 155px);
}

.safari-list-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, .52fr);

    gap:
        clamp(50px, 8vw, 120px);

    align-items: end;

    margin-bottom:
        clamp(48px, 6vw, 72px);
}

.safari-list-head > p {
    margin: 0;

    color: #6c665e;

    font-size: 13.5px;
    line-height: 1.75;
}

.safari-page-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        65px
        28px;
}

.safari-page-grid
.travel-product-media {
    aspect-ratio: 1.65 / 1;
}

.safari-page-grid
.travel-product-body h3 {
    font-size:
        clamp(25px, 2.6vw, 38px);
}


/* Planning split */

.safari-planning-section {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto
        clamp(95px, 10vw, 145px);

    display: grid;

    grid-template-columns:
        .88fr
        1.12fr;

    min-height: 640px;

    overflow: hidden;

    border-radius: 32px;

    background: #ece7de;
}

.safari-planning-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(50px, 6vw, 85px);
}

.safari-planning-copy h2 {
    margin-bottom: 27px;

    font-size:
        clamp(46px, 5vw, 72px);
}

.safari-planning-copy > p {
    max-width: 480px;

    margin:
        0
        0
        30px;

    color: #6b655d;

    font-size: 14px;
    line-height: 1.75;
}

.safari-planning-copy > a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    color: #171715;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.safari-planning-copy > a span {
    color: #f87916;
}

.safari-planning-media {
    min-height: 640px;
}

.safari-planning-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* Tablet */

@media (max-width: 980px) {

    .safari-intro,
    .safari-list-head {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .safari-destination-band {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .safari-destination-band article:nth-child(2) {
        border-right: 0;
    }

    .safari-destination-band article:nth-child(3),
    .safari-destination-band article:nth-child(4) {
        border-top:
            1px solid rgba(255,255,255,.11);
    }

    .safari-planning-section {
        grid-template-columns: 1fr;
    }

    .safari-planning-media {
        min-height: 500px;
    }

}


/* Mobile */

@media (max-width: 700px) {

    .safari-cinematic-hero {
        width:
            calc(100% - 24px);

        min-height: 690px;

        margin-top: 15px;

        border-radius: 27px;
    }

    .safari-cinematic-shade {
        background:
            linear-gradient(
                0deg,
                rgba(8,9,7,.83) 0%,
                rgba(8,9,7,.38) 55%,
                rgba(8,9,7,.14) 100%
            );
    }

    .safari-cinematic-copy {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 125px;

        padding:
            0
            21px;
    }

    .safari-cinematic-copy h1 {
        font-size: 58px;
    }

    .safari-cinematic-copy p {
        font-size: 12.5px;
    }

    .safari-cinematic-meta {
        left: 21px;
        right: 21px;
        bottom: 26px;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 13px;
    }

    .safari-cinematic-meta strong {
        font-size: 10px;
    }

    .safari-intro {
        width:
            calc(100% - 40px);

        padding:
            70px
            0
            55px;

        display: block;
    }

    .safari-intro h2,
    .safari-list-head h2,
    .safari-planning-copy h2 {
        font-size: 43px;
    }

    .safari-intro-copy {
        margin-top: 26px;
    }

    .safari-destination-band {
        width:
            calc(100% - 24px);

        display: flex;

        overflow-x: auto;

        border-radius: 27px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }

    .safari-destination-band::-webkit-scrollbar {
        display: none;
    }

    .safari-destination-band article {
        flex:
            0
            0
            79vw;

        min-height: 300px;

        border-right:
            1px solid rgba(255,255,255,.11) !important;

        border-top: 0 !important;

        scroll-snap-align: start;
    }

    .all-safaris {
        width:
            calc(100% - 40px);

        padding-bottom: 76px;
    }

    .safari-list-head {
        margin-bottom: 36px;
    }

    .safari-page-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .safari-page-grid
    .travel-product-card {
        width: 100%;

        max-width: none;

        flex-basis: auto;
    }

    .safari-page-grid
    .travel-product-media {
        aspect-ratio: 1.5 / 1;
    }

    .safari-page-grid
    .travel-product-body h3 {
        font-size: 24px;
    }

    .safari-planning-section {
        width:
            calc(100% - 24px);

        margin-bottom: 70px;

        border-radius: 27px;
    }

    .safari-planning-copy {
        padding:
            45px
            21px
            48px;
    }

    .safari-planning-media {
        min-height: 360px;
    }

}


/* Small phones */

@media (max-width: 390px) {

    .safari-cinematic-copy h1 {
        font-size: 53px;
    }

    .safari-intro h2,
    .safari-list-head h2,
    .safari-planning-copy h2 {
        font-size: 39px;
    }

}

/* END V6L REAL SAFARIS PAGE */

/* ==========================================================
   AL BADI — V6M ACCOMMODATION + TRANSPORT
   ========================================================== */


/* ==========================================================
   ACCOMMODATION HERO
   ========================================================== */

.stay-hero {
    width: min(100% - 48px, 1320px);

    margin:
        35px
        auto
        0;

    display: grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

    min-height: 700px;

    border-radius: 34px;

    overflow: hidden;

    background: #ece7de;
}

.stay-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(55px,7vw,96px);
}

.stay-hero-copy h1 {
    margin:
        14px
        0
        28px;

    font-size:
        clamp(60px,7.3vw,105px);

    line-height: .87;
    letter-spacing: -.068em;
}

.stay-hero-copy h1 span {
    display: block;

    color: #8b8378;

    font-weight: 420;
}

.stay-hero-copy > p {
    max-width: 500px;

    margin:
        0
        0
        32px;

    color: #69635b;

    font-size: 14px;
    line-height: 1.75;
}

.stay-hero-copy > a,
.transport-hero-copy > a {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    color: #171715;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.stay-hero-copy > a span {
    display: grid;

    place-items: center;

    width: 33px;
    height: 33px;

    border-radius: 50%;

    background: #f87916;

    color: #fff;
}

.stay-hero-media {
    position: relative;

    min-height: 700px;

    overflow: hidden;
}

.stay-hero-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.stay-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,8,7,.02),
            rgba(7,8,7,.33)
        );
}

.stay-hero-note {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 28px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,.55);

    color: #fff;
}

.stay-hero-note small {
    display: block;

    margin-bottom: 5px;

    font-size: 8px;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.stay-hero-note strong {
    font-size: 14px;
}


/* Accommodation intro */

.stay-intro,
.vehicle-catalogue-head {
    width: min(100% - 48px, 1180px);

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(300px,.55fr);

    gap:
        clamp(55px,9vw,135px);

    align-items: end;
}

.stay-intro {
    padding:
        clamp(95px,10vw,150px)
        0
        clamp(60px,7vw,95px);
}

.stay-intro h2,
.stay-catalogue-head h2,
.vehicle-catalogue-head h2,
.transport-flow-head h2,
.stay-connection-copy h2 {
    margin:
        12px
        0
        0;

    font-size:
        clamp(50px,5.7vw,82px);

    line-height: .93;
    letter-spacing: -.058em;
}

.stay-intro h2 span,
.stay-catalogue-head h2 span,
.vehicle-catalogue-head h2 span,
.transport-flow-head h2 span,
.stay-connection-copy h2 span {
    display: block;

    color: #898277;

    font-weight: 430;
}

.stay-intro > p,
.vehicle-catalogue-head > p,
.stay-catalogue-head > p {
    margin: 0;

    color: #6b655d;

    font-size: 13.5px;
    line-height: 1.75;
}


/* Stay types */

.stay-types {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto
        clamp(100px,10vw,150px);

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    border-top:
        1px solid rgba(30,28,24,.14);

    border-bottom:
        1px solid rgba(30,28,24,.14);
}

.stay-types article {
    min-height: 310px;

    padding:
        28px
        35px
        35px;

    border-right:
        1px solid rgba(30,28,24,.12);
}

.stay-types article:first-child {
    padding-left: 0;
}

.stay-types article:last-child {
    border-right: 0;
}

.stay-types article > span {
    display: block;

    margin-bottom: 70px;

    color: #f87916;

    font-size: 10px;
    font-weight: 850;
}

.stay-types small {
    display: block;

    margin-bottom: 7px;

    color: #8a8379;

    font-size: 8px;
    font-weight: 750;

    letter-spacing: .11em;
    text-transform: uppercase;
}

.stay-types h3 {
    margin:
        0
        0
        11px;

    font-size:
        clamp(29px,3vw,43px);

    letter-spacing: -.045em;
}

.stay-types p {
    max-width: 310px;

    margin: 0;

    color: #706a62;

    font-size: 12px;
    line-height: 1.7;
}


/* Stay catalogue */

.stay-catalogue,
.vehicle-catalogue {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto;

    padding-bottom:
        clamp(95px,10vw,150px);
}

.stay-catalogue-head {
    display: grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(300px,.55fr);

    gap:
        clamp(55px,9vw,135px);

    align-items: end;

    margin-bottom:
        clamp(45px,6vw,72px);
}

.stay-grid {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        45px
        18px;
}

.stay-card-media {
    position: relative;

    aspect-ratio: 1.35 / 1;

    overflow: hidden;

    border-radius:
        0
        26px
        0
        26px;
}

.stay-card-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.stay-card-media > span {
    position: absolute;

    top: 14px;
    right: 14px;

    padding:
        7px
        10px;

    border-radius: 999px;

    background: rgba(17,17,15,.72);

    color: #fff;

    backdrop-filter: blur(10px);

    font-size: 8px;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.stay-card-body {
    padding-top: 12px;
}

.stay-card-meta {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 8px;

    color: #817a70;

    font-size: 9px;
}

.stay-card-body h3 {
    margin:
        0
        0
        13px;

    font-size:
        clamp(23px,2.1vw,31px);

    letter-spacing: -.04em;
}

.stay-card-action,
.vehicle-card-action {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;

    padding:
        10px
        13px;

    border-radius: 999px;

    background: #f87916;

    color: #fff;
}

.stay-card-action strong,
.vehicle-card-action strong {
    font-size: 9px;
}

.stay-card-action a,
.vehicle-card-action a {
    color: #fff;

    font-size: 9px;
    font-weight: 750;

    text-decoration: none;
}


/* Empty states */

.premium-empty-state {
    display: grid;

    grid-template-columns:
        145px
        1fr;

    gap:
        clamp(35px,7vw,95px);

    align-items: start;

    padding:
        clamp(45px,6vw,78px);

    border-radius: 30px;

    background: #ece7de;
}

.premium-empty-number {
    color: #f87916;

    font-size:
        clamp(80px,10vw,145px);

    line-height: .8;

    font-weight: 400;

    letter-spacing: -.07em;
}

.premium-empty-copy {
    max-width: 720px;
}

.premium-empty-copy h3 {
    margin:
        12px
        0
        22px;

    font-size:
        clamp(37px,4.5vw,64px);

    line-height: .94;
    letter-spacing: -.055em;
}

.premium-empty-copy h3 span {
    display: block;

    color: #8b8479;

    font-weight: 430;
}

.premium-empty-copy p {
    max-width: 580px;

    margin:
        0
        0
        26px;

    color: #69635b;

    font-size: 13px;
    line-height: 1.75;
}

.premium-empty-copy > a {
    display: inline-flex;

    gap: 10px;

    color: #171715;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
}

.premium-empty-copy > a span {
    color: #f87916;
}

.premium-empty-dark {
    background: #171715;

    color: #fff;
}

.premium-empty-dark
.premium-empty-copy h3 {
    color: #fff;
}

.premium-empty-dark
.premium-empty-copy h3 span {
    color: #85817a;
}

.premium-empty-dark
.premium-empty-copy p {
    color: rgba(255,255,255,.6);
}

.premium-empty-dark
.premium-empty-copy > a {
    color: #fff;
}


/* Stay connection */

.stay-connection {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto
        clamp(90px,10vw,145px);

    display: grid;

    grid-template-columns:
        1.08fr
        .92fr;

    min-height: 620px;

    border-radius: 32px;

    overflow: hidden;

    background: #171715;
}

.stay-connection-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.stay-connection-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(50px,6vw,85px);
}

.stay-connection-copy .section-label {
    color: #f87916;
}

.stay-connection-copy h2 {
    color: #fff;

    margin-bottom: 28px;

    font-size:
        clamp(44px,5vw,70px);
}

.stay-connection-copy h2 span {
    color: #85817a;
}

.stay-connection-copy > p {
    max-width: 470px;

    margin:
        0
        0
        29px;

    color: rgba(255,255,255,.61);

    font-size: 13px;
    line-height: 1.75;
}

.stay-connection-copy > a {
    width: fit-content;

    color: #fff;

    text-decoration: none;

    font-size: 10px;
    font-weight: 750;
}

.stay-connection-copy > a span {
    color: #f87916;
}


/* ==========================================================
   TRANSPORT HERO
   ========================================================== */

.transport-hero {
    position: relative;

    width: min(100% - 48px, 1320px);

    min-height: 720px;

    margin:
        35px
        auto
        0;

    overflow: hidden;

    border-radius: 34px;

    color: #fff;
}

.transport-hero-media,
.transport-hero-media img,
.transport-hero-shade {
    position: absolute;
    inset: 0;
}

.transport-hero-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.transport-hero-shade {
    background:
        linear-gradient(
            90deg,
            rgba(10,10,9,.78),
            rgba(10,10,9,.38) 52%,
            rgba(10,10,9,.11)
        );
}

.transport-hero-copy {
    position: relative;

    z-index: 2;

    max-width: 800px;

    padding:
        clamp(110px,12vw,170px)
        clamp(50px,7vw,95px);
}

.transport-hero-copy .section-label {
    color: #f87916;
}

.transport-hero-copy h1 {
    margin:
        15px
        0
        28px;

    color: #fff;

    font-size:
        clamp(68px,8.7vw,120px);

    line-height: .85;
    letter-spacing: -.07em;
}

.transport-hero-copy h1 span {
    display: block;

    color: rgba(255,255,255,.58);

    font-weight: 420;
}

.transport-hero-copy p {
    max-width: 500px;

    margin:
        0
        0
        32px;

    color: rgba(255,255,255,.72);

    font-size: 14px;
    line-height: 1.75;
}

.transport-hero-copy > a {
    color: #fff;
}

.transport-hero-copy > a span {
    color: #f87916;
}


/* Transport service band */

.transport-services {
    width: min(100% - 48px, 1320px);

    margin:
        clamp(85px,9vw,130px)
        auto
        clamp(100px,10vw,150px);

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    border-top:
        1px solid rgba(30,28,24,.14);

    border-bottom:
        1px solid rgba(30,28,24,.14);
}

.transport-services article {
    min-height: 330px;

    padding:
        28px
        35px
        35px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right:
        1px solid rgba(30,28,24,.12);
}

.transport-services article:first-child {
    padding-left: 0;
}

.transport-services article:last-child {
    border-right: 0;
}

.transport-services article > span {
    color: #f87916;

    font-size: 10px;
    font-weight: 850;
}

.transport-services small {
    display: block;

    margin-bottom: 7px;

    color: #8a8379;

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .1em;
}

.transport-services h3 {
    margin:
        0
        0
        11px;

    font-size:
        clamp(28px,3vw,42px);

    letter-spacing: -.045em;
}

.transport-services p {
    max-width: 320px;

    margin: 0;

    color: #706a62;

    font-size: 12px;
    line-height: 1.7;
}


/* Vehicle catalogue */

.vehicle-catalogue-head {
    width: 100%;

    margin-bottom:
        clamp(45px,6vw,72px);
}

.vehicle-grid {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        48px
        18px;
}

.vehicle-card-media {
    position: relative;

    aspect-ratio: 1.45 / 1;

    overflow: hidden;

    border-radius:
        25px
        25px
        0
        0;
}

.vehicle-card-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.vehicle-card-media > span {
    position: absolute;

    left: 14px;
    top: 14px;

    padding:
        7px
        10px;

    border-radius: 999px;

    background: rgba(17,17,15,.74);

    color: #fff;

    font-size: 8px;

    backdrop-filter: blur(10px);
}

.vehicle-card-body {
    padding-top: 12px;
}

.vehicle-card-body > small {
    display: block;

    margin-bottom: 6px;

    color: #827a70;

    font-size: 8px;

    text-transform: uppercase;
    letter-spacing: .1em;
}

.vehicle-card-body h3 {
    margin:
        0
        0
        13px;

    font-size:
        clamp(23px,2.2vw,32px);

    letter-spacing: -.04em;
}


/* Transport flow */

.transport-flow {
    width: min(100% - 48px, 1180px);

    margin:
        0
        auto
        clamp(90px,10vw,145px);
}

.transport-flow-head {
    margin-bottom:
        clamp(43px,6vw,70px);
}

.transport-flow-head h2 {
    max-width: 850px;
}

.transport-flow-steps {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    border-top:
        1px solid rgba(30,28,24,.14);
}

.transport-flow-steps > div {
    padding:
        27px
        35px
        34px;

    border-right:
        1px solid rgba(30,28,24,.12);
}

.transport-flow-steps > div:first-child {
    padding-left: 0;
}

.transport-flow-steps > div:last-child {
    border-right: 0;
}

.transport-flow-steps span {
    display: block;

    margin-bottom: 62px;

    color: #f87916;

    font-size: 10px;
    font-weight: 850;
}

.transport-flow-steps strong {
    display: block;

    margin-bottom: 10px;

    font-size: 22px;

    letter-spacing: -.035em;
}

.transport-flow-steps p {
    max-width: 300px;

    margin: 0;

    color: #706a62;

    font-size: 12px;
    line-height: 1.7;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 980px) {

    .stay-hero {
        grid-template-columns: 1fr;
    }

    .stay-hero-media {
        min-height: 520px;
    }

    .stay-intro,
    .stay-catalogue-head,
    .vehicle-catalogue-head {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .stay-types,
    .transport-services {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .stay-types article:nth-child(2),
    .transport-services article:nth-child(2) {
        border-right: 0;
    }

    .stay-types article:last-child,
    .transport-services article:last-child {
        grid-column:
            1
            / -1;

        border-top:
            1px solid rgba(30,28,24,.12);
    }

    .stay-grid,
    .vehicle-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .stay-connection {
        grid-template-columns: 1fr;
    }

    .stay-connection-media {
        min-height: 500px;
    }

}


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

@media (max-width: 700px) {

    .stay-hero,
    .transport-hero {
        width:
            calc(100% - 24px);

        margin-top: 15px;

        border-radius: 27px;
    }

    .stay-hero {
        display: flex;

        flex-direction: column;

        min-height: 0;
    }

    .stay-hero-copy {
        padding:
            50px
            21px
            44px;
    }

    .stay-hero-copy h1,
    .transport-hero-copy h1 {
        font-size: 53px;
    }

    .stay-hero-media {
        min-height: 370px;
    }

    .stay-intro,
    .stay-catalogue,
    .vehicle-catalogue,
    .transport-flow {
        width:
            calc(100% - 40px);
    }

    .stay-intro {
        padding:
            69px
            0
            45px;
    }

    .stay-intro h2,
    .stay-catalogue-head h2,
    .vehicle-catalogue-head h2,
    .transport-flow-head h2,
    .stay-connection-copy h2 {
        font-size: 42px;
    }

    .stay-types,
    .transport-services {
        width:
            calc(100% - 40px);

        display: block;

        margin-bottom: 72px;
    }

    .stay-types article,
    .stay-types article:first-child,
    .transport-services article,
    .transport-services article:first-child {
        min-height: 0;

        padding:
            24px
            0;

        border-right: 0;

        border-bottom:
            1px solid rgba(30,28,24,.12);
    }

    .stay-types article:last-child,
    .transport-services article:last-child {
        border-top: 0;
        border-bottom: 0;
    }

    .stay-types article > span,
    .transport-services article > span {
        margin-bottom: 30px;
    }

    .stay-grid,
    .vehicle-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .premium-empty-state {
        display: block;

        padding:
            36px
            21px
            41px;
    }

    .premium-empty-number {
        margin-bottom: 42px;

        font-size: 80px;
    }

    .premium-empty-copy h3 {
        font-size: 38px;
    }

    .stay-connection {
        width:
            calc(100% - 24px);

        margin-bottom: 70px;

        border-radius: 27px;
    }

    .stay-connection-media {
        min-height: 355px;
    }

    .stay-connection-copy {
        padding:
            44px
            21px
            48px;
    }

    /* Transport mobile */

    .transport-hero {
        min-height: 670px;
    }

    .transport-hero-shade {
        background:
            linear-gradient(
                0deg,
                rgba(10,10,9,.83),
                rgba(10,10,9,.35) 58%,
                rgba(10,10,9,.1)
            );
    }

    .transport-hero-copy {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 35px;

        padding:
            0
            21px;
    }

    .transport-hero-copy p {
        font-size: 12.5px;
    }

    .transport-services {
        margin-top: 70px;
    }

    .vehicle-catalogue {
        padding-bottom: 72px;
    }

    .transport-flow-steps {
        display: block;
    }

    .transport-flow-steps > div,
    .transport-flow-steps > div:first-child {
        padding:
            22px
            0;

        border-right: 0;

        border-top:
            1px solid rgba(30,28,24,.12);
    }

    .transport-flow-steps > div:last-child {
        border-bottom:
            1px solid rgba(30,28,24,.12);
    }

    .transport-flow-steps span {
        margin-bottom: 27px;
    }

}


/* ==========================================================
   SMALL PHONE
   ========================================================== */

@media (max-width: 390px) {

    .stay-hero-copy h1,
    .transport-hero-copy h1 {
        font-size: 48px;
    }

    .stay-intro h2,
    .stay-catalogue-head h2,
    .vehicle-catalogue-head h2,
    .transport-flow-head h2,
    .stay-connection-copy h2 {
        font-size: 38px;
    }

}

/* END V6M ACCOMMODATION + TRANSPORT */

/* ==========================================================
   AL BADI — V6N FAQ + CONTACT
   ========================================================== */


/* FAQ */

.faq-page-hero {
    width: min(100% - 48px, 1180px);

    margin:
        0
        auto;

    padding:
        clamp(90px,10vw,150px)
        0
        clamp(65px,7vw,100px);

    display: grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(300px,.55fr);

    gap:
        clamp(55px,9vw,135px);

    align-items: end;
}

.faq-page-hero h1,
.contact-hero h1 {
    margin:
        13px
        0
        0;

    font-size:
        clamp(60px,7vw,100px);

    line-height: .88;
    letter-spacing: -.068em;
}

.faq-page-hero h1 span,
.contact-hero h1 span {
    display: block;

    color: #898277;

    font-weight: 420;
}

.faq-page-hero > p {
    margin: 0;

    color: #6b655d;

    font-size: 14px;
    line-height: 1.75;
}

.faq-page-layout {
    width: min(100% - 48px, 1180px);

    margin:
        0
        auto
        clamp(100px,10vw,150px);

    display: grid;

    grid-template-columns:
        210px
        1fr;

    gap:
        clamp(50px,8vw,115px);
}

.faq-page-index {
    position: sticky;

    top: 110px;

    height: fit-content;

    display: flex;
    flex-direction: column;

    gap: 12px;
}

.faq-page-index > span {
    margin-bottom: 12px;

    color: #8a8379;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.faq-page-index a {
    color: #6c665e;

    font-size: 11px;

    text-decoration: none;
}

.faq-page-index a:hover {
    color: #171715;
}

.faq-group {
    scroll-margin-top: 120px;

    margin-bottom:
        clamp(70px,8vw,105px);
}

.faq-group-heading {
    display: grid;

    grid-template-columns:
        45px
        1fr;

    gap: 15px;

    align-items: baseline;

    margin-bottom: 20px;
}

.faq-group-heading > span {
    color: #f87916;

    font-size: 10px;
    font-weight: 850;
}

.faq-group-heading h2 {
    margin: 0;

    font-size:
        clamp(31px,3.6vw,50px);

    letter-spacing: -.045em;
}

.faq-group details {
    border-top:
        1px solid rgba(30,28,24,.15);
}

.faq-group details:last-child {
    border-bottom:
        1px solid rgba(30,28,24,.15);
}

.faq-group summary {
    display: grid;

    grid-template-columns:
        1fr
        auto;

    align-items: center;

    gap: 20px;

    padding:
        22px
        0;

    cursor: pointer;

    list-style: none;

    color: #201e1a;

    font-size: 14px;
    font-weight: 700;
}

.faq-group summary::-webkit-details-marker {
    display: none;
}

.faq-group summary span {
    display: grid;

    place-items: center;

    width: 28px;
    height: 28px;

    border:
        1px solid rgba(30,28,24,.18);

    border-radius: 50%;

    color: #f87916;

    transition:
        transform .2s ease;
}

.faq-group details[open]
summary span {
    transform: rotate(45deg);
}

.faq-group details p {
    max-width: 670px;

    margin:
        -5px
        45px
        24px
        0;

    color: #716b63;

    font-size: 13px;
    line-height: 1.75;
}

.faq-contact-cta {
    width: min(100% - 48px, 1180px);

    margin:
        0
        auto
        70px;

    padding:
        clamp(55px,7vw,90px);

    border-radius: 30px;

    background: #171715;

    color: #fff;
}

.faq-contact-cta .section-label {
    color: #f87916;
}

.faq-contact-cta h2 {
    max-width: 780px;

    margin:
        14px
        0
        30px;

    color: #fff;

    font-size:
        clamp(48px,6vw,80px);

    line-height: .92;
    letter-spacing: -.06em;
}

.faq-contact-cta h2 span {
    display: block;

    color: #85817a;

    font-weight: 430;
}

.faq-contact-cta > a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
}

.faq-contact-cta > a span {
    color: #f87916;
}


/* Contact */

.contact-hero {
    width: min(100% - 48px, 1180px);

    margin:
        0
        auto;

    padding:
        clamp(95px,10vw,155px)
        0
        clamp(75px,8vw,110px);

    display: grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(300px,.55fr);

    gap:
        clamp(55px,9vw,135px);

    align-items: end;
}

.contact-hero-copy > p {
    max-width: 520px;

    margin:
        26px
        0
        0;

    color: #69635b;

    font-size: 14px;
    line-height: 1.75;
}

.contact-hero-aside {
    display: grid;

    gap: 22px;
}

.contact-hero-aside > div {
    padding-top: 18px;

    border-top:
        1px solid rgba(30,28,24,.15);
}

.contact-hero-aside small {
    display: block;

    margin-bottom: 6px;

    color: #898176;

    font-size: 8px;

    text-transform: uppercase;
    letter-spacing: .11em;
}

.contact-hero-aside strong,
.contact-hero-aside a {
    color: #171715;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}

.contact-hero-aside a span {
    color: #f87916;
}

.contact-options {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto
        clamp(100px,10vw,150px);

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    border-top:
        1px solid rgba(30,28,24,.15);

    border-bottom:
        1px solid rgba(30,28,24,.15);
}

.contact-options article {
    min-height: 380px;

    padding:
        28px
        34px
        35px;

    display: flex;
    flex-direction: column;

    border-right:
        1px solid rgba(30,28,24,.12);
}

.contact-options article:first-child {
    padding-left: 0;
}

.contact-options article:last-child {
    border-right: 0;
}

.contact-options article > span {
    display: block;

    margin-bottom: 65px;

    color: #f87916;

    font-size: 10px;
    font-weight: 850;
}

.contact-options small {
    margin-bottom: 8px;

    color: #8a8379;

    font-size: 8px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .1em;
}

.contact-options h2 {
    margin:
        0
        0
        13px;

    font-size:
        clamp(30px,3vw,43px);

    line-height: 1;
    letter-spacing: -.045em;
}

.contact-options p {
    margin:
        0
        0
        25px;

    color: #706a62;

    font-size: 12px;
    line-height: 1.7;
}

.contact-options article > div {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: auto;
}

.contact-options article > div a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px
        12px;

    border:
        1px solid rgba(30,28,24,.15);

    border-radius: 999px;

    color: #171715;

    font-size: 9px;
    font-weight: 750;

    text-decoration: none;
}

.contact-options article > div a span {
    color: #f87916;
}

.contact-planning-panel {
    width: min(100% - 48px, 1320px);

    margin:
        0
        auto
        clamp(90px,10vw,145px);

    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    min-height: 650px;

    border-radius: 32px;

    overflow: hidden;

    background: #ece7de;
}

.contact-planning-copy {
    padding:
        clamp(50px,6vw,85px);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-planning-copy h2 {
    margin:
        12px
        0
        27px;

    font-size:
        clamp(46px,5vw,72px);

    line-height: .93;
    letter-spacing: -.058em;
}

.contact-planning-copy h2 span {
    display: block;

    color: #898277;

    font-weight: 430;
}

.contact-planning-copy > p {
    margin:
        0
        0
        29px;

    max-width: 480px;

    color: #6b655d;

    font-size: 13px;
    line-height: 1.75;
}

.contact-planning-copy ul {
    margin: 0;

    padding: 0;

    list-style: none;

    border-top:
        1px solid rgba(30,28,24,.14);
}

.contact-planning-copy li {
    display: grid;

    grid-template-columns:
        35px
        1fr;

    gap: 10px;

    padding:
        11px
        0;

    border-bottom:
        1px solid rgba(30,28,24,.12);

    color: #302d28;

    font-size: 11px;
}

.contact-planning-copy li span {
    color: #f87916;

    font-size: 9px;
    font-weight: 800;
}

.contact-planning-media {
    min-height: 650px;
}

.contact-planning-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.contact-faq-link {
    width: min(100% - 48px, 1180px);

    margin:
        0
        auto
        70px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding:
        34px
        38px;

    border-radius: 27px;

    background: #171715;

    color: #fff;
}

.contact-faq-link small {
    display: block;

    margin-bottom: 6px;

    color: rgba(255,255,255,.46);

    font-size: 8px;

    text-transform: uppercase;
    letter-spacing: .1em;
}

.contact-faq-link strong {
    font-size:
        clamp(18px,2vw,27px);

    letter-spacing: -.03em;
}

.contact-faq-link > a {
    flex: 0 0 auto;

    color: #fff;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
}

.contact-faq-link > a span {
    color: #f87916;
}


/* Tablet */

@media (max-width: 980px) {

    .faq-page-hero,
    .contact-hero {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .faq-page-layout {
        grid-template-columns: 1fr;
    }

    .faq-page-index {
        position: static;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        gap: 10px 18px;

        padding-bottom: 20px;

        border-bottom:
            1px solid rgba(30,28,24,.13);
    }

    .faq-page-index > span {
        width: 100%;
    }

    .contact-options {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .contact-options article:nth-child(2) {
        border-right: 0;
    }

    .contact-options article:last-child {
        grid-column:
            1
            / -1;

        border-top:
            1px solid rgba(30,28,24,.12);
    }

    .contact-planning-panel {
        grid-template-columns: 1fr;
    }

    .contact-planning-media {
        min-height: 500px;
    }

}


/* Mobile */

@media (max-width: 700px) {

    .faq-page-hero,
    .contact-hero {
        width:
            calc(100% - 40px);

        padding:
            70px
            0
            50px;
    }

    .faq-page-hero h1,
    .contact-hero h1 {
        font-size: 52px;
    }

    .faq-page-layout {
        width:
            calc(100% - 40px);

        gap: 45px;

        margin-bottom: 72px;
    }

    .faq-page-index {
        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 14px;

        scrollbar-width: none;
    }

    .faq-page-index::-webkit-scrollbar {
        display: none;
    }

    .faq-page-index > span {
        display: none;
    }

    .faq-page-index a {
        flex: 0 0 auto;

        padding:
            8px
            11px;

        border:
            1px solid rgba(30,28,24,.13);

        border-radius: 999px;
    }

    .faq-group {
        margin-bottom: 60px;
    }

    .faq-group-heading {
        grid-template-columns:
            35px
            1fr;
    }

    .faq-group-heading h2 {
        font-size: 31px;
    }

    .faq-group summary {
        font-size: 12.5px;
    }

    .faq-group details p {
        margin-right: 20px;

        font-size: 12px;
    }

    .faq-contact-cta {
        width:
            calc(100% - 24px);

        padding:
            45px
            21px;

        border-radius: 27px;
    }

    .faq-contact-cta h2 {
        font-size: 44px;
    }

    .contact-options {
        width:
            calc(100% - 40px);

        display: block;

        margin-bottom: 72px;
    }

    .contact-options article,
    .contact-options article:first-child {
        min-height: 0;

        padding:
            24px
            0;

        border-right: 0;

        border-bottom:
            1px solid rgba(30,28,24,.12);
    }

    .contact-options article:last-child {
        border-top: 0;
        border-bottom: 0;
    }

    .contact-options article > span {
        margin-bottom: 28px;
    }

    .contact-planning-panel {
        width:
            calc(100% - 24px);

        margin-bottom: 70px;

        border-radius: 27px;
    }

    .contact-planning-copy {
        padding:
            44px
            21px
            48px;
    }

    .contact-planning-copy h2 {
        font-size: 42px;
    }

    .contact-planning-media {
        min-height: 360px;
    }

    .contact-faq-link {
        width:
            calc(100% - 24px);

        margin-bottom: 50px;

        align-items: flex-start;

        flex-direction: column;

        padding:
            28px
            21px;
    }

}


/* Small phones */

@media (max-width: 390px) {

    .faq-page-hero h1,
    .contact-hero h1 {
        font-size: 47px;
    }

    .faq-contact-cta h2,
    .contact-planning-copy h2 {
        font-size: 39px;
    }

}

/* END V6N FAQ + CONTACT */

/* ==========================================================
   AL BADI — V6Q HERO COPY TRANSITION ISOLATION
   Keep image crossfade, prevent outgoing/incoming titles
   from overlapping during slide transitions.
   ========================================================== */

.hero-slide .hero-copy {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 120ms ease,
        visibility 0s linear 120ms;
}

.hero-slide.is-active .hero-copy {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 180ms ease,
        visibility 0s linear 0s;
}

/*
 * Immediately suppress animated children once their slide
 * is no longer active. This avoids animation-fill retaining
 * visible text during the background crossfade.
 */
.hero-slide:not(.is-active) .hero-copy .eyebrow,
.hero-slide:not(.is-active) .hero-copy .hero-slide-heading span,
.hero-slide:not(.is-active) .hero-copy > p,
.hero-slide:not(.is-active) .hero-copy .hero-actions {
    opacity: 0 !important;
}

/* Reduced-motion remains clean as well. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide .hero-copy,
    .hero-slide.is-active .hero-copy {
        transition: none;
    }
}


/* ==========================================================
   AL BADI — V6R HERO RIGHT SELECTOR CARD ISOLATION
   Prevent global destination tile styles from affecting
   the hero slide selector cards.
   ========================================================== */

.hero-card-rail .destination-card {
    display: grid !important;
    grid-template-columns:
        54px
        28px
        minmax(0, 1fr) !important;

    align-items: center !important;
    column-gap: 11px !important;
}

.hero-card-rail .destination-thumb {
    grid-column: 1;
    grid-row: 1;

    position: relative;
    z-index: 1;

    flex: none;
}

.hero-card-rail .destination-number {
    grid-column: 2;
    grid-row: 1;

    position: static !important;

    align-self: center;
    justify-self: center;

    padding: 0 !important;

    line-height: 1;
}

.hero-card-rail .destination-copy {
    grid-column: 3;
    grid-row: 1;

    position: static !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    z-index: auto !important;

    display: grid !important;
    align-content: center;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.hero-card-rail .destination-copy small {
    display: block;

    margin: 0 0 4px !important;
    padding: 0 !important;

    font-size: 10px !important;
    line-height: 1.1 !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-card-rail .destination-copy strong {
    display: block;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.12 !important;
    letter-spacing: -.015em !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet/mobile retains its smaller thumbnail dimensions. */
@media (max-width: 900px) {

    .hero-card-rail .destination-card {
        grid-template-columns:
            52px
            26px
            minmax(0,1fr) !important;
    }

}

/* Small phones. */
@media (max-width: 520px) {

    .hero-card-rail .destination-card {
        grid-template-columns:
            48px
            24px
            minmax(0,1fr) !important;
    }

    .hero-card-rail .destination-copy small {
        font-size: 9px !important;
    }

    .hero-card-rail .destination-copy strong {
        font-size: 13px !important;
    }

}


/* ==========================================================
   AL BADI — V6S PREMIUM JOURNEY BRIDGE
   ========================================================== */

.journey-bridge {
    position: relative;
    z-index: 20;

    width:
        min(
            calc(100% - 48px),
            1450px
        );

    margin:
        -72px
        auto
        0;

    padding:
        0
        clamp(4px, 1.2vw, 18px);
}

.journey-bridge-shell {
    position: relative;

    min-height: 190px;

    display: grid;
    grid-template-columns:
        minmax(280px, .92fr)
        minmax(430px, 1.28fr)
        minmax(260px, .78fr);

    gap:
        clamp(28px, 4vw, 64px);

    align-items: center;

    padding:
        clamp(28px, 3.5vw, 48px)
        clamp(28px, 4vw, 58px);

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:
        34px;

    background:
        linear-gradient(
            125deg,
            #151a16 0%,
            #111612 55%,
            #171b16 100%
        );

    box-shadow:
        0 35px 100px rgba(24,20,15,.18);

    color:
        #fff;
}

.journey-bridge-shell::before {
    content: "";

    position: absolute;

    width:
        300px;
    height:
        300px;

    right:
        -90px;
    top:
        -160px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(239,107,49,.18),
            rgba(239,107,49,0) 69%
        );

    pointer-events:
        none;
}

.journey-bridge-shell::after {
    content: "";

    position: absolute;

    left:
        0;
    right:
        0;
    bottom:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(239,107,49,.55),
            transparent
        );

    opacity:
        .7;
}

.journey-bridge-intro {
    position: relative;
    z-index: 2;
}

.journey-bridge-eyebrow {
    display: block;

    margin-bottom:
        15px;

    color:
        #f47a45;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}

.journey-bridge-intro > strong {
    display: block;

    max-width:
        370px;

    font-size:
        clamp(24px, 2.2vw, 34px);

    line-height:
        1.04;

    letter-spacing:
        -.045em;
}

.journey-bridge-intro > strong span {
    display: block;

    margin-top:
        4px;

    color:
        rgba(255,255,255,.52);

    font-weight:
        360;
}

.journey-bridge-route {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        auto
        minmax(22px,1fr)
        auto
        minmax(22px,1fr)
        auto;

    gap:
        14px;

    align-items:
        center;
}

.journey-route-stop {
    display: flex;

    align-items:
        center;

    gap:
        11px;

    min-width:
        0;
}

.journey-route-stop > span {
    width:
        37px;

    height:
        37px;

    flex:
        0 0 37px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius:
        50%;

    color:
        #f47a45;

    background:
        rgba(255,255,255,.045);

    font-size:
        8px;

    font-weight:
        850;
}

.journey-route-stop small {
    display:
        block;

    margin-bottom:
        3px;

    color:
        rgba(255,255,255,.42);

    font-size:
        8px;

    font-weight:
        750;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}

.journey-route-stop strong {
    display:
        block;

    font-size:
        13px;

    line-height:
        1;

    white-space:
        nowrap;
}

.journey-route-line {
    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.10),
            rgba(244,122,69,.70),
            rgba(255,255,255,.10)
        );

    position:
        relative;
}

.journey-route-line::after {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        -2px;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #f47a45;

    transform:
        translateY(-50%);

    box-shadow:
        0 0 0 5px rgba(244,122,69,.08);
}

.journey-bridge-action {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    gap:
        20px;
}

.journey-bridge-trust {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px
        15px;
}

.journey-bridge-trust span {
    position:
        relative;

    padding-left:
        10px;

    color:
        rgba(255,255,255,.55);

    font-size:
        9px;

    line-height:
        1.3;
}

.journey-bridge-trust span::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        .48em;

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        #f47a45;
}

.journey-bridge-cta {
    min-height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0
        20px;

    border-radius:
        999px;

    background:
        #ef6b31;

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        -.01em;

    box-shadow:
        0 16px 40px rgba(239,107,49,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.journey-bridge-cta:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 20px 46px rgba(239,107,49,.27);
}

.journey-bridge-cta b {
    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(0,0,0,.13);

    font-size:
        15px;

    font-weight:
        500;
}

/*
 * Bridge already occupies visual space above intro,
 * so reduce the intro's top gap slightly.
 */
.journey-bridge + .v5-intro {
    padding-top:
        clamp(58px, 6vw, 86px);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

    .journey-bridge-shell {
        grid-template-columns:
            minmax(220px,.75fr)
            minmax(390px,1.25fr);

        gap:
            30px
            45px;
    }

    .journey-bridge-action {
        grid-column:
            1 / -1;

        grid-template-columns:
            1fr
            minmax(230px, 300px);

        align-items:
            center;
    }

}


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

@media (max-width: 700px) {

    .journey-bridge {
        width:
            calc(100% - 24px);

        margin-top:
            -38px;

        padding:
            0;
    }

    .journey-bridge-shell {
        min-height:
            0;

        display:
            block;

        padding:
            28px
            22px
            22px;

        border-radius:
            27px;
    }

    .journey-bridge-intro > strong {
        max-width:
            310px;

        font-size:
            28px;
    }

    .journey-bridge-route {
        margin:
            30px
            0;

        grid-template-columns:
            1fr;
    }

    .journey-route-stop {
        min-height:
            48px;
    }

    .journey-route-line {
        width:
            1px;

        height:
            22px;

        margin-left:
            18px;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.10),
                rgba(244,122,69,.70),
                rgba(255,255,255,.10)
            );
    }

    .journey-route-line::after {
        top:
            auto;

        right:
            auto;

        left:
            50%;

        bottom:
            -2px;

        transform:
            translateX(-50%);
    }

    .journey-bridge-action {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            18px;
    }

    .journey-bridge-trust {
        gap:
            8px
            12px;
    }

    .journey-bridge-cta {
        width:
            100%;
    }

    .journey-bridge + .v5-intro {
        padding-top:
            55px;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 390px) {

    .journey-bridge {
        width:
            calc(100% - 18px);
    }

    .journey-bridge-shell {
        padding:
            25px
            18px
            18px;

        border-radius:
            24px;
    }

    .journey-bridge-intro > strong {
        font-size:
            26px;
    }

}


/* ==========================================================
   AL BADI — V6T BRIDGE / INTRO FINAL COMPOSITION
   ========================================================== */

@media (min-width: 901px) {

    .journey-bridge-shell {
        min-height: 172px;

        padding-top:
            32px;

        padding-bottom:
            32px;
    }

    .journey-bridge + .v5-intro {
        padding-top:
            42px !important;
    }

    .journey-bridge + .v5-intro .v5-intro-kicker {
        margin-bottom:
            32px !important;
    }

    .journey-bridge + .v5-intro .v5-intro-grid {
        align-items:
            start;
    }

}


/* Tablet */
@media (min-width: 701px) and (max-width: 900px) {

    .journey-bridge + .v5-intro {
        padding-top:
            48px !important;
    }

    .journey-bridge + .v5-intro .v5-intro-kicker {
        margin-bottom:
            30px !important;
    }

}


/* Mobile */
@media (max-width: 700px) {

    .journey-bridge + .v5-intro {
        padding-top:
            44px !important;
    }

    .journey-bridge + .v5-intro .v5-intro-kicker {
        margin-bottom:
            27px !important;
    }

}


/* ==========================================================
   AL BADI — V6U PREMIUM TRIP FINDER
   ========================================================== */

.trip-finder {
    position: relative;
    z-index: 20;

    width:
        min(
            calc(100% - 48px),
            1450px
        );

    margin:
        -62px
        auto
        0;

    padding:
        0
        clamp(4px, 1.2vw, 18px);
}

.trip-finder-panel {
    position: relative;

    padding:
        27px
        clamp(26px, 3.5vw, 48px)
        22px;

    overflow: hidden;

    border:
        1px solid rgba(38,32,24,.09);

    border-radius:
        32px;

    background:
        linear-gradient(
            135deg,
            rgba(255,253,248,.98),
            rgba(246,241,232,.98)
        );

    box-shadow:
        0 32px 95px rgba(38,31,21,.16);

    color:
        #171715;
}

.trip-finder-panel::before {
    content: "";

    position: absolute;

    width:
        280px;

    height:
        280px;

    top:
        -190px;

    right:
        -70px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(239,107,49,.14),
            rgba(239,107,49,0) 70%
        );

    pointer-events:
        none;
}

.trip-finder-top {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap:
        30px;

    margin-bottom:
        20px;
}

.trip-finder-heading {
    display: flex;

    align-items: flex-end;

    gap:
        clamp(20px, 3vw, 42px);
}

.trip-finder-eyebrow {
    flex:
        0 0 auto;

    padding-bottom:
        3px;

    color:
        #ef6b31;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}

.trip-finder-heading strong {
    display:
        block;

    font-size:
        clamp(22px, 2vw, 31px);

    line-height:
        1;

    letter-spacing:
        -.045em;
}

.trip-finder-heading p {
    margin:
        6px
        0
        0;

    max-width:
        520px;

    color:
        #787169;

    font-size:
        11px;

    line-height:
        1.5;
}

.trip-finder-note {
    flex:
        0 0 auto;

    color:
        #8d867c;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.trip-finder-form {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1.1fr
        1.1fr
        .95fr
        .85fr
        1fr
        1.05fr;

    gap:
        8px;
}

.trip-finder-field {
    min-width:
        0;

    min-height:
        66px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        10px
        14px;

    border:
        1px solid rgba(31,27,22,.08);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.72);

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.trip-finder-field:hover {
    border-color:
        rgba(239,107,49,.22);

    background:
        #fff;
}

.trip-finder-field:focus-within {
    border-color:
        rgba(239,107,49,.42);

    background:
        #fff;

    transform:
        translateY(-1px);
}

.trip-finder-field > span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #9a9288;

    font-size:
        7px;

    font-weight:
        850;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}

.trip-finder-field select,
.trip-finder-field input {
    width:
        100%;

    min-width:
        0;

    padding:
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        #201f1c;

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;
}

.trip-finder-field input[type="date"] {
    color-scheme:
        light;
}

.trip-finder-submit {
    min-height:
        66px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        0
        17px
        0
        20px;

    border:
        0;

    border-radius:
        18px;

    background:
        #ef6b31;

    color:
        #fff;

    cursor:
        pointer;

    box-shadow:
        0 14px 34px rgba(239,107,49,.21);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.trip-finder-submit:hover {
    transform:
        translateY(-2px);

    background:
        #f2763f;

    box-shadow:
        0 19px 42px rgba(239,107,49,.27);
}

.trip-finder-submit span {
    font-size:
        11px;

    font-weight:
        850;
}

.trip-finder-submit b {
    width:
        31px;

    height:
        31px;

    flex:
        0 0 31px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(0,0,0,.11);

    font-size:
        15px;

    font-weight:
        500;
}


.trip-finder-popular {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px
        15px;

    margin-top:
        15px;
}

.trip-finder-popular > span {
    color:
        #a09990;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}

.trip-finder-popular a {
    position:
        relative;

    color:
        #57514b;

    font-size:
        9px;

    font-weight:
        700;
}

.trip-finder-popular a:not(:last-child)::after {
    content:
        "•";

    margin-left:
        15px;

    color:
        #ef6b31;
}


/*
 * Trip finder now performs the visual transition
 * between hero and homepage intro.
 */
.trip-finder + .v5-intro {
    padding-top:
        clamp(48px, 5vw, 72px) !important;
}


/* ==========================================================
   TABLET / SMALL LAPTOP
   ========================================================== */

@media (max-width: 1100px) {

    .trip-finder-form {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

    .trip-finder-submit {
        grid-column:
            span 1;
    }

}


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

@media (max-width: 700px) {

    .trip-finder {
        width:
            calc(100% - 24px);

        margin-top:
            -36px;

        padding:
            0;
    }

    .trip-finder-panel {
        padding:
            24px
            18px
            19px;

        border-radius:
            27px;
    }

    .trip-finder-top {
        display:
            block;

        margin-bottom:
            18px;
    }

    .trip-finder-heading {
        display:
            block;
    }

    .trip-finder-eyebrow {
        display:
            block;

        margin-bottom:
            10px;
    }

    .trip-finder-heading strong {
        font-size:
            25px;
    }

    .trip-finder-heading p {
        max-width:
            95%;

        font-size:
            11px;
    }

    .trip-finder-note {
        display:
            none;
    }

    .trip-finder-form {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap:
            7px;
    }

    .trip-finder-field {
        min-height:
            62px;

        padding:
            9px
            12px;

        border-radius:
            14px;
    }

    .trip-finder-submit {
        grid-column:
            1 / -1;

        min-height:
            58px;

        margin-top:
            2px;

        border-radius:
            15px;
    }

    .trip-finder-popular {
        gap:
            9px
            12px;

        margin-top:
            17px;
    }

    .trip-finder-popular a:not(:last-child)::after {
        margin-left:
            12px;
    }

    .trip-finder + .v5-intro {
        padding-top:
            43px !important;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 390px) {

    .trip-finder {
        width:
            calc(100% - 18px);
    }

    .trip-finder-panel {
        padding:
            22px
            14px
            17px;

        border-radius:
            24px;
    }

    .trip-finder-heading strong {
        font-size:
            23px;
    }

    .trip-finder-field select,
    .trip-finder-field input {
        font-size:
            10px;
    }

}


/* ==========================================================
   AL BADI — V6V PREMIUM INTRO EDITORIAL POLISH
   ========================================================== */

.intro-editorial {
    width: min(100% - 48px, 1320px);
    margin: clamp(34px, 4vw, 56px) auto 0;
    padding: 0 0 clamp(44px, 6vw, 72px);
}

.intro-editorial-topline {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    margin-bottom: clamp(38px, 5vw, 62px);
}

.intro-editorial-label,
.intro-editorial-region {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.intro-editorial-label {
    color: #ef6b31;
}

.intro-editorial-region {
    color: #8a8379;
    text-align: right;
}

.intro-editorial-line {
    height: 1px;
    background: rgba(24,22,18,.12);
}

.intro-editorial-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    gap: clamp(38px, 6vw, 96px);
    align-items: start;
}

.intro-editorial-left {
    padding-top: 8px;
}

.intro-editorial-kicker {
    display: inline-block;
    margin-bottom: 18px;
    color: #8c8479;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.intro-editorial-left h2 {
    max-width: 700px;
    margin: 0;
    color: #121212;
    font-size: clamp(62px, 8vw, 110px);
    line-height: .90;
    letter-spacing: -.075em;
}

.intro-editorial-left h2 span {
    display: block;
    color: #26231f;
    font-weight: 320;
}

.intro-editorial-left > p {
    max-width: 540px;
    margin: 28px 0 0;
    color: #6f695f;
    font-size: 16px;
    line-height: 1.78;
}

.intro-editorial-right {
    display: grid;
    gap: 18px;
}

.intro-editorial-card {
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid rgba(24,22,18,.08);
    border-radius: 30px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.95) 0%,
            rgba(249,247,242,.98) 100%
        );
    box-shadow:
        0 24px 70px rgba(33,28,20,.06),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.intro-card-label {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(239,107,49,.10);
    color: #d95e29;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.intro-editorial-card p {
    margin: 18px 0 0;
    color: #676157;
    font-size: 14px;
    line-height: 1.8;
}

.intro-editorial-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 24px;
}

.intro-primary-cta,
.intro-secondary-cta {
    min-height: 86px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 16px 18px;
    border-radius: 22px;
    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease,
        background .24s ease;
}

.intro-primary-cta {
    background: #ef6b31;
    color: #fff;
    box-shadow: 0 18px 34px rgba(239,107,49,.20);
}

.intro-secondary-cta {
    border: 1px solid rgba(24,22,18,.10);
    background: rgba(255,255,255,.72);
    color: #171513;
}

.intro-primary-cta span,
.intro-secondary-cta span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .88;
}

.intro-primary-cta strong,
.intro-secondary-cta strong {
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.intro-primary-cta:hover,
.intro-secondary-cta:hover {
    transform: translateY(-2px);
}

.intro-primary-cta:hover {
    box-shadow: 0 24px 44px rgba(239,107,49,.25);
}

.intro-secondary-cta:hover {
    border-color: rgba(24,22,18,.18);
    background: #fff;
}

.intro-service-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.intro-service-chips a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(24,22,18,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #3d3832;
    font-size: 11px;
    font-weight: 700;
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        color .22s ease;
}

.intro-service-chips a:hover {
    transform: translateY(-1px);
    border-color: rgba(239,107,49,.36);
    background: rgba(239,107,49,.07);
    color: #d65f2b;
}

.intro-trust-note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    color: #8a8378;
    font-size: 11px;
    font-weight: 700;
}

.intro-trust-note span {
    position: relative;
    padding-left: 14px;
}

.intro-trust-note span::before {
    content: "";
    position: absolute;
    left: 0;
    top: .52em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ef6b31;
}

@media (max-width: 1100px) {
    .intro-editorial-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .intro-editorial-left h2 {
        max-width: 760px;
    }

    .intro-editorial-right {
        max-width: 760px;
    }
}

@media (max-width: 700px) {
    .intro-editorial {
        width: calc(100% - 32px);
        margin-top: 26px;
        padding-bottom: 54px;
    }

    .intro-editorial-topline {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 28px;
    }

    .intro-editorial-line {
        display: none;
    }

    .intro-editorial-region {
        text-align: left;
    }

    .intro-editorial-left h2 {
        font-size: clamp(46px, 14vw, 72px);
        line-height: .93;
    }

    .intro-editorial-left > p {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.75;
    }

    .intro-editorial-card {
        padding: 21px;
        border-radius: 24px;
    }

    .intro-editorial-actions {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px;
    }

    .intro-primary-cta,
    .intro-secondary-cta {
        min-height: 74px;
        padding: 14px 16px;
        border-radius: 18px;
    }

    .intro-primary-cta strong,
    .intro-secondary-cta strong {
        font-size: 14px;
    }

    .intro-service-chips {
        gap: 8px;
    }

    .intro-service-chips a {
        min-height: 34px;
        padding: 0 12px;
        font-size: 10px;
    }

    .intro-trust-note {
        gap: 8px 16px;
        font-size: 10px;
    }
}

@media (max-width: 390px) {
    .intro-editorial-left h2 {
        font-size: 42px;
    }
}

/* END V6V PREMIUM INTRO EDITORIAL POLISH */

/* ==========================================================
   AL BADI — V6W CLEAN TRIP FINDER TO SERVICES TRANSITION
   ========================================================== */

.trip-finder + .v5-service-section {
    padding-top:
        clamp(58px, 7vw, 92px);
}

@media (max-width: 700px) {
    .trip-finder + .v5-service-section {
        padding-top:
            48px;
    }
}

/* END V6W */


/* ==========================================================
   AL BADI — V6X HOMEPAGE SERVICES FULL-WIDTH POLISH
   Make service section cleaner, centered and premium.
   ========================================================== */

.v5-service-section {
    padding-top: clamp(54px, 7vw, 92px);
    padding-bottom: clamp(70px, 8vw, 110px);
}

.v5-section-heading {
    width: min(100% - 48px, 1320px);
    margin:
        0
        auto
        clamp(30px, 4vw, 46px);

    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, .52fr);

    gap: clamp(28px, 5vw, 72px);
    align-items: end;
}

.v5-section-heading h2 {
    max-width: 980px;
    margin: 0;
    font-size: clamp(58px, 7vw, 112px);
    line-height: .92;
    letter-spacing: -.07em;
}

.v5-section-heading > p {
    max-width: 420px;
    margin: 0 0 10px auto;
    color: #746d64;
    font-size: 16px;
    line-height: 1.75;
}

.v5-service-grid {
    width: min(100% - 48px, 1320px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.v5-service-card,
.v5-service-card-large {
    width: 100%;
    min-width: 0;
    margin: 0;
    min-height: 520px;
}

.v5-service-card-large {
    grid-column: span 7;
}

.v5-service-card {
    grid-column: span 5;
}

.v5-service-card:nth-child(3),
.v5-service-card:nth-child(4) {
    min-height: 430px;
}

.v5-service-card img,
.v5-service-card-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v5-service-copy {
    max-width: 92%;
}

.v5-service-copy h3 {
    font-size: clamp(34px, 3.3vw, 58px);
    line-height: .95;
    letter-spacing: -.05em;
}

.v5-service-copy p {
    max-width: 560px;
    font-size: 14px;
    line-height: 1.7;
}

.v5-service-card .button,
.v5-service-card-large .button {
    min-height: 48px;
    padding: 0 18px;
}

@media (max-width: 1180px) {
    .v5-section-heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .v5-section-heading > p {
        max-width: 720px;
        margin: 0;
    }

    .v5-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v5-service-card,
    .v5-service-card-large {
        grid-column: span 1;
        min-height: 450px;
    }
}

@media (max-width: 900px) {
    .v5-service-section {
        padding-top: 42px;
        padding-bottom: 80px;
    }

    .v5-section-heading {
        width: min(100% - 36px, 1320px);
        margin-bottom: 28px;
        gap: 16px;
    }

    .v5-section-heading h2 {
        font-size: clamp(42px, 11vw, 68px);
        line-height: .96;
    }

    .v5-section-heading > p {
        font-size: 14px;
        line-height: 1.68;
    }

    .v5-service-grid {
        width: min(100% - 36px, 1320px);
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .v5-service-card,
    .v5-service-card-large {
        grid-column: auto;
        min-height: 380px;
    }

    .v5-service-copy {
        max-width: 100%;
    }

    .v5-service-copy h3 {
        font-size: clamp(31px, 8vw, 46px);
    }
}

@media (max-width: 700px) {
    .v5-service-section {
        overflow: visible;
    }

    .v5-section-heading {
        width: calc(100% - 32px);
    }

    .v5-service-grid {
        width: calc(100% - 32px);
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    .v5-service-card,
    .v5-service-card-large {
        flex: none !important;
        min-height: 340px;
        width: 100% !important;
    }

    .v5-service-copy h3 {
        font-size: clamp(28px, 8vw, 40px);
    }

    .v5-service-copy p {
        font-size: 13px;
        line-height: 1.65;
    }
}

@media (max-width: 390px) {
    .v5-section-heading h2 {
        font-size: 39px;
    }

    .v5-service-card,
    .v5-service-card-large {
        min-height: 320px;
    }
}

/* END V6X */

/* ==========================================================
   AL BADI — V6Y2 SERVICES GLASS BILLBOARD
   ========================================================== */

.v6y-glass-heading {
    width: min(100% - 48px, 1320px) !important;
    margin:
        0
        auto
        clamp(34px, 4vw, 52px) !important;

    padding: 0 !important;

    display: block !important;
}

.v6y-glass-shell {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    min-height: 500px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, .55fr);

    gap:
        clamp(35px, 6vw, 90px);

    align-items: center;

    padding:
        clamp(38px, 5vw, 68px);

    border:
        1px solid rgba(255,255,255,.72);

    border-radius:
        38px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.76) 0%,
            rgba(255,252,246,.53) 47%,
            rgba(237,230,219,.42) 100%
        );

    box-shadow:
        0 36px 100px rgba(39,30,19,.10),
        inset 0 1px 0 rgba(255,255,255,.90);

    backdrop-filter:
        blur(26px);

    -webkit-backdrop-filter:
        blur(26px);
}


/* Fine glass highlight */
.v6y-glass-shell::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset:
        1px;

    border-radius:
        inherit;

    background:
        linear-gradient(
            118deg,
            rgba(255,255,255,.44) 0%,
            rgba(255,255,255,.04) 34%,
            rgba(255,255,255,.13) 70%,
            rgba(255,255,255,.28) 100%
        );

    pointer-events: none;
}


/* Soft grain-like visual layer */
.v6y-glass-shell::after {
    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    opacity: .20;

    background-image:
        radial-gradient(
            circle at 20% 25%,
            rgba(255,255,255,.9) 0 1px,
            transparent 1.5px
        );

    background-size:
        13px 13px;

    mask-image:
        linear-gradient(
            90deg,
            #000,
            transparent 55%
        );

    pointer-events: none;
}


/* Photoshop-style decorative forms */

.v6y-art-orb {
    position: absolute;

    z-index: -2;

    display: block;

    border-radius:
        50%;

    filter:
        blur(4px);

    pointer-events:
        none;
}

.v6y-art-orb-one {
    width:
        420px;

    height:
        420px;

    top:
        -230px;

    right:
        18%;

    background:
        radial-gradient(
            circle at 45% 45%,
            rgba(239,107,49,.34),
            rgba(239,107,49,.09) 38%,
            transparent 70%
        );
}

.v6y-art-orb-two {
    width:
        360px;

    height:
        360px;

    left:
        -170px;

    bottom:
        -230px;

    background:
        radial-gradient(
            circle,
            rgba(203,181,143,.34),
            rgba(203,181,143,.05) 58%,
            transparent 74%
        );
}

.v6y-art-line {
    position: absolute;

    z-index: -1;

    width:
        430px;

    height:
        430px;

    right:
        27%;

    top:
        50%;

    border:
        1px solid rgba(239,107,49,.12);

    border-radius:
        50%;

    transform:
        translateY(-50%);

    pointer-events:
        none;
}

.v6y-art-line::before,
.v6y-art-line::after {
    content: "";

    position: absolute;

    border:
        1px solid rgba(40,35,27,.055);

    border-radius:
        inherit;
}

.v6y-art-line::before {
    inset:
        28px;
}

.v6y-art-line::after {
    inset:
        65px;
}


/* Main editorial typography */

.v6y-glass-main {
    position: relative;

    z-index: 2;

    max-width:
        780px;
}

.v6y-kicker {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        34px;

    margin-bottom:
        25px;

    padding:
        0
        14px;

    border:
        1px solid rgba(239,107,49,.18);

    border-radius:
        999px;

    background:
        rgba(255,247,241,.68);

    color:
        #df622d;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .17em;

    text-transform:
        uppercase;
}

.v6y-glass-main h2 {
    margin: 0 !important;

    max-width:
        850px !important;

    line-height:
        .87 !important;

    letter-spacing:
        -.067em !important;
}

.v6y-glass-main h2 > span {
    display:
        block;
}

.v6y-title-bold {
    color:
        #12110f;

    font-size:
        clamp(60px, 7.1vw, 112px);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif;

    font-style:
        normal;

    font-weight:
        770;
}

.v6y-title-light {
    margin-top:
        7px;

    color:
        rgba(21,19,16,.72);

    font-size:
        clamp(46px, 5.5vw, 86px);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif;

    font-weight:
        270;
}

.v6y-title-serif {
    margin-top:
        4px;

    color:
        #27221d;

    font-size:
        clamp(58px, 6.4vw, 102px);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style:
        italic;

    font-weight:
        400;

    letter-spacing:
        -.055em;
}

.v6y-lead {
    max-width:
        670px !important;

    margin:
        29px
        0
        0 !important;

    color:
        #6e675e !important;

    font-size:
        16px !important;

    line-height:
        1.76 !important;
}


/* Right glass modules */

.v6y-glass-side {
    position: relative;

    z-index: 3;

    display:
        grid;

    gap:
        13px;
}

.v6y-mini-card {
    display:
        grid;

    grid-template-columns:
        42px
        minmax(0,1fr);

    gap:
        15px;

    padding:
        20px;

    border:
        1px solid rgba(255,255,255,.72);

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.67),
            rgba(255,255,255,.34)
        );

    box-shadow:
        0 18px 50px rgba(34,28,20,.055),
        inset 0 1px 0 rgba(255,255,255,.84);

    backdrop-filter:
        blur(17px);

    -webkit-backdrop-filter:
        blur(17px);
}

.v6y-mini-number {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(239,107,49,.18);

    border-radius:
        50%;

    color:
        #e96830;

    background:
        rgba(255,248,243,.66);

    font-size:
        9px;

    font-weight:
        850;
}

.v6y-mini-card span {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #e5662e;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}

.v6y-mini-card strong {
    display:
        block;

    color:
        #171512;

    font-size:
        19px;

    line-height:
        1.08;

    letter-spacing:
        -.035em;
}

.v6y-mini-card p {
    margin:
        9px
        0
        0;

    color:
        #756e64;

    font-size:
        12px;

    line-height:
        1.6;
}

.v6y-glass-cta {
    min-height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0
        17px
        0
        21px;

    border-radius:
        20px;

    background:
        #ef6b31;

    color:
        #fff;

    box-shadow:
        0 18px 42px rgba(239,107,49,.22);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.v6y-glass-cta:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 24px 50px rgba(239,107,49,.28);
}

.v6y-glass-cta span {
    font-size:
        12px;

    font-weight:
        850;
}

.v6y-glass-cta b {
    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(0,0,0,.11);

    font-size:
        16px;

    font-weight:
        400;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

    .v6y-glass-shell {
        min-height:
            0;

        grid-template-columns:
            1fr;

        gap:
            28px;
    }

    .v6y-glass-side {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .v6y-glass-cta {
        grid-column:
            1 / -1;
    }

}


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

@media (max-width: 700px) {

    .v6y-glass-heading {
        width:
            calc(100% - 28px) !important;

        margin-bottom:
            25px !important;
    }

    .v6y-glass-shell {
        padding:
            25px
            17px
            17px;

        gap:
            24px;

        border-radius:
            27px;
    }

    .v6y-kicker {
        min-height:
            30px;

        margin-bottom:
            17px;

        font-size:
            8px;
    }

    .v6y-title-bold {
        font-size:
            clamp(40px, 12vw, 57px);
    }

    .v6y-title-light {
        margin-top:
            4px;

        font-size:
            clamp(33px, 9.5vw, 47px);
    }

    .v6y-title-serif {
        font-size:
            clamp(41px, 11vw, 54px);
    }

    .v6y-lead {
        margin-top:
            21px !important;

        font-size:
            14px !important;

        line-height:
            1.7 !important;
    }

    .v6y-glass-side {
        grid-template-columns:
            1fr;
    }

    .v6y-mini-card {
        padding:
            16px;

        border-radius:
            20px;
    }

    .v6y-mini-card strong {
        font-size:
            17px;
    }

    .v6y-glass-cta {
        grid-column:
            auto;

        min-height:
            58px;
    }

    .v6y-art-line {
        width:
            300px;

        height:
            300px;

        top:
            30%;

        right:
            -170px;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 390px) {

    .v6y-glass-heading {
        width:
            calc(100% - 20px) !important;
    }

    .v6y-glass-shell {
        padding:
            22px
            14px
            14px;

        border-radius:
            24px;
    }

    .v6y-title-bold {
        font-size:
            39px;
    }

    .v6y-title-light {
        font-size:
            32px;
    }

    .v6y-title-serif {
        font-size:
            39px;
    }

}

/* END V6Y2 */

/* ==========================================================
   AL BADI — V6Z FINAL SERVICES CARD COMPOSITION
   Override legacy nth-child desktop sizing.
   ========================================================== */

@media (min-width: 901px) {

    .v5-service-section .v5-service-grid {
        width: min(100% - 48px, 1320px) !important;
        margin: 0 auto !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px !important;

        align-items: stretch !important;
    }

    .v5-service-section
    .v5-service-grid
    .v5-service-card,
    .v5-service-section
    .v5-service-grid
    .v5-service-card-large,
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(1),
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(2),
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(3),
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(4),
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(5) {
        grid-column: span 1 !important;

        width: 100% !important;

        min-height: 470px !important;

        margin: 0 !important;
    }

    /*
     * Closing service card spans the complete row.
     */
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(6) {
        grid-column: 1 / -1 !important;

        width: 100% !important;

        min-height: 390px !important;

        margin: 0 !important;
    }

    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(6)
    .v5-service-copy {
        max-width: 700px !important;
    }

    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(6)
    .v5-service-copy h3 {
        font-size:
            clamp(44px, 4.6vw, 68px) !important;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 701px) and (max-width: 900px) {

    .v5-service-section .v5-service-grid {
        width: calc(100% - 36px) !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 15px !important;

        margin: 0 auto !important;

        padding: 0 !important;
    }

    .v5-service-section
    .v5-service-grid
    .v5-service-card,
    .v5-service-section
    .v5-service-grid
    .v5-service-card-large {
        width: 100% !important;

        min-height: 390px !important;

        grid-column: span 1 !important;
    }

    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(6) {
        grid-column: 1 / -1 !important;
    }

}


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

@media (max-width: 700px) {

    .v5-service-section .v5-service-grid {
        width: calc(100% - 28px) !important;

        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 14px !important;

        margin: 0 auto !important;

        padding: 0 !important;

        overflow: visible !important;
    }

    .v5-service-section
    .v5-service-grid
    .v5-service-card,
    .v5-service-section
    .v5-service-grid
    .v5-service-card-large,
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(1),
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(2),
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(3),
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(4),
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(5),
    .v5-service-section
    .v5-service-grid
    .v5-service-card:nth-child(6) {
        grid-column: auto !important;

        width: 100% !important;

        min-height: 355px !important;

        margin: 0 !important;

        flex: none !important;
    }

}

@media (max-width: 390px) {

    .v5-service-section .v5-service-grid {
        width: calc(100% - 20px) !important;
    }

    .v5-service-section
    .v5-service-grid
    .v5-service-card,
    .v5-service-section
    .v5-service-grid
    .v5-service-card-large {
        min-height: 325px !important;
    }

}

/* END V6Z */

/* ==========================================================
   AL BADI — V6Z EDITORIAL SERVICE MOSAIC
   Mix landscape + portrait cards in a controlled premium grid.
   ========================================================== */

@media (min-width: 1001px) {

    .v5-service-section .v5-service-grid {
        width: min(100% - 48px, 1320px) !important;
        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(310px, .88fr) !important;

        grid-template-areas:
            "zanzibar zanzibar safari"
            "east accommodation accommodation"
            "cars cars support";

        grid-template-rows:
            450px
            430px
            420px;

        gap: 20px !important;

        overflow: visible !important;
    }


    /* 01 — Wide Zanzibar */
    .v5-service-section
    .v5-service-grid
    > .v5-service-card:nth-child(1) {
        grid-area: zanzibar !important;
    }


    /* 02 — Standing Safari */
    .v5-service-section
    .v5-service-grid
    > .v5-service-card:nth-child(2) {
        grid-area: safari !important;
    }


    /* 03 — Standing East Africa */
    .v5-service-section
    .v5-service-grid
    > .v5-service-card:nth-child(3) {
        grid-area: east !important;
    }


    /* 04 — Wide Accommodation */
    .v5-service-section
    .v5-service-grid
    > .v5-service-card:nth-child(4) {
        grid-area: accommodation !important;
    }


    /* 05 — Wide transport */
    .v5-service-section
    .v5-service-grid
    > .v5-service-card:nth-child(5) {
        grid-area: cars !important;
    }


    /* 06 — Standing local support */
    .v5-service-section
    .v5-service-grid
    > .v5-service-card:nth-child(6) {
        grid-area: support !important;
    }


    /*
     * Neutralize every older width/span rule.
     */
    .v5-service-section
    .v5-service-grid
    > .v5-service-card,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large {
        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;

        grid-column: auto;
        grid-row: auto;

        flex: none !important;

        overflow: hidden;

        border-radius: 30px !important;
    }


    /*
     * Landscape cards get wider editorial copy.
     */
    .v5-service-grid
    > .v5-service-card:nth-child(1)
    .v5-service-copy,
    .v5-service-grid
    > .v5-service-card:nth-child(4)
    .v5-service-copy,
    .v5-service-grid
    > .v5-service-card:nth-child(5)
    .v5-service-copy {
        max-width: 620px !important;
    }


    /*
     * Portrait cards need tighter text so the imagery
     * remains part of the composition.
     */
    .v5-service-grid
    > .v5-service-card:nth-child(2)
    .v5-service-copy,
    .v5-service-grid
    > .v5-service-card:nth-child(3)
    .v5-service-copy,
    .v5-service-grid
    > .v5-service-card:nth-child(6)
    .v5-service-copy {
        max-width: 88% !important;
    }

    .v5-service-grid
    > .v5-service-card:nth-child(2)
    .v5-service-copy h3,
    .v5-service-grid
    > .v5-service-card:nth-child(3)
    .v5-service-copy h3,
    .v5-service-grid
    > .v5-service-card:nth-child(6)
    .v5-service-copy h3 {
        font-size:
            clamp(32px, 3vw, 49px) !important;
    }

    .v5-service-grid
    > .v5-service-card:nth-child(2)
    .v5-service-copy p,
    .v5-service-grid
    > .v5-service-card:nth-child(3)
    .v5-service-copy p,
    .v5-service-grid
    > .v5-service-card:nth-child(6)
    .v5-service-copy p {
        font-size: 13px !important;
        line-height: 1.62 !important;
    }


    /*
     * Keep backgrounds visually intentional.
     */
    .v5-service-grid > article {
        background-position: center !important;
        background-size: cover !important;
    }

    .v5-service-grid
    > article:nth-child(2) {
        background-position: 62% center !important;
    }

    .v5-service-grid
    > article:nth-child(3) {
        background-position: 52% center !important;
    }

    .v5-service-grid
    > article:nth-child(5) {
        background-position: center 58% !important;
    }

}


/* ==========================================================
   TABLET — clean 2-column composition
   ========================================================== */

@media (min-width: 701px) and (max-width: 1000px) {

    .v5-service-section .v5-service-grid {
        width: calc(100% - 36px) !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap: 16px !important;

        overflow: visible !important;
    }

    .v5-service-section
    .v5-service-grid
    > .v5-service-card,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large {
        width: 100% !important;

        min-height: 410px !important;

        margin: 0 !important;

        grid-column: auto !important;
        grid-row: auto !important;

        flex: none !important;
    }

    /*
     * Give two key cards a landscape/full-row treatment.
     */
    .v5-service-section
    .v5-service-grid
    > .v5-service-card:nth-child(1),
    .v5-service-section
    .v5-service-grid
    > .v5-service-card:nth-child(5) {
        grid-column:
            1 / -1 !important;

        min-height:
            390px !important;
    }

}


/* ==========================================================
   MOBILE — full width, no carousel clipping
   ========================================================== */

@media (max-width: 700px) {

    .v5-service-section .v5-service-grid {
        width: calc(100% - 28px) !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 14px !important;

        overflow: visible !important;
    }

    .v5-service-section
    .v5-service-grid
    > .v5-service-card,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 350px !important;

        margin: 0 !important;

        grid-column: auto !important;
        grid-row: auto !important;

        flex: none !important;

        border-radius:
            24px !important;
    }

    .v5-service-section
    .v5-service-copy {
        max-width:
            94% !important;
    }

}


@media (max-width: 390px) {

    .v5-service-section .v5-service-grid {
        width:
            calc(100% - 20px) !important;
    }

    .v5-service-section
    .v5-service-grid
    > .v5-service-card,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large {
        min-height:
            325px !important;
    }

}

/* END V6Z EDITORIAL SERVICE MOSAIC */

/* ==========================================================
   AL BADI — V6Z2 FINAL MOSAIC FIT + GLOW
   Smaller, tighter, premium editorial grid with subtle
   stroke + outer glow. Aim: more cards visible in one screen.
   ========================================================== */

@media (min-width: 1001px) {

    .v5-service-section {
        padding-top: clamp(28px, 3vw, 44px) !important;
        padding-bottom: clamp(44px, 5vw, 70px) !important;
    }

    .v5-section-heading {
        width: min(100% - 48px, 1320px) !important;
        margin:
            0
            auto
            clamp(18px, 2vw, 26px) !important;
    }

    .v5-service-grid {
        width: min(100% - 48px, 1320px) !important;
        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        grid-auto-rows: 88px !important;
        gap: 18px !important;
        align-items: stretch !important;
    }

    .v5-service-grid > * {
        position: relative !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        border-radius: 34px !important;

        box-shadow:
            0 18px 38px rgba(16,22,24,.12),
            0 0 0 1px rgba(255,255,255,.18),
            0 0 26px rgba(255,255,255,.08) !important;

        outline: 1px solid rgba(255,255,255,.10);
        outline-offset: -1px;
    }

    .v5-service-grid > *::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.08) 0%,
                rgba(255,255,255,0) 22%,
                rgba(0,0,0,.08) 100%
            );

        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.08),
            inset 0 -50px 90px rgba(0,0,0,.18);
    }

    .v5-service-grid > *:hover {
        transform: translateY(-2px);
        box-shadow:
            0 22px 48px rgba(16,22,24,.16),
            0 0 0 1px rgba(255,255,255,.22),
            0 0 32px rgba(255,255,255,.10) !important;
    }

    .v5-service-grid > *:nth-child(1) {
        grid-column: span 8 !important;
        grid-row: span 2 !important;
    }

    .v5-service-grid > *:nth-child(2) {
        grid-column: span 4 !important;
        grid-row: span 2 !important;
    }

    .v5-service-grid > *:nth-child(3) {
        grid-column: span 4 !important;
        grid-row: span 2 !important;
    }

    .v5-service-grid > *:nth-child(4) {
        grid-column: span 8 !important;
        grid-row: span 2 !important;
    }

    .v5-service-grid > *:nth-child(5) {
        grid-column: span 5 !important;
        grid-row: span 2 !important;
    }

    .v5-service-grid > *:nth-child(6) {
        grid-column: span 7 !important;
        grid-row: span 2 !important;
    }

    .v5-service-grid > * img,
    .v5-service-grid > * picture,
    .v5-service-grid > * .travel-product-media,
    .v5-service-grid > * .v5-service-media {
        width: 100% !important;
        height: 100% !important;
    }

    .v5-service-grid > * img {
        object-fit: cover !important;
    }

    .v5-service-grid > * h3,
    .v5-service-grid > * h2 {
        max-width: 82% !important;
        margin-bottom: 12px !important;

        font-size: clamp(30px, 2.9vw, 54px) !important;
        line-height: .92 !important;
        letter-spacing: -.05em !important;

        text-shadow:
            0 6px 20px rgba(0,0,0,.28),
            0 0 18px rgba(255,255,255,.08);

        -webkit-text-stroke: .35px rgba(255,255,255,.12);
    }

    .v5-service-grid > * p {
        max-width: 72% !important;
        margin-bottom: 18px !important;

        font-size: 12px !important;
        line-height: 1.55 !important;
        color: rgba(255,255,255,.92) !important;

        text-shadow:
            0 4px 14px rgba(0,0,0,.22);
    }

    .v5-service-grid > * .button,
    .v5-service-grid > * .v5-service-link,
    .v5-service-grid > * a.button {
        min-height: 40px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        backdrop-filter: blur(10px);
        box-shadow:
            0 0 0 1px rgba(255,255,255,.18),
            0 8px 18px rgba(0,0,0,.15);
    }

    .v5-service-grid > * .section-label,
    .v5-service-grid > * .eyebrow,
    .v5-service-grid > * strong:first-child {
        text-shadow: 0 3px 10px rgba(0,0,0,.20);
    }
}

@media (max-width: 1000px) {

    .v5-service-section {
        padding-top: 28px !important;
        padding-bottom: 46px !important;
    }

    .v5-service-grid {
        gap: 14px !important;
    }

    .v5-service-grid > * {
        box-shadow:
            0 14px 28px rgba(16,22,24,.10),
            0 0 0 1px rgba(255,255,255,.16),
            0 0 18px rgba(255,255,255,.06) !important;
    }

    .v5-service-grid > * h3,
    .v5-service-grid > * h2 {
        text-shadow:
            0 5px 16px rgba(0,0,0,.24),
            0 0 10px rgba(255,255,255,.06);
    }
}

/* END V6Z2 */

/* ==========================================================
   AL BADI — V7A LUXURY EDITORIAL SERVICE DECK
   Complete visual departure:
   image gallery top + clean editorial information panel below.
   ========================================================== */

@media (min-width: 1001px) {

    .v5-service-section .v5-service-grid {
        width: min(100% - 48px, 1320px) !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        grid-template-areas: none !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;

        gap: 20px !important;

        overflow: visible !important;
    }

}


/* ----------------------------------------------------------
   BASE CARD
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
> .v5-service-card,
.v5-service-section
.v5-service-grid
> .v5-service-card-large {

    position: relative !important;

    width: 100% !important;
    height: 420px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;

    display: block !important;

    overflow: hidden !important;

    border:
        1px solid rgba(27,24,19,.085) !important;

    border-radius:
        28px !important;

    outline: 0 !important;

    /*
     * Image occupies only upper gallery area.
     */
    background-color:
        #fdfcf9 !important;

    background-image:
        var(--service-image) !important;

    background-repeat:
        no-repeat !important;

    background-size:
        100% 56% !important;

    background-position:
        center top !important;

    box-shadow:
        0 18px 50px rgba(31,25,18,.075) !important;

    transform:
        none !important;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease !important;
}


/*
 * Kill the previous dark/glow composition.
 */
.v5-service-section
.v5-service-grid
> article::before,
.v5-service-section
.v5-service-grid
> article::after {

    display: none !important;
}


/* ----------------------------------------------------------
   IMAGE SHADE — image only
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
.v5-service-shade {

    position: absolute !important;

    z-index: 1 !important;

    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    height: 56% !important;

    border-radius:
        27px
        27px
        0
        0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(10,12,10,.18) 0%,
            rgba(10,12,10,.02) 48%,
            rgba(10,12,10,.25) 100%
        ) !important;

    pointer-events:
        none !important;
}


/* ----------------------------------------------------------
   NUMBER / CATEGORY
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
.v5-service-top {

    position: absolute !important;

    z-index: 3 !important;

    top: 18px !important;
    right: 18px !important;
    bottom: auto !important;
    left: 18px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    padding: 0 !important;

    color: #fff !important;
}


.v5-service-section
.v5-service-grid
.v5-service-top > span {

    width: 36px !important;
    height: 36px !important;

    display: grid !important;
    place-items: center !important;

    border:
        1px solid rgba(255,255,255,.42) !important;

    border-radius:
        50% !important;

    background:
        rgba(17,20,17,.32) !important;

    color:
        #fff !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    font-size:
        9px !important;

    font-weight:
        850 !important;

    letter-spacing:
        .05em !important;

    text-shadow:
        none !important;
}


.v5-service-section
.v5-service-grid
.v5-service-top small {

    padding:
        8px
        11px !important;

    border:
        1px solid rgba(255,255,255,.28) !important;

    border-radius:
        999px !important;

    background:
        rgba(17,20,17,.27) !important;

    color:
        #fff !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    font-size:
        8px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .10em !important;

    text-transform:
        uppercase !important;

    text-shadow:
        none !important;
}


/* ----------------------------------------------------------
   WHITE EDITORIAL CONTENT AREA
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
.v5-service-copy {

    position: absolute !important;

    z-index: 4 !important;

    top: 56% !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: none !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    padding:
        22px
        23px
        20px !important;

    margin: 0 !important;

    background:
        linear-gradient(
            180deg,
            #fffefa 0%,
            #f8f5ef 100%
        ) !important;

    color:
        #171512 !important;
}


/* ----------------------------------------------------------
   TITLE
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
.v5-service-copy h3 {

    max-width: 100% !important;

    margin:
        0
        0
        9px !important;

    color:
        #171512 !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif !important;

    font-size:
        clamp(25px, 2vw, 33px) !important;

    font-weight:
        740 !important;

    line-height:
        .98 !important;

    letter-spacing:
        -.045em !important;

    text-shadow:
        none !important;

    -webkit-text-stroke:
        0 !important;
}


/* ----------------------------------------------------------
   DESCRIPTION
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
.v5-service-copy p {

    max-width:
        100% !important;

    margin:
        0
        0
        15px !important;

    color:
        #777067 !important;

    font-size:
        12px !important;

    line-height:
        1.55 !important;

    text-shadow:
        none !important;

    display:
        -webkit-box;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;
}


/* ----------------------------------------------------------
   CTA
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
.v5-service-copy > a {

    min-height:
        39px !important;

    margin-top:
        auto !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        15px !important;

    padding:
        0
        8px
        0
        15px !important;

    border:
        1px solid rgba(23,21,18,.09) !important;

    border-radius:
        999px !important;

    background:
        #f0ece4 !important;

    color:
        #211e1a !important;

    box-shadow:
        none !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    transition:
        background .22s ease,
        color .22s ease,
        transform .22s ease !important;
}


.v5-service-section
.v5-service-grid
.v5-service-copy > a span {

    width: 27px !important;
    height: 27px !important;

    display:
        grid !important;

    place-items:
        center !important;

    border-radius:
        50% !important;

    background:
        #ef6b31 !important;

    color:
        #fff !important;

    font-size:
        12px !important;
}


/* ----------------------------------------------------------
   HOVER — desktop only
   ---------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .v5-service-section
    .v5-service-grid
    > .v5-service-card:hover,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large:hover {

        transform:
            translateY(-6px) !important;

        border-color:
            rgba(239,107,49,.17) !important;

        box-shadow:
            0 28px 65px rgba(31,25,18,.12) !important;
    }


    .v5-service-section
    .v5-service-grid
    .v5-service-copy > a:hover {

        transform:
            translateY(-1px) !important;

        background:
            #1a1916 !important;

        color:
            #fff !important;
    }

}


/* ----------------------------------------------------------
   Give each photo a deliberate crop
   ---------------------------------------------------------- */

.v5-service-grid
> article:nth-child(1) {

    background-position:
        center 28% !important;
}

.v5-service-grid
> article:nth-child(2) {

    background-position:
        60% 35% !important;
}

.v5-service-grid
> article:nth-child(3) {

    background-position:
        55% 38% !important;
}

.v5-service-grid
> article:nth-child(4) {

    background-position:
        center 46% !important;
}

.v5-service-grid
> article:nth-child(5) {

    background-position:
        center 52% !important;
}

.v5-service-grid
> article:nth-child(6) {

    background-position:
        center 32% !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 701px) and (max-width: 1000px) {

    .v5-service-section
    .v5-service-grid {

        width:
            calc(100% - 36px) !important;

        margin:
            0
            auto !important;

        padding:
            0 !important;

        display:
            grid !important;

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:
            16px !important;

        overflow:
            visible !important;
    }


    .v5-service-section
    .v5-service-grid
    > .v5-service-card,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large {

        height:
            405px !important;

        grid-column:
            auto !important;

        grid-row:
            auto !important;

        grid-area:
            auto !important;
    }

}


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

@media (max-width: 700px) {

    .v5-service-section
    .v5-service-grid {

        width:
            calc(100% - 28px) !important;

        margin:
            0
            auto !important;

        padding:
            0 !important;

        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            14px !important;

        overflow:
            visible !important;
    }


    .v5-service-section
    .v5-service-grid
    > .v5-service-card,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large {

        width:
            100% !important;

        height:
            390px !important;

        min-height:
            0 !important;

        grid-column:
            auto !important;

        grid-row:
            auto !important;

        grid-area:
            auto !important;

        flex:
            none !important;

        border-radius:
            24px !important;
    }


    .v5-service-section
    .v5-service-grid
    .v5-service-shade {

        border-radius:
            23px
            23px
            0
            0 !important;
    }


    .v5-service-section
    .v5-service-grid
    .v5-service-copy {

        padding:
            19px
            18px
            17px !important;
    }


    .v5-service-section
    .v5-service-grid
    .v5-service-copy h3 {

        font-size:
            27px !important;
    }


    .v5-service-section
    .v5-service-grid
    .v5-service-copy p {

        font-size:
            12px !important;
    }

}


/* SMALL PHONE */

@media (max-width: 390px) {

    .v5-service-section
    .v5-service-grid {

        width:
            calc(100% - 20px) !important;
    }


    .v5-service-section
    .v5-service-grid
    > .v5-service-card,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large {

        height:
            370px !important;
    }

}

/* END V7A */

/* ==========================================================
   AL BADI — V7B SIGNATURE SLIDING SERVICE CARDS
   Custom sculpted image silhouette + editorial body.
   ========================================================== */

.v5-service-section {
    overflow: hidden;
}


/* ----------------------------------------------------------
   HORIZONTAL DECK
   ---------------------------------------------------------- */

.v5-service-section .v5-service-grid {

    width: min(100% - 48px, 1420px) !important;

    margin:
        0
        auto !important;

    padding:
        12px
        2px
        28px !important;

    display: flex !important;

    gap:
        22px !important;

    overflow-x:
        auto !important;

    overflow-y:
        visible !important;

    scroll-snap-type:
        x mandatory;

    scroll-padding-left:
        2px;

    overscroll-behavior-inline:
        contain;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}

.v5-service-section
.v5-service-grid::-webkit-scrollbar {
    display: none;
}


/* ----------------------------------------------------------
   CARD SHELL
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
> .v5-service-card,
.v5-service-section
.v5-service-grid
> .v5-service-card-large {

    position:
        relative !important;

    flex:
        0
        0
        clamp(340px, 36vw, 500px) !important;

    width:
        auto !important;

    height:
        520px !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    grid-column:
        auto !important;

    grid-row:
        auto !important;

    grid-area:
        auto !important;

    scroll-snap-align:
        start;

    overflow:
        visible !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    outline:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


/* ----------------------------------------------------------
   CUSTOM IMAGE OBJECT
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
> article {

    isolation:
        isolate;
}


/*
 * Image is painted by the card background itself,
 * but only visible inside the sculpted upper shape.
 */
.v5-service-section
.v5-service-grid
> .v5-service-card::before,
.v5-service-section
.v5-service-grid
> .v5-service-card-large::before {

    content:
        "";

    position:
        absolute;

    z-index:
        1;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        318px;

    display:
        block !important;

    background-image:
        var(--service-image);

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    /*
     * Signature silhouette:
     *
     * - round upper-left
     * - diagonal upper-right cut
     * - inward notch near lower-right
     * - asymmetric lower-left sweep
     */
    clip-path:
        polygon(
            0 12%,
            5% 4%,
            14% 0,
            82% 0,
            100% 17%,
            100% 71%,
            94% 78%,
            88% 79%,
            83% 85%,
            82% 100%,
            20% 100%,
            10% 96%,
            3% 88%,
            0 76%
        );

    border-radius:
        34px;

    filter:
        saturate(1.03)
        contrast(1.02);

    box-shadow:
        0
        24px
        55px
        rgba(18,20,17,.16);

    pointer-events:
        none;
}


/*
 * Glass edge / inner stroke.
 */
.v5-service-section
.v5-service-grid
> .v5-service-card::after,
.v5-service-section
.v5-service-grid
> .v5-service-card-large::after {

    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        1px;

    left:
        1px;

    width:
        calc(100% - 2px);

    height:
        316px;

    display:
        block !important;

    clip-path:
        polygon(
            0 12%,
            5% 4%,
            14% 0,
            82% 0,
            100% 17%,
            100% 71%,
            94% 78%,
            88% 79%,
            83% 85%,
            82% 100%,
            20% 100%,
            10% 96%,
            3% 88%,
            0 76%
        );

    border:
        1px solid
        rgba(255,255,255,.42);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            transparent 31%,
            transparent 70%,
            rgba(255,255,255,.07)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.08);

    pointer-events:
        none;
}


/* ----------------------------------------------------------
   REMOVE OLD SHADE
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
.v5-service-shade {

    display:
        none !important;
}


/* ----------------------------------------------------------
   TOP INDEX / CATEGORY
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
.v5-service-top {

    position:
        absolute !important;

    z-index:
        5 !important;

    top:
        18px !important;

    left:
        19px !important;

    right:
        19px !important;

    bottom:
        auto !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    padding:
        0 !important;

    color:
        #fff !important;
}


.v5-service-section
.v5-service-grid
.v5-service-top > span {

    width:
        39px !important;

    height:
        39px !important;

    display:
        grid !important;

    place-items:
        center !important;

    border:
        1px solid
        rgba(255,255,255,.38) !important;

    border-radius:
        50% !important;

    background:
        rgba(18,22,18,.30) !important;

    color:
        #fff !important;

    backdrop-filter:
        blur(13px);

    -webkit-backdrop-filter:
        blur(13px);

    font-size:
        9px !important;

    font-weight:
        850 !important;

    text-shadow:
        none !important;
}


.v5-service-section
.v5-service-grid
.v5-service-top small {

    padding:
        8px
        11px !important;

    border:
        1px solid
        rgba(255,255,255,.28) !important;

    border-radius:
        999px !important;

    background:
        rgba(20,23,19,.27) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    color:
        #fff !important;

    font-size:
        8px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .10em !important;

    text-transform:
        uppercase !important;

    text-shadow:
        none !important;
}


/* ----------------------------------------------------------
   EDITORIAL INFORMATION BODY
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
.v5-service-copy {

    position:
        absolute !important;

    z-index:
        6 !important;

    top:
        290px !important;

    right:
        14px !important;

    bottom:
        0 !important;

    left:
        14px !important;

    width:
        auto !important;

    max-width:
        none !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    margin:
        0 !important;

    padding:
        31px
        27px
        24px !important;

    border:
        1px solid
        rgba(28,24,18,.085);

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,254,250,.98),
            rgba(244,239,230,.97)
        ) !important;

    color:
        #171512 !important;

    box-shadow:
        0
        20px
        52px
        rgba(31,25,18,.09);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


/*
 * Tiny orange sculpted tab.
 */
.v5-service-section
.v5-service-grid
.v5-service-copy::before {

    content:
        "";

    position:
        absolute;

    top:
        -7px;

    left:
        30px;

    width:
        56px;

    height:
        14px;

    border-radius:
        999px;

    background:
        #ef6b31;

    box-shadow:
        0
        5px
        15px
        rgba(239,107,49,.22);
}


/* ----------------------------------------------------------
   TYPOGRAPHY
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
.v5-service-copy h3 {

    max-width:
        100% !important;

    margin:
        0
        0
        10px !important;

    color:
        #171512 !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif !important;

    font-size:
        clamp(28px, 2.5vw, 38px) !important;

    font-weight:
        760 !important;

    line-height:
        .96 !important;

    letter-spacing:
        -.05em !important;

    text-shadow:
        none !important;

    -webkit-text-stroke:
        0 !important;
}


.v5-service-section
.v5-service-grid
.v5-service-copy p {

    max-width:
        100% !important;

    margin:
        0
        0
        17px !important;

    color:
        #766f65 !important;

    font-size:
        12.5px !important;

    line-height:
        1.62 !important;

    text-shadow:
        none !important;

    display:
        -webkit-box;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;
}


/* ----------------------------------------------------------
   CTA
   ---------------------------------------------------------- */

.v5-service-section
.v5-service-grid
.v5-service-copy > a {

    min-height:
        40px !important;

    margin-top:
        auto !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        14px !important;

    padding:
        0
        8px
        0
        15px !important;

    border:
        1px solid
        rgba(26,23,19,.09) !important;

    border-radius:
        999px !important;

    background:
        rgba(255,255,255,.70) !important;

    color:
        #1e1b17 !important;

    box-shadow:
        none !important;

    font-size:
        10px !important;

    font-weight:
        820 !important;
}


.v5-service-section
.v5-service-grid
.v5-service-copy > a span {

    width:
        28px !important;

    height:
        28px !important;

    display:
        grid !important;

    place-items:
        center !important;

    border-radius:
        50% !important;

    background:
        #ef6b31 !important;

    color:
        #fff !important;
}


/* ----------------------------------------------------------
   ALTER SHAPE SLIGHTLY PER CARD
   so the gallery feels designed, not templated.
   ---------------------------------------------------------- */

.v5-service-grid
> article:nth-child(2)::before,
.v5-service-grid
> article:nth-child(2)::after {

    clip-path:
        polygon(
            0 0,
            84% 0,
            100% 14%,
            100% 84%,
            93% 94%,
            78% 100%,
            15% 100%,
            0 82%
        );
}


.v5-service-grid
> article:nth-child(3)::before,
.v5-service-grid
> article:nth-child(3)::after {

    clip-path:
        polygon(
            7% 0,
            100% 0,
            100% 74%,
            93% 83%,
            82% 83%,
            75% 100%,
            0 100%,
            0 18%
        );
}


.v5-service-grid
> article:nth-child(4)::before,
.v5-service-grid
> article:nth-child(4)::after {

    clip-path:
        polygon(
            0 10%,
            11% 0,
            100% 0,
            100% 88%,
            91% 100%,
            20% 100%,
            11% 92%,
            0 92%
        );
}


.v5-service-grid
> article:nth-child(5)::before,
.v5-service-grid
> article:nth-child(5)::after {

    clip-path:
        polygon(
            0 0,
            79% 0,
            87% 9%,
            100% 10%,
            100% 100%,
            17% 100%,
            0 83%
        );
}


.v5-service-grid
> article:nth-child(6)::before,
.v5-service-grid
> article:nth-child(6)::after {

    clip-path:
        polygon(
            10% 0,
            90% 0,
            100% 12%,
            100% 77%,
            90% 87%,
            88% 100%,
            12% 100%,
            0 85%,
            0 13%
        );
}


/* ----------------------------------------------------------
   HOVER
   ---------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .v5-service-section
    .v5-service-grid
    > .v5-service-card:hover,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large:hover {

        transform:
            translateY(-4px) !important;
    }


    .v5-service-section
    .v5-service-grid
    > article:hover::before {

        filter:
            saturate(1.08)
            contrast(1.035);
    }


    .v5-service-section
    .v5-service-grid
    .v5-service-copy > a:hover {

        background:
            #191814 !important;

        color:
            #fff !important;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1000px) {

    .v5-service-section
    .v5-service-grid
    > .v5-service-card,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large {

        flex:
            0
            0
            min(74vw, 440px) !important;

        height:
            500px !important;
    }

}


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

@media (max-width: 700px) {

    .v5-service-section
    .v5-service-grid {

        width:
            100% !important;

        padding:
            9px
            16px
            24px !important;

        gap:
            13px !important;
    }


    .v5-service-section
    .v5-service-grid
    > .v5-service-card,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large {

        flex:
            0
            0
            min(84vw, 355px) !important;

        height:
            470px !important;
    }


    .v5-service-section
    .v5-service-grid
    > .v5-service-card::before,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large::before {

        height:
            280px;
    }


    .v5-service-section
    .v5-service-grid
    > .v5-service-card::after,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large::after {

        height:
            278px;
    }


    .v5-service-section
    .v5-service-grid
    .v5-service-copy {

        top:
            255px !important;

        right:
            10px !important;

        left:
            10px !important;

        padding:
            27px
            20px
            19px !important;

        border-radius:
            25px;
    }


    .v5-service-section
    .v5-service-grid
    .v5-service-copy h3 {

        font-size:
            27px !important;
    }


    .v5-service-section
    .v5-service-grid
    .v5-service-copy p {

        font-size:
            12px !important;
    }

}


/* SMALL MOBILE */

@media (max-width: 390px) {

    .v5-service-section
    .v5-service-grid
    > .v5-service-card,
    .v5-service-section
    .v5-service-grid
    > .v5-service-card-large {

        flex-basis:
            86vw !important;

        height:
            455px !important;
    }

}

/* END V7B */

/* ==========================================================
   AL BADI — V7D EXCURSIONS FULL-WIDTH CARD REDESIGN
   Rafiki-inspired premium experience cards
   ========================================================== */

.product-showcase,
#live-experiences,
#safari-experiences {
    padding-top: clamp(36px, 5vw, 72px);
    padding-bottom: clamp(48px, 6vw, 88px);
}

/* section heading width */
.product-showcase .section-shell,
.product-showcase .section-header,
.product-showcase .product-showcase-shell,
#live-experiences .section-shell,
#safari-experiences .section-shell {
    width: min(100% - 48px, 1320px);
    margin-left: auto;
    margin-right: auto;
}

/* CARD GRID — catch current grid names */
.product-showcase .product-grid,
.product-showcase .product-collection,
.product-showcase .tour-grid,
.product-showcase .experience-grid,
.product-showcase .cards-grid,
.product-showcase .showcase-grid,
#live-experiences .product-grid,
#live-experiences .product-collection,
#safari-experiences .product-grid,
#safari-experiences .product-collection {
    width: min(100% - 48px, 1320px) !important;
    margin: 0 auto !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    align-items: stretch !important;
}

/* CARD — catch current card names */
.product-showcase .product-card,
.product-showcase .tour-card,
.product-showcase .experience-card,
.product-showcase article,
#live-experiences .product-card,
#safari-experiences .product-card {
    position: relative !important;
    min-height: 540px !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    isolation: isolate !important;

    background: #0f1720 !important;
    color: #fff !important;

    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow:
        0 24px 60px rgba(11,18,24,.12),
        0 10px 24px rgba(11,18,24,.08) !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

/* image layer */
.product-showcase .product-card img,
.product-showcase .tour-card img,
.product-showcase .experience-card img,
.product-showcase article img,
#live-experiences .product-card img,
#safari-experiences .product-card img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: -3 !important;
    transform: scale(1.01);
}

/* dark cinematic overlay */
.product-showcase .product-card::before,
.product-showcase .tour-card::before,
.product-showcase .experience-card::before,
.product-showcase article::before,
#live-experiences .product-card::before,
#safari-experiences .product-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;

    background:
        linear-gradient(180deg,
            rgba(7,12,18,.08) 0%,
            rgba(7,12,18,.16) 24%,
            rgba(7,12,18,.38) 58%,
            rgba(7,12,18,.82) 100%) !important;
}

/* soft glow */
.product-showcase .product-card::after,
.product-showcase .tour-card::after,
.product-showcase .experience-card::after,
.product-showcase article::after,
#live-experiences .product-card::after,
#safari-experiences .product-card::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 18px 16px 18px !important;
    height: 34% !important;
    border-radius: 28px !important;
    z-index: -1 !important;
    background: radial-gradient(circle at 50% 100%, rgba(255,140,60,.22), rgba(255,140,60,0) 72%) !important;
    pointer-events: none !important;
}

/* top pills / meta */
.product-showcase .product-card .meta,
.product-showcase .tour-card .meta,
.product-showcase .experience-card .meta,
.product-showcase .card-meta,
.product-showcase .product-meta,
#live-experiences .card-meta,
#safari-experiences .card-meta {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 3 !important;

    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.product-showcase .product-card .meta > *,
.product-showcase .tour-card .meta > *,
.product-showcase .experience-card .meta > *,
.product-showcase .card-meta > *,
.product-showcase .product-meta > *,
#live-experiences .card-meta > *,
#safari-experiences .card-meta > * {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    backdrop-filter: blur(12px) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
}

/* text body */
.product-showcase .product-card .content,
.product-showcase .tour-card .content,
.product-showcase .experience-card .content,
.product-showcase .card-content,
.product-showcase .product-body,
.product-showcase .product-copy,
#live-experiences .card-content,
#safari-experiences .card-content {
    position: relative !important;
    z-index: 3 !important;
    margin-top: auto !important;
    padding: 24px 24px 22px !important;
    color: #fff !important;
}

/* title */
.product-showcase .product-card h3,
.product-showcase .tour-card h3,
.product-showcase .experience-card h3,
.product-showcase article h3,
.product-showcase .product-title,
#live-experiences .product-card h3,
#safari-experiences .product-card h3 {
    margin: 0 0 10px !important;
    color: #fff !important;
    font-size: clamp(28px, 2vw, 42px) !important;
    line-height: .95 !important;
    letter-spacing: -.04em !important;
    font-weight: 800 !important;
    max-width: 92% !important;
    text-wrap: balance;
}

/* paragraph / small description */
.product-showcase .product-card p,
.product-showcase .tour-card p,
.product-showcase .experience-card p,
.product-showcase article p,
.product-showcase .product-copy p,
#live-experiences .product-card p,
#safari-experiences .product-card p {
    color: rgba(255,255,255,.90) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 0 18px !important;
    max-width: 95% !important;
}

/* price / small detail rows */
.product-showcase .product-card .facts,
.product-showcase .product-card .product-facts,
.product-showcase .tour-card .facts,
.product-showcase .experience-card .facts,
#live-experiences .product-card .facts,
#safari-experiences .product-card .facts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* CTA row */
.product-showcase .product-card .actions,
.product-showcase .tour-card .actions,
.product-showcase .experience-card .actions,
.product-showcase .product-actions,
.product-showcase .cta-row,
#live-experiences .product-card .actions,
#safari-experiences .product-card .actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 14px !important;
}

/* buttons / links */
.product-showcase .product-card .button,
.product-showcase .product-card a.button,
.product-showcase .product-card .btn,
.product-showcase .product-card .cta,
.product-showcase .tour-card .button,
.product-showcase .tour-card .btn,
.product-showcase .experience-card .button,
.product-showcase .experience-card .btn,
.product-showcase .product-actions a,
#live-experiences .product-card .button,
#safari-experiences .product-card .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    transition: .22s ease !important;
}

.product-showcase .product-card .button-primary,
.product-showcase .product-card .btn-primary,
.product-showcase .product-card .cta-primary,
.product-showcase .product-card a[href*="tour"],
.product-showcase .tour-card .button-primary,
.product-showcase .experience-card .button-primary {
    background: #f47a2a !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(244,122,42,.26) !important;
}

.product-showcase .product-card .button-secondary,
.product-showcase .product-card .btn-secondary,
.product-showcase .product-card .cta-secondary,
.product-showcase .tour-card .button-secondary,
.product-showcase .experience-card .button-secondary {
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    backdrop-filter: blur(10px) !important;
}

.product-showcase .product-card .button:hover,
.product-showcase .product-card .btn:hover,
.product-showcase .tour-card .button:hover,
.product-showcase .experience-card .button:hover {
    transform: translateY(-2px) !important;
}

/* old orange strips / rigid footer bars => neutralize */
.product-showcase .product-card .price-bar,
.product-showcase .product-card .bottom-bar,
.product-showcase .product-card .product-footer-strip,
.product-showcase .product-card .footer-strip,
.product-showcase .tour-card .price-bar,
.product-showcase .experience-card .price-bar {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 12px 0 0 !important;
    box-shadow: none !important;
}

/* tablet */
@media (max-width: 1000px) {
    .product-showcase .product-grid,
    .product-showcase .product-collection,
    .product-showcase .tour-grid,
    .product-showcase .experience-grid,
    .product-showcase .cards-grid,
    .product-showcase .showcase-grid,
    #live-experiences .product-grid,
    #live-experiences .product-collection,
    #safari-experiences .product-grid,
    #safari-experiences .product-collection {
        width: min(100% - 32px, 1000px) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }

    .product-showcase .product-card,
    .product-showcase .tour-card,
    .product-showcase .experience-card,
    .product-showcase article,
    #live-experiences .product-card,
    #safari-experiences .product-card {
        min-height: 480px !important;
        border-radius: 28px !important;
    }
}

/* mobile */
@media (max-width: 680px) {
    .product-showcase .product-grid,
    .product-showcase .product-collection,
    .product-showcase .tour-grid,
    .product-showcase .experience-grid,
    .product-showcase .cards-grid,
    .product-showcase .showcase-grid,
    #live-experiences .product-grid,
    #live-experiences .product-collection,
    #safari-experiences .product-grid,
    #safari-experiences .product-collection {
        width: min(100% - 20px, 100%) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .product-showcase .product-card,
    .product-showcase .tour-card,
    .product-showcase .experience-card,
    .product-showcase article,
    #live-experiences .product-card,
    #safari-experiences .product-card {
        min-height: 430px !important;
        border-radius: 24px !important;
    }

    .product-showcase .product-card .content,
    .product-showcase .tour-card .content,
    .product-showcase .experience-card .content,
    .product-showcase .card-content,
    .product-showcase .product-body,
    .product-showcase .product-copy,
    #live-experiences .card-content,
    #safari-experiences .card-content {
        padding: 20px 18px 18px !important;
    }

    .product-showcase .product-card h3,
    .product-showcase .tour-card h3,
    .product-showcase .experience-card h3,
    .product-showcase article h3,
    .product-showcase .product-title,
    #live-experiences .product-card h3,
    #safari-experiences .product-card h3 {
        font-size: clamp(24px, 8vw, 34px) !important;
        max-width: 100% !important;
    }

    .product-showcase .product-card p,
    .product-showcase .tour-card p,
    .product-showcase .experience-card p,
    .product-showcase article p,
    .product-showcase .product-copy p,
    #live-experiences .product-card p,
    #safari-experiences .product-card p {
        font-size: 14px !important;
    }
}

/* ==========================================================
   AL BADI — V7E EXACT TRAVEL PRODUCT CARD REDESIGN
   Uses real markup:
   .travel-product-card
   .travel-product-media
   .travel-product-body
   .travel-product-meta
   .travel-product-foot
   ========================================================== */


/* GRID */

.product-grid-excursions,
.product-grid-safaris {
    width: min(100% - 48px, 1320px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;

    overflow: visible !important;
}


/* CARD */

.product-grid-excursions .travel-product-card,
.product-grid-safaris .travel-product-card {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 540px !important;
    min-height: 540px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    isolation: isolate;

    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 34px !important;

    background: #101612 !important;

    box-shadow:
        0 24px 62px rgba(24,20,15,.12),
        0 0 0 1px rgba(20,18,15,.03) !important;

    transform: none !important;
}


/* IMAGE */

.product-grid-excursions .travel-product-media,
.product-grid-safaris .travel-product-media {
    position: absolute !important;
    z-index: 1 !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    overflow: hidden !important;

    border-radius: inherit !important;
}


.product-grid-excursions .travel-product-media img,
.product-grid-safaris .travel-product-media img {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    border-radius: inherit !important;

    transform: scale(1.01);
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
}


/* CINEMATIC OVERLAY */

.product-grid-excursions .travel-product-media::after,
.product-grid-safaris .travel-product-media::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    border-radius: inherit !important;

    background:
        linear-gradient(
            180deg,
            rgba(7,11,9,.08) 0%,
            rgba(7,11,9,.10) 28%,
            rgba(7,11,9,.34) 55%,
            rgba(7,11,9,.86) 100%
        ) !important;

    pointer-events: none !important;
}


/* CATEGORY BADGE */

.product-grid-excursions .travel-product-badge,
.product-grid-safaris .travel-product-badge {
    position: absolute !important;

    top: 20px !important;
    left: 20px !important;

    z-index: 4 !important;

    min-height: 36px;

    display: inline-flex !important;
    align-items: center !important;

    padding: 0 14px !important;

    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 999px !important;

    background: rgba(20,24,20,.26) !important;
    color: #fff !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;

    text-transform: uppercase;
}


/* BODY OVER IMAGE */

.product-grid-excursions .travel-product-body,
.product-grid-safaris .travel-product-body {
    position: absolute !important;

    z-index: 5 !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
        130px
        24px
        24px !important;

    background:
        linear-gradient(
            180deg,
            rgba(7,11,9,0) 0%,
            rgba(7,11,9,.62) 42%,
            rgba(7,11,9,.92) 100%
        ) !important;

    color: #fff !important;
}


/* META */

.product-grid-excursions .travel-product-meta,
.product-grid-safaris .travel-product-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px 12px !important;

    margin: 0 0 10px !important;

    color: rgba(255,255,255,.78) !important;

    font-size: 10px !important;
    font-weight: 700 !important;
}


.product-grid-excursions .travel-product-meta span,
.product-grid-safaris .travel-product-meta span {
    position: relative;
}


.product-grid-excursions .travel-product-meta span:first-child::before,
.product-grid-safaris .travel-product-meta span:first-child::before {
    content: "";

    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 8px;

    border-radius: 50%;

    background: #ff6a2d;

    box-shadow:
        0 0 0 4px rgba(255,106,45,.11);
}


/* TITLE */

.product-grid-excursions .travel-product-body h3,
.product-grid-safaris .travel-product-body h3 {
    max-width: 95% !important;

    margin:
        0
        0
        11px !important;

    color: #fff !important;

    font-size:
        clamp(28px, 2.45vw, 40px) !important;

    line-height: .96 !important;

    letter-spacing: -.045em !important;

    font-weight: 800 !important;

    text-wrap: balance;
}


/* DESCRIPTION */

.product-grid-excursions .travel-product-body > p,
.product-grid-safaris .travel-product-body > p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;

    max-width: 95% !important;

    margin:
        0
        0
        17px !important;

    color: rgba(255,255,255,.82) !important;

    font-size: 12px !important;
    line-height: 1.55 !important;
}


/* FOOT */

.product-grid-excursions .travel-product-foot,
.product-grid-safaris .travel-product-foot {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 12px !important;

    margin-top: 15px !important;
    padding-top: 15px !important;

    border-top: 1px solid rgba(255,255,255,.16) !important;
}


/* PRICE */

.product-grid-excursions .travel-product-foot strong,
.product-grid-safaris .travel-product-foot strong {
    color: #fff !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}


/* CTA */

.product-grid-excursions .travel-product-foot > a,
.product-grid-safaris .travel-product-foot > a {
    min-height: 43px !important;

    display: inline-flex !important;
    align-items: center !important;

    gap: 12px !important;

    padding:
        0
        8px
        0
        16px !important;

    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.94) !important;

    color: #171512 !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.15) !important;
}


.product-grid-excursions .travel-product-foot > a span,
.product-grid-safaris .travel-product-foot > a span {
    width: 29px !important;
    height: 29px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 50% !important;

    background: #ff6a2d !important;
    color: #fff !important;
}


/* REMOVE OLD ORANGE FULL-WIDTH BAR BEHAVIOR */

.product-grid-excursions .travel-product-foot::before,
.product-grid-safaris .travel-product-foot::before,
.product-grid-excursions .travel-product-foot::after,
.product-grid-safaris .travel-product-foot::after {
    display: none !important;
}


/* EXCURSION CORNER SIGNATURE */

.product-grid-excursions .travel-product-card {
    border-radius:
        4px
        42px
        4px
        42px !important;
}

.product-grid-excursions .travel-product-media,
.product-grid-excursions .travel-product-media img,
.product-grid-excursions .travel-product-media::after {
    border-radius:
        4px
        42px
        4px
        42px !important;
}


/* SAFARI CORNER SIGNATURE */

.product-grid-safaris .travel-product-card {
    border-radius:
        42px
        42px
        4px
        4px !important;
}

.product-grid-safaris .travel-product-media,
.product-grid-safaris .travel-product-media img,
.product-grid-safaris .travel-product-media::after {
    border-radius:
        42px
        42px
        4px
        4px !important;
}


/* HOVER */

@media (hover:hover) and (pointer:fine) {

    .product-grid-excursions .travel-product-card:hover,
    .product-grid-safaris .travel-product-card:hover {
        transform:
            translateY(-5px) !important;

        box-shadow:
            0 30px 74px rgba(24,20,15,.17) !important;
    }

    .product-grid-excursions
    .travel-product-card:hover
    .travel-product-media img,

    .product-grid-safaris
    .travel-product-card:hover
    .travel-product-media img {
        transform:
            scale(1.045);
    }
}


/* TABLET */

@media (max-width: 1050px) {

    .product-grid-excursions,
    .product-grid-safaris {
        width: calc(100% - 36px) !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 18px !important;
    }

    .product-grid-excursions .travel-product-card,
    .product-grid-safaris .travel-product-card {
        height: 500px !important;
        min-height: 500px !important;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .product-grid-excursions,
    .product-grid-safaris {
        width: 100% !important;

        display: flex !important;

        gap: 13px !important;

        margin: 0 !important;

        padding:
            0
            16px
            18px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;
    }

    .product-grid-excursions::-webkit-scrollbar,
    .product-grid-safaris::-webkit-scrollbar {
        display: none;
    }

    .product-grid-excursions .travel-product-card,
    .product-grid-safaris .travel-product-card {
        flex:
            0
            0
            min(84vw, 355px) !important;

        width: auto !important;

        height: 470px !important;
        min-height: 470px !important;

        scroll-snap-align:
            start;
    }

    .product-grid-excursions .travel-product-body,
    .product-grid-safaris .travel-product-body {
        padding:
            115px
            19px
            19px !important;
    }

    .product-grid-excursions .travel-product-body h3,
    .product-grid-safaris .travel-product-body h3 {
        font-size:
            28px !important;
    }

}


/* END V7E */

/* ==========================================================
   AL BADI — V7F FINAL TOUR / SAFARI WIDTH
   WIDTH ONLY — preserve card design
   ========================================================== */

.product-showcase {
    width: 100% !important;
}

/* Heading and cards share one wide visual line */
.product-showcase .product-section-head,
.product-grid-excursions,
.product-grid-safaris {
    width: min(calc(100% - 32px), 1520px) !important;
    max-width: 1520px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

/* Let the three cards consume the available width */
@media (min-width: 1051px) {

    .product-grid-excursions,
    .product-grid-safaris {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 20px !important;
    }

    .product-grid-excursions .travel-product-card,
    .product-grid-safaris .travel-product-card {
        width: 100% !important;
        max-width: none !important;
    }

}

/* Tablet */
@media (min-width: 701px) and (max-width: 1050px) {

    .product-showcase .product-section-head,
    .product-grid-excursions,
    .product-grid-safaris {
        width: calc(100% - 28px) !important;
    }

}

/* Mobile keeps edge breathing room */
@media (max-width: 700px) {

    .product-showcase .product-section-head {
        width: calc(100% - 28px) !important;
    }

    .product-grid-excursions,
    .product-grid-safaris {
        width: 100% !important;
    }

}

/* END V7F */

/* ==========================================================
   AL BADI — V7G TRIP FINDER + PREMIUM CALENDAR
   Scoped only to .trip-finder-v7g
   ========================================================== */

.trip-finder-v7g {
    position: relative;
    z-index: 12;
    width: min(calc(100% - 34px), 1480px);
    margin-left: auto;
    margin-right: auto;
    isolation: isolate;
}

.trip-finder-v7g .trip-finder-panel {
    position: relative;
    overflow: visible;
    padding: clamp(26px, 3vw, 40px);
    border-radius: 34px;

    background:
        radial-gradient(
            circle at 82% 10%,
            rgba(246, 116, 47, .10),
            transparent 24%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(255,255,255,.84),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(251,247,242,.94)
        );

    border: 1px solid rgba(220, 210, 200, .78);

    box-shadow:
        0 32px 90px rgba(38, 28, 19, .13),
        0 1px 0 rgba(255,255,255,.95) inset,
        0 -1px 0 rgba(206,194,183,.24) inset;

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    opacity: 0;
    transform: translateY(24px) scale(.992);

    transition:
        opacity .75s cubic-bezier(.2,.75,.25,1),
        transform .75s cubic-bezier(.2,.75,.25,1),
        box-shadow .3s ease;
}

.trip-finder-v7g.is-visible .trip-finder-panel {
    opacity: 1;
    transform: none;
}

.trip-finder-v7g .trip-finder-panel:hover {
    box-shadow:
        0 38px 105px rgba(38, 28, 19, .15),
        0 1px 0 rgba(255,255,255,.98) inset,
        0 -1px 0 rgba(206,194,183,.28) inset;
}

.trip-finder-v7g .trip-finder-panel::after {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: -1;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.52);
    pointer-events: none;
}


/* heading */

.trip-finder-v7g .trip-finder-top {
    position: relative;
    z-index: 2;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
}

.trip-finder-v7g .trip-finder-heading {
    gap: clamp(18px, 3vw, 46px);
    align-items: flex-end;
}

.trip-finder-v7g .trip-finder-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 999px;

    color: #ef6d2f;
    background: rgba(255, 247, 240, .82);
    border: 1px solid rgba(239,109,47,.20);

    box-shadow:
        0 9px 24px rgba(239,109,47,.08),
        inset 0 1px 0 rgba(255,255,255,.8);

    font-family:
        Inter,
        "SF Pro Text",
        "Segoe UI",
        sans-serif;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.trip-finder-v7g .trip-finder-heading strong {
    display: block;
    max-width: 760px;

    color: #171614;

    font-family:
        Inter,
        "SF Pro Display",
        "Segoe UI",
        sans-serif;

    font-size: clamp(34px, 3.6vw, 58px);
    line-height: .96;
    font-weight: 850;
    letter-spacing: -.052em;
    text-wrap: balance;
}

.trip-finder-v7g .trip-finder-heading p {
    max-width: 650px;
    margin-top: 11px;

    color: #746d67;

    font-family:
        Inter,
        "SF Pro Text",
        "Segoe UI",
        sans-serif;

    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.55;
    letter-spacing: -.01em;
}

.trip-finder-v7g .trip-finder-note {
    padding-bottom: 9px;
    color: #8f867d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}


/* form grid */

.trip-finder-v7g .trip-finder-form {
    position: relative;
    z-index: 10;

    display: grid;
    grid-template-columns:
        minmax(180px, 1.15fr)
        minmax(180px, 1.15fr)
        minmax(165px, .96fr)
        minmax(165px, .96fr)
        minmax(175px, 1fr)
        minmax(195px, 1.06fr);

    gap: 13px;
    align-items: stretch;
}


/* fields */

.trip-finder-v7g .trip-finder-field {
    position: relative;
    min-height: 76px;

    padding: 14px 16px 12px;

    border-radius: 18px;
    border: 1px solid rgba(211,201,192,.72);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.93),
            rgba(253,250,247,.87)
        );

    box-shadow:
        0 10px 28px rgba(28,20,14,.045),
        inset 0 1px 0 rgba(255,255,255,.98);

    transition:
        transform .23s ease,
        border-color .23s ease,
        box-shadow .23s ease,
        background .23s ease;
}

.trip-finder-v7g .trip-finder-field:hover {
    transform: translateY(-3px);

    border-color: rgba(239,109,47,.24);

    box-shadow:
        0 17px 38px rgba(28,20,14,.08),
        inset 0 1px 0 rgba(255,255,255,1);
}

.trip-finder-v7g .trip-finder-field:focus-within,
.trip-finder-v7g .trip-finder-field.is-calendar-open {
    transform: translateY(-3px);

    border-color: rgba(239,109,47,.52);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(255,251,247,.96)
        );

    box-shadow:
        0 0 0 4px rgba(239,109,47,.07),
        0 20px 45px rgba(239,109,47,.11),
        inset 0 1px 0 #fff;
}

.trip-finder-v7g .trip-finder-field > span {
    display: block;
    margin-bottom: 7px;

    color: #a1958a;

    font-family:
        Inter,
        "SF Pro Text",
        "Segoe UI",
        sans-serif;

    font-size: 9px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.trip-finder-v7g .trip-finder-field select,
.trip-finder-v7g .trip-finder-field input {
    width: 100%;
    min-width: 0;
    height: 31px;

    padding: 0 30px 0 0;

    border: 0;
    outline: 0;
    background: transparent;

    color: #1b1a18;

    font-family:
        Inter,
        "SF Pro Text",
        "Segoe UI",
        sans-serif;

    font-size: 15px;
    line-height: 31px;
    font-weight: 750;
    letter-spacing: -.018em;

    box-shadow: none;
}


/* custom select arrow */

.trip-finder-v7g .trip-finder-field:has(select)::after {
    content: "";
    position: absolute;
    right: 17px;
    bottom: 23px;

    width: 7px;
    height: 7px;

    border-right: 1.7px solid #45413d;
    border-bottom: 1.7px solid #45413d;

    transform: rotate(45deg);
    pointer-events: none;

    transition: transform .2s ease;
}

.trip-finder-v7g .trip-finder-field:has(select):focus-within::after {
    transform: rotate(225deg) translate(-2px,-2px);
}


/* hide native date visually but keep form value */

.trip-finder-v7g #trip-date.trip-date-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.trip-finder-v7g .trip-date-trigger {
    width: 100%;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 0;

    border: 0;
    background: none;

    color: #1b1a18;

    font-family:
        Inter,
        "SF Pro Text",
        "Segoe UI",
        sans-serif;

    font-size: 15px;
    line-height: 31px;
    font-weight: 750;
    letter-spacing: -.018em;

    text-align: left;
    cursor: pointer;
}

.trip-finder-v7g .trip-date-trigger.is-empty {
    color: #282522;
}

.trip-finder-v7g .trip-date-trigger-icon {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #fff7f1;
    border: 1px solid rgba(239,109,47,.15);

    color: #ef6d2f;

    transition:
        transform .2s ease,
        background .2s ease;
}

.trip-finder-v7g .trip-date-trigger:hover
.trip-date-trigger-icon {
    transform: rotate(-5deg) scale(1.06);
    background: #fff2e9;
}


/* ================================
   PREMIUM CALENDAR
   ================================ */

.trip-calendar-v7g {
    position: absolute;
    z-index: 9999;

    width: min(355px, calc(100vw - 28px));

    padding: 16px;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(239,109,47,.09),
            transparent 28%
        ),
        rgba(255,253,250,.985);

    border: 1px solid rgba(215,204,194,.76);

    box-shadow:
        0 34px 85px rgba(24,17,12,.22),
        0 1px 0 #fff inset;

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    opacity: 0;
    transform: translateY(10px) scale(.975);
    transform-origin: top center;

    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .2s ease,
        transform .2s cubic-bezier(.2,.8,.3,1),
        visibility .2s;
}

.trip-calendar-v7g.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.trip-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 2px 2px 14px;
}

.trip-calendar-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trip-calendar-title strong {
    color: #171614;

    font-family:
        Inter,
        "SF Pro Display",
        "Segoe UI",
        sans-serif;

    font-size: 18px;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -.025em;
}

.trip-calendar-title span {
    color: #92887f;
    font-size: 11px;
    font-weight: 650;
}

.trip-calendar-nav {
    display: flex;
    gap: 7px;
}

.trip-calendar-nav button {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(215,204,194,.7);
    border-radius: 12px;

    background: rgba(255,255,255,.9);
    color: #25221f;

    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.trip-calendar-nav button:hover {
    transform: translateY(-2px);
    background: #fff6ef;
    border-color: rgba(239,109,47,.25);
}

.trip-calendar-weekdays,
.trip-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.trip-calendar-weekdays {
    padding: 4px 0 7px;
}

.trip-calendar-weekdays span {
    display: grid;
    place-items: center;
    height: 27px;

    color: #aaa096;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.trip-calendar-day {
    position: relative;

    width: 100%;
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 12px;

    background: transparent;

    color: #3b3733;

    font-family:
        Inter,
        "SF Pro Text",
        "Segoe UI",
        sans-serif;

    font-size: 12px;
    font-weight: 720;

    cursor: pointer;

    transition:
        transform .16s ease,
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease;
}

.trip-calendar-day:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #fff1e7;
    color: #d85a20;
}

.trip-calendar-day.is-today::after {
    content: "";
    position: absolute;
    bottom: 4px;

    width: 4px;
    height: 4px;

    border-radius: 50%;
    background: #ef6d2f;
}

.trip-calendar-day.is-selected {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #f36d2f,
            #f18c4e
        );

    box-shadow:
        0 9px 18px rgba(239,109,47,.26);
}

.trip-calendar-day.is-selected::after {
    background: #fff;
}

.trip-calendar-day.is-muted {
    color: #c3bbb4;
}

.trip-calendar-day:disabled {
    color: #d7d0ca;
    cursor: not-allowed;
    opacity: .55;
}

.trip-calendar-footer {
    margin-top: 12px;
    padding-top: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    border-top: 1px solid rgba(220,210,201,.62);
}

.trip-calendar-footer span {
    color: #92887f;
    font-size: 10px;
    font-weight: 650;
}

.trip-calendar-today {
    border: 0;
    border-radius: 999px;

    padding: 8px 12px;

    background: #fff2e9;
    color: #df6027;

    font-size: 10px;
    font-weight: 850;

    cursor: pointer;
}


/* submit button */

.trip-finder-v7g .trip-finder-submit {
    min-height: 76px;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            #f06b2e 0%,
            #f4813e 55%,
            #f28d4e 100%
        );

    box-shadow:
        0 18px 34px rgba(239,109,47,.26),
        inset 0 1px 0 rgba(255,255,255,.25);

    transition:
        transform .23s ease,
        box-shadow .23s ease,
        filter .23s ease;
}

.trip-finder-v7g .trip-finder-submit:hover {
    transform: translateY(-4px);

    box-shadow:
        0 26px 48px rgba(239,109,47,.34),
        inset 0 1px 0 rgba(255,255,255,.28);

    filter: saturate(1.04);
}

.trip-finder-v7g .trip-finder-submit b {
    transition: transform .23s ease;
}

.trip-finder-v7g .trip-finder-submit:hover b {
    transform: translate(2px,-2px) rotate(5deg);
}


/* popular links */

.trip-finder-v7g .trip-finder-popular {
    margin-top: 18px;
    padding-top: 3px;
}

.trip-finder-v7g .trip-finder-popular > span {
    color: #a19890;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .14em;
}

.trip-finder-v7g .trip-finder-popular a {
    position: relative;
    color: #625c56;

    font-size: 11px;
    font-weight: 760;

    transition:
        color .2s ease,
        transform .2s ease;
}

.trip-finder-v7g .trip-finder-popular a:hover {
    color: #ef6d2f;
    transform: translateY(-1px);
}


/* stagger entrance */

.trip-finder-v7g.is-visible .trip-finder-field,
.trip-finder-v7g.is-visible .trip-finder-submit {
    animation:
        tripFinderFieldIn .55s cubic-bezier(.2,.75,.25,1)
        both;
}

.trip-finder-v7g.is-visible .trip-finder-field:nth-child(1) {
    animation-delay: .08s;
}

.trip-finder-v7g.is-visible .trip-finder-field:nth-child(2) {
    animation-delay: .13s;
}

.trip-finder-v7g.is-visible .trip-finder-field:nth-child(3) {
    animation-delay: .18s;
}

.trip-finder-v7g.is-visible .trip-finder-field:nth-child(4) {
    animation-delay: .23s;
}

.trip-finder-v7g.is-visible .trip-finder-field:nth-child(5) {
    animation-delay: .28s;
}

.trip-finder-v7g.is-visible .trip-finder-submit {
    animation-delay: .33s;
}

@keyframes tripFinderFieldIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/* tablet */

@media (max-width: 1220px) {

    .trip-finder-v7g .trip-finder-form {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .trip-finder-v7g .trip-finder-submit {
        min-height: 74px;
    }

}


/* mobile */

@media (max-width: 760px) {

    .trip-finder-v7g {
        width: calc(100% - 20px);
    }

    .trip-finder-v7g .trip-finder-panel {
        padding: 20px 15px 17px;
        border-radius: 26px;
    }

    .trip-finder-v7g .trip-finder-top {
        display: block;
        margin-bottom: 20px;
    }

    .trip-finder-v7g .trip-finder-heading {
        display: block;
    }

    .trip-finder-v7g .trip-finder-eyebrow {
        margin-bottom: 15px;
    }

    .trip-finder-v7g .trip-finder-heading strong {
        font-size: clamp(32px, 10vw, 44px);
        line-height: .98;
    }

    .trip-finder-v7g .trip-finder-heading p {
        font-size: 14px;
    }

    .trip-finder-v7g .trip-finder-note {
        display: block;
        margin-top: 14px;
        padding: 0;
    }

    .trip-finder-v7g .trip-finder-form {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .trip-finder-v7g .trip-finder-field,
    .trip-finder-v7g .trip-finder-submit {
        min-height: 70px;
    }

    .trip-calendar-v7g {
        position: fixed;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;

        width: auto;

        border-radius: 26px;
    }

}


/* respect motion preference */

@media (prefers-reduced-motion: reduce) {

    .trip-finder-v7g .trip-finder-panel,
    .trip-finder-v7g .trip-finder-field,
    .trip-finder-v7g .trip-finder-submit,
    .trip-calendar-v7g,
    .trip-calendar-v7g * {
        animation: none !important;
        transition: none !important;
    }

}

/* ==========================================================
   AL BADI — V7H HOW IT WORKS PREMIUM CARDS
   Unique card redesign + tighter spacing + premium entrance
   ========================================================== */

.journey-process--v7h {
    position: relative;
    padding-top: clamp(42px, 5vw, 64px) !important;
    padding-bottom: clamp(58px, 6vw, 84px) !important;
}

.journey-process--v7h::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(240, 106, 41, 0.08), transparent 28%),
        radial-gradient(circle at 84% 22%, rgba(240, 106, 41, 0.05), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0.72), rgba(247,243,236,0.28));
    pointer-events: none;
}

.journey-process--v7h .section-shell,
.journey-process--v7h .journey-shell,
.journey-process--v7h .process-shell,
.journey-process--v7h .shell,
.journey-process--v7h .container {
    position: relative;
    z-index: 1;
    width: min(100% - 48px, 1320px) !important;
    margin: 0 auto !important;
}

.journey-process--v7h .section-head,
.journey-process--v7h .journey-head,
.journey-process--v7h .process-head,
.journey-process--v7h .journey-intro,
.journey-process--v7h .process-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: clamp(22px, 4vw, 64px);
    align-items: end;
    margin-bottom: clamp(30px, 4vw, 48px) !important;
}

.journey-process--v7h h2,
.journey-process--v7h .section-title,
.journey-process--v7h .journey-title,
.journey-process--v7h .process-title {
    max-width: 10.5ch;
    font-size: clamp(48px, 5.8vw, 84px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.055em !important;
    margin: 0 !important;
}

.journey-process--v7h .section-copy,
.journey-process--v7h .journey-copy,
.journey-process--v7h .process-copy,
.journey-process--v7h p {
    line-height: 1.72;
}

.journey-process--v7h .journey-grid,
.journey-process--v7h .journey-steps,
.journey-process--v7h .process-grid,
.journey-process--v7h .steps-grid,
.journey-process--v7h [data-journey-steps],
.journey-process--v7h .journey-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2vw, 26px) !important;
    border: 0 !important;
    margin-top: 0 !important;
}

.journey-process--v7h .journey-grid > *,
.journey-process--v7h .journey-steps > *,
.journey-process--v7h .process-grid > *,
.journey-process--v7h .steps-grid > *,
.journey-process--v7h [data-journey-steps] > *,
.journey-process--v7h .journey-cards > *,
.journey-process--v7h .v7h-card {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    padding: 26px 24px 24px !important;
    border: 1px solid rgba(18, 18, 18, 0.08) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(250,247,242,0.98) 100%);
    box-shadow:
        0 20px 50px rgba(16, 16, 16, 0.07),
        inset 0 1px 0 rgba(255,255,255,0.82);
    transition:
        transform 0.45s cubic-bezier(.22,1,.36,1),
        box-shadow 0.45s cubic-bezier(.22,1,.36,1),
        border-color 0.35s ease,
        background 0.35s ease;
}

.journey-process--v7h .journey-grid > *::before,
.journey-process--v7h .journey-steps > *::before,
.journey-process--v7h .process-grid > *::before,
.journey-process--v7h .steps-grid > *::before,
.journey-process--v7h [data-journey-steps] > *::before,
.journey-process--v7h .journey-cards > *::before,
.journey-process--v7h .v7h-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 5px;
    background:
        linear-gradient(90deg, #f06a29 0%, #f59d3d 44%, rgba(245,157,61,0) 100%);
    opacity: 0.95;
}

.journey-process--v7h .journey-grid > *::after,
.journey-process--v7h .journey-steps > *::after,
.journey-process--v7h .process-grid > *::after,
.journey-process--v7h .steps-grid > *::after,
.journey-process--v7h [data-journey-steps] > *::after,
.journey-process--v7h .journey-cards > *::after,
.journey-process--v7h .v7h-card::after {
    content: "";
    position: absolute;
    right: -28px;
    top: -28px;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(240,106,41,0.16), rgba(240,106,41,0) 68%);
    pointer-events: none;
}

.journey-process--v7h .journey-grid > *:hover,
.journey-process--v7h .journey-steps > *:hover,
.journey-process--v7h .process-grid > *:hover,
.journey-process--v7h .steps-grid > *:hover,
.journey-process--v7h [data-journey-steps] > *:hover,
.journey-process--v7h .journey-cards > *:hover,
.journey-process--v7h .v7h-card:hover {
    transform: translateY(-8px);
    border-color: rgba(240,106,41,0.22) !important;
    box-shadow:
        0 28px 64px rgba(16, 16, 16, 0.11),
        0 8px 24px rgba(240,106,41,0.10);
}

.journey-process--v7h .journey-grid > * > *:first-child,
.journey-process--v7h .journey-steps > * > *:first-child,
.journey-process--v7h .process-grid > * > *:first-child,
.journey-process--v7h .steps-grid > * > *:first-child,
.journey-process--v7h [data-journey-steps] > * > *:first-child,
.journey-process--v7h .journey-cards > * > *:first-child,
.journey-process--v7h .v7h-card > *:first-child {
    color: #f06a29 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

.journey-process--v7h h3,
.journey-process--v7h h4,
.journey-process--v7h .step-title,
.journey-process--v7h .journey-step-title,
.journey-process--v7h .process-step-title {
    font-size: clamp(24px, 2vw, 30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    margin: 12px 0 12px !important;
}

.journey-process--v7h .journey-grid > * p,
.journey-process--v7h .journey-steps > * p,
.journey-process--v7h .process-grid > * p,
.journey-process--v7h .steps-grid > * p,
.journey-process--v7h [data-journey-steps] > * p,
.journey-process--v7h .journey-cards > * p,
.journey-process--v7h .v7h-card p {
    margin: 0 !important;
    color: rgba(30, 27, 24, 0.78) !important;
    line-height: 1.72 !important;
    font-size: 15.5px !important;
}

.journey-process--v7h.v7h-prep .v7h-card {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
}

.journey-process--v7h.v7h-prep .v7h-card.v7h-inview {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 0.78s cubic-bezier(.22,1,.36,1),
        transform 0.78s cubic-bezier(.22,1,.36,1),
        box-shadow 0.45s ease;
    transition-delay: var(--v7h-delay, 0ms);
}

@media (max-width: 1100px) {
    .journey-process--v7h .journey-grid,
    .journey-process--v7h .journey-steps,
    .journey-process--v7h .process-grid,
    .journey-process--v7h .steps-grid,
    .journey-process--v7h [data-journey-steps],
    .journey-process--v7h .journey-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    .journey-process--v7h {
        padding-top: 36px !important;
        padding-bottom: 52px !important;
    }

    .journey-process--v7h .section-head,
    .journey-process--v7h .journey-head,
    .journey-process--v7h .process-head,
    .journey-process--v7h .journey-intro,
    .journey-process--v7h .process-intro {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .journey-process--v7h .journey-grid,
    .journey-process--v7h .journey-steps,
    .journey-process--v7h .process-grid,
    .journey-process--v7h .steps-grid,
    .journey-process--v7h [data-journey-steps],
    .journey-process--v7h .journey-cards {
        grid-template-columns: 1fr !important;
    }

    .journey-process--v7h .journey-grid > *,
    .journey-process--v7h .journey-steps > *,
    .journey-process--v7h .process-grid > *,
    .journey-process--v7h .steps-grid > *,
    .journey-process--v7h [data-journey-steps] > *,
    .journey-process--v7h .journey-cards > *,
    .journey-process--v7h .v7h-card {
        min-height: auto;
        padding: 22px 20px 20px !important;
        border-radius: 24px !important;
    }
}

/* ==========================================================
   AL BADI — V7H1 HOW IT WORKS COMPACT SPACING
   Remove excessive blank space without changing card design.
   ========================================================== */

.journey-process--v7h {
    margin-top: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 58px !important;
    min-height: 0 !important;
}

.journey-process--v7h .section-shell,
.journey-process--v7h .journey-shell,
.journey-process--v7h .process-shell,
.journey-process--v7h .shell,
.journey-process--v7h .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Pull heading content upward */
.journey-process--v7h .section-head,
.journey-process--v7h .journey-head,
.journey-process--v7h .process-head,
.journey-process--v7h .journey-intro,
.journey-process--v7h .process-intro {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-top: 0 !important;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, .75fr) !important;

    gap: clamp(24px, 3vw, 54px) !important;
}

/* Make the large title occupy less vertical space */
.journey-process--v7h h2,
.journey-process--v7h .section-title,
.journey-process--v7h .journey-title,
.journey-process--v7h .process-title {
    max-width: 14ch !important;

    font-size:
        clamp(46px, 5vw, 72px) !important;

    line-height: .91 !important;
    margin-bottom: 0 !important;
}

/* Keep description vertically balanced */
.journey-process--v7h .section-copy,
.journey-process--v7h .journey-copy,
.journey-process--v7h .process-copy {
    margin-bottom: 4px !important;
}

/* Cards begin immediately after heading */
.journey-process--v7h .journey-grid,
.journey-process--v7h .journey-steps,
.journey-process--v7h .process-grid,
.journey-process--v7h .steps-grid,
.journey-process--v7h [data-journey-steps],
.journey-process--v7h .journey-cards {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Slightly tighter cards */
.journey-process--v7h .journey-grid > *,
.journey-process--v7h .journey-steps > *,
.journey-process--v7h .process-grid > *,
.journey-process--v7h .steps-grid > *,
.journey-process--v7h [data-journey-steps] > *,
.journey-process--v7h .journey-cards > *,
.journey-process--v7h .v7h-card {
    min-height: 225px !important;
}

/* Tablet */
@media (max-width: 1100px) {

    .journey-process--v7h {
        padding-top: 12px !important;
    }

    .journey-process--v7h .section-head,
    .journey-process--v7h .journey-head,
    .journey-process--v7h .process-head,
    .journey-process--v7h .journey-intro,
    .journey-process--v7h .process-intro {
        margin-bottom: 20px !important;
    }
}

/* Mobile */
@media (max-width: 820px) {

    .journey-process--v7h {
        padding-top: 8px !important;
        padding-bottom: 42px !important;
    }

    .journey-process--v7h .section-head,
    .journey-process--v7h .journey-head,
    .journey-process--v7h .process-head,
    .journey-process--v7h .journey-intro,
    .journey-process--v7h .process-intro {
        margin-bottom: 18px !important;
        gap: 14px !important;
    }

    .journey-process--v7h h2,
    .journey-process--v7h .section-title,
    .journey-process--v7h .journey-title,
    .journey-process--v7h .process-title {
        max-width: 100% !important;
        font-size: clamp(40px, 11vw, 56px) !important;
        line-height: .94 !important;
    }
}

/* END V7H1 */

/* ==========================================================
   AL BADI — V7H2 HOW IT WORKS ENTRANCE MOTION FIX
   ========================================================== */

.journey-process--v7h .journey-process-head {
    transition:
        opacity .85s cubic-bezier(.22,1,.36,1),
        transform .85s cubic-bezier(.22,1,.36,1);
}

/* initial heading state */
.journey-process--v7h.v7h-motion-ready .journey-process-head {
    opacity: 0;
    transform: translateY(30px);
}

/* heading enters */
.journey-process--v7h.v7h-motion-ready.v7h-section-inview
.journey-process-head {
    opacity: 1;
    transform: translateY(0);
}

/* card starting state */
.journey-process--v7h.v7h-motion-ready
.journey-steps article {
    opacity: 0;
    transform:
        translateY(38px)
        scale(.965);

    filter: blur(6px);

    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .72s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

/* each card appears */
.journey-process--v7h.v7h-motion-ready
.journey-steps article.v7h-inview {
    opacity: 1;
    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}

/* stagger */
.journey-process--v7h
.journey-steps article:nth-child(1) {
    transition-delay: .08s;
}

.journey-process--v7h
.journey-steps article:nth-child(2) {
    transition-delay: .20s;
}

.journey-process--v7h
.journey-steps article:nth-child(3) {
    transition-delay: .32s;
}

.journey-process--v7h
.journey-steps article:nth-child(4) {
    transition-delay: .44s;
}

/* number gets a little accent motion */
.journey-process--v7h
.journey-steps article > span:first-child {
    display: inline-block;
    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        opacity .55s ease;
}

.journey-process--v7h.v7h-motion-ready
.journey-steps article:not(.v7h-inview)
> span:first-child {
    opacity: 0;
    transform:
        translateY(-8px)
        rotate(-6deg);
}

.journey-process--v7h
.journey-steps article.v7h-inview
> span:first-child {
    opacity: 1;
    transform: none;
}

/* hover remains stronger after entrance */
.journey-process--v7h
.journey-steps article.v7h-inview:hover {
    transform:
        translateY(-9px)
        scale(1.012);

    box-shadow:
        0 30px 70px rgba(20,16,12,.12),
        0 12px 28px rgba(240,106,41,.12);
}

@media (prefers-reduced-motion: reduce) {
    .journey-process--v7h.v7h-motion-ready
    .journey-process-head,

    .journey-process--v7h.v7h-motion-ready
    .journey-steps article {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* END V7H2 */

/* ==========================================================
   AL BADI — V7I ZANZIBAR EXCURSIONS PREMIUM PAGE
   Scoped to .excursions-page-v7i only
   ========================================================== */

.excursions-page-v7i {
    background:
        linear-gradient(
            180deg,
            #f7f3ed 0,
            #fbfaf7 38%,
            #f6f2ec 100%
        );
}


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

.excursions-page-v7i .excursions-hero {
    position: relative;

    width: min(calc(100% - 42px), 1500px);
    min-height: clamp(560px, 74vh, 760px);

    margin:
        clamp(18px, 2.3vw, 34px)
        auto
        0 !important;

    padding:
        clamp(38px, 5vw, 78px);

    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(420px, 1.1fr);

    gap: clamp(38px, 6vw, 90px);
    align-items: center;

    overflow: hidden;

    border-radius: 38px;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(242,118,53,.10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #171714 0%,
            #24211d 72%,
            #2d2823 100%
        );

    box-shadow:
        0 36px 90px rgba(20,16,12,.18);
}

.excursions-page-v7i
.excursions-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.5),
            transparent 62%
        );

    pointer-events: none;
}

.excursions-page-v7i
.excursions-hero
.inner-hero-copy {
    position: relative;
    z-index: 3;

    max-width: 660px;
}

.excursions-page-v7i
.excursions-hero
.section-label {
    display: inline-flex;
    align-items: center;

    min-height: 36px;

    padding: 0 14px;

    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.13);

    background: rgba(255,255,255,.06);

    color: #ff965d;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;

    backdrop-filter: blur(12px);
}

.excursions-page-v7i
.excursions-hero h1 {
    max-width: 8.4ch;

    margin:
        22px 0
        22px;

    color: #fff;

    font-size:
        clamp(58px, 7.3vw, 108px);

    line-height: .88;
    letter-spacing: -.065em;
    font-weight: 850;
}

.excursions-page-v7i
.excursions-hero h1 span {
    display: block;
    color: #f08245;
}

.excursions-page-v7i
.excursions-hero p {
    max-width: 560px;

    margin: 0;

    color: rgba(255,255,255,.68);

    font-size:
        clamp(15px, 1.2vw, 18px);

    line-height: 1.68;
}

.excursions-page-v7i
.inner-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 30px;

    min-height: 52px;

    padding: 0 20px;

    border-radius: 999px;

    background: #f0783c;
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 17px 35px
        rgba(240,120,60,.27);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.excursions-page-v7i
.inner-hero-link:hover {
    transform:
        translateY(-3px);

    background: #f28a50;

    box-shadow:
        0 23px 44px
        rgba(240,120,60,.34);
}

.excursions-page-v7i
.inner-hero-link span {
    transition:
        transform .25s ease;
}

.excursions-page-v7i
.inner-hero-link:hover span {
    transform:
        translateY(3px);
}


/* hero image */

.excursions-page-v7i
.inner-hero-image {
    position: relative;
    z-index: 2;

    height:
        clamp(470px, 61vh, 650px);

    overflow: hidden;

    border-radius:
        160px 28px 160px 28px;

    box-shadow:
        0 28px 65px rgba(0,0,0,.30);

    transform:
        rotate(1.3deg);
}

.excursions-page-v7i
.inner-hero-image::before {
    content: "ZANZIBAR";
    position: absolute;
    z-index: 3;

    right: 24px;
    top: 24px;

    padding:
        10px 13px;

    border-radius: 999px;

    background:
        rgba(18,18,16,.42);

    border:
        1px solid
        rgba(255,255,255,.18);

    color: #fff;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: .2em;

    backdrop-filter:
        blur(12px);
}

.excursions-page-v7i
.inner-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 56%,
            rgba(20,14,9,.24)
        );

    pointer-events: none;
}

.excursions-page-v7i
.inner-hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.03);

    transition:
        transform 1.2s
        cubic-bezier(.22,1,.36,1);
}

.excursions-page-v7i
.excursions-hero:hover
.inner-hero-image img {
    transform:
        scale(1.075);
}


/* =========================
   INTRO
   ========================= */

.excursions-page-v7i
.excursion-intro {
    width:
        min(calc(100% - 48px), 1320px);

    margin:
        clamp(52px, 6vw, 84px)
        auto
        clamp(34px, 4vw, 54px)
        !important;

    padding: 0 !important;

    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .85fr);

    gap:
        clamp(32px, 6vw, 90px);

    align-items: end;
}

.excursions-page-v7i
.excursion-intro h2 {
    max-width: 11ch;

    margin:
        14px 0 0 !important;

    font-size:
        clamp(46px, 5.3vw, 76px);

    line-height: .94;
    letter-spacing: -.055em;
}

.excursions-page-v7i
.excursion-intro h2 span {
    color: #ef7335;
}

.excursions-page-v7i
.excursion-intro > p {
    max-width: 530px;

    margin: 0 0 5px !important;

    color: #706962;

    font-size: 15px;
    line-height: 1.72;
}


/* =========================
   PRODUCT GRID
   ========================= */

.excursions-page-v7i
.all-excursions {
    width:
        min(calc(100% - 48px), 1520px);

    margin:
        0 auto !important;

    padding:
        0 0
        clamp(64px, 8vw, 104px)
        !important;
}

.excursions-page-v7i
.excursion-page-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0,1fr))
        !important;

    gap:
        clamp(22px, 2.3vw, 34px)
        !important;

    overflow: visible !important;

    padding: 0 !important;
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-card {
    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    overflow: visible;

    background: transparent !important;

    transform:
        translateY(0);

    transition:
        transform .45s
        cubic-bezier(.22,1,.36,1);
}


/* make each media feel different */

.excursions-page-v7i
.excursion-page-grid
.travel-product-card:nth-child(3n+1)
.travel-product-media {
    border-radius:
        24px 110px 24px 24px
        !important;
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-card:nth-child(3n+2)
.travel-product-media {
    border-radius:
        110px 24px 24px 24px
        !important;
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-card:nth-child(3n+3)
.travel-product-media {
    border-radius:
        24px 24px 110px 24px
        !important;
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-media {
    position: relative;

    width: 100%;
    height:
        clamp(300px, 31vw, 430px);

    overflow: hidden;

    box-shadow:
        0 18px 45px
        rgba(25,18,12,.10);

    transition:
        transform .48s
        cubic-bezier(.22,1,.36,1),
        box-shadow .48s ease;
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-media::before {
    content: "";
    position: absolute;

    z-index: 3;

    left: 18px;
    top: 18px;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #f0783c;

    box-shadow:
        0 0 0 7px
        rgba(240,120,60,.15);

    pointer-events: none;
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .9s
        cubic-bezier(.22,1,.36,1),
        filter .6s ease;
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-card:hover
.travel-product-media {
    transform:
        translateY(-7px);

    box-shadow:
        0 30px 64px
        rgba(25,18,12,.17);
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-card:hover
.travel-product-media img {
    transform:
        scale(1.065);
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-body {
    padding:
        20px 4px 0
        !important;
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-meta {
    margin-bottom:
        10px !important;
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-body h3 {
    max-width: 15ch;

    margin:
        0 0 18px !important;

    font-size:
        clamp(25px, 2vw, 32px)
        !important;

    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-foot {
    border-radius:
        999px !important;

    padding:
        13px 16px !important;

    background:
        linear-gradient(
            135deg,
            #f16f32,
            #f58d4e
        )
        !important;

    box-shadow:
        0 12px 28px
        rgba(240,112,50,.20);
}

.excursions-page-v7i
.excursion-page-grid
.travel-product-foot,
.excursions-page-v7i
.excursion-page-grid
.travel-product-foot strong,
.excursions-page-v7i
.excursion-page-grid
.travel-product-foot a {
    color: #fff !important;
}


/* =========================
   ENTRANCE ANIMATION
   ========================= */

.excursions-page-v7i.v7i-motion-ready
.excursions-hero
.inner-hero-copy {
    opacity: 0;
    transform:
        translateY(28px);
}

.excursions-page-v7i.v7i-motion-ready
.excursions-hero
.inner-hero-image {
    opacity: 0;

    transform:
        translateX(34px)
        rotate(3deg)
        scale(.97);
}

.excursions-page-v7i.v7i-motion-ready.v7i-hero-in
.excursions-hero
.inner-hero-copy {
    opacity: 1;
    transform: none;

    transition:
        opacity .85s ease,
        transform .85s
        cubic-bezier(.22,1,.36,1);
}

.excursions-page-v7i.v7i-motion-ready.v7i-hero-in
.excursions-hero
.inner-hero-image {
    opacity: 1;

    transform:
        rotate(1.3deg)
        scale(1);

    transition:
        opacity 1s ease .08s,
        transform 1s
        cubic-bezier(.22,1,.36,1)
        .08s;
}

.excursions-page-v7i.v7i-motion-ready
.excursion-page-grid
.travel-product-card {
    opacity: 0;

    transform:
        translateY(34px)
        scale(.975);

    filter: blur(5px);
}

.excursions-page-v7i.v7i-motion-ready
.excursion-page-grid
.travel-product-card.v7i-card-in {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);

    transition:
        opacity .75s ease,
        transform .75s
        cubic-bezier(.22,1,.36,1),
        filter .6s ease;
}


/* =========================
   GUIDE STRIP
   ========================= */

.excursions-page-v7i
.excursion-guide-strip {
    width:
        min(calc(100% - 48px), 1320px);

    margin:
        0 auto
        clamp(70px, 8vw, 110px)
        !important;

    padding:
        clamp(28px, 3vw, 42px);

    border-radius: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    background:
        linear-gradient(
            135deg,
            #1d1a17,
            #2a2520
        );

    color: #fff;

    box-shadow:
        0 28px 65px
        rgba(25,18,12,.16);
}

.excursions-page-v7i
.excursion-guide-strip small {
    color: #f28a50;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.excursions-page-v7i
.excursion-guide-strip strong {
    display: block;

    max-width: 620px;

    margin-top: 8px;

    font-size:
        clamp(23px, 2.3vw, 34px);

    line-height: 1.12;
    letter-spacing: -.03em;
}

.excursions-page-v7i
.excursion-guide-strip > a {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 50px;

    padding:
        0 18px;

    border-radius: 999px;

    background: #f0783c;
    color: #fff;

    font-size: 12px;
    font-weight: 800;

    transition:
        transform .25s ease,
        background .25s ease;
}

.excursions-page-v7i
.excursion-guide-strip > a:hover {
    transform:
        translateY(-3px);

    background: #f38a50;
}


/* =========================
   TABLET
   ========================= */

@media (max-width: 1100px) {

    .excursions-page-v7i
    .excursions-hero {
        grid-template-columns:
            1fr 1fr;

        padding:
            38px;
    }

    .excursions-page-v7i
    .excursion-page-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr))
            !important;
    }

}


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

@media (max-width: 760px) {

    .excursions-page-v7i
    .excursions-hero {
        width:
            calc(100% - 20px);

        min-height: auto;

        grid-template-columns:
            1fr;

        gap: 28px;

        margin-top:
            10px !important;

        padding:
            28px 20px 20px;

        border-radius:
            28px;
    }

    .excursions-page-v7i
    .excursions-hero h1 {
        font-size:
            clamp(52px, 16vw, 72px);

        max-width: 9ch;
    }

    .excursions-page-v7i
    .inner-hero-image {
        height:
            410px;

        border-radius:
            90px 22px
            90px 22px;
    }

    .excursions-page-v7i
    .excursion-intro {
        width:
            calc(100% - 28px);

        grid-template-columns:
            1fr;

        gap: 20px;

        margin:
            48px auto
            30px !important;
    }

    .excursions-page-v7i
    .excursion-intro h2 {
        max-width: 100%;

        font-size:
            clamp(42px, 12vw, 58px);
    }

    .excursions-page-v7i
    .all-excursions {
        width:
            calc(100% - 28px);

        padding-bottom:
            54px !important;
    }

    .excursions-page-v7i
    .excursion-page-grid {
        grid-template-columns:
            1fr !important;

        gap:
            34px !important;
    }

    .excursions-page-v7i
    .excursion-page-grid
    .travel-product-media {
        height:
            min(118vw, 480px);
    }

    .excursions-page-v7i
    .excursion-page-grid
    .travel-product-card:nth-child(n)
    .travel-product-media {
        border-radius:
            24px 90px
            24px 24px
            !important;
    }

    .excursions-page-v7i
    .excursion-guide-strip {
        width:
            calc(100% - 28px);

        margin-bottom:
            62px !important;

        padding:
            25px 21px;

        border-radius:
            25px;

        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


/* accessibility */

@media (prefers-reduced-motion: reduce) {

    .excursions-page-v7i *,
    .excursions-page-v7i *::before,
    .excursions-page-v7i *::after {
        animation: none !important;
        transition: none !important;
    }

    .excursions-page-v7i.v7i-motion-ready
    .excursions-hero
    .inner-hero-copy,

    .excursions-page-v7i.v7i-motion-ready
    .excursions-hero
    .inner-hero-image,

    .excursions-page-v7i.v7i-motion-ready
    .excursion-page-grid
    .travel-product-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

}

/* END V7I */

/* ==========================================================
   AL BADI — V7J PREMIUM GLOBAL HEADER
   ========================================================== */

/* ---------- utility bar ---------- */

.albadi-utility-bar {
    position: relative;
    z-index: 1002;

    width: 100%;

    background:
        linear-gradient(
            90deg,
            #17211d 0%,
            #1b2923 52%,
            #16201c 100%
        );

    color: rgba(255,255,255,.76);

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.albadi-utility-inner {
    width:
        min(calc(100% - 48px), 1500px);

    min-height: 42px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    font-size: 11px;
    line-height: 1;
}

.albadi-utility-left,
.albadi-utility-right {
    display: flex;
    align-items: center;

    gap: 18px;
}

.albadi-utility-location {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    font-weight: 720;
    letter-spacing: .025em;
}

.albadi-utility-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f27b3b;

    box-shadow:
        0 0 0 5px
        rgba(242,123,59,.13);
}

.albadi-utility-bar a {
    color:
        rgba(255,255,255,.78);

    text-decoration: none;

    font-weight: 700;

    transition:
        color .2s ease,
        opacity .2s ease;
}

.albadi-utility-bar a:hover {
    color: #fff;
}

.albadi-utility-contact {
    position: relative;

    padding-left: 18px;
}

.albadi-utility-contact::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 1px;
    height: 14px;

    transform:
        translateY(-50%);

    background:
        rgba(255,255,255,.14);
}

.albadi-utility-separator {
    width: 1px;
    height: 13px;

    background:
        rgba(255,255,255,.13);
}


/* ---------- stage ---------- */

.albadi-header-stage {
    position: relative;
    z-index: 1001;

    width: 100%;

    padding:
        0 18px;

    background:
        linear-gradient(
            180deg,
            #17211d 0,
            #17211d 12px,
            transparent 12px
        );
}


/* ---------- main header ---------- */

.albadi-header-v7j.site-header {
    position: sticky;
    top: 10px;
    z-index: 1001;

    width:
        min(100%, 1500px);

    min-height: 88px;

    margin:
        -1px auto 0;

    padding:
        10px 13px
        10px 18px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap:
        clamp(22px, 3vw, 46px);

    border:
        1px solid
        rgba(24,22,20,.07);

    border-radius:
        0 0 28px 28px;

    background:
        rgba(255,253,250,.97);

    box-shadow:
        0 22px 60px
        rgba(28,21,16,.10),
        inset 0 1px 0
        rgba(255,255,255,.92);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    transition:
        min-height .28s ease,
        padding .28s ease,
        border-radius .28s ease,
        box-shadow .28s ease,
        transform .28s ease;
}


/* ---------- logo ---------- */

.albadi-header-v7j .brand {
    min-width: 176px;

    display: inline-flex;
    align-items: center;

    gap: 11px;

    color: #171916;

    text-decoration: none;
}

.albadi-header-v7j
.brand-mark {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: grid;
    place-items: center;

    border-radius:
        18px 18px 18px 6px;

    background:
        linear-gradient(
            145deg,
            #f17738,
            #ef8c52
        );

    color: #fff;

    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.03em;

    box-shadow:
        0 12px 24px
        rgba(240,119,56,.22);
}

.albadi-header-v7j
.brand-copy {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.albadi-header-v7j
.brand-copy strong {
    color: #171916;

    font-size: 17px;
    line-height: 1;

    font-weight: 850;

    letter-spacing: -.035em;
}

.albadi-header-v7j
.brand-copy small {
    color: #857c73;

    font-size: 8px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: .15em;

    text-transform: uppercase;
}


/* ---------- desktop nav ---------- */

.albadi-header-v7j
.desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap:
        clamp(18px, 1.8vw, 30px);

    min-width: 0;
}

.albadi-header-v7j
.desktop-nav a {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 48px;

    color: #514c46;

    font-size:
        clamp(11px, .83vw, 13px);

    line-height: 1;

    font-weight: 720;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color .22s ease,
        transform .22s ease;
}

.albadi-header-v7j
.desktop-nav a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 5px;

    width: 0;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #f07335,
            #f29a61
        );

    transform:
        translateX(-50%);

    transition:
        width .28s
        cubic-bezier(.22,1,.36,1);
}

.albadi-header-v7j
.desktop-nav a:hover,
.albadi-header-v7j
.desktop-nav a[aria-current="page"] {
    color: #171714;

    transform:
        translateY(-1px);
}

.albadi-header-v7j
.desktop-nav a:hover::after,
.albadi-header-v7j
.desktop-nav a[aria-current="page"]::after {
    width: 68%;
}


/* ---------- right actions ---------- */

.albadi-header-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}

.albadi-contact-chip {
    min-height: 54px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        6px 11px 6px 7px;

    border-radius: 18px;

    border:
        1px solid
        rgba(24,22,20,.08);

    background:
        #fff;

    color: #27231f;

    text-decoration: none;

    box-shadow:
        0 8px 20px
        rgba(28,21,16,.05);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.albadi-contact-chip:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(240,115,54,.20);

    box-shadow:
        0 13px 28px
        rgba(28,21,16,.09);
}

.albadi-contact-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        #fff2e9;

    color: #ee6f30;

    font-size: 15px;
    font-weight: 900;

    transition:
        transform .25s ease;
}

.albadi-contact-chip:hover
.albadi-contact-icon {
    transform:
        rotate(7deg)
        scale(1.04);
}

.albadi-contact-copy {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.albadi-contact-copy small {
    color: #9a9087;

    font-size: 8px;
    line-height: 1;

    font-weight: 760;
}

.albadi-contact-copy strong {
    color: #27231f;

    font-size: 11px;
    line-height: 1;

    font-weight: 850;
}


/* ---------- CTA ---------- */

.albadi-header-v7j
.header-cta {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding:
        0 19px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #ef7133,
            #f28d4f
        );

    color: #fff;

    text-decoration: none;

    font-size: 11px;
    line-height: 1;

    font-weight: 850;

    box-shadow:
        0 14px 28px
        rgba(240,113,51,.24);

    transition:
        transform .23s ease,
        box-shadow .23s ease,
        filter .23s ease;
}

.albadi-header-v7j
.header-cta:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 20px 38px
        rgba(240,113,51,.31);

    filter:
        saturate(1.05);
}

.albadi-header-v7j
.header-cta b {
    font-size: 13px;

    transition:
        transform .25s ease;
}

.albadi-header-v7j
.header-cta:hover b {
    transform:
        translate(2px,-2px);
}


/* ---------- menu button ---------- */

.albadi-header-v7j
.menu-button {
    display: none;

    width: 48px;
    height: 48px;

    border: 0;

    border-radius: 16px;

    background: #1b201d;

    box-shadow:
        0 9px 21px
        rgba(25,23,20,.13);

    cursor: pointer;
}

.albadi-header-v7j
.menu-button span {
    display: block;

    width: 18px;
    height: 2px;

    margin:
        4px auto;

    border-radius: 999px;

    background: #fff;
}


/* ---------- subtle entrance ---------- */

.albadi-utility-bar,
.albadi-header-stage {
    animation:
        albadiHeaderEnter
        .65s
        cubic-bezier(.22,1,.36,1)
        both;
}

.albadi-header-stage {
    animation-delay: .05s;
}

@keyframes albadiHeaderEnter {

    from {
        opacity: 0;
        transform:
            translateY(-14px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }

}


/* ---------- tablet ---------- */

@media (max-width: 1260px) {

    .albadi-header-v7j.site-header {
        gap: 20px;

        grid-template-columns:
            auto
            minmax(0,1fr)
            auto;
    }

    .albadi-header-v7j
    .desktop-nav {
        gap: 15px;
    }

    .albadi-contact-chip {
        display: none;
    }

}


/* ---------- mobile ---------- */

@media (max-width: 900px) {

    .albadi-utility-inner {
        width:
            calc(100% - 28px);

        min-height: 36px;
    }

    .albadi-utility-contact,
    .albadi-utility-right {
        display: none;
    }

    .albadi-utility-left {
        width: 100%;

        justify-content: center;
    }

    .albadi-utility-location {
        font-size: 9px;

        letter-spacing: .05em;
    }

    .albadi-header-stage {
        padding:
            0 10px;
    }

    .albadi-header-v7j.site-header {
        min-height: 72px;

        padding:
            9px 9px 9px 12px;

        grid-template-columns:
            auto 1fr auto;

        border-radius:
            0 0 23px 23px;
    }

    .albadi-header-v7j
    .brand {
        min-width: 0;

        gap: 9px;
    }

    .albadi-header-v7j
    .brand-mark {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        border-radius:
            15px 15px
            15px 5px;
    }

    .albadi-header-v7j
    .brand-copy strong {
        font-size: 15px;
    }

    .albadi-header-v7j
    .brand-copy small {
        font-size: 7px;
    }

    .albadi-header-v7j
    .desktop-nav,
    .albadi-header-actions {
        display: none;
    }

    .albadi-header-v7j
    .menu-button {
        display: block;

        grid-column: 3;
    }

}


/* tiny mobile */

@media (max-width: 420px) {

    .albadi-header-v7j
    .brand-copy small {
        display: none;
    }

    .albadi-header-v7j
    .brand-mark {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

}


/* reduced motion */

@media (prefers-reduced-motion: reduce) {

    .albadi-utility-bar,
    .albadi-header-stage,
    .albadi-header-v7j *,
    .albadi-header-v7j *::before,
    .albadi-header-v7j *::after {
        animation: none !important;
        transition: none !important;
    }

}

/* END V7J */


/* ==========================================================
   AL BADI — V7K COMPLETE TOUR DETAIL
   Gallery + complete pricing
   ========================================================== */

.tour-v7k-gallery {
    width:
        min(calc(100% - 48px), 1420px);

    margin:
        42px auto 12px;

    padding:
        clamp(24px, 3vw, 42px);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #f8f4ee,
            #fffdf9
        );

    border:
        1px solid
        rgba(35,29,23,.07);

    box-shadow:
        0 24px 60px
        rgba(37,29,21,.07);
}

.tour-v7k-gallery-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 24px;
}

.tour-v7k-gallery-head h2 {
    max-width: 650px;

    margin:
        8px 0 0;

    color: #211f1b;

    font-size:
        clamp(27px, 3.2vw, 48px);

    line-height: .98;

    letter-spacing: -.045em;
}

.tour-v7k-gallery-head h2 span {
    color: #ef783b;
}

.tour-v7k-gallery-head > small {
    display: inline-flex;

    padding:
        9px 13px;

    border-radius: 999px;

    background: #fff;

    color: #81776d;

    font-size: 11px;
    font-weight: 800;

    border:
        1px solid
        rgba(40,30,20,.07);
}

.tour-v7k-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;
}

.tour-v7k-gallery-item {
    position: relative;

    min-height: 220px;

    overflow: hidden;

    border-radius: 22px;

    background: #ece7df;

    text-decoration: none;
}

.tour-v7k-gallery-item.is-featured {
    grid-column:
        span 2;

    grid-row:
        span 2;

    min-height: 455px;
}

.tour-v7k-gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .5s
        cubic-bezier(.22,1,.36,1);
}

.tour-v7k-gallery-item::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(15,14,12,.56)
        );

    opacity: .72;

    transition:
        opacity .25s ease;
}

.tour-v7k-gallery-item > span {
    position: absolute;

    left: 17px;
    bottom: 15px;

    z-index: 2;

    padding:
        8px 11px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.92);

    color: #2a2520;

    font-size: 10px;
    font-weight: 850;

    opacity: 0;

    transform:
        translateY(6px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.tour-v7k-gallery-item:hover img {
    transform:
        scale(1.045);
}

.tour-v7k-gallery-item:hover > span {
    opacity: 1;

    transform:
        translateY(0);
}


/* pricing breakdown */

.tour-v7k-price-breakdown {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin:
        15px 0 9px;
}

.tour-v7k-price-breakdown > div {
    padding:
        11px 10px;

    border-radius: 13px;

    background:
        rgba(247,243,237,.88);

    border:
        1px solid
        rgba(41,31,22,.06);
}

.tour-v7k-price-breakdown span,
.tour-v7k-pricing-basis span {
    display: block;

    margin-bottom: 4px;

    color: #998d82;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.tour-v7k-price-breakdown strong {
    color: #28231e;

    font-size: 12px;
    font-weight: 850;
}

.tour-v7k-pricing-basis {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 17px;

    padding:
        10px 12px;

    border-radius: 12px;

    background:
        #fff6ef;
}

.tour-v7k-pricing-basis span {
    margin: 0;
}

.tour-v7k-pricing-basis strong {
    color: #e96d30;

    font-size: 10px;
    font-weight: 850;
}


/* responsive gallery */

@media (max-width: 850px) {

    .tour-v7k-gallery {
        width:
            calc(100% - 28px);

        margin-top: 25px;

        padding: 18px;

        border-radius: 22px;
    }

    .tour-v7k-gallery-head {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;
    }

    .tour-v7k-gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap: 10px;
    }

    .tour-v7k-gallery-item {
        min-height: 165px;

        border-radius: 17px;
    }

    .tour-v7k-gallery-item.is-featured {
        grid-column:
            span 2;

        min-height: 320px;
    }

}


@media (max-width: 520px) {

    .tour-v7k-gallery-grid {
        grid-template-columns: 1fr;
    }

    .tour-v7k-gallery-item,
    .tour-v7k-gallery-item.is-featured {
        grid-column: auto;
        grid-row: auto;

        min-height: 230px;
    }

    .tour-v7k-gallery-item:first-child {
        min-height: 300px;
    }

    .tour-v7k-gallery-item > span {
        opacity: 1;

        transform: none;
    }

    .tour-v7k-price-breakdown {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


/* reduced motion */

@media (prefers-reduced-motion: reduce) {

    .tour-v7k-gallery-item img,
    .tour-v7k-gallery-item > span {
        transition: none !important;
    }

}

/* END V7K */


/* ==========================================================
   AL BADI — V7K1 TOUR DETAIL IMAGE SLIDER
   ========================================================== */

.tour-detail-hero--v7k1 {
    width:
        min(calc(100% - 28px), 1580px);

    margin:
        14px auto 0;
}


.tour-slider {
    position: relative;

    width: 100%;

    outline: none;
}


.tour-slider-stage {
    position: relative;

    width: 100%;

    height:
        clamp(520px, 72vh, 820px);

    overflow: hidden;

    border-radius:
        28px;

    background:
        #171a18;

    box-shadow:
        0 28px 70px
        rgba(22,20,17,.14);
}


.tour-slider-slide {
    position: absolute;

    inset: 0;

    margin: 0;

    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.025);

    transition:
        opacity .55s ease,
        visibility .55s ease,
        transform 1s cubic-bezier(.22,1,.36,1);
}


.tour-slider-slide.is-active {
    opacity: 1;

    visibility: visible;

    transform:
        scale(1);
}


.tour-slider-slide img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* preserve premium dark readable overlay */

.tour-detail-hero--v7k1
.tour-detail-image-overlay {
    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(11,15,13,.72) 0%,
            rgba(11,15,13,.48) 37%,
            rgba(11,15,13,.08) 72%
        ),
        linear-gradient(
            180deg,
            rgba(8,11,10,.05) 45%,
            rgba(8,11,10,.34) 100%
        );
}


.tour-detail-hero--v7k1
.tour-detail-hero-copy {
    z-index: 5;
}


/* controls */

.tour-slider-controls {
    position: absolute;

    right:
        clamp(18px, 3vw, 42px);

    bottom:
        clamp(20px, 3vw, 38px);

    z-index: 8;

    display: flex;
    align-items: center;

    gap: 8px;
}


.tour-slider-arrow {
    width: 48px;
    height: 48px;

    border: 1px solid
        rgba(255,255,255,.28);

    border-radius: 50%;

    display: grid;
    place-items: center;

    background:
        rgba(18,22,20,.35);

    color: #fff;

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease;
}


.tour-slider-arrow:hover {
    background:
        rgba(239,119,57,.95);

    border-color:
        rgba(239,119,57,.95);

    transform:
        translateY(-2px);
}


.tour-slider-counter {
    min-width: 70px;
    height: 48px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(255,255,255,.24);

    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    background:
        rgba(18,22,20,.36);

    color: #fff;

    font-size: 11px;
    font-weight: 800;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.tour-slider-counter i {
    opacity: .45;

    font-style: normal;
}


/* thumbnail rail */

.tour-slider-thumbs {
    width:
        min(calc(100% - 34px), 980px);

    margin:
        -36px auto 0;

    position: relative;

    z-index: 12;

    display: flex;

    gap: 9px;

    padding:
        11px;

    overflow-x: auto;

    overscroll-behavior-inline:
        contain;

    scrollbar-width: none;

    border-radius: 22px;

    background:
        rgba(255,253,250,.95);

    border:
        1px solid
        rgba(36,30,24,.08);

    box-shadow:
        0 18px 45px
        rgba(35,27,20,.13);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}


.tour-slider-thumbs::-webkit-scrollbar {
    display: none;
}


.tour-slider-thumb {
    position: relative;

    width: 112px;
    height: 78px;

    flex:
        0 0 112px;

    padding: 0;

    overflow: hidden;

    border:
        2px solid transparent;

    border-radius: 14px;

    background: #eee9e2;

    cursor: pointer;

    opacity: .64;

    transition:
        opacity .22s ease,
        border-color .22s ease,
        transform .22s ease;
}


.tour-slider-thumb img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.tour-slider-thumb:hover {
    opacity: .9;
}


.tour-slider-thumb.is-active {
    opacity: 1;

    border-color:
        #ef783b;

    transform:
        translateY(-2px);
}


/* make content breathe after floating thumbnail rail */

.tour-detail-hero--v7k1
+ .tour-detail-layout {
    margin-top:
        clamp(42px, 5vw, 74px);
}


/* tablet */

@media (max-width: 900px) {

    .tour-detail-hero--v7k1 {
        width:
            calc(100% - 20px);

        margin-top: 10px;
    }

    .tour-slider-stage {
        height:
            clamp(500px, 70vh, 680px);

        border-radius: 23px;
    }

    .tour-slider-thumbs {
        width:
            calc(100% - 22px);

        margin-top: -28px;
    }

    .tour-slider-thumb {
        width: 96px;
        height: 68px;

        flex-basis: 96px;
    }

}


/* mobile */

@media (max-width: 620px) {

    .tour-detail-hero--v7k1 {
        width:
            calc(100% - 14px);

        margin-top: 7px;
    }

    .tour-slider-stage {
        height:
            min(72vh, 610px);

        min-height: 520px;

        border-radius: 20px;
    }

    .tour-detail-hero--v7k1
    .tour-detail-image-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(9,12,10,.06) 20%,
                rgba(9,12,10,.76) 100%
            );
    }

    .tour-slider-controls {
        right: 14px;
        bottom: 15px;

        gap: 6px;
    }

    .tour-slider-arrow {
        width: 42px;
        height: 42px;
    }

    .tour-slider-counter {
        height: 42px;

        min-width: 62px;

        padding:
            0 11px;
    }

    .tour-slider-thumbs {
        width:
            calc(100% - 18px);

        margin-top: -22px;

        padding: 8px;

        border-radius: 17px;
    }

    .tour-slider-thumb {
        width: 79px;
        height: 58px;

        flex-basis: 79px;

        border-radius: 11px;
    }

}


/* reduced motion */

@media (prefers-reduced-motion: reduce) {

    .tour-slider-slide,
    .tour-slider-arrow,
    .tour-slider-thumb {
        transition: none !important;
    }

}

/* END V7K1 */


/* ==========================================================
   AL BADI — V7K2 SLIDER FINAL POLISH
   ========================================================== */

.tour-slider-stage {
    isolation: isolate;
}


/* richer image presentation */

.tour-slider-slide img {
    transform:
        scale(1.015);

    transition:
        transform 1.2s
        cubic-bezier(.22,1,.36,1);
}

.tour-slider-slide.is-active img {
    transform:
        scale(1);
}


/* better active thumbnail */

.tour-slider-thumb {
    box-shadow:
        0 6px 14px
        rgba(32,25,19,.04);
}

.tour-slider-thumb.is-active {
    border-color:
        #ef783b;

    box-shadow:
        0 8px 22px
        rgba(239,120,59,.22);
}


/* accessible keyboard focus */

.tour-slider-thumb:focus-visible,
.tour-slider-arrow:focus-visible,
.tour-slider:focus-visible {
    outline:
        3px solid
        rgba(239,120,59,.36);

    outline-offset:
        3px;
}


/* arrow glass refinement */

.tour-slider-arrow {
    box-shadow:
        0 8px 24px
        rgba(0,0,0,.13);
}

.tour-slider-arrow:active {
    transform:
        scale(.95);
}


/* counter stronger readability */

.tour-slider-counter {
    box-shadow:
        0 8px 24px
        rgba(0,0,0,.11);
}


/* thumbnail gradient edge indication */

.tour-slider-thumbs {
    scroll-snap-type:
        x proximity;

    -webkit-overflow-scrolling:
        touch;
}

.tour-slider-thumb {
    scroll-snap-align:
        center;
}


/* mobile refinement */

@media (max-width: 620px) {

    .tour-slider-stage {
        min-height:
            min(520px, 68vh);

        height:
            min(68vh, 590px);
    }

    .tour-slider-controls {
        left: 14px;
        right: 14px;

        justify-content:
            space-between;
    }

    .tour-slider-counter {
        position: absolute;

        left: 50%;

        transform:
            translateX(-50%);
    }

    .tour-slider-arrow {
        position: relative;

        z-index: 2;
    }

    .tour-slider-thumbs {
        gap: 7px;

        padding:
            7px;
    }

    .tour-slider-thumb {
        width: 74px;
        height: 55px;

        flex-basis: 74px;
    }

}


/* Very small phones */

@media (max-width: 390px) {

    .tour-slider-stage {
        min-height: 470px;
    }

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

    .tour-slider-counter {
        height: 40px;
    }

}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .tour-slider-slide img {
        transform: none !important;
        transition: none !important;
    }

}

/* END V7K2 */


/* ==========================================================
   AL BADI — V7K3 TOUR SLIDER
   Functional controls + autoplay
   ========================================================== */

.tour-slider-stage {
    cursor: grab;
}

.tour-slider-stage:active {
    cursor: grabbing;
}


/* cleaner cinematic crossfade */

.tour-slider-slide {
    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.045);

    filter:
        brightness(.94);

    transition:
        opacity .75s ease,
        visibility .75s ease,
        transform 1.35s
            cubic-bezier(.16,1,.3,1),
        filter .75s ease;

    will-change:
        opacity,
        transform;
}

.tour-slider-slide.is-active {
    opacity: 1;

    visibility: visible;

    transform:
        scale(1);

    filter:
        brightness(1);
}


/* arrows */

.tour-slider-arrow {
    border:
        1px solid
        rgba(255,255,255,.34);

    background:
        rgba(20,18,14,.48);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.18);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}

.tour-slider-next {
    background:
        #ef783b;

    border-color:
        #ef783b;
}

.tour-slider-next:hover {
    background:
        #dd682f;
}


/* progress bar */

.tour-slider-progress {
    position: absolute;

    left:
        clamp(20px, 3vw, 42px);

    right:
        clamp(20px, 3vw, 42px);

    bottom: 0;

    z-index: 9;

    height: 3px;

    overflow: hidden;

    background:
        rgba(255,255,255,.18);
}

.tour-slider-progress-bar {
    display: block;

    width: 0;
    height: 100%;

    background:
        #ef783b;

    transform-origin:
        left center;
}

.tour-slider-progress-bar.is-running {
    animation:
        albadiTourSlideProgress
        5s
        linear
        forwards;
}

@keyframes albadiTourSlideProgress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}


/* thumbnail rail */

.tour-slider-thumbs {
    padding:
        10px 12px;

    gap: 10px;
}

.tour-slider-thumb {
    transition:
        opacity .22s ease,
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.tour-slider-thumb.is-active {
    transform:
        translateY(-3px);

    box-shadow:
        0 10px 26px
        rgba(239,120,59,.22);
}


/* When autoplay is paused */

.tour-slider.is-autoplay-paused
.tour-slider-progress-bar {
    animation-play-state:
        paused;
}


/* Mobile */

@media (max-width: 620px) {

    .tour-slider-progress {
        left: 14px;
        right: 14px;
    }

    .tour-slider-slide {
        transform:
            scale(1.025);
    }

    .tour-slider-slide.is-active {
        transform:
            scale(1);
    }

}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .tour-slider-slide,
    .tour-slider-progress-bar {
        transition: none !important;
        animation: none !important;
    }

}

/* END V7K3 */


/* ==========================================================
   AL BADI — V7K4 BOOKING CARD STICKY FIX
   Desktop sticky / mobile normal flow
   ========================================================== */

.tour-detail-layout {
    align-items: start;
}


/*
 * Desktop:
 * Booking panel follows the traveller while reading,
 * but remains bounded by the tour detail section.
 */
.tour-booking-card {
    position: sticky;

    top: 24px;

    align-self: start;

    height: fit-content;

    max-height:
        calc(100vh - 48px);

    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    z-index: 10;
}


/* cleaner scrollbar */

.tour-booking-card::-webkit-scrollbar {
    width: 5px;
}

.tour-booking-card::-webkit-scrollbar-track {
    background: transparent;
}

.tour-booking-card::-webkit-scrollbar-thumb {
    background:
        rgba(45, 38, 31, .18);

    border-radius: 999px;
}


/*
 * Add breathing room so sticky card never feels
 * attached to the edge of the viewport.
 */
.tour-detail-content {
    min-width: 0;
}


/*
 * Tablet and below:
 * Stop sticky behaviour completely.
 * Booking section follows naturally after content.
 */
@media (max-width: 980px) {

    .tour-detail-layout {
        display: block;
    }

    .tour-booking-card {
        position: relative;

        top: auto;

        width: 100%;

        max-height: none;

        overflow: visible;

        margin-top: 34px;
    }

}


/*
 * Mobile spacing
 */
@media (max-width: 620px) {

    .tour-booking-card {
        margin-top: 28px;

        border-radius: 22px;
    }

}

/* END V7K4 */