/* =================================================================
   KOHWAN — Premium Kashmir Travel
   Header · Hero (synced slider) · Footer
   ================================================================= */

:root {
  /* --- Brand palette ---------------------------------------------------
     Navy blue + mustard gold. These are the ONLY two hues the site uses;
     everything below is a tint, shade or neutral derived from them.      */
  --brand-navy:           #2e4755;   /* primary */
  --brand-navy-dark:      #2e4755;   /* hover / deeper shade */
  --brand-navy-soft:      #2e4755;   /* muted navy */
  --brand-gold:           #BD830D;   /* mustard accent */
  --brand-gold-soft:      #FAF8F3;   /* soft mustard tint */
  --brand-cream:          #FAF8F3;   /* warm off-white */
  --brand-text-secondary: #2e4755;   /* secondary body copy */
  --brand-white:          #FAF8F3;

  /* Page gradient — one system, every page. Very light navy at the top
     easing into a warm mustard-cream at the foot. Deliberately low
     saturation so text stays crisp over it. */
  --page-gradient: linear-gradient(180deg, #FAF8F3 0%, #FAF8F3 48%, #FAF8F3 100%);

  /* --- Legacy brand names ----------------------------------------------
     The whole stylesheet (and five sibling sheets) reference --green/--gold.
     Rather than rename ~900 call sites, the old names now resolve to the
     navy/gold palette, so one edit here re-skins everything.             */
  --green:        var(--brand-navy);        /* primary */
  --green-deep:   var(--brand-navy-dark);   /* darker shade */
  --green-soft:   var(--brand-navy-soft);
  --gold:         var(--brand-gold);        /* accent (mustard) */
  --gold-soft:    #BD830D;                  /* lighter mustard for hovers */
  --ink:          var(--brand-navy);        /* headings / primary text */
  --white:        #FAF8F3;
  --cream:        var(--brand-cream);       /* off-white surface */
  --cream-2:      var(--brand-gold-soft);
  --muted:        rgba(46, 71, 85, .69);

  /* Type — headings use the native system UI font; body uses Inter */
  --font-head: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 88px;
  --radius: 16px;
  --radius-lg: 22px;

  --shadow-sm: 0 6px 20px rgba(46, 71, 85, .1);
  --shadow-md: 0 18px 44px rgba(46, 71, 85, .18);
  --shadow-lg: 0 30px 70px rgba(46, 71, 85, .35);

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* --- Semantic colour layer ------------------------------------------
     Components reference THESE, not the raw brand colours. Every light
     value below is identical to the literal it replaced, so the default
     (light) theme renders exactly as before; [data-theme="dark"] at the
     foot of this file simply re-points them.                            */
  --primary:         var(--green);
  --primary-deep:    var(--green-deep);
  --primary-soft:    var(--green-soft);
  --on-primary:      #FAF8F3;        /* text/icons sitting ON --primary   */
  --on-primary-soft: #FAF8F3;
  --accent:          var(--gold);
  --on-accent:       var(--brand-navy-dark); /* text sitting ON gold    */
  --text-2:          var(--brand-text-secondary); /* body copy         */

  --bg:              var(--brand-cream);  /* opaque page fallback       */
  --surface:         #FAF8F3;     /* cards, panels, dropdowns          */
  --surface-2:       #FAF8F3;     /* subtle inset surfaces             */
  --panel:           rgba(250, 248, 243, .86); /* translucent panels   */
  --text-faint:      rgba(46, 71, 85, .46);     /* placeholders, disabled            */
  --border:          rgba(46, 71, 85, .1);
  --border-soft:     #FAF8F3;
  --border-strong:   rgba(46, 71, 85, .22);

  /* Overlay scrims — inverted in dark so glass panels stay legible. */
  --glass:           rgba(250, 248, 243, .1);
  --glass-strong:    rgba(250, 248, 243, .2);
  --glass-line:      rgba(250, 248, 243, .45);

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  /* One gradient for the whole site. Fixed so it reads as a single sheet
     of colour behind every page rather than repeating per scroll height. */
  background: var(--page-gradient);
  background-attachment: fixed;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.visually-hidden, .hidden-label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  --b-bg: var(--green);
  --b-fg: var(--on-primary);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .2px;
  background: var(--b-bg);
  color: var(--b-fg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background-color .3s var(--ease), color .3s var(--ease);
  white-space: nowrap;
}
.btn svg { transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:hover svg { transform: translateX(3px); }
.btn--lg { padding: 16px 32px; font-size: 1rem; }

.btn--gold { --b-bg: var(--gold); --b-fg: var(--on-accent); }
.btn--gold:hover { --b-bg: var(--gold-soft); }

.btn--ghost {
  background: rgba(250, 248, 243, .1);
  color: #FAF8F3;
  border: 1px solid rgba(250, 248, 243, .45);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(250, 248, 243, .2); }
.btn--ghost .play {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); color: var(--green);
}
.btn--ghost:hover svg { transform: none; }

/* Pill button with circular arrow badge (used in hero, header & footer CTA).
   Two colourways: --light (white pill, green arrow circle) and
   --solid (green pill, yellow arrow circle). */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 7px 7px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.btn-arrow__ic {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  transition: transform .4s var(--ease), background-color .3s var(--ease);
}
.btn-arrow:hover { transform: translateY(-2px); }
.btn-arrow:hover .btn-arrow__ic { transform: rotate(45deg); }
.btn-arrow--lg { font-size: .86rem; padding-left: 28px; }
.btn-arrow--lg .btn-arrow__ic { width: 46px; height: 46px; }

/* Light: white pill, primary-green arrow badge */
.btn-arrow--light {
  background: var(--surface);
  color: var(--green);
  box-shadow: 0 14px 34px rgba(46, 71, 85, .28);
}
.btn-arrow--light:hover { background: var(--surface); box-shadow: 0 20px 44px rgba(46, 71, 85, .4); }
.btn-arrow--light .btn-arrow__ic { background: var(--green); color: var(--on-primary); }

/* Solid: green pill, yellow arrow badge — used on the header */
.btn-arrow--solid {
  background: var(--green);
  color: var(--on-primary);
  box-shadow: 0 12px 30px rgba(46, 71, 85, .35);
}
.btn-arrow--solid:hover { background: var(--green-deep); }
.btn-arrow--solid .btn-arrow__ic { background: var(--gold); color: var(--ink); }

/* =================================================================
   HEADER
   ================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
              height .4s var(--ease);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.brand { display: inline-flex; align-items: center; z-index: 2; }
.brand__logo {
  height: 56px;
  width: auto;
  transition: height .4s var(--ease);
}
/* Two real logo images: transparent (over hero) vs sticky (solid header).
   The sticky logo shows whenever the header is solid — i.e. when scrolled
   OR on inner pages (which use a solid header from the top). */
.brand__logo--sticky { display: none; }
.site-header.is-scrolled .brand__logo--transparent,
body.inner-page .site-header .brand__logo--transparent { display: none; }
.site-header.is-scrolled .brand__logo--sticky,
body.inner-page .site-header .brand__logo--sticky { display: inline-block; }

/* Nav */
.nav__list { display: flex; align-items: center; gap: 6px; }
.nav__link {
  position: relative;
  display: inline-block;
  padding: 10px 17px;
  font-weight: 600;
  font-size: 1.02rem;
  color: rgba(250, 248, 243, .92);
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: #FAF8F3; }

.header__actions { display: flex; align-items: center; gap: 18px; z-index: 2; }
.header__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: .9rem;
  color: rgba(250, 248, 243, .92);
}
.header__phone svg { color: var(--gold); }
.header__phone:hover { color: #FAF8F3; }

/* Scrolled state */
.site-header.is-scrolled {
  background: rgba(250, 248, 243, .96);
  box-shadow: 0 8px 30px rgba(46, 71, 85, .1);
  height: 74px;
  backdrop-filter: saturate(1.4) blur(8px);
}
.site-header.is-scrolled .brand__logo { filter: none; height: 46px; }
.site-header.is-scrolled .nav__link { color: var(--green-deep); }
.site-header.is-scrolled .nav__link.is-active { color: var(--green); }
.site-header.is-scrolled .header__phone { color: var(--green-deep); }

/* Mobile nav toggle */
.nav-toggle { display: none; width: 30px; height: 22px; position: relative; z-index: 110; }
.nav__close { display: none; }            /* only shown inside the mobile drawer */
.nav-backdrop { display: none; }          /* only shown when the mobile drawer is open */
.nav-toggle span {
  position: absolute; left: 0; height: 2px; width: 100%;
  background: var(--surface); border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease), background-color .3s;
}
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 10px; }
.nav-toggle span:nth-child(3) { top: 18px; }
.site-header.is-scrolled .nav-toggle span { background: var(--green-deep); }

/* =================================================================
   HERO
   ================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: calc(var(--header-h) + 12px);
  padding-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}

/* Slides — a solid dark backdrop sits behind them so the page colour never
   shows through during a crossfade (prevents the whitish flash on loop). */
.hero__slides { position: absolute; inset: 0; z-index: -2; background: #2e4755; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  /* opacity crossfade + a slow zoom that eases back smoothly (no snap) */
  transition: opacity 1.6s var(--ease), transform 9s var(--ease);
  will-change: opacity, transform;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }

/* Scrim for legibility — darker on the left where text sits, plus top + bottom */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(46, 71, 85, .82) 0%, rgba(46, 71, 85, .55) 38%, rgba(46, 71, 85, .12) 68%, rgba(46, 71, 85, 0) 100%),
    linear-gradient(180deg, rgba(46, 71, 85, .55) 0%, rgba(46, 71, 85, 0) 22%),
    linear-gradient(0deg, rgba(46, 71, 85, .78) 0%, rgba(46, 71, 85, 0) 42%);
}

/* Hero content — two columns: copy on the left, booking form on the right.
   Spans the centred container so it lines up with the package deck below. */
.hero__content {
  position: relative;
  z-index: 3;                         /* above the deck so pickers overlay the cards */
  color: #FAF8F3;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  align-items: start;                 /* copy & form share the same top edge */
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(14px, 4vh, 46px); /* sit a little below the header */
}
.hero__copy { max-width: 600px; }

.hero__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -1px;
  text-shadow: 0 2px 30px rgba(46, 71, 85, .35);
  overflow-wrap: break-word;
}
.hero__title .hl {
  color: var(--gold);          /* brand yellow #C49320, not italic */
  font-style: normal;
}
.hero__subtitle {
  margin-top: 16px;
  max-width: 500px;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: #FAF8F3;                 /* fully white */
  font-weight: 500;            /* a touch bolder */
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }

