/* ==========================================================================
   VINAYAK TOURS & TRAVELS — Main stylesheet
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Typography & helpers
   4.  Buttons
   5.  Header / navigation
   6.  Hero & page banners
   7.  Booking & contact forms
   8.  Cards (trust, service, package, destination, fleet)
   9.  Split sections & feature lists
   10. Steps / how it works
   11. Testimonials
   12. FAQ accordion
   13. CTA band
   14. Contact page blocks
   15. Footer
   16. Floating actions & back to top
   17. Animation utilities
   18. Responsive breakpoints
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand palette — Rajasthan inspired */
  --navy: #102A43;
  --navy-700: #16324F;
  --navy-600: #1E4165;
  --blue: #1D4ED8;
  --blue-600: #1A44BE;
  --blue-50: #F2F5FC;
  --mist: #F4F1EA;
  --cream: #FBF5EA;
  --sand-deep: #EBD7B4;
  --sand: #F7E7CE;
  --sand-200: #F1DCBC;
  --off-white: #FAFAF7;
  --terracotta: #C65D3A;
  --terracotta-600: #AE4E2E;
  --terracotta-50: #FBEDE7;
  --ink: #17202A;
  --muted: #5B6B7C;
  --muted-light: #8593A2;
  --line: #E6E3DC;
  --line-soft: #F0EEE8;
  --white: #FFFFFF;

  /* Typography */
  --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Radii */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(23, 32, 42, .04);
  --shadow-md: 0 10px 30px rgba(74, 54, 36, .09);
  --shadow-lg: 0 24px 64px rgba(74, 54, 36, .16);

  /* Layout */
  --container: 1240px;
  --gutter: 24px;
  --header-h: 84px;
  --header-h-compact: 68px;

  /* Motion */
  --ease: cubic-bezier(.4, .16, .2, 1);
  --t-fast: .18s var(--ease);
  --t: .28s var(--ease);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* `clip` (not `hidden`) keeps the off-canvas mobile drawer from widening the
     page without turning the root into a scroll container, so the sticky
     header and smooth scrolling keep working. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--blue-600); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid rgba(29, 78, 216, .45);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: var(--white); }

/* ==========================================================================
   3. TYPOGRAPHY & HELPERS
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.85rem, 1.25rem + 2.2vw, 3rem); font-weight: 500; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.15rem); font-weight: 500; }
h3 { font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem); font-weight: 600; }
h4 { font-size: .98rem; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

.section { padding-block: clamp(48px, 3.4vw + 26px, 84px); }
.section--tight { padding-block: clamp(34px, 2.4vw + 18px, 56px); }
.section--sand { background: var(--sand); }
.section--soft { background: var(--mist); }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--navy { background: var(--navy); color: rgba(255, 255, 255, .82); }
.section--navy h2,
.section--navy h3 { color: var(--white); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--terracotta);
  border-radius: 2px;
}
.section--navy .eyebrow,
.hero .eyebrow,
.cta-band .eyebrow { color: var(--sand); }
.section--navy .eyebrow::before,
.hero .eyebrow::before,
.cta-band .eyebrow::before { background: var(--sand); }

.section-head { max-width: 620px; margin-bottom: clamp(26px, 2.6vw, 40px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { color: var(--muted); font-size: .97rem; line-height: 1.7; }
.section--navy .section-head p { color: rgba(255, 255, 255, .78); }

.lead { font-size: 1.02rem; color: var(--muted); }
.text-center { text-align: center; }
.mt-32 { margin-top: 24px; }
.mt-40 { margin-top: 30px; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--t-fast), color var(--t-fast),
    border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-600); color: var(--white); box-shadow: var(--shadow-md); }

.btn--accent { background: var(--terracotta); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--terracotta-600); color: var(--white); box-shadow: var(--shadow-md); }

.btn--dark { background: var(--navy); color: var(--white); }
.btn--dark:hover { background: var(--navy-700); color: var(--white); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

.btn--light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .55); }
.btn--light:hover { background: var(--white); color: var(--navy); }

.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: var(--sand); color: var(--navy); }

.btn--block { width: 100%; }
.btn--sm { padding: 11px 20px; min-height: 42px; font-size: .74rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}
.link-arrow:hover { color: var(--terracotta); }
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   5. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(250, 250, 247, .97);
  /* No backdrop-filter here. An element with one becomes the containing block
     for its position:fixed descendants, which would anchor the mobile drawer
     to the header instead of the viewport — the drawer then scrolls away with
     the page. The background is near-opaque, so the blur was not doing much. */
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--t), background var(--t);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(250, 250, 247, .98); }

/* The header needs a little more room than the content container so that the
   eight navigation links, the call block and the CTA all fit on one line. */
.site-header .container { max-width: 1400px; }

