/* ============================================================================
   Landing-page sections: hero, trust strip, stats, feature grid, process steps,
   destination mosaic and the closing call to action.

   Shared by the homepage and every product landing page, which is why the hero
   takes its image from a CSS variable set inline per page rather than having a
   class per product.
   ========================================================================== */

/* ---------------------------------------------------------------- hero --- */

.pt-hero {
    position: relative;
    /* Pulled up under the transparent header rather than sitting below it, so
       the photograph runs to the very top of the page. */
    margin-top: calc(-1 * var(--pt-header-h) - 38px);
    padding-top: calc(var(--pt-header-h) + 38px);
    min-height: clamp(560px, 82vh, 820px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--pt-ink-800);
}

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

.pt-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A very slow drift gives the hero life without the jarring feel of a
       Ken Burns pan. Disabled wholesale by the reduced-motion block. */
    animation: pt-hero-drift 28s ease-in-out infinite alternate;
}

@keyframes pt-hero-drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

/* A left-side wash under the copy plus a bottom fade for the search-card seam.
   This used to be just the bottom fade, relying on text-shadow alone to keep
   the heading readable over whatever the photo underneath happened to be —
   fine for a hand-picked, dark-friendly default photo, but not once the hero
   became a CRM-driven slider (see _PageHero.cshtml): an admin can upload any
   photo, including bright, busy ones the old thin fade left the text sitting
   directly on top of with no cushion. The wash is heaviest under the copy
   column (left, where the text lives) and eases off toward the right so the
   photo itself still reads as a photo rather than going flat and muddy. */
.pt-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(8, 16, 32, .68) 0%, rgba(8, 16, 32, .42) 45%, rgba(8, 16, 32, .12) 75%),
        linear-gradient(180deg, rgba(8, 16, 32, .1) 0%, transparent 38%, rgba(8, 16, 32, .68) 100%);
}

/* A soft chartreuse bloom behind the copy — the one place the accent gets any
   real area, and only at 12% opacity. */
.pt-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 18%;
    left: -6%;
    width: 46vw;
    height: 46vw;
    max-width: 620px;
    max-height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 190, 108, .14), transparent 68%);
    pointer-events: none;
}

.pt-hero__inner {
    position: relative;
    width: 100%;
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.pt-hero__copy { max-width: 42rem; color: #fff; }

.pt-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .95rem .4rem .5rem;
    margin-bottom: 1.15rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--pt-radius-pill);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: var(--pt-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pt-hero__eyebrow svg { width: 15px; height: 15px; color: var(--pt-blue-300); }

.pt-hero h1 {
    color: #fff;
    margin-bottom: 1rem;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(10, 24, 48, .35);
}

/* The serif italic on one word is the signature move — it is what makes the
   headline look art-directed rather than typed into a template. A light sky
   blue here (rather than the secondary green) is what the reference layout's
   own two-tone headline ("Explore the World / with Us") uses on its second
   line. */
.pt-hero h1 em {
    font-family: var(--pt-font-accent);
    font-style: italic;
    font-weight: 400;
    color: var(--pt-blue-300);
    letter-spacing: -0.01em;
}

.pt-hero__lede {
    font-size: clamp(1rem, .5vw + .95rem, 1.2rem);
    color: rgba(255, 255, 255, .84);
    max-width: 34rem;
    margin-bottom: 1.75rem;
    text-wrap: pretty;
    text-shadow: 0 1px 12px rgba(10, 24, 48, .4);
}

.pt-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -- trust strip under the hero copy -------------------------------------- */

.pt-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.pt-hero__trust-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255, 255, 255, .82);
    font-size: var(--pt-text-sm);
}

.pt-hero__trust-item strong { display: block; color: #fff; font-family: var(--pt-font-display); font-size: var(--pt-text-base); }

.pt-hero__trust-item svg {
    width: 18px;
    height: 18px;
    flex: none;
    padding: .55rem;
    box-sizing: content-box;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: var(--pt-blue-300);
}

/* -- compact hero for interior landing pages ------------------------------ */

.pt-hero--compact { min-height: clamp(400px, 54vh, 540px); }
.pt-hero--compact .pt-hero__copy { max-width: 46rem; }

/* -- tall hero for the one page acting as the site's landing page --------- */

/* Fills the screen below the sticky header rather than stopping at an
   arbitrary vh percentage, so it reaches the bottom of the window the same
   way .pt-hero--centered (the old homepage hero) did — 100dvh accounts for
   mobile browser chrome the same fixed 100vh does not. */
.pt-hero--tall { min-height: clamp(560px, calc(100vh - var(--pt-header-h)), 900px); }
.pt-hero--tall { min-height: clamp(560px, calc(100dvh - var(--pt-header-h)), 900px); }
.pt-hero--tall .pt-hero__copy { max-width: 46rem; }

/* --hero-card-overlap (3.5rem) only describes how far the search card rises
   above the seam — it says nothing about the card's own height, most of
   which still sits *below* that seam. .pt-hero--compact's own padding-bottom
   (clamp(5rem, 8vw, 7rem)) already accounts for that; this hero also carries
   a trust-stats row past the lede, so it gets a bit more still, tall enough
   that the row clears the card's top edge instead of the two overlapping. */
.pt-hero--tall .pt-hero__inner { padding-bottom: clamp(6.5rem, 10vw, 9rem); }

/* The product landing pages float a search card up over the bottom of the hero
   (see .flight-search-card / .pt-searchcard, both of which use a negative top
   margin). On the taller homepage hero there is room to spare; on the compact
   one the card landed straight on top of the trust strip, hiding the figures and
   clipping the last line of the lede. This reserves the space the card takes. */
.pt-hero--compact .pt-hero__inner { padding-bottom: clamp(5rem, 8vw, 7rem); }

/* -- homepage hero, with its own floating search card --------------------- */

/* Reserves clearance under the copy for the floating search card below,
   same idea as .pt-hero--compact above but sized for this hero. */
.pt-hero--search-card .pt-hero__inner {
    padding-bottom: calc(clamp(1.5rem, 4vw, 3rem) + var(--hero-card-overlap, 3.5rem));
}

/* -- centred hero variant --------------------------------------------------
   A minimal alternative to the default left-aligned hero: one big centred
   headline over the photo, a small decorative ornament above it, and a
   short caption below — no eyebrow badge, no button row, no trust strip.
   Homepage only, applied alongside .pt-hero--search-card above.

   Fills the screen — sized off the viewport height itself, not a vh
   percentage, so it reaches the bottom of the window on any monitor rather
   than stopping short and leaving a band of bare page beneath it. The
   subtraction is the search card's own overhang: the card floats up over
   the hero's bottom edge by --hero-card-overlap, so whatever height of the
   card is NOT covered by that overlap still has to land inside the window
   too, or the one thing this hero exists to surface — the search bar —
   would itself be the thing pushed below the fold. 100dvh (falls back to
   100vh where unsupported) accounts for mobile browser chrome the same
   fixed 100vh does not. */
.pt-hero--centered { min-height: clamp(460px, calc(100vh - 3rem), 900px); }
.pt-hero--centered { min-height: clamp(460px, calc(100dvh - 3rem), 900px); }
.pt-hero--centered .pt-hero__inner { text-align: center; padding-block: clamp(1.25rem, 3vw, 2.25rem); }
.pt-hero--centered .pt-hero__copy { max-width: 52rem; margin-inline: auto; }

.pt-hero__ornament {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.pt-hero__ornament-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pt-warning);
}

