/* ==========================================================================
   Egypt Vibe Tours — Public site stylesheet
   Depends on: vendor/bootstrap/bootstrap.min.css, css/brand.css
   Organised: base → layout → header → components → pages → utilities
   ========================================================================== */

/* ==========================================================================
   1. BASE
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h-scrolled) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--evt-body);
    background: var(--evt-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
    font-family: var(--font-head);
    color: var(--evt-ink);
    font-weight: 800;
    line-height: var(--lh-head);
    letter-spacing: var(--ls-head);
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); font-weight: 700; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }

img { max-width: 100%; height: auto; }

/* Media wrapper preserving aspect ratio so images never cause layout shift. */
.evt-media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--evt-cloud);
}

.evt-media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.evt-media--4x3 { aspect-ratio: 4 / 3; }
.evt-media--3x2 { aspect-ratio: 3 / 2; }
.evt-media--16x9 { aspect-ratio: 16 / 9; }
.evt-media--1x1 { aspect-ratio: 1 / 1; }
.evt-media--5x4 { aspect-ratio: 5 / 4; }

/* 1.5rem, not 1.25rem: a Bootstrap `.row.g-5` pulls itself out by half its
   3rem gutter (-24px a side). At 1.25rem (20px) the container could not absorb
   that, so any g-5 row hung 4px past the viewport and gave the page a sliver of
   horizontal scroll at 992-1240px — wide enough to miss at 768 and 1440. */
.container, .container-lg, .container-xl {
    max-width: var(--container-max);
    padding-inline: 1.5rem;
}

.container-wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: 1.25rem; }

/* ==========================================================================
   2. LAYOUT PRIMITIVES
   ========================================================================== */

.section {
    position: relative;
    padding-block: var(--section-y);
}

.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--sand { background: var(--evt-sand); }
.section--cloud { background: var(--evt-cloud); }

.section--navy {
    background: var(--evt-navy);
    color: rgba(255, 255, 255, .82);
}

.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

.section__head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section__head--center { text-align: center; max-width: 720px; margin-inline: auto; }
.section__title { margin-bottom: .75rem; }

.section__lead {
    font-size: var(--fs-lead);
    color: var(--evt-muted);
    max-width: 62ch;
    margin-bottom: 0;
}

.section--navy .section__lead { color: rgba(255, 255, 255, .72); }
.section__head--center .section__lead { margin-inline: auto; }

/* Header row with a trailing "view all" link that collapses on mobile. */
.section__head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.btn {
    --btn-y: .8rem;
    --btn-x: 1.6rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: .01em;
    padding: var(--btn-y) var(--btn-x);
    border-radius: var(--radius-pill);
    border-width: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    line-height: 1.2;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

.btn-lg { --btn-y: 1.05rem; --btn-x: 2.2rem; font-size: var(--fs-body); }
.btn-sm { --btn-y: .55rem; --btn-x: 1.15rem; font-size: var(--fs-xs); }

.btn-primary {
    background: var(--evt-blue);
    border-color: var(--evt-blue);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 119, 182, .28);
}

.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--evt-blue-700);
    border-color: var(--evt-blue-700);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 119, 182, .34);
}

.btn-gold {
    background: var(--evt-gold);
    border-color: var(--evt-gold);
    color: var(--evt-navy);
    box-shadow: var(--shadow-gold);
}

.btn-gold:hover, .btn-gold:focus-visible {
    background: var(--evt-gold-400);
    border-color: var(--evt-gold-400);
    color: var(--evt-navy);
    box-shadow: 0 12px 30px rgba(244, 180, 0, .38);
}

.btn-navy {
    background: var(--evt-navy);
    border-color: var(--evt-navy);
    color: #fff;
}

.btn-navy:hover, .btn-navy:focus-visible {
    background: var(--evt-navy-600);
    border-color: var(--evt-navy-600);
    color: #fff;
}

.btn-outline-brand {
    background: transparent;
    border-color: var(--evt-line-strong);
    color: var(--evt-ink);
}

.btn-outline-brand:hover, .btn-outline-brand:focus-visible {
    border-color: var(--evt-blue);
    color: var(--evt-blue-700);
    background: var(--evt-blue-050);
}

.btn-ghost-light {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
    backdrop-filter: blur(8px);
}

.btn-ghost-light:hover, .btn-ghost-light:focus-visible {
    background: rgba(255, 255, 255, .22);
    border-color: #fff;
    color: #fff;
}

.btn-whatsapp {
    background: #25D366;
    border-color: #25D366;
    color: #06301A;
}

.btn-whatsapp:hover, .btn-whatsapp:focus-visible {
    background: #1EBE5A;
    border-color: #1EBE5A;
    color: #06301A;
}

/* Text link with an animated gold underline. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--evt-blue-700);
}

.link-arrow svg { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { color: var(--evt-blue-800); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.topbar {
    background: var(--evt-navy);
    color: rgba(255, 255, 255, .72);
    font-size: var(--fs-2xs);
    padding-block: .5rem;
    /* Pinned so the rendered height is exactly --topbar-h (2 × .5rem + 1.25rem)
       rather than whatever line box the font happens to produce. */
    line-height: 1.25rem;
}

.topbar a { color: rgba(255, 255, 255, .82); }
.topbar a:hover { color: var(--evt-gold-400); }

.topbar__list {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topbar__item { display: inline-flex; align-items: center; gap: .4rem; }

/* The currency menu drops out of the topbar and down across the sticky header.
   Bootstrap's .dropdown-menu ships z-index 1000, which loses to --z-header
   (1030), so the header covered the top of the menu: "USD" passed the click
   through to the My Booking link behind it and "EUR" was simply dead. Kept
   below --z-drawer so a real overlay still wins. */
.topbar .dropdown-menu { z-index: calc(var(--z-header) + 1); }

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: #fff;
    border-bottom: 1px solid var(--evt-line);
    transition: background-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                top var(--dur) var(--ease-out);
}

/* Over a hero image the header starts transparent, then solidifies on scroll. */
.site-header--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: transparent;
}

/* Going position:fixed takes the header out of flow, so without an explicit
   top it inherited top:0 from .site-header and landed straight on top of the
   topbar, interleaving the two rows of text. The topbar is d-none d-lg-block,
   so the offset only applies from lg up; once stuck the topbar has scrolled
   away and the header returns to the viewport edge. */
@media (min-width: 992px) {
    .site-header--overlay { top: var(--topbar-h); }
    .site-header--overlay.is-stuck { top: 0; }
}

.site-header--overlay:not(.is-stuck) .nav-link,
.site-header--overlay:not(.is-stuck) .header__tool {
    color: #fff;
}

.site-header--overlay:not(.is-stuck) .header__burger span { background: #fff; }
.site-header--overlay:not(.is-stuck) .brand__logo--dark { display: none; }
.site-header--overlay:not(.is-stuck) .brand__logo--light { display: block; }

.site-header.is-stuck {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 4px 22px rgba(11, 37, 69, .09);
    border-bottom-color: transparent;
}

.header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: var(--header-h);
    transition: height var(--dur) var(--ease-out);
}