.header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
  transition: min-height var(--t);
  flex-wrap: nowrap;
}
.site-header.is-stuck .header__inner { min-height: var(--header-h-compact); }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__mark {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-sm);
  background: var(--navy);
  display: grid; place-items: center;
  box-shadow: var(--shadow-xs);
}
.brand__mark svg { width: 24px; height: 24px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.brand__tagline {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
}

.main-nav { margin-left: auto; min-width: 0; }
.main-nav__list { display: flex; align-items: center; gap: 2px; }
.main-nav__link {
  display: block;
  padding: 10px 11px;
  border-radius: var(--r-sm);
  font-size: .89rem;
  font-weight: 500;
  color: var(--navy-700);
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.main-nav__link:hover { color: var(--terracotta); background: transparent; }
.main-nav__link.is-active { color: var(--navy); font-weight: 600; }
.main-nav__link.is-active::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--terracotta);
}
/* Drawer-only call to action — revealed with the mobile navigation */
.main-nav__cta { display: none; }

.header__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.header__call {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: var(--r-sm);
  color: var(--navy);
}
.header__call:hover { background: transparent; color: var(--terracotta); }
.header__call-icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  color: var(--terracotta);
}
.header__call-icon svg { width: 18px; height: 18px; }
.header__call-text { display: flex; flex-direction: column; line-height: 1.2; }
.header__call-label {
  font-size: .76rem; font-weight: 600; white-space: nowrap;
  letter-spacing: .12em; text-transform: uppercase;
}
.header__call-number { display: none; }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 97; /* stays visible (as the close button) above the open drawer */
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  place-items: center;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px;
  background: var(--navy); border-radius: 2px;
  position: relative; transition: transform var(--t), background var(--t-fast);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform var(--t), top var(--t), opacity var(--t-fast);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(16, 42, 67, .5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
  /* Below the sticky header (z-index 90) so the drawer, which lives inside the
     header's stacking context, is never dimmed by it. */
  z-index: 88;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* The page behind the drawer is held still without touching overflow on
   <html> or <body>. Setting overflow:hidden on either one moves the scroll
   container: the sticky header drops out of place and the scroll position
   shifts every time the drawer opens and closes. Instead the backdrop simply
   swallows touch and wheel events while it is up. */
.nav-backdrop.is-open { touch-action: none; }
.main-nav { overscroll-behavior: contain; }

/* ==========================================================================
   6. HERO & PAGE BANNERS
   ========================================================================== */
.hero {
  position: relative;
  color: var(--white);
  background: var(--navy);
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
      rgba(12, 20, 29, .80) 0%,
      rgba(12, 20, 29, .52) 30%,
      rgba(12, 20, 29, .18) 58%,
      rgba(12, 20, 29, .04) 100%);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: end;
  min-height: min(78vh, 740px);
  padding-block: clamp(120px, 14vw, 200px) clamp(84px, 8vw, 128px);
}
.hero__content { max-width: 640px; }
.hero h1 { color: var(--white); margin-bottom: 22px; letter-spacing: -.02em; }
.hero__sub {
  font-size: clamp(.98rem, .94rem + .2vw, 1.08rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .84);
  max-width: 44ch;
  margin-bottom: 24px;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: .8rem; font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .92);
  margin-bottom: 20px;
}
.hero__badge strong {
  background: var(--terracotta);
  color: var(--white);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero__stats {
  display: flex; flex-wrap: wrap; gap: 20px 44px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero__stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--white);
  line-height: 1.1;
}
.hero__stat > span {
  font-size: .72rem; color: rgba(255, 255, 255, .62);
  letter-spacing: .14em; text-transform: uppercase;
}

/* Inner page banner */
.page-hero {
  position: relative;
  color: var(--white);
  background: var(--navy);
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: min(46vh, 400px);
  padding-block: clamp(86px, 10vw, 150px) clamp(30px, 3vw, 48px);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
      rgba(12, 20, 29, .86) 0%,
      rgba(12, 20, 29, .58) 34%,
      rgba(12, 20, 29, .2) 72%,
      rgba(12, 20, 29, .05) 100%);
}
.page-hero h1 { color: var(--white); margin-bottom: 14px; }
.page-hero p { color: rgba(255, 255, 255, .84); max-width: 60ch; font-size: 1.05rem; }
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 22px;
}
.breadcrumb a { color: rgba(255, 255, 255, .85); }
.breadcrumb a:hover { color: var(--sand); }
.breadcrumb span[aria-hidden] { opacity: .5; }

/* ==========================================================================
   7. BOOKING & CONTACT FORMS
   ========================================================================== */
.booking-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(26px, 2.4vw, 38px);
  box-shadow: var(--shadow-lg);
}
.booking-card__head { margin-bottom: 24px; }
.booking-card__head h2 { font-size: 1.45rem; margin-bottom: 6px; }
.booking-card__head p { font-size: .9rem; color: var(--muted); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid--single { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: .95rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(16, 42, 67, .08);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-light); }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--terracotta); background: var(--terracotta-50); }
.field__error {
  font-size: .78rem;
  color: var(--terracotta-600);
  font-weight: 500;
  min-height: 0;
  display: none;
}
.field.has-error .field__error { display: block; }

