/* ==========================================================================
   Backpacker Tours — design system
   Built on Bootstrap 5.3. Everything below is project-specific; no Bootstrap
   source is redeclared, only extended.
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Base + typography
   3.  Utility atoms (eyebrow, trail rule, pills, buttons)
   4.  Header: topbar, navbar, offcanvas menu
   5.  Destination rail
   6.  Hero + search
   7.  Value strip
   8.  Rails (horizontal scroll-snap sliders)
   9.  Trip card
   10. Price-overlay card
   11. State card (multi-itinerary)
   12. Why-us panel
   13. Reviews
   14. Quick info
   15. Footer + contact float
   16. Chat widget + mobile action bar
   17. Tour detail page
   18. Listing page
   19. Motion + accessibility
   ========================================================================== */

/* 1. Tokens ================================================================ */
:root {
  /* Palette rebranded to the site's main colour, #ff8b23 (a warm signal
     orange lifted from the logo's own amber/burnt-orange band), with the
     logo's crimson kept only as a secondary "alert" accent. */
  --ink:        #16110e;   /* logo black, warmed very slightly */
  --ink-2:      #40332c;
  --ink-3:      #2b2621;   /* body copy / bullets — darkened for readability, was a lighter grey */
  --ink-4:      #786757;   /* fine meta labels / captions only */

  --brand:      #ff8b23;   /* main site colour — primary actions */
  --brand-700:  #c8630a;   /* deep orange — hover, dark fills */
  --brand-100:  #ffe0bd;
  --brand-050:  #fff3e6;

  --ember:      #c8630a;   /* burnt orange — secondary accent */
  --sun:        #f58a24;   /* amber — prices, ratings, badges */
  --sun-050:    #fff2e2;
  --olive:      #8a9612;   /* logo olive-lime — confirmations */
  --verify:     #6f7a0e;
  --alert:      #c81e0f;   /* logo crimson, kept for alerts/errors only */

  --paper:      #ffffff;
  --mist:       #fbf4ef;   /* warm tint, taken off the amber */
  --line:       #f0e2d9;
  --line-2:     #e0cbbe;

  --shadow-sm:  0 1px 2px rgba(22, 17, 14, .05), 0 4px 12px rgba(22, 17, 14, .05);
  --shadow-md:  0 2px 6px rgba(22, 17, 14, .06), 0 14px 34px rgba(22, 17, 14, .09);
  --shadow-lg:  0 4px 10px rgba(22, 17, 14, .07), 0 28px 64px rgba(22, 17, 14, .14);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 68px;
}

/* 2. Base + typography ===================================================== */
* { -webkit-tap-highlight-color: transparent; }

/* the hidden attribute has to beat component display rules */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  font-family: var(--body);
  color: var(--ink-2);
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
/* Horizontal-scroll guard lives on <html> only. Setting it on both html AND
   body (as an earlier pass did) forces overflow-y to auto on both elements
   per spec, which can turn body into its own scroll container separate from
   the viewport — a well-known way position:sticky headers silently stop
   sticking, especially in mobile Safari. One element, no ambiguity. */
html { overflow-x: hidden; max-width: 100%; }
img, video, svg, iframe, table { max-width: 100%; }

h1, h2, h3, h4, h5, .display-face {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.08;
}

.h-hero    { font-size: clamp(2.1rem, 6.2vw, 4.4rem); line-height: 1.02; }
.h-section { font-size: clamp(1.6rem, 3.6vw, 2.7rem); }
.h-card    { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.25; }

.lede { font-size: clamp(.95rem, 1.4vw, 1.06rem); color: var(--ink-3); max-width: 56ch; }

a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand); }

