/* ==========================================================================
   STYLE ICON — REUSABLE CAROUSEL

   Native CSS scroll-snap, not Swiper.

   WHY: Swiper is 42 KB gzipped, and the browser already ships everything it
   would give us here — momentum, drag, touch, keyboard, and a11y-correct
   focus scrolling — in the compositor, for free. Having just cut 366 KB to
   reach the performance target, spending 42 KB to re-implement native scroll
   would be moving backwards. This is ~90 lines of CSS + ~70 of JS, and it is
   smoother on a phone because the scrolling never touches the main thread.

   THE TRADE-OFF, stated plainly: no infinite loop. Native scroll has a start
   and an end. With 4-12 items per rail that is the honest behaviour anyway —
   an infinite loop over 4 packages just shows the same cards again. If a rail
   ever needs a true loop, that is the point to reconsider Swiper for that rail
   alone, not for all 23.

   Markup contract:
     <div class="rail" data-rail data-autoplay="6000">
       <div class="rail-track">
         <div class="rail-item">…card…</div>
       </div>
       <button class="rail-nav rail-prev" data-rail-prev>…</button>
       <button class="rail-nav rail-next" data-rail-next>…</button>
       <div class="rail-progress"><span data-rail-bar></span></div>
     </div>
   ========================================================================== */

.rail { position: relative; }

.rail-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--gutter, 1.5rem);
  overscroll-behavior-x: contain;   /* don't trigger browser back-swipe */
  -webkit-overflow-scrolling: touch;
  padding-block: 0.5rem;            /* room for card hover-lift, not clipped */

  /* The scrollbar is replaced by the progress rail below. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail-track::-webkit-scrollbar { display: none; }

.rail-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: calc(100% - 2rem);
}
/* The last item snaps to the END, not the start.
   With snap-align:start on every item and `mandatory` snapping, the final valid
   snap point is where the LAST item begins — roughly one card short of true
   maximum scroll. The rail could then never actually reach its end: the progress
   bar stalled at ~91% and the "next" arrow never disabled, offering a button
   that did nothing. Snapping the last item to the end restores a real snap
   point at max. */
.rail-item:last-child { scroll-snap-align: end; }
@media (min-width: 640px)  { .rail-item { width: calc(50% - 0.625rem); } }
@media (min-width: 1024px) { .rail-item { width: calc(33.333% - 0.834rem); } }
@media (min-width: 1536px) { .rail-item { width: calc(25% - 0.94rem); } }

/* ---------- Navigation ---------------------------------------------------- */
.rail-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;                    /* 44px */
  height: 2.75rem;
  translate: 0 -50%;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--si-gold);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease,
              opacity 0.3s ease, transform 0.3s ease;
}
.rail-nav:hover { background: var(--si-gold); color: var(--si-black); border-color: var(--si-gold); }
.rail-prev { left: -0.5rem; }
.rail-next { right: -0.5rem; }
/* At an end there is nowhere to go — say so rather than offering a dead button. */
.rail-nav[disabled] { opacity: 0.25; pointer-events: none; }
/* Touch already has swipe; the arrows are for pointers. */
@media (hover: none) { .rail-nav { display: none; } }

/* ---------- Progress ------------------------------------------------------ */
.rail-progress {
  position: relative;
  height: 2px;
  margin-top: 1.5rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.15);
  overflow: hidden;
}
.rail-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--si-gold), var(--si-gold-hover));
  transition: width 0.2s linear;
}

/* ---------- Grab cursor --------------------------------------------------- */
.rail-track { cursor: grab; }
.rail-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.rail-track.is-dragging * { pointer-events: none; }   /* don't fire links mid-drag */

@media (prefers-reduced-motion: reduce) {
  .rail-track { scroll-behavior: auto; }
  .rail-progress span, .rail-nav { transition: none; }
}

/* ==========================================================================
   DESTINATION TILE — the card the rail carries
   ========================================================================== */
