/* ============================================================
   DayGo Tours Egypt — public site design system
   ------------------------------------------------------------
   Every value in this file resolves to a token from tokens.css,
   which MUST be loaded first. If you need a number that isn't
   there, add a token — do not inline a literal.

   tokens.css is shared with admin.css. A change to a token
   moves both the public site and the operator panel, which is
   the point: they are one system, not two.

   Colour identity: deep navy grounds headings, footer and dark bands.
   Royal blue is the primary CTA / link accent (marketplace revamp).
   Sand carries desert warmth in tints and price emphasis. Alpha variants
   use the rgb triplets from tokens.css. Never invent a parallel palette
   in this file — extend tokens.css instead.
   navy) or 10 29 48 (deep navy) so tints stay on-hue.

   Structure: `.section` owns vertical rhythm and spans the
   full viewport. `.shell` owns the horizontal measure. Every
   section is `<section class="section"><div class="shell">`,
   banded or not, so content edges always line up.
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Anchor targets used to land underneath the fixed header. */
    scroll-padding-top: calc(var(--nav-h) + 1rem);
    /* No `overflow-x` here on purpose. It was masking overflow rather than
       fixing it, and a masked overflow is one nobody ever finds. There is
       no genuine horizontal overflow at any breakpoint — verified across
       320-1440px — so if a scrollbar ever appears, that is a real layout
       bug and should be fixed at the offending element.
       `scroll-behavior` is likewise not set globally: site.js applies smooth
       scrolling per anchor click, which keeps deep links snappy and stops it
       interfering with the auto-hide header's scroll-delta maths. */
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--v2-bg);
    color: var(--v2-text);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

body.site-shell {
    display: flex;
    flex-direction: column;
    /* dvh rather than vh so the shell doesn't overshoot while mobile browser
       chrome is on screen. */
    min-height: 100dvh;
    /* Spacer for the fixed header. Tracks the measured height, so it stays
       correct when the bar shrinks on scroll or the nav wraps. */
    padding-top: var(--nav-h);
}

body.site-nav-open {
    overflow: hidden;
}

.site-main {
    flex: 1;
}

a,
button,
[role="button"],
input,
select,
textarea,
summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

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

p {
    margin: 0;
    /* Headings balance (below); body copy only needs the last line kept
       off a single orphaned word. */
    text-wrap: pretty;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 800;
    line-height: var(--leading-card);
    letter-spacing: var(--tracking-heading);
    color: var(--v2-text);
    text-wrap: balance;
    /* German compounds ("Delfinschwimmen", "Exkursionen") are long enough to
       overflow a 320px card on their own; allow a break rather than letting
       them punch out of the layout. */
    overflow-wrap: break-word;
}

/* Sizes are declared on the elements rather than left to the browser
   defaults (2em / 1.5em / 1.17em), which are relative and so drift
   with context. A hero takes .v2-title on top of this; a section
   heading takes .v2-title--section. */
h1 {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-h1);
    line-height: var(--leading-tight);
}

h2 {
    font-size: var(--text-2xl);
    line-height: var(--leading-heading);
}

h3,
h4,
h5,
h6 {
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

/* Visible keyboard focus everywhere, never on mouse click. */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--v2-radius-sm);
}

/* Dark grounds get the light ring. Scoped to the two surfaces that are
   actually navy, rather than applied globally by a media query. */
.site-footer :focus-visible {
    outline-color: var(--focus-ring-color-dark);
}

/* Bootstrap zeroes the outline via `.btn:focus` (specificity 0,2,0),
   which beats the bare `:focus-visible` above (0,1,0) and would strip
   the ring from anything carrying `.btn` — the nav language and
   currency pills, for one. These selectors match that specificity and
   load afterwards, so the keyboard ring always wins. */
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.navbar-toggler:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
}

/* Offsetting anchors is `scroll-padding-top` on <html> (above) — it tracks
   the real header height. A `scroll-margin-top` here as well would stack on
   top of it and overshoot, so this only adds a small breathing gap. */
[id] {
    scroll-margin-top: var(--space-2);
}

.skip-link {
    position: fixed;
    left: -9999px;
    top: 0;
    z-index: var(--z-skip);
    padding: var(--space-3) var(--space-6);
    background: var(--v2-primary-hover);
    color: var(--v2-white);
    font-weight: 600;
    border-radius: 0 0 var(--v2-radius-sm) 0;
}

.skip-link:focus {
    left: 0;
}

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

/* ============================================================
   LAYOUT PRIMITIVES
   `.section` = vertical rhythm, full-bleed.
   `.shell`   = horizontal measure, centred.
   These two never merge again.
   ============================================================ */

.shell {
    width: var(--v2-width);
    margin-inline: auto;
    /* --gutter already folds in the safe-area insets (see the @supports
       block at the end of this file), so the measure stays clear of a
       notch in landscape without any element setting its own padding. */
}

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

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

.section--flush-top {
    padding-top: 0;
}

.section--band {
    background: var(--v2-band);
}

/* Vertical stack for sections whose children are siblings rather
   than a grid — keeps one rhythm instead of per-element margins. */
.stack > * + * {
    margin-top: var(--space-8);
}

.section--band-warm {
    background: var(--v2-sand-100);
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    /* One accent (spec §2): the eyebrow reads as accent text on white,
       so it takes the accessible sky, not blue-600. */
    /* 12px, so §6 puts it on the darker accent, not sky-700. */
    color: var(--v2-accent-text);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    line-height: var(--leading-normal);
    text-transform: uppercase;
}

.v2-eyebrow::before {
    content: "";
    width: var(--space-8);
    height: 2px;
    border-radius: var(--v2-radius-pill);
    background: linear-gradient(90deg, var(--v2-primary-decorative), rgba(61, 155, 224, 0.1));
}

/* Hero H1 — 56/27px, the only place --text-5xl is used. */
.v2-title {
    font-size: var(--text-5xl);
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-display);
    color: var(--v2-text);
}

/* Section H2 — 34/24px. A page H1 that is not a hero takes --text-4xl
   from the bare `h1` rule. */
.v2-title--section {
    font-size: var(--text-3xl);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
}

/* Sub-section H2 — 26px. */
.v2-title--sub {
    font-size: var(--text-2xl);
    line-height: var(--leading-title);
    letter-spacing: var(--tracking-heading);
}

/* Micro label: form and filter section headers (spec §1). */
.v2-label {
    display: block;
    margin: 0 0 var(--space-2);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    line-height: 1;
    text-transform: uppercase;
}

/* Meta / caption row — 13px, one step below body small. */
.v2-meta {
    color: var(--v2-text-muted);
    font-size: var(--text-meta);
    font-weight: 500;
    line-height: var(--leading-meta);
}

.v2-copy {
    color: var(--v2-text-soft);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.rich-copy p {
    margin-bottom: var(--space-4);
    color: var(--v2-text-soft);
    line-height: var(--leading-relaxed);
}

.rich-copy > :last-child {
    margin-bottom: 0;
}

/* Long-form article body — capped to a comfortable measure. */
.prose {
    max-width: var(--measure);
    color: var(--v2-text-soft);
    line-height: var(--leading-relaxed);
}

.prose > * + * {
    margin-top: var(--space-4);
}

.prose h2,
.prose h3 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-3);
}

.prose img {
    border-radius: var(--v2-radius-lg);
}

.prose a {
    color: var(--v2-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.v2-button,
.v2-button-outline,
.v2-button-light,
.v2-button-ghost,
.v2-button-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--v2-radius-pill);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: var(--leading-snug);
    text-align: center;
    cursor: pointer;
    transition: transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                background-color var(--duration) var(--ease),
                color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}

.v2-button {
    background: var(--v2-primary);
    color: var(--v2-white);
}

.v2-button:hover {
    background: var(--v2-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--v2-shadow-lg);
}

.v2-button-outline {
    background: transparent;
    border-color: var(--v2-line-strong);
    color: var(--v2-primary);
}

.v2-button-outline:hover {
    border-color: var(--v2-primary-hover);
    background: var(--v2-band);
    transform: translateY(-2px);
}

.v2-button-white {
    background: var(--v2-surface);
    border-color: var(--v2-line);
    color: var(--v2-primary);
    box-shadow: var(--v2-shadow-sm);
}

.v2-button-white:hover {
    border-color: var(--v2-primary-decorative);
    color: var(--v2-primary);
    transform: translateY(-2px);
    box-shadow: var(--v2-shadow-md);
}

.v2-button-light {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--v2-white);
    backdrop-filter: blur(6px);
}

.v2-button-light:hover {
    background: var(--v2-white);
    color: var(--v2-primary-hover);
    transform: translateY(-2px);
}

.v2-button-ghost {
    background: transparent;
    color: var(--v2-text-muted);
}

.v2-button-ghost:hover {
    color: var(--v2-primary-hover);
    background: var(--v2-band);
}

.page-actions,
.cta-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.page-actions--tight {
    gap: var(--space-2);
}

.page-actions--center {
    justify-content: center;
    margin-top: var(--space-6);
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

/* ── Auto-hiding "headroom" header ──
   The bar used to sit permanently over the top of the viewport, which on a
   390x844 phone meant it covered a fifth of the screen and clipped headings
   scrolling underneath it. It now slides away on downward scroll and comes
   back on the smallest upward flick (logic in site.js).

   It translates rather than changing `top`/`height` so the animation stays
   on the compositor, and it is never `display:none` or `visibility:hidden`
   while away — the element must remain focusable so keyboard users can tab
   into it, which is what re-reveals it. */
/* `fixed`, not `sticky`. A sticky box that is also mid-transition gets
   repositioned by the sticky algorithm while the transform is still
   animating, which showed up as the pill flickering into the middle of the
   viewport during momentum scroll. Fixed takes it out of flow entirely, so
   the only thing moving is the transform. `body` carries a --nav-h spacer
   to make up the lost layout height. */
/* Artboard header: sticky 84px white bar, border only (no shadow).
   Kept `fixed` (not CSS sticky) so the existing auto-hide transform in
   site.js and the --nav-h body spacer stay correct. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    background: var(--v2-surface);
    border-bottom: 1px solid var(--v2-line);
    padding-inline: max(0px, env(safe-area-inset-left), env(safe-area-inset-right));
}

.site-header.site-nav--hidden {
    /* Use the measured bar height, not -100% of the element box. The header
       can be taller than the visible bar when dropdown markup is in the tree;
       -100% once ratcheted up to thousands of px and the old transition made
       the bar appear to scroll smoothly down the page. */
    transform: translateY(calc(-1 * var(--nav-h)));
}

.site-nav {
    padding: 0;
}

.site-nav__inner {
    position: relative;
    z-index: var(--z-nav-panel);
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: var(--v2-width);
    /* --nav-bar-h, never --nav-h: site.js measures this element and writes
       the result to --nav-h, so reading --nav-h back here made the bar's own
       height depend on its last measurement. See tokens.css. */
    min-height: var(--nav-bar-h);
    margin-inline: auto;
    padding: 0;
}

.site-nav__brand {
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

/* ============================================================
   3A "DEPARTURE LOCKUP"
   One block for every placement of the logo. Scale is driven by
   --dg-logo-size; the tagline and trail derive from it, so a
   variant only ever sets one number.

   Declared AFTER .site-nav__brand on purpose: both are single-class
   selectors landing on the same element, so source order decides
   which gap and display win.

   GO is sky on white here, which is 2.71:1. That is a logotype
   under WCAG 1.4.3 and is exempt — see the note beside the tokens
   in tokens.css before reusing this colour anywhere else.
   ============================================================ */

.dg-logo {
    --dg-logo-size: 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex-shrink: 0;
}

.dg-logo__word {
    position: relative;
    display: flex;
    align-items: baseline;
    /* Condensed fallbacks: Anton is very narrow, so a wide fallback would
       reflow the whole header on swap. These keep the jump imperceptible. */
    font-family: Anton, "Arial Narrow", Impact, sans-serif;
    font-size: var(--dg-logo-size);
    line-height: 0.9;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.dg-logo__day {
    color: var(--v2-logo-navy);
}

.dg-logo__go {
    color: var(--v2-logo-sky);
    transition: transform 0.55s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.dg-logo__tag {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 14px;
    border-left: 2px solid var(--v2-logo-rule);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    white-space: nowrap;
}

.dg-logo__tag-main {
    font-size: calc(var(--dg-logo-size) * 0.3);
    font-weight: 800;
    letter-spacing: 0.28em;
    color: var(--v2-logo-navy);
}

.dg-logo__tag-sub {
    font-size: calc(var(--dg-logo-size) * 0.267);
    font-weight: 600;
    letter-spacing: 0.26em;
    color: var(--v2-logo-sky);
}

/* Speed trail — hidden at rest, revealed with the departure. */
.dg-logo__trail {
    position: absolute;
    left: -13px;
    bottom: 7px;
    display: flex;
    flex-direction: column;
    gap: 2.5px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.dg-logo__trail i {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: var(--v2-logo-sky);
}

.dg-logo__trail i:nth-child(1) { width: 9px; }
.dg-logo__trail i:nth-child(2) { width: 6px; opacity: 0.6; }
.dg-logo__trail i:nth-child(3) { width: 3.5px; opacity: 0.35; }

/* Interaction: GO departs and leaves the trail. Keyboard gets the same
   treatment as the pointer — the animation is the brand, not decoration. */
.dg-logo:hover .dg-logo__go,
.dg-logo:focus-visible .dg-logo__go {
    transform: translateX(6px);
}

.dg-logo:hover .dg-logo__trail,
.dg-logo:focus-visible .dg-logo__trail {
    opacity: 1;
}

.dg-logo:focus-visible {
    outline: var(--focus-ring-width) solid var(--v2-logo-sky);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Variants. Each sets one number; everything else derives. */
.dg-logo--footer {
    --dg-logo-size: 44px;
}

.dg-logo--compact {
    --dg-logo-size: 24px;
    gap: 0;
}

/* Declared after .dg-logo: equal specificity means source order decides,
   and a modifier written first would be dead. */
.dg-logo--on-dark {
    --v2-logo-rule: rgba(255, 255, 255, 0.22);
}

.dg-logo--on-dark .dg-logo__day,
.dg-logo--on-dark .dg-logo__tag-main {
    color: var(--v2-white);
}

@media (prefers-reduced-motion: reduce) {
    .dg-logo__go,
    .dg-logo__trail {
        transition: none;
    }

    .dg-logo:hover .dg-logo__go,
    .dg-logo:focus-visible .dg-logo__go {
        transform: none;
    }
}

/* Below 768px the header runs the compact lockup: the tagline is dropped
   whole rather than scaled, because at 24px the sub-line would land near 6px.
   Chosen in CSS, not server-side, so one cached response is right at every
   width. */
@media (max-width: 767.98px) {
    .dg-logo--header {
        --dg-logo-size: 24px;
        gap: 0;
    }

    .dg-logo--header .dg-logo__tag {
        display: none;
    }
}





.site-nav__collapse {
    flex: 1 1 auto;
    min-width: 0;
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: 1.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__links .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    height: auto;
    padding: 0;
    color: var(--v2-text);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--duration) var(--ease);
}

.site-nav__links .nav-link::after {
    display: none;
}

.site-nav__links .nav-link:hover,
.site-nav__links .nav-link.active {
    color: var(--v2-primary);
    font-weight: 700;
}

.site-nav__links .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.3125rem;
    vertical-align: 0.15em;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.site-nav__mega {
    width: min(40rem, calc(100vw - 2 * var(--gutter)));
    padding: var(--space-4);
}

.site-nav__mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-4);
}

.site-nav__mega-heading {
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-3);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.site-nav__mega-foot {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--v2-line);
}

.site-nav__mega-all {
    display: inline-flex;
    padding: 0 var(--space-3);
    color: var(--v2-primary);
    font-size: var(--text-sm);
    font-weight: 700;
}

.site-nav__icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    color: var(--v2-text);
    font-size: 1.3125rem;
    line-height: 1;
}

.site-nav__icon-link:hover {
    color: var(--v2-primary);
}

.site-nav__badge {
    position: absolute;
    top: 0.25rem;
    right: 0.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 0.5625rem;
    background: var(--v2-sale);
    color: var(--v2-white);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
}

/* ============================================================
   CONTACT BAND — stands where the reference promotes an app
   ============================================================ */
.contact-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: 2.375rem 2.5rem;
    border-radius: var(--v2-radius-card);
    background: var(--v2-band);
}

.contact-band__copy {
    flex: 1 1 22rem;
    min-inline-size: 0;
}

.contact-band__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: var(--tracking-heading);
    color: var(--v2-text);
}

.contact-band__copy p {
    margin: 0;
    max-width: 35rem;
    color: var(--v2-text-soft);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
}

.contact-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ============================================================
   DESTINATION MOSAIC — label burned into the picture
   ============================================================ */
.destination-mosaic {
    display: grid;
    /* A rail, not a wrapping grid: five destinations wrapped to a second
       row of one, which read as a mistake rather than as a row. */
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--space-4) * 3) / 4);
    gap: var(--space-4);
    margin: 0;
    padding: 0 0 var(--space-2);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.destination-mosaic::-webkit-scrollbar {
    display: none;
}

.destination-mosaic > * {
    scroll-snap-align: start;
}

@media (max-width: 991.98px) {
    .destination-mosaic {
        grid-auto-columns: calc((100% - var(--space-4) * 2) / 3);
    }
}

@media (max-width: 767.98px) {
    .destination-mosaic {
        grid-auto-columns: calc((100% - var(--space-4)) / 2);
    }
}

@media (max-width: 575.98px) {
    .destination-mosaic {
        grid-auto-columns: 82%;
    }
}

.destination-mosaic__tile a {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--v2-radius-lg);
    box-shadow: var(--v2-shadow-sm);
}

.destination-mosaic__tile img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--duration) var(--ease);
}

.destination-mosaic__tile a:hover img {
    transform: scale(1.04);
}

/* The file behind ImageUrl is gone. The tile keeps its shape and its
   label; the scrim is dropped because there is no photograph to sit on. */
.destination-mosaic__tile.is-imageless a {
    background: var(--v2-band);
}

.destination-mosaic__tile.is-imageless .destination-mosaic__label {
    background: none;
    color: var(--v2-accent-text);
}

/* The label sits on photography, so it carries its own ground rather
   than trusting the picture. Navy at 82% under white text clears AA
   over an arbitrary image; a bare text-shadow does not. */
.destination-mosaic__label {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--space-6) var(--space-4) var(--space-3);
    background: linear-gradient(to top, rgba(10, 29, 48, 0.82), transparent);
    color: var(--v2-white);
    font-weight: 700;
}

/* ============================================================
   HERO ARROWS + CARD RAIL — manual control over both sliders
   ============================================================ */
.hero__controls {
    position: absolute;
    inset-block: 0;
    inset-inline: var(--space-4);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.hero__arrow {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--v2-radius-pill);
    /* The hero photograph is arbitrary, so the control carries its own
       ground rather than trusting contrast against whatever is behind it. */
    background: rgba(10, 29, 48, 0.55);
    color: var(--v2-white);
    font-size: var(--text-lg);
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(4px);
    transition: background-color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}

.hero__arrow:hover {
    background: rgba(10, 29, 48, 0.78);
    border-color: var(--v2-white);
}

/* ============================================================
   CATEGORY TILES — the home page's way into the listing
   Distinct from .category-chip, which is the filter control on
   /Excursions. Same data, different job.
   ============================================================ */
.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--v2-text);
}

.category-tile__media {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    background: var(--v2-band);
    box-shadow: var(--v2-shadow-sm);
    transition: box-shadow var(--duration) var(--ease),
                transform var(--duration) var(--ease);
}

.category-tile__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.category-tile__media i {
    /* Any icon class, not just .bi — IconClass is free text and holds
       whichever library the operator typed. */
    position: relative;
    font-size: var(--text-3xl);
    color: var(--v2-primary);
}

/* Sits behind the icon. When the icon class resolves to a glyph the icon
   covers it; when it does not, this is what the panel shows. */
.category-tile__initial {
    position: absolute;
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1;
    color: var(--v2-primary-decorative);
}

.category-tile__media {
    position: relative;
}

.category-tile:hover .category-tile__media {
    transform: translateY(-2px);
    box-shadow: var(--v2-shadow-lg);
}

/* The arrow cue is a home-page flourish; .home-categories turns it on. */
.category-tile__cue {
    display: none;
}

.category-tile__label {
    font-size: var(--text-sm);
    font-weight: 700;
    text-align: center;
    /* German category names run long; two lines must not shift the row. */
    min-block-size: 2.5em;
}

/* ============================================================
   UTILITY CLUSTER — language, currency, wishlist, cart
   Lives in the 84px header row (right side), not a second bar.
   ============================================================ */
.site-utility {
    position: relative;
    z-index: var(--z-utility);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.lang-flag {
    display: block;
    inline-size: 1.25rem;
    block-size: 0.875rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--v2-line);
}

.site-utility .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.site-utility__inner {
    display: contents;
}

.site-utility__group {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

/* Language and currency: text buttons, no pill chrome (artboard). */
.site-nav__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--v2-text);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
}

.site-nav__pill:hover {
    border-color: transparent;
    color: var(--v2-primary);
}

.site-nav__pill.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.3125rem;
    vertical-align: 0.15em;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* WhatsApp CTA kept for pages that still render it; not in Stage 3 header. */
.site-nav__contact {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 38px;
    padding: 0 var(--space-4);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-primary);
    color: var(--v2-white);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: background-color var(--duration) var(--ease);
}

.site-nav__contact:hover {
    background: var(--v2-primary-hover);
    color: var(--v2-white);
}

.site-nav__contact .bi-whatsapp {
    font-size: var(--text-base);
}

.site-nav .dropdown-menu {
    padding: var(--space-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    box-shadow: var(--v2-shadow-lg);
}

.site-nav .dropdown-item {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--v2-radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
}

.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
    background: var(--v2-band);
    color: var(--v2-navy-900);
}

.site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    padding: 0;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-md);
    background: var(--v2-surface);
    color: var(--v2-navy-900);
    font-size: var(--text-xl);
    line-height: 1;
}

.site-nav__toggle:focus {
    box-shadow: none;
}

.site-nav__toggle:hover {
    border-color: var(--v2-primary-decorative);
    color: var(--v2-primary);
}

/* Body-level element (see _Layout). Sits *below* the header layer so it
   dims the page without ever intercepting a tap meant for a nav link. */