.pt-hero__ornament-lines { display: flex; align-items: flex-end; gap: 5px; height: 24px; }

.pt-hero__ornament-lines i {
    display: block;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .55);
}

.pt-hero__ornament-lines i:nth-child(1) { height: 60%; }
.pt-hero__ornament-lines i:nth-child(2) { height: 100%; }
.pt-hero__ornament-lines i:nth-child(3) { height: 45%; }

.pt-hero--centered h1 {
    text-transform: uppercase;
    font-size: clamp(2rem, 3.6vw + .8rem, 4rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.pt-hero--centered .pt-hero__lede {
    margin-inline: auto;
    margin-bottom: 0;
    font-size: var(--pt-text-base);
    color: rgba(255, 255, 255, .8);
}

/* -------------------------------------------------------- hero slider ---- */

/* Every product landing page's hero (PageHeroViewComponent/_PageHero.cshtml)
   can render one or more slides — one per CRM banner row under that page's
   name. With exactly one (the common case today) this is inert: a single
   .is-active slide with no dots/arrows in the markup, identical to the old
   single-image hero. A second row is what turns it into an actual slider. */
.pt-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s var(--pt-ease), visibility 0s linear .9s;
}

/* An absolutely positioned element ignores its containing block's own
   padding (it sits flush with the padding edge, not the content edge) — so
   .pt-hero's padding-top, which exists specifically to clear the sticky
   header above it, stops reaching .pt-hero__inner once that inner content
   moved inside this absolutely positioned slide wrapper. Reapplied here,
   directly on the slide, so the heading/eyebrow still clears the header
   instead of landing underneath the logo. */
.pt-hero__slide { padding-top: calc(var(--pt-header-h) + 38px); }

.pt-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity .9s var(--pt-ease);
}

.pt-hero__nav {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(10, 24, 48, .35);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s var(--pt-ease), transform .2s var(--pt-ease);
}

.pt-hero__nav:hover { background: rgba(10, 24, 48, .55); }
.pt-hero__nav svg { width: 20px; height: 20px; }
.pt-hero__nav--prev { left: clamp(.75rem, 2vw, 1.5rem); }
.pt-hero__nav--next { right: clamp(.75rem, 2vw, 1.5rem); }

.pt-hero__dots {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 3vw, 1.5rem);
    z-index: 6;
    display: flex;
    gap: .5rem;
    transform: translateX(-50%);
}

.pt-hero__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background .2s var(--pt-ease), width .3s var(--pt-ease);
}

.pt-hero__dot.is-active { width: 22px; border-radius: var(--pt-radius-pill); background: #fff; }

@media (max-width: 640px) {
    .pt-hero__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-hero__slide { transition: none; }
}

/* -- homepage-only pill skin for the shared search card ------------------- */

/* Same _TourSearchCard markup and fields every search page uses — only the
   look changes here: one continuous pill instead of a bordered card, an
   icon circle per field instead of a plain label, hairline dividers instead
   of gaps between fields, and the orange accent (this site's one other
   brand colour) on the button instead of blue, so the button doesn't
   disappear into an all-blue page. */
.tour-search-wrapper--pill .flight-search-card {
    max-width: 920px;
    padding: .6rem;
    border-radius: var(--pt-radius-pill);
}

.tour-search-wrapper--pill .trip-fields-simple { gap: 0; }

.tour-search-wrapper--pill .field-box {
    position: relative;
    min-height: 54px;
    padding: .5rem 1rem .5rem 3.25rem;
    border: 0;
    border-radius: 0;
    background: none;
}

@media (min-width: 760px) {
    .tour-search-wrapper--pill .field-box:not(:last-of-type)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;
        bottom: 20%;
        width: 1px;
        background: var(--pt-line);
    }
}

.tour-search-wrapper--pill .field-icon {
    display: grid;
    place-items: center;
    position: absolute;
    left: .5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pt-warning-soft);
    color: var(--pt-warning);
}

.tour-search-wrapper--pill .field-icon svg { width: 16px; height: 16px; }

.tour-search-wrapper--pill .search-btn {
    background: linear-gradient(135deg, var(--pt-warning), #D97F1A);
    box-shadow: 0 6px 18px rgba(243, 156, 44, .35);
}

/* --------------------------------------------------------- search card --- */

/* Floats over the seam between the hero and the next section. */
.pt-searchcard {
    position: relative;
    z-index: 5;
    margin-top: clamp(-4rem, -5vw, -3rem);
    margin-bottom: var(--pt-gap-xl);
    padding: clamp(1.1rem, 2vw, 1.6rem);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--pt-radius-xl);
    box-shadow: var(--pt-shadow-xl);
}