.site-header.is-stuck .header__inner { height: var(--header-h-scrolled); }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo { height: 46px; width: auto; transition: height var(--dur) var(--ease-out); }
.brand__logo--light { display: none; }
.site-header.is-stuck .brand__logo { height: 40px; }

/* Wordmark set in the live webfont rather than baked into the SVG, so it stays
   crisp at any size and inherits the header's light/dark treatment. */
.brand__word { display: block; line-height: 1; }

.brand__word-top {
    display: block;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.32rem;
    letter-spacing: .06em;
    color: var(--evt-navy);
}

.brand__word-top em { font-style: normal; color: var(--evt-blue); }

.brand__word-sub {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .62rem;
    letter-spacing: .42em;
    color: var(--evt-gold-600);
    margin-top: .18rem;
}

.site-header--overlay:not(.is-stuck) .brand__word-top { color: #fff; }
.site-header--overlay:not(.is-stuck) .brand__word-top em { color: var(--evt-gold-400); }
.site-header--overlay:not(.is-stuck) .brand__word-sub { color: var(--evt-gold-400); }

/* --- Search overlay ------------------------------------------------------- */
.search-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(11, 37, 69, .16);
    border-top: 1px solid var(--evt-line);
    padding-block: 1.25rem 1.5rem;
    animation: search-drop var(--dur) var(--ease-out) both;
}

@keyframes search-drop {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: none; }
}

.search-overlay__form {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--evt-soft);
}

.search-overlay__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-head);
    font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
    font-weight: 600;
    color: var(--evt-ink);
    padding: .5rem 0;
}

.search-overlay__input:focus { outline: none; }
.search-overlay__input::placeholder { color: var(--evt-soft); font-weight: 500; }

.search-overlay__hints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .85rem;
    font-size: var(--fs-xs);
    color: var(--evt-soft);
}

.search-overlay__hints a {
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    background: var(--evt-blue-050);
    color: var(--evt-blue-800);
    font-weight: 600;
}

.search-overlay__hints a:hover { background: var(--evt-blue); color: #fff; }

.main-nav { margin-inline: auto; }

.main-nav > .nav {
    display: flex;
    align-items: center;
    /* nowrap: a second row cannot fit in the fixed-height header, so the nav
       must stay one line — the breakpoint below guarantees it has the room. */
    flex-wrap: nowrap;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav .nav-link {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--evt-ink);
    padding: .6rem .65rem;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    position: relative;
}

.main-nav .nav-link:hover { color: var(--evt-blue); }

.main-nav .nav-item.is-active > .nav-link {
    color: var(--evt-blue-700);
}

/* That blue is for the solid white header. Over the hero it also beat the
   overlay's white rule (same specificity, declared later), leaving the current
   page's label at ~2:1 against the image — effectively invisible. The gold
   underline already signals "active", so the text only has to stay readable. */
.site-header--overlay:not(.is-stuck) .nav-item.is-active > .nav-link {
    color: #fff;
}

.main-nav .nav-item.is-active > .nav-link::after {
    content: "";
    position: absolute;
    /* Matches .nav-link's inline padding so the rule sits under the text. */
    left: .65rem;
    right: .65rem;
    bottom: .25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--evt-gold);
}

.nav-caret { width: 10px; height: 10px; transition: transform var(--dur) var(--ease-out); }
.nav-item.has-mega:hover .nav-caret { transform: rotate(180deg); }

/* --- Mega menu ------------------------------------------------------------ */
.mega {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 12px);
    width: min(920px, calc(100vw - 3rem));
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    padding: 1.75rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
    z-index: 5;
}

.nav-item.has-mega { position: static; }
.header__inner { position: relative; }

.nav-item.has-mega:hover .mega,
.nav-item.has-mega:focus-within .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

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

.mega__col-title {
    font-family: var(--font-head);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--evt-soft);
    margin-bottom: .85rem;
}

.mega__link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    margin-inline: -.6rem;
    border-radius: var(--radius-sm);
    color: var(--evt-body);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.mega__link:hover { background: var(--evt-blue-050); color: var(--evt-blue-800); }
.mega__link .count { margin-left: auto; font-size: var(--fs-2xs); color: var(--evt-soft); }

.mega__feature {
    grid-column: span 1;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    min-height: 190px;
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
}

.mega__feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 37, 69, .88), rgba(11, 37, 69, .1));
}

.mega__feature > * { position: relative; z-index: 1; }
.mega__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- Header tools --------------------------------------------------------- */
.header__tools { display: flex; align-items: center; gap: .5rem; flex: none; }

.header__tool {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--evt-ink);
    background: transparent;
    border: 0;
}

.header__tool:hover { background: var(--evt-blue-050); color: var(--evt-blue-700); }

.header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}

.header__burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--evt-ink);
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}

.header__burger span:nth-child(2) { width: 70%; }

/* --- Mobile drawer -------------------------------------------------------- */
.mobile-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(400px, 88vw);
    background: #fff;
    z-index: var(--z-drawer);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-pop);
}

.mobile-nav.is-open { transform: none; }

.mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--evt-line);
}

.mobile-nav__body { overflow-y: auto; padding: 1rem 1.25rem 2rem; flex: 1; }

.mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--evt-ink);
    border-bottom: 1px solid var(--evt-line);
}

.mobile-nav__sub { padding-left: 1rem; }
.mobile-nav__sub .mobile-nav__link { font-weight: 500; font-size: var(--fs-sm); color: var(--evt-body); }

.scrim {
    position: fixed;
    inset: 0;
    background: rgba(11, 37, 69, .48);
    backdrop-filter: blur(2px);
    z-index: calc(var(--z-drawer) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}

.scrim.is-open { opacity: 1; visibility: visible; }

/* The eight top-level links need ~830px. Inside the standard 1240px container,
   alongside the brand and the tools, they only ever got ~620px — so the nav
   wrapped to two rows and overflowed the fixed-height header at EVERY desktop
   width, since the container caps out and never grows. The burger now takes
   over until the width where the single row genuinely fits (it carries the
   same links), and above that the header widens to --container-wide. */
@media (max-width: 1399.98px) {
    .main-nav, .header__tool--desktop { display: none; }
    .header__burger { display: flex; }
}

@media (min-width: 1400px) {
    .site-header .container { max-width: var(--container-wide); }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */

.hero {
    position: relative;
    min-height: clamp(560px, 82vh, 820px);
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-h) + 3rem);
    padding-bottom: 5rem;
    color: #fff;
    isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

.hero__bg img,
.hero__bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Slow drift adds life without the jank of a parallax library. */
    animation: hero-drift 26s var(--ease-in-out) infinite alternate;
}

@keyframes hero-drift {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.11) translate3d(-1.5%, -1%, 0); }
}