.dest-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--si-navy);
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              border-color .45s ease, box-shadow .45s ease;
}
.dest-tile:hover, .dest-tile:focus-within {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--si-gold) 50%, transparent);
  box-shadow: var(--shadow-luxe), var(--shadow-gold);
}
.dest-tile-media { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.dest-tile-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.dest-tile:hover .dest-tile-media img { transform: scale(1.07); }
.dest-tile-noimg {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: color-mix(in oklab, var(--si-gold) 55%, transparent);
  background: linear-gradient(140deg, var(--si-navy), var(--si-black));
}
.dest-tile-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.92) 8%, rgba(0,0,0,.25) 55%, transparent);
}
.dest-tile-body { position: absolute; inset: auto 0 0 0; padding: 1.35rem; }
.dest-tile-country {
  display: flex; align-items: center; gap: .3rem;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .2em;
  color: var(--si-gold);
}
.dest-tile-name {
  margin-top: .35rem;
  font-family: "Playfair Display", serif; font-size: 1.5rem; line-height: 1.15;
  color: #fff;
}
.dest-tile-note {
  margin-top: .3rem; font-size: 12.5px; line-height: 1.5;
  color: rgba(255,255,255,.7);
}
.dest-tile-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .9rem; font-size: 12px; font-weight: 500; color: var(--si-gold);
  /* Revealed on hover, but never hidden from a keyboard: the stretched link
     below is the real, always-reachable target. */
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.dest-tile:hover .dest-tile-cta, .dest-tile:focus-within .dest-tile-cta {
  max-height: 2rem; opacity: 1;
}
.dest-tile-link { position: absolute; inset: 0; z-index: 2; }
.dest-tile-link:focus-visible { outline: 2px solid var(--si-gold); outline-offset: -4px; border-radius: 1.5rem; }

/* Touch has no hover — show the CTA outright. */
@media (hover: none) { .dest-tile-cta { max-height: 2rem; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dest-tile, .dest-tile-media img, .dest-tile-cta { transition: none; }
  .dest-tile:hover { transform: none; }
}

/* ==========================================================================
   GALLERY TILE
   ========================================================================== */
.gal-tile {
  position: relative; overflow: hidden; cursor: zoom-in;
  border-radius: 1.25rem; border: 1px solid var(--border);
  aspect-ratio: 4/5; background: var(--si-navy);
  transition: border-color .4s ease, box-shadow .4s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.gal-tile:hover, .gal-tile:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--si-gold) 50%, transparent);
  box-shadow: var(--shadow-luxe), var(--shadow-gold);
}
.gal-tile:focus-visible { outline: 2px solid var(--si-gold); outline-offset: 3px; }
.gal-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.gal-tile:hover img { transform: scale(1.08); }
.gal-tile-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.9) 5%, transparent 55%);
}
.gal-tile-cap { position: absolute; inset: auto 0 0 0; padding: 1.1rem; }
.gal-tile-place {
  display: flex; align-items: center; gap: .3rem;
  font-size: 9px; text-transform: uppercase; letter-spacing: .2em; color: var(--si-gold);
}
.gal-tile-title {
  display: block; margin-top: .25rem;
  font-family: "Playfair Display", serif; font-size: 1.15rem; color: #fff;
}
.gal-tile-zoom {
  position: absolute; top: 1rem; right: 1rem;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 999px; color: var(--si-black);
  background: var(--si-gold);
  opacity: 0; transform: scale(.8);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.gal-tile:hover .gal-tile-zoom, .gal-tile:focus-visible .gal-tile-zoom { opacity: 1; transform: scale(1); }

/* ==========================================================================
   BLOG TILE
   ========================================================================== */
.blog-tile {
  position: relative; display: flex; flex-direction: column; height: 100%;
  overflow: hidden; border-radius: 1.5rem;
  border: 1px solid var(--border); background: var(--si-navy);
  transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .45s ease, box-shadow .45s ease;
}
.blog-tile:hover, .blog-tile:focus-within {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--si-gold) 45%, transparent);
  box-shadow: var(--shadow-luxe);
}
.blog-tile-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.blog-tile-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.blog-tile:hover .blog-tile-media img { transform: scale(1.06); }
.blog-tile-noimg {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: color-mix(in oklab, var(--si-gold) 50%, transparent);
  background: linear-gradient(140deg, var(--si-navy), var(--si-black));
}
.blog-tile-cat {
  position: absolute; left: 1rem; top: 1rem;
  padding: .28rem .7rem; border-radius: 999px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--si-black); background: var(--si-gold);
}
.blog-tile-body { padding: 1.35rem; }
.blog-tile-meta {
  display: flex; gap: .4rem; font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--si-gold);
}
.blog-tile-title {
  margin-top: .5rem;
  font-family: "Playfair Display", serif; font-size: 1.3rem; line-height: 1.25; color: #fff;
}
.blog-tile-excerpt {
  margin-top: .5rem; font-size: 13px; line-height: 1.65; color: var(--si-grey);
}
.blog-tile-link { position: absolute; inset: 0; z-index: 2; }
.blog-tile-link:focus-visible { outline: 2px solid var(--si-gold); outline-offset: -4px; border-radius: 1.5rem; }