.hero__trust { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.hero__trust p { font-size: .92rem; color: rgba(250, 248, 243, .9); }
.hero__trust strong { color: #FAF8F3; font-weight: 700; }

/* ---------- Hero booking form ---------- */
.hero__form { width: 100%; }
.bform {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 26px 24px 22px;
  box-shadow: 0 30px 70px rgba(46, 71, 85, .45);
  border: 1px solid rgba(250, 248, 243, .6);
}
.bform__head { margin-bottom: 16px; }
.bform__title {
  font-family: var(--font-head);
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.4px;
  color: var(--green-deep);
}
.bform__sub { font-size: .86rem; color: var(--muted); margin-top: 4px; line-height: 1.45; }

.bform__row { display: flex; gap: 12px; }
.bform__row .bform__field { flex: 1; min-width: 0; }

.bform__field {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 14px;
  margin-bottom: 12px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bform__field:focus-within {
  border-color: var(--green);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(46, 71, 85, .12);
}
.bform__ic { display: grid; place-items: center; color: var(--green); flex: 0 0 auto; }
.bform__field input,
.bform__field select {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: none;
  font-family: var(--font-body);
  font-size: .92rem; color: var(--ink);
  padding: 13px 0;
}
.bform__field input::placeholder { color: var(--text-faint); }
.bform__field select { color: var(--text-faint); cursor: pointer; appearance: none; }
.bform__field select:valid { color: var(--ink); }
.bform__field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }

.bform__submit {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--green);
  color: var(--on-primary);
  font-family: var(--font-body);
  font-weight: 700; font-size: .98rem;
  padding: 15px 22px;
  border-radius: 12px;
  margin-top: 4px;
  box-shadow: 0 14px 30px rgba(46, 71, 85, .28);
  transition: background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bform__submit svg { transition: transform .35s var(--ease); }
.bform__submit:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: 0 18px 38px rgba(46, 71, 85, .36); }
.bform__submit:hover svg { transform: translate(2px, -2px); }

/* Custom trigger fields (date + travellers) */
.bform__field--pick { position: relative; cursor: pointer; user-select: none; }
.bform__field--pick.is-open {
  border-color: var(--green);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(46, 71, 85, .12);
}
.bform__value {
  flex: 1; min-width: 0;
  font-size: .92rem; color: var(--ink);
  padding: 13px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bform__value.is-empty { color: var(--text-faint); }
.bform__chev { display: grid; place-items: center; color: var(--text-faint); transition: transform .3s var(--ease); flex: 0 0 auto; }
.bform__field--pick.is-open .bform__chev { transform: rotate(180deg); color: var(--green); }

/* Popover shell shared by calendar + dropdown */
.datepick, .bsel__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 56px rgba(46, 71, 85, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top center;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.bform__field--pick.is-open .datepick,
.bform__field--pick.is-open .bsel__menu {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}

/* ---- Date picker calendar ---- */
.datepick { width: 300px; padding: 16px; cursor: default; }
.datepick__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.datepick__title { font-weight: 700; font-size: .98rem; color: var(--green-deep); }
.datepick__nav { display: flex; gap: 6px; }
.datepick__nav button {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  color: var(--green); background: var(--surface-2);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.datepick__nav button:hover { background: var(--green); color: var(--on-primary); }
.datepick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepick__dow {
  text-align: center; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-faint); padding: 4px 0 6px;
}
.datepick__day {
  aspect-ratio: 1; width: 100%;
  display: grid; place-items: center;
  font-size: .84rem; color: var(--ink);
  border-radius: 9px;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.datepick__day:hover { background: #FAF8F3; }
.datepick__day.is-muted { color: rgba(250, 248, 243, .74); cursor: not-allowed; }
.datepick__day.is-muted:hover { background: none; }
.datepick__day.is-today { box-shadow: inset 0 0 0 1.5px var(--gold); font-weight: 700; }
.datepick__day.is-selected { background: var(--green); color: var(--on-primary); font-weight: 700; }
.datepick__day.is-selected:hover { background: var(--green-deep); }
.datepick__day.is-empty { pointer-events: none; }

/* ---- Travellers dropdown ---- */
.bsel__menu { width: 100%; min-width: 180px; padding: 6px; list-style: none; }
.bsel__opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px; border-radius: 10px;
  font-size: .9rem; color: var(--ink); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.bsel__opt:hover { background: var(--surface-2); }
.bsel__opt.is-selected { background: var(--green); color: var(--on-primary); font-weight: 600; }
.bsel__opt .bsel__check { display: none; }
.bsel__opt.is-selected .bsel__check { display: grid; place-items: center; }
/* multi-select variant (contact page "Select Your Destination") */
.bsel__menu--multi { max-height: 244px; overflow-y: auto; }
.bsel__opt--check { position: relative; }
.bsel__opt--check input { position: absolute; opacity: 0; pointer-events: none; }
.bsel__opt--check:hover { background: var(--surface-2); }
.bsel__opt--check:has(input:checked) { background: var(--green); color: var(--on-primary); font-weight: 600; }
.bsel__opt--check:has(input:checked) .bsel__check { display: grid; place-items: center; }

/* ---------- Deck: synced package carousel ---------- */
.hero__deck {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding-bottom: 20px;
}
.deck__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 11px;
}
.deck__kicker {
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: .74rem;
  font-weight: 600;
  color: rgba(250, 248, 243, .85);
}
.deck__controls { display: flex; gap: 10px; }
.deck__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--green);
  background: var(--surface);                 /* solid, no glassmorphism */
  box-shadow: 0 6px 16px rgba(46, 71, 85, .25);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.deck__arrow:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }

/* Carousel */
.carousel { overflow: hidden; touch-action: pan-y; }   /* horizontal swipes drive the deck */
.carousel__track {
  display: flex;
  gap: 22px;
  will-change: transform;
}

/* Cards */
.pkg-card {
  flex: 0 0 auto;
  width: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: rgba(250, 248, 243, .1);
  border: 1px solid rgba(250, 248, 243, .22);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 16px 40px rgba(46, 71, 85, .32);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease),
              border-color .55s var(--ease), opacity .55s var(--ease);
  opacity: .62;
  transform: translateY(10px) scale(.95);
  color: #FAF8F3;
}
.pkg-card.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  border-color: rgba(189, 131, 13, .9);
  box-shadow: 0 26px 60px rgba(46, 71, 85, .5);
}
.pkg-card__media { position: relative; height: 118px; overflow: hidden; }
.pkg-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.pkg-card.is-active .pkg-card__media img { transform: scale(1.06); }
.pkg-card__badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(46, 71, 85, .85);
  color: #FAF8F3;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .4px;
  padding: 6px 12px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.pkg-card__rating {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(250, 248, 243, .92);
  color: var(--green-deep);
  font-size: .74rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
}
.pkg-card__rating svg { color: var(--gold); }

.pkg-card__body { padding: 12px 16px 13px; }
.pkg-card__loc {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; letter-spacing: .4px;
  color: var(--gold-soft); text-transform: uppercase; font-weight: 600;
}
.pkg-card__title {
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 4px 0 10px;
}
.pkg-card__meta {
  display: flex; align-items: center; gap: 14px;
  font-size: .8rem; color: rgba(250, 248, 243, .8);
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(250, 248, 243, .16);
}
.pkg-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.pkg-card__meta svg { color: var(--gold-soft); }
.pkg-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px;
}
.pkg-card__price small { display: block; font-size: .72rem; color: rgba(250, 248, 243, .65); }
.pkg-card__price b {
  font-size: 1.3rem; font-weight: 700; color: #FAF8F3;
  font-family: var(--font-body);
}
.pkg-card__price b sup { font-size: .72rem; font-weight: 500; color: var(--gold-soft); }
.pkg-card__cta {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold); color: var(--on-accent);
  transition: transform .35s var(--ease), background-color .3s;
}
.pkg-card__cta:hover { transform: rotate(-8deg) scale(1.06); background: var(--gold-soft); }

/* Dots */
.hero__dots { display: flex; flex-wrap: wrap; gap: 10px; row-gap: 8px; max-width: 360px; margin-top: 12px; }
.hero__dots button {
  width: 34px; height: 4px; border-radius: 999px;
  background: rgba(250, 248, 243, .3);
  pointer-events: none; cursor: default;   /* decorative indicators, not clickable */
  transition: background-color .35s var(--ease), width .35s var(--ease);
}
.hero__dots button.is-active { background: var(--gold); width: 52px; }

/* =================================================================
   DESTINATIONS
   ================================================================= */
.dest {
  position: relative;
  padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 7vw, 88px);
  background-color: var(--surface-2);
  /* faint graph-paper grid */
  background-image:
    linear-gradient(rgba(46, 71, 85, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 71, 85, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
  overflow: hidden;
}
/* soft fade so the grid melts into the edges */
.dest::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 30%, transparent 55%, var(--surface-2) 100%);
  pointer-events: none;
}
.dest .container { position: relative; z-index: 1; }

.dest__head { text-align: center; margin-bottom: clamp(34px, 4vw, 54px); }
.dest__kicker {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.dest__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -.6px;
  color: var(--green-deep);
}

/* vertical padding gives the hover lift + shadow room (carousel clips x only visually) */
.dest__carousel { overflow: hidden; padding: 18px 0 38px; margin-block: -18px -22px; touch-action: pan-y; }
.dest__track {
  display: flex;
  gap: 24px;
  will-change: transform;
}

/* Each item: 5 across on desktop */
.dest-card {
  flex: 0 0 calc((100% - 4 * 24px) / 5);
  max-width: calc((100% - 4 * 24px) / 5);
  text-align: center;
}
.dest-card__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 18px 40px rgba(46, 71, 85, .18);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.dest-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.dest-card:hover .dest-card__media { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(46, 71, 85, .28); }
.dest-card:hover .dest-card__media img { transform: scale(1.08); }
.dest-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(46, 71, 85, .3), transparent 42%);
}
.dest-card__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.22rem;
  color: var(--green-deep);
  margin-top: 16px;
}
.dest-card__link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .92rem; font-weight: 600; color: var(--muted);
  margin-top: 4px;
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.dest-card__link svg { color: var(--gold); }
.dest-card:hover .dest-card__link { color: var(--green); gap: 9px; }

/* Dots */
.dest__dots {
  display: flex; justify-content: center; gap: 9px;
  margin-top: clamp(30px, 4vw, 46px);
}
.dest__dots button {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border-strong);
  transition: background-color .3s var(--ease), width .3s var(--ease), transform .3s var(--ease);
}
.dest__dots button:hover { transform: scale(1.15); }
.dest__dots button.is-active { background: var(--green); width: 26px; border-radius: 999px; }

/* =================================================================
   TOUR PACKAGES
   ================================================================= */
.tours {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 8vw, 104px) 0 clamp(60px, 8vw, 96px);
  /* Kashmir backdrop with a dark overlay so the cards stay legible */
  background:
    linear-gradient(rgba(46, 71, 85, .8), rgba(46, 71, 85, .88)),
    url('../images/hero/01-sonamarg.jpg') center / cover no-repeat;
}
.tours__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.tours__kicker {
  font-size: 1.05rem; font-weight: 600; color: var(--gold);
  margin-bottom: 6px;
}
.tours__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  letter-spacing: -.6px;
  color: #FAF8F3;
  text-shadow: 0 2px 24px rgba(46, 71, 85, .35);
}
.tours__controls { display: flex; gap: 12px; flex: 0 0 auto; }

/* round nav arrows — yellow with green icon; invert to green/white on hover */
.round-arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--green);
  background: var(--gold);
  box-shadow: 0 8px 22px rgba(46, 71, 85, .16);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.round-arrow:hover { background: var(--green); color: var(--on-primary); transform: translateY(-2px); }

.tours__carousel { overflow: hidden; padding: 16px 0 30px; margin-block: -16px -16px; touch-action: pan-y; }
/* arrows relocated below the cards on mobile (JS toggles .controls--mobile) */
.controls--mobile { display: flex; justify-content: center; gap: 14px; margin: 20px 0 2px; }
.tours__track { display: flex; gap: 26px; will-change: transform; }

/* Tour card — 4 across, lightly frosted glass with a soft border */
.tour-card {
  flex: 0 0 calc((100% - 3 * 26px) / 4);
  max-width: calc((100% - 3 * 26px) / 4);
  display: flex; flex-direction: column;
  background: rgba(250, 248, 243, .82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(250, 248, 243, .55);
  border-radius: 20px;
  padding: 14px 14px 18px;
  box-shadow: 0 16px 40px rgba(46, 71, 85, .1), inset 0 1px 0 rgba(250, 248, 243, .6);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.tour-card:hover {
  transform: translateY(-6px);
  border-color: rgba(46, 71, 85, .22);
  box-shadow: 0 28px 56px rgba(46, 71, 85, .18), inset 0 1px 0 rgba(250, 248, 243, .6);
}
.tour-card__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.tour-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.tour-card:hover .tour-card__media img { transform: scale(1.07); }
.tour-card__badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--green);
  color: var(--on-primary);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  padding: 6px 11px; border-radius: 999px;
}
.tour-card__badge--alt { background: var(--gold); color: var(--ink); }
.tour-card__price {
  align-self: flex-end;
  margin: -22px 6px 0 0;
  position: relative; z-index: 2;
  background: var(--surface);
  color: var(--green-deep);
  font-weight: 800; font-size: 1.02rem;
  padding: 8px 15px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(46, 71, 85, .18);
}
.tour-card__price sup { font-size: 1em; vertical-align: baseline; font-weight: 800; color: var(--gold); margin-right: 2px; }
.tour-card__price small { font-size: .68rem; font-weight: 600; color: var(--muted); }
.tour-card__body { padding: 6px 6px 0; display: flex; flex-direction: column; flex: 1; }
.tour-card__title {
  font-family: var(--font-head);
  font-weight: 700; font-size: 1.18rem;
  color: var(--green-deep); line-height: 1.25;
  margin-top: 8px;
}
.tour-card__excerpt {
  margin: 9px 0 16px;
  font-size: .9rem; line-height: 1.5; color: var(--muted);
  /* clamp to two lines */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Book Tour — full width, same look as the header button */
.tour-card__btn {
  width: 100%;
  justify-content: space-between;
  margin-top: auto;          /* pin to bottom so cards align */
}

/* =================================================================
   HOTELS — 3D coverflow carousel
   ================================================================= */
/* The grid texture moved off the section and onto ::before so it can be
   MASKED rather than covered by an opaque white vignette. The section itself
   is transparent now, so the page gradient runs behind it and the grid still
   fades out toward the edges exactly as before. */
.hotels {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 100px) 0 clamp(60px, 8vw, 96px);
  background-color: transparent;
}
.hotels::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(46, 71, 85, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 71, 85, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 24%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 80% at 50% 24%, #000 55%, transparent 100%);
  pointer-events: none;
}
.hotels .container { position: relative; z-index: 1; }

.hotels__head { text-align: center; margin-bottom: clamp(34px, 4vw, 52px); }
.hotels__kicker { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.hotels__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -.6px;
  color: var(--green-deep);
  margin-bottom: 22px;
}
.hotels__btn { margin: 0 auto; }
.hotels__controls { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }

/* Coverflow stage */
.hotels__stage {
  position: relative;
  height: clamp(420px, 48vw, 500px);
  perspective: 2600px;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y;
}
.hotels__stage.is-grabbing { cursor: grabbing; }
/* stop native image drag/selection from hijacking the swipe */
.hotels__stage img { -webkit-user-drag: none; user-select: none; }
.hotels__stage { user-select: none; }
/* hotel card reuses .tour-card visuals; only positioning + border change */
.hotel-card {
  position: absolute;
  top: 50%; left: 50%;
  width: 320px;
  max-width: 80vw;
  margin: 0;
  flex: none;
  background: var(--surface);                         /* solid so it reads on the white grid */
  /* no glass blur here — it re-rasterises blurry through the 3D rotation */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(46, 71, 85, .18);     /* visible border */
  box-shadow: 0 22px 50px rgba(46, 71, 85, .16);
  cursor: pointer;
  transition: transform .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease), box-shadow .4s var(--ease);
  backface-visibility: hidden;
}

/* =================================================================
   CAB RENTAL — paged 3×2 grid (grid bg flipped downward vs hotels)
   ================================================================= */
.cabs {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 100px) 0 clamp(56px, 7vw, 90px);
  background-color: transparent;
}
/* fade focused at the BOTTOM — the mirror of the hotels section */
.cabs::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(46, 71, 85, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 71, 85, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 78%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 80% at 50% 78%, #000 55%, transparent 100%);
  pointer-events: none;
}
.cabs .container { position: relative; z-index: 1; }