.form-note { font-size: .8rem; color: var(--muted); margin-top: 12px; text-align: center; }
.form-status {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: .9rem;
  font-weight: 500;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: #E8F3EC; color: #1F6B42; border: 1px solid #C7E3D3; }
.form-status--err { background: var(--terracotta-50); color: var(--terracotta-600); border: 1px solid #F0CBBC; }

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 24px 22px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
/* A terracotta rule wipes in along the top edge on hover */
.card::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: var(--terracotta);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-bottom: 7px; }
.card p { color: var(--muted); font-size: .9rem; line-height: 1.65; }

.icon-badge {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--terracotta);
  margin-bottom: 14px;
  transition: transform var(--t-fast);
}
.icon-badge svg { width: 23px; height: 23px; stroke-width: 1.4; }
.card:hover .icon-badge { transform: translateY(-2px); }
.icon-badge--sand { color: var(--navy); }

.card__footer { margin-top: auto; padding-top: 14px; }

/* Trust strip */
.trust-strip {
  position: relative;
  margin-top: -52px;
  z-index: 5;
}
.trust-strip .grid {
  gap: 0; box-shadow: var(--shadow-lg); background: var(--white);
  border-radius: var(--r-lg); overflow: hidden;
}
.trust-card {
  background: var(--white);
  padding: 24px 22px;
  height: 100%;
  border-right: 1px solid var(--line-soft);
}
.trust-card:last-child { border-right: 0; }
.trust-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.trust-card p { font-size: .86rem; color: var(--muted); line-height: 1.6; }
.trust-card .icon-badge { margin-bottom: 10px; }

/* Package cards */
.package-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.package-card__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--mist); border-radius: var(--r-md); margin-bottom: 22px;
}
.package-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.package-card:hover .package-card__media img { transform: scale(1.06); }
.package-card__tag {
  position: absolute; top: 16px; left: 16px;
  background: rgba(250, 250, 247, .94);
  color: var(--navy);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--r-sm);
}
.package-card__body { padding: 0; display: flex; flex-direction: column; flex: 1; }
.package-card__body h3 { margin-bottom: 8px; }
.package-card__route {
  font-size: .72rem; color: var(--terracotta); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.package-card__desc { font-size: .93rem; color: var(--muted); margin-bottom: 18px; line-height: 1.75; }
.package-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
  margin-top: auto;
  font-size: .82rem; color: var(--muted);
}
.package-meta span { display: inline-flex; align-items: center; gap: 7px; }
.package-meta svg { width: 15px; height: 15px; color: var(--terracotta); flex: none; }
.package-card__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.price-note { font-size: .7rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.price-note b {
  display: block; font-size: 1.02rem; color: var(--navy);
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: 0; text-transform: none;
}

/* Filters */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 32px;
}
.filter-btn {
  padding: 11px 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: transparent;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-700);
  transition: all var(--t-fast);
}
.filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.filter-btn.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.filter-empty {
  display: none;
  padding: 40px;
  text-align: center;
  color: var(--muted);
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.filter-empty.is-visible { display: block; }
.is-hidden { display: none !important; }

/* Destination cards */
.dest-card {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--navy);
  color: var(--white);
  isolation: isolate;
}
.dest-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.dest-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(14, 23, 33, .88) 4%, rgba(14, 23, 33, .32) 50%, rgba(14, 23, 33, 0) 78%);
  transition: opacity var(--t);
}
.dest-card:hover img { transform: scale(1.08); }
.dest-card__body {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 22px;
}
.dest-card__body h3 { color: var(--white); font-size: 1.2rem; font-weight: 500; margin-bottom: 4px; }
.dest-card__body p {
  font-size: .88rem;
  color: rgba(255, 255, 255, .78);
  margin-bottom: 10px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--t), opacity var(--t), margin var(--t);
}
.dest-card:hover .dest-card__body p,
.dest-card:focus-visible .dest-card__body p { max-height: 90px; opacity: 1; }
.dest-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand);
}
.dest-card__cta svg { width: 15px; height: 15px; transition: transform var(--t-fast); }
.dest-card:hover .dest-card__cta svg { transform: translateX(4px); }
.dest-card--wide { aspect-ratio: 16 / 11; }

/* Chips (outstation destinations) */
.chip-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .92);
  font-size: .9rem; font-weight: 500;
  transition: all var(--t-fast);
}
.chip:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.chip svg { width: 15px; height: 15px; opacity: .75; }
.chip--light {
  background: var(--white);
  border-color: var(--line);
  color: var(--navy-700);
}
.chip--light:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Fleet cards */
.fleet-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  height: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
.fleet-card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); }
.fleet-card__media { aspect-ratio: 16 / 10; background: var(--mist); overflow: hidden; }
.fleet-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fleet-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.fleet-card__body h3 { margin-bottom: 4px; }
.fleet-card__body > p { font-size: .93rem; color: var(--muted); margin-bottom: 16px; }
.spec-list {
  display: grid; gap: 10px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.spec-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: .89rem; color: var(--navy-700);
}
.spec-list svg { width: 17px; height: 17px; color: var(--terracotta); flex: none; }
.spec-list b { font-weight: 600; }
.fleet-card__footer { margin-top: auto; }