.site-nav__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    border: 0;
    background: rgba(10, 29, 48, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.site-nav__backdrop[hidden] {
    display: none;
}

/* ============================================================
   HERO — the rounded inset image card
   ============================================================ */

.hero {
    position: relative;
    width: var(--v2-width);
    margin-inline: auto;
    padding: clamp(4rem, 9vw, 7.5rem) var(--space-6) clamp(5rem, 8vw, 7rem);
    border-radius: var(--v2-radius-2xl);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    color: var(--v2-white);
    background:
        linear-gradient(180deg, rgba(10, 29, 48, 0.55) 0%, rgba(10, 29, 48, 0.30) 40%, rgba(10, 29, 48, 0.80) 100%),
        url("/images/banner.webp") center / cover no-repeat;
}
.hero__controls {
    position: absolute;
    inset-block: 0;
    inset-inline: var(--space-4);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.hero__arrow {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--v2-radius-pill);
    /* The hero photograph is arbitrary, so the control carries its own
       ground rather than trusting contrast against whatever is behind it. */
    background: rgba(10, 29, 48, 0.55);
    color: var(--v2-white);
    font-size: var(--text-lg);
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(4px);
    transition: background-color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}

.hero__arrow:hover {
    background: rgba(10, 29, 48, 0.78);
    border-color: var(--v2-white);
}

@media (max-width: 575.98px) {
    .hero__controls {
        inset-inline: var(--space-2);
    }
}


/* §5.01: the home hero is a 520px full-bleed image, not an inset card.
   Height is declared rather than derived from padding, so it does not
   drift with the viewport, and the corners are square because a
   full-bleed band has no edge to round. Interior pages keep .hero as it
   was — they are build step 8. */
.hero--full {
    width: 100%;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--gutter) var(--space-20);
    border-radius: 0;
}

/* ── Hero crossfade (deviation from §5.01's single image) ──
   The slides are a stack of absolutely-positioned layers behind the hero's
   text. .hero's own background shorthand stays exactly where it was, so a
   hero with no slide folder is byte-for-byte the old one; .hero--slider only
   hides that background and puts the scrim back on top of the layers. */

.hero--slider {
    /* The scrim moves to ::after so it can sit above the photos. Leaving the
       gradient in the shorthand would have painted it under them. */
    background-image: none;
    background-color: var(--v2-navy-850);
}

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

.hero__layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity var(--hero-fade) var(--ease);
}

.hero__layer.is-active {
    opacity: 1;
}

/* Same gradient the static hero carries, re-declared above the layers. */
.hero--slider::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(10, 29, 48, 0.55) 0%,
        rgba(10, 29, 48, 0.30) 40%,
        rgba(10, 29, 48, 0.80) 100%);
}

.hero__inner {
    position: relative;
    /* Above both the layers and the scrim. */
    z-index: 2;
    max-width: 52rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero .v2-eyebrow {
    color: var(--v2-sand-300);
}

/* The sticky nav already floats above the hero — a full section's
   worth of padding on top of that just reads as dead space. */
.section--hero {
    padding-top: var(--space-4);
    padding-bottom: 0;
}

.hero .v2-title {
    color: var(--v2-white);
}

.hero__copy {
    margin-top: var(--space-5);
    max-width: 42rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
}

/* Compact hero for interior pages — same card, less height. */
.hero--compact {
    padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3.5rem, 6vw, 5rem);
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.section-heading {
    margin-bottom: var(--space-10);
}

.section-heading__copy {
    max-width: 42rem;
    margin-top: var(--space-3);
    color: var(--v2-text-soft);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

/* Split heading: title block left, action or copy right.
   `align-items: end` used to stretch a button across the whole
   280px track — `justify-self: end` on the trailing child is
   what actually pins it. */
.section-heading--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
    align-items: end;
}

.section-heading--split > :last-child {
    justify-self: end;
}

.section-heading--split > :last-child.section-heading__copy {
    max-width: 26rem;
    justify-self: end;
    margin-top: 0;
}

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

/* The eyebrow rule reads as a left-hand tick mark. Centred, it just
   floats — so drop it and let the text carry the label on its own. */
.section-heading--center .v2-eyebrow,
.hero .v2-eyebrow {
    justify-content: center;
}

.section-heading--center .v2-eyebrow::before,
.hero .v2-eyebrow::before,
.preferences-card .v2-eyebrow::before {
    display: none;
}

.section-heading--center .section-heading__copy {
    margin-inline: auto;
}

/* ============================================================
   GRIDS — one gap, one breakpoint ladder, minmax(0) everywhere
   ============================================================ */

.card-grid-2,
.card-grid-3,
.card-grid-4 {
    display: grid;
    /* §3 puts card grids at 20–22px. --space-6 is 24px. */
    gap: var(--space-5);
    align-items: stretch;
}

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

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

.card-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Five across at full width — the home teaser strip only. Same gap and the
   same 1280/992/768/480 ladder as the other grids, one step denser at each
   stop. At 1200px this makes a 224px column, which is what the compact card
   is drawn for. */
.card-grid-compact {
    display: grid;
    gap: var(--space-5);
    align-items: stretch;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.details-grid {
    display: grid;
    gap: var(--space-8);
    align-items: start;
}

.details-grid--balanced {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

/* ============================================================
   CARDS — shared surface
   ============================================================ */

.listing-card,
.story-card,
.content-card,
.editorial-card,
.testimonial-card-v2 {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* No `height: 100%` here. Grid items already stretch to the row, so
       it is redundant in a card grid — and in `.details-grid`, which is
       `align-items: start`, it forces a short card to match a tall
       neighbour and leaves a block of dead space. */
    overflow: hidden;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-panel);
    background: var(--v2-surface);
    box-shadow: var(--v2-shadow-sm);
    transition: transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}

.listing-card:hover,
.story-card:hover {
    transform: translateY(-4px);
    border-color: var(--v2-line-strong);
    box-shadow: var(--v2-shadow-lg);
}

.listing-card__body,
.story-card__body,
.content-card__body,
.editorial-card__body,
.testimonial-card-v2__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: var(--space-6);
}

/* ── Media wrapper: one shape for every card that has an image.
      Fixed aspect ratio is what keeps card bodies — and therefore
      titles and prices — aligned across a grid row. ── */

.card-media {
    position: relative;
    overflow: hidden;
    background: var(--v2-band);
}

.card-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.listing-card:hover .card-media img,
.story-card:hover .card-media img {
    transform: scale(1.05);
}

.card-media__fallback {
    display: none;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: var(--space-6);
    /* §2: sky-500 is decorative and never carries white text — it measures
       3.02:1, which scrapes past large-text AA and fails everything else.
       Ending the gradient on sky-700 takes the worst point to 5.4:1. */
    background: linear-gradient(135deg, var(--v2-navy-850), var(--v2-primary));
    color: var(--v2-white);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-lg);
    font-weight: 700;
    text-align: center;
    line-height: var(--leading-snug);
}

.card-media__badge {
    position: absolute;
    top: var(--space-3);
    inset-inline-start: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--v2-radius-pill);
    background: rgba(255, 255, 255, 0.94);
    color: var(--v2-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    box-shadow: var(--v2-shadow-sm);
}

/* ── Card internals ── */

.listing-card__body h3,
.story-card__body h3,
.content-card__body h2,
.content-card__body h3,
.editorial-card__body h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

/* ── Reserved slots.
   Card content is variable — some tours have a rating, some don't;
   some titles run to one line, some to three. Reserving the height of
   each slot is what keeps ratings, titles, locations and prices on a
   shared baseline across every card in a grid row. Without this, one
   unrated tour pulls its whole column up. ── */

/* Destination · duration, above the title. */
.listing-card__eyebrow {
    min-height: calc(var(--text-xs) * var(--leading-normal));
    margin-bottom: var(--space-2);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-normal);
    text-transform: uppercase;
}

.listing-card__body .rating {
    min-height: calc(var(--text-base) * var(--leading-normal));
    margin-bottom: var(--space-3);
}

/* 17px on the grid card, 20px in list view. */
.listing-card__body h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--text-md);
    line-height: var(--leading-card);
    min-height: calc(var(--text-md) * var(--leading-card) * 2);
}

/* Two lines, not three. */
.listing-card__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(var(--text-sm) * var(--leading-normal) * 2);
}

/* ============================================================
   COMPACT CARD — the home teaser strip, five across
   A deliberate deviation from at a 224px column the
   description and the footer button do not fit, and forcing them
   in produced the two enormous cards the redesign was asked to
   fix. Everything §4 does keep — reserved slots, the 4:3 media,
   the badge, the card surface — is unchanged, so the strip still
   sits in the same visual language as the sections around it.
   ============================================================ */

.listing-card--compact {
    /* Anchor for the stretched link below. */
    position: relative;
}

.listing-card--compact .listing-card__body {
    padding: var(--space-4);
}

.listing-card--compact .listing-card__eyebrow {
    margin-bottom: var(--space-1);
}

.listing-card--compact .listing-card__body h3 {
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    min-height: calc(var(--text-base) * var(--leading-card) * 2);
}

/* The card's single link. The pseudo-element covers the whole article, so
   the picture and the price are clickable too, while the tab order still
   has one stop and its accessible name is still the tour title. */
.listing-card--compact .listing-card__link {
    color: inherit;
    text-decoration: none;
}

.listing-card--compact .listing-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.listing-card--compact:hover .listing-card__link {
    color: var(--v2-primary);
}

/* The link's own box is a two-line title behind a full-card overlay, so a
   ring drawn on it would trace the text and not the thing being activated.
   :has() keyed to :focus-visible, not :focus-within — the latter would ring
   the card on every mouse click. */
.listing-card--compact:has(.listing-card__link:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.listing-card--compact .listing-card__link:focus-visible {
    outline: none;
}

/* Duration and rating on one line, in place of §4's separate star row. */
.listing-card--compact .listing-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    min-height: calc(var(--text-meta) * var(--leading-normal));
    margin-bottom: var(--space-3);
    color: var(--v2-text-muted);
    font-size: var(--text-meta);
    font-weight: 600;
    line-height: var(--leading-normal);
}

.listing-card--compact .listing-card__meta-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-variant-numeric: tabular-nums;
}

/* Only when something precedes it — an unrated tour shows the duration with
   no trailing dot, and a tour with no duration shows no leading one. */
.listing-card--compact .listing-card__meta-rating:not(:first-child)::before {
    content: "·";
    margin-inline-end: var(--space-1);
    color: var(--v2-line-strong);
}

.listing-card--compact .listing-card__meta .rating__value {
    color: var(--v2-text);
    font-weight: 700;
}

/* "ab 33 EUR pro Person" as one baseline-aligned line. margin-top:auto does
   the same job as §4's footer rule — prices line up across the row however
   uneven the titles are — without the button or the 1px rule. */
.listing-card__price--compact {
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--space-3);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
}

.listing-card__price--compact strong {
    font-size: var(--text-lg);
}


/* ============================================================
   TOUR DETAIL — gallery mosaic, tabs, itinerary accordion, inclusions,
   reviews, and the booking rail's date/traveller controls.
   Three of these sections were gated in the design spec and now have
   data behind them; §4's tab strip becomes meaningful with them.
   ============================================================ */

/* ── Gallery mosaic ──────────────────────────────────────────
   Lead frame plus four tiles. The layout classes step down by picture
   count rather than stretching a short gallery across five slots. */
.gallery-mosaic {
    position: relative;
    display: grid;
    grid-template-columns: var(--v2-mosaic-lead) 1fr 1fr;
    grid-template-rows: var(--v2-mosaic-row) var(--v2-mosaic-row);
    gap: var(--v2-mosaic-gap);
    margin-top: var(--space-6);
}

.gallery-mosaic__lead { grid-row: span 2; }

.gallery-mosaic.is-single { grid-template-columns: 1fr; grid-template-rows: auto; }
.gallery-mosaic.is-pair { grid-template-columns: 1fr 1fr; grid-template-rows: var(--v2-mosaic-row); }
.gallery-mosaic.is-pair .gallery-mosaic__lead { grid-row: auto; }
/* Three images leave one tile, four leave two. grid-auto-rows (not an
   explicit three-row template) is what keeps the unused row out of a
   3-image gallery: an implicit row only exists when a grid item actually
   overflows into it, whereas an explicit row — even sized
   minmax(0, <fixed length>) — always reserves its declared size, empty
   or not, because a fixed max is not content-driven. Tried that first;
   it gave a 3-image gallery a lead three rows tall next to a single
   184px tile.
   The remaining problem is that "span 2"/"1 / -1" on the lead can't
   itself detect whether that third implicit row exists — negative
   line indices only count the explicit grid. :has() does the detecting:
   a third tile is the mosaic's 4th child (after the lead and two tiles),
   so its presence is what switches the lead from span 2 to span 3. */
.gallery-mosaic.is-partial {
    grid-template-columns: var(--v2-mosaic-lead) 1fr;
    grid-auto-rows: var(--v2-mosaic-row);
}
.gallery-mosaic.is-partial .gallery-mosaic__tile { grid-column: 2; }
.gallery-mosaic.is-partial .gallery-mosaic__lead { grid-row: span 2; }
.gallery-mosaic.is-partial:has(.gallery-mosaic__tile:nth-child(4)) .gallery-mosaic__lead {
    grid-row: span 3;
}

.gallery-mosaic figure { margin: 0; overflow: hidden; border-radius: var(--v2-radius-lg); position: relative; }

.gallery-mosaic__open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.gallery-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-mosaic__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    border: 0;
    background: rgb(9 20 35 / 0.56);
    color: var(--v2-white);
    font-size: var(--text-sm);
    font-weight: 700;
    pointer-events: none;
}

.gallery-mosaic__all {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    color: var(--v2-text);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--v2-shadow-md);
}

/* Single and pair layouts have no last tile to hang the count on. */
.gallery-mosaic.is-single .gallery-mosaic__more,
.gallery-mosaic.is-pair .gallery-mosaic__more { display: none; }

/* ── Gallery lightbox ──
   Full-viewport, so the controls sit at the screen's edges rather than
   floating wherever the photo's width happens to end. Counter and close
   share a top bar; the arrows are pinned to the vertical centre. */
.gallery-lightbox {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--v2-white);
    overflow: hidden;
}

.gallery-lightbox[open] {
    display: grid;
    grid-template-rows: auto 1fr;
}

.gallery-lightbox::backdrop {
    background: var(--v2-lightbox-ground);
    backdrop-filter: blur(var(--v2-lightbox-blur));
    -webkit-backdrop-filter: blur(var(--v2-lightbox-blur));
}

/* The page behind a modal should not scroll under a swipe. */
html:has(.gallery-lightbox[open]) { overflow: hidden; }

.gallery-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--gutter);
}

.gallery-lightbox__status {
    margin: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-lightbox-fill);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

.gallery-lightbox__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 calc(var(--v2-lightbox-control) + var(--gutter) + var(--space-4)) var(--space-8);
    touch-action: pan-y;
}

.gallery-lightbox__stage img {
    max-width: 100%;
    max-height: var(--v2-lightbox-image-max-h);
    border-radius: var(--v2-radius-lg);
    box-shadow: var(--v2-shadow-xl);
    user-select: none;
    transition: opacity var(--duration) var(--ease);
}

.gallery-lightbox__stage img.is-loading { opacity: 0; }

.gallery-lightbox__control {
    display: inline-grid;
    place-items: center;
    width: var(--v2-lightbox-control);
    height: var(--v2-lightbox-control);
    padding: 0;
    border: 1px solid var(--v2-lightbox-edge);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-lightbox-fill);
    backdrop-filter: blur(var(--v2-lightbox-blur));
    -webkit-backdrop-filter: blur(var(--v2-lightbox-blur));
    color: inherit;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease),
                transform var(--duration) var(--ease);
}

.gallery-lightbox__control svg {
    width: var(--v2-lightbox-icon);
    height: var(--v2-lightbox-icon);
}

.gallery-lightbox__control:hover { background: var(--v2-lightbox-fill-hover); }
.gallery-lightbox__control:active { transform: scale(var(--v2-lightbox-press)); }

.gallery-lightbox__control:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-dark);
    outline-offset: var(--focus-ring-offset);
}

.gallery-lightbox__arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
}

.gallery-lightbox__arrow--prev { left: var(--gutter); }
.gallery-lightbox__arrow--next { right: var(--gutter); }

/* Nudge the chevron toward the direction of travel on hover. */
.gallery-lightbox__arrow--prev:hover svg { translate: calc(var(--v2-lightbox-nudge) * -1) 0; }
.gallery-lightbox__arrow--next:hover svg { translate: var(--v2-lightbox-nudge) 0; }
.gallery-lightbox__arrow svg { transition: translate var(--duration) var(--ease); }

@media (max-width: 767px) {
    .gallery-mosaic,
    .gallery-mosaic.is-partial {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    /* Tiles are noise at phone width; the lead plus the count is the whole
       control the reference gives a phone anyway. */
    .gallery-mosaic__tile { display: none; }
    .gallery-mosaic__lead { grid-row: auto; }

    /* On a phone the photo takes the full width and swiping pages it; the
       arrows drop to the bottom corners, clear of the picture. */
    .gallery-lightbox__stage { padding: 0 0 calc(var(--v2-lightbox-control-sm) + var(--space-8)); }
    .gallery-lightbox__stage img { border-radius: 0; }
    .gallery-lightbox__control {
        width: var(--v2-lightbox-control-sm);
        height: var(--v2-lightbox-control-sm);
    }
    .gallery-lightbox__arrow {
        top: auto;
        bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        translate: none;
    }
}

/* ── Section tabs ── */

.detail-tabs {
    position: sticky;
    /* Below the sticky header, whose live height site.js publishes. */
    top: var(--nav-h);
    z-index: 1;
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    padding: var(--space-3) 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--v2-line);
    background: var(--v2-surface);
    scrollbar-width: none;
}

.detail-tabs::-webkit-scrollbar {
    display: none;
}

/* The header auto-hides on scroll-down: site.js adds .site-nav--hidden and it
   slides out with translateY(-100%). It keeps its measured height, so --nav-h
   still reports the full 118px and a bar pinned to that value hangs in open
   space with a band of article text scrolling past above it — which reads as
   the tab strip floating in the middle of the copy.

   Track the header's VISIBLE edge instead of its measured height: once it has
   slid away there is nothing above the tabs, so they belong at the top. */
:root:has(.site-header.site-nav--hidden) .detail-tabs {
    top: 0;
}

.detail-tabs__tab {
    flex: none;
    padding-bottom: var(--space-2);
    /* Transparent, not absent: a border appearing on the active tab would
       shift every label up by 2px as you scroll. */
    border-bottom: 2px solid transparent;
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.detail-tabs__tab:hover {
    color: var(--v2-text);
}

.detail-tabs__tab.is-active {
    border-bottom-color: var(--v2-primary);
    color: var(--v2-primary);
}

.detail-section {
    scroll-margin-top: calc(var(--nav-h) + var(--space-16));
}

.detail-section + .detail-section {
    margin-top: var(--space-12);
}

.detail-section > h2 {
    margin-bottom: var(--space-5);
    font-size: var(--text-2xl);
    font-weight: 800;
}


/* ── Inclusions ── */

.inclusions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    padding: var(--space-6);
    border-radius: var(--v2-radius-panel);
    background: var(--v2-band);
}

.inclusions__heading {
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
    font-weight: 700;
}

.inclusions__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.inclusions__list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.inclusions__list--yes .bi { color: var(--v2-primary); }

/* Muted rather than red. These are facts about what is not covered, not
   errors, and a column of red icons reads as a warning. */
.inclusions__list--no {
    color: var(--v2-text-muted);
}

.inclusions__list--no .bi { color: var(--v2-text-muted); }

/* ── Reviews ── */

.review-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-panel);
}

.review-summary__score {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
}

.review-summary__score strong {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-price);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.review-summary__count {
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
}

/* A table, not five divs: to a screen reader "5 stars, 75 percent" is a row
   of data, and five unlabelled bars are nothing at all. */
.review-distribution {
    width: 100%;
    border-collapse: collapse;
}

.review-distribution th {
    padding-block: var(--space-1);
    padding-inline-end: var(--space-3);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: start;
    white-space: nowrap;
}

/* The bar cell claims the leftover width. Without this the table's auto
   layout collapses it: the track is an empty span, so its intrinsic width is
   zero, and the label and percentage cells take everything. */
.review-distribution__bar {
    width: 100%;
}

.review-distribution__track {
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: var(--v2-radius-pill);
    background: var(--v2-band);
}

.review-distribution__fill {
    display: block;
    height: 100%;
    border-radius: var(--v2-radius-pill);
    background: var(--v2-primary);
}

.review-distribution__value {
    padding-inline-start: var(--space-3);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
}

.review-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-card);
    background: var(--v2-surface);
}

.review-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
}

.review-card__text {
    margin: 0;
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.review-card__author {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-xs);
}

.review-card__author span {
    color: var(--v2-text-muted);
}

/* ── Booking rail: date and traveller controls ── */

.booking-fields {
    display: grid;
    gap: var(--space-3);
    margin-block: var(--space-5);
}

.booking-field label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
}

.booking-field input {
    width: 100%;
    min-height: var(--tap);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-control);
    background: var(--v2-surface);
    color: var(--v2-text);
    font: inherit;
    font-size: var(--text-sm);
}

.booking-field input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.booking-field--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

/* ============================================================
   REGION BLOCKS — /Destinations
   An image banner carrying the region name, with that region's
   destinations listed underneath in columns. Replaces a flat
   3-up card grid that gave nine equal tiles and no sense of
   which places sit near each other.
   ============================================================ */

.region-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Column gap is wider than the row gap on purpose: the rows inside one
       column read as a single list, and a matching gap made the two columns
       look like one four-column table. */
    gap: var(--space-10) var(--space-8);
    align-items: start;
}

.region-block {
    min-width: 0;
}

.region-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 120px;
    padding: var(--space-5) var(--space-6);
    overflow: hidden;
    border-radius: var(--v2-radius-panel);
    color: var(--v2-white);
    /* Longhand, not the `background` shorthand: the shorthand resets
       background-color to transparent, and a destination whose ImageUrl
       points at a missing file then left the gradient washed out over the
       white page. Painting navy underneath means a broken image degrades to
       a solid navy banner that still looks deliberate. */
    background-color: var(--v2-navy-850);
    /* Navy at 82%, never black (§2), so the photo stays on-hue with the rest
       of the page — the same scrim the closing CTA band uses. */
    background-image:
        linear-gradient(90deg, rgba(10, 29, 48, 0.82) 0%, rgba(10, 29, 48, 0.45) 100%),
        var(--region-image, url("/images/banner.webp"));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.region-banner__title {
    margin: 0;
    color: var(--v2-white);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: var(--tracking-h1);
}