/* ==========================================================================
   QUOTE TILE (testimonials)
   ========================================================================== */
.quote-tile {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.9rem 1.6rem; border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .45s ease;
}
.quote-tile:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--si-gold) 45%, transparent);
}
.quote-mark { color: var(--si-gold); opacity: .5; }
.quote-text {
  margin-top: 1rem; flex: 1;
  font-family: "Playfair Display", serif; font-size: 1.15rem; line-height: 1.55; color: #fff;
}
.quote-foot {
  margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem;
}
.quote-initial {
  display: grid; place-items: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem;
  border-radius: 999px;
  font-family: "Playfair Display", serif; font-size: 1.1rem;
  color: var(--si-gold); background: color-mix(in oklab, var(--si-gold) 14%, transparent);
}
.quote-author { display: block; font-size: 13.5px; font-weight: 600; color: #fff; }
.quote-role { display: block; margin-top: .1rem; font-size: 11.5px; color: var(--si-grey); }

@media (prefers-reduced-motion: reduce) {
  .gal-tile, .gal-tile img, .gal-tile-zoom,
  .blog-tile, .blog-tile-media img, .quote-tile { transition: none; }
  .gal-tile:hover, .blog-tile:hover, .quote-tile:hover { transform: none; }
}

/* ==========================================================================
   QUICK SEARCH — "Plan your journey"
   Glass panel over the gold wash. Grid, not flex: the fields must line up in
   columns and stack cleanly, and a wrapping flex row gives neither.
   ========================================================================== */
.qs-panel {
  padding: 2.25rem;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-luxe);
}
.qs-head { max-width: 34rem; }
.qs-form {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: end;
}
@media (min-width: 720px)  { .qs-form { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .qs-form { grid-template-columns: repeat(5, 1fr) auto; } }

.qs-field { min-width: 0; }
.qs-field label {
  display: block;
  margin-bottom: .5rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--si-gold);
}
.qs-opt { text-transform: none; letter-spacing: 0; color: var(--si-grey); opacity: .6; }

.qs-input-wrap { position: relative; display: flex; align-items: center; }
.qs-ic {
  position: absolute;
  left: .85rem;
  display: grid;
  place-items: center;
  color: var(--si-gold);
  pointer-events: none;   /* the icon must never eat a click meant for the field */
}
.qs-input-wrap input,
.qs-input-wrap select {
  width: 100%;
  min-height: 3rem;
  padding: .75rem .9rem .75rem 2.6rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  outline: none;
  appearance: none;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.qs-input-wrap select {
  /* Native arrow removed by appearance:none — draw our own in gold. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 14px;
  padding-right: 2.4rem;
}
.qs-input-wrap input::placeholder { color: rgba(255,255,255,.35); }
.qs-input-wrap input:focus,
.qs-input-wrap select:focus {
  border-color: var(--si-gold);
  background: rgba(0,0,0,.65);
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}
/* The date control's own icon is invisible on a dark field; ours is already there. */
.qs-input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .45; cursor: pointer;
}
.qs-go { width: 100%; }
@media (min-width: 1100px) { .qs-go { width: auto; } }

@media (max-width: 640px) { .qs-panel { padding: 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .qs-input-wrap input, .qs-input-wrap select { transition: none; }
}

/* ==========================================================================
   PACKAGE FILTERS
   ========================================================================== */
.pf {
  padding: 1.5rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.pf-row { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 860px) { .pf-row { grid-template-columns: 2fr 1fr 1fr auto; align-items: center; } }

.pf-search { position: relative; display: flex; align-items: center; }
.pf-ic { position: absolute; left: .85rem; color: var(--si-gold); pointer-events: none; }
.pf-search input,
.pf-ctl select {
  width: 100%; min-height: 2.75rem;
  padding: .7rem .9rem; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(0,0,0,.45);
  color: #fff; font-family: "Poppins", sans-serif; font-size: 13.5px;
  outline: none; appearance: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.pf-search input { padding-left: 2.6rem; }
.pf-search input::placeholder { color: rgba(255,255,255,.35); }
.pf-ctl select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 13px;
  padding-right: 2.2rem;
}
.pf-search input:focus, .pf-ctl select:focus {
  border-color: var(--si-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}
.pf-reset {
  min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--si-gold); font-size: 12.5px; cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.pf-reset:hover { background: rgba(212,175,55,.12); border-color: var(--si-gold); }

.pf-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.pf-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem; padding: .45rem 1rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--si-grey); font-size: 12.5px; cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.pf-chip:hover { border-color: var(--si-gold); color: #fff; }
.pf-chip.is-on {
  background: linear-gradient(150deg, var(--si-gold-hover), var(--si-gold));
  border-color: var(--si-gold); color: var(--si-black); font-weight: 600;
}
.pf-chip-n { font-size: 10px; opacity: .7; }

.pf-ranges { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 860px) { .pf-ranges { grid-template-columns: 1fr 1fr; } }
.pf-range label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--si-grey);
}
.pf-range output { font-family: "Playfair Display", serif; font-size: 1rem; color: var(--si-gold); letter-spacing: 0; text-transform: none; }
.pf-range input[type="range"] {
  width: 100%; margin-top: .6rem; height: 3px; border-radius: 999px;
  background: rgba(212,175,55,.2); appearance: none; outline: none; cursor: pointer;
}
.pf-range input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; border-radius: 999px;
  background: linear-gradient(150deg, var(--si-gold-hover), var(--si-gold));
  border: 0; cursor: grab; box-shadow: 0 2px 10px -2px rgba(212,175,55,.6);
}
.pf-range input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 999px; border: 0;
  background: var(--si-gold); cursor: grab;
}
.pf-range input[type="range"]:focus-visible { outline: 2px solid var(--si-gold); outline-offset: 4px; }