.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(11, 37, 69, .86) 0%, rgba(11, 37, 69, .58) 46%, rgba(11, 37, 69, .28) 100%),
        linear-gradient(to top, rgba(11, 37, 69, .72), transparent 45%);
}

.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero__content { max-width: 680px; }

.hero__title {
    font-size: var(--fs-hero);
    line-height: var(--lh-tight);
    color: #fff;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

.hero__title em {
    font-style: normal;
    color: var(--evt-gold);
}

.hero__tagline {
    font-family: var(--font-script);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem);
    color: var(--evt-gold-300);
    margin-bottom: .5rem;
    line-height: 1.3;
}

.hero__lead {
    font-size: var(--fs-lead);
    color: rgba(255, 255, 255, .88);
    max-width: 54ch;
    margin-bottom: 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.5rem; }

.hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2.25rem;
    color: rgba(255, 255, 255, .8);
    font-size: var(--fs-sm);
}

.hero__proof-item { display: inline-flex; align-items: center; gap: .55rem; }
.hero__proof-item strong { color: #fff; font-family: var(--font-head); font-size: 1.15rem; }

/* --- Hero search bar ------------------------------------------------------ */
.searchbar {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    padding: .6rem;
    margin-top: -3.75rem;
}

.searchbar__form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: .35rem;
    align-items: stretch;
}

.searchbar__field {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .7rem 1rem;
    border-radius: var(--radius);
    transition: background-color var(--dur-fast) var(--ease-out);
    min-width: 0;
}

.searchbar__field + .searchbar__field::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--evt-line);
}

.searchbar__field:hover { background: var(--evt-cloud); }
.searchbar__field:hover::before, .searchbar__field:hover + .searchbar__field::before { opacity: 0; }

.searchbar__label {
    font-family: var(--font-head);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--evt-soft);
    margin-bottom: .15rem;
}

.searchbar__control {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--evt-ink);
    width: 100%;
    appearance: none;
    cursor: pointer;
}

.searchbar__control:focus { outline: none; }

.searchbar__submit { align-self: stretch; }
.searchbar__submit .btn { height: 100%; width: 100%; white-space: nowrap; }

@media (max-width: 991.98px) {
    .searchbar { margin-top: -2rem; }
    .searchbar__form { grid-template-columns: 1fr 1fr; }
    .searchbar__field::before { display: none !important; }
    .searchbar__submit { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .searchbar__form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. TRUST STRIP / COUNTERS
   ========================================================================== */

.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--evt-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.trust-strip__item {
    background: #fff;
    padding: clamp(1.4rem, 1rem + 1.4vw, 2.25rem) 1.25rem;
    text-align: center;
}

.trust-strip__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto .75rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--evt-gold-050);
    color: var(--evt-gold-700);
}

.trust-strip__value {
    font-family: var(--font-head);
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem);
    font-weight: 800;
    color: var(--evt-blue);
    line-height: 1.1;
    letter-spacing: -.03em;
}

.trust-strip__label {
    font-size: var(--fs-xs);
    color: var(--evt-muted);
    margin-top: .3rem;
    font-weight: 500;
}

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

/* ==========================================================================
   7. TOUR CARD
   The single most repeated component on the site — one cover image only,
   fixed aspect ratio, and no mid-word truncation. See plan §differentiators.
   ========================================================================== */

.tour-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--evt-line);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.tour-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
    border-color: var(--evt-gold-200);
}

.tour-card__media { position: relative; }
.tour-card__media img { transition: transform var(--dur-slow) var(--ease-out); }
.tour-card:hover .tour-card__media img { transform: scale(1.06); }

.tour-card__badges {
    position: absolute;
    top: .85rem;
    left: .85rem;
    right: .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    z-index: 2;
    pointer-events: none;
}

.tour-card__fav {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .92);
    color: var(--evt-muted);
    box-shadow: var(--shadow-xs);
    transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}

.tour-card__fav:hover { transform: scale(1.1); color: var(--evt-danger); }
.tour-card__fav.is-active { color: var(--evt-danger); }
.tour-card__fav.is-active svg { fill: currentColor; }

.tour-card__duration {
    position: absolute;
    left: .85rem;
    bottom: .85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: var(--radius-pill);
    background: rgba(11, 37, 69, .82);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 700;
}

.tour-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.15rem 1.25rem 1.25rem;
}

.tour-card__meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-2xs);
    color: var(--evt-soft);
    font-weight: 600;
    margin-bottom: .5rem;
}

.tour-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.tour-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: .6rem;
    /* Clamp to whole lines — never a broken word with an ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.tour-card__title a { color: var(--evt-ink); }
.tour-card__title a:hover { color: var(--evt-blue); }

/* Stretched hit-area so the whole card is clickable, keyboard focus intact. */
.tour-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tour-card__rating {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: var(--fs-xs);
    margin-bottom: .85rem;
}

.tour-card__rating .score { font-weight: 800; color: var(--evt-ink); font-family: var(--font-head); }
.tour-card__rating .count { color: var(--evt-soft); }

.tour-card__foot {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--evt-line);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
}

.tour-card__price-label {
    display: block;
    font-size: var(--fs-2xs);
    color: var(--evt-soft);
    font-weight: 600;
    margin-bottom: .1rem;
}

.tour-card__price {
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--evt-blue);
    line-height: 1;
    letter-spacing: -.02em;
}

.tour-card__price small { font-size: .6em; font-weight: 600; color: var(--evt-soft); }

.tour-card__was {
    font-size: var(--fs-xs);
    color: var(--evt-soft);
    text-decoration: line-through;
    margin-right: .35rem;
}

.tour-card__cta {
    position: relative;
    z-index: 2;
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--evt-blue-700);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.tour-card--list { flex-direction: row; }
.tour-card--list .tour-card__media { width: 38%; flex: none; }
.tour-card--list .evt-media { height: 100%; aspect-ratio: auto; }

@media (max-width: 575.98px) {
    .tour-card--list { flex-direction: column; }
    .tour-card--list .tour-card__media { width: 100%; }
    .tour-card--list .evt-media { aspect-ratio: 3 / 2; }
}

/* --- Badges --------------------------------------------------------------- */
.badge-evt {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .32rem .65rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-head);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.2;
}

.badge-evt--gold { background: var(--evt-gold); color: var(--evt-navy); }
.badge-evt--blue { background: var(--evt-blue); color: #fff; }
.badge-evt--navy { background: var(--evt-navy); color: #fff; }
.badge-evt--light { background: rgba(255, 255, 255, .92); color: var(--evt-ink); }
.badge-evt--offer { background: var(--evt-danger); color: #fff; }
.badge-evt--soft { background: var(--evt-blue-050); color: var(--evt-blue-800); }
.badge-evt--success { background: var(--evt-success-bg); color: var(--evt-success); }
.badge-evt--warning { background: var(--evt-warning-bg); color: var(--evt-warning); }
.badge-evt--verified { background: var(--evt-success); color: #fff; }

/* ==========================================================================
   8. DESTINATION CARD
   ========================================================================== */

.dest-card {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #fff;
    isolation: isolate;
    box-shadow: var(--shadow-sm);
}

.dest-card img { transition: transform var(--dur-slow) var(--ease-out); }
.dest-card:hover img { transform: scale(1.08); }

.dest-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 37, 69, .92) 4%, rgba(11, 37, 69, .35) 48%, rgba(11, 37, 69, .08) 100%);
    transition: opacity var(--dur) var(--ease-out);
    z-index: 1;
}

.dest-card:hover::after { opacity: .88; }

.dest-card__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 1.35rem;
}