/* Route table */
.route-table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--white); }
.route-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.route-table th, .route-table td { padding: 15px 20px; text-align: left; font-size: .93rem; }
.route-table thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.route-table tbody tr + tr { border-top: 1px solid var(--line-soft); }
.route-table tbody tr:hover { background: var(--mist); }
.route-table td:first-child { font-weight: 600; color: var(--navy); }
.route-table .quote-cell { color: var(--terracotta); font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   9. SPLIT SECTIONS & FEATURE LISTS
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 52px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img {
  display: block;
  width: 100%;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* The caption plate is joined to the bottom of the photograph, so the two read
   as one piece rather than a stray line of text under an image. */
.split__media:has(.split__badge) img { border-radius: var(--r-md) var(--r-md) 0 0; }
.split__badge {
  position: static;
  margin: 0;
  padding: 16px clamp(18px, 1.8vw, 24px);
  background: var(--sand);
  border-radius: 0 0 var(--r-md) var(--r-md);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 20px);
}
.split__badge b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--terracotta);
  flex: none;
}
.split__badge > span {
  font-size: .84rem;
  color: var(--navy-700);
  line-height: 1.5;
  display: block;
}

.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; margin: 18px 0 22px; }
.check-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .94rem;
  color: var(--navy-700);
  font-weight: 500;
}
.check-list svg { width: 19px; height: 19px; color: var(--terracotta); flex: none; margin-top: 2px; }
.section--navy .check-list li { color: rgba(255, 255, 255, .88); }
.section--navy .check-list svg { color: var(--sand); }
.check-list--single { grid-template-columns: 1fr; }

/* Stats band */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat {
  text-align: center;
  padding: 30px 18px;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.stat:last-child { border-right: 0; }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  color: var(--sand);
  line-height: 1.1;
}
.stat > span {
  font-size: .72rem; color: rgba(255, 255, 255, .7);
  letter-spacing: .12em; text-transform: uppercase;
}
.stat-band--light .stat { border-right-color: var(--line); }
.stat-band--light .stat b { color: var(--navy); }
.stat-band--light .stat > span { color: var(--muted); }

/* ==========================================================================
   10. STEPS / HOW IT WORKS
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.steps::before {
  content: "";
  position: absolute;
  top: 34px; left: 12%; right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 20px);
  z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; }
.step__num {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--off-white);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--terracotta);
  transition: color var(--t);
}
.step:hover .step__num { color: var(--navy); }
.step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { font-size: .92rem; color: var(--muted); }
.section--sand .steps::before { background: repeating-linear-gradient(90deg, rgba(198, 93, 58, .35) 0 10px, transparent 10px 20px); }
.section--sand .step__num { background: var(--sand); }
.section--white .step__num, .section--soft .step__num { background: transparent; }

/* ==========================================================================
   11. TESTIMONIALS
   ========================================================================== */
.slider { position: relative; }
.slider__viewport { overflow: hidden; }
.slider__track {
  display: flex;
  transition: transform .5s var(--ease);
  will-change: transform;
}
.slider__slide { flex: 0 0 33.3333%; padding-inline: 12px; box-sizing: border-box; }

/* Each review is a closed card. Without the border the two columns sat side by
   side with matching baselines and the eye read straight across them. */
.quote-card {
  background: var(--off-white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2vw, 28px);
  height: 100%;
  display: flex; flex-direction: column;
}
.section--soft .quote-card,
.section--sand .quote-card { background: var(--white); }
.quote-card__stars { display: flex; gap: 3px; color: var(--terracotta); margin-bottom: 14px; }
.quote-card__stars svg { width: 17px; height: 17px; }
.quote-card blockquote {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.75;
  flex: 1;
}
.quote-card__person { display: flex; align-items: center; gap: 13px; }
.avatar {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy);
  color: var(--sand);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}
.quote-card__person b { display: block; font-size: .95rem; color: var(--navy); }
.quote-card__person span { font-size: .84rem; color: var(--muted); }

.slider__controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 32px;
}
.slider__btn {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--white);
  display: grid; place-items: center;
  color: var(--navy);
  transition: all var(--t-fast);
}
.slider__btn:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.slider__btn svg { width: 18px; height: 18px; }
.slider__dots { display: flex; gap: 8px; }
.slider__dot {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--line);
  transition: all var(--t-fast);
}
.slider__dot.is-active { background: var(--terracotta); width: 26px; border-radius: var(--r-pill); }

/* ==========================================================================
   12. FAQ ACCORDION
   ========================================================================== */