.region-banner__count {
    flex: none;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--v2-radius-pill);
    background: rgba(255, 255, 255, 0.94);
    color: var(--v2-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

/* Three columns of plain links. Column flow rather than grid so a block with
   four destinations fills the first column and stops, instead of spreading
   one lonely name across each of three. */
.region-links {
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
    columns: 3;
    column-gap: var(--space-6);
}

.region-links li {
    break-inside: avoid;
    margin-bottom: var(--space-3);
}

.region-links a {
    color: var(--v2-text);
    font-size: var(--text-base);
    text-decoration: none;
}

.region-links a:hover {
    color: var(--v2-primary);
    text-decoration: underline;
}

.listing-rows {
    display: grid;
    gap: var(--space-5);
}

/* ============================================================
   LISTING LAYOUT — filter rail + results
   ============================================================ */

.listing-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--v2-text-muted);
    font-size: var(--text-meta);
    font-weight: 500;
}

.breadcrumb a:hover {
    color: var(--v2-accent-text);
}

.lede {
    max-width: var(--measure);
    margin-top: var(--space-3);
    color: var(--v2-text-soft);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

/* Sticky under the header. --nav-h is measured live by site.js, so this
   tracks the real bar rather than assuming §4's nominal 72px. */
.filter-rail {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-4));
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-panel);
    background: var(--v2-surface);
    overflow: hidden;
}

.filter-rail__head {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--v2-line);
}

.filter-rail__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    border: 0;
    border-radius: var(--v2-radius-sm);
    background: transparent;
    color: var(--v2-text-soft);
}

/* §4: sections separated by 1px rules with 12px uppercase headers. */
.filter-group {
    margin: 0;
    padding: var(--space-5);
    border: 0;
    border-bottom: 1px solid var(--v2-line);
}

.filter-group legend {
    float: left;
    width: 100%;
    padding: 0;
}

.filter-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-input);
    padding-inline: var(--space-3);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-control);
    color: var(--v2-text-muted);
}

.filter-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--v2-text);
    font: inherit;
    font-size: var(--text-sm);
}

/* The input keeps its own ring. Suppressing it and tinting the wrapper
   border instead left the only keyboard cue as a 1px colour change, which
   §6 rules out — every interactive element gets the 2px ring. */
.filter-search:focus-within {
    border-color: var(--v2-primary);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap);
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    cursor: pointer;
}

.filter-option input {
    accent-color: var(--v2-primary);
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.filter-option:hover,
.filter-option:has(input:checked) {
    color: var(--v2-text);
}

.filter-option:has(input:checked) {
    font-weight: 600;
}

.filter-rail__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
}

.filter-rail__actions .v2-button {
    flex: 1;
    height: var(--control-md);
}

/* ── Result bar and active-filter chips ── */

.result-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--v2-line);
}

.result-bar__count {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
}

.result-bar__count strong {
    color: var(--v2-text);
    font-size: var(--text-md);
    font-weight: 700;
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.active-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-chip);
    padding: 0 var(--space-3);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-band);
    color: var(--v2-text);
    font-size: var(--text-meta);
    font-weight: 600;
}

.active-filter:hover {
    border-color: var(--v2-primary);
    color: var(--v2-accent-text);
}

.active-filter--clear {
    background: transparent;
    color: var(--v2-text-muted);
    font-weight: 500;
}

/* The toggle only exists on mobile, where the rail becomes a sheet. */
.filter-toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .listing-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .filter-toggle {
        display: inline-flex;
        align-self: start;
    }

    /* §9: a bottom sheet rather than a rail. It is hidden from the
       accessibility tree as well as the eye when closed, so the filters
       are not tab-reachable behind the results. */
    .filter-rail {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        z-index: var(--z-nav-panel);
        max-height: 82dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: var(--v2-radius-panel) var(--v2-radius-panel) 0 0;
        transform: translateY(101%);
        visibility: hidden;
        /* visibility flips instantly on open and is *delayed* until the
           slide-out finishes on close. Transitioning it in both directions
           left the sheet computed-hidden for the first frames, so focusing
           a control inside it on open was a silent no-op and the keyboard
           stayed on the results behind. */
        transition: transform var(--duration) var(--ease),
                    visibility 0s linear var(--duration);
    }

    .filter-rail.is-open {
        transform: none;
        visibility: visible;
        transition: transform var(--duration) var(--ease),
                    visibility 0s linear 0s;
    }

    .filter-rail__head {
        display: flex;
        position: sticky;
        top: 0;
        background: var(--v2-surface);
    }
}

/* ── Row variant ──
   300px image | content | 180px actions, the third column split off by a
   1px rule. Keeping all three columns is what makes the list
   comparable — price and both actions land on the same x for every row. */
.listing-card--row {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 180px;
}

/* The row's image fills the column height rather than holding 4:3 — a
   fixed ratio here would decide the row's height for it. */
.listing-card--row .card-media,
.listing-card--row .card-media img,
.listing-card--row .card-media__fallback {
    height: 100%;
}

.listing-card--row .card-media img {
    aspect-ratio: auto;
    min-height: 220px;
}

.listing-card--row .listing-card__body h3 {
    font-size: var(--text-xl);
}

.listing-card--row .listing-card__body h3,
.listing-card--row .listing-card__summary {
    min-height: 0;
}

.listing-card--row .listing-card__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6);
    border-inline-start: 1px solid var(--v2-line);
}

/* The grid card sets price and unit on one baseline; in a 180px column
   that pairing wraps mid-word, so the row stacks them instead. */
.listing-card--row .listing-card__price {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: var(--space-1);
}

.listing-card--row .listing-card__from {
    color: var(--v2-text-muted);
}

.listing-card--row .listing-card__price strong {
    font-size: var(--text-price-list);
    line-height: var(--leading-tight);
    white-space: nowrap;
    color: var(--v2-text);
}

/* The buttons inherit the roomy default inline padding, which in a 180px
   column pushed "View Details" onto a second line. Tighten it and hold
   them on one line — §3 puts the standard button at 44–46px, not 62. */
.listing-card--row .listing-card__actions .v2-button,
.listing-card--row .listing-card__actions .v2-button-outline {
    width: 100%;
    min-height: var(--control-md);
    padding-inline: var(--space-3);
    white-space: nowrap;
    font-size: var(--text-sm);
}

/* The row collapses to a stack before its three columns get too narrow to
   read — 300px + 180px leaves the content column under 300px at 820px. */
@media (max-width: 900px) {
    .listing-card--row {
        grid-template-columns: minmax(0, 1fr);
    }

    .listing-card--row .card-media img {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .listing-card--row .listing-card__actions {
        border-inline-start: 0;
        border-top: 1px solid var(--v2-line);
        padding-top: var(--space-5);
    }
}

/* §9: on a phone the row is a 104px thumbnail beside its content, not a
   full-width picture above it. Eight stacked 16:9 photographs turn the
   list into a scroll with one result per screen — the thumbnail is what
   keeps it scannable. */
@media (max-width: 575.98px) {
    .listing-card--row {
        grid-template-columns: 104px minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .listing-card--row .card-media {
        grid-row: 1;
    }

    .listing-card--row .card-media img,
    .listing-card--row .card-media__fallback {
        aspect-ratio: auto;
        height: 100%;
        min-height: 104px;
    }

    /* The badge is wider than the thumbnail it sits on. */
    .listing-card--row .card-media__badge {
        display: none;
    }

    .listing-card--row .listing-card__body {
        padding: var(--space-4);
    }

    .listing-card--row .listing-card__summary {
        display: none;
    }

    .listing-card--row .listing-card__body h3 {
        font-size: var(--text-md);
    }

    /* The action column spans the full width under both, so the buttons
       keep their 44px targets instead of squeezing into 1fr of 375px. */
    .listing-card--row .listing-card__actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: var(--space-4);
    }

    .listing-card--row .listing-card__price {
        flex: 1 0 100%;
    }

    .listing-card--row .listing-card__actions .v2-button,
    .listing-card--row .listing-card__actions .v2-button-outline {
        flex: 1;
        width: auto;
    }
}

.listing-card__summary,
.story-card__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* Two lines on a tour card. The story card keeps three — its
   grid is 3-up, so the cards are wider and a third line still fits. */
.listing-card__summary {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* margin-top:auto is what lines the prices up across a grid row when the
   titles above them run to different lengths. The 1px rule above it is
   §4's divider. */
.listing-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-5);
    border-top: 1px solid var(--v2-line);
}

.listing-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    min-width: 0;
}

/* 20px on a grid card, 28px in a list row (set on the row
   variant), 34px in the booking rail. */
.listing-card__price strong {
    color: var(--v2-text);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: var(--tracking-h1);
    font-variant-numeric: tabular-nums;
}

.listing-card__price span {
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
}

/* ── Rating row — only rendered when a rating exists ── */

.rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

/* Five glyphs, filled to the rounded average. The row
   is aria-hidden — §6 requires a text equivalent, which is the
   visually-hidden sentence the card renders beside it, not these glyphs. */
.rating__stars {
    display: inline-flex;
    gap: 0.08em;
    margin-inline-end: var(--space-1);
}

.rating__star {
    color: var(--v2-line-strong);
    font-size: var(--text-base);
    line-height: 1;
}

.rating__star.is-filled {
    color: var(--v2-gold);
}

.rating__value {
    font-weight: 700;
    color: var(--v2-text);
}

.rating__count {
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
}

.testimonial-stars {
    display: inline-flex;
    gap: 0.1em;
    color: var(--v2-gold);
    font-size: var(--text-base);
    line-height: 1;
}

/* ── Meta pills ── */

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

/* Card meta rows stay on one line so every title in a row
   starts at the same y-offset. Overflow is hidden, not wrapped. */
.meta-row--single {
    flex-wrap: nowrap;
    overflow: hidden;
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-band);
    color: var(--v2-accent-text);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.meta-pill > span,
.meta-pill:not(:has(i)) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-pill i {
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.meta-pill--light {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--v2-white);
    backdrop-filter: blur(6px);
}

a.meta-pill:hover {
    background: var(--v2-band-strong);
}

a.meta-pill--light:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ── Category chips ── */

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.category-chip {
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-surface);
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--duration) var(--ease),
                background-color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}

.category-chip:hover {
    border-color: var(--v2-primary-decorative);
    color: var(--v2-navy-900);
}

.category-chip.is-active {
    background: var(--v2-primary);
    border-color: var(--v2-primary);
    color: var(--v2-white);
}

/* ── Why cards — NOT a sequence, so icons rather than numbers ── */

.why-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-8);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-panel);
    background: var(--v2-surface);
    transition: transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--v2-shadow-md);
}

.why-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-12);
    height: var(--space-12);
    margin-bottom: var(--space-5);
    border-radius: var(--v2-radius-lg);
    background: var(--v2-band);
    color: var(--v2-primary-decorative);
    font-size: var(--text-xl);
}

.why-card h3 {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.why-card p {
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* ============================================================
   DESTINATION CARDS
   ============================================================ */

/* ── Destination detail ── */

.destination-hero {
    display: flex;
    align-items: flex-end;
    min-height: 400px;
    padding-block: var(--space-10);
    color: var(--v2-white);
    /* Navy scrim, never black (§2). Heavier at the foot so the title holds
       its contrast wherever the photograph is bright. */
    background:
        linear-gradient(180deg, rgba(10, 29, 48, 0.35) 0%, rgba(10, 29, 48, 0.82) 100%),
        var(--destination-image, none) center / cover no-repeat var(--v2-navy-950);
}

.destination-hero h1 {
    color: var(--v2-white);
}

.breadcrumb--onDark {
    color: rgba(255, 255, 255, 0.78);
}

.breadcrumb--onDark a:hover {
    color: var(--v2-white);
}

/* Four figures under the hero, split by 1px rules. */
.metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0 0;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--v2-line);
    border-bottom: 1px solid var(--v2-line);
}

.metric-strip > div + div {
    border-inline-start: 1px solid var(--v2-line);
    padding-inline-start: var(--space-5);
}

.metric-strip dt {
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.metric-strip dd {
    margin: var(--space-2) 0 0;
    color: var(--v2-text);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: var(--tracking-h1);
    font-variant-numeric: tabular-nums;
}

/* ── About: copy one side, three figures the other ── */

.about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: center;
}

.metric-strip--stacked {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
}

.metric-strip--stacked > div {
    padding-block: var(--space-4);
}

.metric-strip--stacked > div + div {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-top: 1px solid var(--v2-line);
}

/* ── Blog article: a white card on the band ── */

.article-card {
    display: block;
    max-width: 56rem;
    margin-inline: auto;
    padding: var(--space-10);
    border-radius: var(--v2-radius-panel);
    background: var(--v2-surface);
}

.article-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    margin: var(--space-4) 0 var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--v2-line);
    color: var(--v2-text-muted);
    font-size: var(--text-meta);
    font-weight: 500;
}

.article-byline span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* §5.06 puts the article image at 300px — cropped, not letterboxed to
   whatever ratio the upload happened to have. */
.article-hero {
    margin-bottom: var(--space-6);
    border-radius: var(--v2-radius-card);
    overflow: hidden;
}

.article-hero img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.article-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.article-thumbs img {
    width: 96px;
    height: 72px;
    border-radius: var(--v2-radius-sm);
    object-fit: cover;
}

/* Long-form body at 17px/1.8 over 68ch (§5.06). */
.article-card .prose {
    font-size: var(--text-md);
    line-height: 1.8;
}

/* FAQ rows split by rules rather than floated as separate cards (§5.07). */
.faq-list--rules {
    gap: 0;
    max-width: var(--measure);
}

.faq-list--rules .faq-item {
    border: 0;
    border-bottom: 1px solid var(--v2-line);
    border-radius: 0;
}

.faq-list--rules .faq-item:first-child {
    border-top: 1px solid var(--v2-line);
}

/* Closing contact panel (§5.07), on the warm band tone. */
.support-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    max-width: var(--measure);
    margin-inline: auto;
    padding: var(--space-6);
    border-radius: var(--v2-radius-panel);
    background: var(--v2-sand-100);
}

.support-panel h2 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
}

.support-panel p {
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
}

.destination-card {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--v2-radius-panel);
    background: var(--v2-navy-950);
    transition: transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.destination-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--v2-shadow-lg);
}

.destination-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

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

.destination-card__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-6);
    background: linear-gradient(180deg, transparent, rgba(10, 29, 48, 0.88));
    color: var(--v2-white);
}

.destination-card__body .v2-eyebrow {
    color: var(--v2-sand-300);
}

.destination-card__body h3 {
    color: var(--v2-white);
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
}

.destination-card__body p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* ============================================================
   MEDIA CARD (large image with caption overlay)
   ============================================================ */

.media-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--v2-radius-panel);
    background: var(--v2-navy-950);
}

.media-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.media-card__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-8);
    background: linear-gradient(180deg, transparent, rgba(10, 29, 48, 0.88));
    color: var(--v2-white);
}

.media-card__overlay h3 {
    color: var(--v2-white);
    font-size: var(--text-2xl);
}

.media-card__overlay p {
    margin-top: var(--space-2);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-sm);
}

.media-card__overlay .v2-eyebrow {
    color: var(--v2-sand-300);
}

/* ── Overlapping collage (About Us story) ── */

.collage {
    position: relative;
    min-width: 0;
    padding-bottom: var(--space-16);
    padding-inline-end: var(--space-16);
}

.collage__primary,
.collage__secondary {
    overflow: hidden;
    border-radius: var(--v2-radius-panel);
}

.collage__primary img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.collage__secondary {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 55%;
    border: var(--space-2) solid var(--v2-surface);
    box-shadow: var(--v2-shadow-lg);
}

.collage__secondary img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.about-story__copy {
    margin-top: var(--space-6);
}

/* ============================================================
   ASIDES
   ============================================================ */

.aside-stack,
.details-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.aside-card {
    padding: var(--space-6);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-panel);
    background: var(--v2-surface);
    box-shadow: var(--v2-shadow-sm);
}

/* §4: the support card under the booking rail is sand, not white. It is the
   only tinted surface in the rail, which is what separates "here is help" from
   the white price card above it. §2 caps the page at two background tones
   beyond white, and this is the same --v2-sand-100 the FAQ support panel and
   the testimonial band already use — no third tone enters. */
.aside-card--support {
    border-color: transparent;
    background: var(--v2-sand-100);
    box-shadow: none;
}

.aside-card h2,
.aside-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
}

.aside-card .page-actions {
    margin-top: var(--space-4);
}

/* ============================================================
   TOUR DETAIL
   ============================================================ */

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
}

.detail-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.detail-title h1 {
    margin: 0;
    max-width: 56rem;
}

.detail-share {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    min-height: var(--tap);
    padding: 0 var(--space-3);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    color: var(--v2-text);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}

.detail-share:hover,
.detail-share:focus-visible {
    border-color: var(--v2-primary);
    color: var(--v2-primary);
}

.meta-pill--link {
    text-decoration: none;
    color: inherit;
}

.meta-pill--link:hover,
.meta-pill--link:focus-visible {
    color: var(--v2-primary);
}

.detail-read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: 0;
    border: 0;
    background: none;
    color: var(--v2-link);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}

.detail-read-more:hover,
.detail-read-more:focus-visible {
    color: var(--v2-primary-hover);
}

/* §5.03: content, then a 380px rail.
   `align-items: start` would shrink the rail column to its own content —
   about 600px against a 2000px content column — and a sticky child can
   only travel inside its own container, so the price card scrolled off the
   top a third of the way down the page. Stretching the column is what lets
   the card stay with the reader the whole way, which is the entire point
   of §5.03's "price visible at every scroll position". */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-8);
    align-items: stretch;
}

/* ── Mobile booking bar ──
   Only exists below 992px; above that the sticky rail carries the price. */
.mobile-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-header);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--gutter);
        /* Clears the home indicator on a notched phone. */
        padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
        border-top: 1px solid var(--v2-line);
        background: var(--v2-surface);
        box-shadow: var(--v2-shadow-lg);
    }

    .mobile-bar__price {
        display: flex;
        flex-direction: column;
        line-height: var(--leading-tight);
    }

    .mobile-bar__price strong {
        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
        font-size: var(--text-xl);
        font-weight: 800;
        letter-spacing: var(--tracking-h1);
        color: var(--v2-text);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .mobile-bar__price span {
        color: var(--v2-text-muted);
        font-size: var(--text-xs);
        font-weight: 500;
    }

    .mobile-bar__cta {
        flex: 1;
        min-height: var(--tap);
        padding-inline: var(--space-4);
        white-space: nowrap;
    }

    /* §9 puts the WhatsApp glyph in a 50px button. Green is the glyph
       only, never a fill (§2). */
    .mobile-bar__whatsapp {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        flex-shrink: 0;
        border: 1px solid var(--v2-line);
        border-radius: var(--v2-radius-pill);
        color: #25d366;
        font-size: var(--text-xl);
    }

    /* The bar is fixed, so the last of the page would otherwise sit under
       it — the footer's final row and the related-tours grid both did. */
    body:has(.mobile-bar) {
        padding-bottom: 76px;
    }
}

/* ── Booking request step ── */

.progress-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.progress-steps__step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.progress-steps__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-surface);
    font-size: var(--text-meta);
    font-variant-numeric: tabular-nums;
}

.progress-steps__step.is-current {
    color: var(--v2-text);
}

.progress-steps__step.is-current .progress-steps__mark {
    border-color: var(--v2-primary);
    background: var(--v2-primary);
    color: var(--v2-white);
}

.progress-steps__step.is-done .progress-steps__mark {
    border-color: var(--v2-primary);
    color: var(--v2-accent-text);
    background: var(--v2-band);
}

.request-summary__tour {
    display: flex;
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--v2-line);
}

.request-summary__tour img {
    width: 72px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--v2-radius-sm);
    object-fit: cover;
}

.request-summary__title {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: var(--leading-card);
    color: var(--v2-text);
}

.request-summary__rows {
    margin: 0;
    padding-block: var(--space-4);
}

.request-summary__rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-1);
}

.request-summary__rows dt {
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

.request-summary__rows dd {
    margin: 0;
    color: var(--v2-text);
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.request-done__icon {
    color: var(--v2-success);
    font-size: var(--text-3xl);
    line-height: 1;
    margin-bottom: var(--space-3);
}

.detail-layout__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

/* Sticky price console on tour details — same treatment as the
   hero search, which is what ties the pages together. */
.detail-summary {
    position: sticky;
    /* Tracks the measured header rather than a hardcoded offset, so the
       card never tucks under the bar (§4 sticks it at the header edge). */
    top: calc(var(--nav-h) + var(--space-4));
    border-radius: var(--v2-radius-panel);
    box-shadow: var(--v2-shadow-lg);
}

.detail-summary__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.detail-summary__price strong {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-price);
    font-weight: 800;
    letter-spacing: var(--tracking-h1);
    color: var(--v2-text);
    font-variant-numeric: tabular-nums;
}

.detail-summary__price span {
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.detail-summary__lead {
    margin: var(--space-4) 0;
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.detail-summary__from {
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
}

.detail-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--v2-line);
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
}

.detail-summary__total strong {
    color: var(--v2-text);
    font-size: var(--text-xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.detail-summary__reassure {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
}

.detail-summary__reassure i {
    color: var(--v2-primary);
    flex-shrink: 0;
    margin-top: 0.15em;
}

.page-actions--stack {
    flex-direction: column;
    align-items: stretch;
}

.page-actions--stack > * {
    width: 100%;
    justify-content: center;
}

.booking-field--date {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-height);
    margin-bottom: var(--space-3);
    padding: 0 var(--space-4);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius);
    cursor: pointer;
}

.booking-field--date input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--v2-text);
    outline: none;
}

.booking-guests {
    position: relative;
    margin-bottom: var(--space-4);
}

.booking-guests__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    color: var(--v2-text);
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
}

.booking-guests__toggle .bi-chevron-down {
    margin-inline-start: auto;
}

.booking-guests__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    z-index: 5;
    padding: var(--space-4);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    box-shadow: var(--v2-shadow-lg);
}

.booking-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.booking-stepper + .booking-stepper {
    margin-top: var(--space-4);
}

.booking-stepper strong {
    display: block;
    font-size: var(--text-sm);
}