.dest-card__name {
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .2rem;
}

.dest-card__count {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .78);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.dest-card__arrow {
    position: absolute;
    right: 1.35rem;
    bottom: 1.35rem;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--evt-gold);
    color: var(--evt-navy);
    transform: translateY(8px) scale(.85);
    opacity: 0;
    transition: transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease-out);
}

.dest-card:hover .dest-card__arrow { transform: none; opacity: 1; }

.dest-card--tall .evt-media { aspect-ratio: 3 / 4; }

/* ==========================================================================
   9. OFFERS + COUNTDOWN
   ========================================================================== */

.countdown {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.countdown__unit {
    min-width: 46px;
    padding: .4rem .3rem;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    text-align: center;
    line-height: 1.1;
}

.countdown__num {
    display: block;
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.countdown__label {
    display: block;
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .66);
    font-weight: 700;
}

.countdown--light .countdown__unit { background: var(--evt-blue-050); border-color: var(--evt-blue-100); }
.countdown--light .countdown__num { color: var(--evt-blue-800); }
.countdown--light .countdown__label { color: var(--evt-muted); }

.offer-card { position: relative; }
.offer-card .countdown { position: absolute; left: .85rem; bottom: .85rem; z-index: 2; }

/* ==========================================================================
   10. "HOW IT WORKS" STEPS
   ========================================================================== */

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, .8rem + 2vw, 3rem);
    position: relative;
}

.step { text-align: center; position: relative; }

.step__num {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px dashed var(--evt-blue-200);
    color: var(--evt-blue);
    position: relative;
    z-index: 2;
    transition: transform var(--dur) var(--ease-spring), border-color var(--dur), background-color var(--dur);
}

.step:hover .step__num {
    transform: translateY(-4px);
    background: var(--evt-blue);
    border-color: var(--evt-blue);
    color: #fff;
    border-style: solid;
}

.step__num-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--evt-gold);
    color: var(--evt-navy);
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-size: var(--fs-2xs);
    font-weight: 800;
}

.step__title { font-size: var(--fs-h4); margin-bottom: .5rem; }
.step__text { color: var(--evt-muted); font-size: var(--fs-sm); max-width: 34ch; margin-inline: auto; }

/* Dashed connector between steps, hidden on mobile where they stack. */
.steps::before {
    content: "";
    position: absolute;
    top: 38px;
    left: 16%;
    right: 16%;
    height: 2px;
    background-image: linear-gradient(90deg, var(--evt-blue-200) 55%, transparent 0);
    background-size: 14px 2px;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .steps { grid-template-columns: 1fr; gap: 2rem; }
    .steps::before { display: none; }
}

/* ==========================================================================
   11. PLAN MY TRIP PICKER
   ========================================================================== */

.plan-option {
    display: block;
    position: relative;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 2px solid var(--evt-line);
    text-align: left;
    height: 100%;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.plan-option:hover { border-color: var(--evt-blue-300); transform: translateY(-4px); box-shadow: var(--shadow-card); }

.plan-option input { position: absolute; opacity: 0; pointer-events: none; }

.plan-option:has(input:checked) {
    border-color: var(--evt-blue);
    box-shadow: 0 0 0 4px var(--evt-blue-050);
}

.plan-option__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    background: var(--evt-gold-050);
    color: var(--evt-gold-700);
    margin-bottom: 1rem;
}

.plan-option:has(input:checked) .plan-option__icon { background: var(--evt-blue); color: #fff; }
.plan-option__title { font-size: var(--fs-h4); margin-bottom: .35rem; }
.plan-option__text { font-size: var(--fs-sm); color: var(--evt-muted); margin: 0; }

/* ==========================================================================
   12. REVIEWS
   ========================================================================== */

.review-card {
    background: #fff;
    border: 1px solid var(--evt-line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.review-card__quote {
    position: absolute;
    top: 1.1rem;
    right: 1.35rem;
    font-family: Georgia, serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--evt-gold-100);
    pointer-events: none;
    user-select: none;
}

.review-card__head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }

.review-card__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--evt-blue-050);
    color: var(--evt-blue-700);
    font-family: var(--font-head);
    font-weight: 800;
    flex: none;
    overflow: hidden;
}

.review-card__name { font-family: var(--font-head); font-weight: 700; color: var(--evt-ink); line-height: 1.2; }
.review-card__origin { font-size: var(--fs-2xs); color: var(--evt-soft); display: flex; align-items: center; gap: .3rem; }
.review-card__title { font-size: var(--fs-body); font-weight: 700; margin-bottom: .4rem; }
.review-card__body { font-size: var(--fs-sm); color: var(--evt-muted); margin-bottom: 1rem; }

.review-card__foot {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--evt-line);
    font-size: var(--fs-2xs);
    color: var(--evt-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.review-card__reply {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--evt-blue-050);
    border-left: 3px solid var(--evt-blue);
    font-size: var(--fs-xs);
    color: var(--evt-blue-900);
}

.review-card__reply strong { display: block; margin-bottom: .2rem; }

/* --- Rating distribution -------------------------------------------------- */
.rating-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    background: var(--evt-sand);
}

.rating-summary__score {
    text-align: center;
    padding-right: 2rem;
    border-right: 1px solid var(--evt-line-strong);
}

.rating-summary__value {
    font-family: var(--font-head);
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--evt-ink);
    letter-spacing: -.03em;
}

.rating-summary__out { font-size: var(--fs-xs); color: var(--evt-soft); }

.rating-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: .45rem; font-size: var(--fs-xs); }
.rating-bar__label { width: 46px; color: var(--evt-muted); flex: none; display: flex; align-items: center; gap: .2rem; }
.rating-bar__track { flex: 1; height: 8px; border-radius: 4px; background: var(--evt-line); overflow: hidden; }

.rating-bar__fill {
    height: 100%;
    border-radius: 4px;
    background: var(--evt-gold);
    transition: width var(--dur-slow) var(--ease-out);
}

.rating-bar__count { width: 34px; text-align: right; color: var(--evt-soft); flex: none; }

@media (max-width: 767.98px) {
    .rating-summary { grid-template-columns: 1fr; gap: 1.25rem; }
    .rating-summary__score { padding-right: 0; padding-bottom: 1.25rem; border-right: 0; border-bottom: 1px solid var(--evt-line-strong); }
}

/* ==========================================================================
   13. BLOG CARD
   ========================================================================== */