.pt-searchcard__tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: var(--pt-gap);
    overflow-x: auto;
    scrollbar-width: none;
}

.pt-searchcard__tabs::-webkit-scrollbar { display: none; }

.pt-searchcard__tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border: 0;
    border-radius: var(--pt-radius-pill);
    background: transparent;
    color: var(--pt-slate-600);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s var(--pt-ease), color .2s var(--pt-ease);
}

.pt-searchcard__tab svg { width: 16px; height: 16px; }
.pt-searchcard__tab:hover { background: var(--pt-blue-050); color: var(--pt-blue-700); }

.pt-searchcard__tab.is-active {
    background: var(--pt-ink-800);
    color: #fff;
}

.pt-searchform {
    display: grid;
    gap: .6rem;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .pt-searchform {
        grid-template-columns: 1.6fr 1fr 1fr 1.1fr auto;
        align-items: end;
    }
}

.pt-searchfield {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .85rem;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    background: var(--pt-paper);
    transition: border-color .2s var(--pt-ease), box-shadow .2s var(--pt-ease);
    min-height: 62px;
    justify-content: center;
}

.pt-searchfield:focus-within { border-color: var(--pt-blue-500); box-shadow: var(--pt-ring); }

.pt-searchfield__label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

.pt-searchfield__label svg { width: 13px; height: 13px; color: var(--pt-blue-600); }

.pt-searchfield input,
.pt-searchfield select,
.pt-searchfield button.pt-searchfield__value {
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    color: var(--pt-heading);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-md);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.pt-searchfield input { cursor: text; }
.pt-searchfield input:focus,
.pt-searchfield select:focus { outline: none; }
.pt-searchfield input::placeholder { color: var(--pt-slate-400); font-weight: 500; }

/* Stacked on a phone, the submit is the last row and should read as the end of
   the form rather than a button floating at half width. */
.pt-searchform__submit { align-self: stretch; }
.pt-searchform__submit .pt-btn { width: 100%; }

@media (min-width: 720px) {
    .pt-searchform__submit .pt-btn { width: auto; }
}

.pt-searchform__submit .pt-btn {
    height: 100%;
    min-height: 62px;
    padding-inline: 1.75rem;
    border-radius: var(--pt-radius);
}

/* -- typeahead ------------------------------------------------------------ */

.pt-typeahead {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 340px;
    overflow-y: auto;
    padding: .35rem;
    background: var(--pt-paper);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-xl);
    display: none;
}

.pt-typeahead.is-open { display: block; }

.pt-typeahead__item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .6rem;
    border: 0;
    border-radius: var(--pt-radius-sm);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s var(--pt-ease);
}

.pt-typeahead__item:hover,
.pt-typeahead__item.is-active { background: var(--pt-blue-050); }

.pt-typeahead__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: var(--pt-sand-deep);
    color: var(--pt-blue-600);
}

.pt-typeahead__icon svg { width: 15px; height: 15px; }

.pt-typeahead__text { min-width: 0; }
.pt-typeahead__text strong { display: block; font-size: var(--pt-text-base); color: var(--pt-heading); font-weight: 600; }
.pt-typeahead__text small { display: block; font-size: var(--pt-text-xs); color: var(--pt-text-faint); }
.pt-typeahead__count { margin-left: auto; font-size: var(--pt-text-xs); color: var(--pt-text-faint); flex: none; }
.pt-typeahead__empty { padding: 1rem; text-align: center; color: var(--pt-text-faint); font-size: var(--pt-text-sm); }

/* -- guest stepper popover ------------------------------------------------ */

.pt-guests { position: relative; }

.pt-guests__panel {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 40;
    width: min(300px, 88vw);
    padding: .85rem;
    background: var(--pt-paper);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-xl);
    display: none;
}

.pt-guests__panel.is-open { display: block; }

.pt-guests__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
}

.pt-guests__row + .pt-guests__row { border-top: 1px solid var(--pt-line-soft); }
.pt-guests__row strong { display: block; font-size: var(--pt-text-base); color: var(--pt-heading); }
.pt-guests__row small { color: var(--pt-text-faint); font-size: var(--pt-text-xs); }

.pt-stepper { display: flex; align-items: center; gap: .5rem; }

.pt-stepper button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--pt-line);
    border-radius: 50%;
    background: var(--pt-paper);
    color: var(--pt-blue-600);
    cursor: pointer;
    transition: border-color .18s var(--pt-ease), background .18s var(--pt-ease);
}

.pt-stepper button:hover:not(:disabled) { border-color: var(--pt-blue-500); background: var(--pt-blue-050); }
.pt-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.pt-stepper button svg { width: 14px; height: 14px; }
.pt-stepper output { min-width: 1.5rem; text-align: center; font-family: var(--pt-font-display); font-weight: 700; }

/* --------------------------------------------------------------- stats --- */

.pt-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--pt-gap-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--pt-radius-xl);
    background: linear-gradient(135deg, var(--pt-ink-800), var(--pt-ink-600));
    color: #fff;
    box-shadow: var(--pt-shadow-lg);
    position: relative;
    overflow: hidden;
}

/* Faint chartreuse rule along the top edge — the same accent motif as the
   eyebrow, applied at architecture scale. */
.pt-stats::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--pt-lime-500), var(--pt-blue-500) 55%, transparent);
}

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