.cabs__head { text-align: center; margin-bottom: clamp(34px, 4vw, 52px); }
.cabs__kicker { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.cabs__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -.6px; color: var(--green-deep);
}

.cabs__viewport { overflow: hidden; }
.cabs__track { display: flex; transition: transform .6s var(--ease); }
.cabs__page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-content: start;
}
.cab-card {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 14px 34px rgba(46, 71, 85, .14);
  cursor: pointer;
}
.cab-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cab-card:hover img { transform: scale(1.07); }
.cab-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(46, 71, 85, .82) 0%, rgba(46, 71, 85, .2) 42%, transparent 70%);
}
.cab-card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--gold); color: var(--ink);
  font-size: .68rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
}
.cab-card__info { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #FAF8F3; }
.cab-card__name { font-family: var(--font-head); font-weight: 700; font-size: 1.18rem; }
.cab-card__meta {
  display: flex; align-items: center; gap: 14px; margin-top: 6px;
  font-size: .85rem; color: rgba(250, 248, 243, .9);
}
.cab-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.cab-card__meta svg { color: var(--gold-soft); }
.cab-card__meta b { color: #FAF8F3; font-weight: 700; }

.cabs__controls { display: flex; justify-content: center; gap: 12px; margin-top: clamp(30px, 4vw, 42px); }
.round-arrow:disabled { opacity: .35; cursor: not-allowed; }
.round-arrow:disabled:hover { background: var(--gold); color: var(--green); transform: none; }

/* =================================================================
   ACTIVITIES — bento grid over a foggy-mountain backdrop
   ================================================================= */
.activities {
  position: relative;
  padding: clamp(66px, 8vw, 104px) 0 clamp(64px, 8vw, 100px);
  /* light, airy misty-mountain backdrop with a soft white veil for legibility */
  background:
    linear-gradient(180deg, rgba(250, 248, 243, .62) 0%, rgba(250, 248, 243, .18) 26%, rgba(250, 248, 243, .3) 100%),
    url('../images/activities/foggy-bg.jpg') center / cover no-repeat;
}
.activities__head { text-align: center; margin-bottom: clamp(34px, 4vw, 52px); }
.activities__kicker { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.activities__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -.6px; color: var(--green-deep);
  margin-bottom: 22px;
}
.activities__btn { margin: 0 auto; }

.act-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.act-card {
  position: relative;
  grid-column: span 2;
  min-height: 290px;
  border-radius: 20px;
  overflow: hidden;
  display: block;
  box-shadow: 0 20px 44px rgba(46, 71, 85, .4);
  border: 1px solid rgba(250, 248, 243, .12);
}
.act-card--wide { grid-column: span 3; }
.act-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.act-card:hover img { transform: scale(1.07); }
.act-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(46, 71, 85, .9) 0%, rgba(46, 71, 85, .25) 45%, rgba(46, 71, 85, .1) 100%);
}
.act-card__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(250, 248, 243, .92); color: var(--green-deep);
  font-size: .72rem; font-weight: 700; letter-spacing: .3px;
  padding: 6px 12px; border-radius: 999px;
}
.act-card__body {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.act-card__name {
  font-family: var(--font-head); font-weight: 700; color: #FAF8F3;
  font-size: 1.3rem; line-height: 1.2; max-width: 70%;
  text-shadow: 0 1px 14px rgba(46, 71, 85, .4);
}
.act-card__foot { display: flex; align-items: center; gap: 12px; }
.act-card__price { color: #FAF8F3; font-weight: 800; font-size: 1.2rem; }
.act-card__price sup { font-size: .72rem; font-weight: 600; color: var(--gold-soft); margin-right: 1px; }
.act-card__go {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  transition: transform .35s var(--ease);
}
.act-card:hover .act-card__go { transform: rotate(45deg); }

/* Outline pill variant (light sections) */
.btn-arrow--outline {
  background: transparent;
  color: var(--green);
  border: 1.6px solid rgba(46, 71, 85, .35);
}
.btn-arrow--outline:hover { background: var(--green); color: var(--on-primary); border-color: var(--green); }
.btn-arrow--outline .btn-arrow__ic { background: var(--green); color: var(--on-primary); }

/* =================================================================
   WHY CHOOSE
   ================================================================= */
.why { background: transparent; padding: clamp(64px, 8vw, 104px) 0; }
.why__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.why__kicker {
  text-transform: uppercase; letter-spacing: 2.5px;
  font-size: .8rem; font-weight: 700; color: var(--green);
  margin-bottom: 14px;
}
.why__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.1;
  letter-spacing: -.6px; color: var(--green-deep);
}
.why__sub { margin-top: 16px; max-width: 520px; color: var(--ink); font-size: 1.02rem; }
.why__list { margin: 24px 0 28px; display: grid; gap: 13px; }
.why__list li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ink); font-size: .98rem; }
.why__tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--green); color: var(--on-primary); display: grid; place-items: center;
}
.why__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.why__stats {
  display: flex; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border);
}
.why__stat b { display: flex; align-items: center; gap: 3px; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: var(--green-deep); }
.why__stat b svg { color: var(--gold); width: 18px; height: 18px; }
.why__stat span { font-size: .85rem; color: var(--muted); }

.why__media { position: relative; }
.why__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 24px; box-shadow: var(--shadow-lg);
}
.why__badge {
  position: absolute; left: 18px; bottom: 18px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(250, 248, 243, .96);
  backdrop-filter: blur(6px);
  padding: 12px 16px; border-radius: 16px;
  box-shadow: 0 16px 38px rgba(46, 71, 85, .28);
}
.why__badge-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(46, 71, 85, .1); color: var(--green); flex: 0 0 auto; }
.why__badge-txt b { display: block; font-size: .92rem; color: var(--green-deep); }
.why__badge-txt small { font-size: .78rem; color: var(--muted); }
/* the support pill is now a button that opens the contact popup */
.why__badge { border: 0; cursor: pointer; text-align: left; font: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.why__badge:hover { transform: translateY(-2px); box-shadow: 0 22px 46px rgba(46, 71, 85, .34); }

/* ---------- Contact popup ---------- */
.cmodal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 18px; }
.cmodal[hidden] { display: none; }
.cmodal__backdrop { position: absolute; inset: 0; background: rgba(46, 71, 85, .6); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s var(--ease); }
.cmodal.is-open .cmodal__backdrop { opacity: 1; }
.cmodal__card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: var(--surface); border-radius: 22px; padding: 30px 26px 26px; box-shadow: 0 40px 90px rgba(46, 71, 85, .5); transform: translateY(14px) scale(.96); opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.cmodal.is-open .cmodal__card { transform: none; opacity: 1; }
.cmodal__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--green-deep); background: var(--surface-2); cursor: pointer; transition: background-color .2s var(--ease); }
.cmodal__x:hover { background: var(--border); }
.cmodal__title { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: var(--green-deep); }
.cmodal__sub { margin-top: 5px; color: var(--muted); font-size: .92rem; }
.cmodal__list { display: grid; gap: 12px; margin-top: 22px; }
.crow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.6px solid var(--border); border-radius: 14px; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); }
.crow:hover { border-color: var(--green); background: rgba(46, 71, 85, .04); transform: translateY(-2px); }
.crow__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
.crow--wa .crow__ic { background: rgba(46, 71, 85, .04); color: #2e4755; }
.crow--call .crow__ic { background: rgba(46, 71, 85, .1); color: var(--green); }
.crow--mail .crow__ic { background: rgba(189, 131, 13, .2); color: #2e4755; }
.crow__txt { min-width: 0; display: flex; flex-direction: column; }
.crow__txt b { font-size: .74rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; }
.crow__txt span { font-size: 1.02rem; font-weight: 700; color: var(--green-deep); word-break: break-word; }
.crow__go { margin-left: auto; color: var(--muted); transition: color .2s var(--ease), transform .2s var(--ease); }
.crow:hover .crow__go { color: var(--green); transform: translate(2px,-2px); }

/* =================================================================
   TESTIMONIALS  (grid texture over the page gradient, fading in downward)
   ================================================================= */
.tst, .gallery, .hblog {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}
/* hide the grid up top, let it appear as you move down toward the footer */
.tst::before, .gallery::before, .hblog::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(46, 71, 85, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 71, 85, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 22%, #000 55%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 22%, #000 55%);
  pointer-events: none;
}
.tst .container, .gallery .container, .gallery__stage, .gallery__controls, .hblog .container { position: relative; z-index: 1; }

.tst { padding: clamp(64px, 8vw, 100px) 0 clamp(56px, 7vw, 88px); }
.tst__head { text-align: center; margin-bottom: clamp(30px, 4vw, 48px); }
.tst__kicker { text-transform: uppercase; letter-spacing: 2.5px; font-size: .8rem; font-weight: 700; color: var(--green); margin-bottom: 10px; }
.tst__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing: -.6px; color: var(--green-deep); }

.tst__viewport { overflow: hidden; padding: 28px 4px 32px; touch-action: pan-y; }
.tst__track { display: flex; gap: 26px; will-change: transform; }
.tst-card {
  flex: 0 0 calc((100% - 2 * 26px) / 3);
  max-width: calc((100% - 2 * 26px) / 3);
  position: relative;
  background: var(--surface);
  border: 1px solid #FAF8F3;
  border-radius: 20px;
  padding: 40px 26px 28px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(46, 71, 85, .1);
}
.tst-card__num {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--green); color: var(--on-primary);
  display: grid; place-items: center; font-weight: 700; font-size: 1rem;
  box-shadow: 0 8px 20px rgba(46, 71, 85, .35);
}
.tst-card__quote { color: #2e4755; font-size: .98rem; line-height: 1.65; }
.tst-card__avatar {
  width: 92px; height: 92px; margin: 22px auto 14px;
  border-radius: 50%; padding: 5px;
  border: 2px dashed var(--gold);
}
.tst-card__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tst-card__name { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--green-deep); }
.tst-card__role { font-size: .85rem; color: var(--green); margin-top: 3px; font-weight: 600; }
.tst-card__stars { display: inline-flex; gap: 2px; margin-top: 12px; color: var(--gold); }
.tst__controls { display: flex; justify-content: center; gap: 12px; margin-top: clamp(28px, 3.5vw, 40px); }

/* =================================================================
   GALLERY — full-bleed centre-stage carousel (auto-scroll infinite)
   ================================================================= */
.gallery { padding: clamp(64px, 8vw, 100px) 0 clamp(64px, 8vw, 96px); }
.gallery__head { text-align: center; margin-bottom: clamp(34px, 4vw, 52px); }
.gallery__kicker { text-transform: uppercase; letter-spacing: 2.5px; font-size: .8rem; font-weight: 700; color: var(--green); margin-bottom: 10px; }
.gallery__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.6px; color: var(--green-deep); }