.pf-count { margin-top: 1.25rem; font-size: 12px; color: var(--si-grey); }
.pf-count span { color: var(--si-gold); font-weight: 600; }

/* Filtering hides the WRAPPER; the grid must not keep its column. */
.pkg-slot[hidden] { display: none !important; }

.pf-empty { padding: 4rem 1.5rem; text-align: center; }
.pf-empty-ic {
  display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto 1.5rem;
  border-radius: 999px; color: var(--si-gold);
  background: color-mix(in oklab, var(--si-gold) 12%, transparent);
}
.pf-empty-t { font-family: "Playfair Display", serif; font-size: 1.75rem; color: #fff; }
.pf-empty-d { margin: .6rem auto 1.5rem; max-width: 26rem; font-size: 14px; color: var(--si-grey); }

.pf-admin-note {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: 2rem; padding: .75rem 1rem; border-radius: 12px;
  border: 1px dashed color-mix(in oklab, var(--status-warn) 40%, transparent);
  font-size: 12px; color: var(--status-warn);
}
.pf-admin-note a { color: var(--si-gold); text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pf-chip, .pf-reset, .pf-search input, .pf-ctl select { transition: none; }
}

/* ==========================================================================
   STAY / TRANSPORT CARDS (package details)
   ========================================================================== */
.stay-card {
  padding: 1.75rem;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.stay-ic {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 999px; color: var(--si-black);
  background: linear-gradient(150deg, var(--si-gold-hover), var(--si-gold));
  box-shadow: 0 8px 22px -8px var(--glow);
}
.stay-t { margin-top: 1.1rem; font-family: "Playfair Display", serif; font-size: 1.4rem; color: var(--foreground); }
.stay-d { margin-top: .5rem; font-size: 14px; line-height: 1.7; color: var(--muted-foreground); }

/* ==========================================================================
   DESTINATION CARD — badges + CMS-ready image placeholder
   ========================================================================== */

/* No photo uploaded yet: a branded gradient carrying the destination's own
   initial. Deliberately NOT a stock photograph — a generic beach behind
   "Varanasi" is a lie the client would have to notice and remove. */
.dest-tile-noimg {
  position: relative;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(212,175,55,.22), transparent 60%),
    linear-gradient(150deg, var(--si-navy), var(--si-black));
}
.dest-tile-initial {
  font-family: "Playfair Display", serif;
  font-size: 5rem; line-height: 1;
  color: rgba(212,175,55,.18);
  user-select: none;
}
.dest-tile-pin {
  position: absolute;
  color: rgba(212,175,55,.55);
}

.dest-tile-tags {
  position: absolute; left: 1rem; top: 1rem; z-index: 1;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.dest-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem; border-radius: 999px;
  font-size: 10px; font-weight: 500;
  color: #fff;
  background: rgba(0,0,0,.6);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dest-tag-gold {
  color: var(--si-black);
  background: linear-gradient(150deg, var(--si-gold-hover), var(--si-gold));
  border-color: var(--si-gold);
  font-weight: 600;
}

.dest-tile-meta {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .6rem;
}
.dest-meta-item {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 10.5px; color: var(--si-gold);
}

/* Filtering hides the WRAPPER; the grid must not keep its column. */
.dest-slot[hidden] { display: none !important; }

/* ==========================================================================
   GALLERY — masonry, frames, counters

   CSS columns, not grid. The images are mixed portrait/landscape, and a grid
   forces every tile into a row height it does not want — which is what left the
   old layout with holes in it. Columns let each frame keep its own aspect ratio
   and simply flow. The trade-off is reading order (down each column, not across
   rows), which is the right call for a gallery where order is not meaning.
   ========================================================================== */
.gal-masonry {
  columns: 1;
  column-gap: 1rem;
}
@media (min-width: 640px)  { .gal-masonry { columns: 2; } }
@media (min-width: 1024px) { .gal-masonry { columns: 3; } }
@media (min-width: 1536px) { .gal-masonry { columns: 4; } }

.gal-slot {
  break-inside: avoid;              /* never slice a photo across a column */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  margin-bottom: 1rem;
}
.gal-slot[hidden] { display: none !important; }

.gal-frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--si-navy);
  cursor: zoom-in;
  transition: border-color .4s ease, box-shadow .4s ease,
              transform .45s cubic-bezier(.22,1,.36,1);
}
.gal-frame:hover, .gal-frame:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--si-gold) 55%, transparent);
  box-shadow: var(--shadow-luxe), var(--shadow-gold);
}
.gal-frame:focus-visible { outline: 2px solid var(--si-gold); outline-offset: 3px; }
.gal-frame img {
  display: block;
  width: 100%;
  height: auto;                     /* the whole point: keep the real ratio */
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.gal-frame:hover img { transform: scale(1.07); }

.gal-frame-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.9) 4%, transparent 55%);
  opacity: 0; transition: opacity .4s ease;
}
.gal-frame:hover .gal-frame-scrim, .gal-frame:focus-visible .gal-frame-scrim { opacity: 1; }