.pt-stat__value {
    display: block;
    font-family: var(--pt-font-display);
    font-size: clamp(1.9rem, 3vw, 2.9rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
}

.pt-stat__label {
    display: block;
    margin-top: .35rem;
    font-size: var(--pt-text-sm);
    color: rgba(255, 255, 255, .66);
}

/* ------------------------------------------------------------ features --- */

/* A row of plain, centred columns rather than bordered cards — a colour-coded
   icon carries each one, and a hairline divider (desktop only, since a
   vertical rule across stacked mobile columns would just be a stray line)
   separates them instead of a card boundary. */
.pt-features { display: grid; gap: var(--pt-gap-xl) var(--pt-gap-lg); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.pt-feature {
    position: relative;
    text-align: center;
    padding-inline: var(--pt-gap);
}

@media (min-width: 780px) {
    .pt-feature + .pt-feature::before {
        content: "";
        position: absolute;
        left: calc(-1 * var(--pt-gap-lg) / 2);
        top: .5rem;
        bottom: .5rem;
        width: 1px;
        background: var(--pt-line-soft);
    }
}

.pt-feature__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto var(--pt-gap);
    border-radius: 50%;
}

/* Each column gets its own pastel circle with a saturated icon on top —
   matching the reference's colour-coded icon row — rather than every icon
   sharing one flat brand tint. Cycles through four of that reference's five
   hues (blue/green/purple/orange); a fifth column would pick up pink. */
.pt-feature:nth-child(4n+1) .pt-feature__icon { background: var(--pt-blue-100); color: var(--pt-blue-600); }
.pt-feature:nth-child(4n+2) .pt-feature__icon { background: var(--pt-lime-100); color: var(--pt-lime-700); }
.pt-feature:nth-child(4n+3) .pt-feature__icon { background: var(--pt-purple-soft); color: var(--pt-purple); }
.pt-feature:nth-child(4n+4) .pt-feature__icon { background: var(--pt-warning-soft); color: var(--pt-warning); }

.pt-feature__icon svg { width: 24px; height: 24px; }

.pt-feature h3 { font-size: var(--pt-text-lg); margin-bottom: .3rem; }
.pt-feature p { margin: 0 auto; max-width: 24rem; color: var(--pt-text-muted); font-size: var(--pt-text-base); }

/* --------------------------------------------------------------- steps --- */

.pt-steps {
    display: grid;
    gap: var(--pt-gap-xl);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    counter-reset: pt-step;
    position: relative;
}

.pt-step { position: relative; counter-increment: pt-step; padding-top: .5rem; }

.pt-step__num {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--pt-gap);
    border-radius: 50%;
    border: 1px dashed var(--pt-blue-200);
    background: var(--pt-paper);
    font-family: var(--pt-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pt-blue-600);
}

.pt-step__num::before { content: "0" counter(pt-step); }

.pt-step h3 { font-size: var(--pt-text-lg); }
.pt-step p { color: var(--pt-text-muted); margin: 0; }

/* Connecting dashes between the steps, desktop only — on a stacked mobile
   layout a horizontal rule would point nowhere. */
@media (min-width: 860px) {
    .pt-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 26px;
        left: 64px;
        right: -1.5rem;
        border-top: 1px dashed var(--pt-line);
    }
}

/* -- section header with a "view all" link on the right ------------------- */

/* Used by every rail/grid section on the homepage (packages, destinations,
   featured stays) that pairs a heading with a link to the full listing,
   rather than centring the heading the way a one-off section like "why us"
   does. */
.pt-testimonials__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pt-gap-lg);
    margin-bottom: var(--pt-gap-xl);
}

.pt-testimonials__head .pt-heading { margin-bottom: 0; }

@media (max-width: 700px) {
    .pt-testimonials__head { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------- mosaic ---- */

/* Destination grid where the first tile is double-height — breaks the
   monotony of an even grid without needing bespoke markup per page. Still
   used by Hotels/Index's "pick a place to sleep" strip. */
.pt-mosaic {
    display: grid;
    gap: var(--pt-gap);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 780px) {
    /* dense packing so a set of three or five tiles closes its own gaps rather
       than leaving holes where the sixth would have gone. */
    .pt-mosaic {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 190px;
        grid-auto-flow: dense;
    }

    /* The feature tile only earns its double square when there are enough
       tiles to build a block around it. */
    .pt-mosaic > :first-child:nth-last-child(n+4) { grid-column: span 2; grid-row: span 2; }
    .pt-mosaic > :nth-child(6):nth-last-child(1) { grid-column: span 2; }
}

/* -------------------------------------------------------- dest mosaic ---- */

/* Each tile keeps its photo's own natural aspect ratio, so the wall reads as
   a mix of tall and short tiles rather than crops forced into identical
   boxes — the CSS multi-column layout below is what gives every visitor
   *something* usable with no JS. Its real weakness is that it fills each
   column top-to-bottom in source order with no rebalancing, so columns of
   uneven total height end at different points and leave a ragged bottom
   edge. dest-mosaic.js re-lays the same tiles into flex columns once it can
   measure their real rendered heights, greedily dropping each one into
   whichever column is currently shortest — that balancing is what makes
   every column end at roughly the same height, which no amount of CSS-only
   column-fill can do. */
.pt-dest-mosaic {
    columns: 2;
    column-gap: var(--pt-gap);
}

@media (min-width: 700px) {
    .pt-dest-mosaic { columns: 3; }
}

/* Applied by dest-mosaic.js once it has rebuilt the section into balanced
   columns — overrides the CSS-columns rule above rather than fighting it. */
.pt-dest-mosaic--js {
    display: flex;
    align-items: flex-start;
    gap: var(--pt-gap);
}

.pt-dest-mosaic__col {
    display: flex;
    flex-direction: column;
    gap: var(--pt-gap);
    flex: 1 1 0;
    min-width: 0;
}

.pt-dest-mosaic--js .pt-dest-tile { margin-bottom: 0; }

.pt-dest-tile {
    position: relative;
    display: block;
    break-inside: avoid;
    margin-bottom: var(--pt-gap);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    background: var(--pt-ink-700);
    isolation: isolate;
}

.pt-dest-tile img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .8s var(--pt-ease-out);
}

.pt-dest-tile:hover img { transform: scale(1.06); }

.pt-dest-tile::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 45%;
    background: linear-gradient(180deg, transparent, rgba(10, 24, 48, .85));
    pointer-events: none;
}

.pt-dest-tile__body {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: var(--pt-gap);
}

.pt-dest-tile__body h3 {
    margin: 0;
    color: #fff;
    font-size: var(--pt-text-base);
    text-shadow: 0 1px 8px rgba(10, 24, 48, .4);
}

/* -- tile, shared by both grids above --------------------------------------- */

.pt-tile {
    position: relative;
    display: block;
    min-height: 190px;
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    background: var(--pt-ink-700);
    isolation: isolate;
}

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