.booking-stepper span {
    display: block;
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
}

.booking-stepper__controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.booking-stepper__controls button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--v2-line-strong);
    border-radius: 50%;
    background: var(--v2-surface);
    color: var(--v2-text);
    font-size: var(--text-lg);
    line-height: 1;
    cursor: pointer;
}

.booking-stepper__controls button:hover,
.booking-stepper__controls button:focus-visible {
    border-color: var(--v2-primary);
    background: var(--v2-band);
}

.booking-stepper__controls input {
    width: 2rem;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--v2-text);
}

.feature-list,
.bullet-list {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.feature-list li,
.bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.feature-list i,
.bullet-list i {
    color: var(--v2-primary-decorative);
    flex-shrink: 0;
    margin-top: 0.2em;
}

/* ============================================================
   TOUR DETAIL GALLERY
   ============================================================ */

.detail-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.detail-gallery__main {
    overflow: hidden;
    border-radius: var(--v2-radius-panel);
}

.detail-gallery__main img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.detail-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: var(--space-3);
}

.detail-gallery__thumb {
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--v2-radius-md);
    background: none;
    cursor: pointer;
    transition: border-color var(--duration) var(--ease);
}

.detail-gallery__thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.detail-gallery__thumb:hover,
.detail-gallery__thumb.is-active {
    border-color: var(--v2-primary-decorative);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonial-card-v2__quote {
    margin: var(--space-4) 0 var(--space-5);
    color: var(--v2-text);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.testimonial-card-v2__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--v2-line);
}

.testimonial-card-v2__meta strong {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--v2-navy-900);
}

.testimonial-card-v2__meta span {
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
}

/* Horizontal scroll rail with prev/next, per the reference. */
.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, calc((100% - var(--space-6) * 2) / 3));
    gap: var(--space-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    padding-bottom: var(--space-2);
    scrollbar-width: none;
}

/* Four across on a desktop, as the reference shows, which also leaves the
   fifth tour off-view — the arrows are dead controls if every card already
   fits. Declared AFTER .rail: both are single-class selectors, so source
   order decides which wins.

   A definite track width, not minmax(0, …): with a floor of zero the tracks
   shrink to fit the scrollport and the rail never overflows, which is
   exactly why the arrows sat permanently disabled. */
.rail--cards {
    grid-auto-columns: calc((100% - var(--space-4) * 3) / 4);
    gap: var(--space-4);
}

@media (max-width: 991.98px) {
    .rail--cards {
        grid-auto-columns: calc((100% - var(--space-4) * 2) / 3);
    }
}

@media (max-width: 767.98px) {
    .rail--cards {
        grid-auto-columns: calc((100% - var(--space-4)) / 2);
    }
}

@media (max-width: 575.98px) {
    .rail--cards {
        grid-auto-columns: 82%;
    }
}


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

.rail > * {
    scroll-snap-align: start;
}

.rail-controls {
    display: flex;
    gap: var(--space-2);
}
.rail-controls--end {
    justify-content: flex-end;
    margin-block-end: var(--space-4);
}


.rail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-surface);
    color: var(--v2-primary);
    cursor: pointer;
    transition: background-color var(--duration) var(--ease),
                color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}

.rail-button:hover:not(:disabled) {
    background: var(--v2-primary-hover);
    border-color: var(--v2-primary-hover);
    color: var(--v2-white);
}

.rail-button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ============================================================
   STORY / BLOG
   ============================================================ */

.story-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0;
    min-width: 0;
    margin-bottom: var(--space-10);
    overflow: hidden;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-2xl);
    background: var(--v2-surface);
    box-shadow: var(--v2-shadow-md);
    transition: transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.story-featured:hover {
    transform: translateY(-4px);
    box-shadow: var(--v2-shadow-lg);
}

.story-featured__image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.story-featured__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: var(--space-10);
}

.story-featured__badge {
    align-self: flex-start;
    margin-bottom: var(--space-4);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-sand-200);
    color: var(--v2-navy-900);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.story-featured__body h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}

.story-featured__body p {
    color: var(--v2-text-soft);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.story-featured__cta {
    margin-top: var(--space-6);
    color: var(--v2-accent-text);
    font-weight: 700;
    font-size: var(--text-sm);
}

.story-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
}

.story-meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.story-card__readmore {
    margin-top: var(--space-5);
    color: var(--v2-accent-text);
    font-weight: 700;
    font-size: var(--text-sm);
}

/* ============================================================
   PANELS, FAQ, EMPTY STATES
   ============================================================ */

.cta-panel {
    border: 0;
    border-radius: var(--v2-radius-2xl);
    background:
        linear-gradient(135deg, rgba(61, 155, 224, 0.22), transparent 55%),
        var(--v2-navy-950);
    box-shadow: var(--v2-shadow-lg);
}

.cta-panel__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-12);
}

.cta-panel h2,
.cta-panel h3 {
    color: var(--v2-white);
}

.cta-panel .v2-eyebrow {
    color: var(--v2-sand-300);
}

.cta-panel .v2-copy {
    margin-top: var(--space-3);
    color: rgba(255, 255, 255, 0.85);
}

/* ── Photo mosaic CTA (staggered heights, per the reference) ── */

/* The mosaic takes up to 5 destinations but a site may only have 3.
   `auto-fit` lets however many exist share the row rather than leaving
   empty columns on the right, and the capped track keeps three items
   from ballooning to a third of the page each. `justify-content`
   centres whatever count ends up rendering. */
.photo-mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 13rem));
    justify-content: center;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-12);
}

.photo-mosaic img {
    width: 100%;
    border-radius: var(--v2-radius-lg);
    object-fit: cover;
    box-shadow: var(--v2-shadow-md);
}

.photo-mosaic > :nth-child(odd) img {
    aspect-ratio: 3 / 4;
}

.photo-mosaic > :nth-child(even) img {
    aspect-ratio: 3 / 4.6;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 52rem;
    margin-inline: auto;
}

.faq-item {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    background: var(--v2-surface);
    overflow: hidden;
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.faq-item[open] {
    border-color: var(--v2-line-strong);
    box-shadow: var(--v2-shadow-sm);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--v2-navy-900);
    list-style: none;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item__question::after {
    content: "+";
    flex-shrink: 0;
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--v2-primary-decorative);
    transition: transform var(--duration) var(--ease);
}

.faq-item[open] .faq-item__question::after {
    transform: rotate(45deg);
}

.faq-item__answer {
    padding: 0 var(--space-6) var(--space-5);
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.empty-state-card {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

.empty-state-card .content-card__body {
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-8);
}

/* ============================================================
   FORMS (booking request)
   ============================================================ */

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--v2-text);
    font-size: var(--text-sm);
    font-weight: 600;
}

.form-control,
.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-md);
    background: var(--v2-surface);
    color: var(--v2-text);
    font-family: inherit;
    font-size: var(--text-sm);
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--v2-primary-decorative);
    box-shadow: 0 0 0 3px rgba(61, 155, 224, 0.2);
    outline: none;
}

.form-field {
    margin-bottom: var(--space-5);
}

.booking-form__section {
    margin: var(--space-8) 0 var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--v2-line);
}

.booking-form__section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.booking-form__section h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-1);
}

.booking-form__section p {
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
}

.text-danger {
    display: block;
    margin-top: var(--space-1);
    color: var(--v2-danger);
    font-size: var(--text-xs);
}

.alert {
    padding: var(--space-4) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--v2-radius-md);
    font-size: var(--text-sm);
}

.alert-success {
    border-color: rgba(40, 167, 69, 0.3);
    background: rgba(40, 167, 69, 0.08);
    color: #1c6b2c;
}

/* ============================================================
   PREFERENCE INTERSTITIAL (standalone page, no layout)
   ============================================================ */

.preferences-loading-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--gutter);
    background: var(--v2-surface-alt);
}

.preferences-card {
    width: min(32rem, 100%);
    padding: var(--space-12);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-2xl);
    background: var(--v2-surface);
    box-shadow: var(--v2-shadow-xl);
    text-align: center;
}

.preferences-card .v2-eyebrow {
    justify-content: center;
}

.preferences-card .v2-copy {
    margin-top: var(--space-4);
}

.preferences-card__status {
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
}

.spinner-orb {
    width: var(--space-10);
    height: var(--space-10);
    margin: 0 auto var(--space-6);
    border: 3px solid var(--v2-band-strong);
    border-top-color: var(--v2-primary-decorative);
    border-radius: var(--v2-radius-pill);
    animation: spinner-orb-spin 0.8s linear infinite;
}

@keyframes spinner-orb-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    margin-top: var(--section-y);
    padding-block: var(--space-16) 0;
    background: var(--v2-navy-900);
    color: rgba(255, 255, 255, 0.7);
}

.site-footer__inner {
    width: var(--v2-width);
    margin-inline: auto;
}

.site-footer__top {
    display: none;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 1fr;
    gap: var(--space-10);
    padding-bottom: var(--space-12);
}

.site-footer__grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.8125rem;
    min-width: 0;
}

.site-footer__brand-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: var(--space-2);
}



.site-footer__brand p {
    margin: 0;
    max-width: 18.125rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.90625rem;
    line-height: 1.75;
}

.site-footer__grid h3 {
    margin: 0 0 var(--space-1);
    color: var(--v2-white);
    font-size: 1.03125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.site-footer__grid a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.90625rem;
    transition: color var(--duration) var(--ease);
}

.site-footer__grid a:hover {
    color: var(--v2-white);
}

.site-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5625rem;
}

.site-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--v2-white);
}

.site-footer__social:hover {
    background: var(--v2-primary);
    color: var(--v2-white);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: 1.375rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
}

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

.site-footer__legal a {
    color: rgba(255, 255, 255, 0.55);
}

.site-footer__legal a:hover {
    color: var(--v2-white);
}

/* ============================================================
   SCROLL REVEAL
   `.reveal-ready` is set by site.js, so the hidden state only
   applies when JS is alive — no blank page without it.
   ============================================================ */

.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(var(--space-4));
    /* Short enough to complete inside the observer's one-and-a-half-viewport
       lead even on a fast flick — a longer fade is what left sections
       half-transparent mid-scroll. */
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

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

/* Set by site.js when an element is committed while already on screen —
   i.e. the scroll outran the observer. Animating from there is what showed
   as half-faded sections during momentum scrolling. */
.reveal-ready [data-reveal].is-instant {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

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

    /* The header still hides and shows — that behaviour is what reclaims
       screen space — but it snaps instead of sliding. The blanket rule
       above already zeroes the duration; this states the intent explicitly
       so the transform isn't reintroduced by a later edit. */
    .site-header {
        transition: none;
        will-change: auto;
    }

    /* The hero does not cycle at all under reduced motion — site.js never
       starts its interval, so the first slide is simply the hero image.
       Zeroing the transition here would only have made it cut instead of
       fade, which is still movement behind text. */
    .hero__layer {
        transition: none;
    }
}

/* ============================================================
   RESPONSIVE — one ladder: 1280 / 992 / 768 / 480
   The 992 stop matches Bootstrap's `lg`, which the navbar's
   Collapse behaviour is bound to — they must not diverge.
   ============================================================ */

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

    .card-grid-compact {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rail {
        grid-auto-columns: minmax(0, calc((100% - var(--space-6)) / 2));
    }
}

@media (max-width: 991.98px) {
    .site-nav__inner {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--nav-bar-h);
        padding-block: var(--space-2);
        gap: var(--space-3);
    }


    .site-utility {
        order: 2;
        margin-left: auto;
    }

    .site-nav__toggle {
        order: 3;
        margin-left: 0;
    }

    /* The hero is capped rather than left to grow with the viewport, so it
       no longer fills an entire phone screen before any content appears. */
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: min(88svh, 640px);
    }

    .site-nav__collapse {
        order: 4;
        flex-basis: 100%;
        margin-top: var(--space-3);
    }

    /* In landscape (e.g. 844x390) the open panel was taller than the viewport
       while `body.site-nav-open` disabled page scrolling, so the last items —
       About Us, and the language and currency switchers — were physically
       unreachable. The panel now scrolls on its own; `overscroll-behavior`
       stops that scroll chaining out to the locked page behind it. */
    .site-nav__collapse.show,
    .site-nav__collapse.collapsing {
        max-height: calc(100dvh - var(--nav-h) - var(--space-6));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .site-nav__links {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        margin: 0;
    }

    /* Inside the drawer the links are stacked rows, not bar items: they lose
       the 72px bar height and the underline, and take a left accent bar for
       the active state instead. Minimum height stays at --tap. */
    .site-nav__links .nav-link {
        height: auto;
        min-height: var(--tap);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--v2-radius-sm);
    }

    .site-nav__links .nav-link::after {
        left: 0;
        right: auto;
        top: var(--space-2);
        bottom: var(--space-2);
        width: 2px;
        height: auto;
    }

    .site-nav__links .nav-link.active {
        background: var(--v2-band);
    }

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

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

    /* One region per row below 992: two banners side by side leaves each one
       too narrow for its name and its count to share a line. */
    .region-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }

    .details-grid--balanced,
    .detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    /* Four figures across a phone gives each about 70px — the numbers wrap
       under their own labels. Two by two holds them legible. */
    .metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .metric-strip > div + div {
        border-inline-start: 0;
        padding-inline-start: 0;
    }

    .article-card {
        padding: var(--space-6);
    }

    .detail-summary {
        position: static;
    }

    .story-featured {
        grid-template-columns: minmax(0, 1fr);
    }

    .story-featured__body {
        padding: var(--space-8);
    }

    .cta-panel__body {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-10);
    }

    .site-footer__top {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-10);
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
    }

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

    .photo-mosaic > :nth-child(n + 4) {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .card-grid-2,
    .card-grid-3,
    .card-grid-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Two, not one. The compact card is short enough that a phone still sees
       two of them without scrolling, which is the point of the strip. */
    .card-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    /* Both two-column detail blocks stack. At 375px an inclusions column is
       ~160px, which wraps "Internationale Flüge" onto three lines. */
    .inclusions,
    .booking-field--split {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The score sits above the bars rather than beside them. */
    .review-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    /* Two link columns, and a shorter banner — 120px of photo is a lot of a
       phone screen to spend on a heading. */
    .region-links {
        columns: 2;
    }

    .region-banner {
        min-height: 96px;
        padding: var(--space-4) var(--space-5);
    }

    .region-banner__title {
        font-size: var(--text-xl);
    }

    .hero {
        border-radius: var(--v2-radius-xl);
        padding: var(--space-12) var(--space-5) var(--space-14);
    }

    /* §9: the home hero is 300px on a phone. min-height, not height — a
       fixed height pushed the lede straight out of the bottom of the image
       and under the search bar. The lede drops to body size here, which is
       what actually gets the block down to 300. The full-bleed hero also
       keeps its square corners: the rule above rounds .hero for the inset
       cards on interior pages, and this one is not inset. */
    .hero--full {
        min-height: 300px;
        height: auto;
        padding: var(--space-8) var(--gutter) var(--space-10);
        border-radius: 0;
    }

    .hero--full .hero__copy {
        margin-top: var(--space-3);
        font-size: var(--text-base);
    }

    /* Category filters become one swipeable row instead of stacking into a
       tall block that pushes the cards off-screen. `scroll-padding-inline`
       plus the trailing spacer keep the first and last pill clear of the
       screen edges when snapped. */
    .category-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--space-4);
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-bottom: var(--space-2);
    }

    .category-chips::-webkit-scrollbar {
        display: none;
    }

    .category-chip {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }


    .section-heading--split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
        align-items: start;
    }

    .section-heading--split > :last-child,
    .section-heading--split > :last-child.section-heading__copy {
        justify-self: start;
        max-width: none;
    }

    .collage {
        padding-bottom: var(--space-12);
        padding-inline-end: var(--space-10);
    }

    .story-featured__body,
    .cta-panel__body {
        padding: var(--space-6);
    }

    .rail {
        grid-auto-columns: minmax(0, 88%);
    }

    .detail-gallery__thumbs {
        grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    }

    .site-footer {
        padding-block: var(--space-12) var(--space-6);
    }
}

@media (max-width: 479.98px) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    /* Below 480 a two-column compact card is ~150px wide, which clips the
       price line. One column, same as every other grid at this stop. */
    .card-grid-compact {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .photo-mosaic > :nth-child(n + 3) {
        display: none;
    }

}

/* ============================================================
   TOUCH TARGETS
   Applies on coarse pointers *or* any viewport where the mobile
   nav is in play. `hover: none` alone was too narrow — plenty of
   real testing setups (browser responsive mode, Android with a
   mouse attached, hybrid laptops) report `hover: hover` at phone
   widths, so the rules silently did nothing there.
   Desktop (>=992px with a fine pointer) keeps its denser sizing.
   ============================================================ */

@media (hover: none), (pointer: coarse), (max-width: 991.98px) {
    .site-nav__links .nav-link,
    .site-utility__group .site-nav__pill,
    .site-nav__pill,
    .site-nav__contact,
    .site-nav__toggle,
    .category-chip,
    .rail-button,
    .v2-button,
    .v2-button-outline,
    .v2-button-light,
    .v2-button-ghost,
    .v2-button-white,
    .faq-item__question {
        min-height: var(--tap);
    }

    /* The brand is a 22px-tall text link; padding grows the hit area
       without moving the wordmark. */
    .site-nav__brand {
        min-height: var(--tap);
        padding-block: var(--space-2);
        padding-inline-end: var(--space-2);
    }

    /* Meta pills are links on several pages, so they need the target too. */
    a.meta-pill {
        min-height: var(--tap);
        padding-block: var(--space-2);
    }

    /* Breadcrumb links sit at the top of every interior page and were the
       last targets under §3's 44px floor — 21px tall, set by line-height
       alone. inline-flex grows the hit area downward and upward around the
       text, so the crumb row keeps its baseline and its 12.5px type. */
    .breadcrumb a {
        display: inline-flex;
        align-items: center;
        min-height: var(--tap);
    }

    /* Footer link columns: space the rows so each link clears 44px
       without the list looking gappy. */
    .site-footer__grid > div {
        gap: var(--space-1);
    }

    .site-footer__grid a {
        display: flex;
        align-items: center;
        min-height: var(--tap);
    }


    /* iOS Safari zooms the whole page when a focused field is under 16px.
       This has to cover *every* control, not just the two above the fold —
       the booking form on /Excursions/Details/{id} has nine of them. The
       bare element selectors catch anything that misses a utility class. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    .form-control,
    .form-select {
        min-height: var(--tap);
    }

    .detail-gallery__thumb {
        min-height: var(--tap);
    }

    /* Small visual pills must keep their compact look, so the hit area is
       grown with a centred pseudo-element rather than by padding them out. */
    .meta-pill,
    .rating,
    .story-meta span {
        position: relative;
    }

    .meta-pill::after,
    a.meta-pill::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        translate: 0 -50%;
        min-height: var(--tap);
        height: 100%;
    }

    /* Only links need the enlarged target; static pills would otherwise
       trap taps meant for the card beneath them. */
    span.meta-pill::after {
        content: none;
    }

    .site-nav__toggle {
        width: var(--tap);
        height: var(--tap);
    }

    /* Circular controls need the width too — min-height alone left them
       44px tall but only 40px wide. */
    .rail-button {
        min-width: var(--tap);
        width: var(--tap);
        height: var(--tap);
    }
}

/* Full-bleed layouts respect the notch. The gutter already keeps
   content off the edge; this only widens it on notched devices,
   and it adjusts the measure rather than any element's own padding. */
@supports (padding: env(safe-area-inset-left)) {
    :root {
        /* Restates the token's own value rather than a copy of it — the
           literal here silently outranked tokens.css and pinned the
           mobile gutter at 20px after §3 moved it to 16. */
        --gutter: max(clamp(1rem, 4vw, 2rem),
                      env(safe-area-inset-left),
                      env(safe-area-inset-right));
    }
}

/* ============================================================
   DESTINATION ATLAS — /Destinations
   The destinations page is the site's atlas: a picture of the country,
   then every place in it on one screen. Everything below is scoped to
   that page and declared last, so the single-class modifiers here settle
   their ties with .hero / .rail-button by source order.
   ============================================================ */

/* ── Hero: search bar at the top of the picture, title beneath ──
   Interior pages elsewhere open on a centred compact hero. This one puts
   the search first because someone landing on the atlas is usually one
   click away from a filter, and the title is left-set so the eye lands on
   the same edge the sections underneath start from. */
.hero--atlas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    min-height: 460px;
    padding: var(--space-6) 0 clamp(2.5rem, 5vw, 3.375rem);
    text-align: left;
    /* Longhands, not the `background` shorthand .hero uses: the shorthand
       would reset background-color to transparent, and a destination whose
       ImageUrl points at a missing file would leave the scrim washed out
       over the white page. Navy underneath means a broken image degrades to
       a solid navy hero that still looks deliberate. */
    background-color: var(--v2-navy-850);
    background-image:
        linear-gradient(180deg,
            rgba(10, 22, 38, 0.52) 0%,
            rgba(10, 22, 38, 0.22) 40%,
            rgba(10, 22, 38, 0.80) 100%),
        var(--atlas-hero-image, url("/images/daygo/scenic/destinations-hero-1600.webp"));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero__inner--atlas {
    width: var(--v2-width);
    max-width: none;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(2.5rem, 6vw, 4rem);
    min-height: calc(460px - var(--space-6) - 3.375rem);
    align-items: stretch;
    text-align: left;
}

.hero__inner--atlas .global-search--embed {
    width: 100%;
    max-width: none;
    margin: 0;
}

.atlas-hero__copy {
    max-width: 40rem;
    pointer-events: none;
}