.post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--evt-line);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.post-card__media img { transition: transform var(--dur-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.06); }

.post-card__cat {
    position: absolute;
    left: .85rem;
    top: .85rem;
    z-index: 2;
}

.post-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }

.post-card__meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-2xs);
    color: var(--evt-soft);
    margin-bottom: .6rem;
    font-weight: 600;
}

.post-card__title {
    font-size: 1.0625rem;
    line-height: 1.4;
    margin-bottom: .6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__title a { color: var(--evt-ink); }
.post-card__title a:hover { color: var(--evt-blue); }

.post-card__excerpt {
    font-size: var(--fs-sm);
    color: var(--evt-muted);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__foot { margin-top: auto; }

/* ==========================================================================
   14. FAQ ACCORDION
   ========================================================================== */

.faq { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--evt-line); background: #fff; }
.faq__item + .faq__item { border-top: 1px solid var(--evt-line); }

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.4rem;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-body);
    color: var(--evt-ink);
    transition: background-color var(--dur-fast);
}

.faq__q:hover { background: var(--evt-cloud); }
.faq__q[aria-expanded="true"] { color: var(--evt-blue-700); }

.faq__icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--evt-blue-050);
    color: var(--evt-blue-700);
    transition: transform var(--dur) var(--ease-out), background-color var(--dur);
}

.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); background: var(--evt-gold); color: var(--evt-navy); }

.faq__a { padding: 0 1.4rem 1.35rem; color: var(--evt-muted); font-size: var(--fs-sm); }
.faq__a > :last-child { margin-bottom: 0; }

/* ==========================================================================
   15. PARTNERS
   ========================================================================== */

.partner-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}

.partner-strip img {
    height: 34px;
    width: auto;
    filter: grayscale(1);
    opacity: .55;
    transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.partner-strip a:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   16. NEWSLETTER
   ========================================================================== */

.newsletter {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(120deg, var(--evt-navy) 0%, var(--evt-blue-800) 62%, var(--evt-blue-700) 100%);
    color: #fff;
    padding: clamp(2.25rem, 1.6rem + 3vw, 4rem);
}

.newsletter h2 { color: #fff; }

.newsletter__form {
    display: flex;
    gap: .5rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-pill);
    padding: .4rem;
    max-width: 520px;
}

.newsletter__form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: .65rem 1.15rem;
    color: #fff;
    font-size: var(--fs-sm);
}

.newsletter__form input::placeholder { color: rgba(255, 255, 255, .58); }
.newsletter__form input:focus { outline: none; }

@media (max-width: 575.98px) {
    .newsletter__form { flex-direction: column; border-radius: var(--radius); }
    .newsletter__form .btn { width: 100%; }
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.site-footer {
    position: relative;
    background: var(--evt-navy);
    color: rgba(255, 255, 255, .68);
    font-size: var(--fs-sm);
    overflow: hidden;
}

.site-footer__inner { position: relative; z-index: 1; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0; }
.site-footer h5 { color: #fff; font-size: var(--fs-body); font-weight: 800; margin-bottom: 1.1rem; }
.site-footer a { color: rgba(255, 255, 255, .68); }
.site-footer a:hover { color: var(--evt-gold-400); }
.site-footer__logo { height: 56px; width: auto; margin-bottom: 1.15rem; }
.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list li + li { margin-top: .6rem; }

.site-footer__contact { display: flex; gap: .75rem; align-items: flex-start; }
.site-footer__contact + .site-footer__contact { margin-top: 1rem; }

.site-footer__contact-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    color: var(--evt-gold-400);
}

.site-footer__socials { display: flex; gap: .55rem; margin-top: 1.25rem; }

.site-footer__socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.site-footer__socials a:hover { background: var(--evt-gold); color: var(--evt-navy); transform: translateY(-3px); }

.site-footer__bottom {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding-block: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--fs-xs);
}

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

/* ==========================================================================
   18. FLOATING ACTIONS
   ========================================================================== */

.fab-stack {
    position: fixed;
    right: 1.15rem;
    bottom: 1.15rem;
    z-index: var(--z-fab);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-items: flex-end;
}

.fab {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 0;
    color: #fff;
    box-shadow: var(--shadow-lift);
    transition: transform var(--dur) var(--ease-spring), opacity var(--dur);
}

.fab:hover { transform: scale(1.08); color: #fff; }
.fab--whatsapp { background: #25D366; }
.fab--top { background: var(--evt-navy); opacity: 0; pointer-events: none; }
.fab--top.is-visible { opacity: 1; pointer-events: auto; }

/* Nudge the stack up on mobile so it clears the sticky booking bar. */
body.has-book-bar .fab-stack { bottom: calc(1.15rem + 76px); }

@media (min-width: 992px) {
    body.has-book-bar .fab-stack { bottom: 1.15rem; }
}

/* --- Accessibility discount banner ---------------------------------------- */
.access-banner {
    background: var(--evt-gold-050);
    border-top: 1px solid var(--evt-gold-200);
    border-bottom: 1px solid var(--evt-gold-200);
    color: var(--evt-gold-800);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding-block: .7rem;
}

.access-banner__inner { display: flex; align-items: center; justify-content: center; gap: .6rem; text-align: center; flex-wrap: wrap; }

/* ==========================================================================
   19. BREADCRUMBS + PAGE HEAD
   ========================================================================== */

.page-head {
    position: relative;
    color: #fff;
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
    background: var(--evt-navy);
    isolation: isolate;
    overflow: hidden;
}

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

.page-head__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(11, 37, 69, .92) 12%, rgba(11, 37, 69, .62) 100%);
}

.page-head h1 { color: #fff; margin-bottom: .6rem; }
.page-head__lead { color: rgba(255, 255, 255, .8); max-width: 60ch; font-size: var(--fs-lead); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-xs); margin-bottom: 1rem; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .62); }
.crumbs a { color: rgba(255, 255, 255, .82); }
.crumbs a:hover { color: var(--evt-gold-400); }
.crumbs li[aria-current] { color: var(--evt-gold-400); font-weight: 600; }
.crumbs .sep { color: rgba(255, 255, 255, .38); }

.crumbs--light li { color: var(--evt-muted); }
.crumbs--light a { color: var(--evt-blue-700); }
.crumbs--light li[aria-current] { color: var(--evt-ink); }
.crumbs--light .sep { color: var(--evt-line-strong); }

/* ==========================================================================
   20. LISTING + FILTERS
   ========================================================================== */

.listing { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; align-items: start; }

.filter-panel {
    background: #fff;
    border: 1px solid var(--evt-line);
    border-radius: var(--radius-lg);
    position: sticky;
    top: calc(var(--header-h-scrolled) + 1.25rem);
    max-height: calc(100vh - var(--header-h-scrolled) - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.filter-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--evt-line);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.filter-panel__title { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm); margin: 0; }

.filter-group { padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--evt-line); }
.filter-group:last-child { border-bottom: 0; }