.pt-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 24, 48, .1) 30%, rgba(10, 24, 48, .82));
    transition: background .4s var(--pt-ease);
}

.pt-tile:hover img { transform: scale(1.08); }
.pt-tile:hover::after { background: linear-gradient(180deg, rgba(16, 42, 92, .25) 20%, rgba(10, 24, 48, .88)); }

.pt-tile__body {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: var(--pt-gap);
    color: #fff;
}

.pt-tile__body h3 { color: #fff; font-size: var(--pt-text-lg); margin: 0 0 .15rem; }
.pt-tile__body p { margin: 0; font-size: var(--pt-text-sm); color: rgba(255, 255, 255, .78); }

.pt-tile__go {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 600;
    color: var(--pt-lime-500);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s var(--pt-ease), transform .3s var(--pt-ease-out);
}

.pt-tile__go svg { width: 15px; height: 15px; }
.pt-tile:hover .pt-tile__go { opacity: 1; transform: none; }

/* ------------------------------------------------------------- offers ---- */

.pt-offers-section { background: var(--pt-blue-050); }

.pt-offers {
    display: grid;
    gap: var(--pt-gap-xl);
    align-items: center;
}

@media (min-width: 900px) {
    .pt-offers { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.pt-offers__copy .pt-eyebrow { margin-bottom: .6rem; }
.pt-offers__copy h2 { margin-bottom: .6rem; }
.pt-offers__copy p { max-width: 34rem; margin-bottom: 1.5rem; }
.pt-offers__copy .pt-btn { background: var(--pt-paper); }

.pt-offers__cards {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--pt-gap);
}

.pt-offer-card {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    flex: 1 1 150px;
    padding: 1.5rem 1.25rem;
    border-radius: var(--pt-radius-lg);
    color: #fff;
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: var(--pt-text-base);
    box-shadow: var(--pt-shadow-lg);
}

.pt-offer-card svg { width: 26px; height: 26px; }

/* Staggered on wide screens so the three cards read as a loose cluster
   rather than a rigid row — the same idea as the reference layout's
   overlapping offer tiles, without needing absolute positioning. */
@media (min-width: 560px) {
    .pt-offer-card:nth-child(2) { margin-top: 1.75rem; }
    .pt-offer-card:nth-child(3) { margin-top: 3.5rem; }
}

.pt-offer-card--teal { background: linear-gradient(135deg, var(--pt-blue-600), var(--pt-blue-700)); }
.pt-offer-card--orange { background: linear-gradient(135deg, var(--pt-warning), #D97F1A); }
.pt-offer-card--green { background: linear-gradient(135deg, var(--pt-lime-500), var(--pt-lime-600)); }

.pt-offers__note {
    align-self: flex-end;
    margin-left: .5rem;
    font-family: var(--pt-font-accent);
    font-style: italic;
    font-size: var(--pt-text-xl);
    line-height: 1.15;
    color: var(--pt-blue-700);
}

.pt-offers__note em { color: var(--pt-lime-600); }

/* ------------------------------------------------------------ cta band --- */

.pt-cta {
    position: relative;
    padding: clamp(2.5rem, 5vw, 4.5rem);
    border-radius: var(--pt-radius-xl);
    background: linear-gradient(120deg, var(--pt-ink-900), var(--pt-blue-800) 65%, var(--pt-blue-700));
    color: #fff;
    overflow: hidden;
    text-align: center;
}

/* Concentric rings, drawn in CSS rather than shipped as an image. */
.pt-cta::before,
.pt-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    pointer-events: none;
}

.pt-cta::before { width: 420px; height: 420px; top: -180px; right: -120px; }
.pt-cta::after { width: 300px; height: 300px; bottom: -160px; left: -80px; border-color: rgba(111, 178, 245, .2); }

.pt-cta__inner { position: relative; z-index: 1; max-width: 42rem; margin-inline: auto; }
.pt-cta h2 { color: #fff; }
.pt-cta h2 em { font-family: var(--pt-font-accent); font-style: italic; font-weight: 400; color: var(--pt-blue-300); }
.pt-cta p { color: rgba(255, 255, 255, .78); font-size: var(--pt-text-lg); margin-bottom: var(--pt-gap-lg); }

.pt-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .pt-hero__media img { animation: none; }
}

/* --------------------------------------------------------- pkg slider ---- */

/* The homepage's own take on .pt-rail: at theme.css's own ≥900px breakpoint
   the shared rail switches to a wrapping grid (fine for the mosaic/tile
   grids that only ever need to show everything at once), which would leave
   the arrow buttons below with nothing to do. This re-asserts horizontal
   scroll at that width instead, so "slider" means the same thing on desktop
   as it does on mobile. */
.pt-rail-wrap { display: flex; align-items: center; gap: var(--pt-gap-sm); }
.pt-rail-wrap .pt-rail { flex: 1 1 auto; min-width: 0; }
.pt-rail-wrap .pt-rail-btn { flex: none; }

@media (min-width: 900px) {
    .pt-rail--packages {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: minmax(280px, 31.5%);
        overflow-x: auto;
    }
}

@media (max-width: 640px) {
    /* Touch already scrolls the rail directly at this width — the buttons
       would just be two more targets competing with the cards for thumb
       room. */
    .pt-rail-wrap .pt-rail-btn { display: none; }
}

/* Floating duration chip, sitting on the photo's bottom-left corner — used to
   straddle the photo/body seam instead (bottom: -14px), but .pt-card__media
   (its containing block) clips anything that overflows its own box, which is
   what keeps the hover-zoom image from spilling into the body text; that
   clipping was silently cutting the chip's overflowing half off too. Fully
   inside the photo, like the category badge above it, is what actually
   renders intact. */
.pt-card__duration {
    position: absolute;
    left: .875rem;
    bottom: .875rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    border-radius: var(--pt-radius-pill);
    background: var(--pt-paper);
    box-shadow: var(--pt-shadow);
    color: var(--pt-heading);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-xs);
    font-weight: 700;
}

.pt-card__duration svg { width: 13px; height: 13px; color: var(--pt-blue-600); }

/* margin-top: auto (not a fixed 1rem) so this row sinks to the bottom of the
   now-flex .pt-card__body — the fix for cards whose row-mates have an extra
   price/meta line: instead of leaving blank space below the buttons, the
   buttons themselves absorb it and stay flush with the card's bottom edge,
   the same as their fuller siblings. */
.pt-card__actions { display: flex; gap: .5rem; margin-top: auto; padding-top: 1rem; }

.pt-card__btn {
    flex: 1;
    text-align: center;
    padding: .55rem .5rem;
    border-radius: var(--pt-radius-pill);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 700;
    transition: transform .2s var(--pt-ease), box-shadow .2s var(--pt-ease);
}

.pt-card__btn:hover { transform: translateY(-2px); }

.pt-card__btn--view {
    background: linear-gradient(135deg, var(--pt-lime-500), var(--pt-lime-600));
    color: #fff;
}

.pt-card__btn--quote {
    background: var(--pt-ink-800);
    color: #fff;
}

/* ============================================================================
   Home page rebuild — split hero, stats, destinations grid, tour-type
   banners, package grid, theme tiles, seasonal panel, gallery, partners,
   trusted-vendors band and blog cards. Everything here is additive: it reuses
   pt-section / pt-eyebrow / pt-heading / pt-link / pt-btn / pt-card /
   pt-badge-float / pt-price / pt-rail / pt-stats wherever the shape already
   matches, and only introduces new "hm-" classes for shapes that had no
   precedent anywhere else on the site.
   ========================================================================== */

/* --------------------------------------------------------- split hero --- */

.hm-hero { background: var(--pt-paper); }

.hm-hero__grid { display: grid; grid-template-columns: 1fr; }

@media (min-width: 960px) {
    .hm-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        min-height: clamp(480px, 62vh, 640px);
    }
}

.hm-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.hm-hero__copy h1 { max-width: 16ch; margin-bottom: 0; }
.hm-hero__copy h1 em { font-family: var(--pt-font-accent); font-style: italic; font-weight: 400; color: var(--pt-warning); }

.hm-hero__lede { color: var(--pt-text-muted); max-width: 30rem; font-size: var(--pt-text-lg); margin-bottom: .25rem; }

.hm-hero__media { position: relative; min-height: 280px; overflow: hidden; }

.hm-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A trust signal over the photo, top-left so it never collides with the
   search card floating up over the hero's *bottom* edge (see
   .tour-search-wrapper's negative margin) once the layout stacks on mobile. */
.hm-hero__badge {
    position: absolute;
    left: 1.5rem;
    top: 1.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.15rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-xl);
}