.accordion { display: grid; gap: 0; }
.acc-item {
  background: transparent;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.acc-item.is-open { border-bottom-color: var(--navy); }
.acc-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 0;
  background: none; border: 0;
  text-align: left;
  font-size: 1.05rem; font-weight: 500;
  color: var(--navy);
  font-family: var(--font-display);
}
.acc-trigger:hover { color: var(--terracotta); }
.acc-trigger { font-size: 1rem; }
.acc-icon {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  position: relative;
  transition: transform var(--t);
}
.acc-icon::before,
.acc-icon::after {
  content: ""; position: absolute;
  background: var(--navy); border-radius: 2px;
  transition: transform var(--t), background var(--t-fast);
}
.acc-icon::before { width: 14px; height: 1.5px; }
.acc-icon::after  { width: 1.5px; height: 14px; }
.acc-item.is-open .acc-icon::before,
.acc-item.is-open .acc-icon::after { background: var(--terracotta); }
.acc-item.is-open .acc-icon::after { transform: scaleY(0); }
.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .34s var(--ease);
}
.acc-panel__inner { padding: 0 44px 20px 0; color: var(--muted); font-size: .92rem; line-height: 1.7; }

/* ==========================================================================
   13. CTA BAND
   ========================================================================== */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
  padding-block: clamp(46px, 4vw, 72px);
}
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(14, 23, 33, .9), rgba(14, 23, 33, .66));
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255, 255, 255, .84); font-size: .99rem; max-width: 56ch; margin-inline: auto; }

/* ==========================================================================
   14. CONTACT PAGE BLOCKS
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}
.contact-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(22px, 2vw, 32px);
}
.contact-list { display: grid; gap: 0; }
.contact-item {
  display: flex; gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--t);
}
.contact-item:hover { border-bottom-color: var(--navy); }
.contact-item .icon-badge { margin-bottom: 0; }
.contact-item h3 { font-size: 1.02rem; margin-bottom: 2px; }
.contact-item a, .contact-item p { font-size: .94rem; color: var(--muted); }
.contact-item a:hover { color: var(--blue); }

.map-frame {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--blue-50);
  position: relative;
}
.map-frame img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.map-frame iframe { width: 100%; height: 420px; border: 0; display: block; }
.map-note {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  font-size: .85rem;
  color: var(--navy);
  box-shadow: var(--shadow-md);
  text-align: center;
  white-space: nowrap;
}

/* Tour package detail blocks */
.pkg-detail { padding-block: clamp(28px, 2.6vw, 44px); }
.pkg-detail + .pkg-detail { border-top: 1px solid var(--line); }
.pkg-detail__grid {
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}
.pkg-detail h3 { margin-top: 24px; }
.day-list { display: grid; gap: 12px; }
.day {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 16px;
  padding: 13px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.day:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.day__label {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terracotta);
  padding-top: 3px;
}
.day h4 { margin-bottom: 3px; font-family: var(--font-body); font-size: .98rem; }
.day p { font-size: .92rem; color: var(--muted); }
.pkg-aside { position: sticky; top: calc(var(--header-h) + 18px); }
.pkg-aside__img { border-radius: var(--r-sm); margin-bottom: 16px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* Screen-reader only */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Legal / long-form text pages */
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; font-size: 1.15rem; }
.prose p, .prose li { color: var(--muted); }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 1rem; display: grid; gap: 8px; }
.prose li { display: list-item; }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .72); padding-top: clamp(40px, 3.5vw, 58px); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: clamp(24px, 2.4vw, 36px);
  padding-bottom: 34px;
}
.site-footer h3 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.site-footer p { font-size: .93rem; line-height: 1.75; }
.site-footer a { color: rgba(255, 255, 255, .74); font-size: .93rem; }
.site-footer a:hover { color: var(--sand); }
.footer-links { display: grid; gap: 11px; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand .brand__mark { background: rgba(255, 255, 255, .1); }
.footer-brand .brand__name { color: var(--white); }
.footer-contact { display: grid; gap: 16px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; color: var(--sand); flex: none; margin-top: 3px; }
.footer-contact b { display: block; color: var(--white); font-size: .84rem; font-weight: 600; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: .86rem;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .8);
  transition: background var(--t-fast), color var(--t-fast);
}
.footer-social a:hover { background: var(--sand); color: var(--navy); }
.footer-social svg { width: 17px; height: 17px; }

/* ==========================================================================
   16. FLOATING ACTIONS & BACK TO TOP
   ========================================================================== */