.gallery__stage {
  position: relative;
  touch-action: pan-y;
  height: clamp(320px, 40vw, 500px);
  margin-bottom: clamp(26px, 3vw, 40px);
}
.gallery__slide {
  position: absolute; top: 50%; left: 50%;
  width: clamp(280px, 54vw, 760px);
  aspect-ratio: 16 / 10;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 26px 60px rgba(46, 71, 85, .4);
  transition: transform .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
  will-change: transform, opacity;
}
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__slide::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .15); border-radius: 22px; }
.gallery__controls { display: flex; justify-content: center; gap: 12px; }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer {
  position: relative;
  color: var(--on-primary);
  background-color: var(--green-deep);            /* fallback */
  /* green-mountain backdrop with a deep overlay so text + icons stay crisp */
  background-image:
    linear-gradient(180deg, rgba(46, 71, 85, .9) 0%, rgba(46, 71, 85, .8) 45%, rgba(46, 71, 85, .93) 100%),
    url('../images/footer/footer-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer__cta {
  background: rgba(250, 248, 243, .05);
  border-bottom: 1px solid rgba(250, 248, 243, .12);
  backdrop-filter: blur(2px);
}
.footer__cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  padding: 56px var(--gutter);
}
.footer__cta-kicker {
  text-transform: uppercase; letter-spacing: 3px;
  font-size: .76rem; font-weight: 600; color: var(--gold-soft);
  margin-bottom: 10px;
}
.footer__cta-title {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); color: #FAF8F3; line-height: 1.15;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.6fr;
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 56px;
}
.footer__logo { height: 58px; filter: brightness(0) invert(1); margin-bottom: 20px; }
.footer__about { font-size: .92rem; font-weight: 300; max-width: 320px; color: #FAF8F3; }

.footer__social { display: flex; gap: 12px; margin-top: 24px; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(250, 248, 243, .08);
  border: 1px solid rgba(250, 248, 243, .14);
  color: #FAF8F3;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.footer__social a:hover { background: var(--gold); color: var(--on-accent); transform: translateY(-3px); border-color: var(--gold); }

.footer__heading {
  font-family: var(--font-head);
  font-size: 1.15rem; font-weight: 600; color: #FAF8F3;
  margin-bottom: 22px;
  position: relative; padding-bottom: 12px;
}
.footer__heading::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 34px; height: 2px; background: var(--gold);
}
.footer__links li { margin-bottom: 12px; }
.footer__links a, .footer__contact a {
  font-size: .92rem; color: #FAF8F3;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.footer__links a:hover { color: var(--gold-soft); padding-left: 6px; }

.footer__contact li {
  display: flex; gap: 12px; margin-bottom: 16px;
  font-size: .92rem; color: #FAF8F3;
}
.footer__contact svg { color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
.footer__contact a:hover { color: var(--gold-soft); }

.footer__newsletter {
  display: flex; margin-top: 24px;
  background: rgba(250, 248, 243, .07);
  border: 1px solid rgba(250, 248, 243, .16);
  border-radius: 999px;
  padding: 5px 5px 5px 6px;
  max-width: 360px;
}
.footer__newsletter input {
  flex: 1; background: none; border: 0; outline: none;
  color: #FAF8F3; padding: 10px 14px; font-size: .9rem;
}
.footer__newsletter input::placeholder { color: rgba(250, 248, 243, .85); }
.footer__newsletter button {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); color: var(--on-accent);
  display: grid; place-items: center;
  transition: transform .3s var(--ease), background-color .3s;
  flex: 0 0 auto;
}
.footer__newsletter button:hover { background: var(--gold-soft); transform: translateX(2px); }

.footer__bottom { border-top: 1px solid rgba(250, 248, 243, .1); }
.footer__bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-block: 24px;
  font-size: .85rem; color: #FAF8F3;
}
.footer__legal { display: flex; gap: 24px; }
.footer__legal a:hover { color: var(--gold-soft); }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* Stack hero copy + form below the wide-desktop range */
@media (max-width: 1024px) {
  .hero { min-height: auto; }
  .hero__content {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 30px;
    padding-top: 24px;
  }
  .hero__copy { max-width: 620px; }
  .hero__form { max-width: 460px; }

  /* 4 destination cards across */
  .dest-card { flex-basis: calc((100% - 3 * 24px) / 4); max-width: calc((100% - 3 * 24px) / 4); }
  /* 3 tour cards across */
  .tour-card { flex-basis: calc((100% - 2 * 26px) / 3); max-width: calc((100% - 2 * 26px) / 3); }
  /* activities: 2-up bento */
  .act-grid { grid-template-columns: repeat(2, 1fr); }
  .act-card, .act-card--wide { grid-column: span 1; }
  .act-card__name { max-width: 78%; }
}

@media (max-width: 760px) {
  /* 3 destination cards across */
  .dest-card { flex-basis: calc((100% - 2 * 24px) / 3); max-width: calc((100% - 2 * 24px) / 3); }
  /* 2 tour cards across */
  .tour-card { flex-basis: calc((100% - 26px) / 2); max-width: calc((100% - 26px) / 2); }
  /* 2 cabs per row */
  .cabs__page { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }

  /* Mobile nav */
  .nav-toggle { display: block; }
  .header__phone { display: none; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(82vw, 360px);
    background: var(--green-deep);
    padding: calc(var(--header-h) + 20px) 32px 40px;
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    box-shadow: var(--shadow-lg);
    z-index: 200;                 /* sit above the hero content/form */
    overflow-y: auto;
  }
  body.nav-open .nav { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  /* High-specificity white links so they stay visible even when the sticky
     header is scrolled (.is-scrolled would otherwise darken them to green). */
  .site-header .nav .nav__link,
  .site-header.is-scrolled .nav .nav__link { color: rgba(250, 248, 243, .92); padding: 14px 8px; font-size: 1.05rem; border-bottom: 1px solid rgba(250, 248, 243, .1); }
  .site-header .nav .nav__link.is-active { color: #FAF8F3; }
  .nav__link::after { display: none; }
  body.nav-open { overflow: hidden; }

  /* Explicit close (X) button inside the drawer */
  .nav__close { display: block; position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border: 0; background: rgba(250, 248, 243, .12); color: #FAF8F3; border-radius: 50%; cursor: pointer; display: grid; place-items: center; z-index: 2; }
  .nav__close:hover { background: rgba(250, 248, 243, .22); }

  /* Dim backdrop behind the drawer */
  .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(46, 71, 85, .5); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; z-index: 150; }
  body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
  body.nav-open .site-header { z-index: 201; }   /* keep the hamburger/X above the drawer */

  /* Animate hamburger to X when open */
  body.nav-open .nav-toggle span { background: var(--surface); }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .hero { min-height: auto; padding-bottom: 10px; }
  .hero__content { padding-block: 40px 6px; }
  .deck__head { margin-bottom: 14px; }
  .deck__controls { display: none; }

  /* Why Choose stacks; testimonials 2-up */
  .why__inner { grid-template-columns: 1fr; }
  .why__media { order: -1; }
  .why__media img { aspect-ratio: 16 / 11; }
  .tst-card { flex-basis: calc((100% - 26px) / 2); max-width: calc((100% - 26px) / 2); }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .hero__title { font-size: clamp(2rem, 8.4vw, 2.8rem); }
  .hero__title br { display: none; }   /* wrap naturally, no forced break */
  .hero__subtitle { font-size: 1rem; }
  .btn--lg { padding: 14px 24px; font-size: .95rem; }
  .footer__cta-inner .btn-arrow { width: 100%; justify-content: space-between; }
  .bform__row { flex-direction: column; gap: 0; }
  .datepick { width: min(300px, 78vw); }
  .pkg-card { width: 270px; }
  /* 2 destination cards across */
  .dest__track { gap: 16px; }
  .dest-card { flex-basis: calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); }
  /* 1 tour card across */
  .tour-card { flex-basis: 100%; max-width: 100%; }
  .tours__head { flex-wrap: wrap; }
  /* 1 cab per row, 1 activity per row */
  .cabs__page { grid-template-columns: 1fr; }
  .act-grid { grid-template-columns: 1fr; }
  .act-card { min-height: 240px; }
  /* testimonials 1-up; why stats spacing */
  .tst-card { flex-basis: 100%; max-width: 100%; }
  .why__stat b { font-size: 1.5rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__cta-inner { padding-block: 42px; }
  .footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transform: none; transition: opacity .4s var(--ease); }
  .hero__slide.is-active { transform: none; }
  * { scroll-behavior: auto; }
}

/* =================================================================
   INNER PAGES (Packages listing + Tour detail)
   ================================================================= */
body.inner-page { padding-top: 74px; }
body.inner-page .site-header {
  background: rgba(250, 248, 243, .97);
  box-shadow: 0 8px 30px rgba(46, 71, 85, .1);
  height: 74px;
  backdrop-filter: saturate(1.4) blur(8px);
}
body.inner-page .site-header .brand__logo { filter: none; height: 46px; }
body.inner-page .nav__link { color: var(--green-deep); }
body.inner-page .nav__link.is-active { color: var(--green); }
body.inner-page .header__phone { color: var(--green-deep); }
body.inner-page .nav-toggle span { background: var(--green-deep); }

/* shared white grid backdrop for inner pages */
/* Wrapper for every inner page, so it must stay transparent — this is where
   most of the site's gradient is actually seen. */
.page-grid {
  position: relative;
  background-color: transparent;
}
.page-grid::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(46, 71, 85, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 71, 85, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
  -webkit-mask-image: radial-gradient(120% 70% at 50% 40%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 70% at 50% 40%, #000 60%, transparent 100%);
  pointer-events: none;
}
.page-grid > * { position: relative; z-index: 1; }

/* Page heading band */
.page-head { padding: clamp(28px, 4vw, 50px) 0 clamp(20px, 2.5vw, 30px); text-align: center; }
.page-head__crumb { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.page-head__crumb a { color: var(--green); font-weight: 600; }
.page-head__crumb a:hover { color: var(--green-deep); }
.page-head h1 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.6px; color: var(--green-deep);
}
.page-head p { margin-top: 10px; color: var(--muted); max-width: 620px; margin-inline: auto; }

/* ---------- LISTING ---------- */
.listing { padding-bottom: clamp(60px, 8vw, 96px); }
.listing__layout { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; }

/* Filters card */
.filters {
  position: sticky; top: 90px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 22px 20px; box-shadow: 0 14px 40px rgba(46, 71, 85, .08);
}
.filters__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.filters__head h2 { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--green-deep); }
.filters__head h2 svg { color: var(--green); }
.filters__clear { font-size: .82rem; font-weight: 600; color: var(--green); cursor: pointer; }
.filters__clear:hover { color: var(--green-deep); text-decoration: underline; }

.filter-group { border-bottom: 1px solid var(--border-soft); padding: 16px 0; }
.filter-group__head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-weight: 700; font-size: .95rem; color: var(--green-deep); cursor: pointer;
}
.filter-group__head svg { color: var(--muted); transition: transform .3s var(--ease); }
.filter-group.is-collapsed .filter-group__head svg { transform: rotate(-90deg); }
.filter-group__body { margin-top: 14px; display: grid; gap: 4px; }
.filter-group.is-collapsed .filter-group__body { display: none; }

/* custom checkbox row */
.f-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: .9rem; color: #2e4755; }
.f-check input { position: absolute; opacity: 0; pointer-events: none; }
.f-check__box {
  flex: 0 0 auto; width: 19px; height: 19px; border: 1.6px solid var(--border-strong); border-radius: 6px;
  display: grid; place-items: center; color: #FAF8F3; transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.f-check__box svg { opacity: 0; transition: opacity .15s var(--ease); }
.f-check input:checked + .f-check__box { background: var(--green); border-color: var(--green); }
.f-check input:checked + .f-check__box svg { opacity: 1; }
.f-check:hover .f-check__box { border-color: var(--green); }
.f-check__count { margin-left: auto; font-size: .8rem; color: var(--text-faint); }

/* price slider */
.price-range input[type="range"] { width: 100%; accent-color: var(--green); cursor: pointer; height: 22px; }
.price-vals { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: .85rem; color: var(--green-deep); font-weight: 600; }
.price-vals .muted { color: var(--muted); font-weight: 500; }

.filters__apply { width: 100%; margin-top: 18px; justify-content: center; }
.filters__count { margin-top: 12px; text-align: center; font-size: .82rem; color: var(--muted); }

/* mobile filter toggle (hidden on desktop) */
.filters-toggle { display: none; }

/* Listing grid (reuse .tour-card visuals, but as grid items) */
.listing__main { min-width: 0; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pkg-grid .tour-card { flex: none; max-width: none; width: auto; }
.pkg-empty { display: none; text-align: center; padding: 60px 20px; color: var(--muted); font-size: 1.05rem; }
.pkg-empty.show { display: block; }

/* Activities listing grid — 3 per row, reuses the homepage .act-card visuals */
.act-grid--listing { grid-template-columns: repeat(3, 1fr); gap: 26px; }
.act-grid--listing .act-card { grid-column: auto; min-height: 320px; }

/* ---------- TOUR DETAIL ---------- */
.detail { padding: clamp(24px, 3vw, 40px) 0 clamp(60px, 8vw, 96px); }
.detail__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 3.5vw, 56px); align-items: start; }
.detail__main { min-width: 0; }

/* gallery — full-width: vertical thumbnail rail + big main image */
.tgal { display: grid; grid-template-columns: 98px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 12px; height: clamp(300px, 44vw, 520px); margin-bottom: clamp(26px, 3.5vw, 44px); overflow: hidden; }
.tgal__thumbs { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.tgal__thumbs button { flex: 1; width: 100%; min-height: 0; padding: 0; background: none; border-radius: 14px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.tgal__thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgal__thumbs button.is-active { border-color: var(--green); }
.tgal__thumbs button:hover { transform: translateX(3px); }
.tgal__main { height: 100%; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(46, 71, 85, .16); }
.tgal__main img { width: 100%; height: 100%; object-fit: cover; }

/* detail heading */
.detail__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: var(--green-deep); margin-top: 0; letter-spacing: -.5px; }
.detail__actions { margin-top: 18px; }
.detail__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 12px; }
.detail__dur { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--green); }
.detail__dur svg { color: var(--green); }
.detail__dests { display: flex; flex-wrap: wrap; gap: 8px; }
.detail__dest { display: inline-flex; align-items: center; gap: 5px; background: rgba(46, 71, 85, .08); color: var(--green-deep); font-size: .82rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; }
.detail__dest svg { color: var(--green); }

.detail__block { margin-top: clamp(30px, 4vw, 46px); }
.detail__block h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: var(--green-deep); margin-bottom: 14px; }
.detail__block p { color: var(--ink); line-height: 1.7; }
/* block header with an action button on the right */
.detail__block-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.detail__block-head h2 { margin-bottom: 0; }

/* itinerary */
.itin { display: grid; gap: 12px; }
.itin__item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.itin__head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; cursor: pointer; text-align: left; }
.itin__day {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px; line-height: 1;
  background: linear-gradient(145deg, var(--green-soft), var(--green-deep));
  color: var(--on-primary); font-weight: 800; font-size: 1.25rem;
  box-shadow: 0 8px 18px rgba(46, 71, 85, .32);
  transition: transform .3s var(--ease);
}
.itin__day small { font-size: .54rem; font-weight: 700; letter-spacing: 1.5px; opacity: .85; margin-bottom: 3px; }
.itin__item.is-open .itin__day { transform: scale(1.04); background: linear-gradient(145deg, var(--green), var(--gold)); }
.itin__t { font-weight: 700; color: var(--green-deep); flex: 1; }
.itin__chev { color: var(--green); transition: transform .3s var(--ease); }
.itin__item.is-open .itin__chev { transform: rotate(180deg); }
.itin__body { padding: 0 18px 18px 88px; color: var(--ink); line-height: 1.65; font-size: .94rem; }
.itin__item:not(.is-open) .itin__body { display: none; }

/* inclusions / exclusions */
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.incl__col h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; color: var(--green-deep); margin-bottom: 12px; font-family: var(--font-head); font-weight: 700; }
.incl__list { display: grid; gap: 10px; }
.incl__list li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--ink); line-height: 1.5; }
.incl__list svg { flex: 0 0 auto; margin-top: 2px; }
.incl--yes svg { color: var(--green); }
.incl--no svg { color: #2e4755; }

/* location */
.loc-card { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); }
.loc-card iframe, .loc-card__img { display: block; width: 100%; height: 320px; border: 0; }
.loc-card__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--surface); color: var(--green-deep); font-weight: 600; font-size: .92rem; }
.loc-card__bar svg { color: var(--green); }