.container-bt { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

.section       { padding-block: clamp(2.75rem, 6vw, 5.25rem); }
.section--tight{ padding-block: clamp(2rem, 4vw, 3.25rem); }
.section--mist { background: var(--mist); }
.section--ink  { background: var(--ink); color: #cfc9e4; }
.section--ink h2, .section--ink h3 { color: #fff; }

/* 3. Utility atoms ========================================================= */
.eyebrow {
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-700);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
/* signature motif: a dashed trail with a pin, used as the section marker */
.eyebrow::before {
  content: "";
  width: 30px; height: 2px;
  background-image: linear-gradient(90deg, currentColor 55%, transparent 55%);
  background-size: 7px 2px;
  opacity: .6;
}
.eyebrow--light { color: var(--sun); }

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.section-head > div { min-width: 0; }

.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 700; line-height: 1;
  padding: .42rem .68rem; border-radius: 999px;
  background: var(--brand-050); color: var(--brand-700);
  white-space: nowrap;
}
.pill--sun   { background: var(--sun-050);  color: #8f4a05; }
.pill--good  { background: #f2f5da;         color: #5c650a; }
.pill--glass { background: rgba(255,255,255,.92); color: var(--ink); backdrop-filter: blur(8px); }
.pill--ink   { background: rgba(22,17,14,.72); color: #fff; backdrop-filter: blur(8px); }

.data { font-family: var(--mono); font-size: .78rem; letter-spacing: .01em; color: var(--ink-3); }

.price      { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 1.32rem; letter-spacing: -.02em; }
.price small{ font-family: var(--body); font-weight: 500; font-size: .72rem; color: var(--ink-4); }
.price-was  { font-size: .82rem; color: var(--ink-4); text-decoration: line-through; margin-left: .3rem; }

.stars { color: var(--sun); font-size: .84rem; letter-spacing: .04em; }

/* Buttons ---------------------------------------------------------------- */
.btn-bt {
  --_bg: var(--brand); --_fg: #fff; --_bd: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--body); font-weight: 700; font-size: .92rem; line-height: 1;
  padding: .82rem 1.35rem; border-radius: 999px;
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  cursor: pointer;
}
.btn-bt:hover  { color: var(--_fg); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255,139,35,.28); }
.btn-bt:active { transform: translateY(0); }
.btn-bt--ghost { --_bg: transparent; --_fg: var(--ink); --_bd: var(--line-2); }
.btn-bt--ghost:hover { --_bg: var(--ink); --_fg: #fff; --_bd: var(--ink); box-shadow: 0 10px 22px rgba(22,17,14,.2); }
.btn-bt--ink   { --_bg: var(--ink); --_bd: var(--ink); }
.btn-bt--ink:hover { box-shadow: 0 10px 22px rgba(22,17,14,.28); }
.btn-bt--sun   { --_bg: var(--sun); --_fg: #2a1200; --_bd: var(--sun); }
.btn-bt--sun:hover { color: #2a1200; box-shadow: 0 10px 22px rgba(245,138,36,.42); }
.btn-bt--wide  { width: 100%; }
.btn-bt--sm    { padding: .58rem 1rem; font-size: .84rem; }

.link-more { font-weight: 700; font-size: .88rem; color: var(--ink); display: inline-flex; align-items: center; gap: .35rem; }
.link-more:hover { color: var(--brand); }
.link-more i { transition: transform .18s ease; }
.link-more:hover i { transform: translateX(3px); }

/* 4. Header ================================================================ */
.topbar {
  background: var(--ink); color: #b9b3d1;
  font-size: .78rem; padding: .45rem 0;
}
.topbar a { color: #efecff; font-weight: 600; }
.topbar a:hover { color: var(--sun); }
.topbar .data { color: #8f89ab; }

.site-header {
  position: -webkit-sticky; /* older iOS Safari needs the prefix explicitly */
  position: sticky;
  top: 0; z-index: 1030;
  width: 100%;
  /* also the containing block for the centred mega panel */
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.navbar-bt { display: flex; align-items: center; gap: 1.25rem; height: var(--header-h); }

/* The logo is a supplied lockup (icon + wordmark), so it ships as one image. */
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; width: auto; height: 40px; }
@media (max-width: 400px) { .brand img { height: 34px; } }
.brand-mark img { height: 34px; }

.nav-main { display: none; align-items: center; gap: .25rem; margin-inline: auto; }
.nav-main > li { position: static; }
.nav-main a.nav-link-bt {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .58rem .8rem; border-radius: 999px;
  font-weight: 600; font-size: .92rem; color: var(--ink-2);
}
.nav-main a.nav-link-bt:hover,
.nav-main a.nav-link-bt.is-active { background: var(--brand-050); color: var(--brand-700); }

/* desktop mega menu */
.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(900px, calc(100vw - 3rem));
  margin-top: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 1.4rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* bridges any residual gap above the panel (the mega is positioned
   relative to the whole header, not the trigger link) so the pointer
   can travel from the nav link down into the dropdown without the
   hover chain breaking partway through */
.mega::before {
  content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.nav-main > li:hover .mega,
.nav-main > li:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.mega-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.mega h6 { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .6rem; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .12rem; }
.mega ul a { display: block; padding: .34rem .5rem; margin-inline: -.5rem; border-radius: 8px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.mega ul a:hover { background: var(--mist); color: var(--brand-700); }

/* narrow single-column dropdown, e.g. "Company" — anchored to its own
   trigger <li> (not the header), so it opens directly below the link
   instead of sliding to the left edge of the whole nav bar. */
.nav-main > li.has-narrow { position: relative; }
.mega--narrow { width: min(240px, calc(100vw - 3rem)); left: 0; right: auto; transform: translateX(0) translateY(8px); }
.nav-main > li.has-narrow:hover .mega--narrow,
.nav-main > li.has-narrow:focus-within .mega--narrow { transform: translateX(0) translateY(0); }

.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* header search ---------------------------------------------------------
   Desktop (lg+): an always-visible pill bar with an attached "Show trips"
   button, in the same rounded-card search language as the rest of the
   site. Below lg there isn't room for it in the header, so it collapses
   to a round icon button that expands a small panel on click. */
.hsearch { position: relative; display: flex; align-items: center; }
.hsearch-bar {
  display: flex; align-items: center; gap: 0;
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 999px;
  padding: .3rem .3rem .3rem 1rem; min-width: 300px; transition: border-color .18s ease;
}
.hsearch-bar:focus-within { border-color: var(--brand); }
.hsearch-bar > i { font-size: 1.1rem; color: var(--brand); margin-right: .6rem; flex: 0 0 auto; }
.hsearch-bar-text { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; }
.hsearch-bar-text label { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); line-height: 1.2; }
.hsearch-bar-text input {
  border: 0; outline: 0; background: none; width: 100%; padding: 0; margin-top: 1px;
  font: inherit; font-weight: 700; font-size: .86rem; color: var(--ink);
}
.hsearch-bar .btn-bt { border-radius: 999px; padding: .55rem 1.15rem; font-size: .84rem; flex: 0 0 auto; }
@media (max-width: 1199.98px) { .hsearch-bar { min-width: 230px; } .hsearch-bar-text label { display: none; } }

.hsearch-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-2);
  background: #fff; color: var(--ink); cursor: pointer; flex: 0 0 auto;
  transition: width .25s ease, border-radius .25s ease, background .2s ease;
}
.hsearch-btn i { font-size: 1.1rem; flex: 0 0 auto; margin-inline: 9px; }
.hsearch-btn:hover { border-color: var(--brand); color: var(--brand-700); }
.hsearch-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 20;
  width: min(360px, calc(100vw - 2rem));
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 1rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  transform-origin: top right;
}
.hsearch.is-open .hsearch-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.hsearch.is-open .hsearch-btn { background: var(--brand-050); border-color: var(--brand); color: var(--brand-700); }
.hsearch-panel form { display: flex; flex-direction: column; gap: .6rem; }
.hsearch-panel label { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.hsearch-field { display: flex; align-items: center; gap: .55rem; border: 1.5px solid var(--line-2); border-radius: 12px; padding: .55rem .8rem; }
.hsearch-field i { color: var(--ink-4); }
.hsearch-field input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; background: none; }
.hsearch-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hsearch-chips button {
  border: 1px solid var(--line-2); background: var(--mist); border-radius: 999px;
  padding: .3rem .65rem; font-size: .78rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.hsearch-chips button:hover { border-color: var(--brand); color: var(--brand-700); }
@media (max-width: 575.98px) {
  .hsearch-panel { position: fixed; left: 1rem; right: 1rem; top: calc(var(--header-h) + 8px); width: auto; transform-origin: top center; }
}

/* menu button — deliberately labelled, not a bare hamburger */
.menu-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem .5rem .9rem; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: #fff;
  font-weight: 700; font-size: .86rem; color: var(--ink); cursor: pointer;
}
.menu-btn:hover { border-color: var(--ink); }
.menu-btn i { font-size: 1.15rem; }

@media (min-width: 992px) {
  .nav-main { display: flex; }
  .menu-btn { display: none; }
}

/* offcanvas mobile menu */
.bt-offcanvas { width: min(400px, 92vw); border-left: none; }
.bt-offcanvas .offcanvas-header { border-bottom: 1px solid var(--line); padding: 1rem 1.15rem; }
.bt-offcanvas .offcanvas-body { padding: 0 0 6rem; }
.m-nav-group { border-bottom: 1px solid var(--line); }
.m-nav-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1rem 1.15rem; background: none; border: 0;
  font-family: var(--display); font-weight: 800; font-size: 1.02rem; color: var(--ink);
}
.m-nav-head i { color: var(--ink-4); transition: transform .2s ease; }
.m-nav-head[aria-expanded="true"] i { transform: rotate(180deg); color: var(--brand); }
.m-nav-list { list-style: none; margin: 0; padding: 0 1.15rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.m-nav-list a { display: flex; align-items: center; gap: .6rem; padding: .62rem .7rem; border-radius: 10px; font-weight: 600; color: var(--ink-2); }
.m-nav-list a:hover { background: var(--mist); }
.m-nav-list .data { margin-left: auto; }
.m-cta { padding: 1.15rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }

/* 5. Destination rail ====================================================== */
/* Liked reference: destination icon strip sitting above the hero on both
   desktop and mobile. */
.dest-rail { background: #fff; border-bottom: 1px solid var(--line); }
.dest-rail-group + .dest-rail-group { border-top: 1px solid var(--line); }
.dest-rail-label {
  display: block; font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); padding-top: .6rem;
}
.dest-rail-scroll {
  display: flex; gap: .35rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: .55rem 0; scrollbar-width: none;
}
.dest-rail-scroll::-webkit-scrollbar { display: none; }
.dest-item {
  scroll-snap-align: start; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: .28rem;
  min-width: 82px; padding: .5rem .55rem .45rem; border-radius: var(--r-md);
  color: var(--ink-2); position: relative;
}
.dest-item:hover { background: var(--mist); color: var(--brand-700); }
.dest-item i { font-size: 1.5rem; color: var(--ink); }
.dest-item:hover i { color: var(--brand); }
.dest-item span { font-size: .74rem; font-weight: 600; white-space: nowrap; }
.dest-item.is-active { color: var(--brand-700); }
.dest-item.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; translate: -50% 0;
  width: 26px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand);
}

/* 6. Hero ================================================================== */
.hero { position: relative; background: var(--ink); }
.hero-slide { position: relative; min-height: clamp(430px, 74vh, 640px); }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(22,17,14,.62) 0%, rgba(22,17,14,.18) 38%, rgba(22,17,14,.84) 100%),
    linear-gradient(90deg, rgba(22,17,14,.6) 0%, transparent 62%);
}
.hero-inner {
  position: relative; z-index: 2;
  min-height: clamp(430px, 74vh, 640px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  color: #fff;
}
.hero-inner h1, .hero-inner .h-hero { color: #fff; max-width: 17ch; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  color: #fff; padding: .4rem .8rem; border-radius: 999px; backdrop-filter: blur(6px);
  margin-bottom: 1rem;
}
.hero-sub { color: rgba(255,255,255,.86); max-width: 46ch; margin-top: .85rem; font-size: 1.02rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.1rem; }
.hero-proof span { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.9); }
.hero-proof i { color: var(--sun); }

.hero .carousel-indicators { margin-bottom: .9rem; }
.hero .carousel-indicators [data-bs-target] { width: 26px; height: 3px; border-radius: 3px; border: 0; background: rgba(255,255,255,.45); }
.hero .carousel-indicators .active { background: var(--sun); }

/* animated typing kicker, pinned above the carousel, persists across slides */
.hero-typing-bar {
  position: absolute; top: clamp(1.1rem, 3.4vw, 1.9rem); left: 0; z-index: 3;
  width: 100%; display: flex; justify-content: center; pointer-events: none;
}
.hero-typing-bar .container-bt { display: flex; }
.hero-typing-chip {
  display: inline-flex; align-items: baseline; gap: .5rem;
  background: rgba(22,17,14,.42); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; padding: .5rem 1rem; border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: clamp(.86rem, 1.6vw, 1.05rem);
}
.hero-typing-chip i { color: var(--sun); font-size: 1rem; }
.hero-typing-chip .typing-el { color: var(--sun); }
.hero-typing-chip .typing-cursor { color: var(--sun); }
@media (max-width: 575.98px) { .hero-typing-bar { top: .85rem; } .hero-typing-chip { padding: .4rem .75rem; } }

/* Search — Expedia-style date-led search, restated for a tour brand ------- */
.searchbar {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: .5rem; display: grid; gap: .35rem;
  grid-template-columns: 1fr; margin-top: 1.6rem;
}
.search-field {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .9rem; border-radius: var(--r-md); background: var(--mist);
  border: 1.5px solid transparent; min-width: 0;
}
.search-field:focus-within { border-color: var(--brand); background: #fff; }
.search-field > i { font-size: 1.25rem; color: var(--brand); flex: 0 0 auto; }
.search-field label { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.search-field input, .search-field select {
  border: 0; background: transparent; padding: 0; width: 100%;
  font-family: var(--body); font-weight: 700; font-size: .94rem; color: var(--ink);
  outline: none; appearance: none;
}
.search-field select { cursor: pointer; }
@media (min-width: 768px) {
  .searchbar { grid-template-columns: 1.4fr 1fr 1fr auto; align-items: stretch; }
  .searchbar .btn-bt { height: 100%; padding-inline: 1.6rem; }
}

/* 7. Value strip =========================================================== */
/* Liked reference: brand-value band with four icon statements. */
.valuestrip { background: var(--mist); }
.value-grid { display: grid; gap: 1.6rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.value-item {
  text-align: center; padding: 1.1rem .8rem; position: relative; border-radius: var(--r-lg);
  border: 1.5px solid transparent; background: transparent;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.value-item:hover {
  background: #fff; border-color: var(--brand-100); box-shadow: var(--shadow-md); transform: translateY(-3px);
}
@media (min-width: 992px) {
  .value-item + .value-item::before {
    content: ""; position: absolute; left: -.5rem; top: 12%; bottom: 12%;
    width: 1px; background: var(--brand-100); transition: opacity .22s ease;
  }
  .value-item:hover::before,
  .value-item:hover + .value-item::before { opacity: 0; }
}
.value-icon {
  width: 52px; height: 52px; margin: 0 auto .75rem; border-radius: 16px;
  display: grid; place-items: center; background: #fff; color: var(--brand);
  font-size: 1.5rem; box-shadow: var(--shadow-sm);
}
.value-item h3 { font-size: 1rem; margin-bottom: .35rem; }
.value-item p  { font-size: .86rem; color: var(--ink-3); margin: 0; }

/* 8. Rails ================================================================= */
.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; gap: .75rem;
  grid-auto-columns: calc((100% - .75rem) / 2);   /* fixed track, so it scrolls */
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-block: .35rem 1.25rem; padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 576px) { .rail { gap: 1rem; grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (min-width: 768px) { .rail { gap: 1rem; grid-auto-columns: calc((100% - 2rem) / 3); } }
@media (min-width: 992px) { .rail { gap: 1rem; grid-auto-columns: calc((100% - 3rem) / 4); margin-inline: 0; padding-inline: 0; } }

.rail-nav { display: none; gap: .4rem; }
@media (min-width: 992px) { .rail-nav { display: inline-flex; } }
.rail-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-2); background: #fff; color: var(--ink);
  font-size: 1.1rem; cursor: pointer; transition: .18s ease;
}
.rail-btn:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.rail-btn:disabled { opacity: .32; cursor: not-allowed; }

.rail-progress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: .35rem; }
.rail-progress span { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .15s linear, transform .15s linear; }
@media (min-width: 992px) { .rail-progress { display: none; } }

/* 9. Trip card ============================================================= */
/* Deliberately restrained: the sheet flagged competitor cards that push too
   much information onto the card face, especially on mobile. Everything that
   is not decision-critical lives on the detail page. */
.trip-card {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.trip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }

.trip-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.trip-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.trip-card:hover .trip-media img { transform: scale(1.05); }
.trip-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(180deg, transparent, rgba(22,17,14,.55));
}
.trip-badge { position: absolute; top: .7rem; left: .7rem; z-index: 2; }
.trip-save  { position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer; }
.trip-save:hover, .trip-save.is-on { background: var(--brand); color: #fff; }
.trip-meta {
  position: absolute; left: .7rem; right: .7rem; bottom: .7rem; z-index: 2;
  display: flex; gap: .35rem; flex-wrap: wrap;
}

.trip-body { padding: .95rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.trip-title { font-family: var(--display); font-weight: 800; font-size: 1.06rem; line-height: 1.22; color: var(--ink); }
.trip-card:hover .trip-title { color: var(--brand-700); }

.trip-route {
  display: flex; align-items: center; gap: .4rem; min-width: 0;
  font-size: .84rem; color: var(--ink-3);
}
.trip-route span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-route i { color: var(--brand); flex: 0 0 auto; }

.trip-tags { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tag-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .01em;
  color: var(--brand-700); background: var(--brand-050); border: 1px solid var(--brand-100);
  padding: .28rem .55rem; border-radius: 999px; line-height: 1;
}
.tag-chip i { font-size: .82rem; color: var(--brand); }
.tag-chip--alt { color: var(--verify); background: #f4f6e2; border-color: #e2e8bd; }
.tag-chip--alt i { color: var(--olive); }

.trip-foot {
  margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.trip-foot .price small { display: block; margin-top: 1px; }

/* Mobile keeps only: image, one meta pill, title, price, one action. */
@media (max-width: 575.98px) {
  .trip-card .trip-route,
  .trip-card .trip-tags { display: none; }
  .trip-card .trip-meta .pill:nth-child(n + 3) { display: none; }
  .trip-body { padding: .8rem .85rem .9rem; gap: .45rem; }
  .trip-title { font-size: 1rem; }
  .trip-foot { padding-top: .65rem; }
}

/* 10. Price-overlay card =================================================== */
/* Liked reference: horizontal slider where the price sits on the photograph. */
.poster-card {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 3 / 4; color: #fff; isolation: isolate;
}
.poster-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.poster-card:hover img { transform: scale(1.06); }
.poster-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,17,14,.42) 0%, transparent 34%, rgba(22,17,14,.86) 100%);
}
.poster-tag { position: absolute; top: .8rem; left: .8rem; z-index: 2; }
.poster-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1rem; }
.poster-body h3 { color: #fff; font-size: 1.22rem; margin-bottom: .3rem; }
.poster-body .data { color: rgba(255,255,255,.7); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
.poster-price { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: #fff; }
.poster-go {
  position: absolute; right: .9rem; bottom: 1rem; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); color: #fff;
  backdrop-filter: blur(6px); transition: .2s ease;
}
.poster-card:hover .poster-go { background: #fff; color: var(--ink); }

/* 11. State card (several itineraries, one card) ============================ */
/* Liked reference: one card that carries multiple itineraries for the same
   region, so the grid does not repeat the same destination five times. */
.state-card {
  display: grid; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.state-card { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .state-card { grid-template-columns: 42% 1fr; } }
.state-media { position: relative; min-height: 210px; }
.state-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.state-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,17,14,.5), rgba(22,17,14,.15) 45%, rgba(22,17,14,.7)); }
.state-media-body { position: absolute; inset: auto 0 0 0; padding: 1rem; z-index: 2; color: #fff; }
.state-media-body h3 { color: #fff; font-size: 1.42rem; margin-bottom: .2rem; }
.state-media-body .data { color: rgba(255,255,255,.75); }

.state-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; }
.state-tabs { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin-bottom: .9rem; }
.state-tabs::-webkit-scrollbar { display: none; }
.state-tab {
  flex: 0 0 auto; padding: .42rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line-2); background: #fff;
  font-size: .8rem; font-weight: 700; color: var(--ink-2); white-space: nowrap;
}
.state-tab:hover { border-color: var(--brand); color: var(--brand-700); }
.state-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.state-panel { display: none; }
.state-panel.is-active { display: block; animation: fadeUp .28s ease both; }
.state-panel h4 { font-size: 1.06rem; margin-bottom: .5rem; }
.state-facts { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.state-foot { margin-top: auto; padding-top: .85rem; border-top: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: .8rem; }

/* 12. Why-us panel ========================================================= */
.why-panel {
  background: var(--ink); border-radius: var(--r-xl);
  padding: clamp(1.25rem, 3vw, 2.25rem); color: #cfc9e4;
}
.why-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; }
@media (min-width: 992px) { .why-top { grid-template-columns: 46% 1fr; gap: 2.5rem; } }
.why-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.why-img img { width: 100%; height: 100%; object-fit: cover; }
.why-top h2 { color: #fff; font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
.why-top p { color: #a9a2c6; }

.why-grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.6rem; }
@media (min-width: 768px)  { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .why-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.why-tile { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-md); padding: 1rem; }
.why-tile i { font-size: 1.4rem; color: var(--sun); display: block; margin-bottom: .6rem; }
.why-tile h3 { color: #fff; font-size: .96rem; margin-bottom: .3rem; }
.why-tile p { font-size: .82rem; color: #a9a2c6; margin: 0; }

/* 13. Reviews ============================================================== */
.review-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
}
.review-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.review-photo img { width: 100%; height: 100%; object-fit: cover; }
.review-body { padding: 1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.review-text {
  font-size: .92rem; color: var(--ink-2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.review-more { font-size: .82rem; font-weight: 700; color: var(--ink-4); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.review-more:hover { color: var(--brand); }
.review-card.is-open .review-text { -webkit-line-clamp: unset; }
.review-who { display: flex; align-items: center; gap: .6rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line); }
.review-who img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.review-who b { display: block; font-size: .88rem; color: var(--ink); font-weight: 700; }
.review-who span { font-size: .76rem; color: var(--ink-4); }
.review-src { margin-left: auto; font-size: .68rem; color: var(--ink-4); display: flex; align-items: center; gap: .25rem; }

.rating-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; }
.rating-big { font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--ink); line-height: 1; }

/* 14. Quick info =========================================================== */
.quickinfo { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem; }
.quickinfo h3 { font-size: 1rem; margin-bottom: .75rem; }
.qi-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.qi-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem .9rem; border-radius: var(--r-md); background: var(--mist);
  font-weight: 600; font-size: .9rem; color: var(--ink-2);
}
.qi-item i:first-child { font-size: 1.2rem; color: var(--brand); }
.qi-item i:last-child  { margin-left: auto; color: var(--ink-4); transition: transform .18s ease; }
.qi-item:hover { background: var(--brand-050); color: var(--brand-700); }
.qi-item:hover i:last-child { transform: translateX(3px); }

/* 15. Footer =============================================================== */
.footer-shell { position: relative; background: var(--mist); color: var(--ink-3); padding-top: 5.5rem; border-top: 1px solid var(--line); }
.contact-float {
  position: absolute; top: 0; left: 50%; translate: -50% -50%;
  width: min(1080px, calc(100% - var(--gutter) * 2));
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; text-align: center;
}
@media (min-width: 768px) { .contact-float { grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 2rem; text-align: left; } }
.contact-call { display: flex; align-items: center; justify-content: center; gap: .9rem; }
@media (min-width: 768px) { .contact-call { justify-content: flex-start; } }
.contact-call i { font-size: 2.4rem; color: #25d366; }
.contact-call small { display: block; font-size: .82rem; color: var(--ink-3); }
.contact-call b { font-family: var(--display); font-size: 1.5rem; color: var(--ink); letter-spacing: -.02em; }
.contact-div { display: none; background: var(--line); }
@media (min-width: 768px) { .contact-div { display: block; height: 46px; } }
.social-row { display: flex; gap: .5rem; justify-content: center; }
@media (min-width: 768px) { .social-row { justify-content: flex-end; } }
.social-row a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--mist); color: var(--ink); font-size: 1.2rem; transition: .18s ease;
}
.social-row a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }

.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: clamp(2rem, 4vw, 3rem); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1100px){ .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-shell h4 { color: var(--ink); font-size: .98rem; margin-bottom: .85rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.footer-links a { color: var(--ink-3); font-size: .9rem; }
.footer-links a:hover { color: var(--brand-700); }
.footer-addr { display: flex; gap: .6rem; font-size: .86rem; line-height: 1.55; margin-top: 1rem; color: var(--ink-3); }
.footer-addr i { color: var(--brand); font-size: 1.1rem; flex: 0 0 auto; }

.newsletter { display: flex; gap: .5rem; margin-top: .8rem; }
.newsletter input {
  flex: 1; min-width: 0; background: #fff; border: 1.5px solid var(--line-2);
  border-radius: 999px; padding: .72rem 1rem; color: var(--ink); font-size: .88rem; outline: none;
}
.newsletter input::placeholder { color: var(--ink-4); }
.newsletter input:focus { border-color: var(--brand); }

.footer-reach { display: grid; gap: .55rem; }
.footer-reach a {
  display: flex; align-items: center; gap: .6rem; color: var(--ink-2); font-weight: 600; font-size: .9rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem;
  transition: border-color .18s ease, color .18s ease;
}
.footer-reach a i { color: var(--brand); font-size: 1.05rem; flex: 0 0 auto; }
.footer-reach a:hover { border-color: var(--brand); color: var(--brand-700); }

.footer-base {
  border-top: 1px solid var(--line); padding-block: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: .82rem; color: var(--ink-3);
}
.footer-base .made { display: inline-flex; align-items: center; gap: .35rem; }
.footer-base .made a { color: var(--ink-2); font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--line-2); }
.footer-base .made a:hover { color: var(--brand-700); border-color: var(--brand-700); }

/* 16. Chat widget + mobile action bar ====================================== */
.chat-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 1045;
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--brand); color: #fff; font-size: 1.5rem;
  box-shadow: 0 10px 30px rgba(255,139,35,.42); cursor: pointer;
  display: grid; place-items: center; transition: transform .2s ease;
}
.chat-fab:hover { transform: scale(1.06); }
.chat-fab .dot { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--sun); border: 2px solid #fff; }
@media (max-width: 991.98px) { .chat-fab { bottom: 84px; } }

.chat-panel {
  position: fixed; right: 16px; bottom: 84px; z-index: 1046;
  width: min(370px, calc(100vw - 32px));
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; transform-origin: bottom right;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.97);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.chat-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
@media (max-width: 991.98px) { .chat-panel { bottom: 152px; } }
.chat-head { background: var(--ink); color: #fff; padding: 1rem 1.1rem; display: flex; align-items: center; gap: .75rem; }
.chat-head h4 { color: #fff; font-size: .98rem; margin: 0; }
.chat-head p { margin: 0; font-size: .76rem; color: #a9a2c6; }
.chat-head .close-x { margin-left: auto; background: none; border: 0; color: #a9a2c6; font-size: 1.3rem; cursor: pointer; }
.chat-body { padding: 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; max-height: 62vh; overflow-y: auto; }
.chat-note { background: var(--brand-050); border-radius: var(--r-md); padding: .8rem .9rem; font-size: .86rem; color: var(--brand-700); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
@media (min-width: 400px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .3rem; }
.field input, .field select, .field textarea {
  width: 100%; border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  padding: .68rem .8rem; font-size: .9rem; font-family: var(--body); color: var(--ink);
  background: #fff; outline: none; transition: border-color .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.field textarea { resize: vertical; min-height: 80px; }
.form-note { font-size: .74rem; color: var(--ink-4); }

.btn-bt--whatsapp { --_bg: #25d366; --_bd: #25d366; --_fg: #fff; }

/* Post-submission success screen — replaces the form entirely. */
.form-success { text-align: center; padding: 1.2rem .5rem; }
.form-success-icon {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #eaf7ee; color: #25d366; font-size: 1.8rem; margin-bottom: .8rem;
}
.form-success h3 { margin-bottom: .4rem; }
.form-success p { color: var(--ink-3); font-size: .92rem; max-width: 38ch; margin: 0 auto 1.1rem; }
.form-success .btn-bt { max-width: 320px; margin-inline: auto; }

.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding: .6rem var(--gutter);
  display: flex; align-items: center; gap: .75rem;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
}
@media (min-width: 992px) { .action-bar { display: none; } }
.action-bar .price { font-size: 1.12rem; }
.action-bar .btn-bt { margin-left: auto; }
body.has-action-bar { padding-bottom: 72px; }
@media (min-width: 992px) { body.has-action-bar { padding-bottom: 0; } }

/* 17. Tour detail ========================================================== */
.gallery { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-lg); overflow: hidden; position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery > a { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery > a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 8 / 6.1; }
@media (max-width: 767.98px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery > a { display: none; aspect-ratio: 16 / 11; }
  .gallery > a:first-child { display: block; grid-column: auto; grid-row: auto; aspect-ratio: 16 / 11; }
}
.gallery-all {
  position: absolute; right: .8rem; bottom: .8rem; z-index: 3;
  background: rgba(255,255,255,.95); color: var(--ink);
  border: 0; border-radius: 999px; padding: .55rem .9rem;
  font-size: .82rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
}
.gallery-all:hover { background: #fff; box-shadow: var(--shadow-sm); }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 992px) { .detail-layout { grid-template-columns: 1fr 358px; gap: 2rem; } }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1rem, 2.4vw, 1.5rem); }
.panel + .panel { margin-top: 1rem; }
.panel h2 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin-bottom: .9rem; }
.panel h3 { font-size: 1rem; margin-bottom: .7rem; }

/* Highlights-of-the-tour — visually distinct from the plain white panels
   around it, so the "why this trip" summary actually stands out. */
.panel--highlights {
  background: var(--mist);
  border: 1.5px solid var(--line-2); border-left: 4px solid var(--brand);
  color: var(--ink); position: relative; overflow: hidden;
}
.panel--highlights::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px;
  border-radius: 50%; background: rgba(22,17,14,.04); pointer-events: none;
}
.panel--highlights h2 { color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.panel--highlights h2 i { color: var(--brand); }
.highlights-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; position: relative; z-index: 1; }
.highlights-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .94rem; color: var(--ink-2); }
.highlights-list i { color: var(--brand); font-size: 1.05rem; margin-top: .15rem; flex: 0 0 auto; }
.panel--highlights .highlights-note { color: var(--ink-3); font-size: .92rem; border-top: 1px solid var(--line-2); padding-top: .9rem; margin: 0; position: relative; z-index: 1; }

.detail-layout > aside { align-self: start; }
.buy-card { position: static; }
@media (min-width: 992px) {
  .buy-card { position: -webkit-sticky; position: sticky; top: calc(var(--header-h) + 16px); }
}
.buy-head { background: linear-gradient(120deg, #f4f7dc, #eef3cf); border-radius: var(--r-md); padding: .55rem .8rem; display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: #5c650a; margin-bottom: .9rem; }
.buy-price { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.buy-price .price { font-size: 1.9rem; }
.buy-emi { background: var(--brand-050); border-radius: var(--r-md); padding: .6rem .8rem; font-size: .82rem; color: var(--brand-700); font-weight: 600; margin-block: .8rem; display: flex; align-items: center; gap: .4rem; }
.buy-trust { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: center; margin-top: .8rem; font-size: .78rem; color: var(--ink-3); }
.buy-trust span { display: inline-flex; align-items: center; gap: .3rem; }

/* trip details + inclusions */
.deal-card {
  background: linear-gradient(140deg, var(--ink-2), var(--ink) 60%, #000 100%);
  border-radius: var(--r-lg); padding: 1.25rem; color: #fff;
}
.deal-card h3 { color: #fff; text-align: center; font-size: 1.14rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.25); margin-bottom: .9rem; }
.deal-row { display: flex; align-items: center; gap: .8rem; }
.deal-row + .deal-row { margin-top: .85rem; }
.deal-row i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); font-size: 1.15rem; flex: 0 0 auto; }
.deal-row b { display: block; font-family: var(--display); font-size: 1.02rem; font-weight: 700; }
.deal-row span { font-size: .8rem; color: rgba(255,255,255,.72); }

.incl-grid { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .incl-grid { grid-template-columns: 1fr 1fr; } }
.incl-item {
  display: flex; align-items: flex-start; gap: .75rem;
  border: 1.5px solid var(--brand-100); border-radius: 10px; padding: .8rem .9rem;
}
.incl-item i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-050); color: var(--brand); font-size: 1rem; flex: 0 0 auto; }
.incl-item b { display: block; font-size: .9rem; color: var(--ink); }
.incl-item span { font-size: .76rem; color: var(--ink-3); line-height: 1.35; }

/* option choosers */
.opt-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt-chip {
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px;
  padding: .55rem .95rem; font-size: .85rem; font-weight: 700; color: var(--ink-2); cursor: pointer;
  position: relative; transition: .16s ease;
}
.opt-chip:hover { border-color: var(--brand); }
.opt-chip.is-active { border-color: var(--brand); color: var(--brand-700); background: var(--brand-050); }
.opt-chip.is-active::after {
  content: "\2713"; position: absolute; top: -7px; right: -5px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: .64rem; display: grid; place-items: center;
}

.dur-row { display: flex; gap: .7rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
.dur-row::-webkit-scrollbar { display: none; }
.dur-opt { flex: 0 0 auto; width: 132px; cursor: pointer; }
.dur-opt-media { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; border: 2px solid transparent; }
.dur-opt-media img { width: 100%; height: 100%; object-fit: cover; }
.dur-opt.is-active .dur-opt-media { border-color: var(--brand); }
.dur-opt-media b { position: absolute; left: .4rem; bottom: .4rem; z-index: 2; background: rgba(22,17,14,.75); color: #fff; font-size: .72rem; padding: .2rem .5rem; border-radius: 999px; }
.dur-opt small { display: block; font-size: .68rem; color: var(--ink-4); margin-top: .4rem; }
.dur-opt .price { font-size: .98rem; }

/* itinerary — the trail motif returns as a day spine */
.itin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.itin { position: relative; }
.itin::before {
  content: ""; position: absolute; left: 27px; top: 12px; bottom: 12px; width: 2px;
  background-image: linear-gradient(180deg, var(--line-2) 55%, transparent 55%);
  background-size: 2px 8px;
}
@media (max-width: 575.98px) { .itin::before { left: 22px; } }
.itin-day { position: relative; border-bottom: 1px solid var(--line); }
.itin-day:last-child { border-bottom: 0; }
.itin-btn {
  width: 100%; display: flex; align-items: center; gap: .85rem; text-align: left;
  background: none; border: 0; padding: .95rem 0; cursor: pointer;
}
.itin-pin {
  width: 56px; flex: 0 0 auto; z-index: 2;
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .08em;
  background: #fff; color: var(--ink); border: 1.5px solid var(--line-2);
  border-radius: 999px; padding: .3rem 0; text-align: center;
}
@media (max-width: 575.98px) { .itin-pin { width: 46px; font-size: .58rem; } }
.itin-btn[aria-expanded="true"] .itin-pin { background: var(--brand); border-color: var(--brand); color: #fff; }
.itin-title { font-weight: 700; font-size: .94rem; color: var(--ink); flex: 1; min-width: 0; }
.itin-btn > i { color: var(--ink-4); transition: transform .2s ease; flex: 0 0 auto; }
.itin-btn[aria-expanded="true"] > i { transform: rotate(180deg); color: var(--brand); }
.itin-panel { display: none; padding: 0 0 1rem 4.4rem; font-size: .9rem; color: var(--ink-3); }
@media (max-width: 575.98px) { .itin-panel { padding-left: 3.6rem; } }
.itin-day.is-open .itin-panel { display: block; animation: fadeUp .25s ease both; }
.itin-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }

.expert-card { background: var(--mist); border-radius: var(--r-lg); padding: 1.1rem; }
.expert-card p { font-size: .84rem; color: var(--ink-3); margin-bottom: .8rem; }

/* PDF download band, bottom of the tour-detail content ------------------- */
.pdf-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
  background: var(--ink); color: #fff; border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem; margin-top: 1rem;
}
.pdf-band-left { display: flex; align-items: center; gap: 1rem; }
.pdf-band-icon {
  width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto;
  background: rgba(255,139,35,.18); border: 1px solid rgba(255,139,35,.4);
  display: grid; place-items: center; font-size: 1.4rem; color: var(--sun);
}
.pdf-band h3 { color: #fff; font-size: 1.05rem; margin-bottom: .2rem; }
.pdf-band p { color: rgba(255,255,255,.72); font-size: .85rem; margin: 0; }
@media (max-width: 575.98px) { .pdf-band { padding: 1.15rem; } .pdf-band .btn-bt { width: 100%; justify-content: center; } }

/* 18. Listing page ========================================================= */
.filter-bar {
  position: sticky; top: var(--header-h); z-index: 1020;
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); padding-block: .7rem;
}
.chip-row { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px;
  padding: .5rem .9rem; font-size: .85rem; font-weight: 700; color: var(--ink-2); cursor: pointer;
  transition: .16s ease; white-space: nowrap;
}
.chip:hover { border-color: var(--brand); color: var(--brand-700); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .count { font-family: var(--mono); font-size: .68rem; opacity: .65; }

.month-chip { flex-direction: column; gap: 0; padding: .45rem .9rem; min-width: 66px; text-align: center; }
.month-chip b { font-size: .88rem; line-height: 1.15; }
.month-chip small { font-family: var(--mono); font-size: .6rem; opacity: .6; }

.grid-trips { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 576px) { .grid-trips { gap: 1rem; } }
/* two cards per row on phones, as requested */
@media (min-width: 768px)   { .grid-trips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px)  { .grid-trips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state i { font-size: 2.6rem; color: var(--line-2); display: block; margin-bottom: .75rem; }

.page-hero { background: var(--ink); color: #cfc9e4; padding-block: clamp(1.75rem, 4vw, 3rem); }
.page-hero h1 { color: #fff; }
.crumbs { font-size: .8rem; color: #8f89ab; margin-bottom: .6rem; }
.crumbs a { color: #cfc9e4; }
.crumbs a:hover { color: var(--sun); }

/* 19. Motion + accessibility =============================================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

@keyframes typingBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.typing-el { color: var(--brand); }
.typing-cursor { display: inline-block; color: var(--brand); font-weight: 400; animation: typingBlink 1s step-end infinite; }
.value-typing.typing-el { color: var(--brand-700); }
.value-typing + .typing-cursor { color: var(--brand-700); }
@media (prefers-reduced-motion: reduce) { .typing-cursor { animation: none; } }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 2000;
  background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 0 0 10px 10px; font-weight: 700;
}
.skip-link:focus { top: 0; color: #fff; }

.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

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

@media print {
  .site-header, .topbar, .chat-fab, .chat-panel, .action-bar, .footer-shell { display: none !important; }
}

/* ==========================================================================
   20. Revision 2 — added after client review
   --------------------------------------------------------------------------
   20.1 Compact trip card (phones now show two per row)
   20.2 Contact card / footer overlap fix
   20.3 Location landing pages
   20.4 Image lightbox
   ========================================================================== */

/* 20.1 Compact trip card ---------------------------------------------------
   At two-up on a 360px screen a card is ~165px wide, so the type, padding and
   control sizes all step down. Route and date lines are already hidden. */
@media (max-width: 575.98px) {
  .trip-body   { padding: .65rem .7rem .75rem; gap: .35rem; }
  .trip-title  { font-size: .88rem; line-height: 1.28; }
  .trip-media  { aspect-ratio: 1 / 1; }
  .trip-meta   { left: .45rem; right: .45rem; bottom: .45rem; }
  .trip-meta .pill { font-size: .64rem; padding: .3rem .5rem; }
  .trip-badge  { top: .45rem; left: .45rem; font-size: .62rem; padding: .28rem .5rem; }
  .trip-save   { top: .45rem; right: .45rem; width: 28px; height: 28px; font-size: .85rem; }
  .trip-foot   { padding-top: .55rem; flex-direction: column; align-items: stretch; gap: .5rem; }
  .trip-foot .price { font-size: 1.02rem; }
  .trip-foot .price small { font-size: .62rem; }
  .trip-foot .price-was { font-size: .7rem; }
  .trip-foot .btn-bt { width: 100%; padding: .5rem .6rem; font-size: .78rem; }

  .poster-card  { aspect-ratio: 3 / 4.1; }
  .poster-body  { padding: .7rem; }
  .poster-body h3 { font-size: 1rem; }
  .poster-price { font-size: 1.05rem; }
  .poster-go    { width: 32px; height: 32px; right: .55rem; bottom: .7rem; font-size: .85rem; }

  .review-card .review-body { padding: .8rem; }
  .review-text { font-size: .84rem; -webkit-line-clamp: 5; }
}

/* 20.2 Contact card / footer overlap --------------------------------------
   The white contact card is pulled halfway out of the footer, so the space it
   needs depends on how tall it renders at that breakpoint. main.js measures it
   and writes --contact-h; these two rules reserve the room on both sides so it
   can never sit on top of the section above. */
.footer-shell {
  margin-top: calc(var(--contact-h, 190px) / 2 + 1.75rem);
  padding-top: calc(var(--contact-h, 190px) / 2 + 2.75rem);
}
.contact-float { top: 0; }

/* 20.3 Location landing pages ---------------------------------------------- */
.dest-rail--page { position: sticky; top: var(--header-h); z-index: 1020; }

.loc-hero { position: relative; background: var(--ink); overflow: hidden; }
.loc-hero-media { position: absolute; inset: 0; }
.loc-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.loc-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(22,17,14,.9) 0%, rgba(22,17,14,.62) 55%, rgba(22,17,14,.35) 100%);
}
.loc-hero-inner { position: relative; z-index: 2; padding-block: clamp(1.75rem, 5vw, 3.25rem); color: #fff; }
.loc-hero-inner h1 { color: #fff; font-size: clamp(1.9rem, 5vw, 3.2rem); }
.loc-hero-inner p { color: rgba(255,255,255,.84); max-width: 52ch; margin-top: .7rem; }
.loc-stats { display: flex; flex-wrap: wrap; gap: .5rem .5rem; margin-top: 1.1rem; }
.loc-stats .pill { background: rgba(255,255,255,.13); color: #fff; border: 1px solid rgba(255,255,255,.22); }

/* the Tour Package / Group Trip / Attractions switcher from the reference */
.loc-tabs { background: #fff; border-bottom: 1px solid var(--line); padding-block: .8rem; }
.loc-tab-row { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.loc-tab-row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .loc-tab-row { justify-content: center; } }
.loc-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px;
  padding: .6rem 1.1rem; font-weight: 700; font-size: .88rem; color: var(--ink-2);
  cursor: pointer; transition: .16s ease; white-space: nowrap;
}
.loc-tab i { font-size: 1.15rem; }
.loc-tab:hover { border-color: var(--brand); color: var(--brand-700); }
.loc-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.attraction-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; color: #fff; }
.attraction-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.attraction-card:hover img { transform: scale(1.06); }
.attraction-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(22,17,14,.85)); }
.attraction-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: .85rem; }
.attraction-body h3 { color: #fff; font-size: 1rem; margin-bottom: .15rem; }
.attraction-body span { font-size: .76rem; color: rgba(255,255,255,.75); }

.loc-intro { columns: 1; }
@media (min-width: 992px) { .loc-intro { columns: 2; column-gap: 2.5rem; } }
.loc-intro p { break-inside: avoid; }

/* 20.4 Lightbox ------------------------------------------------------------
   Replaces the grid modal. Images are contained, never cropped, and the frame
   is sized against the device viewport. */
.lb {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(14, 9, 7, .96);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
  padding: 4.5rem 5rem 4.5rem;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb-figure {
  margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center; gap: .85rem;
  width: 100%; height: 100%; min-height: 0;
}
.lb-img {
  display: block; min-height: 0;
  /* explicit, so the default grid stretch can't letterbox the frame */
  place-self: center;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 14px; background: #221510;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lb-cap { color: #cfc9e4; font-size: .86rem; text-align: center; max-width: 60ch; }

.lb-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .45rem;
  height: 48px; padding: 0 1.15rem 0 1rem; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  font-family: var(--body); font-weight: 700; font-size: .88rem;
  backdrop-filter: blur(10px); cursor: pointer; transition: .18s ease;
}
.lb-close i { font-size: 1.35rem; }
.lb-close:hover { background: #fff; color: var(--ink); transform: scale(1.04); }

.lb-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.4rem;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(10px);
  transition: .18s ease;
}
.lb-arrow:hover { background: #fff; color: var(--ink); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }

.lb-count {
  position: absolute; left: 50%; bottom: 1.15rem; translate: -50% 0; z-index: 3;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; color: #cfc9e4;
  background: rgba(255,255,255,.1); border-radius: 999px; padding: .45rem 1rem;
  backdrop-filter: blur(10px);
}

/* phones: full-bleed frame, thumb-reachable controls */
@media (max-width: 991.98px) { .lb { padding: 4.25rem 3.5rem; } }

@media (max-width: 767.98px) {
  /* arrows drop to the thumb zone, so the frame only needs side breathing room */
  .lb { padding: 4rem .75rem 5.5rem; }
  .lb-img { border-radius: 12px; }
  .lb-close { top: .75rem; right: .75rem; height: 42px; padding: 0 .95rem 0 .8rem; font-size: .82rem; }
  .lb-arrow { top: auto; bottom: 1rem; translate: none; width: 46px; height: 46px; }
  .lb-prev { left: 1.25rem; }
  .lb-next { right: 1.25rem; }
  .lb-count { bottom: 1.65rem; font-size: .7rem; padding: .35rem .8rem; }
  .lb-cap { font-size: .78rem; }
}
@media (max-width: 380px) { .lb-close span { display: none; } .lb-close { padding: 0; width: 44px; justify-content: center; } }

body.lb-open { overflow: hidden; }

/* the gallery tiles are buttons for the lightbox now */
.gallery > a { cursor: zoom-in; }

@media (max-height: 460px) {
  .lb { padding: 3.25rem 3.5rem; }
  .lb-cap { display: none; }
  .lb-figure { grid-template-rows: minmax(0, 1fr); }
}

/* ==========================================================================
   21. Six-up poster grid + sidebar filter listing
   --------------------------------------------------------------------------
   Booking, payment, dashboard and account/login were removed — this site
   is enquiry-only. Only 21.1-21.3 remain.
   21.1  Six-up poster grid
   21.2  Sidebar filter listing (tours.html)
   21.3  Mobile filter bar + sheets
   ========================================================================== */

/* 21.1 Six-up poster grid --------------------------------------------------- */
.grid-6 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 576px) { .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 992px) { .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 992px) { .grid-6 .poster-card { aspect-ratio: 3 / 4.2; } }
@media (min-width: 992px) {
  .grid-6 .poster-body h3 { font-size: 1.02rem; }
  .grid-6 .poster-price   { font-size: 1.08rem; }
  .grid-6 .poster-go      { width: 34px; height: 34px; font-size: .85rem; right: .6rem; bottom: .75rem; }
}

/* 21.2 Sidebar filter listing ---------------------------------------------- */
.listing-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 992px) { .listing-layout { grid-template-columns: 274px 1fr; gap: 1.5rem; } }

.filter-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 992px) { .filter-panel { position: sticky; top: calc(var(--header-h) + 14px); max-height: calc(100vh - var(--header-h) - 28px); overflow-y: auto; } }
.filter-panel-head { padding: 1rem 1.1rem .75rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.filter-panel-head h2 { font-size: 1.02rem; margin: 0; }
.filter-clear { background: none; border: 0; padding: 0; font-size: .8rem; font-weight: 700; color: var(--brand); cursor: pointer; }
.filter-group { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.filter-group:last-child { border-bottom: 0; }
.filter-group h3 { font-size: .88rem; margin-bottom: .7rem; }
.filter-search { position: relative; }
.filter-search i { position: absolute; left: .8rem; top: 50%; translate: 0 -50%; color: var(--ink-4); }
.filter-search input { width: 100%; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: .65rem .8rem .65rem 2.3rem; font-size: .88rem; outline: none; font-family: var(--body); }
.filter-search input:focus { border-color: var(--brand); }

.switch-row { display: flex; align-items: center; gap: .75rem; }
.switch-row div { flex: 1; }
.switch-row b { display: block; font-size: .9rem; color: var(--ink); }
.switch-row span { font-size: .78rem; color: var(--ink-3); }
.switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: .18s ease; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .18s ease; box-shadow: var(--shadow-sm); }
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--brand); outline-offset: 2px; }

.range-wrap { padding-top: .35rem; }
.range-vals { display: flex; justify-content: space-between; margin-bottom: .6rem; }
.range-vals span { font-family: var(--mono); font-size: .74rem; font-weight: 600; color: var(--ink); background: var(--mist); border: 1px solid var(--line-2); border-radius: 999px; padding: .25rem .6rem; }
.range-track { position: relative; height: 26px; }
.range-track input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 26px; margin: 0;
  background: none; appearance: none; pointer-events: none;
}
.range-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 4px; background: var(--line-2); }
.range-fill { position: absolute; top: 11px; height: 4px; border-radius: 4px; background: var(--brand); }
.range-track input[type="range"]::-webkit-slider-thumb {
  appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand); cursor: grab; box-shadow: var(--shadow-sm); margin-top: 0;
}
.range-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand); cursor: grab;
}

.check-row { display: flex; align-items: center; gap: .6rem; padding: .38rem 0; cursor: pointer; }
.check-row input { width: 17px; height: 17px; accent-color: var(--brand); flex: 0 0 auto; cursor: pointer; }
.check-row span { font-size: .88rem; color: var(--ink-2); flex: 1; }
.check-row .count { font-family: var(--mono); font-size: .7rem; color: var(--ink-4); }

.pick-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.pick {
  border: 1.5px solid var(--line-2); background: #fff; border-radius: var(--r-sm);
  padding: .45rem .75rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem; transition: .16s ease;
}
.pick:hover { border-color: var(--brand); }
.pick.is-active { border-color: var(--brand); background: var(--brand-050); color: var(--brand-700); }

/* the circular "select your experience" strip */
.exp-strip { background: var(--mist); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 1rem; margin-bottom: 1rem; }
.exp-strip-head { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .85rem; }
.exp-strip-head span { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-700); }
.exp-strip-head i { color: var(--sun); }
.exp-row { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
.exp-row::-webkit-scrollbar { display: none; }
.exp-item { flex: 0 0 auto; width: 90px; text-align: center; background: none; border: 0; padding: 0; cursor: pointer; }
.exp-item img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 3px solid transparent; transition: .18s ease; }
.exp-item span { display: block; font-size: .74rem; font-weight: 600; color: var(--ink-2); margin-top: .4rem; line-height: 1.2; }
.exp-item:hover img { border-color: var(--brand-100); }
.exp-item.is-active img { border-color: var(--brand); }
.exp-item.is-active span { color: var(--brand-700); }

/* 21.3 Mobile filter bar + sheets ------------------------------------------ */
.mfilter-bar {
  position: sticky; top: var(--header-h); z-index: 1025;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); padding: .6rem 0;
}
@media (min-width: 992px) { .mfilter-bar { display: none; } }
.mfilter-row { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; }
.mfilter-row::-webkit-scrollbar { display: none; }
.mfilter-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px;
  padding: .5rem .9rem; font-size: .84rem; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.mfilter-btn:hover, .mfilter-btn.is-active { border-color: var(--brand); color: var(--brand-700); }
.mfilter-btn .badge-n { background: var(--brand); color: #fff; border-radius: 999px; font-size: .64rem; padding: .1rem .35rem; }

.sheet-scrim {
  position: fixed; inset: 0; z-index: 1060; background: rgba(22,17,14,.55);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.sheet-scrim.is-open { opacity: 1; visibility: visible; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1061;
  background: #fff; border-radius: var(--r-xl) var(--r-xl) 0 0;
  max-height: 86vh; display: flex; flex-direction: column;
  transform: translateY(101%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.is-open { transform: translateY(0); }
.sheet-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.sheet-head h3 { margin: 0; font-size: 1.15rem; }
.sheet-head .sheet-x { background: none; border: 0; font-size: 1.5rem; color: var(--ink); cursor: pointer; padding: 0; line-height: 1; }
.sheet-head .filter-clear { margin-left: auto; }
.sheet-body { padding: .25rem 1.15rem 1rem; overflow-y: auto; flex: 1; }
.sheet-body .filter-group { padding-inline: 0; }
.sheet-foot { padding: .85rem 1.15rem; border-top: 1px solid var(--line); }


/* ==========================================================================
   22. Homepage additions — about, blog, contact CTA, mini explorer, gallery
   --------------------------------------------------------------------------
   22.1  Featured-trip ribbon (all trip cards, sitewide)
   22.2  Directional reveal modifiers (fade-left / fade-right / zoom-in)
   22.3  About section
   22.4  Departures grid (distinct from the homepage rail)
   22.5  Blog cards
   22.6  Contact / enquiry CTA + map placeholder
   22.7  Mini destination explorer
   22.8  Gallery teaser
   ========================================================================== */

/* 22.1 Featured-trip tag -----------------------------------------------------
   A horizontal tag marking spotlight departures — text reads normally, no
   rotation. Sits in the same top-left corner .trip-badge normally uses; when
   an info badge (seats-left, guaranteed) is also present on the card, the
   badge drops down a notch so the two stack cleanly instead of overlapping. */
.trip-ribbon {
  position: absolute; top: .7rem; left: .7rem; z-index: 3; max-width: calc(100% - 1.4rem);
  display: inline-flex; align-items: center; gap: .32rem; white-space: nowrap;
  background: linear-gradient(90deg, var(--brand), var(--brand-700));
  color: #fff; font-family: var(--mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  padding: .4rem .6rem; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(22,17,14,.28);
}
.trip-ribbon i { color: #fff; font-size: .8rem; flex: 0 0 auto; }
.trip-card.is-featured .trip-badge { top: 2.55rem; }
@media (max-width: 575.98px) {
  .trip-ribbon { top: .45rem; left: .45rem; font-size: .52rem; padding: .3rem .5rem; gap: .22rem; }
  .trip-ribbon i { font-size: .68rem; }
  .trip-card.is-featured .trip-badge { top: 2.1rem; }
}

/* 22.2 Directional reveal modifiers ----------------------------------------
   Same .reveal mechanism (main.js only toggles .is-in) — these just change
   the resting transform so cards can fade from a side or scale in, instead
   of only ever fading up. */
.reveal--left  { transform: translateX(-26px); }
.reveal--left.is-in  { transform: none; }
.reveal--right { transform: translateX(26px); }
.reveal--right.is-in { transform: none; }
.reveal--zoom  { transform: scale(.94); }
.reveal--zoom.is-in  { transform: none; }

/* 22.3 About section --------------------------------------------------------- */
.about-media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-since {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--brand-050); color: var(--brand-700);
  font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  border-radius: 999px; padding: .38rem .8rem; margin-bottom: .9rem;
}
.about-since i { color: var(--sun); }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1.5rem 0 1.6rem; }
.stat-card { min-width: 0; background: var(--mist); border-radius: var(--r-md); padding: 1rem .4rem; text-align: center; }
.stat-num { font-family: var(--display); font-weight: 800; font-size: clamp(1.05rem, 4vw, 1.7rem); color: var(--brand); letter-spacing: -.02em; line-height: 1; overflow-wrap: anywhere; }
.stat-label { display: block; margin-top: .35rem; font-size: .74rem; color: var(--ink-3); font-weight: 600; }

/* 22.4 Departures grid -------------------------------------------------------
   A grid presentation of the same trip-card component, distinct from the
   homepage rail: fixed columns instead of scroll-snap, and no arrows. */
.grid-departures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 992px) { .grid-departures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }

/* 22.4b Trip-type grid — Group / Private / Signature / Honeymoon --------- */
.grid-triptypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 992px) { .grid-triptypes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.triptype-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px; border-radius: var(--r-lg); overflow: hidden;
  color: #fff; padding: 1.2rem; isolation: isolate;
}
.triptype-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.triptype-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(22,17,14,.1) 0%, rgba(22,17,14,.86) 100%);
}
.triptype-card:hover img { transform: scale(1.06); }
.triptype-icon {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px); margin-bottom: .7rem; font-size: 1.2rem; color: var(--sun);
}
.triptype-card h3 { color: #fff; font-size: 1.05rem; margin-bottom: .25rem; }
.triptype-card p { color: rgba(255,255,255,.82); font-size: .84rem; margin-bottom: .8rem; }
.triptype-card .btn-bt { align-self: flex-start; }
@media (max-width: 575.98px) { .triptype-card { min-height: 210px; padding: 1rem; } }

/* 22.5 Blog cards ------------------------------------------------------------- */
.grid-blog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 992px) { .grid-blog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

.blog-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.blog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-media img { transform: scale(1.05); }
.blog-cat { position: absolute; top: .75rem; left: .75rem; z-index: 2; }
.blog-body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.blog-date { font-family: var(--mono); font-size: .7rem; color: var(--ink-4); letter-spacing: .04em; }
.blog-title { font-family: var(--display); font-weight: 800; font-size: 1.06rem; line-height: 1.28; color: var(--ink); }
.blog-card:hover .blog-title { color: var(--brand-700); }
.blog-excerpt { font-size: .88rem; color: var(--ink-3); margin: 0; flex: 1; }

/* 22.6 Contact / enquiry CTA -------------------------------------------------- */
.cta-panel { background: var(--ink); border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 2.75rem); color: #cfc9e4; overflow: hidden; }
.cta-panel h2 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.4rem 0 1.8rem; }

.cta-info { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .cta-info { grid-template-columns: 1fr; } }
.cta-card { display: flex; align-items: flex-start; gap: .7rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: .9rem 1rem; }
.cta-card i { font-size: 1.3rem; color: var(--sun); flex: 0 0 auto; margin-top: .1rem; }
.cta-card b { display: block; font-size: .84rem; color: #fff; }
.cta-card span, .cta-card a { font-size: .82rem; color: #a9a2c6; }
.cta-card a:hover { color: var(--sun); }

.map-placeholder {
  position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 280px; height: 100%;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(160deg, #241c38, #14101f);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  display: flex; align-items: center; justify-content: center;
}
.map-pin { position: relative; z-index: 2; text-align: center; }
.map-pin i { font-size: 2.4rem; color: var(--brand); filter: drop-shadow(0 6px 14px rgba(255,139,35,.5)); }
.map-pin b { display: block; margin-top: .5rem; color: #fff; font-size: .92rem; }
.map-pin span { display: block; font-size: .78rem; color: #a9a2c6; margin-top: .15rem; }
.map-pin .link-more { color: var(--sun); margin-top: .6rem; justify-content: center; }
.map-pin .link-more:hover { color: #fff; }
.map-ring { position: absolute; width: 90px; height: 90px; border: 1.5px solid rgba(255,139,35,.35); border-radius: 50%; animation: mapPulse 2.6s ease-out infinite; }
@keyframes mapPulse { from { transform: scale(.4); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-ring { animation: none; opacity: .3; } }

/* 22.7 Mini destination explorer ---------------------------------------------- */
.dest-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.dest-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.dest-card-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.dest-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dest-card:hover .dest-card-media img { transform: scale(1.06); }
.dest-card-count { position: absolute; top: .75rem; right: .75rem; z-index: 2; }
.dest-card-body { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.dest-card-body h3 { font-size: 1.08rem; }
.dest-card-body p { font-size: .86rem; color: var(--ink-3); margin: 0; flex: 1; }

/* 22.8 Gallery teaser ----------------------------------------------------------- */
.gallery-teaser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 576px) { .gallery-teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
@media (min-width: 992px) { .gallery-teaser { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-tile { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.gallery-tile::after {
  content: ""; position: absolute; inset: 0; background: rgba(22,17,14,.42);
  opacity: 0; transition: opacity .25s ease;
}
.gallery-tile-icon {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  transform: scale(.8);
}
.gallery-tile-icon i {
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink);
  display: grid; place-items: center; font-size: 1.3rem;
}
.gallery-tile:hover img { transform: scale(1.08); }
.gallery-tile:hover::after { opacity: 1; }
.gallery-tile:hover .gallery-tile-icon { opacity: 1; transform: scale(1); }

/* 22.9 Compact mobile sizing — dest-card and blog-card are now 2-up from the
   smallest screen (previously 1-up), so they need the same step-down treatment
   trip-card already got in §20.1. */
@media (max-width: 575.98px) {
  .dest-card-body { padding: .75rem .8rem .9rem; gap: .4rem; }
  .dest-card-body h3 { font-size: .96rem; }
  .dest-card-body p { font-size: .78rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .dest-card-count { top: .5rem; right: .5rem; font-size: .64rem; padding: .28rem .5rem; }

  .blog-body { padding: .8rem .85rem .95rem; gap: .4rem; }
  .blog-title { font-size: .92rem; }
  .blog-excerpt { font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .blog-cat { top: .5rem; left: .5rem; font-size: .62rem; padding: .28rem .5rem; }
}

/* 22.10 Join the community ------------------------------------------------- */
.community-panel {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(135deg, var(--ink-2), var(--ink) 65%, #000 100%);
  padding: clamp(1.8rem, 5vw, 3.2rem); color: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem;
}
@media (min-width: 992px) { .community-panel { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.community-panel::after {
  content: ""; position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none;
}
.community-copy .eyebrow { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.32); color: #fff; }
.community-copy h2 { color: #fff; margin-top: .6rem; }
.community-copy p { color: rgba(255,255,255,.88); max-width: 46ch; margin-top: .6rem; }
.community-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; position: relative; z-index: 1; }
@media (min-width: 576px) { .community-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.community-card {
  display: flex; align-items: center; gap: .85rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-lg); padding: 1.05rem 1.15rem; color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.community-card:hover { background: rgba(255,255,255,.2); transform: translateY(-3px); color: #fff; }
.community-card i.ph-fill, .community-card > i:first-child { font-size: 1.9rem; flex: 0 0 auto; }
.community-card b { display: block; font-family: var(--display); font-size: 1.02rem; }
.community-card span { display: block; font-size: .8rem; color: rgba(255,255,255,.82); margin-top: .1rem; }
.community-card .ph-arrow-up-right { margin-left: auto; font-size: 1.1rem; flex: 0 0 auto; opacity: .8; }

/* 23. Company pages — About, Founder, Team, Portfolio, Social ============= */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 768px)  { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem 1.1rem; text-align: center; transition: transform .22s ease, box-shadow .22s ease; }
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.team-photo { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; margin: 0 auto .8rem; border: 3px solid var(--brand-050); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: 1rem; margin-bottom: .1rem; }
.team-role { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); display: block; margin-bottom: .55rem; }
.team-card p { font-size: .84rem; color: var(--ink-3); margin-bottom: .7rem; }
.team-social { display: flex; justify-content: center; gap: .5rem; }
.team-social a { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--ink-2); }
.team-social a:hover { background: var(--brand); color: #fff; }

.founder-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (min-width: 992px) { .founder-layout { grid-template-columns: 36% 1fr; gap: 2.6rem; } }
.founder-media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; }
.founder-media img { width: 100%; height: 100%; object-fit: cover; }
.founder-quote {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--ink); border-left: 4px solid var(--brand); padding-left: 1.1rem; margin: 1.4rem 0;
  line-height: 1.4;
}
.founder-milestones { display: grid; gap: .9rem; margin-top: 1.4rem; }
.founder-ms { display: flex; gap: .9rem; align-items: flex-start; }
.founder-ms b { font-family: var(--mono); color: var(--brand-700); flex: 0 0 4.2rem; }
.founder-ms span { color: var(--ink-3); font-size: .92rem; }

.portfolio-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 768px) { .portfolio-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.social-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
@media (min-width: 576px) { .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .social-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.social-card {
  display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.2rem; transition: transform .2s ease, box-shadow .2s ease;
}
.social-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.social-card-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; flex: 0 0 auto; }
.social-card b { display: block; font-size: 1rem; color: var(--ink); }
.social-card span { display: block; font-size: .82rem; color: var(--ink-3); }
.social-card .ph-arrow-up-right { margin-left: auto; color: var(--ink-4); }

/* ==========================================================================
   23. Working filters + infinite scroll (tours.html)
   ========================================================================== */
.load-sentinel {
  display: none; align-items: center; justify-content: center; gap: .55rem;
  padding: 1.5rem 0; color: var(--ink-3); font-size: .88rem; font-weight: 600;
}
.load-sentinel.is-active { display: flex; }
.load-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--brand-100); border-top-color: var(--brand);
  animation: spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .load-spinner { animation-duration: 1.6s; } }
@keyframes spin { to { transform: rotate(360deg); } }