.hm-hero__badge-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--pt-lime-100);
    color: var(--pt-lime-700);
}

.hm-hero__badge-icon svg { width: 19px; height: 19px; }

.hm-hero__badge strong {
    display: block;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-base);
    font-weight: 700;
    color: var(--pt-heading);
    line-height: 1.15;
}

.hm-hero__badge small { display: block; font-size: var(--pt-text-xs); color: var(--pt-text-muted); }

@media (max-width: 640px) {
    .hm-hero__badge { left: 1rem; top: 1rem; padding: .6rem .85rem; gap: .55rem; }
    .hm-hero__badge-icon { width: 32px; height: 32px; }
    .hm-hero__badge-icon svg { width: 16px; height: 16px; }
    .hm-hero__badge strong { font-size: var(--pt-text-sm); }
}

/* --------------------------------------------------------------- stats --- */

/* A light strip with an icon circle per figure — distinct from the dark
   .pt-stats capsule the "why us" stats further down the page still use.
   Reuses the same colour-cycling idea .pt-feature__icon already applies. */
.hm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--pt-gap-lg);
}

.hm-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
}

@media (min-width: 780px) {
    .hm-stat + .hm-stat::before {
        content: "";
        position: absolute;
        left: calc(-1 * var(--pt-gap-lg) / 2);
        top: 8%;
        bottom: 8%;
        width: 1px;
        background: var(--pt-line);
    }
}

.hm-stat__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
}

.hm-stat:nth-child(4n+1) .hm-stat__icon { background: var(--pt-blue-100); color: var(--pt-blue-600); }
.hm-stat:nth-child(4n+2) .hm-stat__icon { background: var(--pt-lime-100); color: var(--pt-lime-700); }
.hm-stat:nth-child(4n+3) .hm-stat__icon { background: var(--pt-purple-soft); color: var(--pt-purple); }
.hm-stat:nth-child(4n+4) .hm-stat__icon { background: var(--pt-warning-soft); color: var(--pt-warning); }

.hm-stat__icon svg { width: 22px; height: 22px; }

.hm-stat__value {
    font-family: var(--pt-font-display);
    font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pt-heading);
}

.hm-stat__label { font-size: var(--pt-text-sm); color: var(--pt-text-muted); }

/* The search card floats up over the hero on its own negative margin, but it
   is a <div>, not a <section> — so theme.css's adjacent-section collapsing
   margin (which only matches section+section) never fires between it and
   whatever section comes next, and that next section's own full top padding
   (--pt-section-y, up to ~6rem) stacks on top of the search card's own
   bottom margin. The result reads as a large, unintentional blank band. This
   pulls the very next section back up to a normal, deliberate gap instead. */
.tour-search-wrapper + section { margin-top: -5.5rem; }

/* ------------------------------------------------------- destinations --- */

.hm-dest-toggle {
    display: inline-flex;
    gap: .35rem;
    padding: .3rem;
    margin-bottom: var(--pt-gap-lg);
    background: var(--pt-sand-deep);
    border-radius: var(--pt-radius-pill);
}

.hm-dest-pill {
    padding: .55rem 1.25rem;
    border: 0;
    border-radius: var(--pt-radius-pill);
    background: transparent;
    font-family: var(--pt-font-display);
    font-weight: 600;
    font-size: var(--pt-text-sm);
    color: var(--pt-text-muted);
    cursor: pointer;
    transition: background .2s var(--pt-ease), color .2s var(--pt-ease);
}