.filter-group__title {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--evt-ink);
    margin-bottom: .85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
}

.filter-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem 0;
    font-size: var(--fs-sm);
    color: var(--evt-body);
    cursor: pointer;
}

.filter-check input { width: 18px; height: 18px; accent-color: var(--evt-blue); flex: none; cursor: pointer; }
.filter-check:hover { color: var(--evt-blue-700); }
.filter-check .count { margin-left: auto; font-size: var(--fs-2xs); color: var(--evt-soft); }

.filter-range { display: flex; align-items: center; gap: .5rem; }
.filter-range input { width: 100%; }
.filter-range span { color: var(--evt-soft); flex: none; }

/* --- Results toolbar ------------------------------------------------------ */
.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .9rem 1.15rem;
    background: #fff;
    border: 1px solid var(--evt-line);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
}

.results-bar__count { font-size: var(--fs-sm); color: var(--evt-muted); }
.results-bar__count strong { color: var(--evt-ink); font-family: var(--font-head); }
.results-bar__tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.view-toggle { display: inline-flex; border: 1px solid var(--evt-line); border-radius: var(--radius-sm); overflow: hidden; }

.view-toggle button {
    width: 38px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: #fff;
    color: var(--evt-soft);
}

.view-toggle button.is-active { background: var(--evt-blue-050); color: var(--evt-blue-700); }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .5rem .35rem .8rem;
    border-radius: var(--radius-pill);
    background: var(--evt-blue-050);
    color: var(--evt-blue-800);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.chip button {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 119, 182, .16);
    color: inherit;
    display: grid;
    place-items: center;
    line-height: 1;
    font-size: 11px;
}

.chip button:hover { background: var(--evt-blue); color: #fff; }

.filter-toggle-mobile { display: none; }

@media (max-width: 991.98px) {
    .listing { grid-template-columns: 1fr; }
    .filter-toggle-mobile { display: inline-flex; }

    .filter-panel {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(400px, 92vw);
        max-height: none;
        border-radius: 0;
        z-index: var(--z-drawer);
        transform: translateX(100%);
        transition: transform var(--dur-slow) var(--ease-out);
        display: flex;
        flex-direction: column;
    }

    .filter-panel.is-open { transform: none; }

    /* Opt out of drawer behaviour for panels used as a plain in-flow sidebar
       (the FAQ topics nav). Those have no toggle to ever add .is-open, so the
       drawer's translateX(100%) parked them off the right edge and dragged the
       document's scrollWidth with them — 348px of horizontal scroll on mobile. */
    .filter-panel--static {
        position: static;
        inset: auto;
        width: auto;
        z-index: auto;
        transform: none;
        display: block;
    }
    .filter-panel__head { border-radius: 0; }
    .filter-panel__body { overflow-y: auto; flex: 1; }

    .filter-panel__foot {
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--evt-line);
        display: flex;
        gap: .6rem;
        background: #fff;
    }
}

@media (min-width: 992px) {
    .filter-panel__foot { display: none; }
}

/* --- Skeleton loaders ----------------------------------------------------- */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--evt-cloud);
    border-radius: var(--radius-sm);
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    animation: shimmer 1.3s infinite;
}

@keyframes shimmer { to { transform: translateX(100%); } }

.skeleton-card { border: 1px solid var(--evt-line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.skeleton-card__media { aspect-ratio: 3 / 2; }
.skeleton-card__body { padding: 1.15rem 1.25rem 1.25rem; }
.skeleton-line { height: 12px; border-radius: 6px; margin-bottom: .6rem; }

.grid-loading { position: relative; }
.grid-loading > .tour-grid { opacity: .35; pointer-events: none; transition: opacity var(--dur); }

/* --- Empty state ---------------------------------------------------------- */
.empty-state { text-align: center; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem; }

.empty-state__icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--evt-blue-050);
    color: var(--evt-blue-400);
}

/* --- Pagination ----------------------------------------------------------- */
/* Bootstrap's .pagination is a nowrap flex row, so a listing with many pages
   (the reviews archive) pushed its link list straight past the viewport and
   scrolled the whole page sideways. Wrapping keeps any page count contained. */
.pagination { gap: .35rem; flex-wrap: wrap; justify-content: center; }

.page-link {
    border: 1px solid var(--evt-line);
    border-radius: var(--radius-sm) !important;
    color: var(--evt-ink);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-sm);
    min-width: 42px;
    text-align: center;
    padding: .55rem .75rem;
}

.page-link:hover { background: var(--evt-blue-050); border-color: var(--evt-blue-200); color: var(--evt-blue-800); }
.page-item.active .page-link { background: var(--evt-blue); border-color: var(--evt-blue); color: #fff; }
.page-item.disabled .page-link { color: var(--evt-soft); background: var(--evt-cloud); }

/* ==========================================================================
   21. TOUR DETAIL
   ========================================================================== */

.tour-gallery { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.tour-gallery__main .evt-media { aspect-ratio: 16 / 9; }
.tour-gallery__thumbs { margin-top: .6rem; }

.tour-gallery__thumbs .swiper-slide {
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    opacity: .55;
    transition: opacity var(--dur);
    border: 2px solid transparent;
}

.tour-gallery__thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--evt-gold); }

.tour-gallery__count {
    position: absolute;
    right: .9rem;
    bottom: .9rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border-radius: var(--radius-pill);
    background: rgba(11, 37, 69, .82);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    border: 0;
    backdrop-filter: blur(6px);
}

.tour-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--evt-line);
    border: 1px solid var(--evt-line);
    border-radius: var(--radius);
    overflow: hidden;
}

.tour-fact { background: #fff; padding: 1rem 1.15rem; display: flex; gap: .75rem; align-items: flex-start; }

.tour-fact__icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--evt-blue-050);
    color: var(--evt-blue-700);
}

.tour-fact__label { font-size: var(--fs-2xs); color: var(--evt-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tour-fact__value { font-family: var(--font-head); font-weight: 700; color: var(--evt-ink); font-size: var(--fs-sm); line-height: 1.35; }

/* --- Sticky section tabs -------------------------------------------------- */
.tour-tabs {
    position: sticky;
    top: var(--header-h-scrolled);
    z-index: var(--z-sticky);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--evt-line);
    margin-bottom: 2rem;
}

.tour-tabs__list {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tour-tabs__list::-webkit-scrollbar { display: none; }

.tour-tabs__link {
    display: block;
    white-space: nowrap;
    padding: 1rem .95rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--evt-muted);
    border-bottom: 3px solid transparent;
}

.tour-tabs__link:hover { color: var(--evt-blue-700); }
.tour-tabs__link.is-active { color: var(--evt-blue-800); border-bottom-color: var(--evt-gold); }

.tour-section { scroll-margin-top: calc(var(--header-h-scrolled) + 68px); padding-bottom: 2.75rem; }
.tour-section__title { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }

.tour-section__title::before {
    content: "";
    width: 5px;
    height: 26px;
    border-radius: 3px;
    background: var(--evt-gold);
    flex: none;
}

/* --- Highlights ----------------------------------------------------------- */
.highlight-group + .highlight-group { margin-top: 1.25rem; }

.highlight-group__city {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--fs-sm);
    color: var(--evt-blue-800);
    margin-bottom: .6rem;
}

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