.floating-actions {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fab {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
  position: relative;
}
.fab:hover { transform: translateY(-3px) scale(1.04); color: var(--white); box-shadow: var(--shadow-lg); }
.fab svg { width: 26px; height: 26px; }
.fab--call { background: var(--terracotta); }
.fab--whatsapp { background: #25D366; }
.fab__pulse { display: none; }
@keyframes fabPulse {
  0%   { transform: scale(1); opacity: .45; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.back-to-top {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all var(--t);
  box-shadow: var(--shadow-sm);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.back-to-top svg { width: 18px; height: 18px; }

/* Mobile sticky action bar */
.mobile-bar {
  display: none;
  position: fixed;
  inset-inline: 0; bottom: 0;
  z-index: 85;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(16, 42, 67, .1);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
}
.mobile-bar .btn { flex: 1; padding-inline: 10px; font-size: .88rem; }

/* ==========================================================================
   17. ANIMATION UTILITIES
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

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

/* ==========================================================================
   18. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Large laptops --------------------------------------------------------- */
/* Large laptops: tighten the navigation before it has to collapse ------- */
@media (max-width: 1400px) {
  .main-nav__list { gap: 0; }
  .main-nav__link { padding-inline: 7px; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: .96rem; }
}
@media (max-width: 1240px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet landscape: the navigation becomes a slide-in drawer ------------- */
@media (max-width: 1320px) {
  :root { --header-h: 76px; --header-h-compact: 64px; }

  /* Collapse the desktop nav into the slide-in drawer */
  .nav-toggle { display: grid; order: 3; }
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    width: min(340px, 86vw);
    height: 100dvh;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    padding: 90px 26px 32px;
    transform: translateX(105%);
    transition: transform .34s var(--ease);
    z-index: 96;
    overflow-y: auto;
    margin-left: 0;
  }
  .main-nav.is-open { transform: none; }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav__link {
    padding: 14px 12px;
    font-size: 1rem;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .main-nav__link.is-active::after { display: none; }
  .main-nav__link.is-active { background: var(--blue-50); border-radius: var(--r-sm); }
  .main-nav__cta { display: grid; gap: 12px; margin-top: 26px; }
  .header__inner { gap: 12px; }
  /* The nav is removed from the flow when it becomes a drawer, so the actions
     need their own auto margin to stay pinned to the right. */
  .header__actions { margin-left: auto; }
  .header__actions .btn { display: none; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { max-width: none; }
  .booking-card { max-width: 620px; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .stat-band { grid-template-columns: repeat(2, 1fr); }

  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .steps::before { display: none; }

  .slider__slide { flex-basis: 50%; }

  .contact-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .pkg-detail__grid { grid-template-columns: 1fr; }
  .pkg-aside { position: static; }
}

/* Tablet portrait ------------------------------------------------------- */
@media (max-width: 860px) {

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__badge { max-width: none; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { margin-top: -32px; }
  .hero__stats { gap: 20px 32px; }
}

/* Small tablets & large phones: compact the header ---------------------- */
@media (max-width: 600px) {
  .header__call-text { display: none; }
  .header__call { padding: 4px; }
  /* Let the brand shrink and wrap instead of pushing the menu button off-screen */
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand__name { white-space: normal; }
}

/* Mobile ---------------------------------------------------------------- */
@media (max-width: 680px) {
  :root { --gutter: 18px; }


  .grid,
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; gap: 18px; }
  .dest-grid.grid--5,
  .dest-grid.grid--4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .dest-card { aspect-ratio: 3 / 4; }
  .dest-card__body { padding: 16px; }
  .dest-card__body h3 { font-size: 1.05rem; }
  .dest-card__body p { display: none; }

  .form-grid { grid-template-columns: 1fr; }
  .check-list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step {
    text-align: left;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding-bottom: 30px;
    position: relative;
  }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 27px; top: 62px; bottom: 6px;
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 16px);
  }
  .step__num { width: 56px; height: 56px; margin: 0; font-size: 1.15rem; }
  .step > div { padding-top: 6px; }

  .stat-band { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stat { padding: 20px 12px; }

  .slider__slide { flex-basis: 100%; padding-inline: 0; }

  .package-card__actions { flex-direction: column; align-items: stretch; }
  .package-card__actions .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-bottom nav { justify-content: center; }

  .btn-row .btn { width: 100%; }
  .btn-row--center { flex-direction: column; }

  /* Sticky bottom action bar replaces the floating stack */
  .mobile-bar { display: flex; }
  .floating-actions { bottom: 78px; right: 14px; }
  .fab { width: 48px; height: 48px; }
  .fab svg { width: 23px; height: 23px; }
  body { padding-bottom: 62px; }

  .map-note { white-space: normal; width: calc(100% - 36px); }
  .acc-trigger { padding: 16px 18px; font-size: .96rem; }
  .acc-panel__inner { padding: 0 18px 18px; }
  .card { padding: 22px; }
  .day { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .pkg-detail .grid--2 { gap: 0; }
}

/* Small phones ---------------------------------------------------------- */
@media (max-width: 400px) {
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: .88rem; }
  .brand__tagline { font-size: .6rem; letter-spacing: .14em; }
  .dest-grid.grid--5,
  .dest-grid.grid--4 { grid-template-columns: 1fr; }
  .hero__stats { gap: 16px 24px; }
  .hero__stat b { font-size: 1.5rem; }
  .booking-card { padding: 18px; }
  .mobile-bar .btn { font-size: .82rem; gap: 6px; }
}

/* Minimal-layout adjustments for stacked grids -------------------------- */
@media (max-width: 1024px) {
  .trust-strip .grid { box-shadow: var(--shadow-md); }
  .trust-card:nth-child(3n) { border-right: 0; }
  .trust-card { border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 680px) {
  .trust-card { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 26px 22px; }
  .trust-card:last-child { border-bottom: 0; }
  .stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .stat-band--light .stat { border-bottom-color: var(--line); }
  .split__media img { aspect-ratio: 4 / 3; }
  .quote-card blockquote { font-size: 1rem; }
  .acc-panel__inner { padding-right: 0; }
}

/* Print ----------------------------------------------------------------- */
@media print {
  .site-header, .floating-actions, .mobile-bar, .back-to-top, .cta-band { display: none !important; }
  body { background: #fff; }
}


/* ==========================================================================
   19. PACKAGE SHOWCASE
   A featured trip followed by a grid of cards. Every card carries who the trip
   suits, how hard it works you, and the one moment people remember — which is
   what makes one package feel different from the next.
   ========================================================================== */
.pkg-showcase { display: grid; gap: clamp(20px, 2.4vw, 32px); }

/* -- shared bits -- */
.pkg-kicker {
  font-family: var(--font-display);
  font-size: .98rem;
  font-style: italic;
  color: var(--terracotta);
  margin-bottom: 10px;
}
.pkg-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: .8rem; color: var(--muted);
  letter-spacing: .04em;
}
.pkg-meta span { display: inline-flex; align-items: center; gap: 7px; }
.pkg-meta svg { width: 15px; height: 15px; color: var(--terracotta); flex: none; }
.pkg-badge {
  position: absolute; top: 18px; left: 18px;
  background: var(--navy); color: var(--sand);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 8px 15px; border-radius: var(--r-sm);
}

/* -- featured trip -- */
.pkg-feature {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.pkg-feature__media { position: relative; display: block; min-height: 340px; overflow: hidden; }
.pkg-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pkg-feature:hover .pkg-feature__media img { transform: scale(1.04); }
.pkg-feature__body { padding: clamp(24px, 2.4vw, 38px); display: flex; flex-direction: column; }
.pkg-feature__body h3 { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.8rem); margin-bottom: 5px; }
.pkg-feature__body h3 a { color: inherit; }
.pkg-feature__body h3 a:hover { color: var(--terracotta); }
.pkg-moment {
  margin: 0 0 18px;
  padding-left: 18px;
  border-left: 2px solid var(--sand-deep);
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--navy-700);
}
.pkg-highlights { display: grid; gap: 8px; margin: 16px 0 22px; }
.pkg-highlights li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .92rem; color: var(--navy-700);
}
.pkg-highlights svg { width: 18px; height: 18px; color: var(--terracotta); flex: none; margin-top: 2px; }
.pkg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.pkg-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem; color: var(--muted);
}
.pkg-foot svg { width: 15px; height: 15px; color: var(--terracotta); }

/* -- card grid -- */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.pkg-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.pkg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pkg-card__media {
  position: relative; display: block;
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist);
}
.pkg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pkg-card:hover .pkg-card__media img { transform: scale(1.06); }
.pkg-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 23, 33, .55), rgba(14, 23, 33, 0) 52%);
}
.pkg-card__for {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: rgba(250, 250, 247, .95); color: var(--navy);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 13px; border-radius: var(--r-sm);
}
.pkg-card__days {
  position: absolute; left: 16px; bottom: 14px; z-index: 1;
  color: var(--white);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.pkg-card__body { padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.pkg-card__body h3 { font-size: 1.12rem; margin-bottom: 3px; }
.pkg-card__body h3 a { color: inherit; }
.pkg-card__body h3 a:hover { color: var(--terracotta); }
.pkg-card .pkg-kicker { font-size: .95rem; margin-bottom: 12px; }
.pkg-card__moment {
  font-size: .88rem; line-height: 1.6; color: var(--muted);
  margin-bottom: 14px;
}
.pkg-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}

/* -- destination "suggested stay" chip -- */
.dest-card__stay {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(250, 250, 247, .94); color: var(--navy);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .08em;
  padding: 6px 11px; border-radius: var(--r-sm);
}
.dest-card__stay svg { width: 13px; height: 13px; }

@media (max-width: 1024px) {
  .pkg-feature { grid-template-columns: 1fr; }
  .pkg-feature__media { min-height: 300px; aspect-ratio: 16 / 9; }
  .pkg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .pkg-grid { grid-template-columns: 1fr; }
  .pkg-actions .btn { width: 100%; }
  .pkg-card__foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .pkg-card__foot .btn { width: 100%; }
  .pkg-moment { font-size: 1.02rem; }
}

/* ==========================================================================
   20. COMPACT BLOCKS
   Trimmed variants used where a full card grid made the page feel longer than
   the content justified.
   ========================================================================== */
.pkg-included {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--white);
  border-radius: var(--r-md);
  font-size: .88rem;
  line-height: 1.65;
  color: var(--navy-700);
}
.pkg-included svg { width: 16px; height: 16px; color: var(--terracotta); display: inline; vertical-align: -3px; }
.pkg-included span { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); }