.gal-frame-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 1.1rem; text-align: left;
  transform: translateY(8px); opacity: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}
.gal-frame:hover .gal-frame-cap, .gal-frame:focus-visible .gal-frame-cap {
  transform: translateY(0); opacity: 1;
}
.gal-frame-place {
  display: flex; align-items: center; gap: .25rem;
  font-size: 9px; text-transform: uppercase; letter-spacing: .2em; color: var(--si-gold);
}
.gal-frame-title {
  display: block; margin-top: .2rem;
  font-family: "Playfair Display", serif; font-size: 1.15rem; line-height: 1.2; color: #fff;
}
.gal-frame-zoom {
  position: absolute; top: .9rem; right: .9rem;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 999px; color: var(--si-black); background: var(--si-gold);
  opacity: 0; transform: scale(.8);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.gal-frame:hover .gal-frame-zoom, .gal-frame:focus-visible .gal-frame-zoom {
  opacity: 1; transform: scale(1);
}

/* Touch has no hover — the caption must not be permanently invisible. */
@media (hover: none) {
  .gal-frame-scrim, .gal-frame-cap { opacity: 1; transform: none; }
}

.gal-stat {
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  text-align: center;
}
.gal-stat-n {
  font-family: "Playfair Display", serif; font-size: 2rem; line-height: 1;
  color: var(--si-gold); font-variant-numeric: lining-nums proportional-nums;
}
.gal-stat-l {
  margin-top: .35rem; font-size: 10px;
  text-transform: uppercase; letter-spacing: .2em; color: var(--si-grey);
}

@media (prefers-reduced-motion: reduce) {
  .gal-frame, .gal-frame img, .gal-frame-scrim, .gal-frame-cap, .gal-frame-zoom { transition: none; }
  .gal-frame:hover { transform: none; }
  .gal-frame:hover img { transform: none; }
}

/* ==========================================================================
   SERVICE CARD — benefits, trust line, CTA
   Extends .luxe-card rather than duplicating it: the shine, corner brackets and
   lift already live there, so this file only adds what a service card has extra.
   ========================================================================== */
.svc-card { text-align: center; }
.svc-card.is-featured { border-color: color-mix(in oklab, var(--si-gold) 40%, transparent); }

/* An illustration REPLACES the icon disc — never both, which would put two
   competing focal points at the top of one small card. */
.svc-media {
  margin: -0.5rem -0.25rem 1.25rem;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(140deg, var(--si-navy), var(--si-black));
}
.svc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.svc-card:hover .svc-media img { transform: scale(1.06); }

.svc-benefits {
  margin-top: 1.1rem;
  display: grid;
  gap: .45rem;
  text-align: left;
}
.svc-benefits li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--si-grey);
  list-style: none;
}
.svc-benefits svg { color: var(--si-gold); flex: 0 0 auto; margin-top: .28rem; }