.atlas-hero__title {
    margin: 0 0 var(--space-4);
    color: var(--v2-white);
    font-size: clamp(2.25rem, 4.5vw, 3.125rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.atlas-hero__lede {
    margin: 0;
    max-width: 32.5rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--text-md);
    line-height: 1.6;
}

.atlas-column__link {
    color: inherit;
    text-decoration: none;
}

.atlas-column__link:hover {
    color: var(--v2-link);
}

.atlas-empty {
    margin: 0;
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.hero__inner--start {
    width: var(--v2-width);
    max-width: none;
    margin-inline: auto;
    align-items: flex-start;
    text-align: left;
}

.hero__inner--start .hero__copy {
    margin-inline: 0;
}

/* ── Popular destinations: an asymmetric picture mosaic ──
   Flex rather than grid, and deliberately so. A twelve-column grid draws
   the wide/narrow rhythm just as well, but leaves a notch on the right
   whenever the destination count does not finish a row — and the count is
   whatever the operator has uploaded, not nine forever. Flex bases give
   the same rhythm and let a short final row grow to the full width.

   The rhythm repeats every nine tiles: wide, narrow, narrow, wide on the
   first row; narrow, narrow, wide, narrow, narrow on the second. */
.atlas-mosaic {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.atlas-mosaic__tile {
    flex: 1 1 calc(16.666% - var(--space-4));
    min-width: 150px;
    height: clamp(150px, 16vw, 200px);
}

.atlas-mosaic__tile:nth-child(9n + 1),
.atlas-mosaic__tile:nth-child(9n + 4),
.atlas-mosaic__tile:nth-child(9n + 7) {
    flex: 2 1 calc(33.333% - var(--space-4));
}

.atlas-mosaic__tile a {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: var(--v2-radius-md);
    box-shadow: var(--v2-shadow-sm);
}

.atlas-mosaic__tile img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--duration) var(--ease);
}

.atlas-mosaic__tile a:hover img {
    transform: scale(1.05);
}

/* The file behind ImageUrl is gone. The tile keeps its shape and its
   label; the scrim is dropped because there is no photograph to sit on. */
.atlas-mosaic__tile.is-imageless a {
    background: var(--v2-band);
}

.atlas-mosaic__tile.is-imageless .atlas-mosaic__label {
    background: none;
    color: var(--v2-accent-text);
}

/* The label sits on photography, so it carries its own ground rather than
   trusting the picture — navy at 82% under white clears AA over an
   arbitrary image where a bare text-shadow does not. */
.atlas-mosaic__label {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--space-8) var(--space-4) var(--space-3);
    background: linear-gradient(to top, rgba(10, 29, 48, 0.82), transparent);
    color: var(--v2-white);
    font-size: var(--text-sm);
    font-weight: 700;
}

/* ── All destinations: regions as columns of count pills ──
   auto-fit, not a fixed four: the site has three regions plus a possible
   "more destinations" block, and a fixed track count would leave a dead
   column whenever nothing is unclassified. Empty repeated tracks collapse,
   so three groups share the full width. */
.atlas-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-8);
    align-items: start;
}

.atlas-column__title {
    margin: 0 0 var(--space-4);
    color: var(--v2-text);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-md);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
}

.atlas-column__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.atlas-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-chip);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-surface);
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: border-color var(--duration) var(--ease),
                color var(--duration) var(--ease),
                background-color var(--duration) var(--ease);
}

.atlas-pill:hover {
    border-color: var(--v2-primary-decorative);
    background: var(--v2-band-strong);
    color: var(--v2-navy-900);
}

/* Tabular figures so a column of 4s and 12s keeps one left edge. */
.atlas-pill__count {
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.atlas-pill__name {
    font-weight: 600;
}

/* ── Top tours: a picture rail with its arrows on the edges ──
   Six across on a desktop, which also leaves the seventh tour off-view —
   the arrows are dead controls if everything already fits. */
.atlas-rail-frame {
    position: relative;
}

.atlas-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--space-4) * 5) / 6);
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.atlas-rail::-webkit-scrollbar {
    display: none;
}

.atlas-rail > * {
    scroll-snap-align: start;
}

.atlas-rail__tile a {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--v2-radius-md);
    box-shadow: var(--v2-shadow-sm);
}

.atlas-rail__tile img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--duration) var(--ease);
}

.atlas-rail__tile a:hover img {
    transform: scale(1.05);
}

.atlas-rail__tile.is-imageless a {
    background: var(--v2-band);
}

.atlas-rail__tile.is-imageless .atlas-rail__label {
    background: none;
    color: var(--v2-accent-text);
}

.atlas-rail__label {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--space-8) var(--space-3) var(--space-3);
    background: linear-gradient(to top, rgba(10, 29, 48, 0.85), transparent);
    color: var(--v2-white);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: var(--leading-card);
}

/* On the rail's edge rather than above it: the control belongs where the
   movement is. Solid rather than outlined because it sits on photography,
   where a hairline border on white would disappear over a pale sky. */
.rail-button--overlay {
    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    width: var(--tap);
    height: var(--tap);
    transform: translateY(-50%);
    border-color: transparent;
    background: var(--v2-primary);
    color: var(--v2-white);
    box-shadow: var(--v2-shadow-lg);
}

.rail-button--overlay:hover:not(:disabled) {
    background: var(--v2-primary-hover);
    border-color: transparent;
}

/* Inside the rail, half over the first and last tile, rather than hung off
   its edges: outside, the arrows sit in the page gutter, which is the one
   piece of the layout that shrinks to nothing on a narrow window. */
.rail-button--start {
    inset-inline-start: var(--space-2);
}

.rail-button--end {
    inset-inline-end: var(--space-2);
}

/* ── Rail dots ──
   Written by site.js once it can measure how many pages the rail has.
   Empty and invisible without script; the rail still scrolls either way. */
.rail-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
}

.rail-dots:empty {
    display: none;
}

/* The visible dot is 8px, which is far below a comfortable touch target,
   so the button is full height and the dot is drawn inside it. */
.rail-dot {
    position: relative;
    width: var(--space-8);
    height: var(--tap);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rail-dot::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 8px;
    height: 8px;
    border-radius: var(--v2-radius-pill);
    background: var(--v2-line-strong);
    transform: translate(-50%, -50%);
    transition: width var(--duration) var(--ease),
                background-color var(--duration) var(--ease);
}

.rail-dot.is-active::before {
    width: 22px;
    background: var(--v2-primary);
}

/* ── Useful information: stories as a reading list ──
   Thumbnail, title, date. The full .story-card carries an excerpt and a
   read-more link, which turns six of them into a wall; this variant is a
   list you scan, and the whole card is the link. */
.story-rows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-8);
}

.story-rows__item.is-collapsed {
    display: none;
}

.story-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    color: inherit;
    text-decoration: none;
}

.story-row__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-band);
}

.story-row__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--duration) var(--ease);
}

.story-row:hover .story-row__media img {
    transform: scale(1.05);
}

.story-row__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.story-row__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--v2-text);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: var(--leading-card);
    transition: color var(--duration) var(--ease);
}

.story-row:hover .story-row__title {
    color: var(--v2-primary);
}

.story-row__date {
    color: var(--v2-text-muted);
    font-size: var(--text-meta);
}

/* Ships hidden and is unhidden by script. Without JavaScript the extra
   stories are already visible, so a button that cannot reveal anything
   never appears. */
.atlas-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    margin-top: var(--space-5);
    padding: 0;
    border: 0;
    background: none;
    color: var(--v2-link);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}

.atlas-more:hover {
    text-decoration: underline;
}

/* ── Interesting topics ──
   Every chip is a destination crossed with a category, and every one is a
   real filter on the excursions list — internal linking, not a keyword
   cloud that dead-ends. */
.topic-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.topic-cloud .category-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-chip);
    text-decoration: none;
}

@media (max-width: 1199.98px) {
    .atlas-rail {
        grid-auto-columns: calc((100% - var(--space-4) * 4) / 5);
    }
}

@media (max-width: 991.98px) {
    .atlas-rail {
        grid-auto-columns: calc((100% - var(--space-4) * 3) / 4);
    }

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

@media (max-width: 767.98px) {
    /* The hero drops to the same 300px floor the home hero uses. */
    .hero--atlas {
        min-height: 300px;
        padding: var(--space-4) 0 var(--space-8);
    }

    .hero__inner--atlas {
        min-height: 0;
        gap: var(--space-8);
    }

    .atlas-rail {
        grid-auto-columns: calc((100% - var(--space-4) * 2) / 3);
    }

    .atlas-mosaic__tile {
        height: clamp(130px, 30vw, 170px);
    }

    .story-rows {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .atlas-rail {
        grid-auto-columns: calc((100% - var(--space-4)) / 2);
    }
}

/* ============================================================
   DESTINATION DETAIL — the atlas, one place deep
   Shares the hero, mosaic, story rows and topic cloud with
   /Destinations. What is new here is the bar over the tour grid
   and the full-bleed band under it.
   ============================================================ */

/* The breadcrumb sits inside the hero, above the title, and .hero__inner is a
   centring column — this pulls it back to the same left edge as everything
   below it. */
.hero__inner--start .breadcrumb {
    justify-content: flex-start;
    margin-bottom: var(--space-3);
}

/* ── The bar over the grid: count, active filters, sort, filter toggle ── */
.result-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
}

.result-tools__count {
    margin: 0;
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
}

.result-tools__count strong {
    color: var(--v2-text);
    font-size: var(--text-md);
    font-weight: 800;
}

/* Pushed to the right of the bar, and last in the source, so the count and
   the chips keep the reading order they have on the page. */
.result-tools__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
}

.active-filters--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
}

.sort-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sort-form__label {
    color: var(--v2-text-muted);
    font-size: var(--text-meta);
    font-weight: 600;
    white-space: nowrap;
}

/* The chevron is drawn on the wrapper because a <select> cannot carry a
   pseudo-element, and appearance:none removes the platform arrow. */
.sort-form__control {
    position: relative;
    display: flex;
    align-items: center;
}

.sort-form__control::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--space-3);
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid var(--v2-text-muted);
    border-block-end: 2px solid var(--v2-text-muted);
    transform: translateY(-25%) rotate(45deg);
    pointer-events: none;
}

.sort-form__control select {
    appearance: none;
    min-height: var(--control-sm);
    padding: 0 var(--space-8) 0 var(--space-4);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius-control);
    background: var(--v2-surface);
    color: var(--v2-text);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* Removed by script once change-to-submit is wired. Without JavaScript it
   stays, because a sort control you cannot apply is not a control. */
.sort-form__submit.is-redundant {
    display: none;
}

.result-tools__filter {
    min-height: var(--control-sm);
    padding-inline: var(--space-4);
    font-size: var(--text-sm);
}

/* ── The filter panel ──
   Every control here is a query parameter the page already binds. It sits
   under the bar rather than in a rail: this page is a single destination, so
   there are at most a handful of tours and a permanent 280px sidebar would
   cost more width than the filters are worth. */
.filter-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    align-items: end;
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-panel);
    background: var(--v2-surface-alt);
}

.filter-panel[hidden] {
    display: none;
}

.filter-panel__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.filter-panel__field select,
.filter-panel__field input {
    min-height: var(--control-input);
    padding-inline: var(--space-3);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius-control);
    background: var(--v2-surface);
    color: var(--v2-text);
    font-size: var(--text-sm);
}

.filter-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ── Explore band ──
   Full-bleed photograph with the destination's own description on it. The
   reference floats a play button here; there is no video behind a destination
   and no field to hold one, so the band offers the tours instead. */
.explore-band {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: clamp(3rem, 7vw, 5rem) var(--gutter);
    text-align: center;
    color: var(--v2-white);
    /* Longhands rather than the shorthand, so a destination whose ImageUrl
       points at a missing file degrades to solid navy instead of a washed-out
       gradient over white. */
    background-color: var(--v2-navy-950);
    background-image:
        linear-gradient(180deg, rgba(10, 29, 48, 0.78) 0%, rgba(10, 29, 48, 0.86) 100%),
        var(--explore-image, url("/images/banner.webp"));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.explore-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    width: min(var(--v2-width), 46rem);
}

.explore-band .v2-title {
    margin: 0;
    color: var(--v2-white);
}

.explore-band__copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

/* The band is navy, where royal-600 measures 2.90:1 against the ground and
   fails WCAG 1.4.11. Same white ring the CTA band and footer already use. */
.explore-band :focus-visible {
    outline-color: var(--focus-ring-color-dark);
}

@media (max-width: 991.98px) {
    .result-tools__controls {
        margin-inline-start: 0;
        width: 100%;
    }

    .sort-form {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sort-form__control {
        flex: 1 1 auto;
    }

    .sort-form__control select {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .explore-band {
        min-height: 260px;
    }

    .filter-panel {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Four figures across the explore band, split by hairlines. Carries over from
   the metric strip this band replaced — same shape, now on the photograph. */
.explore-band__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--space-4);
    width: 100%;
    margin: 0;
}

.explore-band__metrics > div + div {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.24);
    padding-inline-start: var(--space-4);
}

.explore-band__metrics dt {
    color: rgba(255, 255, 255, 0.76);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.explore-band__metrics dd {
    margin: var(--space-1) 0 0;
    color: var(--v2-white);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--text-xl);
    font-weight: 800;
}

@media (max-width: 575.98px) {
    /* Two per row on a phone; the vertical rule would then divide the wrong
       pairs, so it comes off and the gap does the separating. */
    .explore-band__metrics > div + div {
        border-inline-start: 0;
        padding-inline-start: 0;
    }
}

/* ── Tour fact strip ─────────────────────────────────────────
   Auto-fitting columns rather than a fixed count: the strip carries
   between one and nine cells depending on what the operator answered,
   and a fixed grid would leave holes on a sparse tour. */
.fact-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--v2-fact-cell-min), 1fr));
    gap: var(--v2-fact-gap);
    margin: 0 0 var(--space-2);
    padding: 0 0 var(--space-6);
    border: 0;
    border-bottom: 1px solid var(--v2-line);
    border-radius: 0;
    background: transparent;
}

.fact-strip__cell dt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--v2-text-muted);
}

.fact-strip__cell dd {
    margin: var(--space-1) 0 0;
    font-weight: 700;
    color: var(--v2-text);
}

/* ── Wishlist toggle ── */
.wishlist-toggle {
    margin: 0;
}

.wishlist-toggle--overlay {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 2;
}

.wishlist-toggle--icon {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 3;
}

.wishlist-toggle__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.625rem;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--v2-radius);
    background: rgb(255 255 255 / 0.94);
    color: var(--v2-text);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--v2-shadow-sm);
}

.wishlist-toggle--icon .wishlist-toggle__button {
    width: 2.5rem;
    height: 2.5rem;
    min-height: 0;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.wishlist-toggle.is-saved .wishlist-toggle__button,
.wishlist-toggle__button[aria-pressed="true"] {
    color: var(--v2-sale);
}

.wishlist-toggle__button .bi {
    font-size: 1.05rem;
    line-height: 1;
}

/* ── Review board (sort / filter / load more) ── */
.review-board {
    display: grid;
    grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
}

.review-summary h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-md);
}

.review-summary__score {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.review-summary__score strong {
    font-size: var(--text-4xl);
    font-weight: 800;
    letter-spacing: var(--tracking-h1);
}

.review-summary__of {
    color: var(--v2-text-muted);
    font-size: var(--text-xl);
    font-weight: 600;
}

.review-summary__count {
    display: block;
    margin: var(--space-2) 0 var(--space-4);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
}

.review-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.review-toolbar__count {
    margin: 0;
    flex: 1;
    font-size: var(--text-lg);
    font-weight: 800;
}

.review-toolbar__control select {
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    color: var(--v2-text);
    font-size: var(--text-sm);
    font-weight: 600;
}

.review-list {
    display: grid;
    gap: var(--space-4);
}

.review-empty {
    margin: var(--space-4) 0 0;
    color: var(--v2-text-muted);
}

@media (max-width: 991.98px) {
    .review-board {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .detail-title {
        flex-direction: column;
    }
}

/* ── Highlights ── */
.highlight-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.highlight-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.highlight-list .bi {
    color: var(--v2-primary);
    flex-shrink: 0;
}

/* Line clamp only — the text is always present, just not always painted. */
.rich-copy.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Itinerary accordion ── */
.itinerary-accordion { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.itinerary-accordion__step {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    background: var(--v2-surface);
}

.itinerary-accordion__step > summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.itinerary-accordion__step > summary::-webkit-details-marker { display: none; }

.itinerary-accordion__marker {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--v2-radius-pill);
    background: var(--v2-band);
    color: var(--v2-primary);
    flex-shrink: 0;
}

.itinerary-accordion__label { color: var(--v2-text-muted); }
.itinerary-accordion__title { flex: 1; }

.itinerary-accordion__step > summary .bi { margin-inline-start: auto; transition: transform 150ms ease; }
.itinerary-accordion__step[open] > summary .bi { transform: rotate(180deg); }
.itinerary-accordion__step > p { margin: 0; padding: 0 var(--space-4) var(--space-4); }

@media (prefers-reduced-motion: reduce) {
    .itinerary-accordion__step > summary .bi { transition: none; }
}

/* ── Score breakdown ── */
.score-breakdown { width: 100%; border-collapse: collapse; }
.score-breakdown th { text-align: start; font-weight: 400; color: var(--v2-text-muted); }
.score-breakdown__track {
    display: block;
    block-size: var(--v2-score-bar-height);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-band);
}
.score-breakdown__fill {
    display: block;
    block-size: 100%;
    border-radius: var(--v2-radius-pill);
    background: var(--v2-primary);
}
.score-breakdown__value { text-align: end; font-weight: 600; }

.review-card.is-hidden { display: none; }

/* ── Price rail discount ── */
.detail-summary__was {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    color: var(--v2-text-muted);
}

.price-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-sale);
    color: var(--v2-white);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ── Support card ── */
.support-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--v2-radius-lg);
    background: var(--v2-band);
}

/* ── Topic chips ── */
.topic-chips {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.topic-chip {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-surface);
    color: var(--v2-text);
    text-decoration: none;
}

.topic-chip:hover,
.topic-chip:focus-visible { border-color: var(--v2-primary); color: var(--v2-primary); }

/* ── Global search strip ──
   Tinted band below the fixed header (non-home). White 52px control
   bar, 6px radius. Preferred date is carried in the query string for
   checkout prefill — it is not an availability filter. */
/* No --nav-h override here. Pinning it to the artboards' 84px desktop bar
   overrode the height site.js actually measures, and because the rule sits on
   <body> it beat the :root value for everything inside the page. On a phone
   the bar wraps to two rows (~119px), so the body spacer and the sticky
   offsets under it were 36px short and the top of this band sat behind the
   header. --nav-h is a measurement; nothing may hardcode it. */
.global-search--band {
    background: var(--v2-navy-850);
    padding: 1.375rem var(--gutter);
}

.global-search--embed {
    background: transparent;
    padding: 0;
}

.global-search__form {
    max-width: var(--v2-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr 1.05fr auto;
    align-items: center;
    gap: 0;
    min-height: var(--control-height);
    padding: 0.4375rem;
    background: var(--v2-white);
    border-radius: var(--v2-radius-card);
    box-shadow: var(--v2-shadow-xl);
}

.global-search--embed .global-search__form {
    box-shadow: 0 18px 44px rgba(9, 20, 35, 0.24);
}

.global-search__field {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    min-height: var(--control-height);
    min-width: 0;
    padding: 0 var(--space-4);
    border-right: 1px solid var(--v2-line);
    background: transparent;
    border-radius: 0;
    color: var(--v2-text);
}

.global-search__field--grow { flex: 2 1 14rem; }

.global-search__field i { color: var(--v2-text-muted); flex-shrink: 0; }

.global-search__field select,
.global-search__field input {
    flex: 1;
    border: 0;
    background: transparent;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
    appearance: none;
}

.global-search__field select:focus,
.global-search__field input:focus {
    outline: none;
}

.global-search__submit {
    flex: 0 0 auto;
    height: var(--control-height);
    padding: 0 2rem;
    white-space: nowrap;
    border-radius: var(--v2-radius);
}

@media (max-width: 991.98px) {
    .global-search__form {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .global-search__field {
        border-right: 0;
        border-bottom: 1px solid var(--v2-line);
        min-height: var(--control-height);
    }

    .global-search__field:last-of-type {
        border-bottom: 0;
    }

    .global-search__submit {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .global-search__form { flex-direction: column; }
    .global-search__submit { width: 100%; }
}

/* ── Sale badge on listing cards ── */
.card-media__sale {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-sale);
    color: var(--v2-white);
    font-size: var(--text-sm);
    font-weight: 700;
}

.card-media__badge + .card-media__sale,
.card-media:has(.card-media__badge) .card-media__sale {
    top: auto;
    bottom: var(--space-3);
}

.listing-card__was {
    display: block;
    text-decoration: line-through;
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* ── Contact page ── */
.contact-layout {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

@media (max-width: 991px) {
    .contact-layout { grid-template-columns: 1fr; }
}

.contact-info-list {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);
}

.contact-info-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.contact-info-list i {
    font-size: 1.25rem;
    color: var(--v2-primary);
    margin-top: 0.15rem;
}

.contact-info-list p { margin: var(--space-1) 0 0; }

.contact-form__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.contact-form__note {
    margin: 0;
    color: var(--v2-sale, #c0392b);
    font-size: var(--text-sm);
}

.form-grid--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 575px) {
    .form-grid--2 { grid-template-columns: 1fr; }
}

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

.page-actions--end { justify-content: flex-end; }

/* ── Checkout / request summary ── */
@media (min-width: 992px) {
    .checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--space-6);
        align-items: start;
    }

    .checkout-layout .checkout-layout__summary { order: -1; }
}

.request-summary__note {
    margin: var(--space-2) 0 0;
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
}

/* ── Destination count pills ── */
.dest-count-pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.dest-count-pill {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-white);
    color: var(--v2-text);
    text-decoration: none;
    overflow: hidden;
    min-height: 40px;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.dest-count-pill:hover,
.dest-count-pill:focus-visible {
    border-color: var(--v2-primary);
    box-shadow: var(--v2-shadow-sm);
}

.dest-count-pill__n {
    display: grid;
    place-items: center;
    min-width: 2.5rem;
    padding: 0 var(--space-2);
    background: var(--v2-band);
    font-weight: 700;
    font-size: var(--text-sm);
    border-right: 1px solid var(--v2-line);
}

.dest-count-pill__label {
    display: grid;
    place-items: center;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
}

/* ============================================================
   STAGE 4 — HOME marketplace sections
   Artboard: export/DayGo Home.dc.html
   ============================================================ */

.section--home-hero {
    padding-top: 0;
    padding-bottom: 0;
}

.home-hero {
    min-height: 35rem;
    justify-content: center;
    text-align: start;
    padding: var(--space-16) var(--gutter);
}

.home-hero.hero--slider::after {
    background: var(--v2-hero-scrim);
}

.home-hero__inner {
    width: 100%;
    max-width: var(--v2-width);
    margin-inline: auto;
    align-items: stretch;
    gap: 2.125rem;
}

.home-hero__eyebrow {
    align-self: start;
    margin: 0;
    color: var(--v2-white);
}

.home-hero__title {
    max-width: 45rem;
    margin: 0;
    color: var(--v2-white);
    font-size: var(--text-display);
    font-weight: 800;
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-h1);
}