.guide-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(28px, 4vw, 64px);
}
.guide { padding: 22px 0; border-bottom: 1px solid var(--line); }
.guide__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.guide__head h3 { margin: 0 0 6px; }
.guide__stay {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; color: var(--muted); white-space: nowrap;
  letter-spacing: .06em;
}
.guide__stay svg { width: 13px; height: 13px; color: var(--terracotta); }
.guide p { font-size: .9rem; color: var(--muted); line-height: 1.65; margin-bottom: 10px; }

@media (max-width: 860px) {
  .guide-list { grid-template-columns: 1fr; }
}


/* ==========================================================================
   21. QUOTE STRIP
   The hero is a photograph first; the quote form sits in a card just below it,
   overlapping the image slightly so the two read as one unit.
   ========================================================================== */
.booking-strip {
  position: relative;
  margin-top: clamp(-64px, -4vw, -40px);
  z-index: 6;
  padding-bottom: clamp(8px, 1.5vw, 20px);
}
.booking-bar {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 2.2vw, 32px);
}
.booking-bar .booking-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: 18px;
}
.booking-bar .booking-card__head h2 { font-size: 1.28rem; margin: 0; }
.booking-bar .booking-card__head p { font-size: .88rem; color: var(--muted); margin: 0; }
.booking-bar .form-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 18px; }
.booking-bar .field--full { grid-column: auto; }
.booking-bar .mt-32 { margin-top: 18px; }
.booking-bar .btn--block { width: auto; min-width: 240px; }
.booking-bar .form-note { text-align: left; margin-top: 10px; }