/* ---------- BOOKING (sticky, tabbed) ---------- */
.booking { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 22px 54px rgba(46, 71, 85, .14); }
.booking__top { padding: 20px 22px 18px; background: linear-gradient(135deg, var(--green), var(--green-deep)); color: var(--on-primary); border-radius: 20px 20px 0 0; }
.booking__price { display: flex; align-items: baseline; gap: 8px; }
.booking__price b { font-size: 1.9rem; font-weight: 800; }
.booking__price b sup { font-size: 1em; vertical-align: baseline; font-weight: 800; color: var(--gold-soft); margin-right: 2px; }
.booking__price small { color: rgba(250, 248, 243, .8); font-size: .85rem; }
.booking__name { margin-top: 6px; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; }
.booking__dur { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .85rem; color: rgba(250, 248, 243, .85); }
.booking__dur svg { color: var(--gold-soft); }

.booking__tabs { display: flex; }
.booking__tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 14px 10px; font-family: var(--font-body); font-weight: 700; font-size: .9rem; color: var(--muted); background: var(--surface-2); border-bottom: 2px solid transparent; cursor: pointer; transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); }
.booking__tab svg { width: 16px; height: 16px; }
.booking__tab.is-active { color: var(--green); background: var(--surface); border-bottom-color: var(--green); }
.booking__panel { padding: 20px 22px 22px; }
.booking__panel[hidden] { display: none; }

/* payment panel */
.pay__label { font-size: .82rem; font-weight: 700; color: var(--green-deep); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.pay-opt { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.6px solid var(--border); border-radius: 12px; cursor: pointer; margin-bottom: 10px; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.pay-opt:hover { border-color: var(--green); }
.pay-opt input { position: absolute; opacity: 0; }
.pay-opt__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(46, 71, 85, .08); color: var(--green); flex: 0 0 auto; }
.pay-opt__txt b { display: block; font-size: .95rem; color: var(--green-deep); }
.pay-opt__txt small { font-size: .78rem; color: var(--ink); }
.pay-opt__dot { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); flex: 0 0 auto; display: grid; place-items: center; }
.pay-opt input:checked ~ .pay-opt__dot { border-color: var(--green); }
.pay-opt input:checked ~ .pay-opt__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.pay-opt:has(input:checked) { border-color: var(--green); background: rgba(46, 71, 85, .04); }
.pay__total { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; padding-top: 14px; border-top: 1px dashed rgba(46, 71, 85, .12); }
.pay__total span { color: var(--ink); font-size: .9rem; }
.pay__total b { display: inline-flex; align-items: baseline; font-size: 1.4rem; font-weight: 800; color: var(--green-deep); }
.pay__total b sup { font-size: 1em !important; vertical-align: baseline; color: var(--gold) !important; margin-right: 2px; }
.pay__secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: .78rem; color: var(--ink); }
.pay__secure svg { color: var(--green); }
.booking__submit { width: 100%; justify-content: center; }

/* ---------- INNER PAGE RESPONSIVE ---------- */
@media (max-width: 980px) {
  .listing__layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .act-grid--listing { grid-template-columns: repeat(2, 1fr); }
  .detail__layout { grid-template-columns: 1fr; }
  .booking { position: static; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .pkg-grid { grid-template-columns: 1fr; }
  .act-grid--listing { grid-template-columns: 1fr; }
  .incl { grid-template-columns: 1fr; gap: 18px; }
  /* gallery: main on top, thumbs in a row below */
  .tgal { grid-template-columns: 1fr; height: auto; }
  .tgal__main { height: clamp(220px, 56vw, 320px); order: -1; }
  .tgal__thumbs { flex-direction: row; height: auto; }
  .tgal__thumbs button { flex: 1; height: 62px; }
}

/* Download-itinerary button — smooth downward nudge (a "download" gesture)
   instead of the default 45° rotate; transitions kept smooth */
#downloadItin .btn-arrow__ic { transition: transform .35s var(--ease), background-color .3s var(--ease); }
#downloadItin .btn-arrow__ic svg { transition: transform .35s var(--ease); }
#downloadItin:hover { transform: translateY(-2px); }
#downloadItin:hover .btn-arrow__ic { transform: none; }
#downloadItin:hover .btn-arrow__ic svg { transform: translateY(3px); }

/* =================================================================
   DESTINATIONS listing + detail (no filters, no booking form)
   ================================================================= */
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.dest-grid .dest-card { flex: none; max-width: none; width: auto; }

/* destination detail — single centred column (no booking aside) */
.detail__solo { max-width: 1000px; margin-inline: auto; }
.detail__solo .detail__title { margin-top: 4px; }

@media (max-width: 1024px) { .dest-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .dest-grid { grid-template-columns: 1fr; } }

/* =================================================================
   ABOUT US PAGE
   Section 1 — "ABOUT US" image banner + lead (heading + CTAs)
   Section 2 — "Rooted in Heritage" stat cards + why-choose story
   ================================================================= */
.about { padding-bottom: clamp(64px, 8vw, 104px); }

/* ---------- Section 1: hero banner ---------- */
.ab-hero { padding-top: clamp(20px, 3vw, 40px); }
.ab-banner {
  position: relative;
  border-radius: clamp(20px, 2.6vw, 30px);
  overflow: hidden;
  min-height: clamp(320px, 46vw, 560px);
  display: flex; align-items: flex-end;
  box-shadow: var(--shadow-lg);
}
.ab-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46, 71, 85, .1) 0%, rgba(46, 71, 85, .18) 40%, rgba(46, 71, 85, .78) 100%);
}
.ab-banner__inner { position: relative; z-index: 2; width: 100%; padding: clamp(22px, 4vw, 52px); }
.ab-banner__title {
  font-family: var(--font-head); font-weight: 800; color: #FAF8F3;
  font-size: clamp(3.2rem, 13vw, 10rem); line-height: .86; letter-spacing: -2px;
  text-shadow: 0 6px 40px rgba(46, 71, 85, .3);
}
.ab-banner__kicker {
  margin-top: 14px; max-width: 540px;
  color: rgba(250, 248, 243, .9); font-weight: 600; font-size: clamp(.95rem, 1.4vw, 1.1rem);
}
.ab-banner__scroll {
  position: absolute; top: clamp(22px, 4vw, 52px); right: clamp(22px, 4vw, 52px); z-index: 3;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  box-shadow: 0 12px 30px rgba(46, 71, 85, .28);
  transition: transform .4s var(--ease), background-color .3s var(--ease);
}
.ab-banner__scroll:hover { background: var(--gold-soft); transform: translateY(4px); }

/* lead row — big green heading + supporting copy & CTAs */
.ab-lead {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 60px);
  align-items: end; margin-top: clamp(36px, 5vw, 64px);
}
.ab-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(46, 71, 85, .08); color: var(--green);
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px;
  padding: 7px 15px; border-radius: 999px; margin-bottom: 18px;
}
.ab-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.ab-lead__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -.8px;
  color: var(--green-deep);
}
.ab-lead__title em { color: var(--green); font-style: normal; }
.ab-lead__copy { color: var(--ink); font-size: 1.04rem; line-height: 1.7; }
.ab-lead__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* ---------- Section 2: heritage stats + why-choose ---------- */
.ab-why { padding-top: clamp(56px, 7vw, 96px); }
.ab-why__head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 50px); }
.ab-why__kicker {
  text-transform: uppercase; letter-spacing: 2.5px;
  font-size: .8rem; font-weight: 700; color: var(--green); margin-bottom: 14px;
}
.ab-why__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: -.6px; color: var(--green-deep);
}
.ab-why__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center;
}

/* stat cards (one highlighted, like the reference) */
.ab-stats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 20px); }
.ab-stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ab-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ab-stat b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2rem, 3.8vw, 2.9rem); line-height: 1; letter-spacing: -1px; color: var(--green-deep);
}
.ab-stat strong { display: block; margin-top: 12px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.ab-stat p { margin-top: 6px; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.ab-stat--feature {
  background: linear-gradient(155deg, var(--green-soft), var(--green-deep));
  border-color: transparent; box-shadow: var(--shadow-md);
}
.ab-stat--feature b { color: #FAF8F3; }
.ab-stat--feature strong { color: #FAF8F3; }
.ab-stat--feature p { color: rgba(250, 248, 243, .78); }
.ab-stat--feature b span { color: var(--gold-soft); }

/* why-choose media + copy */
.ab-why__media { position: relative; }
.ab-why__media > img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: 22px; box-shadow: var(--shadow-lg);
}
.ab-statement {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.25; letter-spacing: -.4px;
  color: var(--green-deep); margin-top: 26px;
}
.ab-statement em { color: var(--green); font-style: normal; }
.ab-why__copy { margin-top: 14px; color: var(--ink); line-height: 1.7; }
.ab-feature-list { margin-top: 20px; display: grid; gap: 12px; }
.ab-feature-list li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ink); font-size: .98rem; }
.ab-feature-list .ab-tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--green); color: var(--on-primary); display: grid; place-items: center;
}

/* ---------- About responsive ---------- */
@media (max-width: 900px) {
  .ab-lead { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .ab-why__grid { grid-template-columns: 1fr; }
  .ab-why__media { order: -1; }
  .ab-why__media > img { aspect-ratio: 16 / 10; }
}
@media (max-width: 460px) {
  .ab-stats { grid-template-columns: 1fr; }
  .ab-lead__actions .btn-arrow { width: 100%; justify-content: space-between; }
}

/* =================================================================
   CONTACT PAGE
   Head (big title + supporting copy) · Form card + image aside ·
   Info strip (call / hours / email)
   ================================================================= */
.contact { padding-bottom: clamp(64px, 8vw, 104px); }

/* ---------- Head ---------- */
.contact-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(18px, 4vw, 60px); align-items: end;
  padding: clamp(18px, 3vw, 40px) 0 clamp(28px, 4vw, 52px);
}
.contact-head__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--green); margin-bottom: 16px;
}
.contact-head__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.contact-head__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: .94; letter-spacing: -2px;
  color: var(--green-deep);
}
.contact-head__sub {
  max-width: 320px; text-align: right;
  color: var(--green); font-weight: 500; font-size: .98rem; line-height: 1.6;
}

/* ---------- Layout: form + aside ---------- */
.contact-grid {
  display: grid; grid-template-columns: 1.35fr .9fr;
  gap: clamp(22px, 3vw, 40px); align-items: stretch;
}

/* form card */
.cform {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 22px 54px rgba(46, 71, 85, .1);
}
.cform__rows { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.8vw, 22px); }
.cfield { display: flex; flex-direction: column; }
.cfield--full { grid-column: 1 / -1; }
.cfield__label {
  font-size: .82rem; font-weight: 700; letter-spacing: .2px;
  color: var(--green-deep); margin-bottom: 8px;
}

/* reuse .bform__field shell but drop its built-in bottom margin inside the grid */
.cform .bform__field { margin-bottom: 0; width: 100%; }
.cform .bform__field select { width: 100%; }

/* textarea field */
.bform__field--area { align-items: flex-start; }
.bform__field--area .bform__ic { margin-top: 14px; }
.bform__field textarea {
  flex: 1; min-width: 0; width: 100%;
  border: 0; outline: none; background: none; resize: vertical;
  font-family: var(--font-body); font-size: .92rem; color: var(--ink);
  padding: 13px 0; min-height: 116px; line-height: 1.6;
}
.bform__field textarea::placeholder { color: var(--text-faint); }

.cform__actions { margin-top: clamp(20px, 2.4vw, 28px); }
.cform__note { margin-top: 16px; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.cform__note svg { color: var(--green); flex: 0 0 auto; }

/* success state after submit */
.cform__done {
  display: none; align-items: center; gap: 14px;
  margin-top: 18px; padding: 16px 18px;
  background: rgba(46, 71, 85, .07); border: 1px solid rgba(46, 71, 85, .18);
  border-radius: 14px; color: var(--green-deep);
}
.cform__done.show { display: flex; }
.cform__done svg { color: var(--green); flex: 0 0 auto; }
.cform__done b { display: block; font-weight: 700; }
.cform__done span { font-size: .88rem; color: var(--ink); }

/* ---------- Image aside ---------- */
.contact-aside {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); min-height: 460px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-lg);
}
.contact-aside__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-aside::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46, 71, 85, .28) 0%, rgba(46, 71, 85, .04) 32%, rgba(46, 71, 85, .76) 100%);
}
.contact-aside__top { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding: clamp(16px, 1.8vw, 22px); }
.contact-aside__body { position: relative; z-index: 2; color: #FAF8F3; padding: clamp(22px, 2.6vw, 32px); }
.contact-aside__body h3 {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -.4px;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.15;
}
.contact-aside__body p { margin-top: 8px; color: rgba(250, 248, 243, .85); font-size: .95rem; line-height: 1.6; }
.contact-aside__meta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: .85rem; font-weight: 600; color: rgba(250, 248, 243, .92);
}
.contact-aside__meta svg { color: var(--gold-soft); }

/* shrink the white pill badge sitting on the photo */
.contact-aside .btn-arrow--light { padding: 6px 6px 6px 18px; font-size: .72rem; letter-spacing: 1.2px; }
.contact-aside .btn-arrow--light .btn-arrow__ic { width: 32px; height: 32px; }