.home-hero__copy {
    max-width: 32rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--text-lg);
    line-height: 1.55;
}

.home-hero .global-search {
    width: 100%;
}

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

.home-stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-inline-end: 2.375rem;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.28);
}

.home-stats__item:last-child {
    padding-inline-end: 0;
    border-inline-end: 0;
}

.home-stats__value {
    color: var(--v2-white);
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1.1;
}

.home-stats__label {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
}

.home-section {
    padding-block: var(--section-y) 0;
}

.home-section--support {
    padding-block-start: var(--section-y-tight);
}

.home-section--cta {
    padding-block: var(--section-y);
}

.home-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.home-section__head--solo {
    margin-bottom: var(--space-8);
}

.home-section__lede {
    margin: var(--space-2) 0 0;
    color: var(--v2-text-muted);
    font-size: var(--text-base);
}

.home-section__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--v2-link);
    text-decoration: none;
    white-space: nowrap;
}

.home-section__link:hover {
    color: var(--v2-primary-hover);
}

.home-dest-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-dest-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: inherit;
    text-decoration: none;
}

.home-dest-card__media {
    display: block;
    overflow: hidden;
    border-radius: var(--v2-radius-card);
    aspect-ratio: 16 / 10;
    background: var(--v2-band);
}

.home-dest-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration) var(--ease);
}

.home-dest-card:hover .home-dest-card__media img {
    transform: scale(1.04);
}

.home-dest-card__name {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--v2-text);
}

.home-dest-card__count {
    font-size: var(--text-xs);
    color: var(--v2-text-muted);
}

.home-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 1.875rem;
}

.home-filter-pill {
    height: var(--control-sm);
    padding: 0 1.125rem;
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius);
    background: var(--v2-white);
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.home-filter-pill.is-active,
.home-filter-pill:hover {
    border-color: var(--v2-primary);
    background: var(--v2-primary);
    color: var(--v2-white);
}

.home-tour-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem 1.5rem;
}

.home-tour-grid__item[hidden] {
    display: none !important;
}

/* Home category tiles — the Home artboard's bento: a five-column, two-row
   mosaic where the first and fourth tiles run the full height. The handler
   takes up to eight categories, so the mosaic is chosen by how many actually
   arrived (5–8); any other count keeps the plain grid rather than leaving
   holes. Below desktop the tiles become a uniform grid, then a swipe rail. */
.home-categories > ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
}

.home-categories li {
    min-inline-size: 0;
}

.home-categories .category-tile {
    position: relative;
    display: block;
    gap: 0;
    border-radius: var(--v2-radius-card);
    outline-offset: var(--focus-ring-offset);
}

.home-categories .category-tile__media {
    aspect-ratio: 4 / 5;
    border: 0;
    border-radius: var(--v2-radius-card);
    box-shadow: none;
    isolation: isolate;
}

.home-categories .category-tile__media img {
    transition: transform calc(var(--duration) * 2) var(--ease);
}

/* Two stacked scrims: gradients cannot be transitioned, so the deeper one
   fades in over the resting one. */
.home-categories .category-tile__media::before,
.home-categories .category-tile__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.home-categories .category-tile__media::before {
    background: var(--v2-cat-scrim);
}

.home-categories .category-tile__media::after {
    background: var(--v2-cat-scrim-hover);
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

.home-categories .category-tile__media--fallback {
    background: var(--v2-cat-fallback);
}

.home-categories .category-tile__media--fallback .category-tile__initial {
    font-size: calc(var(--text-5xl) * 2);
    color: var(--v2-cat-initial);
}

.home-categories .category-tile__media--fallback i {
    font-size: var(--text-4xl);
    color: var(--v2-cat-icon);
}

.home-categories .category-tile__label {
    position: absolute;
    inset-inline: var(--space-5);
    bottom: var(--space-4);
    z-index: 2;
    margin: 0;
    min-block-size: 0;
    color: var(--v2-white);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-title);
    text-align: start;
    text-shadow: var(--v2-cat-label-shadow);
    hyphens: auto;
    overflow-wrap: break-word;
}

.home-categories .category-tile__cue {
    position: absolute;
    inset-inline-end: var(--space-4);
    top: var(--space-4);
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: var(--v2-cat-cue);
    block-size: var(--v2-cat-cue);
    border: 1px solid var(--v2-cat-cue-edge);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-cat-cue-fill);
    color: var(--v2-white);
    font-size: var(--text-base);
    transition: opacity var(--duration) var(--ease),
                transform var(--duration) var(--ease),
                background-color var(--duration) var(--ease);
}

.home-categories .category-tile__cue i {
    line-height: 1;
}

.home-categories .category-tile:hover .category-tile__media img,
.home-categories .category-tile:focus-visible .category-tile__media img {
    transform: scale(var(--v2-cat-zoom));
}

.home-categories .category-tile:hover .category-tile__media::after,
.home-categories .category-tile:focus-visible .category-tile__media::after {
    opacity: 1;
}

.home-categories .category-tile:hover .category-tile__cue,
.home-categories .category-tile:focus-visible .category-tile__cue {
    background: var(--v2-primary);
    border-color: var(--v2-primary);
}

/* On a pointer that can hover the cue waits for intent; on touch it stays
   visible, since there is no hover to reveal it. */
@media (hover: hover) {
    .home-categories .category-tile__cue {
        opacity: 0;
        transform: translate(calc(var(--space-2) * -1), var(--space-2));
    }

    .home-categories .category-tile:hover .category-tile__cue,
    .home-categories .category-tile:focus-visible .category-tile__cue {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 1200px) {
    .home-categories > ul:has(> li:nth-child(5):last-child),
    .home-categories > ul:has(> li:nth-child(6):last-child),
    .home-categories > ul:has(> li:nth-child(7):last-child),
    .home-categories > ul:has(> li:nth-child(8):last-child) {
        grid-auto-rows: var(--v2-cat-row);
        grid-auto-flow: dense;
    }

    .home-categories > ul:has(> li:nth-child(5):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-categories > ul:has(> li:nth-child(8):last-child) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .home-categories > ul:has(> li:nth-child(5):last-child) .category-tile__media,
    .home-categories > ul:has(> li:nth-child(6):last-child) .category-tile__media,
    .home-categories > ul:has(> li:nth-child(7):last-child) .category-tile__media,
    .home-categories > ul:has(> li:nth-child(5):last-child) :is(.category-tile, .category-tile__media),
    .home-categories > ul:has(> li:nth-child(6):last-child) :is(.category-tile, .category-tile__media),
    .home-categories > ul:has(> li:nth-child(7):last-child) :is(.category-tile, .category-tile__media),
    .home-categories > ul:has(> li:nth-child(8):last-child) :is(.category-tile, .category-tile__media) {
        block-size: 100%;
    }

    .home-categories > ul:has(> li:nth-child(5):last-child) .category-tile__media,
    .home-categories > ul:has(> li:nth-child(6):last-child) .category-tile__media,
    .home-categories > ul:has(> li:nth-child(7):last-child) .category-tile__media,
    .home-categories > ul:has(> li:nth-child(8):last-child) .category-tile__media {
        aspect-ratio: auto;
    }

    /* The tall tiles: the first always, the fourth when the count needs a
       second one to fill the two rows (6 in four columns, 8 in five). */
    .home-categories > ul:has(> li:nth-child(5):last-child) > li:first-child,
    .home-categories > ul:has(> li:nth-child(6):last-child) > li:first-child,
    .home-categories > ul:has(> li:nth-child(6):last-child) > li:nth-child(4),
    .home-categories > ul:has(> li:nth-child(7):last-child) > li:first-child,
    .home-categories > ul:has(> li:nth-child(8):last-child) > li:first-child,
    .home-categories > ul:has(> li:nth-child(8):last-child) > li:nth-child(4) {
        grid-row: span 2;
    }

    .home-categories > ul:has(> li:nth-child(5)) > li:first-child .category-tile__label,
    .home-categories > ul:has(> li:nth-child(6):last-child) > li:nth-child(4) .category-tile__label,
    .home-categories > ul:has(> li:nth-child(8):last-child) > li:nth-child(4) .category-tile__label {
        font-size: var(--text-xl);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-categories .category-tile__media,
    .home-categories .category-tile__media img,
    .home-categories .category-tile__cue {
        transition: none;
    }

    .home-categories .category-tile:hover .category-tile__media,
    .home-categories .category-tile:hover .category-tile__media img,
    .home-categories .category-tile:focus-visible .category-tile__media img {
        transform: none;
    }
}

.home-why {
    padding-top: 2.75rem;
    border-top: 1px solid var(--v2-line);
}

.home-why .v2-title {
    margin: 0 0 2.125rem;
}

.home-why__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-why__icon {
    display: grid;
    place-items: center;
    width: 2.875rem;
    height: 2.875rem;
    margin-bottom: var(--space-4);
    border-radius: var(--v2-radius-card);
    background: var(--v2-band);
    color: var(--v2-primary);
    font-size: var(--text-xl);
}

.home-why__item h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-md);
    font-weight: 700;
}

.home-why__item p {
    margin: 0;
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.home-steps .v2-title {
    margin: 0 0 var(--space-8);
}

.home-steps__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--v2-step-min)), 1fr));
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-steps__item {
    min-width: 0;
}

.home-steps__num {
    display: grid;
    place-items: center;
    width: var(--control-md);
    height: var(--control-md);
    margin-bottom: var(--space-4);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-primary);
    color: var(--v2-white);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1;
}

.home-steps__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-md);
    font-weight: 700;
    overflow-wrap: break-word;
    hyphens: auto;
}

.home-steps__title a {
    color: var(--v2-text);
    text-decoration: underline;
    text-decoration-color: var(--v2-line-strong);
    text-underline-offset: var(--space-1);
}

.home-steps__title a:hover,
.home-steps__title a:focus-visible {
    color: var(--v2-link);
    text-decoration-color: currentColor;
}

.home-steps__copy {
    margin: 0;
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    overflow-wrap: break-word;
}

.home-testimonial-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * var(--space-6)) / 3);
    gap: var(--space-6);
}

.home-testimonial {
    padding: var(--space-6);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-card);
    background: var(--v2-white);
    box-shadow: var(--v2-shadow-sm);
}

.home-testimonial__stars {
    margin: 0 0 var(--space-3);
    color: var(--v2-gold);
    font-size: var(--text-base);
    letter-spacing: 0.08em;
}

.home-testimonial__quote {
    margin: 0 0 var(--space-5);
    color: var(--v2-text-soft);
    font-size: var(--text-md);
    line-height: 1.65;
}

.home-testimonial__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.home-testimonial__avatar {
    display: grid;
    place-items: center;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: var(--v2-radius-pill);
    background: var(--v2-band);
    color: var(--v2-primary);
    font-size: var(--text-md);
    font-weight: 800;
}

.home-testimonial__meta strong {
    display: block;
    font-size: var(--text-sm);
}

.home-testimonial__meta span {
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
}

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

.home-blog-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-8);
    border: 1px dashed var(--v2-line-strong);
    border-radius: var(--v2-radius-card);
    background: var(--v2-surface-alt);
}

.home-blog-empty p {
    margin: 0;
    color: var(--v2-text-muted);
    font-size: var(--text-md);
}

.story-card__media {
    position: relative;
}

.story-card__date {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    z-index: 1;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--v2-radius-xs);
    background: rgba(9, 20, 35, 0.72);
    color: var(--v2-white);
    font-size: var(--text-xs);
    font-weight: 600;
}

.story-card__category {
    margin: 0 0 var(--space-2);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

@media (max-width: 1199.98px) {
    .home-dest-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .home-categories .category-tile__media {
        aspect-ratio: 1 / 1;
    }

    .home-categories .category-tile__label {
        inset-inline: var(--space-4);
        font-size: var(--text-md);
    }

    .home-categories > ul:has(> li:nth-child(3):last-child),
    .home-categories > ul:has(> li:nth-child(5):last-child),
    .home-categories > ul:has(> li:nth-child(6):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .home-testimonial-rail {
        grid-auto-columns: calc((100% - var(--space-6)) / 2);
    }
}

@media (max-width: 767.98px) {
    .home-hero {
        min-height: 0;
        padding-block: var(--space-12);
    }

    .home-stats {
        gap: var(--space-5);
    }

    .home-stats__item {
        padding-inline-end: var(--space-5);
    }

    .home-dest-grid,
    .home-tour-grid,
    .home-why__grid,
    .home-blog-grid {
        grid-template-columns: 1fr;
    }

    .home-testimonial-rail {
        grid-auto-columns: 88%;
    }

    /* Eight stacked portrait tiles would run several screens; a swipe rail
       keeps the section to one, and the next tile peeking in says "scroll". */
    .home-categories > ul {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: var(--v2-cat-rail-item);
        gap: var(--space-4);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        padding-block-end: var(--space-2);
        scrollbar-width: thin;
    }

    .home-categories > ul > li {
        scroll-snap-align: start;
    }

    .home-categories .category-tile__media {
        aspect-ratio: 4 / 5;
    }

    .contact-band {
        padding: var(--space-6);
    }
}

/* ── Region page (`/Destinations/Region/{region}`) — Country artboard ── */

.region-section {
    padding-block: var(--space-10) 0;
}

.region-section--support {
    padding-block-start: var(--space-12);
}

.region-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.region-toolbar__filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.region-toolbar__count {
    font-size: var(--text-md);
    font-weight: 800;
    color: var(--v2-text);
}

.region-toolbar__chips {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.region-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--v2-text);
    text-decoration: none;
    cursor: pointer;
}

.region-chip:hover {
    color: var(--v2-primary);
}

.region-chip--active {
    color: var(--v2-text);
}

.region-chip--active:hover {
    color: var(--v2-sale);
}

.region-chip--active i {
    color: var(--v2-sale);
    font-size: 0.75rem;
}

.region-toolbar__sort {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.region-toolbar__sort-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--v2-text-muted);
}

.region-toolbar__sort-select {
    height: 2.625rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius-control);
    background: var(--v2-surface);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--v2-text);
    cursor: pointer;
}

.region-tour-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
}

.region-pager {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-10);
    flex-wrap: wrap;
}

.region-pager__btn {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius-control);
    background: var(--v2-surface);
    color: var(--v2-text-muted);
    font-size: var(--text-md);
    font-weight: 600;
    text-decoration: none;
}

.region-pager__btn:hover {
    border-color: var(--v2-primary);
    background: var(--v2-band-strong);
    color: var(--v2-text);
}

.region-pager__btn.is-current {
    background: var(--v2-primary);
    border-color: var(--v2-primary);
    color: var(--v2-white);
}

.region-pager__btn.is-disabled {
    background: var(--v2-surface-alt);
    opacity: 0.7;
    pointer-events: none;
}

.region-explore {
    position: relative;
    margin-top: var(--space-12);
    min-height: 28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--v2-navy-950);
}

.region-explore__media {
    position: absolute;
    inset: 0;
    background-image: var(--region-explore-image);
    background-size: cover;
    background-position: center;
}

.region-explore__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--v2-navy-950) 72%, transparent) 0%,
        color-mix(in srgb, var(--v2-navy-950) 62%, transparent) 100%);
}

.region-explore__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-block: var(--space-12);
}

.region-explore__title {
    margin: 0 0 var(--space-5);
    color: var(--v2-white);
    font-size: clamp(1.75rem, 3vw, 2.125rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.region-explore__copy {
    margin: 0 auto;
    max-width: 42rem;
    color: color-mix(in srgb, var(--v2-white) 84%, transparent);
    font-size: var(--text-md);
    line-height: 1.7;
}

@media (max-width: 1199.98px) {
    .region-tour-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .region-tour-grid {
        grid-template-columns: 1fr;
    }

    .region-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .region-toolbar__sort {
        justify-content: space-between;
    }

    .region-explore {
        min-height: 22rem;
    }
}

/* ── Destination (City) page — Stage 7 ── */

.city-hero__crumb {
    margin-bottom: var(--space-4);
}

.city-about {
    padding-block: var(--space-12) 0;
}

.city-about__panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--v2-radius-card);
    overflow: hidden;
}

.city-about__media {
    min-height: 25rem;
    background-image: var(--city-about-image);
    background-size: cover;
    background-position: center;
}

.city-about__body {
    background: var(--v2-band);
    padding: var(--space-11) var(--space-11);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.city-about__title {
    margin: 0 0 var(--space-5);
    font-size: clamp(1.5rem, 2.4vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--v2-text);
}

.city-about__copy {
    margin: 0 0 var(--space-6);
    font-size: var(--text-sm);
    line-height: 1.78;
    color: var(--v2-text-muted);
}

.city-about__full[hidden] {
    display: none;
}

.city-about__more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.city-about.is-expanded [data-about-preview] {
    display: none;
}

.city-sights {
    margin-top: var(--space-12);
    padding-block: var(--space-12);
    background: var(--v2-navy-950);
    position: relative;
    overflow: hidden;
}

.city-sights__heading {
    margin-bottom: var(--space-7);
}

.city-sights__title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.6rem, 2.8vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--v2-white);
}

.city-sights__copy {
    margin: 0;
    font-size: var(--text-md);
    color: color-mix(in srgb, var(--v2-white) 68%, transparent);
}

.city-sights__frame {
    position: relative;
}

.city-sights__rail.atlas-rail {
    gap: var(--space-5);
}

.city-sights__tile {
    flex: 0 0 calc((100% - 4 * var(--space-5)) / 5);
    min-width: 11rem;
}

.city-sights__card {
    display: block;
    background: var(--v2-surface);
    border-radius: var(--v2-radius-card);
    overflow: hidden;
    color: var(--v2-text);
    text-decoration: none;
}

.city-sights__card:hover {
    color: var(--v2-text);
}

.city-sights__img {
    display: block;
    height: 9.375rem;
    position: relative;
    overflow: hidden;
    background: var(--v2-surface-alt);
}

.city-sights__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.city-sights__tile.is-imageless .city-sights__img {
    background: var(--v2-band);
}

.city-sights__meta {
    display: block;
    padding: var(--space-4) var(--space-4) var(--space-4);
}

.city-sights__name {
    display: block;
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.city-sights__count {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--v2-text-muted);
}

.rail-dots--on-dark .rail-dot::before {
    background: color-mix(in srgb, var(--v2-white) 34%, transparent);
}

.rail-dots--on-dark .rail-dot.is-active::before {
    background: var(--v2-white);
}

@media (max-width: 991.98px) {
    .city-about__panel {
        grid-template-columns: 1fr;
    }

    .city-about__media {
        min-height: 16rem;
    }

    .city-sights__tile {
        flex: 0 0 calc((100% - 2 * var(--space-5)) / 3);
    }
}

@media (max-width: 767.98px) {
    .city-about__body {
        padding: var(--space-8) var(--space-6);
    }

    .city-sights__tile {
        flex: 0 0 70%;
    }
}

/* ============================================================
   STAGE 8 — All Tours (`/Excursions`)
   ============================================================ */

.tours-list__title {
    margin: 0 0 var(--space-8);
    font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

.tours-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.tours-toolbar__lead {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.tours-toolbar__count {
    margin: 0;
    font-size: var(--text-md);
}

.tours-toolbar__count strong {
    font-weight: 800;
}

.tours-toolbar__controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.tours-toolbar__sort {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 2.625rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-surface);
}

.tours-toolbar__sort-label {
    margin: 0;
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.tours-toolbar__sort-select {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--v2-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

.tours-view-toggle,
.tours-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 2.625rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-surface);
    color: var(--v2-text);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.tours-view-toggle:hover,
.tours-filter-toggle:hover {
    border-color: var(--v2-primary);
    background: var(--v2-band-strong);
    color: var(--v2-text);
}

.tours-view-toggle.is-active {
    border-color: var(--v2-primary);
    background: var(--v2-band-strong);
    color: var(--v2-primary);
}

.tours-filter-toggle__count {
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 var(--space-2);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-primary);
    color: var(--v2-white);
    font-size: var(--text-xs);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.active-filters--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.active-filters--inline .active-filter {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--v2-text);
    font-weight: 600;
}

.active-filters--inline .active-filter:hover {
    color: var(--v2-sale);
}

.tours-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
}

.tours-grid .listing-card .card-media {
    height: auto;
    margin-bottom: 0;
    border-radius: 0;
    overflow: hidden;
}

.tours-grid .listing-card .card-media img {
    height: auto;
    aspect-ratio: 3 / 2;
}

.tours-grid .listing-card__footer {
    margin-top: auto;
}

.tours-grid .listing-card__summary {
    display: none;
}

.listing-card__meta-line {
    min-height: calc(var(--text-sm) * var(--leading-normal));
    margin: 0 0 var(--space-2);
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: var(--leading-normal);
}

.listing-card__price--from {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.listing-card__from {
    color: var(--v2-sale);
    font-size: var(--text-sm);
    font-weight: 600;
}

.listing-card__price--from strong {
    color: var(--v2-sale);
    font-size: var(--text-xl);
    font-weight: 800;
}

.listing-card__price--from .listing-card__was {
    display: inline;
    color: var(--v2-text-muted);
}

.listing-card--row .listing-card__actions-price {
    text-align: end;
    margin-bottom: auto;
}

.listing-card--row .listing-card__actions .v2-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.card-media__category {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-3);
    z-index: 1;
    color: var(--v2-white);
    font-size: var(--text-sm);
    font-weight: 600;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(9, 20, 35, 0.45);
}

.card-media__badge--popular {
    background: var(--v2-primary);
    color: var(--v2-white);
    border-radius: var(--v2-radius-sm);
    box-shadow: none;
}

.card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(9, 20, 35, 0.28) 0%,
        rgba(9, 20, 35, 0) 42%,
        rgba(9, 20, 35, 0.62) 100%);
    pointer-events: none;
    opacity: 0;
}

.listing-card--row .card-media::after {
    opacity: 1;
}

/* Grid tour card — photo, facts, title, from-price. The whole card is one link.
   The wishlist control sits above that link. Stars stay off until a tour has
   real reviews. */
.listing-card:not(.listing-card--compact):not(.listing-card--row) {
    position: relative;
    box-shadow: none;
}

.listing-card:not(.listing-card--compact):not(.listing-card--row):hover {
    transform: none;
    box-shadow: var(--v2-shadow-md);
}

.listing-card:not(.listing-card--compact):not(.listing-card--row) .card-media img {
    aspect-ratio: 3 / 2;
}