.highlight-list li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    font-size: var(--fs-sm);
    color: var(--evt-body);
}

.highlight-list li svg { flex: none; margin-top: .28em; color: var(--evt-gold-600); }

/* --- Itinerary timeline --------------------------------------------------- */
.itinerary { position: relative; padding-left: 2.6rem; }

.itinerary::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--evt-blue-200), var(--evt-blue-100));
}

.itin-item { position: relative; padding-bottom: 1.5rem; }
.itin-item:last-child { padding-bottom: 0; }

.itin-item__dot {
    position: absolute;
    left: -2.6rem;
    top: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid var(--evt-blue-200);
    color: var(--evt-blue-700);
    font-family: var(--font-head);
    font-size: var(--fs-2xs);
    font-weight: 800;
}

.itin-item.is-open .itin-item__dot { background: var(--evt-blue); border-color: var(--evt-blue); color: #fff; }

.itin-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: #fff;
    border: 1px solid var(--evt-line);
    border-radius: var(--radius);
    padding: .95rem 1.15rem;
    text-align: left;
    transition: border-color var(--dur), box-shadow var(--dur);
}

.itin-item__head:hover { border-color: var(--evt-blue-200); box-shadow: var(--shadow-xs); }
.itin-item__day { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--evt-gold-700); }
.itin-item__title { font-family: var(--font-head); font-weight: 700; color: var(--evt-ink); font-size: var(--fs-body); }
.itin-item__body { padding: 1rem 1.15rem 0; color: var(--evt-muted); font-size: var(--fs-sm); }

/* --- Inclusions ----------------------------------------------------------- */
.incl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.incl-list li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--fs-sm); }

.incl-list__icon {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-top: .1em;
}

.incl-list--in .incl-list__icon { background: var(--evt-success-bg); color: var(--evt-success); }
.incl-list--out .incl-list__icon { background: var(--evt-danger-bg); color: var(--evt-danger); }
.incl-list--out li { color: var(--evt-muted); }

/* --- Price tier table (transparency differentiator) ----------------------- */
.tier-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }

.tier-table th {
    text-align: left;
    font-family: var(--font-head);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--evt-soft);
    padding: .65rem 1rem;
    background: var(--evt-sand);
    border-bottom: 1px solid var(--evt-line);
}

.tier-table th:first-child { border-radius: var(--radius) 0 0 0; }
.tier-table th:last-child { border-radius: 0 var(--radius) 0 0; text-align: right; }
.tier-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--evt-line); }
.tier-table td:last-child { text-align: right; }

.tier-table tbody tr { transition: background-color var(--dur-fast); }
.tier-table tbody tr:hover { background: var(--evt-cloud); }

/* Highlighted row = the tier matching the traveller count currently selected. */
.tier-table tbody tr.is-current { background: var(--evt-blue-050); }
.tier-table tbody tr.is-current td { color: var(--evt-blue-900); font-weight: 700; box-shadow: inset 3px 0 0 var(--evt-blue); }

.tier-table__pax { font-weight: 600; color: var(--evt-ink); }
.tier-table__price { font-family: var(--font-head); font-weight: 800; color: var(--evt-blue); font-size: 1.05rem; }
.tier-table__save { font-size: var(--fs-2xs); color: var(--evt-success); font-weight: 700; }

/* ==========================================================================
   22. BOOKING WIDGET
   ========================================================================== */

.book-widget {
    background: #fff;
    border: 1px solid var(--evt-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    position: sticky;
    top: calc(var(--header-h-scrolled) + 1.25rem);
}

.book-widget__head { padding: 1.25rem 1.35rem; border-bottom: 1px solid var(--evt-line); background: var(--evt-sand); }
.book-widget__from { font-size: var(--fs-2xs); color: var(--evt-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.book-widget__price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }

.book-widget__amount {
    font-family: var(--font-head);
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--evt-blue);
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.book-widget__was { font-size: var(--fs-sm); color: var(--evt-soft); text-decoration: line-through; }
.book-widget__unit { font-size: var(--fs-xs); color: var(--evt-muted); font-weight: 600; }
.book-widget__body { padding: 1.35rem; }

.field-block { margin-bottom: 1rem; }

.field-label {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--evt-soft);
    margin-bottom: .4rem;
}

/* --- Traveller steppers --------------------------------------------------- */
.pax-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
}

.pax-row + .pax-row { border-top: 1px solid var(--evt-line); }
.pax-row__label { font-family: var(--font-head); font-weight: 700; color: var(--evt-ink); font-size: var(--fs-sm); }
.pax-row__hint { font-size: var(--fs-2xs); color: var(--evt-soft); font-weight: 500; }
.stepper { display: inline-flex; align-items: center; gap: .35rem; }

.stepper__btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--evt-line-strong);
    background: #fff;
    color: var(--evt-ink);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    line-height: 1;
    transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}

.stepper__btn:hover:not(:disabled) { border-color: var(--evt-blue); color: var(--evt-blue); background: var(--evt-blue-050); }
.stepper__btn:disabled { opacity: .4; cursor: not-allowed; }

.stepper__value {
    width: 38px;
    text-align: center;
    border: 0;
    background: transparent;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--fs-body);
    color: var(--evt-ink);
    -moz-appearance: textfield;
}

.stepper__value::-webkit-outer-spin-button,
.stepper__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Add-ons -------------------------------------------------------------- */
.addon-list { display: grid; gap: .5rem; max-height: 260px; overflow-y: auto; padding-right: .25rem; }

.addon {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .7rem .85rem;
    border: 1px solid var(--evt-line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
}

.addon:hover { border-color: var(--evt-blue-200); background: var(--evt-blue-050); }
.addon:has(input:checked) { border-color: var(--evt-blue); background: var(--evt-blue-050); }
.addon input { width: 18px; height: 18px; accent-color: var(--evt-blue); flex: none; margin-top: .1rem; }
.addon__name { font-size: var(--fs-sm); font-weight: 600; color: var(--evt-ink); line-height: 1.35; }
.addon__meta { font-size: var(--fs-2xs); color: var(--evt-soft); }
.addon__price { margin-left: auto; font-family: var(--font-head); font-weight: 800; color: var(--evt-blue); font-size: var(--fs-sm); white-space: nowrap; }

/* --- Live quote breakdown ------------------------------------------------- */
.quote {
    margin-top: 1.15rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius);
    background: var(--evt-sand);
    font-size: var(--fs-sm);
    position: relative;
}

.quote.is-loading { opacity: .55; }
.quote__line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.quote__line span:first-child { color: var(--evt-muted); }
.quote__line span:last-child { font-weight: 600; color: var(--evt-ink); font-variant-numeric: tabular-nums; }
.quote__line--discount span:last-child { color: var(--evt-success); }