/* ---------- Info strip ---------- */
.contact-info {
  margin-top: clamp(26px, 4vw, 46px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(46, 71, 85, .08); overflow: hidden;
}
.cinfo {
  text-align: center; padding: clamp(26px, 3vw, 40px) clamp(18px, 2vw, 28px);
  border-left: 1px solid var(--border-soft);
  transition: background-color .3s var(--ease);
}
.cinfo:first-child { border-left: 0; }
.cinfo:hover { background: var(--surface-2); }
.cinfo__ic {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(46, 71, 85, .08); color: var(--green);
  transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.cinfo:hover .cinfo__ic { transform: translateY(-3px); background: var(--green); color: var(--on-primary); }
.cinfo h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; color: var(--green-deep); margin-bottom: 8px; }
.cinfo a, .cinfo p { display: block; color: var(--muted); font-size: .92rem; line-height: 1.75; }
.cinfo a { transition: color .25s var(--ease); }
.cinfo a:hover { color: var(--green); }

/* ---------- Contact responsive ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .contact-info { grid-template-columns: repeat(2, 1fr); }
  .cinfo:nth-child(3) { border-left: 0; }
  .cinfo:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
}
@media (max-width: 940px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-aside { min-height: 340px; order: -1; }
}
@media (max-width: 760px) {
  .contact-head { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .contact-head__sub { text-align: left; max-width: 460px; }
  .contact-info { grid-template-columns: 1fr; }
  .cinfo { border-left: 0; border-top: 1px solid var(--border-soft); }
  .cinfo:first-child { border-top: 0; }
}
@media (max-width: 520px) {
  .cform__rows { grid-template-columns: 1fr; }
  .cform__actions .btn-arrow { width: 100%; justify-content: space-between; }
}

/* =================================================================
   LEGAL / POLICY PAGES
   ================================================================= */
.legal { padding-bottom: clamp(60px, 8vw, 96px); }
.legal__body { max-width: 880px; margin-inline: auto; color: var(--ink); }
.legal__body h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--green-deep); margin: 32px 0 12px; }
.legal__body p { line-height: 1.75; margin-bottom: 14px; color: var(--ink); }
.legal__body a { color: var(--green); font-weight: 600; }
.legal__body a:hover { color: var(--green-deep); text-decoration: underline; }
.legal__body ul { margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.legal__body li { display: flex; gap: 11px; line-height: 1.6; }
.legal__body li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--gold); }
.legal__intro { font-size: 1.06rem; }
.legal__note { margin-top: 28px; padding: 16px 20px; background: rgba(46, 71, 85, .06); border-left: 3px solid var(--green); border-radius: 10px; font-size: .92rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: .94rem; }
.legal table th, .legal table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.legal table th { background: rgba(46, 71, 85, .06); color: var(--green-deep); font-weight: 700; }
.legal table td:last-child { font-weight: 700; color: var(--green-deep); }

/* =================================================================
   FAQ · GALLERY · BLOG  (shared page-head kicker + per-page styles)
   ================================================================= */
/* reusable centered kicker above a .page-head h1 */
.page-head__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 2.5px;
  font-size: .78rem; font-weight: 700; color: var(--green); margin-bottom: 12px;
}
.page-head__kicker::before,
.page-head__kicker::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- FAQ accordion ---------- */
.faq { padding-bottom: clamp(60px, 8vw, 100px); }
.faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.faq-item.is-open { box-shadow: var(--shadow-md); border-color: rgba(46, 71, 85, .22); }
.faq-item__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 19px 22px; text-align: left; cursor: pointer;
}
.faq-item__q { font-family: var(--font-head); font-weight: 700; font-size: 1.04rem; color: var(--green-deep); line-height: 1.4; }
.faq-item__head:hover .faq-item__q { color: var(--green); }
.faq-item__ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(46, 71, 85, .08); color: var(--green);
  transition: transform .4s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.faq-item.is-open .faq-item__ic { background: var(--green); color: var(--on-primary); transform: rotate(180deg); }
.faq-item__body { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-item.is-open .faq-item__body { max-height: 360px; }
.faq-item__body p { padding: 0 22px 20px; color: var(--muted); line-height: 1.7; font-size: .96rem; max-width: 720px; }

/* ---------- Gallery masonry ---------- */
.gallery { padding-bottom: clamp(60px, 8vw, 100px); }
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(150px, 17vw, 210px); gap: clamp(12px, 1.4vw, 18px);
  grid-auto-flow: dense;
}
.g-item {
  position: relative; overflow: hidden; border-radius: 18px;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.g-item:hover img { transform: scale(1.08); }
.g-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(46, 71, 85, .45));
  opacity: 0; transition: opacity .4s var(--ease);
}
.g-item:hover::after { opacity: 1; }
.g-item--wide { grid-column: span 2; }
.g-item--tall { grid-row: span 2; }
.g-item--big { grid-column: span 2; grid-row: span 2; }

/* ---------- Blog ---------- */
/* listing reuses .tour-card; the floating pill carries the date */
.tour-card__date {
  align-self: flex-end; margin: -22px 6px 0 0; position: relative; z-index: 2;
  background: var(--surface); color: var(--green-deep); font-weight: 700; font-size: .8rem;
  padding: 8px 15px; border-radius: 999px; box-shadow: 0 8px 20px rgba(46, 71, 85, .18);
  display: inline-flex; align-items: center; gap: 7px;
}
.tour-card__date svg { color: var(--green); }

/* blog detail — single article column */
.blog-detail { padding: clamp(24px, 3vw, 44px) 0 clamp(60px, 8vw, 100px); }
.blog-article { max-width: 820px; margin: 0 auto; }
.blog-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.blog-cat {
  display: inline-flex; align-items: center; background: rgba(46, 71, 85, .08); color: var(--green);
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  padding: 6px 13px; border-radius: 999px;
}
.blog-date { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .88rem; font-weight: 500; }
.blog-date svg { color: var(--green); }
.blog-article__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -1px; color: var(--green-deep);
}
.blog-article__hero {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 22px; box-shadow: var(--shadow-lg); margin: clamp(22px, 3vw, 34px) 0;
}
.blog-article__body { color: var(--ink); }
.blog-article__body p { line-height: 1.8; margin-bottom: 18px; color: #2e4755; }
.blog-article__body h2 {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--green-deep); letter-spacing: -.4px; margin: clamp(28px, 4vw, 42px) 0 14px;
}
.blog-article__body h3 { font-weight: 700; font-size: 1.05rem; color: var(--green-deep); margin: 4px 0; }
.blog-learn { display: grid; gap: 14px; margin: 8px 0 24px; }
.blog-learn li { display: flex; gap: 14px; }
.blog-learn .blog-learn__ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; margin-top: 2px;
  display: grid; place-items: center; background: rgba(46, 71, 85, .09); color: var(--green);
}
.blog-learn b { display: block; color: var(--green-deep); font-size: 1rem; margin-bottom: 2px; }
.blog-learn span { color: var(--muted); font-size: .94rem; line-height: 1.65; }
.blog-callout {
  background: linear-gradient(150deg, var(--green-soft), var(--green-deep)); color: var(--on-primary);
  border-radius: 18px; padding: clamp(22px, 3vw, 30px); margin: clamp(26px, 3.5vw, 40px) 0;
}
.blog-callout h2 { color: #FAF8F3; margin-top: 0; }
.blog-callout p { color: rgba(250, 248, 243, .85); margin-bottom: 0; }

/* ---------- FAQ / Gallery / Blog responsive ---------- */
@media (max-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .g-item--big { grid-column: span 2; }
}
@media (max-width: 620px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(190px, 56vw, 260px); }
  .g-item--wide, .g-item--big, .g-item--tall { grid-column: auto; grid-row: auto; }
  .faq-item__q { font-size: .98rem; }
}

/* =================================================================
   CABS listing (no filter, 3-up grid reusing homepage cab cards)
   ================================================================= */
.cabs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cabs-grid .cab-card { cursor: pointer; }
@media (max-width: 760px) { .cabs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cabs-grid { grid-template-columns: 1fr; } }

/* =================================================================
   FLOATING WHATSAPP BUTTON (bottom-left, all pages)
   ================================================================= */
.wa-float {
  position: fixed; left: 22px; bottom: 22px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #2e4755; color: #FAF8F3;
  box-shadow: 0 10px 28px rgba(46, 71, 85, .14);
  animation: waPulse 2.6s ease-out infinite;
  transition: transform .3s var(--ease);
}
.wa-float:hover { transform: translateY(-3px) scale(1.06); }
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }
@keyframes waPulse {
  0%   { box-shadow: 0 10px 28px rgba(46, 71, 85, .14), 0 0 0 0 rgba(46, 71, 85, .15); }
  70%  { box-shadow: 0 10px 28px rgba(46, 71, 85, .14), 0 0 0 18px rgba(46, 71, 85, 0); }
  100% { box-shadow: 0 10px 28px rgba(46, 71, 85, .14), 0 0 0 0 rgba(46, 71, 85, 0); }
}
@media (max-width: 620px) { .wa-float { left: 16px; bottom: 16px; width: 52px; height: 52px; } .wa-float svg { width: 27px; height: 27px; } }
@media (prefers-reduced-motion: reduce) { .wa-float { animation: none; } }

/* =================================================================
   Tour category tabs (homepage carousel + tours page listing)
   ================================================================= */
/* Prominent segmented control so users spot the categories immediately */
.tours__tabs {
  display: inline-flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 34px;
  padding: 8px;
  border-radius: 18px;
}
.tours__tab {
  font: 700 1.02rem/1 inherit;
  letter-spacing: .2px;
  padding: 15px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
  -webkit-appearance: none; appearance: none;
}
/* Homepage — glassy card on the dark Kashmir backdrop, active pops in gold */
.tours .tours__tabs { background: rgba(250, 248, 243, .1); border: 1px solid rgba(250, 248, 243, .22); box-shadow: 0 12px 34px rgba(46, 71, 85, .24); backdrop-filter: blur(6px); }
.tours .tours__tab { background: transparent; color: var(--on-primary-soft); }
.tours .tours__tab:hover { background: rgba(250, 248, 243, .16); }
.tours .tours__tab.is-active { background: var(--gold); color: var(--ink); box-shadow: 0 10px 24px rgba(189, 131, 13, .5); transform: translateY(-1px); }
/* Tours page — white card on the light background, active pops in green */
.listing .tours__tabs { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 36px rgba(46, 71, 85, .12); }
.listing .tours__tab { background: transparent; color: var(--green); }
.listing .tours__tab:hover { background: rgba(46, 71, 85, .07); }
.listing .tours__tab.is-active { background: var(--green); color: var(--on-primary); box-shadow: 0 10px 22px rgba(46, 71, 85, .42); transform: translateY(-1px); }
/* Homepage hotels — white card on the light gridded background, active pops in green */
.hotels .tours__tabs { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 36px rgba(46, 71, 85, .12); }
.hotels .tours__tab { background: transparent; color: var(--green); }
.hotels .tours__tab:hover { background: rgba(46, 71, 85, .07); }
.hotels .tours__tab.is-active { background: var(--green); color: var(--on-primary); box-shadow: 0 10px 22px rgba(46, 71, 85, .42); transform: translateY(-1px); }
/* centre the hotel category pill under the section heading (mobile keeps full width) */
@media (min-width: 641px) {
  .hotels .tours__tabs { display: flex; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-inline: auto; }
}
.listing__tabs { margin-bottom: 26px; }
@media (max-width: 640px) {
  .tours__tabs { display: flex; width: 100%; gap: 7px; padding: 7px; }
  .tours__tab { padding: 12px 18px; font-size: .94rem; flex: 1 1 auto; text-align: center; }
}

/* =================================================================
   OUR TEAM (About page)
   ================================================================= */
.team { padding: clamp(52px, 7vw, 92px) 0 clamp(64px, 8vw, 104px); }
.team__head { text-align: center; max-width: 660px; margin: 0 auto clamp(30px, 4vw, 50px); }
.team__kicker { text-transform: uppercase; letter-spacing: 2.5px; font-size: .8rem; font-weight: 700; color: var(--green); margin-bottom: 12px; }
.team__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.1; letter-spacing: -.6px; color: var(--green-deep); }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2vw, 26px); }
.team-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.team-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-2); }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.team-card:hover .team-card__media img { transform: scale(1.05); }
.team-card__body { padding: 18px 18px 22px; text-align: center; }
.team-card__name { font-family: var(--font-head); font-weight: 700; font-size: 1.18rem; color: var(--green-deep); }
.team-card__role { margin-top: 4px; font-size: .9rem; color: var(--muted); font-weight: 500; }
@media (max-width: 980px) { .team__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .team__grid { grid-template-columns: 1fr; } }

/* =================================================================
   MOBILE TOP BAR (Pay Online + social) + PAY-ONLINE MODAL
   ================================================================= */
.topbar { display: none; }

@media (max-width: 900px) {
  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 120;
    height: 44px; padding: 0 16px; color: var(--on-primary);
    background: var(--green-soft);
    background-image: repeating-linear-gradient(-45deg, rgba(250, 248, 243, .05) 0 10px, rgba(250, 248, 243, 0) 10px 20px);
    box-shadow: 0 2px 10px rgba(46, 71, 85, .16);
  }
  .topbar__pay {
    display: inline-flex; align-items: center; gap: 7px;
    color: #FAF8F3; font-weight: 700; font-size: .82rem; letter-spacing: .3px;
    background: rgba(250, 248, 243, .16); border: 1px solid rgba(250, 248, 243, .32);
    padding: 6px 14px; border-radius: 999px; cursor: pointer;
    transition: background-color .2s var(--ease);
  }
  .topbar__pay:hover { background: rgba(250, 248, 243, .26); }
  .topbar__social { display: inline-flex; align-items: center; gap: 15px; }
  .topbar__social a { color: #FAF8F3; opacity: .92; display: inline-flex; transition: opacity .2s, transform .2s; }
  .topbar__social a:hover { opacity: 1; transform: translateY(-1px); }

  /* push the fixed header + page content down by the bar height */
  .site-header { top: 44px; }
  body.inner-page { padding-top: calc(74px + 44px); }
  .hero { padding-top: calc(var(--header-h) + 44px + 12px); }

  /* keep the bar behind the mobile nav drawer when it's open */
  body.nav-open .topbar { z-index: 100; }

  /* FIX: the drawer (#primaryNav) is a child of .site-header, whose backdrop-filter
     creates a containing block that traps the position:fixed drawer inside the ~76px
     header box (menu items get clipped). Drop the blur while the menu is open so the
     drawer escapes to the viewport and shows full-height; and push the items clear of
     the top bar + header. */
  body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav { padding-top: calc(var(--header-h) + 44px + 20px); }
}