.listing-card:not(.listing-card--compact):not(.listing-card--row) .listing-card__body {
    padding: var(--space-4);
}

.listing-card:not(.listing-card--compact):not(.listing-card--row) .listing-card__footer {
    border-top: 0;
    padding-top: var(--space-3);
}

.listing-card:not(.listing-card--compact):not(.listing-card--row) .listing-card__link {
    color: inherit;
    text-decoration: none;
}

.listing-card:not(.listing-card--compact):not(.listing-card--row) .listing-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.listing-card:not(.listing-card--compact):not(.listing-card--row):has(.listing-card__link:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.listing-card:not(.listing-card--compact):not(.listing-card--row) .listing-card__link:focus-visible {
    outline: none;
}

.listing-card:not(.listing-card--compact):not(.listing-card--row) .listing-card__from,
.listing-card:not(.listing-card--compact):not(.listing-card--row) .listing-card__price--from strong {
    color: var(--v2-text);
}

.listing-card:not(.listing-card--compact):not(.listing-card--row) .listing-card__from {
    font-weight: 500;
}

.listing-card__per {
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
}

/* Filter drawer — right sheet, all breakpoints */
.filter-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-nav-panel);
    pointer-events: none;
    visibility: hidden;
}

.filter-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.filter-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(9, 20, 35, 0.46);
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

.filter-drawer.is-open .filter-drawer__scrim {
    opacity: 1;
}

.filter-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(25rem, 100%);
    display: flex;
    flex-direction: column;
    background: var(--v2-surface);
    box-shadow: var(--v2-shadow-lg);
    transform: translateX(100%);
    transition: transform var(--duration) var(--ease);
}

.filter-drawer.is-open .filter-drawer__panel {
    transform: none;
}

.filter-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--v2-line);
    flex-shrink: 0;
}

.filter-drawer__head h2 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
}

.filter-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: var(--v2-surface-alt);
    color: var(--v2-text);
    cursor: pointer;
}

.filter-drawer__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.filter-drawer__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-6);
}

.filter-drawer__body .filter-group {
    padding: 0 0 var(--space-8);
    border-bottom: 0;
}

.filter-drawer__actions {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--v2-line);
    flex-shrink: 0;
}

.filter-drawer__actions .v2-button,
.filter-drawer__actions .v2-button-outline {
    flex: 1;
    justify-content: center;
}

.filter-drawer__actions .v2-button {
    flex: 1.4;
}

.filter-option--count {
    justify-content: flex-start;
}

.filter-option__count {
    margin-inline-start: auto;
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
}

.filter-price__value {
    margin: 0 0 var(--space-3);
    color: var(--v2-sale);
    font-size: var(--text-2xl);
    font-weight: 800;
}

.filter-price__slider {
    width: 100%;
    accent-color: var(--v2-primary);
    cursor: pointer;
}

.filter-price__bounds {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
}

.filter-rating {
    display: flex;
    gap: var(--space-2);
}

.filter-rating__option {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-surface);
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}

.filter-rating__option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.filter-rating__option.is-active,
.filter-rating__option:has(input:checked) {
    border-color: var(--v2-primary);
    background: var(--v2-primary);
    color: var(--v2-white);
}

@media (max-width: 1199.98px) {
    .tours-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

@media (max-width: 767.98px) {
    .tours-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tours-toolbar__controls {
        width: 100%;
    }

    .tours-toolbar__sort {
        flex: 1;
    }
}

/* ── Wishlist page (`/Wishlist`) ── */
.wishlist-page__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.wishlist-page__heading-icon {
    font-size: var(--text-3xl);
    color: var(--v2-text);
    line-height: 1;
}

.wishlist-page__title {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
}

.wishlist-page__count {
    margin: 0;
    padding-top: var(--space-2);
    color: var(--v2-text-muted);
    font-size: var(--text-base);
}

.wishlist-list {
    display: flex;
    flex-direction: column;
}

.wishlist-row {
    display: flex;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--v2-line);
}

.wishlist-row:first-child {
    padding-top: 0;
}

.wishlist-row:last-child {
    border-bottom: 0;
}

.wishlist-row__media {
    position: relative;
    flex: 0 0 var(--v2-wishlist-media-w);
    width: var(--v2-wishlist-media-w);
    height: var(--v2-wishlist-media-h);
    border-radius: var(--v2-radius-card);
    overflow: hidden;
    background: var(--v2-mist-100);
}

.wishlist-row__media img,
.wishlist-row__media-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wishlist-row__media-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.wishlist-row__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--v2-navy-950) 26%, transparent) 0%,
        transparent 42%,
        color-mix(in srgb, var(--v2-navy-950) 62%, transparent) 100%);
    pointer-events: none;
}

.wishlist-row__category {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-3);
    z-index: 1;
    color: var(--v2-white);
    font-size: var(--text-sm);
    font-weight: 600;
    pointer-events: none;
}

.wishlist-row__body {
    flex: 1;
    min-width: 0;
    padding-top: var(--space-1);
}

.wishlist-row__meta {
    margin: 0 0 var(--space-2);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.wishlist-row__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
}

.wishlist-row__title a {
    color: var(--v2-text);
}

.wishlist-row__title a:hover {
    color: var(--v2-primary);
}

.wishlist-row__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.wishlist-row__from {
    color: var(--v2-sale);
    font-size: var(--text-sm);
    font-weight: 600;
}

.wishlist-row__price strong {
    color: var(--v2-sale);
    font-size: var(--text-xl);
    font-weight: 800;
}

.wishlist-row__price .listing-card__was {
    display: inline;
}

.wishlist-row__trust {
    margin: 0;
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    font-weight: 500;
}

.wishlist-row__trust--ok {
    color: var(--v2-success);
}

.wishlist-row__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    flex-shrink: 0;
    align-self: stretch;
    padding-top: var(--space-1);
}

.wishlist-row__remove-form {
    margin: 0;
}

.wishlist-row__remove {
    width: 1.875rem;
    height: 1.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--v2-sale-decorative) 35%, var(--v2-white));
    border-radius: var(--v2-radius-pill);
    background: var(--v2-surface);
    color: var(--v2-sale);
    cursor: pointer;
}

.wishlist-row__remove:hover {
    background: var(--v2-sale-tint);
    border-color: var(--v2-sale-decorative);
}

.wishlist-row__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-md);
    white-space: nowrap;
}

.wishlist-empty {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-card);
    padding: var(--space-16) var(--space-10);
    text-align: center;
}

.wishlist-empty__icon {
    display: inline-flex;
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: var(--space-5);
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-radius-pill);
    background: var(--v2-mist-100);
    color: var(--v2-text-muted);
    font-size: var(--text-2xl);
}

.wishlist-empty__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
}

.wishlist-empty__copy {
    margin: 0 0 var(--space-6);
    color: var(--v2-text-muted);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.wishlist-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.wishlist-empty__actions .v2-button,
.wishlist-empty__actions .v2-button-outline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-md);
}

.wishlist-toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-8);
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
    border-radius: var(--v2-radius);
    background: var(--v2-navy-900);
    color: var(--v2-white);
    font-size: var(--text-base);
    font-weight: 600;
    box-shadow: var(--v2-shadow-xl);
    animation: wishlist-toast-in var(--duration) var(--ease);
}

.wishlist-toast__undo {
    border: 0;
    height: 2.125rem;
    padding: 0 var(--space-4);
    border-radius: var(--v2-radius-sm);
    background: color-mix(in srgb, var(--v2-white) 14%, transparent);
    color: var(--v2-white);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}

.wishlist-toast__undo:hover {
    background: color-mix(in srgb, var(--v2-white) 26%, transparent);
}

@keyframes wishlist-toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, var(--space-4));
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 991.98px) {
    .wishlist-row {
        flex-wrap: wrap;
        gap: var(--space-5);
    }

    .wishlist-row__media {
        flex-basis: 100%;
        width: 100%;
        height: auto;
        aspect-ratio: 272 / 190;
    }

    .wishlist-row__actions {
        flex-direction: row-reverse;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .wishlist-empty {
        padding: var(--space-10) var(--space-5);
    }

    .wishlist-toast {
        left: var(--gutter);
        right: var(--gutter);
        transform: none;
        bottom: var(--space-5);
    }

    @keyframes wishlist-toast-in {
        from {
            opacity: 0;
            transform: translateY(var(--space-4));
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ── Cart + Checkout (Stage 11) ── */
.checkout-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 58.75rem;
    margin: 0 auto var(--space-10);
    list-style: none;
    padding: 0;
    position: relative;
}

.checkout-steps__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
}

.checkout-steps__step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 1.375rem;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--v2-line-strong);
    z-index: 0;
}

.checkout-steps__step.is-current,
.checkout-steps__step.is-done {
    color: var(--v2-text);
}

.checkout-steps__step.is-current::before,
.checkout-steps__step.is-done::before {
    background: var(--v2-primary);
}

.checkout-steps__mark {
    position: relative;
    z-index: 1;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-radius-pill);
    border: 2px solid var(--v2-line-strong);
    background: var(--v2-surface);
    font-weight: 700;
}

.checkout-steps__step.is-current .checkout-steps__mark,
.checkout-steps__step.is-done .checkout-steps__mark {
    border-color: var(--v2-primary);
    background: var(--v2-primary);
    color: var(--v2-white);
}

.cart-page__header,
.checkout-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.cart-page__title,
.checkout-page__title {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
}

.cart-page__count {
    margin: 0;
    color: var(--v2-text-muted);
    font-size: var(--text-base);
}

.checkout-page__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--v2-link);
    font-weight: 700;
    font-size: var(--text-base);
}

.checkout-page__back:hover {
    color: var(--v2-primary-hover);
}

.cart-layout,
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
}

.cart-summary__heading,
.checkout-form__heading {
    margin: 0 0 var(--space-5);
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
}

.cart-summary__panel {
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius-card);
    padding: var(--space-6);
}

.cart-line {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--v2-line);
}

.cart-line:first-child {
    padding-top: 0;
}

.cart-line:last-of-type {
    border-bottom: 0;
}

.cart-line__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.cart-line__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    line-height: var(--leading-snug);
}

.cart-line__title a {
    color: var(--v2-text);
}

.cart-line__title a:hover {
    color: var(--v2-primary);
}

.cart-line__price-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    flex-shrink: 0;
}

.cart-line__price {
    font-size: var(--text-lg);
    font-weight: 800;
    white-space: nowrap;
}

.cart-line__remove-form {
    margin: 0;
}

.cart-line__remove {
    width: 1.625rem;
    height: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--v2-radius-pill);
    background: var(--v2-mist-100);
    color: var(--v2-sale);
    cursor: pointer;
}

.cart-line__remove:hover {
    background: var(--v2-sale-tint);
}

.cart-line__rating {
    margin: 0 0 var(--space-2);
}

.cart-line__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
}

.cart-line__unit {
    margin: var(--space-2) 0 0;
    color: var(--v2-text-soft);
    font-size: var(--text-xs);
}

.cart-summary__subtotal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--v2-line);
    margin-top: var(--space-2);
}

.cart-summary__subtotal-label {
    font-size: var(--text-xl);
    font-weight: 800;
}

.cart-summary__subtotal-value {
    text-align: right;
}

.cart-summary__subtotal-value strong {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
}

.cart-summary__taxes {
    display: block;
    margin-top: var(--space-2);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
}

.cart-page__continue-copy {
    margin: 0 0 var(--space-5);
    color: var(--v2-text-soft);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.cart-page__continue .v2-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.cart-empty {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-card);
    background: var(--v2-surface-alt);
}

.cart-empty__icon {
    display: inline-flex;
    font-size: var(--text-4xl);
    color: var(--v2-text-muted);
    margin-bottom: var(--space-4);
}

.cart-empty__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-2xl);
    font-weight: 800;
}

.cart-empty__copy {
    margin: 0 0 var(--space-6);
    color: var(--v2-text-muted);
    font-size: var(--text-base);
}

.checkout-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
}

.checkout-confirm__copy {
    margin: 0 0 var(--space-5);
    color: var(--v2-text-soft);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.checkout-confirm__details {
    margin: 0 0 var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius-card);
}

.checkout-confirm__details > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--v2-line);
}

.checkout-confirm__details > div:last-child {
    border-bottom: 0;
}

.checkout-confirm__details dt {
    margin: 0;
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.checkout-confirm__details dd {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
}

.checkout-done {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto;
    padding: var(--space-12) var(--space-6);
}

.checkout-done__icon {
    margin: 0 0 var(--space-4);
    font-size: var(--text-4xl);
    color: var(--v2-success);
}

.checkout-support {
    margin-top: var(--space-12);
}

@media (max-width: 991.98px) {
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .checkout-layout__summary {
        order: -1;
    }

    .checkout-steps {
        max-width: none;
        margin-bottom: var(--space-8);
    }
}

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

    .checkout-confirm__details > div {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .checkout-steps__step span:last-child {
        font-size: var(--text-xs);
    }
}

/* ── Stage 12 — Blog, Privacy, FAQ, Contact, Error ── */

.blog-page__header,
.privacy-page__header,
.faq-page__header,
.contact-page__header {
    margin-bottom: var(--space-8);
}

.blog-page__header .lede,
.privacy-page__header .lede,
.faq-page__header .lede,
.contact-page__header .lede {
    max-width: 40rem;
}

.article-byline__category {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--v2-radius-pill);
    background: var(--v2-band);
    color: var(--v2-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.article-byline__category:hover,
.article-byline__category:focus-visible {
    color: var(--v2-navy-900);
    background: var(--v2-band-strong);
}

.privacy-page__body {
    max-width: 42rem;
}

.error-page .empty-state-card {
    max-width: 36rem;
    margin-inline: auto;
}

/* REVAMP: home START */
.home-revamp .home-hero__inner {
    gap: var(--space-5);
}

.home-revamp .home-hero__copy {
    line-height: var(--leading-normal);
}

.home-revamp-search {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
    align-items: end;
    gap: var(--space-3);
    width: 100%;
    margin: 0;
    padding: var(--space-4);
    background: var(--v2-white);
    border-radius: var(--v2-radius-card);
    box-shadow: var(--v2-shadow-xl);
}

.home-revamp-search__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.home-revamp-search__field label {
    margin: 0;
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-meta);
    text-transform: uppercase;
}

/* The touch-target rule (three :not()s) outranks a two-class min-height,
   so the keyword input was 44px / 16px while the select stayed on
   --control-input and --text-base. Both controls share one box. */
.home-revamp .home-revamp-search__field select,
.home-revamp .home-revamp-search__field input:not([type="hidden"]) {
    width: 100%;
    height: var(--control-input);
    min-height: var(--control-input);
    margin: 0;
    padding: 0 var(--space-4);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius-control);
    background: var(--v2-surface-alt);
    color: var(--v2-text);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-tight);
}

.home-revamp-search__field input::placeholder {
    color: var(--v2-text-muted);
    font-weight: 500;
}

.home-revamp-search__field select:focus-visible,
.home-revamp-search__field input:focus-visible,
.home-revamp-search__submit:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.home-revamp-search__submit {
    min-height: var(--control-cta);
    padding-inline: var(--space-8);
    white-space: nowrap;
}

.home-revamp.home-section:not(.home-section--cta):not(.home-section--support) {
    padding-block: var(--section-y-tight) 0;
}

.home-revamp.home-revamp-band {
    background: var(--v2-surface-alt);
    padding-block-end: var(--section-y-tight);
}

.home-revamp.home-revamp-band + .home-section.home-revamp {
    padding-block-start: var(--space-8);
}

.home-revamp .home-section__head {
    align-items: flex-end;
    margin-bottom: var(--space-6);
}

.home-revamp .home-section__head .v2-eyebrow,
.home-revamp .home-steps > .v2-eyebrow,
.home-revamp .home-why > .v2-eyebrow,
.home-section--cta .cta-panel .v2-eyebrow {
    margin-bottom: var(--space-2);
}

.home-revamp .home-section__lede {
    max-width: var(--measure);
    line-height: var(--leading-normal);
}

/* Closing panels: the shorter column was vertically centered, so the
   actions sat mid-copy instead of on the heading's top edge. Padding
   on the panel stays even. */
.home-section--support .contact-band__copy,
.home-section--support .contact-band__actions,
.home-section--cta .cta-panel__actions {
    align-self: start;
}

.home-section--cta .cta-panel .v2-copy {
    line-height: var(--leading-normal);
}

.home-revamp .home-dest-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-5);
}

.home-revamp .home-filter-pills {
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.home-revamp .home-tour-grid {
    gap: var(--space-5) var(--space-4);
}

@media (max-width: 1199.98px) {
    .home-revamp .home-dest-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .home-revamp .home-hero {
        padding-block: var(--space-10);
    }

    .home-revamp-search {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .home-revamp-search__submit {
        width: 100%;
    }

    .home-revamp.home-section:not(.home-section--cta):not(.home-section--support) {
        padding-block: var(--space-8) 0;
    }

    .home-revamp.home-revamp-band {
        padding-block-end: var(--space-8);
    }

    .home-revamp .home-dest-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: var(--v2-cat-rail-item);
        gap: var(--space-4);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        padding-block-end: var(--space-2);
    }

    .home-revamp .home-dest-card {
        scroll-snap-align: start;
    }

    /* A short lede left the section link on the right; a long one dropped
       it to the left. Stack the action under the copy so every section
       shares the shell's left edge. */
    .home-revamp .home-section__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-revamp .home-dest-grid,
    .home-revamp .home-categories > ul,
    .home-revamp .home-tour-grid,
    .home-revamp .home-blog-grid,
    .home-revamp .home-why__grid,
    .home-revamp .home-steps__list,
    .home-revamp .home-way,
    .home-revamp .home-regions,
    .home-revamp .home-regions__cols,
    .home-revamp .home-searches {
        min-width: 0;
    }

    .home-revamp .home-way,
    .home-revamp .home-regions,
    .home-revamp .home-searches,
    .home-revamp .home-regions__cols {
        grid-template-columns: 1fr;
    }

    .home-revamp .home-searches__places ul {
        columns: 1;
    }
}

/* Below the desktop density, focused fields must stay at least 16px or
   iOS zooms the page. --text-lg's floor is above that, and it keeps the
   select on the same size as the keyword input. */
@media (max-width: 991.98px) {
    .home-revamp .home-revamp-search__field select,
    .home-revamp .home-revamp-search__field input:not([type="hidden"]) {
        font-size: var(--text-lg);
    }
}

/* Journal cards: a missing image used to leave the title (img alt) on an
   empty band-coloured frame. The media keeps a 4:3 photo frame; the scenic
   fallback sits behind the img so a 404 never opens a blank box. */
.home-revamp .home-blog-grid {
    align-items: start;
}

.home-revamp .story-card {
    height: auto;
}

.home-revamp .story-card__media {
    aspect-ratio: 4 / 3;
    background: var(--v2-band) center / cover no-repeat url("/images/daygo/scenic/stories-fallback-800.webp");
}

.home-revamp .story-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    color: transparent;
}

.home-revamp .story-card__body {
    background: var(--v2-surface);
}

/* Split band: three photo steps beside the why checklist. */
.home-way {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.85fr);
    gap: var(--space-10);
    align-items: start;
}

.home-way .home-steps__item {
    position: relative;
}

.home-way .home-steps__media {
    display: block;
    overflow: hidden;
    margin-bottom: var(--space-4);
    border-radius: var(--v2-radius-card);
    aspect-ratio: 16 / 10;
    background: var(--v2-band);
}

.home-way .home-steps__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-way .home-steps__num {
    position: absolute;
    top: var(--space-3);
    inset-inline-start: var(--space-3);
    margin-bottom: 0;
}

.home-way .home-why {
    padding: var(--space-6);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-card);
    background: var(--v2-surface);
}

.home-way .home-why__photo {
    height: 9rem;
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
    border-radius: var(--v2-radius-card) var(--v2-radius-card) 0 0;
    background: var(--v2-band) center / cover no-repeat url("/images/daygo/scenic/why-panel-1200.webp");
}

.home-way .home-why__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.home-way .home-why__icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: var(--space-2);
    font-size: var(--text-md);
}

/* Region columns plus one photograph. */
.home-regions {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: var(--space-8);
    align-items: stretch;
}

.home-regions__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    align-content: start;
}

.home-regions__col h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-md);
    font-weight: 800;
}

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

.home-regions__col a {
    display: block;
    padding-block: var(--space-2);
    color: var(--v2-text);
    font-weight: 600;
    text-decoration: none;
}

.home-regions__col a:hover,
.home-regions__col a:focus-visible {
    color: var(--v2-link);
}

.home-regions__photo {
    min-height: 18rem;
    border-radius: var(--v2-radius-card);
    background-color: var(--v2-band);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Full-bleed scenic band in place of a promo video. */
.home-scenic {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 22rem;
    margin-top: var(--section-y);
    overflow: hidden;
    color: var(--v2-white);
}

.home-scenic__media {
    position: absolute;
    inset: 0;
    background-color: var(--v2-navy-900);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.home-scenic__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--v2-hero-scrim);
}

.home-scenic__inner {
    position: relative;
    z-index: 1;
    padding-block: var(--space-16);
}

.home-scenic .v2-eyebrow {
    color: var(--v2-sand-300);
}

.home-scenic__title {
    max-width: 18em;
    margin: 0 0 var(--space-6);
    color: var(--v2-white);
    font-size: var(--text-3xl);
}

/* Link columns from categories and destinations. Not the retired
   .popular-searches block. */
.home-searches {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr);
    gap: var(--space-10);
}

.home-searches h3 {
    margin: 0 0 var(--space-3);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

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

.home-searches a {
    display: block;
    padding-block: var(--space-2);
    color: var(--v2-text);
    font-weight: 600;
    text-decoration: none;
}

.home-searches a:hover,
.home-searches a:focus-visible {
    color: var(--v2-link);
}

.home-searches__places ul {
    columns: 3;
    column-gap: var(--space-8);
}

.home-searches__places li {
    break-inside: avoid;
}

/* Uniform four-across category row. Beats the desktop bento, which
   spans the first tile across two rows. */
@media (min-width: 1200px) {
    .home-revamp .home-categories > ul:has(> li:nth-child(n)) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-rows: auto;
    }

    .home-revamp .home-categories > ul:has(> li:nth-child(n)) > li:nth-child(n) {
        grid-row: auto;
    }

    .home-revamp .home-categories > ul:has(> li:nth-child(n)) .category-tile__media {
        aspect-ratio: 4 / 5;
        block-size: auto;
    }
}