.hm-dest-pill.is-active { background: var(--pt-ink-800); color: #fff; }

.hm-dest-grid {
    display: grid;
    gap: var(--pt-gap);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) { .hm-dest-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .hm-dest-grid { grid-template-columns: repeat(6, 1fr); } }

.hm-dest-card {
    position: relative;
    display: block;
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    isolation: isolate;
    background: var(--pt-ink-700);
    box-shadow: var(--pt-shadow-sm);
    transition: transform .35s var(--pt-ease-out), box-shadow .35s var(--pt-ease-out);
}

.hm-dest-card:hover { transform: translateY(-6px); box-shadow: var(--pt-shadow-lg); }

.hm-dest-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--pt-ease-out);
}

.hm-dest-card:hover img { transform: scale(1.07); }

.hm-dest-card__tag {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    padding: .3rem .6rem;
    border-radius: var(--pt-radius-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--pt-ink-800);
    font-family: var(--pt-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.hm-dest-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(10, 24, 48, .85));
}

.hm-dest-card__body {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem;
    color: #fff;
}

.hm-dest-card__body svg { width: 15px; height: 15px; flex: none; color: var(--pt-warning); }
.hm-dest-card__body strong { display: block; font-family: var(--pt-font-display); font-size: var(--pt-text-base); }
.hm-dest-card__body small { display: block; font-size: var(--pt-text-xs); color: rgba(255, 255, 255, .7); }

.hm-dest-card__go {
    position: absolute;
    top: .7rem;
    right: .7rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--pt-ink-800);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s var(--pt-ease), transform .25s var(--pt-ease-out);
}

.hm-dest-card__go svg { width: 14px; height: 14px; }
.hm-dest-card:hover .hm-dest-card__go { opacity: 1; transform: none; }
.hm-dest-card--hidden { display: none; }

/* ------------------------------------------------------- tour banners --- */

.hm-tour-banners { display: grid; gap: var(--pt-gap-lg); grid-template-columns: 1fr; }

@media (min-width: 820px) { .hm-tour-banners { grid-template-columns: 1fr 1fr; } }

.hm-tour-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--pt-radius-xl);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .6rem;
    color: var(--pt-heading);
    box-shadow: var(--pt-shadow-lg);
    transition: transform .35s var(--pt-ease-out), box-shadow .35s var(--pt-ease-out);
}

.hm-tour-banner:hover { transform: translateY(-6px); box-shadow: var(--pt-shadow-xl); }

.hm-tour-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--hm-banner-img);
    background-size: cover;
    background-position: center;
    transition: transform .6s var(--pt-ease-out);
}

.hm-tour-banner:hover::before { transform: scale(1.06); }

/* A stronger, more even wash than a thin bottom fade — the eyebrow badge and
   heading need to read clearly no matter how bright or busy the CRM's own
   photo is, not only over its darkest corner. */
.hm-tour-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(248, 247, 242, .3), rgba(248, 247, 242, .55) 45%, rgba(248, 247, 242, .96) 78%);
}

.hm-tour-banner--dark { color: #fff; }
.hm-tour-banner--dark::after { background: linear-gradient(180deg, rgba(10, 24, 48, .25), rgba(10, 24, 48, .5) 45%, rgba(10, 24, 48, .95) 78%); }
.hm-tour-banner--dark h3 { color: #fff; }
.hm-tour-banner--dark .pt-eyebrow { color: var(--pt-blue-300); }
.hm-tour-banner--dark p { color: rgba(255, 255, 255, .78); }

/* A small pill backing behind the eyebrow — plain dash-and-italic text (as
   .pt-eyebrow reads on a paper background elsewhere) has nothing anchoring it
   when it sits directly over a photo, which is what made it feel unfinished
   here. */
.hm-tour-banner .pt-eyebrow {
    padding: .3rem .8rem .3rem .5rem;
    border-radius: var(--pt-radius-pill);
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(6px);
    width: fit-content;
}

.hm-tour-banner--dark .pt-eyebrow { background: rgba(255, 255, 255, .14); }

.hm-tour-banner__list { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.hm-tour-banner__list li { display: flex; align-items: center; gap: .5rem; font-size: var(--pt-text-sm); }
.hm-tour-banner__list svg { width: 15px; height: 15px; flex: none; color: var(--pt-lime-600); }
.hm-tour-banner--dark .hm-tour-banner__list svg { color: var(--pt-lime-300); }

/* --------------------------------------------------------- package grid --- */

/* Tuned for 6 cards (Tours/Index.cshtml takes 6) — 3-per-row on desktop reads
   as a clean 2x3 block rather than auto-fit's uneven "4 then 2" wrap. */
.hm-package-grid { display: grid; gap: var(--pt-gap-lg); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

@media (min-width: 860px) { .hm-package-grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------- theme tiles --- */

.hm-theme-grid { display: grid; gap: var(--pt-gap-lg) var(--pt-gap); grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) { .hm-theme-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .hm-theme-grid { grid-template-columns: repeat(8, 1fr); } }

.hm-theme-tile { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }

.hm-theme-tile__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--pt-shadow), 0 0 0 4px var(--pt-paper), 0 0 0 5px var(--pt-line);
    transition: transform .3s var(--pt-ease-out), box-shadow .3s var(--pt-ease-out);
}

.hm-theme-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--pt-ease-out); }
.hm-theme-tile:hover .hm-theme-tile__media { transform: translateY(-6px); box-shadow: var(--pt-shadow-lg), 0 0 0 4px var(--pt-paper), 0 0 0 5px var(--pt-blue-300); }
.hm-theme-tile:hover .hm-theme-tile__media img { transform: scale(1.1); }
.hm-theme-tile strong { font-family: var(--pt-font-display); font-size: var(--pt-text-sm); font-weight: 700; color: var(--pt-heading); }

/* ------------------------------------------------------------- seasonal --- */

.hm-season-section { position: relative; overflow: hidden; background: var(--pt-ink-800); }

.hm-season-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(120deg, rgba(10, 24, 48, .92), rgba(16, 42, 92, .86)),
        url("https://images.unsplash.com/photo-1500534623283-312aade485b7?fm=jpg&q=60&w=1800&auto=format&fit=crop") center / cover;
}