/* Pay modal — works at any viewport (only triggered from the mobile bar) */
body.paymodal-open { overflow: hidden; }
.paymodal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 18px; }
.paymodal[hidden] { display: none; }
.paymodal__backdrop { position: absolute; inset: 0; background: rgba(46, 71, 85, .62); backdrop-filter: blur(3px); }
.paymodal__card {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: 20px; padding: 26px 24px 24px;
  box-shadow: 0 40px 90px rgba(46, 71, 85, .5);
}
.paymodal__x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--green-deep); background: var(--surface-2); cursor: pointer; }
.paymodal__x:hover { background: var(--border); }
.paymodal__title { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--green-deep); }
.paymodal__sub { margin-top: 4px; color: var(--muted); font-size: .9rem; }
.paymodal__label { display: block; margin: 18px 0 8px; font-size: .82rem; font-weight: 700; color: var(--green-deep); }
.paymodal__amount { display: flex; align-items: center; gap: 6px; border: 1.6px solid var(--border); border-radius: 12px; padding: 2px 14px; transition: border-color .2s, box-shadow .2s; }
.paymodal__amount:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 71, 85, .12); }
.paymodal__amount span { font-weight: 800; color: var(--green-deep); font-size: 1.1rem; }
.paymodal__amount input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; color: var(--ink); padding: 12px 0; }
.paymodal__row { display: flex; gap: 10px; }
.paymodal__card input[type="text"], .paymodal__card input[type="tel"], .paymodal__card input[type="email"] {
  width: 100%; border: 1.6px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 10px;
  font-family: var(--font-body); font-size: .92rem; color: var(--ink); outline: none; background: var(--surface);
  transition: border-color .2s, box-shadow .2s;
}
.paymodal__row input { flex: 1; min-width: 0; }
.paymodal__card input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 71, 85, .12); }
.paymodal__submit {
  width: 100%; margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--green); color: var(--on-primary); font-weight: 700; font-size: .98rem;
  padding: 15px 22px; border-radius: 12px; cursor: pointer;
  box-shadow: 0 14px 30px rgba(46, 71, 85, .28);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.paymodal__submit:hover { background: var(--green-deep); transform: translateY(-2px); }
.paymodal__submit:disabled { opacity: .7; cursor: default; transform: none; }
.paymodal__secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: .78rem; color: var(--muted); }
.paymodal__secure svg { color: var(--green); }
.paymodal__note { margin-top: 16px; padding: 14px 16px; background: rgba(46, 71, 85, .06); border-radius: 12px; color: var(--green-deep); font-size: .9rem; }

/* Manual payment methods inside the Pay Online popup (UPI / bank / QR) */
.payblock { border: 1px solid var(--border); border-radius: 14px; padding: 13px 16px 12px; margin-top: 14px; }
.payblock__head { margin-bottom: 6px; }
.payblock__badge { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--green); background: rgba(46, 71, 85, .09); padding: 5px 11px; border-radius: 999px; }
.payline { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--surface-2); }
.payline:last-child { border-bottom: 0; padding-bottom: 2px; }
.payline__info { min-width: 0; display: flex; flex-direction: column; }
.payline__k { font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; }
.payline__v { font-size: 1rem; color: var(--green-deep); font-weight: 700; word-break: break-word; }
.payline__copy { margin-left: auto; flex: 0 0 auto; background: var(--green); color: var(--on-primary); font-weight: 700; font-size: .78rem; padding: 7px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background-color .2s var(--ease); }
.payline__copy:hover { background: var(--green-deep); }
.payline__copy.is-copied { background: #2e4755; }
.payblock--qr { text-align: center; }
.payqr { width: 210px; max-width: 100%; height: auto; margin: 8px auto 6px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--surface); padding: 8px; }
.payqr__note { font-size: .82rem; color: var(--muted); }
/* "Pay via Razorpay" option button at the top of the popup */
.payopt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin-top: 14px; padding: 14px 16px; border: 1.6px solid var(--green); border-radius: 14px; background: rgba(46, 71, 85, .05); cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.payopt:hover { background: rgba(46, 71, 85, .1); transform: translateY(-1px); }
.payopt__ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--green); color: var(--on-primary); }
.payopt__txt { min-width: 0; display: flex; flex-direction: column; }
.payopt__txt b { font-size: 1rem; color: var(--green-deep); }
.payopt__txt small { font-size: .8rem; color: var(--muted); }
.payopt__go { margin-left: auto; color: var(--green); }

/* =================================================================
   TABLET/MOBILE LISTING FILTER FORM (replaces the left sidebar)
   ================================================================= */
.mfilter { display: none; }
@media (max-width: 980px) {
  .filters { display: none; }               /* hide the checkbox/slider sidebar */
  .mfilter {
    display: block;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 16px; margin-bottom: 22px;
    box-shadow: 0 12px 32px rgba(46, 71, 85, .08);
  }
  .mfilter__row { display: flex; flex-wrap: wrap; gap: 12px; }
  .mfilter__field { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-bottom: 12px; }
  .mfilter__field--full { flex: 1 1 100%; }
  .mfilter__field label { font-size: .78rem; font-weight: 700; color: var(--green-deep); margin-bottom: 6px; }
  .mfilter__hint { font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }

  /* multi-select destination chips */
  .mfilter__checks { display: flex; flex-wrap: wrap; gap: 8px; max-height: 148px; overflow-y: auto; padding: 2px; }
  .mchip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
    border: 1.6px solid var(--border); border-radius: 999px; padding: 8px 13px; font-size: .86rem; color: var(--green-deep);
    transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease); }
  /* The real checkbox is hidden inside its chip. It must be sized to the chip
     (and not pick up the field's width:100% below), or on a phone each one
     stretched a screen wide from its chip and pushed the page sideways. */
  .mchip { position: relative; }
  .mfilter__checks .mchip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
  .mchip span { line-height: 1; }
  .mchip:hover { border-color: var(--green); }
  .mchip:has(input:checked) { background: var(--green); border-color: var(--green); color: var(--on-primary); }
  .mfilter__field select, .mfilter__field input {
    width: 100%; border: 1.6px solid var(--border); border-radius: 10px; padding: 12px;
    font-family: var(--font-body); font-size: .92rem; color: var(--ink); background: var(--surface); outline: none;
    transition: border-color .2s, box-shadow .2s;
  }
  .mfilter__field select:focus, .mfilter__field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 71, 85, .12); }
  .mfilter__submit {
    width: 100%; margin-top: 12px; background: var(--green); color: var(--on-primary);
    font-weight: 700; font-size: .95rem; padding: 13px; border-radius: 10px; cursor: pointer;
    transition: background-color .25s var(--ease);
  }
  .mfilter__submit:hover { background: var(--green-deep); }
}
@media (max-width: 460px) { .mfilter__row { flex-direction: column; gap: 12px; } }

/* ---------- Hero card price unit (per person / per couple) ---------- */
.pkg-card__unit { color: var(--gold-soft); margin-top: 1px; }

/* =================================================================
   FROM THE BLOG (homepage) — shares the white grid bg with gallery/tst
   ================================================================= */
.hblog { padding: clamp(56px, 7vw, 92px) 0 clamp(60px, 8vw, 96px); }
.hblog__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(26px, 3.4vw, 40px); }
.hblog__kicker { text-transform: uppercase; letter-spacing: 2.5px; font-size: .8rem; font-weight: 700; color: var(--green); margin-bottom: 10px; }
.hblog__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing: -.6px; color: var(--green-deep); }
.hblog__controls { display: flex; gap: 12px; flex: 0 0 auto; }
.hblog__carousel { overflow: hidden; padding: 16px 0 22px; margin-block: -16px; touch-action: pan-y; }
.hblog__track { display: flex; gap: 26px; will-change: transform; }
/* 3 up on desktop; solid white card so it reads on the white grid */
.hblog__track .tour-card { flex: 0 0 calc((100% - 2 * 26px) / 3); max-width: calc((100% - 2 * 26px) / 3); background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--border); box-shadow: 0 16px 40px rgba(46, 71, 85, .08); }
.hblog__all { display: flex; width: -moz-fit-content; width: fit-content; margin: 26px auto 0; }
@media (max-width: 900px) { .hblog__track .tour-card { flex-basis: calc((100% - 26px) / 2); max-width: calc((100% - 26px) / 2); } }
@media (max-width: 620px) { .hblog__head { flex-wrap: wrap; } .hblog__track .tour-card { flex-basis: 100%; max-width: 100%; } }

/* =================================================================
   DARK THEME
   -----------------------------------------------------------------
   Applied by <html data-theme="dark">. Light is the default and is
   untouched by everything below.

   Same two-colour identity, inverted: a deep navy canvas, mustard gold as
   the primary accent (navy on navy is invisible), near-white text.
   Most of the work is re-pointing tokens; the explicit rules that follow
   are only for places where a token legitimately does double duty.
   ================================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Dark counterpart to the light page gradient: deep navy easing into a
     slightly warmer navy so the gold accents still feel seated. */
  --page-gradient: linear-gradient(180deg, #2e4755 0%, #2e4755 52%, #2e4755 100%);

  /* --- Brand tokens re-pointed ---------------------------------------
     --green carries the primary role (56 text / 29 background / 18 border
     uses), so pointing it at gold performs the whole accent swap at once.
     Background users already take their text colour from --on-primary,
     which flips to dark ink below.                                      */
  --green:        #BD830D;   /* primary accent on dark = mustard gold   */
  --green-soft:   #BD830D;
  --green-deep:   #FAF8F3;   /* ~90% of uses are heading text -> near-white */

  --gold:         #BD830D;
  --gold-soft:    #BD830D;

  --ink:          #FAF8F3;   /* text-only token -> near-white           */
  --muted:        rgba(250, 248, 243, .61);
  --cream:        #2e4755;   /* background-only tokens -> dark surfaces */
  --cream-2:      #2e4755;
  --white:        #2e4755;

  /* --- Semantic layer ------------------------------------------------ */
  --primary:         #BD830D;
  --primary-deep:    #BD830D;
  --primary-soft:    #BD830D;
  --on-primary:      #2e4755;   /* navy ink on gold                     */
  --on-primary-soft: #2e4755;
  --accent:          #BD830D;
  --on-accent:       #2e4755;
  --text-2:          rgba(250, 248, 243, .8);

  --bg:            #2e4755;
  --surface:       #2e4755;
  --surface-2:     #2e4755;
  --panel:         rgba(46, 71, 85, .86);
  --text-faint:    rgba(250, 248, 243, .41);
  --border:        #2e4755;
  --border-soft:   #2e4755;
  --border-strong: #2e4755;

  /* Glass panels sit on dark now, so tint them dark rather than white. */
  --glass:        rgba(250, 248, 243, .07);
  --glass-strong: rgba(250, 248, 243, .14);
  --glass-line:   rgba(189, 131, 13, .3);

  /* Shadows need depth, not tint, on a near-black canvas. */
  --shadow-sm: 0 6px 20px rgba(46, 71, 85, .45);
  --shadow-md: 0 18px 44px rgba(46, 71, 85, .55);
  --shadow-lg: 0 30px 70px rgba(46, 71, 85, .7);
}

:root[data-theme="dark"] body { background: var(--page-gradient); background-attachment: fixed; color: var(--ink); }

/* --- Surfaces that were literal white in markup or gradients ---------- */
:root[data-theme="dark"] .site-header.is-scrolled,
:root[data-theme="dark"] body.inner-page .site-header { background: rgba(46, 71, 85, .92); border-bottom: 1px solid var(--border); }
:root[data-theme="dark"] .site-header.is-scrolled .nav__link,
:root[data-theme="dark"] body.inner-page .nav__link,
:root[data-theme="dark"] .site-header.is-scrolled .header__phone,
:root[data-theme="dark"] body.inner-page .header__phone { color: var(--ink); }
:root[data-theme="dark"] .site-header.is-scrolled .nav__link:hover,
:root[data-theme="dark"] body.inner-page .nav__link:hover { color: var(--primary); }

/* --green-deep is a heading colour in dark, so the handful of places that
   used it as a BACKGROUND need their own value. */
:root[data-theme="dark"] .site-header.is-scrolled .nav-toggle span,
:root[data-theme="dark"] body.inner-page .nav-toggle span { background: var(--ink); }

/* .nav only carries a background as the mobile drawer — match the original
   media query, or the desktop nav grows a panel behind the links. */
@media (max-width: 900px) {
  :root[data-theme="dark"] .nav { background: var(--surface-2); }
}
:root[data-theme="dark"] .btn-arrow--solid:hover,
:root[data-theme="dark"] .bform__submit:hover,
:root[data-theme="dark"] .paymodal__submit:hover,
:root[data-theme="dark"] .payline__copy:hover,
:root[data-theme="dark"] .mfilter__submit:hover,
:root[data-theme="dark"] .datepick__day.is-selected:hover { background: var(--gold-soft); color: var(--on-primary); }