.svc-foot {
  margin-top: auto;              /* pins the footer to the card's base, so a
                                    row of cards ends level regardless of copy */
  padding-top: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.svc-trust {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--si-grey);
}
.svc-trust svg { color: var(--si-gold); }
.svc-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 2.75rem;           /* 44px */
  font-size: 12.5px; font-weight: 600; color: var(--si-gold);
  transition: gap .3s ease;
}
.svc-cta:hover { gap: .6rem; }

/* ---------- Process steps ---------- */
.proc-step {
  position: relative;
  padding: 1.75rem;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .45s ease;
}
.proc-step:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--si-gold) 45%, transparent);
}
.proc-n {
  font-family: "Playfair Display", serif; font-size: 2.25rem; line-height: 1;
  color: var(--si-gold); font-variant-numeric: lining-nums proportional-nums;
}
.proc-t { margin-top: .9rem; font-family: "Playfair Display", serif; font-size: 1.4rem; color: var(--foreground); }
.proc-d { margin-top: .45rem; font-size: 13px; line-height: 1.65; color: var(--muted-foreground); }

@media (prefers-reduced-motion: reduce) {
  .svc-media img, .svc-cta, .proc-step { transition: none; }
  .proc-step:hover { transform: none; }
}

/* ===== WhatsApp hand-off =================================================
   Rendered only inside a form's success state (includes/whatsapp.php).
   Sits on both light section cards and the dark booking confirmation, so it
   borrows the surrounding text colour instead of setting its own. */
.wa-handoff {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgb(37 211 102 / 0.35);
  border-radius: 1.25rem;
  background: rgb(37 211 102 / 0.08);
  text-align: left;
}
.wa-handoff-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgb(37 211 102 / 0.16);
  color: #25D366;
}
.wa-handoff-body { min-width: 0; flex: 1 1 auto; }
.wa-handoff-t {
  font-size: 0.9rem;
  font-weight: 600;
  color: inherit;
}
.wa-handoff-d {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.72;
}
.wa-handoff-cta { flex: none; }

/* Blocked pop-up: draw the eye to the button, since it is now the only route. */
.wa-handoff.is-blocked { border-color: rgb(37 211 102 / 0.6); }
.wa-handoff.is-blocked .wa-handoff-cta { animation: wa-nudge 1.6s ease-in-out 3; }
@keyframes wa-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (max-width: 640px) {
  .wa-handoff { flex-wrap: wrap; }
  .wa-handoff-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-handoff.is-blocked .wa-handoff-cta { animation: none; }
}

/* The contact form's post-submit anchor. The header is fixed, so the target
   needs clearance or the confirmation lands underneath it. */
#enquiry { scroll-margin-top: 8rem; }

/* ===== Departure dates (package sidebar) =============================
   Mirrors the client's printed format: a bulleted month on the left, the
   day on the right, with a hairline under each row. Renders only when the
   admin has filled the field in, so it never shows an empty heading. */
.dep-list {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
}
.dep-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgb(212 175 55 / 0.14);
}
.dep-row:last-child { border-bottom: 0; }

/* The bullet is drawn rather than a list-style marker, so it can carry the
   gold and sit on the text baseline. */
.dep-m {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  color: rgb(245 239 230 / 0.88);
}
.dep-m::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #D4AF37;
}
.dep-d {
  font-weight: 600;
  font-size: 1rem;
  color: #F4D77A;
  font-variant-numeric: tabular-nums;   /* keeps 05 / 19 aligned down the column */
  white-space: nowrap;
}