@media (max-width: 991.98px) {
    .home-way,
    .home-regions {
        grid-template-columns: 1fr;
    }

    .home-searches__places ul {
        columns: 2;
    }
}
/* REVAMP: home END */

/* REVAMP: filters START */
/* Title, count, toolbar, and cards share the results column. */
.tours-list .tours-browse__results,
.tours-list .tours-list__title,
.tours-list .tours-toolbar,
.tours-list .tours-toolbar__lead,
.tours-list .tours-toolbar__controls,
.tours-list .tours-toolbar__sort,
.tours-list .listing-rows,
.tours-list .tours-grid,
.tours-list .listing-card {
    min-width: 0;
    max-width: 100%;
}

.tours-list .tours-list__title {
    overflow-wrap: break-word;
}

.tours-list .tours-toolbar,
.tours-list .tours-toolbar__lead,
.tours-list .tours-toolbar__controls {
    align-items: center;
}

.tours-list .tours-toolbar__sort,
.tours-list .tours-view-toggle,
.tours-list .tours-filter-toggle {
    align-items: center;
    height: var(--control-sm);
    min-height: var(--control-sm);
}

.tours-list .tours-view-toggle,
.tours-list .tours-filter-toggle,
.tours-list .tours-toolbar__sort-label,
.tours-list .tours-toolbar__sort-select {
    font-size: var(--text-sm);
    line-height: var(--leading-meta);
}

.tours-list .tours-toolbar__sort-select {
    min-width: 0;
    max-width: 100%;
    font-family: inherit;
}

.tours-list .tours-view-toggle i,
.tours-list .tours-filter-toggle i,
.tours-list .active-filter i {
    display: block;
    font-size: var(--text-md);
    line-height: 1;
}

.tours-list .tours-toolbar__sort {
    min-width: 0;
    max-width: 100%;
}

.tours-list .active-filters--inline {
    align-items: center;
    min-width: 0;
    margin: 0;
}

.tours-list .active-filters--inline .active-filter {
    align-items: center;
    max-width: 100%;
    min-height: var(--control-chip);
    font-size: var(--text-sm);
    line-height: var(--leading-meta);
}

.tours-list .active-filter > span:not(.visually-hidden) {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Drawer title, labels, and actions share one inset. */
.tours-list .filter-drawer__head,
.tours-list .filter-drawer__body,
.tours-list .filter-drawer__actions {
    padding-inline: var(--space-5);
}

.tours-list .filter-group {
    min-inline-size: 0;
}

.tours-list .filter-group legend,
.tours-list .filter-drawer .v2-label {
    float: none;
    width: auto;
    max-width: 100%;
    margin: 0 0 var(--space-2);
    padding: 0;
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-meta);
}

.tours-list .filter-option {
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.tours-list .filter-option > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tours-list .filter-rating {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.tours-list .filter-rating__option {
    flex: 1 1 calc(25% - var(--space-2));
    min-width: 0;
    height: auto;
    min-height: var(--control-sm);
    padding-inline: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-meta);
    text-align: center;
}

.tours-list .filter-price__slider {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.tours-list .filter-price__bounds {
    min-width: 0;
}

.tours-list-follow .topic-cloud .category-chip {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* region-section zeroed the bottom padding on this page. */
.tours-list-follow {
    padding-block: var(--section-y-tight);
}

.tours-list-follow + .tours-list-follow {
    padding-top: 0;
}

@media (max-width: 991.98px) {
    .tours-list .filter-drawer__panel {
        width: 100%;
        max-width: 100%;
    }

    .tours-list .tours-toolbar__controls {
        align-items: center;
        width: 100%;
    }

    .tours-list .tours-toolbar__sort {
        flex: 1 1 auto;
    }

    .tours-list .tours-view-toggle,
    .tours-list .tours-filter-toggle {
        flex: 0 0 auto;
    }
}

@media (min-width: 992px) {
    .tours-list .tours-browse {
        display: grid;
        grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: start;
    }

    .tours-list .tours-browse > .filter-drawer,
    .tours-list .tours-browse__results {
        min-width: 0;
    }

    .tours-list .tours-browse > .filter-drawer {
        position: sticky;
        top: calc(var(--nav-h) + var(--space-4));
        inset: auto;
        z-index: auto;
        display: block;
        height: auto;
        visibility: visible;
        pointer-events: auto;
    }

    .tours-list .tours-browse > .filter-drawer .filter-drawer__scrim,
    .tours-list .tours-browse > .filter-drawer .filter-drawer__close {
        display: none;
    }

    .tours-list .tours-browse > .filter-drawer .filter-drawer__panel {
        position: static;
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: calc(100dvh - var(--nav-h) - var(--space-8));
        transform: none;
        overflow: auto;
        background: var(--v2-surface);
        border: 1px solid var(--v2-line);
        border-radius: var(--v2-radius-panel);
        box-shadow: none;
    }

    .tours-list .tours-browse > .filter-drawer .filter-drawer__head {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--v2-surface);
        padding: var(--space-4) var(--space-5);
    }

    .tours-list .tours-browse > .filter-drawer .filter-drawer__head h2 {
        margin: 0;
        font-family: inherit;
        font-size: var(--text-md);
        line-height: var(--leading-title);
    }

    .tours-list .tours-browse > .filter-drawer .filter-drawer__actions {
        position: sticky;
        bottom: 0;
        background: var(--v2-surface);
    }

    .tours-list .tours-toolbar .tours-filter-toggle {
        display: none;
    }

    .tours-list .tours-browse .tours-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .tours-list .tours-browse .tours-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* REVAMP: filters END */

/* REVAMP: detail START */
/* Tour detail, TourRadar-shaped: gallery, facts, then a sticky request card.
   Scoped to .tr-detail so list cards and other pages keep their own rules. */

.tr-detail__summary {
    max-width: var(--measure);
    margin: 0 0 var(--space-4);
    color: var(--v2-text-soft);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.tr-detail .detail-title h1 {
    font-size: var(--text-4xl);
    font-weight: 800;
    letter-spacing: var(--tracking-h1);
    line-height: var(--leading-title);
}

.tr-detail .detail-meta {
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.tr-detail .meta-pill {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--v2-text-soft);
    font-size: var(--text-sm);
    font-weight: 600;
}

.tr-detail .meta-pill + .meta-pill::before {
    content: "·";
    margin-inline-end: var(--space-3);
    color: var(--v2-text-muted);
    font-weight: 700;
}

.tr-detail .rating + .meta-pill::before {
    content: "·";
    margin-inline-end: var(--space-3);
    color: var(--v2-text-muted);
    font-weight: 700;
}

.tr-detail a.meta-pill:hover,
.tr-detail a.meta-pill:focus-visible {
    background: transparent;
    color: var(--v2-link);
}

.tr-detail .gallery-mosaic {
    grid-template-rows: calc(var(--v2-mosaic-row) * 1.55) calc(var(--v2-mosaic-row) * 1.55);
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.tr-detail .gallery-mosaic.is-single {
    grid-template-rows: auto;
}

.tr-detail .gallery-mosaic.is-single img {
    aspect-ratio: 16 / 9;
    max-height: calc(var(--v2-mosaic-row) * 3.1);
}

.tr-detail .gallery-mosaic.is-pair {
    grid-template-rows: calc(var(--v2-mosaic-row) * 1.8);
}

.tr-detail .gallery-mosaic figure {
    border-radius: var(--v2-radius-card);
}

.tr-detail .gallery-mosaic img {
    transition: transform var(--duration) var(--ease);
}

.tr-detail .gallery-mosaic__open:hover img,
.tr-detail .gallery-mosaic__open:focus-visible img {
    transform: scale(1.04);
}

.tr-detail .gallery-mosaic__all {
    border-radius: var(--v2-radius-pill);
    font-size: var(--text-sm);
}

.tr-detail .detail-tabs {
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.tr-detail .detail-tabs__tab {
    font-size: var(--text-sm);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-tight);
}

/* The tab strip is sticky. Kept to the reading column so it cannot
   paint across the request card and clip its price and button. */
@media (min-width: 992px) {
    .tr-detail .detail-tabs {
        width: calc(100% - 380px - var(--space-8));
    }
}

.tr-detail .detail-layout__main {
    gap: var(--space-10);
}

.tr-detail .detail-section + .detail-section {
    margin-top: 0;
}

.tr-detail .detail-section > h2 {
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
}

.tr-detail .fact-strip {
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-panel);
    background: var(--v2-surface-alt);
}

.tr-detail .highlight-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.tr-detail .highlight-list .bi {
    display: grid;
    place-items: center;
    width: var(--space-6);
    height: var(--space-6);
    border-radius: var(--v2-radius-pill);
    background: var(--v2-band);
    color: var(--v2-primary);
    font-size: var(--text-sm);
}

.tr-detail .itinerary-accordion {
    gap: 0;
}

.tr-detail .itinerary-accordion > li {
    position: relative;
    padding-bottom: var(--space-2);
}

.tr-detail .itinerary-accordion > li::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--space-4) - 1px);
    top: var(--space-8);
    bottom: 0;
    border-inline-start: 2px solid var(--v2-line);
}

.tr-detail .itinerary-accordion > li:last-child::before {
    display: none;
}

.tr-detail .itinerary-accordion__step {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.tr-detail .itinerary-accordion__step > summary {
    padding-inline: 0;
}

.tr-detail .itinerary-accordion__marker {
    position: relative;
    z-index: 1;
    border: 1px solid var(--v2-line-strong);
    background: var(--v2-surface);
    color: var(--v2-primary);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tr-detail .itinerary-accordion__step > p {
    padding-inline: 0 var(--space-4);
    color: var(--v2-text-soft);
    line-height: var(--leading-relaxed);
}

.tr-detail .inclusions {
    align-items: start;
    padding: var(--space-6);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-panel);
    background: var(--v2-surface);
}

.tr-detail .inclusions__list .bi {
    color: var(--v2-text-muted);
}

.tr-detail .inclusions__list--yes .inclusion-list__yes {
    color: var(--v2-success);
}

.tr-detail .inclusions__list--no .inclusion-list__no {
    color: var(--v2-text-muted);
}

.tr-detail .detail-summary {
    z-index: 2;
    top: calc(var(--nav-h) + var(--space-4));
    border-radius: var(--v2-radius-panel);
    box-shadow: var(--v2-shadow-xl);
}

:root:has(.site-header.site-nav--hidden) .tr-detail .detail-summary {
    top: var(--space-4);
}

.tr-request__kicker {
    margin: 0 0 var(--space-3);
    color: var(--v2-accent-text);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.tr-detail .tr-request__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: var(--space-1);
    margin: 0 0 var(--space-5);
}

.tr-request__from,
.tr-request__per {
    color: var(--v2-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.tr-request__per {
    flex-basis: 100%;
}

.tr-request__amount {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.tr-detail .tr-request__amount strong {
    font-size: var(--text-price);
    font-weight: 800;
    letter-spacing: var(--tracking-h1);
    line-height: var(--leading-card);
    color: var(--v2-text);
    font-variant-numeric: tabular-nums;
}

.tr-detail .tr-request__amount span {
    color: var(--v2-text);
    font-size: var(--text-lg);
    font-weight: 700;
}

.tr-detail .tr-request .booking-fields {
    gap: var(--space-4);
    margin-block: 0 var(--space-4);
}

.tr-request__field {
    margin-bottom: 0;
}

.tr-request__label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--v2-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.tr-detail .tr-request .booking-field--date,
.tr-detail .tr-request .booking-guests__toggle {
    align-items: center;
    min-height: var(--control-height);
    margin-bottom: 0;
    padding-inline: var(--space-4);
}

.tr-detail .tr-request .booking-field--date input {
    height: auto;
    min-height: 0;
    padding: 0;
    line-height: var(--leading-snug);
}

.tr-detail .detail-summary__total {
    align-items: baseline;
    margin-inline: 0;
}

.tr-detail .tr-request__actions {
    margin-top: var(--space-2);
}

.tr-detail .tr-request .v2-button,
.tr-detail .tr-request .v2-button-outline {
    min-height: var(--control-cta);
}

.tr-request__whatsapp {
    gap: var(--space-2);
}

.tr-request__quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--v2-link);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}

.tr-request__quiet:hover,
.tr-request__quiet:focus-visible {
    color: var(--v2-primary-hover);
}

.tr-detail .detail-summary__reassure {
    padding-top: var(--space-4);
    border-top: 1px solid var(--v2-line);
}

@media (max-width: 991.98px) {
    .tr-detail .gallery-mosaic,
    .tr-detail .gallery-mosaic.is-pair,
    .tr-detail .gallery-mosaic.is-partial,
    .tr-detail .gallery-mosaic.is-full {
        grid-template-rows: auto;
    }

    .tr-detail .detail-layout {
        display: flex;
        flex-direction: column;
        margin-top: var(--space-12);
    }

    .tr-detail .detail-layout__rail {
        order: -1;
    }

    .tr-detail .detail-summary {
        position: static;
        padding-block: var(--space-5);
    }

    .tr-detail .detail-meta {
        align-items: center;
    }

    /* Duration, destination, and category share one row height. The
       destination is a link, and the touch-target rule otherwise grows
       only that pill. */
    .tr-detail .meta-pill,
    .tr-detail a.meta-pill {
        align-items: center;
        min-height: var(--tap);
        padding-block: 0;
    }

    .tr-detail .highlight-list,
    .tr-detail .inclusions {
        grid-template-columns: minmax(0, 1fr);
    }

    .tr-detail .mobile-bar__cta,
    .tr-detail .mobile-bar__price {
        min-width: 0;
    }

    html:has(.tr-detail .mobile-bar) {
        scroll-padding-bottom: calc(var(--control-cta) + var(--space-8));
    }

    body:has(.tr-detail .mobile-bar) {
        padding-bottom: calc(var(--control-cta) + var(--space-8));
    }
}

@media (prefers-reduced-motion: reduce) {
    .tr-detail .gallery-mosaic img {
        transition: none;
    }
}

/* REVAMP: detail END */

/* REVAMP: destinations START */

/* Index: popular mosaic reads as destination cards, then every place
   sits in a photo grid under its region. Detail: a taller photo header
   with a short intro, then the existing tour list. */

.dest-revamp .atlas-mosaic {
    gap: var(--space-5);
}

.dest-revamp .atlas-mosaic__tile {
    height: clamp(12.5rem, 24vw, 18rem);
    min-width: 11rem;
}

.dest-revamp .atlas-mosaic__label {
    padding: var(--space-10) var(--space-4) var(--space-4);
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-card);
}

.dest-revamp .atlas-columns {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.dest-revamp .atlas-column__title {
    margin-bottom: var(--space-5);
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
}

.dest-revamp-places {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dest-revamp-place {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--v2-radius-card);
    background: var(--v2-navy-850);
    color: var(--v2-white);
    text-decoration: none;
    box-shadow: var(--v2-shadow-sm);
}

.dest-revamp-place:hover,
.dest-revamp-place:focus-visible {
    color: var(--v2-white);
    box-shadow: var(--v2-shadow-md);
}

.dest-revamp-place:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.dest-revamp-place img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration) var(--ease);
}

.dest-revamp-place:hover img {
    transform: scale(1.05);
}

.dest-revamp-place__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-10) var(--space-4) var(--space-4);
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--v2-navy-950) 88%, transparent),
        transparent);
}

.dest-revamp-place__name {
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-card);
}

.dest-revamp-place__meta {
    font-size: var(--text-xs);
    font-weight: 700;
    color: color-mix(in srgb, var(--v2-white) 86%, transparent);
}

.dest-revamp-place.is-imageless {
    background: var(--v2-band);
}

.dest-revamp-place.is-imageless .dest-revamp-place__body {
    background: none;
    padding-top: var(--space-4);
}

.dest-revamp-place.is-imageless .dest-revamp-place__name {
    color: var(--v2-accent-text);
}

.dest-revamp-place.is-imageless .dest-revamp-place__meta {
    color: var(--v2-text-muted);
}

.dest-revamp.city-hero.hero--atlas {
    min-height: clamp(28rem, 62vh, 40rem);
    background-image:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--v2-navy-950) 46%, transparent) 0%,
            color-mix(in srgb, var(--v2-navy-950) 8%, transparent) 38%,
            color-mix(in srgb, var(--v2-navy-950) 84%, transparent) 100%),
        var(--atlas-hero-image);
}

.dest-revamp.city-hero .atlas-hero__copy a {
    pointer-events: auto;
}

.dest-revamp.city-hero .atlas-hero__lede {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 36rem;
    color: color-mix(in srgb, var(--v2-white) 90%, transparent);
}

.dest-revamp-hero__jump {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    margin-top: var(--space-4);
    color: var(--v2-white);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.22em;
}

.dest-revamp-hero__jump:hover,
.dest-revamp-hero__jump:focus-visible {
    color: var(--v2-white);
}

.dest-revamp.city-hero .dest-revamp-hero__jump:focus-visible,
.dest-revamp.city-hero .breadcrumb a:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-dark);
    outline-offset: var(--focus-ring-offset);
}

.dest-revamp#tours {
    scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}

.dest-revamp-tours__title {
    margin: 0 0 var(--space-5);
    color: var(--v2-text);
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
}

/* About: the pale panel matches the photo as one row, but the type
   sits at the top — the same left edge, the same heading scale as the
   tours title above. A short description must not float in the middle. */
.city-about__panel {
    align-items: stretch;
}

.city-about__body {
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-5);
    min-width: 0;
    padding: var(--space-10);
    text-align: left;
}

.city-about__title,
.city-about__copy {
    margin: 0;
    max-width: 100%;
    text-align: left;
}

.city-about__title {
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
}

.city-about__copy {
    line-height: var(--leading-relaxed);
    overflow-wrap: break-word;
}

@media (max-width: 767.98px) {
    .dest-revamp .atlas-mosaic__tile {
        height: clamp(10rem, 46vw, 14rem);
        min-width: 0;
        flex-basis: calc(50% - var(--space-4));
    }

    .dest-revamp .atlas-mosaic__tile:nth-child(9n + 1),
    .dest-revamp .atlas-mosaic__tile:nth-child(9n + 4),
    .dest-revamp .atlas-mosaic__tile:nth-child(9n + 7) {
        flex-basis: 100%;
    }

    .dest-revamp.city-hero.hero--atlas {
        min-height: 24rem;
    }

    .dest-revamp .atlas-columns {
        gap: var(--space-10);
    }

    .city-about__body {
        padding: var(--space-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dest-revamp-place img,
    .dest-revamp .atlas-mosaic__tile img {
        transition: none;
    }

    .dest-revamp-place:hover img {
        transform: none;
    }
}

/* Top sights: the arrows belong on the card row. Overlay positioning pinned
   them to the full-width frame, so one tile left a faded control on the
   photo and the next arrow alone at the far edge of the band. */
.city-sights__frame.atlas-rail-frame {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.city-sights__rail.atlas-rail {
    flex: 1 1 auto;
    min-width: 0;
}

.city-sights .rail-button--overlay {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    transform: none;
}

.city-sights .rail-button--overlay:disabled {
    display: none;
}

.city-sights__meta,
.city-sights__name,
.city-sights__count {
    text-align: start;
}

/* REVAMP: destinations END */

/* REVAMP: destinations-detail START */
/* Detail hero only. The index hero shares .hero--atlas but not .city-hero,
   so these rules stay off the destinations index. */

/* The search form's max-width is the shell measure, and it already lives
   inside that shell, so margin:auto indents the bar by one gutter. The
   title, the intro, and the tours column all start on the shell edge. */
.dest-revamp.city-hero .hero__inner--atlas .global-search__form {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.dest-revamp.city-hero .atlas-hero__copy,
.dest-revamp.city-hero .breadcrumb {
    max-width: 100%;
    min-width: 0;
}

.dest-revamp.city-hero .breadcrumb {
    flex-wrap: wrap;
}

/* .atlas-hero__title replaces the hero scale with a raw clamp, a raw
   leading, and a raw tracking. Put this page's title back on the scale. */
.dest-revamp.city-hero .atlas-hero__title {
    max-width: 100%;
    font-size: var(--text-5xl);
    font-weight: 800;
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-display);
}

.dest-revamp.city-hero .atlas-hero__lede {
    max-width: min(36rem, 100%);
    line-height: var(--leading-normal);
}

/* Heading, count, and cards are direct shell children. Keep them on one
   edge when the toolbar wraps, and stop a long chip from widening the page. */
.dest-revamp#tours .dest-revamp-tours__title,
.dest-revamp#tours .region-toolbar,
.dest-revamp#tours .region-tour-grid {
    margin-inline: 0;
    padding-inline: 0;
    max-width: 100%;
    min-width: 0;
}

.dest-revamp#tours .region-toolbar__filters,
.dest-revamp#tours .region-toolbar__chips {
    min-width: 0;
    max-width: 100%;
}

.dest-revamp#tours .region-chip {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* --space-7 is not a token, so the sights heading margin was dropped and
   the title sat on the rail. Nearest real step is --space-6. The title
   uses the same heading scale as the tours heading above it. */
.city-sights__heading {
    margin-bottom: var(--space-6);
}

.city-sights__title {
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
}

/* REVAMP: destinations-detail END */

/* REVAMP: destinations-index START */
/* Index only (.dest-index). Detail owns .city-hero and the destinations block. */

/* The search form's max-width is the shell measure, and this hero already
   is that shell, so margin:auto indents the bar by one gutter. The title
   and the sections below start on the shell edge. */
.dest-index.hero--atlas .hero__inner--atlas .global-search__form {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* .atlas-hero__title replaces the site hero scale with a raw clamp. */
.dest-index.hero--atlas .atlas-hero__title {
    font-size: var(--text-5xl);
    font-weight: 800;
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-display);
}

.dest-index.hero--atlas .atlas-hero__lede {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
}

/* Region groups are a column flex with align-items:start, so each group
   shrink-wraps to its heading and the photo cards collapse to that width.
   Stretch them to the same measure as the section heading. */
.dest-index .atlas-columns {
    align-items: stretch;
}

.dest-index .atlas-column {
    width: 100%;
    min-width: 0;
}

.dest-index .dest-revamp-places {
    width: 100%;
}

.dest-index .dest-revamp-place__body {
    min-width: 0;
}

.dest-index .dest-revamp-place__name,
.dest-index .dest-revamp-place__meta {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: start;
}

/* REVAMP: destinations-index END */