.quote__total {
    margin-top: .6rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--evt-line-strong);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.quote__total-label { font-family: var(--font-head); font-weight: 800; color: var(--evt-ink); }

.quote__total-value {
    font-family: var(--font-head);
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--evt-blue);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.quote__note { font-size: var(--fs-2xs); color: var(--evt-soft); margin-top: .35rem; }

/* Reassurance sits next to the button, never buried in a policy page. */
.book-assure { display: grid; gap: .45rem; margin-top: 1rem; }

.book-assure__item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: var(--fs-2xs);
    color: var(--evt-muted);
}

.book-assure__item svg { flex: none; margin-top: .15em; color: var(--evt-success); }

/* --- Mobile sticky booking bar -------------------------------------------- */
.book-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-fab);
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--evt-line);
    box-shadow: 0 -6px 24px rgba(11, 37, 69, .12);
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.book-bar__price { line-height: 1.2; }
.book-bar__amount { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; color: var(--evt-blue); }
.book-bar__label { font-size: var(--fs-2xs); color: var(--evt-soft); font-weight: 600; }

@media (max-width: 991.98px) {
    .book-widget { position: static; }
    .book-bar { display: flex; }
}

/* ==========================================================================
   23. FORMS
   ========================================================================== */

.form-label {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--evt-ink);
    margin-bottom: .35rem;
}

.form-label .req { color: var(--evt-danger); }

.form-control, .form-select {
    border: 1.5px solid var(--evt-line);
    border-radius: var(--radius-sm);
    padding: .7rem .95rem;
    font-size: var(--fs-sm);
    color: var(--evt-ink);
    background-color: #fff;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.form-control::placeholder { color: var(--evt-soft); }

.form-control:focus, .form-select:focus {
    border-color: var(--evt-blue);
    box-shadow: 0 0 0 4px var(--evt-blue-050);
}

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--evt-danger); }
.invalid-feedback { font-size: var(--fs-2xs); font-weight: 600; }
.form-text { font-size: var(--fs-2xs); color: var(--evt-soft); }

.input-icon { position: relative; }
.input-icon .form-control { padding-left: 2.65rem; }

.input-icon__glyph {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--evt-soft);
    pointer-events: none;
}

/* --- Alerts --------------------------------------------------------------- */
.alert { border: 0; border-radius: var(--radius); font-size: var(--fs-sm); padding: 1rem 1.15rem; display: flex; gap: .75rem; align-items: flex-start; }
.alert svg { flex: none; margin-top: .15em; }
.alert-success { background: var(--evt-success-bg); color: #0F5B3E; }
.alert-danger { background: var(--evt-danger-bg); color: #8E2721; }
.alert-info { background: var(--evt-info-bg); color: var(--evt-blue-900); }
.alert-warning { background: var(--evt-warning-bg); color: #7A4E00; }

/* ==========================================================================
   24. CHECKOUT / CONFIRMATION
   ========================================================================== */

.checkout-steps { display: flex; align-items: center; gap: .5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.checkout-step { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); color: var(--evt-soft); font-weight: 600; }

.checkout-step__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--evt-cloud);
    color: var(--evt-soft);
    font-family: var(--font-head);
    font-size: var(--fs-2xs);
    font-weight: 800;
}

.checkout-step.is-active { color: var(--evt-ink); }
.checkout-step.is-active .checkout-step__num { background: var(--evt-blue); color: #fff; }
.checkout-step.is-done .checkout-step__num { background: var(--evt-success); color: #fff; }
.checkout-step__sep { width: 28px; height: 2px; background: var(--evt-line); border-radius: 2px; }

.summary-card { background: #fff; border: 1px solid var(--evt-line); border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: calc(var(--header-h-scrolled) + 1.25rem); }
.summary-card__media .evt-media { aspect-ratio: 16 / 9; }
.summary-card__body { padding: 1.25rem; }

.confirm-hero { text-align: center; padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }

.confirm-hero__check {
    width: 92px;
    height: 92px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--evt-success-bg);
    color: var(--evt-success);
    animation: pop-in var(--dur-slow) var(--ease-spring) both;
}

@keyframes pop-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.ref-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--evt-navy);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: .06em;
}

.ref-pill button { background: rgba(255, 255, 255, .16); border: 0; color: #fff; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; }
.ref-pill button:hover { background: var(--evt-gold); color: var(--evt-navy); }

/* ==========================================================================
   25. MISC
   ========================================================================== */

.prose { color: var(--evt-body); font-size: var(--fs-body); line-height: var(--lh-body); }
.prose h2 { font-size: var(--fs-h3); margin: 2rem 0 .85rem; }
.prose h3 { font-size: var(--fs-h4); margin: 1.6rem 0 .65rem; }
.prose ul, .prose ol { padding-left: 1.35rem; margin-bottom: 1rem; }
.prose li { margin-bottom: .4rem; }
.prose img { border-radius: var(--radius); margin-block: 1.5rem; }
.prose blockquote { border-left: 4px solid var(--evt-gold); padding: .35rem 0 .35rem 1.25rem; margin: 1.5rem 0; color: var(--evt-ink); font-size: var(--fs-lead); font-style: italic; }
.prose a { color: var(--evt-blue-700); text-decoration: underline; text-underline-offset: 3px; }

.divider-pattern { position: relative; height: 84px; overflow: hidden; }

/* Scroll reveal — the JS adds .is-in when the element enters the viewport. */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

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

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; }
}

/* Swiper overrides kept minimal — brand colours only. */
.swiper-button-next, .swiper-button-prev {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--evt-ink);
    box-shadow: var(--shadow-card);
    transition: background-color var(--dur), color var(--dur);
}

.swiper-button-next::after, .swiper-button-prev::after { font-size: 15px; font-weight: 800; }
.swiper-button-next:hover, .swiper-button-prev:hover { background: var(--evt-blue); color: #fff; }
.swiper-button-disabled { opacity: .35; }
.swiper-pagination-bullet-active { background: var(--evt-blue); }

/* Toasts */
.toast-stack { position: fixed; top: calc(var(--header-h) + 1rem); right: 1rem; z-index: var(--z-toast); display: grid; gap: .6rem; max-width: 360px; }

.toast-evt {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .9rem 1.1rem;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-lift);
    border-left: 4px solid var(--evt-blue);
    font-size: var(--fs-sm);
    animation: toast-in var(--dur) var(--ease-out) both;
}

.toast-evt--success { border-left-color: var(--evt-success); }
.toast-evt--error { border-left-color: var(--evt-danger); }

@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* Print — booking confirmations get printed and emailed as PDFs. */
@media print {
    .site-header, .site-footer, .fab-stack, .book-bar, .topbar, .access-banner, .no-print { display: none !important; }
    body { background: #fff; }
    .summary-card, .book-widget { box-shadow: none; position: static; }
}