@media (max-width: 1024px) {
  .booking-bar .form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .booking-strip { margin-top: -28px; }
  .booking-bar { padding: 20px 18px; }
  .booking-bar .form-grid { grid-template-columns: 1fr; }
  .booking-bar .btn--block { width: 100%; min-width: 0; }
  .booking-bar .form-note { text-align: center; }
  .hero__inner { min-height: min(74vh, 580px); padding-block: 92px 56px; }
  .page-hero { min-height: min(40vh, 320px); }
}

/* ==========================================================================
   22. SEASON GROUPS
   Outstation destinations listed by state and by the months worth travelling
   in — the whole map in a fraction of the height a card grid would take.
   ========================================================================== */
.season-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 2.8vw, 40px);
}
.season { padding-top: 22px; border-top: 1px solid var(--line); }
.season__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 6px 16px;
  margin-bottom: 6px;
}
.season__head h3 { margin: 0; }
.season__when {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--terracotta); white-space: nowrap;
}
.season__when svg { width: 14px; height: 14px; }
.season__note { font-size: .88rem; color: var(--muted); margin-bottom: 16px; }

.chip--more { border-style: dashed; }
.chip--more svg { width: 14px; height: 14px; }

/* The trust strip only overlaps the hero when it directly follows it */
.trust-strip--flat { margin-top: 0; padding-block: clamp(8px, 2vw, 24px); }

/* ==========================================================================
   23. PLACE CARDS & RAILS
   Outstation destinations as photographs: a grid of them under each season
   on the outstation page, and two side-scrolling rails on the home page.
   ========================================================================== */
.place-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 12px;
}

.place-card {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  background: var(--navy-700);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.place-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.place-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10, 18, 28, .92) 0%, rgba(10, 18, 28, .58) 40%,
    rgba(10, 18, 28, .14) 72%, rgba(10, 18, 28, 0) 100%);
}
.place-card__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: block;
  padding: clamp(11px, 1.1vw, 15px);
  color: var(--white);
}
.place-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  font-weight: 600;
  line-height: 1.2;
}
.place-card__line {
  display: block;
  margin-top: 5px;
  font-size: .73rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .76);
}
.place-card__when {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 5px 9px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(10, 18, 28, .55);
  color: var(--sand);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.45;
  text-transform: uppercase;
  /* wraps instead of running off the tile — the two-window seasons are long */
  white-space: normal;
  overflow-wrap: break-word;
}
.place-card:hover,
.place-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.place-card:hover img,
.place-card:focus-visible img { transform: scale(1.06); }

/* Home page rails — every destination, at a fraction of the page height */
.rail-block + .rail-block { margin-top: clamp(24px, 2.8vw, 36px); }
.rail-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 14px;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--white);
}
.rail-title span {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(140px, 40vw, 194px);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) rgba(255, 255, 255, .08);
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); border-radius: var(--r-pill); }
.rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: var(--r-pill); }
.rail::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .45); }

/* Heading on the left, buttons on the right — used above the rails */
.section-head--row { max-width: none; display: grid; gap: 18px; align-items: end; }
.section-head--row > div:first-child { max-width: 640px; }
@media (min-width: 900px) {
  .section-head--row { grid-template-columns: 1fr auto; gap: 24px 40px; }
  .section-head--row .btn-row { justify-content: flex-end; }
  .place-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 16px; }
}

@media (max-width: 860px) {
  .season-list { grid-template-columns: 1fr; }
}