.hm-season { position: relative; z-index: 1; display: grid; gap: var(--pt-gap-xl); grid-template-columns: 1fr; }

@media (min-width: 900px) { .hm-season { grid-template-columns: 1fr 1.2fr; align-items: center; } }

.hm-season__copy .pt-eyebrow { color: var(--pt-lime-500); }
.hm-season__copy h2 { color: #fff; }
.hm-season__copy p { color: rgba(255, 255, 255, .72); max-width: 26rem; margin-bottom: 1.5rem; }

.hm-season__panel {
    background: var(--pt-paper);
    border-radius: var(--pt-radius-xl);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    box-shadow: var(--pt-shadow-xl);
    color: var(--pt-text);
}

.hm-season__months { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.1rem; }

.hm-season__month {
    padding: .45rem .8rem;
    border: 0;
    border-radius: var(--pt-radius-pill);
    background: var(--pt-sand-deep);
    color: var(--pt-text-muted);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: background .2s var(--pt-ease), color .2s var(--pt-ease);
}

.hm-season__month.is-active, .hm-season__month:hover { background: var(--pt-ink-800); color: #fff; }

.hm-season__title { font-size: var(--pt-text-base); margin-bottom: .85rem; }
.hm-season__title span { color: var(--pt-blue-600); }

.hm-season__grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }

@media (min-width: 520px) { .hm-season__grid { grid-template-columns: repeat(4, 1fr); } }

.hm-season__dest { position: relative; border-radius: var(--pt-radius); overflow: hidden; aspect-ratio: 3 / 4; isolation: isolate; }
.hm-season__dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-season__dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10, 24, 48, .85)); }
.hm-season__dest span { position: absolute; inset: auto 0 0; z-index: 1; padding: .5rem; }
.hm-season__dest strong { display: block; color: #fff; font-size: var(--pt-text-xs); }
.hm-season__dest small { display: block; color: rgba(255, 255, 255, .7); font-size: 10px; }

/* --------------------------------------------------------------- gallery --- */

.pt-rail--gallery { grid-auto-columns: minmax(200px, 55vw); }

@media (min-width: 600px) { .pt-rail--gallery { grid-auto-columns: minmax(200px, 32vw); } }

@media (min-width: 900px) {
    .pt-rail--gallery {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: minmax(200px, 16.5%);
        overflow-x: auto;
    }
}

.pt-rail--gallery > div { position: relative; border-radius: var(--pt-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.pt-rail--gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--pt-ease-out); }
.pt-rail--gallery > div:hover img { transform: scale(1.06); }

.hm-gallery-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.5rem .9rem .7rem;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 16, 32, .78) 100%);
    color: #fff; font-size: .82rem; font-weight: 600;
    line-height: 1.25;
}

/* -------------------------------------------------------------- partners --- */

/* Real vendor/partner logos (Settings > CMS > About Us > Gallery) rather than
   invented brand names — a variable-length, arbitrary-aspect-ratio set, so a
   horizontal rail (same pattern as .pt-rail--gallery) suits it better than a
   fixed grid that would wrap unevenly once there are more than a handful. */
.pt-rail--partners { grid-auto-columns: minmax(140px, 32vw); align-items: center; }

@media (min-width: 600px) { .pt-rail--partners { grid-auto-columns: minmax(150px, 18vw); } }

@media (min-width: 900px) {
    .pt-rail--partners {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: minmax(150px, 11%);
        overflow-x: auto;
    }
}

.hm-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    padding: 1rem 1.25rem;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line-soft);
    border-radius: var(--pt-radius-lg);
    transition: transform .25s var(--pt-ease-out), box-shadow .25s var(--pt-ease-out), border-color .25s var(--pt-ease);
}

.hm-partner:hover {
    transform: translateY(-4px);
    box-shadow: var(--pt-shadow-lg);
    border-color: var(--pt-blue-200);
}

.hm-partner img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ----------------------------------------------------------- vendors band --- */

.hm-vendors {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: var(--pt-radius-xl);
    background: linear-gradient(120deg, var(--pt-ink-900), var(--pt-blue-800) 65%, var(--pt-blue-700));
    color: #fff;
    display: grid;
    gap: var(--pt-gap-xl);
}

@media (min-width: 860px) { .hm-vendors { grid-template-columns: 1fr 1.3fr; align-items: center; } }

.hm-vendors__copy h2 { color: #fff; margin-bottom: .5rem; }
.hm-vendors__copy p { color: rgba(255, 255, 255, .75); margin: 0; max-width: 26rem; }

.hm-vendors__stats { background: none; box-shadow: none; padding: 0; }
.hm-vendors__stats::before { display: none; }

/* ----------------------------------------------------------------- blogs --- */

/* minmax's max is a fixed length, not 1fr, so a grid with only one or two
   posts (as on a Destination guide, which shows at most 3) sizes each card to
   a sane width instead of one stretching edge-to-edge across the whole column. */
.hm-blog-grid { display: grid; gap: var(--pt-gap-lg); grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); }

.hm-blog-card {
    display: block;
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line-soft);
    transition: transform .3s var(--pt-ease-out), box-shadow .3s var(--pt-ease-out);
}

.hm-blog-card:hover { transform: translateY(-6px); box-shadow: var(--pt-shadow-lg); }
.hm-blog-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.hm-blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.hm-blog-card__body { display: block; padding: 1rem 1.1rem 1.25rem; }
.hm-blog-card__body strong { display: block; font-family: var(--pt-font-display); font-size: var(--pt-text-base); color: var(--pt-heading); margin-bottom: .25rem; line-height: 1.35; }
.hm-blog-card__body small { display: block; color: var(--pt-text-faint); font-size: var(--pt-text-xs); }

.hm-blog-card__meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .65rem;
    color: var(--pt-text-faint);
    font-size: var(--pt-text-xs);
}

.hm-blog-card__meta svg { width: 12px; height: 12px; flex: none; }