/* Hero pill: white in light, gold in dark (matches the comp). */
:root[data-theme="dark"] .btn-arrow--light { background: var(--primary); color: var(--on-primary); }
:root[data-theme="dark"] .btn-arrow--light:hover { background: var(--gold-soft); }
:root[data-theme="dark"] .btn-arrow--light .btn-arrow__ic { background: var(--on-primary); color: var(--primary); }

/* Ghost button + play badge sit on imagery in both themes — keep them light. */
:root[data-theme="dark"] .btn--ghost { background: var(--glass); color: #FAF8F3; border-color: rgba(250, 248, 243, .35); }
:root[data-theme="dark"] .btn--ghost .play { background: #FAF8F3; color: #2e4755; }

/* Cards, panels and inputs. */
:root[data-theme="dark"] .tour-card,
:root[data-theme="dark"] .hblog__track .tour-card,
:root[data-theme="dark"] .cinfo,
:root[data-theme="dark"] .crow,
:root[data-theme="dark"] .filters,
:root[data-theme="dark"] .booking,
:root[data-theme="dark"] .tst-card,
:root[data-theme="dark"] .team-card,
:root[data-theme="dark"] .faq-item,
:root[data-theme="dark"] .cmodal__card,
:root[data-theme="dark"] .paymodal__card,
:root[data-theme="dark"] .bform,
:root[data-theme="dark"] .datepick,
:root[data-theme="dark"] .bsel__menu { background: var(--surface); border-color: var(--border); }

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--text-faint); }

/* Tinted brand washes were mixed from the green literal — restate on gold. */
:root[data-theme="dark"] .detail__dest,
:root[data-theme="dark"] .legal table th,
:root[data-theme="dark"] .paymodal__note { background: rgba(189, 131, 13, .1); color: var(--ink); }

/* Footer already ships dark; only the divider needs softening. */
:root[data-theme="dark"] .site-footer { background: #2e4755; }

/* Images and maps are authored for a light page — take the edge off. */
:root[data-theme="dark"] .gallery img,
:root[data-theme="dark"] .team-card__media img { filter: brightness(.92); }

/* Honour a hard preference for reduced transparency on dark. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="dark"] .btn--ghost { background: var(--surface-2); backdrop-filter: none; }
}

/* --- Theme toggle ---------------------------------------------------- */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: #FAF8F3;                      /* header sits over the hero image */
  cursor: pointer;
  flex: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.theme-toggle:hover { background: var(--glass-strong); }
.theme-toggle svg { display: block; }
/* Show the icon for the theme you'd switch TO. */
.theme-toggle .theme-toggle__moon { display: block; }
.theme-toggle .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; }

/* Once the header goes solid (scrolled / inner pages) it is no longer over
   imagery, so the control has to pick up real foreground colours. */
.site-header.is-scrolled .theme-toggle,
body.inner-page .theme-toggle {
  color: var(--green-deep);
  border-color: var(--border);
  background: transparent;
}
.site-header.is-scrolled .theme-toggle:hover,
body.inner-page .theme-toggle:hover { background: var(--surface-2); }
:root[data-theme="dark"] .site-header.is-scrolled .theme-toggle,
:root[data-theme="dark"] body.inner-page .theme-toggle { color: var(--ink); border-color: var(--border); }

@media (max-width: 980px) { .theme-toggle { width: 36px; height: 36px; } }

/* --- Brand mark ------------------------------------------------------
   Inline SVG + wordmark. Paints with currentColor, so the header's own
   colour rules carry it across themes and scroll states. */
.brandmark { display: inline-flex; align-items: center; gap: 12px; color: inherit; }
.brandmark__svg,
.brandmark__img { height: 46px; width: auto; display: block; flex: none; }
.brandmark__word { display: block; line-height: 1; }
.brandmark__word b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.32rem; font-weight: 800;
  letter-spacing: 4px; text-transform: uppercase;
}
.brandmark__word span {
  display: block; margin-top: 4px;
  font-size: .53rem; font-weight: 600;
  letter-spacing: 3.1px; opacity: .72; white-space: nowrap;
}
.brandmark--footer .brandmark__svg,
.brandmark--footer .brandmark__img { height: 52px; }

@media (max-width: 980px) {
  .brandmark__svg, .brandmark__img { height: 36px; }
  .brandmark__word b { font-size: 1.05rem; letter-spacing: 2.6px; }
  .brandmark__word span { font-size: .46rem; letter-spacing: 2.2px; }
}
@media (max-width: 420px) {
  .brandmark__word span { display: none; }
}

/* =================================================================
   UTILITY BAR (desktop) — contact left, live conditions right.
   Sits above the fixed header; both slide up together once the page
   scrolls, so the header ends up flush to the top.
   ================================================================= */
:root { --ubar-h: 40px; }

.ubar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 101;
  height: var(--ubar-h);
  display: flex;
  align-items: center;
  background: var(--primary-deep);
  color: var(--on-primary);
  font-size: .78rem;
  transition: transform .4s var(--ease);
}
.ubar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }
.ubar__left, .ubar__right { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ubar__item, .ubar__chip {
  display: inline-flex; align-items: center; gap: 7px;
  color: inherit; white-space: nowrap;
  opacity: .92;
  transition: opacity .2s var(--ease);
}
a.ubar__item:hover, a.ubar__chip:hover { opacity: 1; }
.ubar__sep { width: 1px; height: 14px; background: currentColor; opacity: .3; }
.ubar__chip b { font-weight: 700; }
.ubar__chip b.is-open { color: var(--gold); }
.ubar__chip b.is-shut { opacity: .75; }
.ubar__chip--plain { opacity: .8; }

/* The header starts below the bar and rises to the top on scroll. */
.site-header { top: var(--ubar-h); }
body:has(.site-header.is-scrolled) .ubar { transform: translateY(-100%); }
body:has(.site-header.is-scrolled) .site-header { top: 0; }

/* Content that clears the fixed chrome has to allow for both. */
.hero { padding-top: calc(var(--header-h) + var(--ubar-h) + 12px); }
body.inner-page .page-grid,
body.inner-page main { padding-top: var(--ubar-h); }
/* Pages whose own top padding the rule above replaced keep both, so their
   first line never sits hard against the header. */
body.inner-page main.detail { padding-top: calc(var(--ubar-h) + clamp(24px, 3vw, 40px)); }
body.inner-page main.blog-detail { padding-top: calc(var(--ubar-h) + clamp(24px, 3vw, 44px)); }
body.inner-page main.crl { padding-top: calc(var(--ubar-h) + clamp(22px, 2.6vw, 36px)); }

@media (max-width: 980px) {
  /* Mobile already has the .topbar utility strip. */
  .ubar { display: none; }
  :root { --ubar-h: 0px; }
  .site-header { top: 0; }
  body.inner-page .page-grid, body.inner-page main { padding-top: 0; }
}

/* --- Header sizing for the 8-item comp nav ---------------------------
   Home / Destinations / Packages / Experiences / Stay / Ski School /
   About Us / Contact Us plus logo, toggle and CTA is a lot of width, so
   the links tighten up and are never allowed to wrap onto two lines. */
.nav__list { flex-wrap: nowrap; }
.nav__link { white-space: nowrap; font-size: .95rem; padding: 10px 12px; }
.header__inner { gap: 14px; }
.header__actions { gap: 10px; flex: none; }
/* The number now lives in the utility bar — no need to repeat it. */
@media (min-width: 981px) { .header__phone { display: none; } }

@media (max-width: 1400px) {
  .nav__link { font-size: .9rem; padding: 10px 9px; }
  .brandmark__word b { font-size: 1.12rem; letter-spacing: 2.6px; }
  .brandmark__svg, .brandmark__img { height: 40px; }
}
@media (max-width: 1200px) {
  .brandmark__word span { display: none; }
  .header__cta { padding-left: 16px; font-size: .74rem; }
  .header__cta .btn-arrow__ic { width: 32px; height: 32px; }
}

/* The split-hero chooser is now the first section, so IT has to clear the
   fixed chrome — the rule that did this lived on .hero, which follows it. */
/* Pad INSIDE the panels, not on the grid — padding on .split-hero would leave
   a strip of page background showing through under the transparent header. */
.split-hero__panel { padding-top: calc(var(--header-h) + var(--ubar-h) + 26px); }
.split-hero + .hero { padding-top: clamp(24px, 4vw, 56px); min-height: auto; }
@media (max-width: 980px) {
  .split-hero__panel { padding-top: calc(var(--header-h) + 22px); }
  .split-hero__panel + .split-hero__panel { padding-top: clamp(24px, 3.4vw, 44px); }
}


/* The brand mark inherits currentColor, so it needs the same treatment the nav
   links get: white over the hero image, ink once the header goes solid. */
.site-header .brand { color: #FAF8F3; }
.site-header.is-scrolled .brand,
body.inner-page .brand { color: var(--green-deep); }
:root[data-theme="dark"] .site-header.is-scrolled .brand,
:root[data-theme="dark"] body.inner-page .brand { color: var(--ink); }

/* Footer now carries the comp's six columns: brand, quick links,
   destinations, experiences, contact and newsletter. */
.footer__grid {
  grid-template-columns: 1.7fr .85fr .95fr 1fr 1.35fr;
  gap: 34px;
}
@media (max-width: 1180px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; } }
@media (max-width: 760px)  { .footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 520px)  { .footer__grid { grid-template-columns: 1fr; } }


/* =================================================================
   BRAND SYSTEM  (navy + mustard gold)
   -----------------------------------------------------------------
   The named components from the brand spec. Everything above styles
   the classes this codebase already uses; this block adds the generic
   names (.card, .primary-button, .highlight, …) so new markup — and
   CMS-authored content — lands on-brand without extra work.

   Kept last in the file so it wins on source order where it overlaps.
   ================================================================= */

::selection { background: var(--brand-gold-soft); color: var(--brand-navy-dark); }

/* ---------- panels ---------- */
.card,
.section-panel,
.form-panel {
  background: var(--panel);
  border: 1px solid rgba(46, 71, 85, .12);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(46, 71, 85, .1);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .section-panel,
:root[data-theme="dark"] .form-panel {
  border-color: var(--border);
  box-shadow: 0 12px 30px rgba(46, 71, 85, .45);
}

/* ---------- buttons ---------- */
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: 13px 26px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  background: var(--brand-navy);
  color: var(--brand-white);
  border: 1px solid var(--brand-navy);
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.primary-button:hover {
  background: var(--brand-navy-dark);
  border-color: var(--brand-navy-dark);
  transform: translateY(-2px);
}
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: 13px 26px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  background: transparent;
  color: var(--brand-navy);
  border: 1px solid var(--brand-gold);
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.secondary-button:hover {
  background: var(--brand-gold);
  color: var(--brand-navy-dark);
  transform: translateY(-2px);
}
/* On dark the navy pill would vanish into the canvas, so the roles swap. */
:root[data-theme="dark"] .primary-button {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-navy-dark);
}
:root[data-theme="dark"] .primary-button:hover { background: #BD830D; border-color: #BD830D; }
:root[data-theme="dark"] .secondary-button { color: var(--ink); }

/* ---------- accents ----------
   Gold is the highlight, never the body colour: one accent per idea. */
.highlight,
.active-state { color: var(--brand-gold); }
.accent-line {
  border: 0;
  height: 3px;
  width: 92px;
  border-radius: 2px;
  background: var(--brand-gold);
}
.is-active > .accent-line,
.active-state { border-color: var(--brand-gold); }

/* ---------- prose links ----------
   Scoped to running copy on purpose. The global rule is `a { color: inherit }`
   because nav items, card titles and tile labels are all anchors — turning
   every one of them gold would drown the interface in accent. Only links
   inside body text read as links, so only those get the gold. */
.legal a,
.blog-article__body a,
.faq-item__body a,
.about__copy a,
.pkg-desc a,
.rich-text a {
  color: var(--brand-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s var(--ease);
}
.legal a:hover,
.blog-article__body a:hover,
.faq-item__body a:hover,
.about__copy a:hover,
.pkg-desc a:hover,
.rich-text a:hover { color: var(--brand-navy-dark); }
:root[data-theme="dark"] .legal a:hover,
:root[data-theme="dark"] .blog-article__body a:hover,
:root[data-theme="dark"] .faq-item__body a:hover,
:root[data-theme="dark"] .about__copy a:hover,
:root[data-theme="dark"] .pkg-desc a:hover,
:root[data-theme="dark"] .rich-text a:hover { color: var(--ink); }

/* ---------- CMS-authored content ----------
   Blog bodies and legal pages come out of the editor as bare tags, so they
   need the palette applied by element rather than by class. */
.legal h1, .legal h2, .legal h3, .legal h4,
.blog-article__body h1, .blog-article__body h2,
.blog-article__body h3, .blog-article__body h4 { color: var(--brand-navy); }
:root[data-theme="dark"] .legal h1, :root[data-theme="dark"] .legal h2,
:root[data-theme="dark"] .legal h3, :root[data-theme="dark"] .legal h4,
:root[data-theme="dark"] .blog-article__body h1, :root[data-theme="dark"] .blog-article__body h2,
:root[data-theme="dark"] .blog-article__body h3, :root[data-theme="dark"] .blog-article__body h4 { color: var(--ink); }

.legal p, .legal li,
.blog-article__body p, .blog-article__body li { color: var(--text-2); }

.legal blockquote,
.blog-article__body blockquote {
  margin: 22px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--brand-gold);
  background: rgba(189, 131, 13, .08);
  border-radius: 0 10px 10px 0;
  color: var(--text-2);
}